Built new component map with all supporting files

Author: AlexanderLanderos

src/app/components/ComponentMap.tsx

@@ -145,20 +145,18 @@ const ComponentMap = (props: componentMapProps) => {
 
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
-       
-            d3.select(this)
-              .append('text')
-              .text(() => {
-                return JSON.stringify(d.data.state);
-              })
-              .attr('x', -25)
-              .attr('y', 20)
-              .style('font-size', `.6rem`)
-              .style('fill', 'white')
-              .attr('stroke', 'white')
-              .attr('stroke-width', .5)
-              .attr('id', `popup${i}`);
-          
+          d3.select(this)
+            .append('text')
+            .text(() => {
+              return JSON.stringify(d.data.state);
+            })
+            .attr('x', -25)
+            .attr('y', 20)
+            .style('font-size', `.6rem`)
+            .style('fill', 'white')
+            .attr('stroke', 'white')
+            .attr('stroke-width', 0.5)
+            .attr('id', `popup${i}`);
         });
         nodeEnter.on('mouseout', function (d: any, i: number): any {
           d3.select(`#popup${i}`).remove();
@@ -221,22 +219,22 @@ const ComponentMap = (props: componentMapProps) => {
       svgContainer.call(
         zoom.transform,
         // Changes the initial view, (left, top)
-        d3.zoomIdentity.translate(x, y).scale(k)
+        d3.zoomIdentity.translate(x, y).scale(k),
       );
 
       // allows the canvas to be zoom-able
       svgContainer.call(
         d3
           .zoom()
           .scaleExtent([0.15, 1.5]) // [zoomOut, zoomIn]
-          .on('zoom', zoomed)
+          .on('zoom', zoomed),
       );
       function zoomed(d: any) {
         svg
           .attr('transform', d3.event.transform)
           .on(
             'mouseup',
-            setZoomState(d3.zoomTransform(d3.select('#canvas').node()))
+            setZoomState(d3.zoomTransform(d3.select('#canvas').node())),
           );
       }
 
@@ -246,12 +244,12 @@ const ComponentMap = (props: componentMapProps) => {
       // call update on node click
       update(root);
     },
-    [data]
+    [data],
   );
 
   return (
-    <div data-testid="canvas" id="componentMapContainer">
-      <svg id="canvas"></svg>
+    <div data-testid='canvas' id='componentMapContainer'>
+      <svg id='canvas'></svg>
     </div>
   );
 };

src/app/components/Example.tsx

@@ -6,6 +6,7 @@ import { pointRadial } from 'd3-shape';
 import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
+import { node } from 'prop-types';
 
 interface TreeNode {
   name: string;
@@ -69,7 +70,18 @@ export default function Example({
   margin = defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
-  console.log('snapshots passed in', snapshots);
+  //-------------------------------------------------------------------
+  let obj = { name: 'root', children: snapshots };
+  console.log('obj', obj);
+
+  const nodeCreator = (node) => {
+    const lastNode = node.length - 1;
+    return node[lastNode];
+  };
+  const finalObj = nodeCreator(snapshots);
+  //-------------------------------------------------------------------
+
+  // console.log('snapshots children', snapshots.children);
   const [layout, setLayout] = useState<string>('cartesian');
   const [orientation, setOrientation] = useState<string>('horizontal');
   const [linkType, setLinkType] = useState<string>('diagonal');
@@ -102,7 +114,7 @@ export default function Example({
   }
 
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
-
+  console.log(data);
   return totalWidth < 10 ? null : (
     <div>
       <LinkControls
@@ -116,11 +128,13 @@ export default function Example({
         setStepPercent={setStepPercent}
       />
       <svg width={totalWidth} height={totalHeight}>
-        <LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
-        <rect width={totalWidth} height={totalHeight} rx={14} fill="#242529" />
+        <LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
+        <rect width={totalWidth} height={totalHeight} rx={14} fill='#242529' />
         <Group top={margin.top} left={margin.left}>
           <Tree
-            root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
+            root={hierarchy(finalObj, (d) =>
+              d.isExpanded ? null : d.children,
+            )}
             size={[sizeWidth, sizeHeight]}
             separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
           >
@@ -131,9 +145,9 @@ export default function Example({
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    stroke="rgb(254,110,158,0.6)"
-                    strokeWidth="1"
-                    fill="none"
+                    stroke='rgb(254,110,158,0.6)'
+                    strokeWidth='1'
+                    fill='none'
                   />
                 ))}
 
@@ -174,7 +188,7 @@ export default function Example({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="#272b4d"
+                          fill='#272b4d'
                           stroke={node.data.children ? '#03c0dc' : '#26deb0'}
                           strokeWidth={1}
                           strokeDasharray={node.data.children ? '0' : '2,2'}
@@ -188,10 +202,10 @@ export default function Example({
                         />
                       )}
                       <text
-                        dy=".33em"
+                        dy='.33em'
                         fontSize={9}
-                        fontFamily="Arial"
-                        textAnchor="middle"
+                        fontFamily='Arial'
+                        textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
                         fill={
                           node.depth === 0