fully responsive legend component, optimized to match branch of d3 component

Co-authored-by: Alex Landeros <Alexander.Landeros1@gmail.com>

Author: guizzettic

src/app/components/History.tsx

@@ -1,6 +1,6 @@
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
-import LegendKey from './Legend';
+import LegendKey from './legend';
 import { changeView, changeSlider } from '../actions/actions';
 // import { useStoreContext } from '../store';
 // import { string } from 'prop-types';

src/app/components/StateRoute.tsx

@@ -17,7 +17,7 @@ import ComponentMap from './ComponentMap';
 // import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
 import PerformanceVisx from './PerformanceVisx';
-import ZoomI from './zoomFt';
+// import ZoomI from './zoomFt';
 // import History from './History'
 
 import { changeView, changeSlider } from '../actions/actions';
@@ -81,23 +81,7 @@ const StateRoute = (props: StateRouteProps) => {
   //* we wrap History in a ParentSize div, in order to make use of Visx's Zoom functionality
   const renderHistory = () => {
     if (hierarchy) {
-      // console.log(`width is ${width} and height is ${height}`);
-      return (
-        <div>
-          <ParentSize>
-            {({ width, height }) => (
-              <History
-                width={535}
-                height={481}
-                hierarchy={hierarchy}
-                dispatch={dispatch}
-                sliderIndex={sliderIndex}
-                viewIndex={viewIndex}
-              />
-            )}
-          </ParentSize>
-        </div>
-      );
+      return <History hierarchy={hierarchy} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };

src/app/components/legend.tsx

@@ -11,7 +11,7 @@ type snapHierarchy = {`Record<string, unknown>`}
 
 export default function LegendKey(props: snapHierarchy) {
   const { hierarchy } = props;
-  console.log('which ends up being, hierarchy: ', hierarchy);
+  // console.log('which ends up being, hierarchy: ', hierarchy);
 
   // We are taking the array of displayNames and sifting through them and placing each set of
   // branches as a key in an object, { '.0': [1.0, 2.0, 3.0, 4.0], '.1': [1.1, 2.1, 3.1,...], '.2': [....]}
@@ -117,6 +117,7 @@ export default function LegendKey(props: snapHierarchy) {
       <style jsx>
         {`
           .legends {
+            position: center;
             width: 25%;
             font-family: arial;
             font-weight: 900;