added initial legend functionality to ComponentMap

Author: guizzettic

src/app/components/StateRoute.tsx

@@ -61,14 +61,21 @@ const StateRoute = (props: StateRouteProps) => {
   const renderComponentMap = () => {
     if (hierarchy) {
       return (
-        <ComponentMap
-          viewIndex={viewIndex}
-          snapshots={snapshots}
-          x={x}
-          y={y}
-          k={k}
-          setZoomState={setZoomState}
-        />
+        <div>
+          <div>
+            <Legendary hierarchy={hierarchy} />
+          </div>
+          <div>
+            <ComponentMap
+              viewIndex={viewIndex}
+              snapshots={snapshots}
+              x={x}
+              y={y}
+              k={k}
+              setZoomState={setZoomState}
+            />
+          </div>
+        </div>
       );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
@@ -78,12 +85,11 @@ const StateRoute = (props: StateRouteProps) => {
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
   // if true involk render chart with hierarchy
   const renderHistory = () => {
-    console.log('hierarchy in stateroute is', hierarchy);
     if (hierarchy) {
       return (
         <div>
           <div>
-            <Legendary />
+            <Legendary hierarchy={hierarchy} />
           </div>
           <div>
             <History hierarchy={hierarchy} />

src/app/components/legend.tsx

@@ -4,11 +4,47 @@ import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
 
 // implement algorithm to check snapshot history and their respective colors
 const ordinalColorScale = scaleOrdinal<number, string>({
-  domain: [1, 2, 3, 4],
+  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 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 }) {
@@ -26,7 +62,7 @@ export default function Legendary({ events = false }: { events?: boolean }) {
                     if (events) alert(`clicked: ${JSON.stringify(label)}`);
                   }}
                 >
-                  <svg width={legendGlyphSize} height={legendGlyphSize}>
+                  <svg width={10} height={10}>
                     <rect
                       fill={label.value}
                       width={legendGlyphSize}
@@ -48,7 +84,7 @@ export default function Legendary({ events = false }: { events?: boolean }) {
           .legends {
             font-family: arial;
             font-weight: 900;
-            background-color: ${242529};
+            background-color: 242529;
             border-radius: 14px;
             padding: 24px 24px 24px 32px;
             overflow-y: auto;
@@ -76,7 +112,7 @@ function LegendVisual({
           .legend {
             line-height: 0.9em;
             color: #efefef;
-            font-size: 10px;
+            font-size: 9px;
             font-family: arial;
             padding: 10px 10px;
             float: left;