fixes legend issue, now legend key on state change

Author: guizzettic

src/app/components/StateRoute.tsx

@@ -18,10 +18,7 @@ import AtomsRelationship from './AtomsRelationship.jsx';
 import Example from './AtomsRelationship.jsx';
 import { ParentSize } from '@visx/responsive';
 import { Console } from 'console';
-<<<<<<< HEAD
 import Legendary from './legend';
-=======
->>>>>>> staging
 
 const History = require('./History').default;
 
@@ -50,10 +47,6 @@ const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
 
   const isRecoil = snapshot.atomsComponents ? true : false;
-<<<<<<< HEAD
-=======
-
->>>>>>> staging
   const [noRenderData, setNoRenderData] = useState(false);
 
   // component map zoom state
@@ -74,7 +67,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
@@ -93,7 +86,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,13 +95,6 @@ const StateRoute = (props: StateRouteProps) => {
         <Example width={width} height={height} snapshots={snapshots} />
       )}
     </ParentSize>
-<<<<<<< HEAD
-
-    //   atomsComponents={snapshot.atomsComponents}
-    //   atomSelectors={snapshot.atomSelectors}
-    // />
-=======
->>>>>>> staging
   );
 
   // the hierarchy gets set on the first click in the page
@@ -118,7 +104,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 = () => {
@@ -133,55 +119,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,52 @@ 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);
-    }
+
+  console.log('successfully invoke Legendary function call');
+  const { hierarchy } = props;
+  console.log('and hierarchy being passed in is', hierarchy);
+
+  const getSnapshotIds = (obj, snapshotIds = []) => {
+    console.log('obj.name is', obj.name);
+    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);
+  console.log('passing hierarchy as an object to getSnapshotIds is -->', snap);
+
+  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">