Fix issue with barstacks snapshots stacking on top of each other in Comparison view by correcting the key of each rect

Author: Kevin Ngo

src/app/components/BarGraphComparison.tsx

@@ -9,6 +9,10 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
@@ -65,9 +69,12 @@ const tooltipStyles = {
 const BarGraphComparison = (props) => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data, comparison } = props;
-  console.log('props in BGComparison.tsx', props);
-  console.log('comparison in BGComparison.tsx', comparison);
 
+  console.log('comparison >>>', comparison);
+
+  // console.log('tabs in BGComp >>>', tabs);
+  const currentIndex = tabs[currentTab].sliderIndex;
+  console.log('sliderIndx outside of bargraph >>>', currentIndex);
   const {
     tooltipOpen,
     tooltipLeft,
@@ -87,15 +94,10 @@ const BarGraphComparison = (props) => {
   const getSeriesId = (d: series) => d.currentTab;
   const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
   const formatRenderTime = (time) => `${time} ms `;
-  const tabsComparison = [
-    !comparison ? null : `Series: ${comparison[0]['currentTab']}`,
-    `Series: ${currentTab}`,
-  ];
+
   // create visualization SCALES with cleaned data
   const snapshotIdScale = scaleBand<string>({
-    // domain: comparison.map(getSeriesId),
-    // domain: .map(getSnapshotId),
-    domain: getSnapshotId(data.barStack[0]),
+    domain: getSnapshotId(data.barStack[currentIndex]),
     padding: 0.2,
   });
 
@@ -114,10 +116,15 @@ const BarGraphComparison = (props) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
-
+  const filterSeries = (comparisonArray) => {
+    return comparisonArray.map((sessionName, idx) => {
+      return <MenuItem>{sessionName}</MenuItem>;
+    });
+  };
   // console.log('getSeriesID', getSeriesId());
   return (
     <div>
+      <h1>{`Current Snapshot: ${currentIndex + 1}`}</h1>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -152,12 +159,13 @@ const BarGraphComparison = (props) => {
             color={colorScale}
           >
             {(barStacks) =>
-              barStacks.map((barStack) => {
-                const bar = barStack.bars[0];
+              barStacks.map((barStack, idx) => {
+                const bar = barStack.bars[currentIndex];
+                console.log('data.barStack >>>', data.barStack);
 
                 return (
                   <rect
-                    key={`bar-stack-${bar.index}-NewView`}
+                    key={`bar-stack-${idx}-NewView`}
                     x={300}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
@@ -192,7 +200,7 @@ const BarGraphComparison = (props) => {
           </BarStack>
           <BarStack
             // Comparison Barstack
-            data={!comparison ? ['1', '2'] : comparison[0].data.barStack}
+            data={!comparison ? [] : comparison[0].data.barStack}
             // data={data.barStack}
             keys={keys}
             // x={getSnapshotId}
@@ -202,12 +210,12 @@ const BarGraphComparison = (props) => {
             color={colorScale}
           >
             {(barStacks) =>
-              barStacks.map((barStack) => {
-                const bar = barStack.bars[0];
-
+              barStacks.map((barStack, idx) => {
+                if (barStacks.length === 0) return <h1>No Comparison</h1>;
+                const bar = barStack.bars[currentIndex];
                 return (
                   <rect
-                    key={`bar-stack-${bar.index}-${bar.index}`}
+                    key={`bar-stack-${idx}-${bar.index}`}
                     x={bar.x + 50}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}

src/app/components/ComponentMap.tsx

@@ -10,14 +10,17 @@ import getLinkComponent from './getLinkComponent';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-
 const root = hierarchy({
   name: 'root',
   children: [
     { name: 'child #1' },
     {
       name: 'child #2',
-      children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }],
+      children: [
+        { name: 'grandchild #1' },
+        { name: 'grandchild #2' },
+        { name: 'grandchild #3' },
+      ],
     },
   ],
 });
@@ -45,7 +48,6 @@ export default function ComponentMap({
   margin = defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
-
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   // This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
   const lastNode = snapshots.length - 1;
@@ -103,8 +105,8 @@ export default function ComponentMap({
       />
 
       <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))}
@@ -118,9 +120,9 @@ export default function ComponentMap({
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    stroke='#ff6569'
-                    strokeWidth='1'
-                    fill='none'
+                    stroke="#ff6569"
+                    strokeWidth="1"
+                    fill="none"
                   />
                 ))}
 
@@ -130,7 +132,7 @@ export default function ComponentMap({
                     if (nodeLength < 5) return nodeLength + 40;
                     if (nodeLength < 10) return nodeLength + 60;
                     return nodeLength + 70;
-                  } 
+                  };
                   const width = widthFunc(node.data.name);
                   const height = 25;
 
@@ -168,39 +170,49 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill= {node.children ? '#161521' : '#62d6fb'}
+                          fill={node.children ? '#161521' : '#62d6fb'}
                           stroke={node.children ? '#62d6fb' : '#161521'}
                           strokeWidth={1}
                           strokeDasharray={node.children ? '0' : '2,2'}
-                          strokeOpacity='1'
-                          rx={node.children ? 4 : 10}                         
+                          strokeOpacity="1"
+                          rx={node.children ? 4 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
                             forceUpdate();
                           }}
-                          //check with recoil 
-                          onMouseLeave={()=> {
-                            if(Object.keys(node.data.recoilDomNode).length > 0){
-                              dispatch(onHoverExit(node.data.recoilDomNode[node.data.name]))
+                          //check with recoil
+                          onMouseLeave={() => {
+                            if (
+                              Object.keys(node.data.recoilDomNode).length > 0
+                            ) {
+                              dispatch(
+                                onHoverExit(
+                                  node.data.recoilDomNode[node.data.name]
+                                )
+                              );
                             } else {
-                              dispatch(onHoverExit(node.data.rtid))
+                              dispatch(onHoverExit(node.data.rtid));
                             }
                           }}
-                          onMouseEnter={()=> {
-                            if(Object.keys(node.data.recoilDomNode).length > 0){
-                              dispatch(onHover(node.data.recoilDomNode[node.data.name]))
+                          onMouseEnter={() => {
+                            if (
+                              Object.keys(node.data.recoilDomNode).length > 0
+                            ) {
+                              dispatch(
+                                onHover(node.data.recoilDomNode[node.data.name])
+                              );
                             } else {
-                              dispatch(onHover(node.data.rtid))
-                            }   
+                              dispatch(onHover(node.data.rtid));
+                            }
                           }}
                         />
                       )}
                       {/* Display text inside of each component node */}
                       <text
-                        dy='.33em'
+                        dy=".33em"
                         fontSize={10}
-                        fontFamily='Roboto'
-                        textAnchor='middle'
+                        fontFamily="Roboto"
+                        textAnchor="middle"
                         style={{ pointerEvents: 'none' }}
                         fill={
                           node.depth === 0