modularizes visx legend element into separate file, and successfully renders history list and legend

Author: guizzettic

src/app/components/History.tsx

@@ -1,8 +1,5 @@
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
-// import Legendary from './legend';
-import { scaleOrdinal } from '@visx/scale';
-import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
 
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -26,102 +23,6 @@ const colors = [
   '#2C4870',
 ];
 
-/**
- *method of creating legend using Visx
- **/
-// where we set color scale for Legendary
-const ordinalColorScale = scaleOrdinal<number, string>({
-  domain: [1, 2, 3, 4],
-  // sync in with the snapshot color chosen in history tab already
-  range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
-});
-
-const legendGlyphSize = 12;
-
-function Legendary({ events = false }: { events?: boolean }) {
-  return (
-    <div className="legends">
-      <LegendVisual title="State Snapshots">
-        <LegendOrdinal scale={ordinalColorScale}>
-          {(labels) => (
-            <div style={{ display: 'flex', flexDirection: 'row' }}>
-              {labels.map((label, i) => (
-                <LegendItem
-                  key={`legend-quantile-${i}`}
-                  margin="0 5px"
-                  onClick={() => {
-                    if (events) alert(`clicked: ${JSON.stringify(label)}`);
-                  }}
-                >
-                  <svg width={legendGlyphSize} height={legendGlyphSize}>
-                    <rect
-                      fill={label.value}
-                      width={legendGlyphSize}
-                      height={legendGlyphSize}
-                    />
-                  </svg>
-                  <LegendLabel align="left" margin="0 0 0 4px">
-                    {label.text}
-                  </LegendLabel>
-                </LegendItem>
-              ))}
-            </div>
-          )}
-        </LegendOrdinal>
-      </LegendVisual>
-
-      <style jsx="true">
-        {`
-          .legends {
-            font-family: arial;
-            font-weight: 900;
-            background-color: black;
-            border-radius: 14px;
-            padding: 24px 24px 24px 32px;
-            overflow-y: auto;
-            flex-grow: 1;
-          }
-        `}
-      </style>
-    </div>
-  );
-}
-
-function LegendVisual({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="legend">
-      <div className="title">{title}</div>
-      {children}
-      <style jsx="true">
-        {`
-          .legend {
-            line-height: 0.9em;
-            color: #efefef;
-            font-size: 10px;
-            font-family: arial;
-            padding: 10px 10px;
-            float: left;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 8px;
-            margin: 5px 5px;
-          }
-          .title {
-            font-size: 12px;
-            margin-bottom: 10px;
-            font-weight: 100;
-          }
-        `}
-      </style>
-    </div>
-  );
-}
-
 const filterHooks = (data: any[]) => {
   if (data[0].children && data[0].state === 'stateless') {
     return filterHooks(data[0].children);
@@ -350,13 +251,11 @@ 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" />
-      {/* <Legendary /> */}
     </>
   );
 }
 
-export default History;
+export { History, Legendary };

src/app/components/StateRoute.tsx

@@ -18,9 +18,10 @@ 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;
+// const History = require('./History');
 
 const ErrorHandler = require('./ErrorHandler').default;
 
@@ -77,10 +78,17 @@ 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 (
-        <History hierarchy={hierarchy} />
-        // <Legendary />
+        <div>
+          <div>
+            <Legendary />
+          </div>
+          <div>
+            <History hierarchy={hierarchy} />
+          </div>
+        </div>
       );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;