refactored traverse function to add data objects with componentState, renderTime, and rtid for each component

Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>

Author: 4 people

src/app/components/PerformanceVisx.tsx

@@ -74,32 +74,52 @@ const tooltipStyles = {
 
 /* DATA HANDLING HELPER FUNCTIONS */
 
-// traverses a snapshot for data: rendering time, component type, or rtid 
-const traverse = (snapshot, fetchData, data = {}) => {
-  console.log("data in beg of traverse: ", data )
+const traverse = (snapshot, data = {}) => {
   if (!snapshot.children[0]) return;
   snapshot.children.forEach((child, idx) => {
     const componentName = child.name + -[idx + 1];
-    // Get component Type
-    if (fetchData === 'getComponentType') {
-      if (child.state !== 'stateless') data[componentName] = 'stateful';
-      else data[componentName] = child.state;
+    if (!data.hasOwnProperty(componentName)) {
+      data[componentName] = {};
     }
+    // Get component Type
+    if (child.state !== 'stateless') data[componentName].componentState = 'stateful';
+    else data[componentName].componentState = child.state;
     // Get component Rendering Time
-    else if (fetchData === 'getRenderTime') {
-      const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5));
-      data[componentName] = renderTime;
-    }
-    else if (fetchData === 'getRtid') {
-      data[componentName] = child.rtid;
-    }
-    traverse(snapshot.children[idx], fetchData, data);
+    const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5));
+    data[componentName].renderTime = renderTime;
+    // Get rtid
+    data[componentName].rtid = child.rtid;
+    traverse(snapshot.children[idx], data);
   })
-  console.log("data in end of traverse: ", data )
   return data;
 };
 
-const getSnapshotIds = (obj, snapshotIds = []):string[] => {
+// traverses a snapshot for data: rendering time, component type, or rtid 
+// const traverse = (snapshot, fetchData, data = {}) => {
+//   // console.log("data in beg of traverse: ", data )
+//   if (!snapshot.children[0]) return;
+//   snapshot.children.forEach((child, idx) => {
+//     const componentName = child.name + -[idx + 1];
+//     // Get component Type
+//     if (fetchData === 'getComponentType') {
+//       if (child.state !== 'stateless') data[componentName] = 'stateful';
+//       else data[componentName] = child.state;
+//     }
+//     // Get component Rendering Time
+//     else if (fetchData === 'getRenderTime') {
+//       const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5));
+//       data[componentName] = renderTime;
+//     }
+//     else if (fetchData === 'getRtid') {
+//       data[componentName] = child.rtid;
+//     }
+//     traverse(snapshot.children[idx], fetchData, data);
+//   })
+//   // console.log("data in end of traverse: ", data )
+//   return data;
+// };
+
+const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
   if (obj.children) {
     obj.children.forEach(child => {
@@ -110,15 +130,15 @@ const getSnapshotIds = (obj, snapshotIds = []):string[] => {
 };
 
 // Returns array of snapshot objs each with components and corresponding render times
-const getPerfMetrics = (snapshots, snapshotsIds):any[] => {
+const getPerfMetrics = (snapshots, snapshotsIds): any[] => {
+  console.log('snapshots: ', snapshots)
   return snapshots.reduce((perfSnapshots, curSnapshot, idx) => {
-    return perfSnapshots.concat(traverse(curSnapshot, 'getRenderTime', { snapshotId: snapshotsIds[idx] }));
+    return perfSnapshots.concat(traverse(curSnapshot, { snapshotId: snapshotsIds[idx] }));
   }, []);
 };
 
 /* EXPORT COMPONENT */
 const PerformanceVisx = (props: BarStackProps) => {
-
   // hook used to dispatch onhover action in rect
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
 
@@ -128,19 +148,40 @@ const PerformanceVisx = (props: BarStackProps) => {
     tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
   } = useTooltip<TooltipData>();
   let tooltipTimeout: number;
-
+  console.log('tooltipdata: ', tooltipData)
   const { containerRef, TooltipInPortal } = useTooltipInPortal();
 
   // filter and structure incoming data for VISX
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
+  console.log('data:', data);
   const keys = Object.keys(data[0]).filter(d => d !== 'snapshotId');
-  const allComponentStates = traverse(snapshots[0], 'getComponentType');
-  const allComponentRtids = traverse(snapshots[snapshots.length-1], 'getRtid');
+  // const allComponentStates = traverse(snapshots[0], 'getComponentType');
+  // const allComponentRtids = traverse(snapshots[snapshots.length - 1], 'getRtid');
+  // console.log('allComponentRtids: ', allComponentRtids);
+  // const allComponentRtids = data.filter()
+  const getBarstackData = (data) => {
+    const dataArr = [];
+    data.forEach(snapshot => {
+      const dataObj = {};
+      for (let key in snapshot) {
+        if (key !== 'snapshotId') {
+          dataObj[key] = snapshot[key]['renderTime'];
+        } else {
+          dataObj[key] = snapshot[key];
+        }
+      }
+      dataArr.push(dataObj);
+    });
+    return dataArr;
+  };
+  const barstackData = getBarstackData(data);
 
   // create array of total render times for each snapshot
   const totalRenderArr = data.reduce((totalRender, curSnapshot) => {
+    // console.log('curSnapshot: ', curSnapshot);
+    // console.log('keys: ', keys);
     const curRenderTotal = keys.reduce((acc, cur) => {
-      acc += Number(curSnapshot[cur]);
+      acc += Number(curSnapshot[cur].renderTime);
       return acc;
     }, 0);
     totalRender.push(curRenderTotal);
@@ -149,11 +190,26 @@ const PerformanceVisx = (props: BarStackProps) => {
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  
+
   const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
-  
+
   const formatRenderTime = (time) => `${time} ms `;
 
+  const getTooltipStates = (data) => {
+    const snapshotObj = {};
+    data.forEach(snapshot => {
+      snapshotObj[snapshot.snapshotId] = {};
+      for (let key in snapshot) {
+        if (key !== 'snapshotId') {
+          snapshotObj[snapshot.snapshotId][key] = snapshot[key].componentState;
+        }
+      }
+    });
+    return snapshotObj;
+  }
+  const tooltipStates = getTooltipStates(data);
+  console.log('tooltipStates: ', tooltipStates);
+
   // create visualization SCALES with cleaned data
   const snapshotIdScale = scaleBand<string>({
     domain: data.map(getSnapshotId),
@@ -203,15 +259,15 @@ const PerformanceVisx = (props: BarStackProps) => {
         />
         <Group top={margin.top} left={margin.left}>
           <BarStack
-            data={data}
+            data={barstackData}
             keys={keys}
             x={getSnapshotId}
             xScale={snapshotIdScale}
             yScale={renderingScale}
             color={colorScale}
           >
-            {barStacks => 
-              barStacks.map(barStack => 
+            {barStacks =>
+              barStacks.map(barStack =>
                 barStack.bars.map(((bar, idx) => (
                   <rect
                     key={`bar-stack-${barStack.index}-${bar.index}`}
@@ -223,14 +279,17 @@ const PerformanceVisx = (props: BarStackProps) => {
                     /* TIP TOOL EVENT HANDLERS */
                     // Hides tool tip once cursor moves off the current rect
                     onMouseLeave={() => {
-                      dispatch(onHoverExit(allComponentRtids[bar.key]),
-                      tooltipTimeout = window.setTimeout(() => {
-                        hideTooltip()
-                      }, 300))
+                      console.log('bar: ', bar);
+                      console.log('barstack', barStack);
+                      console.log('onHoverExit arg:', data[data.length-1][bar.key].rtid);
+                      dispatch(onHoverExit(data[data.length-1][bar.key]['rtid']),
+                        tooltipTimeout = window.setTimeout(() => {
+                          hideTooltip()
+                        }, 300))
                     }}
-                        // Cursor position in window updates position of the tool tip
+                    // Cursor position in window updates position of the tool tip
                     onMouseMove={event => {
-                      dispatch(onHover(allComponentRtids[bar.key]))
+                      dispatch(onHover(data[data.length-1][bar.key]['rtid']))
                       if (tooltipTimeout) clearTimeout(tooltipTimeout);
                       const top = event.clientY - margin.top - bar.height;
                       const left = bar.x + bar.width / 2;
@@ -290,7 +349,7 @@ const PerformanceVisx = (props: BarStackProps) => {
             <strong>{tooltipData.key}</strong>
             {' '}
           </div>
-          <div>{allComponentStates[tooltipData.key]}</div>
+          <div>{tooltipStates[tooltipData.bar.data.snapshotId][tooltipData.key]}</div>
           <div>
             {' '}
             {formatRenderTime(tooltipData.bar.data[tooltipData.key])}