clean legend element

Author: guizzettic

src/app/components/StateRoute.tsx

@@ -18,7 +18,6 @@ import AtomsRelationship from './AtomsRelationship.jsx';
 import Example from './AtomsRelationship.jsx';
 import { ParentSize } from '@visx/responsive';
 import { Console } from 'console';
-// import { History } from './History';
 import Legendary from './legend';
 
 const History = require('./History').default;
@@ -61,21 +60,14 @@ const StateRoute = (props: StateRouteProps) => {
   const renderComponentMap = () => {
     if (hierarchy) {
       return (
-        <div>
-          <div>
-            <Legendary hierarchy={hierarchy} />
-          </div>
-          <div>
-            <ComponentMap
-              viewIndex={viewIndex}
-              snapshots={snapshots}
-              x={x}
-              y={y}
-              k={k}
-              setZoomState={setZoomState}
-            />
-          </div>
-        </div>
+        <ComponentMap
+          viewIndex={viewIndex}
+          snapshots={snapshots}
+          x={x}
+          y={y}
+          k={k}
+          setZoomState={setZoomState}
+        />
       );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;

src/app/components/legend.tsx

@@ -9,45 +9,47 @@ const ordinalColorScale = scaleOrdinal<number, string>({
   range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
 });
 
-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);
-  }
-  if (obj.children) {
-    obj.children.forEach((element) => {
-      displayArray(element);
-    });
-  }
-};
-// 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);
-
 const legendGlyphSize = 12;
 
-export default function Legendary({ events = false }: { events?: boolean }) {
+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);
+    }
+    if (obj.children) {
+      obj.children.forEach((element) => {
+        displayArray(element);
+      });
+    }
+  };
+  // 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);
+
   return (
     <div className="legends">
       <LegendVisual title="State Snapshots">
@@ -58,9 +60,9 @@ export default function Legendary({ events = false }: { events?: boolean }) {
                 <LegendItem
                   key={`legend-quantile-${i}`}
                   margin="0 5px"
-                  onClick={() => {
-                    if (events) alert(`clicked: ${JSON.stringify(label)}`);
-                  }}
+                  // onClick={() => {
+                  //   if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                  // }}
                 >
                   <svg width={10} height={10}>
                     <rect