added initial legends component to History component

Author: guizzettic

src/app/components/History.tsx

@@ -1,5 +1,6 @@
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
+import Example from './legend';
 
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -30,7 +31,6 @@ const filterHooks = (data: any[]) => {
   return JSON.stringify(data[0].state);
 };
 
-
 /**
  * @method maked3Tree :Creates a new D3 Tree
  */
@@ -68,7 +68,7 @@ function History(props) {
     const g = svgContainer
       .append('g')
       // this is changing where the graph is located physically
-      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`)
+      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`);
 
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
@@ -83,7 +83,6 @@ function History(props) {
 
     const d3root = tree(hierarchy);
 
-    
     g.selectAll('.link')
       // root.links() gets an array of all the links,
       // where each element is an object containing a
@@ -109,12 +108,12 @@ function History(props) {
       .append('g')
       .style('fill', function (d) {
         let loadTime;
-        if (d.data.stateSnapshot.children[0].componentData.actualDuration){
-          loadTime = d.data.stateSnapshot.children[0].componentData.actualDuration;
-        } else{
+        if (d.data.stateSnapshot.children[0].componentData.actualDuration) {
+          loadTime =
+            d.data.stateSnapshot.children[0].componentData.actualDuration;
+        } else {
           loadTime = 1;
         }
-          
 
         if (loadTime !== undefined) {
           if (loadTime > 16) {
@@ -255,7 +254,8 @@ function History(props) {
 
   return (
     <>
-      <div ref={HistoryRef} className="history-d3-div" id="historyContainer"/>
+      <div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
+      {/* <Example /> */}
     </>
   );
 }

src/app/components/StateRoute.tsx

@@ -16,9 +16,9 @@ import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
 import Example from './AtomsRelationship.jsx';
-import { ParentSize } from '@visx/responsive'
+import { ParentSize } from '@visx/responsive';
 import { Console } from 'console';
-
+import Legendary from './legend';
 
 const History = require('./History').default;
 
@@ -79,20 +79,21 @@ const StateRoute = (props: StateRouteProps) => {
   // if true involk render chart with hierarchy
   const renderHistory = () => {
     if (hierarchy) {
-      return <History hierarchy={hierarchy} />;
+      return (
+        <History hierarchy={hierarchy} />;
+        <Legendary />
+      );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   const renderAtomsRelationship = () => (
-
-    <ParentSize>{({ width, height })  => 
-    <Example 
-    width={width} 
-    height={height}
-    snapshots = {snapshots} />}
+    <ParentSize>
+      {({ width, height }) => (
+        <Example width={width} height={height} snapshots={snapshots} />
+      )}
     </ParentSize>
-    
+
     //   atomsComponents={snapshot.atomsComponents}
     //   atomSelectors={snapshot.atomSelectors}
     // />