Merge pull request #15 from oslabs-beta/performanceTab

Performance tab

Author: andytsou19

src/app/components/ComponentMap.tsx

@@ -229,7 +229,7 @@ export default function ComponentMap({
     if (nestedObj) {
       propsFormat.push(nestedObj);
     }
-    // console.log('this is propsformat', propsFormat);
+
     return propsFormat;
   };
 
@@ -261,7 +261,7 @@ export default function ComponentMap({
   };
   findSelectedNode();
 
-  // controls for the map 
+  // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
     <div>
@@ -400,25 +400,25 @@ export default function ComponentMap({
                             //   setTooltip(true);
                             // }
                           }}
-                          onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
+                          onMouseEnter={() => dispatch(onHover(node.data.rtid))}
                           onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
                         />
-                        )}
+                      )}
                       {/* Display text inside of each component node */}
                       <text
-                          dy=".33em"
-                          fontSize={10}
-                          fontFamily="Roboto"
-                          textAnchor="middle"
-                          style={{ pointerEvents: 'none' }}
-                          fill={
-                          node.depth === 0
-                            ? '#161521'
-                            : node.children
-                              ? 'white'
-                              : '#161521'
-                        }
-                          z
+                        dy=".33em"
+                        fontSize={10}
+                        fontFamily="Roboto"
+                        textAnchor="middle"
+                        style={{ pointerEvents: 'none' }}
+                        fill={
+                        node.depth === 0
+                          ? '#161521'
+                          : node.children
+                            ? 'white'
+                            : '#161521'
+                      }
+                        z
                         >
                           {node.data.name}
                         </text>

src/app/components/History.tsx

@@ -31,8 +31,6 @@ function History(props: Record<string, unknown>) {
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy));
 
-  console.log('DEBUG >>> HISTORY currLocation: ', currLocation);
-
   // setting the margins for the Map to render in the tab window.
   const innerWidth = totalWidth - margin.left - margin.right;
   const innerHeight = totalHeight - margin.top - margin.bottom - 60;

src/app/components/PerformanceVisx.tsx

@@ -40,31 +40,9 @@ interface BarStackProps {
   hierarchy: any;
 }
 
-// function getComponentsArr(componentName, snapshots, node) {
-//   //Input: Name of component and all snapshots
-//   //Output: One array of each individual snapshot
-
-//   //NOTE:
-//     //Every snapshot is an object with a children array with a snapshot that also has a children array etc
-//     //Children arrays more than one signify siblings
-
-// }
-// // snapshots.map(rootNode => {
-// //     // rootNode.name
-// //   let currNode = rootNode
-// //   while (currNode) {
-// //     if (currNode.name === componentName) {
-// //       return currNode.componentData.props
-// //     } else {
-// //       currNode = currNode.children[0]
-// //       currNode = currNode.children[1]
-// //     }
-// //   }
-// // })
 const makePropsPretty = data => {
   const propsFormat = [];
   const nestedObj = [];
-  // console.log('show me the data we are getting', data);
   if (typeof data !== 'object') {
     return <p>{data}</p>;
   }
@@ -81,7 +59,6 @@ const makePropsPretty = data => {
   if (nestedObj) {
     propsFormat.push(nestedObj);
   }
-  // console.log('this is propsformat', propsFormat);
   return propsFormat;
 };
 
@@ -104,15 +81,13 @@ const collectNodes = (snaps, componentName) => {
         } else {
           renderResult.push(renderTime);
         }
-        console.log('show me the render time', renderTime);
         // compare the last pushed component Data from the array to the current one to see if there are differences
         if (x !== 0 && componentsResult.length !== 0) {
           // needs to be stringified because values are hard to determine if true or false if in they're seen as objects
           if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
             newChange = true;
             // const props = { [`snapshot${x}`]: { rendertime: formatRenderTime(cur.componentData.actualDuration), ...cur.componentData.props } };
             const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
-            console.log('show me props structure', props)
             componentsResult.push(props);
           } else {
             newChange = false;
@@ -135,23 +110,18 @@ const collectNodes = (snaps, componentName) => {
       }
     }
   }
-  // console.log('componentsResult looks like: ', componentsResult);
 
-  // console.log('we should be seeing react components with information', componentsResult);
-  // componentsResult.push(renderResult);
   const finalResults = componentsResult.map((e, index) => {
     const name = Object.keys(e)[0];
-    console.log('this is name', name, 'show me e', e);
     e[name].rendertime = renderResult[index];
-    console.log('this is e', e);
     return e;
   });
   for (let i = 0; i < finalResults.length; i++) {
     for (const componentSnapshot in finalResults[i]) {
-      finalResults[i][componentSnapshot] = makePropsPretty(finalResults[i][componentSnapshot]);
+      finalResults[i][componentSnapshot] = makePropsPretty(finalResults[i][componentSnapshot]).reverse();
     }
   }
-  console.log('finalresults', finalResults);
+  console.log('is this going to reverse', finalResults);
   return finalResults;
 };
 
@@ -185,13 +155,11 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
     }
     // increment render frequencies
     if (renderTime > 0) {
-      // console.log('what is the child', child);
-      // console.log('por que?', data.componentData[componentName]);
       data.componentData[componentName].renderFrequency++;
-    } else {
-      // console.log('what is the child', child);
-      // console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
     }
+    // else {
+
+    // }
 
     // add to total render time
     data.componentData[componentName].totalRenderTime += renderTime;
@@ -258,7 +226,6 @@ 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));
-  // console.log('this is line 220', data);
 
   const renderComparisonBargraph = () => {
     if (hierarchy) {

src/app/components/RenderingFrequency.tsx

@@ -54,7 +54,6 @@ const ComponentCard = props => {
   // 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])} />);
@@ -106,6 +105,10 @@ const DataComponent = props => {
     paragraphs,
   } = props;
 
+  // current bug
+  // we want render time to display first but it gets push to the end of the array
+  // first pop is because the last item of array is always empty for some reason 
+
   // const [{ tabs, currentTab }, dispatch] = useStoreContext();
   return (
     <div>
@@ -114,7 +117,7 @@ const DataComponent = props => {
         {header}
       </h4>
       <p>
-        {' '}
+
         {paragraphs}
       </p>
     </div>