(added, verified) getSnapshotIds algo to clean incoming data

Author: Theqwertypusher

src/app/components/PerformanceVisx.tsx

@@ -30,6 +30,7 @@ export type BarStackProps = {
   margin?: { top: number; right: number; bottom: number; left: number };
   events?: boolean;
   snapshots?: any;
+  hierarchy?: any;
 };
 
 /* DEFAULT STYLING */
@@ -49,7 +50,7 @@ const tooltipStyles = {
 /* DATA PREP FUNCTIONS */
 const getPerfMetrics = snapshots => {
   return snapshots.reduce((perfSnapshots, curSnapshot,idx)=> {
-    return perfSnapshots.concat(traverse(curSnapshot, {snapshot:idx+1}))
+    return perfSnapshots.concat(traverse(curSnapshot, {snapshot:++idx}))
   }, [])
 }
 
@@ -63,14 +64,24 @@ const traverse = (snapshot, perfSnapshot = {}) => {
   return perfSnapshot;
 }
 
+const getSnapshotIds = (obj, snapshotIds = []) => {
+  snapshotIds.push(`${obj.name}.${obj.branch}`);
+if (obj.children) {
+  obj.children.forEach(child => {
+    getSnapshotIds(child, snapshotIds);
+  });
+}
+return snapshotIds
+};
 
 /* EXPORT COMPONENT */
 export default function PerformanceVisx({
   width,
   height,
   events = false,
   margin = defaultMargin,
-  snapshots
+  snapshots,
+  hierarchy,
 }: BarStackProps)
 
 {
@@ -84,9 +95,9 @@ export default function PerformanceVisx({
   } = useTooltip<TooltipData>();
 
     /* DATA PREP */
-    const data = getPerfMetrics(snapshots);
-    console.log(data)
-
+    // const data = getPerfMetrics(snapshots);
+    const data = [...snapshots]
+    console.log('cleaned data', getPerfMetrics(snapshots, getSnapshotIds(hierarchy)))
 
   // array of all object keys
 const keys = Object.keys(data[0]).filter((d) => d !== "snapshot") as CityName[];

src/app/components/StateRoute.tsx

@@ -48,6 +48,8 @@ interface StateRouteProps {
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
 
+  console.log(hierarchy)
+
   const isRecoil = snapshot.atomsComponents ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
@@ -113,11 +115,12 @@ const StateRoute = (props: StateRouteProps) => {
     if (hierarchy) {
       return (
         <ParentSize>{({ width, height }) => 
-        <PerformanceVisx 
-          width={width} 
-          height={height}
-          snapshots={snapshots}
-        />}
+          <PerformanceVisx 
+            width={width} 
+            height={height}
+            snapshots={snapshots}
+            hierarchy={hierarchy}
+          />}
         </ParentSize>
 
         // <PerfView

src/app/containers/ActionContainer.tsx

@@ -12,8 +12,6 @@ import Action from '../components/Action';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-
-
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
   if (slider) { slider.setAttribute('style', 'left: 0'); }
@@ -25,6 +23,7 @@ function ActionContainer() {
   let actionsArr = [];
   const hierarchyArr:any[] = [];
 
+  // function to traverse state from hiararchy and also getting information on display name and component name
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj:{stateSnapshot:{children:any[]}, name:number, branch:number, index:number, children?:[]}) => {
     if (obj.stateSnapshot.children.length > 0 && obj.stateSnapshot.children[0] && obj.stateSnapshot.children[0].state && obj.stateSnapshot.children[0].name) {