Merge pull request #25 from hienqn/implementAtomsMap

Parsed through the fiber tree to get atoms and components data to render onto the front end, added new feature to select what to render

Author: haejinjo

package-lock.json

@@ -120,6 +120,7 @@
     "react-dom": "^16.13.1",
     "react-google-chart": "^0.1.2",
     "react-google-charts": "^3.0.15",
+    "react-google-charts-ts": "^0.1.1",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",

package.json

@@ -1,21 +1,53 @@
-import React, { Component, useEffect, useState } from 'react';
+import React, { Component, useEffect, useState, Fragment } from 'react';
 // import * as d3 from 'd3';
 // import {sankey} from 'sankey';
-import { Chart } from 'react-google-charts';
+import { Chart } from 'react-google-charts'
+
+// import { Fragment } from '../../backend/types/backendTypes';
 
 /**
  * @method maked3Tree :Creates a new D3 Tree
  */
 
 function AtomsRelationship(props) {
-  console.log('Props', props.atomsRel);
 
   const {atomsRel} = props
 
 
+  const atomsAndComp = atomsRel.filter(e => e[2] !== 'atoms and selectors').map(e => { 
+    let copy = [...e];
+    copy[2] = 1; 
+    return [...copy] 
+  })
+  const atomsAndSelectors = atomsRel.filter(e => e[2] === 'atoms and selectors').map(e => {
+    let copy = [...e];
+    copy[2] = 1;
+    return [...copy]
+  })  
+  const copyatomsRel = atomsRel.map(e => { let copy = [...e]; copy[2] = 1; return copy; });
+
+  // console.log('atoms and selectors', atomsAndSelectors);
+  // console.log('copy Atom rel', copyatomsRel);
+  // console.log('initial atom rel', atomsRel);
+  const [atoms, setAtoms] = useState([...copyatomsRel]);
+  const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
+  const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
+
+  useEffect( () => {
+    if ((!atomAndSelectorCheck && !atomAndCompCheck) || (atomAndSelectorCheck && atomAndCompCheck)) {
+      setAtoms(copyatomsRel);
+    } else if (atomAndSelectorCheck) {
+      setAtoms(atomsAndSelectors);
+    } else {
+      setAtoms(atomsAndComp);
+    }
+  }, [atomAndSelectorCheck, atomAndCompCheck, props])
+
   return (
-    <div className="history-d3-container" id="atomsContainer">
-     {atomsRel && (
+    <div className="history-d3-container">
+      {atoms && (
+      //  <div>
+      <Fragment>
        <Chart
         width={'100%'}
         height={'100%'}
@@ -49,9 +81,19 @@ function AtomsRelationship(props) {
           tooltip: { textStyle: { color: 'white', fontSize: 0.1, }},
         }}
         loader={<div>Loading Chart</div>}
-        data={[['Atom', 'Selector', ''], ...atomsRel]}
+            data={[['Atom', 'Selector', ''], ...atoms]}
         rootProps={{ 'data-testid': '1' }}
-      />)}
+      />
+      <div>
+            <input type="checkbox" id='atomscomps' onClick={e => setAtomAndCompCheck(atomAndCompCheck ? false: true)}/>
+            <label htmlFor="atomscomps"> Only Show Atoms (or Selectors) and Components </label>
+            <input type="checkbox" id='atomsselectors' onClick={e => setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)} />
+            <label htmlFor="atomsselectors"> Only Show Atoms and Selectors </label>
+      </div>
+        </Fragment>
+      )
+        
+      }
     </div>
   );
 }

src/app/components/AtomsRelationship.jsx

@@ -60,37 +60,17 @@ const circularComponentTable = new Set();
 let allAtomsRelationship = [];
 
 function getRecoilState() : any {
-  // get the last state snapshot
   const RecoilSnapshotsLength = window[`$recoilDebugStates`].length;
   const lastRecoilSnapshot = window[`$recoilDebugStates`][RecoilSnapshotsLength - 1];
-  console.log(lastRecoilSnapshot);
-
-  // get all atom - selector pairs, and save them as nodes
-  // in the from to weight format
   const nodeToNodeSubs = lastRecoilSnapshot.nodeToNodeSubscriptions;
   let nodeToNodeSubsKeys = lastRecoilSnapshot.nodeToNodeSubscriptions.keys();
   nodeToNodeSubsKeys.forEach( 
     node => {
       nodeToNodeSubs.get(node).forEach(
-        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 1])
+        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 'atoms and selectors'])
       )
     }
   )
-
-  // get all atom - component pairs, and save them as nodes
-  // in the from to weight format
-
-  // const nodeToCompSubs = lastRecoilSnapshot.nodeToComponentSubscriptions;
-  // console.log(nodeToCompSubs);
-  // let nodeToCompSubsKeys = lastRecoilSnapshot.nodeToComponentSubscriptions.keys();
-  // nodeToCompSubsKeys.forEach( 
-  //   node => {
-  //     console.log(node);
-  //     // nodeToCompSubsKeys.get(node).forEach(
-  //     //   nodeSubs => allAtomsRelationship.push([node, nodeSubs, 2])
-  //     // )
-  //   }
-  // )
 }
 
 
@@ -186,13 +166,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       if (pointer?.memoizedState[1]?.[0].current) {
         let atomName = pointer.memoizedState[1]?.[0].current.keys().next().value;
         console.log('atom', pointer.memoizedState[1]?.[0].current.keys().next().value);
-        allAtomsRelationship.push([atomName, elementType?.name, 1])
+        allAtomsRelationship.push([atomName, elementType?.name, 'atoms and components'])
       }
 
       if (pointer?.memoizedState[1]?.[0].key) {
         let atomName = pointer.memoizedState[1]?.[0].key;
         console.log('atom', pointer.memoizedState[1]?.[0].key);
-        allAtomsRelationship.push([atomName, elementType?.name, 1])
+        allAtomsRelationship.push([atomName, elementType?.name, 'atoms and components'])
       }
     }
 
@@ -276,17 +256,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
             state.component
           );
           componentData.hooksIndex = hooksIndex;
-
-          // if (newState && newState.hooksState) {
-          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
-          // } else if (newState) {
-          //   newState.hooksState = [{ [hooksNames[i]]: state.state }];
-          // } else {
-          //   newState = { hooksState: [] };
-          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
-          // }
-
-          //improves tree visualization but breaks jump
           if (newState && newState.hooksState) {
             newState.push(state.state);
           } else if (newState) {
@@ -399,18 +368,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
   }
 
   return () => {
-    /*     const container = document.getElementById('root');
-    if (container._internalRoot) {
-      fiberRoot = container._internalRoot;
-    } else {
-      const {
-        _reactRootContainer: { _internalRoot },
-        _reactRootContainer,
-      } = container;
-      // Only assign internal root if it actually exists
-      fiberRoot = _internalRoot || _reactRootContainer;
-    }
- */
+
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;