resolve merge

Author: CourageWolf

src/app/components/BarGraph.tsx

@@ -9,7 +9,6 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
-import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { save } from '../actions/actions';
@@ -124,17 +123,15 @@ const BarGraph = (props) => {
     classname[i].addEventListener('click', animateButton, false);
   }
   return (
-    <div className="bargraph">
-      <div className="series-options-container">
-        <button
-          className='save-series-button'
-          onClick={(e) => {
-            dispatch(save(toStorage));
-          }}
-        >
-          Save Series
-        </button>
-      </div>
+    <div>
+      <button
+        className="save-series-button"
+        onClick={(e) => {
+          dispatch(save(toStorage));
+        }}
+      >
+        Save Series
+      </button>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -152,7 +149,7 @@ const BarGraph = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke='black'
+          stroke="black"
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
@@ -168,9 +165,7 @@ const BarGraph = (props) => {
             {(barStacks) =>
               barStacks.map((barStack) =>
                 barStack.bars.map((bar, idx) => {
-                  console.log('barstacks >>>', barStack);
-                  console.log('bars >>>', bar);
-                  // hides new components if components don't exist in previous snapshots
+                  // Hides new components if components don't exist in previous snapshots.
                   if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                     bar.height = 0;
                   }
@@ -183,7 +178,7 @@ const BarGraph = (props) => {
                       width={bar.width}
                       fill={bar.color}
                       /* TIP TOOL EVENT HANDLERS */
-                      // Hides tool tip once cursor moves off the current rect
+                      // Hides tool tip once cursor moves off the current rect.
                       onMouseLeave={() => {
                         dispatch(
                           onHoverExit(data.componentData[bar.key].rtid),
@@ -192,7 +187,7 @@ const BarGraph = (props) => {
                           }, 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(data.componentData[bar.key].rtid));
                         if (tooltipTimeout) clearTimeout(tooltipTimeout);
@@ -240,15 +235,15 @@ const BarGraph = (props) => {
         />
         <Text
           x={-xMax / 2}
-          y='15'
-          transform='rotate(-90)'
+          y="15"
+          transform="rotate(-90)"
           fontSize={12}
-          fill='#FFFFFF'
+          fill="#FFFFFF"
         >
           Rendering Time (ms)
         </Text>
         <br />
-        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
           Snapshot ID
         </Text>
       </svg>

src/app/components/BarGraphComparison.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useForceUpdate } from 'react';
+import React from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -8,15 +8,11 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
-
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { deleteSeries } from '../actions/actions';
@@ -105,15 +101,17 @@ const BarGraphComparison = (props) => {
   const formatRenderTime = (time) => `${time} ms `;
   const getCurrentTab = (storedSeries) => storedSeries.currentTab;
   // create visualization SCALES with cleaned data
-  //const xAxisPoints = [...titleFilter(comparison).map(getTabID), currentTab];
-  //the domain array elements will place the bars along the x-axis
-  const xAxisPoints = ['currentTab', 'comparison']; //[1.0.,2.0]
-  //{ currentTab : 1 },  {currentTab : 2 }
+  // the domain array/xAxisPoints elements will place the bars along the x-axis
+  const xAxisPoints = ['currentTab', 'comparison'];
   const snapshotIdScale = scaleBand<string>({
     domain: xAxisPoints,
     padding: 0.2,
   });
-  // calculateMax
+  // This function will iterate through the snapshots of the series,
+  // and grab the highest render times (sum of all component times).
+  // We'll then use it in the renderingScale function and compare
+  // with the render time of the current tab.
+  // The max render time will determine the Y-axis's highest number.
   const calculateMaxTotalRender = (series) => {
     const currentSeriesBarStacks = !comparison[series]
       ? []
@@ -128,11 +126,13 @@ const BarGraphComparison = (props) => {
     return currentMax;
   };
 
+  // the domain array on rendering scale will set the coordinates for Y-aix points.
   const renderingScale = scaleLinear<number>({
     domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)],
     nice: true,
   });
-
+  // the domain array will assign each key(component on test app) a different color
+  // and use range to set the color scheme each bar
   const colorScale = scaleOrdinal<string>({
     domain: keys,
     range: schemeSet3,
@@ -144,7 +144,7 @@ const BarGraphComparison = (props) => {
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
 
-  // Dropdown to select series.
+  // useStyles will change the styling on save series dropdown feature
   const useStyles = makeStyles((theme) => ({
     formControl: {
       margin: theme.spacing(1),
@@ -198,37 +198,37 @@ const BarGraphComparison = (props) => {
     e.target.classList.add('animate');
     e.target.innerHTML = 'Deleted!';
     setTimeout(function () {
-      e.target.innerHTML = 'Clear Series';
+      e.target.innerHTML = 'Clear All Series';
       e.target.classList.remove('animate');
     }, 1000);
   };
   const classname = document.getElementsByClassName('delete-button');
   for (let i = 0; i < classname.length; i++) {
     classname[i].addEventListener('click', animateButton, false);
   }
-  //console.log('set x on current bar', setXpointsCurrentTab());
   return (
     <div>
-      <div className='series-options-container'>
-        <div className='snapshotId-header'>
+      <div className="series-options-container">
+        <div className="snapshotId-header">
           {' '}
           Snapshot ID: {currentIndex + 1}{' '}
         </div>
 
-        <div className='dropdown-and-delete-series-container'>
+        <div className="dropdown-and-delete-series-container">
           <button
-            className='delete-button'
+            className="delete-button"
             onClick={(e) => {
               dispatch(deleteSeries());
             }}
           >
             Clear All Series
           </button>
-          <FormControl variant='outlined' className={classes.formControl}>
+          <h4 style={{ padding: '0 1rem' }}>Compare with: </h4>
+          <FormControl variant="outlined" className={classes.formControl}>
             <Select
               style={{ color: 'white' }}
-              labelId='simple-select-outlined-label'
-              id='simple-select-outlined'
+              labelId="simple-select-outlined-label"
+              id="simple-select-outlined"
               className={classes.select}
               open={open}
               onClose={handleClose}
@@ -267,13 +267,13 @@ const BarGraphComparison = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke='black'
+          stroke="black"
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
         <Group top={margin.top} left={margin.left}>
           <BarStack
-            // OG Barstack
+            // Current Tab bar stack.
             data={setXpointsCurrentTab()}
             keys={keys}
             x={getCurrentTab}
@@ -283,6 +283,11 @@ const BarGraphComparison = (props) => {
           >
             {(barStacks) =>
               barStacks.map((barStack, idx) => {
+                // Uses map method to iterate through all components,
+                // creating a rect component (from visx) for each iteration.
+                // height/width/etc. are calculated by visx.
+                // to set X and Y scale, it  will used the passed in function and
+                // will run it on the array thats outputted by data
                 const bar = barStack.bars[currentIndex];
                 if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                   bar.height = 0;
@@ -323,7 +328,9 @@ const BarGraphComparison = (props) => {
             }
           </BarStack>
           <BarStack
-            // Comparison Barstack
+            // Comparison Barstack (populates based on series selected)
+            //to set X and Y scale, it  will used the passed in function and
+            // will run it on the array thats outputted by data
             data={!comparison[series] ? [] : setXpointsComparison()}
             keys={keys}
             x={getCurrentTab}
@@ -333,6 +340,9 @@ const BarGraphComparison = (props) => {
           >
             {(barStacks) =>
               barStacks.map((barStack, idx) => {
+                // Uses map method to iterate through all components,
+                // creating a rect component (from visx) for each iteration.
+                // height/width/etc. are calculated by visx.
                 if (!barStack.bars[currentIndex]) {
                   return <h1>No Comparison</h1>;
                 }
@@ -405,14 +415,14 @@ const BarGraphComparison = (props) => {
         />
         <Text
           x={-xMax / 2}
-          y='15'
-          transform='rotate(-90)'
+          y="15"
+          transform="rotate(-90)"
           fontSize={12}
-          fill='#FFFFFF'
+          fill="#FFFFFF"
         >
           Rendering Time (ms)
         </Text>
-        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill='#FFFFFF'>
+        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
           Series ID
         </Text>
       </svg>

src/app/components/StateRoute.tsx

@@ -58,7 +58,6 @@ const StateRoute = (props: StateRouteProps) => {
     y: 250,
     k: 1,
   });
-  console.log("webMetrics in StateRoute Props >>>>", webMetrics);
   // Map
   const renderComponentMap = () => {
     if (hierarchy) {
@@ -135,7 +134,7 @@ const StateRoute = (props: StateRouteProps) => {
         <WebMetrics
           color={LCPColor}
           series={(webMetrics.LCP / 2500) * 100}
-          formatted={(val) => ((val / 100) * 2500).toFixed(2) + " ms"}
+          formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'}
           label="LCP"
         />
         <WebMetrics

src/app/components/WebMetrics.tsx

@@ -1,9 +1,7 @@
-import React, { useState, useEffect, Component } from "react";
-import Charts from "react-apexcharts";
-import useForceUpdate from "./useForceUpdate";
+import React from 'react';
+import Charts from 'react-apexcharts';
 
 const radialGraph = (props) => {
-  const [hoverView, setHoverView] = useState(false);
   const state = {
     series: [props.series],
     options: {
@@ -22,12 +20,12 @@ const radialGraph = (props) => {
           endAngle: 135,
           hollow: {
             margin: 0,
-            size: "75%",
-            background: "#242529",
+            size: '75%',
+            background: '#242529',
             image: undefined,
             imageOffsetX: 0,
             imageOffsetY: 0,
-            position: "front",
+            position: 'front',
             dropShadow: {
               enabled: false,
               top: 3,
@@ -37,8 +35,8 @@ const radialGraph = (props) => {
             },
           },
           track: {
-            background: "#fff",
-            strokeWidth: "3%",
+            background: '#fff',
+            strokeWidth: '3%',
             margin: 0, // margin is in pixels
             dropShadow: {
               enabled: true,
@@ -54,23 +52,23 @@ const radialGraph = (props) => {
             name: {
               offsetY: -10,
               show: true,
-              color: "#fff",
-              fontSize: "24px",
+              color: '#fff',
+              fontSize: '24px',
             },
             value: {
               formatter: props.formatted,
-              color: "#fff",
-              fontSize: "16px",
+              color: '#fff',
+              fontSize: '16px',
               show: true,
             },
           },
         },
       },
       fill: {
-        type: "solid",
+        type: 'solid',
         gradient: {
-          shade: "dark",
-          type: "horizontal",
+          shade: 'dark',
+          type: 'horizontal',
           shadeIntensity: 0.1,
           gradientToColors: [props.color],
           inverseColors: false,
@@ -80,7 +78,7 @@ const radialGraph = (props) => {
         },
       },
       stroke: {
-        lineCap: "flat",
+        lineCap: 'flat',
       },
       labels: [props.label],
     },

src/app/containers/ActionContainer.tsx

@@ -1,9 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import { diff } from 'jsondiffpatch';
 import Action from '../components/Action';
 import SwitchAppDropdown from '../components/SwitchApp';
-
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { useEffect } from 'react';

src/app/containers/ButtonsContainer.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';