Merge with master after PRs 25 and 26

Author: haejinjo

package-lock.json

@@ -124,6 +124,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,40 @@
-import React, { Component, useEffect, useState } from 'react';
-// import * as d3 from 'd3';
-// import {sankey} from 'sankey';
-import { Chart } from 'react-google-charts';
-
-/**
- * @method maked3Tree :Creates a new D3 Tree
- */
+import React, { Component, useEffect, useState, Fragment } from 'react';
+import { Chart } from 'react-google-charts'
 
 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; });
+  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 && (
+      <Fragment>
        <Chart
         width={'100%'}
         height={'100%'}
@@ -49,9 +68,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

@@ -140,7 +140,6 @@ function History(props) {
         tooltipDiv.transition().duration(50).style('opacity', 0.9);
 
         if (d.data.stateSnapshot.children[0].name === 'RecoilRoot') {
-          console.log('enter');
           isRecoil = true;
         }
         if (!isRecoil) {

src/app/components/History.tsx

@@ -35,19 +35,11 @@ const PerfView = (props: PerfViewProps) => {
   let { snapshots } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
-
-  //NEEDS REWRITE FOR RECOIL
-  // snapshots.forEach((snapshot) => snapshot.children[0].children.shift());
-  // console.log('SNAPSHOTS -------------------------->', snapshots);
-  // Figure out which snapshot index to use
 
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
   else indexToDisplay = viewIndex;
 
-  //console.log('SNAPSHOTS IN PERF VIEW', snapshots);
-  //console.log('VIEW INDEX', indexToDisplay);
-
   // Set up color scaling function
   const colorScale = d3
     .scaleOrdinal()

src/app/components/PerfView.tsx

@@ -39,9 +39,7 @@ interface StateRouteProps {
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
-  // let isRecoil = true;
-  // console.log('snapshot', snapshot)
-  // console.log(snapshot.AtomsRelationship)
+
   let isRecoil = snapshot.AtomsRelationship ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
@@ -66,10 +64,9 @@ const StateRoute = (props: StateRouteProps) => {
   // if true involk render chart with hierarchy
   const renderHistory = () => {
     if (hierarchy.children.length > 0) {
-
       return <History hierarchy={hierarchy} />;
     }
-    return <div className="noState">Application not compatible with history</div>;
+    return <div className="noState">History graph will render on first state change</div>;
   };
 
   const renderAtomsRelationship = () => {
@@ -85,10 +82,10 @@ const StateRoute = (props: StateRouteProps) => {
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
-  
+
   let perfChart;
   if (true) {
-    
+
     perfChart = (
       <PerfView
         viewIndex={viewIndex}
@@ -133,9 +130,9 @@ 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">
-        Relationships
+          Relationships
         </NavLink>}
 
         <NavLink

src/app/components/StateRoute.tsx

@@ -6,23 +6,7 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
-
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-const colors =  {
+const colors = {
   scheme: 'paraiso',
   author: 'jan t. sott',
   base00: '#2f1e2e',
@@ -40,21 +24,30 @@ const colors =  {
   base0C: '#5bc4bf',
   base0D: '#06b6ef',
   base0E: '#815ba4',
-  base0F: '#e96ba8'
+  base0F: '#e96ba8',
 };
 
-const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
+const getItemString = (
+  type,
+  data: { state?: object | string; name: string; children: [] }
+) => {
   if (data && data.name) {
     return <span>{data.name}</span>;
   }
   return <span />;
 };
 
 interface TreeProps {
-  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; };
+  snapshot: {
+    name?: string;
+    componentData?: object;
+    state?: string | object;
+    stateSnaphot?: object;
+    children?: any[];
+  };
 }
 
-const Tree = (props:TreeProps) => {
+const Tree = (props: TreeProps) => {
   const { snapshot } = props;
 
   return (
@@ -65,8 +58,8 @@ const Tree = (props:TreeProps) => {
           theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw:any[]) => {
-            return (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null);
+          labelRenderer={(raw: any[]) => {
+            return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
           }}
         />
       )}

src/app/components/Tree.tsx

@@ -27,48 +27,31 @@ declare global {
     __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
   }
 }
-
 let fiberRoot = null;
-let isRecoil = false;
 let doWork = true;
 const circularComponentTable = new Set();
 let allAtomsRelationship = [];
+let isRecoil = false;
+
+// Simple check for whether our target app uses Recoil
+if (window[`$recoilDebugStates`]) {
+  isRecoil = true;
+}
 
 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();
+  const 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])
-  //     // )
-  //   }
-  // )
+  );
 }
 
-
 /**
  * @method sendSnapshot
  * @param snap The current snapshot
@@ -85,15 +68,11 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     snap.tree = new Tree('root', 'root');
   }
 
-  const payload = snap.tree.cleanTreeCopy(); // snap.tree.getCopy();
-  // console.log('here is payload', payload);
-  // console.log('here is recoil state', window[`$recoilDebugStates`]);
-  isRecoil ? getRecoilState() : ' ';
-
-  console.log('all atoms state', allAtomsRelationship)
-  // payload.recoilState = window[`$recoilDebugStates`];
-
-  isRecoil ? payload.AtomsRelationship = allAtomsRelationship : ' ';
+  const payload = snap.tree.cleanTreeCopy();
+  if (isRecoil) {
+    getRecoilState();
+    payload.AtomsRelationship = allAtomsRelationship;
+  }
 
   window.postMessage(
     {
@@ -116,7 +95,6 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
     const { current } = fiberRoot;
     circularComponentTable.clear();
     snap.tree = createTree(current);
-
   }
   sendSnapshot(snap, mode);
 }
@@ -212,25 +190,19 @@ function createTree(
   } = currentFiber;
 
   if (elementType?.name && isRecoil) {
-    console.log('Name here', elementType?.name)
-    // console.log('Here is the state', memoizedState);
     let pointer = memoizedState;
     while (pointer !== null && pointer !== undefined && pointer.next !== null) {
       pointer = pointer.next;
     }
-    // console.log('traverse the memoizedState 1', pointer.memoizedState);
-    // // 2nd 
-    // console.log('traverse the memoizedState 2', pointer.memoizedState[1]?.[0]);
+
     if (pointer?.memoizedState[1]?.[0].current) {
       const 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) {
       const 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']);
     }
   }
 
@@ -260,10 +232,7 @@ function createTree(
 
   let hooksIndex;
 
-  // Simple check for whether our target app uses Recoil
-  if (window[`$recoilDebugStates`]) {
-    isRecoil = true;
-  }
+
 
   const atomArray = [];
   atomArray.push(memoizedProps);