working on changing render position pushing current changes

Co-authored-by: Viet Nguyen <[email protected]>

Author: andytsou19

src/app/components/PerformanceVisx.tsx

@@ -11,14 +11,14 @@ import {
   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';
-import { render } from 'react-dom';
 
 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'];
 
@@ -72,7 +72,7 @@ const makePropsPretty = data => {
     if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
       propsFormat.push(<p className="stateprops">
         {`${key}: ${data[key]}`}
-                       </p>);
+      </p>);
     } else if (data[key] !== 'reactFiber' && typeof data[key] === 'object' && exclude.includes(key) !== true) {
       const result = makePropsPretty(data[key]);
       nestedObj.push(result);
@@ -87,6 +87,7 @@ const makePropsPretty = data => {
 
 const collectNodes = (snaps, componentName) => {
   const componentsResult = [];
+  const renderResult = [];
   let trackChanges = 0;
   let newChange = true;
   for (let x = 0; x < snaps.length; x++) {
@@ -100,6 +101,8 @@ const collectNodes = (snaps, componentName) => {
         );
         if (renderTime === 0) {
           break;
+        } 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
@@ -109,11 +112,12 @@ const collectNodes = (snaps, componentName) => {
             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;
             trackChanges = componentsResult.length - 1;
-            const props = { [`snapshot${x}`]: 'Same state as prior snapshot' };
+            const props = { [`snapshot${x}`]: { state: 'Same state as prior snapshot' } };
             componentsResult.push(props);
           }
         } else {
@@ -132,13 +136,23 @@ const collectNodes = (snaps, componentName) => {
     }
   }
   // console.log('componentsResult looks like: ', componentsResult);
-  for (let i = 0; i < componentsResult.length; i++) {
-    for (const componentSnapshot in componentsResult[i]) {
-      componentsResult[i][componentSnapshot] = makePropsPretty(componentsResult[i][componentSnapshot]);
+
+  // 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]);
     }
   }
-  // console.log('we should be seeing react components with information', componentsResult);
-  return componentsResult;
+  console.log('finalresults', finalResults);
+  return finalResults;
 };
 
 /* DATA HANDLING HELPER FUNCTIONS */
@@ -183,14 +197,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
     data.componentData[componentName].totalRenderTime += renderTime;
     // Get rtid for the hovering feature
     data.componentData[componentName].rtid = child.rtid;
-    data.componentData[componentName].information = collectNodes(snapshots, child.name).flat(Infinity);
-    if(renderTime !== 0) {
-        // eslint-disable-next-line react/jsx-one-expression-per-line
-        data.componentData[componentName].information.rendertime = <p>Render Time:{' '}{renderTime}{' '}</p>;
-    }
-    // (
-    // );
-    // console.log('what is the result', data.componentData[componentName].information);
+    data.componentData[componentName].information = collectNodes(snapshots, child.name);
     traverse(snapshot.children[idx], data, snapshots, currTotalRender);
   });
   // reassigns total render time to max render time

src/app/components/RenderingFrequency.tsx

@@ -2,6 +2,7 @@
 /* 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';
 
@@ -50,9 +51,10 @@ const ComponentCard = props => {
   //   dispatch(onHoverExit(rtid));
   // };
 
-
   // 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])} />);
@@ -103,6 +105,7 @@ const DataComponent = props => {
     header,
     paragraphs,
   } = props;
+
   // const [{ tabs, currentTab }, dispatch] = useStoreContext();
   return (
     <div>