Merge pull request #9 from oslabs-beta/kevin/david-filter

Kevin / David Filter

Author: davidkim7773

package.json

@@ -130,13 +130,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",
@@ -173,14 +175,14 @@
     "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",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^3.1.0",
+    "react-select": "^3.2.0",
     "react-spinners": "^0.11.0",
     "react-split": "^2.0.14",
     "recoil": "0.0.10",

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, allRoutes, filteredSnapshots } = props;
   const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
   const {
     tooltipOpen,
@@ -131,17 +132,15 @@ 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 (
     <div className="bargraph-position">
-
-      {/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
       <div className="saveSeriesContainer">
         {textbox}
         <button
@@ -152,6 +151,23 @@ const BarGraph = props => {
           Save Series
         </button>
       </div>
+      <FormControl className="routesForm" id="routes-formcontrol" size="small">
+        <InputLabel id="routes-dropdown">Select Route</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="routes-select"
+          onChange={e => setRoute(e.target.value)}
+        >
+          <MenuItem value={null}>
+            All Visited Routes
+          </MenuItem>
+          {allRoutes.map(route => (
+            <MenuItem value={route} className="routes">
+              {route}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
       <svg ref={containerRef} width={width} height={height}>
         <rect
           x={0}

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
@@ -39,10 +40,10 @@ const collectNodes = (snaps, componentName) => {
   const renderResult = [];
   let trackChanges = 0;
   let newChange = true;
-  for (let x = 0; x < snaps.length; x++) {
+  for (let x = 0; x < snaps.length; x += 1) {
     const snapshotList = [];
     snapshotList.push(snaps[x]);
-    for (let i = 0; i < snapshotList.length; i++) {
+    for (let i = 0; i < snapshotList.length; i += 1) {
       const cur = snapshotList[i];
       if (cur.name === componentName) {
         const renderTime = Number(
@@ -118,7 +119,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
     }
     // increment render frequencies
     if (renderTime > 0) {
-      data.componentData[componentName].renderFrequency++;
+      data.componentData[componentName].renderFrequency += 1;
     }
 
     // add to total render time
@@ -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]);
@@ -188,7 +191,7 @@ const PerformanceVisx = (props: BarStackProps) => {
     const actionsArr = [];
 
     if (seriesArr.length) {
-      for (let i = 0; i < seriesArr.length; i++) {
+      for (let i = 0; i < seriesArr.length; i += 1) {
         for (const actionObj of seriesArr[i].data.barStack) {
           if (actionObj.name === action) {
             actionObj.seriesName = seriesArr[i].name;
@@ -227,9 +230,37 @@ const PerformanceVisx = (props: BarStackProps) => {
     );
   };
 
+  const allRoutes = [];
+  const filteredSnapshots = [];
+
+  for (let i = 0; i < data.barStack.length; i += 1) {
+    const url = new URL(data.barStack[i].route);
+    if (!allRoutes.includes(url.pathname)) {
+      allRoutes.push(url.pathname);
+    }
+    if (route && route === url.pathname) {
+      filteredSnapshots.push(data.barStack[i]);
+    }
+  }
+  if (route) {
+    data.barStack = filteredSnapshots;
+  }
+ 
   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}
+            allRoutes={allRoutes}
+            filteredSnapshots={filteredSnapshots}
+          />
+        </div>
+      );
     }
   };
 
@@ -252,7 +283,6 @@ const PerformanceVisx = (props: BarStackProps) => {
       <div className="performance-nav-bar-container">
         <NavLink
           className="router-link-performance"
-          // className="router-link"
           activeClassName="is-active"
           exact
           to="/"
@@ -262,15 +292,13 @@ const PerformanceVisx = (props: BarStackProps) => {
         <NavLink
           className="router-link-performance"
           id="router-link-performance-comparison"
-          // className="router-link"
           activeClassName="is-active"
           to="/comparison"
         >
           Comparison View
         </NavLink>
         <NavLink
           className="router-link-performance"
-          // className="router-link"
           activeClassName="is-active"
           to="/componentdetails"
         >

src/app/styles/base/_base.scss

@@ -42,7 +42,4 @@ body {
 .saveSeriesContainer {
   padding-bottom: 15px;
   padding-top: 10px;
-}
-
-
-
+}

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,16 +18,39 @@
 }
 
 .MuiTypography-body1 {
-	font-size: 1em !important;
+	font-size: 2em !important;
+}
+
+#routes-formcontrol {
+  padding: 3px;
+  margin-left: 50px;
+  font: 300 13px 'Roboto', sans-serif;
+  text-align: left;
+  min-width: 10em;
+  max-height: 50%;
+}
+
+#routes-dropdown {
+  color: white !important;
+  background-color: #ff6569 !important;
+  font: 300 13px 'Roboto', sans-serif;
+  text-align: left;
+}
+
+#routes-select {
+  color: white !important;
+  background-color: #ff6569 !important;
+  font: 300 13px 'Roboto', sans-serif;
+  text-align: left;
 }
 
 #seriesname {
     float: right;
     width: 220px;
     margin-right: 165px;
     height: 24px;
-
 }
+
 input:focus, textarea:focus, select:focus{
 	outline: none;
 }