Merge branch 'implementAtomsMap' of https://github.com/hienqn/reactime into implementAtomsMap

Author: kevinfey

src/app/components/AtomsRelationship.jsx

@@ -113,7 +113,7 @@ function AtomsRelationship(props) {
   // let { hierarchy } = props;
   // let root = JSON.parse(JSON.stringify(hierarchy));
   // let HistoryRef = React.createRef(root); //React.createRef(root);
-
+  console.log('Props', props.atomsRel);
   useEffect(() => {
     maked3Tree();
   }, [root]);
@@ -164,52 +164,53 @@ function AtomsRelationship(props) {
   loader={<div>Loading Chart</div>}
   data={[
     ['From', 'To', 'Weight'],
-    ['Brazil', 'Portugal', 5],
-    ['Brazil', 'France', 1],
-    ['Brazil', 'Spain', 1],
-    ['Brazil', 'England', 1],
-    ['Canada', 'Portugal', 1],
-    ['Canada', 'France', 5],
-    ['Canada', 'England', 1],
-    ['Mexico', 'Portugal', 1],
-    ['Mexico', 'France', 1],
-    ['Mexico', 'Spain', 5],
-    ['Mexico', 'England', 1],
-    ['USA', 'Portugal', 1],
-    ['USA', 'France', 1],
-    ['USA', 'Spain', 1],
-    ['USA', 'England', 5],
-    ['Portugal', 'Angola', 2],
-    ['Portugal', 'Senegal', 1],
-    ['Portugal', 'Morocco', 1],
-    ['Portugal', 'South Africa', 3],
-    ['France', 'Angola', 1],
-    ['France', 'Senegal', 3],
-    ['France', 'Mali', 3],
-    ['France', 'Morocco', 3],
-    ['France', 'South Africa', 1],
-    ['Spain', 'Senegal', 1],
-    ['Spain', 'Morocco', 3],
-    ['Spain', 'South Africa', 1],
-    ['England', 'Angola', 1],
-    ['England', 'Senegal', 1],
-    ['England', 'Morocco', 2],
-    ['England', 'South Africa', 7],
-    ['South Africa', 'China', 5],
-    ['South Africa', 'India', 1],
-    ['South Africa', 'Japan', 3],
-    ['Angola', 'China', 5],
-    ['Angola', 'India', 1],
-    ['Angola', 'Japan', 3],
-    ['Senegal', 'China', 5],
-    ['Senegal', 'India', 1],
-    ['Senegal', 'Japan', 3],
-    ['Mali', 'China', 5],
-    ['Mali', 'India', 1],
-    ['Mali', 'Japan', 3],
-    ['Morocco', 'China', 5],
-    ['Morocco', 'India', 1],
-    ['Morocco', 'Japan', 3],
+        ...props.atomsRel
+    // ['Brazil', 'Portugal', 5],
+    // ['Brazil', 'France', 1],
+    // ['Brazil', 'Spain', 1],
+    // ['Brazil', 'England', 1],
+    // ['Canada', 'Portugal', 1],
+    // ['Canada', 'France', 5],
+    // ['Canada', 'England', 1],
+    // ['Mexico', 'Portugal', 1],
+    // ['Mexico', 'France', 1],
+    // ['Mexico', 'Spain', 5],
+    // ['Mexico', 'England', 1],
+    // ['USA', 'Portugal', 1],
+    // ['USA', 'France', 1],
+    // ['USA', 'Spain', 1],
+    // ['USA', 'England', 5],
+    // ['Portugal', 'Angola', 2],
+    // ['Portugal', 'Senegal', 1],
+    // ['Portugal', 'Morocco', 1],
+    // ['Portugal', 'South Africa', 3],
+    // ['France', 'Angola', 1],
+    // ['France', 'Senegal', 3],
+    // ['France', 'Mali', 3],
+    // ['France', 'Morocco', 3],
+    // ['France', 'South Africa', 1],
+    // ['Spain', 'Senegal', 1],
+    // ['Spain', 'Morocco', 3],
+    // ['Spain', 'South Africa', 1],
+    // ['England', 'Angola', 1],
+    // ['England', 'Senegal', 1],
+    // ['England', 'Morocco', 2],
+    // ['England', 'South Africa', 7],
+    // ['South Africa', 'China', 5],
+    // ['South Africa', 'India', 1],
+    // ['South Africa', 'Japan', 3],
+    // ['Angola', 'China', 5],
+    // ['Angola', 'India', 1],
+    // ['Angola', 'Japan', 3],
+    // ['Senegal', 'China', 5],
+    // ['Senegal', 'India', 1],
+    // ['Senegal', 'Japan', 3],
+    // ['Mali', 'China', 5],
+    // ['Mali', 'India', 1],
+    // ['Mali', 'Japan', 3],
+    // ['Morocco', 'China', 5],
+    // ['Morocco', 'India', 1],
+    // ['Morocco', 'Japan', 3],
   ]}
   rootProps={{ 'data-testid': '2' }}
 />

src/app/components/StateRoute.tsx

@@ -30,6 +30,7 @@ interface StateRouteProps {
     state?: string | object;
     stateSnaphot?: object;
     children?: any[];
+    AtomsRelationship: any[];
   };
   hierarchy: object;
   snapshots: [];
@@ -64,12 +65,9 @@ const StateRoute = (props: StateRouteProps) => {
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
-  console.log(3);
+
   const renderAtomsRelationship = () => {
-    if (hierarchy) {
-      return <AtomsRelationship hierarchy={hierarchy} />;
-    }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
   };
 
   // the hierarchy gets set on the first click in the page
@@ -129,6 +127,11 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink className="router-link" activeClassName="is-active" to="/map">
           Map
         </NavLink>
+        
+        {isRecoil && <NavLink className="router-link" activeClassName="is-active" to="/relationship">
+          Atoms Relationship
+        </NavLink>}
+
         <NavLink
           className="router-link"
           activeClassName="is-active"
@@ -140,6 +143,7 @@ const StateRoute = (props: StateRouteProps) => {
       <Switch>
         <Route path="/map" render={renderComponentMap} />
         <Route path="/history" render={isRecoil ? renderAtomsRelationship:  renderHistory} />
+        <Route path="/relationship" render={renderAtomsRelationship} />
         <Route path="/performance" render={renderPerfView} />
         <Route path="/" render={renderTree} />
       </Switch>

src/backend/linkFiber.ts

@@ -54,6 +54,7 @@ declare global {
   }
 }
 
+let isRecoil = false;
 let doWork = true;
 const circularComponentTable = new Set();
 let allAtomsRelationship = [];
@@ -107,11 +108,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const payload = snap.tree.cleanTreeCopy(); // snap.tree.getCopy();
     // console.log('here is payload', payload);
     // console.log('here is recoil state', window[`$recoilDebugStates`]);
-    getRecoilState();
+    isRecoil ? getRecoilState() : ' ' ;
+    
     console.log('all atoms state', allAtomsRelationship)
     // payload.recoilState = window[`$recoilDebugStates`];
-    payload.AtomsRelationship = allAtomsRelationship;
 
+    isRecoil ? payload.AtomsRelationship = allAtomsRelationship : ' ';
+    
     window.postMessage(
       {
         action: 'recordSnap',
@@ -170,7 +173,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       treeBaseDuration,
     } = currentFiber;
 
-    if (elementType?.name) {
+    if (elementType?.name && isRecoil) {
       console.log('Name here', elementType?.name)
       // console.log('Here is the state', memoizedState);
       let pointer = memoizedState;
@@ -218,7 +221,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     }
 
     let hooksIndex;
-    let isRecoil = false;
 
     if (window[`$recoilDebugStates`]) {
       isRecoil = true;