adding toggle

Author: hienqn

src/app/components/AtomsRelationship.jsx

@@ -1,21 +1,52 @@
-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 { 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])
+
   return (
     <div className="history-d3-container">
-     {atomsRel && (
+      {atoms && (
+      //  <div>
+      <Fragment>
        <Chart
         width={'100%'}
         height={'100%'}
@@ -49,9 +80,19 @@ function AtomsRelationship(props) {
           tooltip: { textStyle: { color: 'gray', fontSize: 12 }},
         }}
         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/backend/linkFiber.ts

@@ -67,7 +67,7 @@ function getRecoilState() : any {
   nodeToNodeSubsKeys.forEach( 
     node => {
       nodeToNodeSubs.get(node).forEach(
-        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 1])
+        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 'atoms and selectors'])
       )
     }
   )
@@ -166,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'])
       }
     }
 
@@ -256,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) {