Fixed breakage on save series & component details. Should pass tests now

Author: bmichare

src/app/components/PerformanceVisx.tsx

@@ -1,20 +1,27 @@
 /* eslint-disable guard-for-in */
-//* eslint-disable no-restricted-syntax */
+/* eslint-disable no-restricted-syntax */
 // @ts-nocheck
 import React, { useState } from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { ParentSize } from '@visx/responsive';
 import {
   MemoryRouter as Router,
   Route,
   NavLink,
   Switch,
 } from 'react-router-dom';
+import { Component } from 'react';
+import { render } from 'react-dom';
 import RenderingFrequency from './RenderingFrequency';
 // import Switch from '@material-ui/core/Switch';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import { useStoreContext } from '../store';
 // import snapshots from './snapshots';
+import snapshots from './snapshots';
+
 const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type'];
+
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
 Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -23,14 +30,16 @@ However, cycling between updating state and then emptying sometimes fixes the st
 to note - all snapshots do render (check HTML doc) within the chrome extension but they do
 not display because height is not consistently passed to each bar. This side effect is only
 seen in recoil apps...
-*/
+ */
+
 // typescript for PROPS from StateRoute.tsx
 interface BarStackProps {
   width: number;
   height: number;
   snapshots: [];
   hierarchy: any;
 }
+
 const makePropsPretty = data => {
   const propsFormat = [];
   const nestedObj = [];
@@ -52,6 +61,7 @@ const makePropsPretty = data => {
   }
   return propsFormat;
 };
+
 const collectNodes = (snaps, componentName) => {
   const componentsResult = [];
   const renderResult = [];
@@ -100,6 +110,7 @@ const collectNodes = (snaps, componentName) => {
       }
     }
   }
+
   const finalResults = componentsResult.map((e, index) => {
     const name = Object.keys(e)[0];
     e[name].rendertime = renderResult[index];
@@ -112,12 +123,15 @@ const collectNodes = (snaps, componentName) => {
   }
   return finalResults;
 };
+
 /* DATA HANDLING HELPER FUNCTIONS */
 const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
   if (!snapshot.children[0]) return;
+
   // loop through snapshots
   snapshot.children.forEach((child, idx) => {
     const componentName = child.name + -[idx + 1];
+
     // Get component Rendering Time
     const renderTime = Number(
       Number.parseFloat(child.componentData.actualDuration).toPrecision(5),
@@ -126,6 +140,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
     currTotalRender += renderTime;
     // components as keys and set the value to their rendering time
     data.barStack[data.barStack.length - 1][componentName] = renderTime;
+
     // Get component stateType
     if (!data.componentData[componentName]) {
       data.componentData[componentName] = {
@@ -142,7 +157,9 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
       data.componentData[componentName].renderFrequency++;
     }
     // else {
+
     // }
+
     // add to total render time
     data.componentData[componentName].totalRenderTime += renderTime;
     // Get rtid for the hovering feature
@@ -154,17 +171,21 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
   data.maxTotalRender = Math.max(currTotalRender, data.maxTotalRender);
   return data;
 };
+
 // Retrieve snapshot series data from Chrome's local storage.
 const allStorage = () => {
   const values = [];
   const keys = Object.keys(localStorage);
   let i = keys.length;
+
+
   while (i--) {
     const series = localStorage.getItem(keys[i]);
     values.push(JSON.parse(series));
   }
   return values;
 };
+
 // Gets snapshot Ids for the regular bar graph view.
 const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
@@ -175,6 +196,7 @@ const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   }
   return snapshotIds;
 };
+
 // Returns array of snapshot objs each with components and corresponding render times.
 const getPerfMetrics = (snapshots, snapshotsIds): {} => {
   const perfData = {
@@ -188,6 +210,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
   });
   return perfData;
 };
+
 /* EXPORT COMPONENT */
 const PerformanceVisx = (props: BarStackProps) => {
   // hook used to dispatch onhover action in rect
@@ -200,6 +223,7 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [comparisonData, setComparisonData] = useState();
   const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
+
   const renderComparisonBargraph = () => {
     if (hierarchy) {
       return (
@@ -212,17 +236,20 @@ const PerformanceVisx = (props: BarStackProps) => {
       );
     }
   };
+
   const renderBargraph = () => {
     if (hierarchy) {
       return <BarGraph data={data} width={width} height={height} />;
     }
   };
+
   const renderComponentDetailsView = () => {
     if (hierarchy) {
       return <RenderingFrequency data={data.componentData} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
+
   return (
     <Router>
       <div className="performance-nav-bar-container">
@@ -252,6 +279,7 @@ const PerformanceVisx = (props: BarStackProps) => {
           Component Details
         </NavLink>
       </div>
+
       <Switch>
         <Route path="/comparison" render={renderComparisonBargraph} />
         <Route path="/componentdetails" render={renderComponentDetailsView} />
@@ -260,4 +288,5 @@ const PerformanceVisx = (props: BarStackProps) => {
     </Router>
   );
 };
-export default PerformanceVisx;
+
+export default PerformanceVisx;

src/app/components/RenderingFrequency.tsx

@@ -1,59 +1,112 @@
-import React from 'react';
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { render } from 'react-dom';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-const RenderingFrequency = (props) => {
+const RenderingFrequency = props => {
   const perfData = props.data;
   return (
     <div>
-      {Object.keys(perfData).map((componentName) => {
+      {Object.keys(perfData).map(componentName => {
         const currentComponent = perfData[componentName];
         return (
           <ComponentCard
             componentName={componentName}
             stateType={currentComponent.stateType}
             averageRenderTime={(
-              currentComponent.totalRenderTime /
-              currentComponent.renderFrequency
+              currentComponent.totalRenderTime
+              / currentComponent.renderFrequency
             ).toFixed(3)}
             renderFrequency={currentComponent.renderFrequency}
             rtid={currentComponent.rtid}
+            information={perfData[componentName].information}
           />
         );
       })}
     </div>
   );
 };
-const ComponentCard = (props) => {
+
+const ComponentCard = props => {
   const {
     componentName,
     stateType,
     averageRenderTime,
     renderFrequency,
     rtid,
+    information,
   } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const onMouseMove = () => {
-    dispatch(onHover(rtid));
-  };
-  const onMouseLeave = () => {
-    dispatch(onHoverExit(rtid));
-  };
+  const [expand, setExpand] = useState(false);
+
+  // render time for each component from each snapshot
+  // differences in state change that happened prior;
+
+  const dataComponentArray = [];
+  for (let i = 0; i < information.length; i++) {
+    dataComponentArray.push(<DataComponent header={Object.keys(information[i])} paragraphs={Object.values(information[i])} />);
+  }
+
   return (
-    <div
-      onMouseLeave={onMouseLeave}
-      onMouseMove={onMouseMove}
-      className="StyledGridElement"
-    >
-      <div className="RenderLeft">
-        <h3>{componentName} </h3>
-        <h4>{stateType}</h4>
-        <h4>average time: {averageRenderTime} ms</h4>
+    <div className="borderStyling">
+      <div
+        className={expand ? 'ExpandStyledGridElement' : 'StyledGridElement'}
+      >
+        <div className="RenderLeft">
+          <h3>
+            {componentName}
+            {' '}
+          </h3>
+          <h4>{stateType}</h4>
+          <h4>
+            average time:
+            {' '}
+            {averageRenderTime}
+            {' '}
+            ms
+          </h4>
+        </div>
+        <div
+          onClick={() => {
+            if (expand === true) {
+              setExpand(false);
+            } else {
+              setExpand(true);
+            }
+          }}
+          className="RenderRight"
+        >
+          <p>{renderFrequency}</p>
+        </div>
       </div>
-      <div className="RenderRight">
-        <p>{renderFrequency}</p>
+      <div className={expand === true ? 'DataComponent' : null} >
+        {expand === true ? dataComponentArray : null}
       </div>
     </div>
   );
 };
-export default RenderingFrequency;
+
+const DataComponent = props => {
+  const {
+    header,
+    paragraphs,
+  } = props;
+
+  return (
+    <div className="borderCheck">
+      <h4>
+        {' '}
+        {header}
+      </h4>
+      <p>
+
+        {paragraphs}
+      </p>
+    </div>
+  );
+};
+
+export default RenderingFrequency;