Merge pull request #12 from guizzettic/master

Additional Legend Component Functionality

Author: Theqwertypusher

src/app/components/History.tsx

@@ -34,9 +34,8 @@ const filterHooks = (data: any[]) => {
  * @method maked3Tree :Creates a new D3 Tree
  */
 
-export default function History(props) {
+function History(props) {
   let { hierarchy } = props;
-  console.log('hierarchy is', hierarchy);
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
   let HistoryRef = React.createRef(root); //React.createRef(root);
@@ -251,9 +250,12 @@ export default function History(props) {
       return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
     }
   };
+
   return (
     <>
       <div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
     </>
   );
 }
+
+export default History;

src/app/components/StateRoute.tsx

@@ -51,7 +51,6 @@ const StateRoute = (props: StateRouteProps) => {
   console.log(hierarchy)
 
   const isRecoil = snapshot.atomsComponents ? true : false;
-
   const [noRenderData, setNoRenderData] = useState(false);
 
   // component map zoom state
@@ -72,7 +71,7 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   // the hierarchy gets set on the first click in the page
@@ -91,7 +90,7 @@ const StateRoute = (props: StateRouteProps) => {
         </div>
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   const renderAtomsRelationship = () => (
@@ -102,10 +101,6 @@ const StateRoute = (props: StateRouteProps) => {
     height={height}
     snapshots={snapshots} />}
     </ParentSize>
-
-    //   atomsComponents={snapshot.atomsComponents}
-    //   atomSelectors={snapshot.atomSelectors}
-    // />
   );
 
   // the hierarchy gets set on the first click in the page
@@ -115,7 +110,7 @@ const StateRoute = (props: StateRouteProps) => {
     if (hierarchy) {
       return <Tree snapshot={snapshot} />;
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   const renderPerfView = () => {
@@ -139,55 +134,55 @@ const StateRoute = (props: StateRouteProps) => {
         // />
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   return (
     <Router>
-      <div className='navbar'>
+      <div className="navbar">
         <NavLink
-          className='router-link'
-          activeClassName='is-active'
+          className="router-link"
+          activeClassName="is-active"
           exact
-          to='/'
+          to="/"
         >
           Tree
         </NavLink>
         <NavLink
-          className='router-link'
-          activeClassName='is-active'
-          to='/history'
+          className="router-link"
+          activeClassName="is-active"
+          to="/history"
         >
           History
         </NavLink>
-        <NavLink className='router-link' activeClassName='is-active' to='/map'>
+        <NavLink className="router-link" activeClassName="is-active" to="/map">
           Map
         </NavLink>
 
         {isRecoil && (
           <NavLink
-            className='router-link'
-            activeClassName='is-active'
-            to='/relationship'
+            className="router-link"
+            activeClassName="is-active"
+            to="/relationship"
           >
             AtomsRecoil
           </NavLink>
         )}
 
         <NavLink
-          className='router-link'
-          activeClassName='is-active'
-          to='/performance'
+          className="router-link"
+          activeClassName="is-active"
+          to="/performance"
         >
           Performance
         </NavLink>
       </div>
       <Switch>
-        <Route path='/map' render={renderComponentMap} />
-        <Route path='/history' render={renderHistory} />
-        <Route path='/relationship' render={renderAtomsRelationship} />
-        <Route path='/performance' render={renderPerfView} />
-        <Route path='/' render={renderTree} />
+        <Route path="/map" render={renderComponentMap} />
+        <Route path="/history" render={renderHistory} />
+        <Route path="/relationship" render={renderAtomsRelationship} />
+        <Route path="/performance" render={renderPerfView} />
+        <Route path="/" render={renderTree} />
       </Switch>
     </Router>
   );

src/app/components/legend.tsx

@@ -3,52 +3,48 @@ import { scaleOrdinal } from '@visx/scale';
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
 
 // implement algorithm to check snapshot history and their respective colors
-const ordinalColorScale = scaleOrdinal<number, string>({
-  domain: [1.0, 2.0, 3.0, 4.0, 4.1, 4.2, 5.0, 5.1, 5.2],
-  // sync in with the snapshot color chosen in history tab already
-  range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
-});
 
 const legendGlyphSize = 12;
 
 export default function Legendary(props: any) {
   // { events = false }: { events?: boolean }) {
-  const displayArray = (obj: {
-    stateSnapshot: { children: any[] };
-    name: number;
-    branch: number;
-    index: number;
-    children?: [];
-  }) => {
-    if (
-      obj.stateSnapshot.children.length > 0 &&
-      obj.stateSnapshot.children[0] &&
-      obj.stateSnapshot.children[0].state &&
-      obj.stateSnapshot.children[0].name
-    ) {
-      const newObj: Record<string, unknown> = {
-        index: obj.index,
-        displayName: `${obj.name}.${obj.branch}`,
-        state: obj.stateSnapshot.children[0].state,
-        componentName: obj.stateSnapshot.children[0].name,
-        componentData:
-          JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}'
-            ? ''
-            : obj.stateSnapshot.children[0].componentData,
-      };
-      hierarchyArr.push(newObj);
-    }
+
+  const { hierarchy } = props;
+
+  const getSnapshotIds = (obj, snapshotIds = []) => {
+    snapshotIds.push(`${obj.name}.${obj.branch}`);
     if (obj.children) {
-      obj.children.forEach((element) => {
-        displayArray(element);
+      obj.children.forEach((child) => {
+        getSnapshotIds(child, snapshotIds);
       });
     }
+    return snapshotIds;
   };
-  // the hierarchy gets set on the first click in the page
-  // when page in refreshed we may not have a hierarchy so we need to check if hierarchy was initialized
-  // if true involk displayArray to display the hierarchy
-  // if (hierarchy) displayArray(hierarchy);
-  console.log('Inside Legendary, props is', props);
+
+  const snap = getSnapshotIds(hierarchy);
+
+  const ordinalColorScale = scaleOrdinal<number, string>({
+    domain: snap,
+    // sync in with the snapshot color chosen in history tab already
+    range: [
+      '#95B6B7',
+      '#475485',
+      '#519331',
+      '#AA5039',
+      '#8B2F5F',
+      '#C5B738',
+      '#858DFF',
+      '#FF8D02',
+      '#FFCD51',
+      '#ACDAE6',
+      '#FC997E',
+      '#CF93AD',
+      '#AA3939',
+      '#AA6C39',
+      '#226666',
+      '#2C4870',
+    ],
+  });
 
   return (
     <div className="legends">