(add) Added a VISX legend to RecoilAtomsRelationship tab, still need to fix up CSS to make more visually appealing

Author: VNguyenCode

src/app/components/AtomsRelationship.tsx

@@ -6,16 +6,16 @@ import { LinkVertical } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
 import { StateRouteProps} from './StateRoute'
 
-const blue = '#acdbdf';
-const selectWhite = '#f0ece2';
+export const blue = '#acdbdf';
+export const selectWhite = '#f0ece2';
 
 export const lightgreen = '#0BAB64';
-const green = '#3BB78F'
-const orange = '#FED8B1';
+export const green = '#3BB78F'
+export const orange = '#FED8B1';
 
-const merlinsbeard = '#f7f7f3';
+export const merlinsbeard = '#f7f7f3';
 export const background = '#242529';
-const root = '#d2f5e3';
+export const root = '#d2f5e3';
 
 interface clusterShape {
   name?:string;
@@ -218,7 +218,7 @@ function SelectorNode({ node }) {
   );
 }
 
-const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
+const defaultMargin = { top: 0, left: 0, right: 0, bottom: 40 };
 
 // export type DendrogramProps = {
 //   width: number;

src/app/components/AtomsRelationshipLegend.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { scaleOrdinal } from '@visx/scale';
+import {
+  LegendOrdinal,
+  LegendItem,
+  LegendLabel,
+} from '@visx/legend';
+
+import {
+  green,
+  selectWhite,
+  orange,
+  blue
+} from './AtomsRelationship'
+
+const ordinalColorScale = scaleOrdinal({
+  domain: ['root', 'selectors', 'atoms', 'components'],
+  range: [ green, selectWhite, orange, blue],
+});
+
+const legendGlyphSize = 10;
+
+export default function Legend({ events = false }: { events?: boolean }) {
+  return (
+    <div className="legends">
+      <LegendDemo title="Recoil Relationships">
+        <LegendOrdinal scale={ordinalColorScale} labelFormat={label => `${label.toUpperCase()}`}>
+          {labels => (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {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}>
+                    <circle 
+                    fill={label.value}
+                    r={legendGlyphSize / 2}
+                    cx={legendGlyphSize / 2}
+                    cy={legendGlyphSize / 2}
+                    // width={legendGlyphSize} 
+                    // height={legendGlyphSize} 
+                    />
+                  </svg>
+                  <LegendLabel align="left" margin="0 0 0 4px">
+                    {label.text}
+                  </LegendLabel>
+                </LegendItem>
+              ))}
+            </div>
+          )}
+        </LegendOrdinal>
+      </LegendDemo>
+      <style jsx>{`
+        .legends {
+          font-family: arial;
+          font-weight: 900;
+          border-radius: 14px;
+          padding: 24px 24px 24px 32px;
+          overflow-y: auto;
+          flex-grow: 1;
+        }
+        .chart h2 {
+          margin-left: 10px;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="legend">
+      <div className="title">{title}</div>
+      {children}
+      <style jsx>{`
+        .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>
+  );
+}

src/app/components/StateRoute.tsx

@@ -13,13 +13,10 @@ import {
 } from 'react-router-dom';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap';
-// import PerfView from './PerfView';
-import AtomsRelationship from './AtomsRelationship';
 import PerformanceVisx from './PerformanceVisx';
-
+import Legend from './AtomsRelationshipLegend'
 import Example from './AtomsRelationship';
 import { ParentSize } from '@visx/responsive';
-import { Console } from 'console';
 import Legendary from './legend';
 
 const History = require('./History').default;
@@ -90,12 +87,14 @@ const StateRoute = (props: StateRouteProps) => {
   };
 
   const renderAtomsRelationship = () => (
-
     <ParentSize>{({ width, height })  => 
+    <>
+    <Legend />
     <Example 
     width={width} 
     height={height}
     snapshots={snapshots} />}
+    </>
     </ParentSize>
   );