updates

Author: FreyaWu

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>
@@ -398,7 +398,7 @@ 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))}
                         />
                       )}

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])} />);
@@ -92,10 +91,9 @@ const ComponentCard = props => {
           <p>{renderFrequency}</p>
         </div>
       </div>
-      <div className="DataComponent">
-        {expand && dataComponentArray}
+      <div className={expand === true ? 'DataComponent' : null} >
+        {expand === true ? dataComponentArray : null}
       </div>
-
     </div>
   );
 };
@@ -112,15 +110,19 @@ 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>
+    <div className="borderCheck">
       <h4>
         {' '}
         {header}
       </h4>
       <p>
-        {' '}
+
         {paragraphs}
       </p>
     </div>

src/app/styles/components/_renderingFrequency.scss

@@ -2,27 +2,45 @@
 	border-radius: 5px;
 	border: 1px solid rgba(184, 196, 194, 0.25);
 	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
-	width: 40vh;
+	width: 53vw;
+}
+
+.borderCheck {
+	border-radius: 5px;
+	border: 1px solid rgba(184, 196, 194, 0.25);
+	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
+	padding: 5px;
+	width: 10vw;
+	height: 25vw;
+	overflow-y: scroll;
+	overflow-wrap: break-word;
 }
 
 .DataComponent {
+	padding-left: 30px;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	width: 80vw;
+	width: 50vw;
+	height: 40vw;
+	overflow-y: scroll;
+	overflow-wrap: break-word;
 }
 
+
 .StyledGridElement {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
 	padding: 20px;
-	width: 80vw;
+	width: 50vw;
 	height: 5vh;
 	margin: 20px 10px;
 	font-family: 'Roboto', sans-serif;
-
+	// border-radius: 5px;
+	// border: 1px solid rgba(184, 196, 194, 0.25);
+	// box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 
 	h3 {
 		color: $text-color;
@@ -51,13 +69,18 @@
 
 .ExpandStyledGridElement {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
 	padding: 20px;
-	width: 80vh;
+	width: 50vw;
+	// height: 1000px;
 	margin: 20px 10px;
 	font-family: 'Roboto', sans-serif;
+	// border-radius: 5px;
+	// border: 1px solid rgba(184, 196, 194, 0.25);
+	// box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 
 
 	h3 {
@@ -86,8 +109,9 @@
 }
 
 .RenderRight {
-	border-radius: 5px;
+	padding-right: 5px;
 	background: $blue-color-gradient;
-	width: 10%;
+	width: 50px;
 	padding: 0 0.5em;
+	right: 10%;
 }