(add) Incorporated legend with proper color schema in AtomRelationships tab using VISX library

Co-authored-by: Chris Guizzetti

Author: VNguyenCode

src/app/components/AtomsRelationship.tsx

@@ -5,6 +5,7 @@ import { Cluster, hierarchy } from '@visx/hierarchy';
 import { LinkVertical } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
 import { StateRouteProps} from './StateRoute'
+import Legend from './AtomsRelationshipLegend'
 
 export const blue = '#acdbdf';
 export const selectWhite = '#f0ece2';
@@ -190,7 +191,6 @@ function RootNode({ node }) {
 }
 
 function SelectorNode({ node }) {
-
     return (
       <Group top={node.y} left={node.x}>
       {node.depth !== 0 && (
@@ -218,7 +218,7 @@ function SelectorNode({ node }) {
   );
 }
 
-const defaultMargin = { top: 0, left: 0, right: 0, bottom: 40 };
+const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
 
 // export type DendrogramProps = {
 //   width: number;
@@ -242,11 +242,16 @@ export default function Example({
   const yMax = height - margin.top - margin.bottom;
 
   return width < 10 ? null : (
+    <>
+    <div>
+      <Legend 
+      hierarchy = {hierarchy} />
+    </div>
     <svg width={width} height={height}>
+      
       <LinearGradient id="top" from={lightgreen} to={green} />
 
       <rect width={width} height={height} rx={14} fill={background} />
-
       <Cluster root={data} size={[xMax, yMax]}>
         {(cluster) => (
           <Group top={margin.top} left={margin.left}>
@@ -267,5 +272,6 @@ export default function Example({
         )}
       </Cluster>
     </svg>
+    </>
   );
-}
+}

src/app/components/AtomsRelationshipLegend.tsx

@@ -6,27 +6,23 @@ import {
   LegendLabel,
 } from '@visx/legend';
 
-import {
-  green,
-  selectWhite,
-  orange,
-  blue
-} from './AtomsRelationship'
 
 const ordinalColorScale = scaleOrdinal({
-  domain: ['root', 'selectors', 'atoms', 'components'],
-  range: [ green, selectWhite, orange, blue],
+  domain: ['Root', 'Selectors', 'Atoms', 'Components'],
+  range: [ '#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'],
 });
 
-const legendGlyphSize = 10;
+const legendGlyphSize = 15;
 
 export default function Legend({ events = false }: { events?: boolean }) {
   return (
     <div className="legends">
       <LegendDemo title="Recoil Relationships">
-        <LegendOrdinal scale={ordinalColorScale} labelFormat={label => `${label.toUpperCase()}`}>
+        <LegendOrdinal scale={ordinalColorScale} labelFormat={label => `${label}`}>
           {labels => (
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div 
+            style={{ display: 'flex', flexDirection: 'column' }}
+            >
               {labels.map((label, i) => (
                 <LegendItem
                   key={`legend-quantile-${i}`}
@@ -41,11 +37,9 @@ export default function Legend({ events = false }: { events?: boolean }) {
                     r={legendGlyphSize / 2}
                     cx={legendGlyphSize / 2}
                     cy={legendGlyphSize / 2}
-                    // width={legendGlyphSize} 
-                    // height={legendGlyphSize} 
                     />
                   </svg>
-                  <LegendLabel align="left" margin="0 0 0 4px">
+                  <LegendLabel align="left" margin="4px 0px 4px 4px">
                     {label.text}
                   </LegendLabel>
                 </LegendItem>
@@ -54,19 +48,19 @@ export default function Legend({ events = false }: { events?: boolean }) {
           )}
         </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>
+      <style jsx>
+        {`
+          .legends {
+            width: 25%;
+            font-family: arial;
+            font-weight: 900;;
+            border-radius: 14px;
+            padding: 2px 2px 2px 2px;
+            overflow-y: auto;
+            flex-grow: 1;
+          }
+        `}
+      </style>
     </div>
   );
 }
@@ -78,15 +72,16 @@ function LegendDemo({ title, children }: { title: string; children: React.ReactN
       {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;
+         position: absolute;
+            top: 50;
+            left: 50;
+            line-height: 0.9em;
+            color: #efefef;
+            font-size: 9px;
+            font-family: arial;
+            padding: 10px 10px;
+            float: left;
+            margin: 5px 5px;
         }
         .title {
           font-size: 12px;

src/app/components/StateRoute.tsx

@@ -89,11 +89,11 @@ const StateRoute = (props: StateRouteProps) => {
   const renderAtomsRelationship = () => (
     <ParentSize>{({ width, height })  => 
     <>
-    <Legend />
+    {/* <Legend /> */}
     <Example 
     width={width} 
     height={height}
-    snapshots={snapshots} />}
+    snapshots={snapshots} />
     </>
     </ParentSize>
   );