Finished Filter Routes on Performance Tab

Co-authored-by: Chris LeBrett <[email protected]>
Co-authored-by: Robby Tipton <[email protected]>
Co-authored-by: Joseph Park <[email protected]>
Co-authored-by: David Kim <[email protected]>
Co-authored-by: Kevin HoEun Lee <[email protected]>

Author: davidkim7773

package.json

@@ -129,13 +129,15 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@emotion/react": "^11.7.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@material-ui/core": "^4.11.2",
+    "@mui/material": "^5.8.2",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
     "@visx/axis": "^1.0.0",
@@ -172,7 +174,7 @@
     "prop-types": "^15.7.2",
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.1",
     "react-hover": "^2.0.0",

src/app/components/BarGraph.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -61,7 +62,7 @@ const tooltipStyles = {
 
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { width, height, data, comparison } = props;
+  const { width, height, data, comparison, setRoute, devRoutes } = props;
   const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
   const {
     tooltipOpen,
@@ -131,11 +132,11 @@ const BarGraph = props => {
         toStorage.data.barStack[i].name = actionNames[i].value;
       }
       dispatch(save(toStorage, seriesNameInput));
-      setSeriesNameInput(`Series ${comparison.length}`)
-      return
+      setSeriesNameInput(`Series ${comparison.length}`);
+      return;
     }
-    dispatch(save(toStorage))
-  }
+    dispatch(save(toStorage));
+  };
 
   const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" placeholder="Enter Series Name" onChange={e => setSeriesNameInput(e.target.value)} /> : null;
   return (
@@ -151,6 +152,21 @@ const BarGraph = props => {
         >
           Save Series
         </button>
+        <FormControl id="routes-formcontrol">
+          <InputLabel id="routes-dropdown">Routes</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="routes-select"
+            label="Routes"
+            onChange={e => setRoute(e.target.value)}
+          >
+            {devRoutes.map(route => { return (
+              <MenuItem value={route} className="routes">
+                {route}
+              </MenuItem>
+            )})}
+          </Select>
+        </FormControl>
       </div>
       <svg ref={containerRef} width={width} height={height}>
         <rect

src/app/components/PerformanceVisx.tsx

@@ -16,6 +16,7 @@ import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
 import { setCurrentTabInApp } from '../actions/actions';
+
 /* 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
@@ -159,7 +160,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
     maxTotalRender: 0,
   };
   snapshots.forEach((snapshot, i) => {
-    perfData.barStack.push({ snapshotId: snapshotsIds[i] });
+    perfData.barStack.push({ snapshotId: snapshotsIds[i], route: snapshot.route.url });
     traverse(snapshot, perfData, snapshots);
   });
   return perfData;
@@ -177,6 +178,8 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [series, setSeries] = useState(true);
   const [action, setAction] = useState(false);
 
+  const [route, setRoute] = useState(null);
+
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance'));
   }, [dispatch]);
@@ -227,9 +230,39 @@ const PerformanceVisx = (props: BarStackProps) => {
     );
   };
 
+  // Logic for routeArr - DropDown
+  // Create an Arr to hold our routes for the dropDown.
+  const devRoutes: string[] = [];
+  //  Use a for loop to itereate over data and add the prospective routes to our devRoutes arr.
+  for (let i = 0; i < data.barStack.length; i += 1) {
+    const url:string = new URL(data.barStack[i].route);
+    // Making sure devRoutes does not include any additional routes as barStack carries the same Route for every action/state snapshot.
+    if (!devRoutes.includes(url.pathname)) {
+      devRoutes.push(url.pathname);
+    }
+  }
+
+  const userInputRoutes: string[] = [];
+  for (let i = 0; i < data.barStack.length; i += 1) {
+    const url:string = new URL(data.barStack[i].route);
+    // console.log('route is', route);
+    // console.log('url.pathname is', url.pathname);
+    if (route && route === url.pathname) {
+      userInputRoutes.push(data.barStack[i]);
+    }
+  }
+  if (route) {
+    data.barStack = userInputRoutes;
+  }
+
   const renderBargraph = () => {
     if (hierarchy) {
-      return <BarGraph data={data} width={width} height={height} comparison={allStorage()} />;
+      return (
+        <div>
+          <BarGraph data={data} width={width} height={height} comparison={allStorage()} setRoute={setRoute} devRoutes={devRoutes} />
+          {/* <input type="text" onChange={e => setRoute(e.target.value)} /> */}
+        </div>
+      );
     }
   };
 

src/app/styles/components/_performanceVisx.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 #RenderContainer {
 	display: flex;
 	justify-content: center;
@@ -16,7 +18,23 @@
 }
 
 .MuiTypography-body1 {
-	font-size: 1em !important;
+	font-size: 2em !important;
+}
+
+#routes-formcontrol {
+  width: 10em;
+  margin-left: 50px;
+}
+
+#routes-dropdown {
+  color: white !important;
+  margin-bottom: 10px;
+}
+
+#routes-select {
+  color: white !important;
+  background-color: #ff6569 !important;
+  font: 300 'Roboto', sans-serif;
 }
 
 #seriesname {
@@ -26,6 +44,41 @@
     height: 24px;
 
 }
+
 input:focus, textarea:focus, select:focus{
 	outline: none;
-}
+}
+
+// .routes {
+// 	position: absolute;
+// 	align-items: center;
+// 	text-align: center;
+// 	justify-content: center;
+// 	width: 100px;
+// }
+
+// .devRoutes {
+//   padding: 3px;
+//   outline: transparent;
+//   color: white;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   text-align: center;
+//   border-style: solid;
+//   border-color: transparent;
+//   border-radius: 3px;
+//   cursor: pointer;
+//   line-height: 1.5em;
+//   font: 300 28px 'Roboto', sans-serif;
+//   font-size: $button-text-size;
+//   width: 80px;
+//   background: $red-color-gradient;
+//   height: 30px;
+//   position: absolute;
+//   left: 2.5rem;
+
+//   &.animate {
+//     background: rgb(41, 164, 41);
+//   }
+// }