Finished filter update on performance tab

Author: davidkim7773

src/app/components/BarGraph.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+// import Select from 'react-select';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -62,7 +63,7 @@ const tooltipStyles = {
 
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { width, height, data, comparison, setRoute, devRoutes } = props;
+  const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots } = props;
   const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
   const {
     tooltipOpen,
@@ -138,6 +139,13 @@ const BarGraph = props => {
     dispatch(save(toStorage));
   };
 
+  console.log('data-barstack', data.barStack)
+
+  // const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // const onMenuOpen = () => setIsMenuOpen(true);
+  // const onMenuClose = () => setIsMenuOpen(false);
+
   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">
@@ -152,22 +160,27 @@ 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>
+      {/* <div className="routesContainer"> */}
+      <FormControl className="routesForm" id="routes-formcontrol" size="small">
+        <InputLabel id="routes-dropdown">Select Route</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="routes-select"
+          // label="Routes"
+          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>
+      {/* </div> */}
       <svg ref={containerRef} width={width} height={height}>
         <rect
           x={0}

src/app/components/PerformanceVisx.tsx

@@ -40,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(
@@ -119,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
@@ -191,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;
@@ -230,42 +230,51 @@ 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 allRoutes = [];
+  const filteredSnapshots = [];
+  const copyOfBars = [];
 
-  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);
+    const url = new URL(data.barStack[i].route);
+    if (!allRoutes.includes(url.pathname)) {
+      allRoutes.push(url.pathname);
+    }
     if (route && route === url.pathname) {
-      userInputRoutes.push(data.barStack[i]);
+      filteredSnapshots.push(data.barStack[i]);
     }
   }
   if (route) {
-    data.barStack = userInputRoutes;
+    // copyOfBars = data.barStack;
+    data.barStack = filteredSnapshots;
   }
+  // console.log('Data', data);
+  // console.log('URL is ', url);
+  console.log('data.barStack is ', data.barStack);
+  console.log('filtered snapshots are ', filteredSnapshots);
+  // console.log('AllRoutes', allRoutes);
 
   const renderBargraph = () => {
     if (hierarchy) {
       return (
         <div>
-          <BarGraph data={data} width={width} height={height} comparison={allStorage()} setRoute={setRoute} devRoutes={devRoutes} />
-          {/* <input type="text" onChange={e => setRoute(e.target.value)} /> */}
+          <BarGraph
+            data={data}
+            width={width}
+            height={height}
+            comparison={allStorage()}
+            setRoute={setRoute}
+            allRoutes={allRoutes}
+            copyOfBars={copyOfBars}
+            filteredSnapshots={filteredSnapshots}
+          />
         </div>
       );
     }
   };
 
+  console.log('data', data)
+  
+
   const renderComponentDetailsView = () => {
     if (hierarchy) {
       return <RenderingFrequency data={data.componentData} />;

src/app/styles/base/_base.scss

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

src/app/styles/components/_performanceVisx.scss

@@ -22,63 +22,35 @@
 }
 
 #routes-formcontrol {
-  width: 10em;
+  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;
-  margin-bottom: 10px;
+  background-color: #ff6569 !important;
+  font: 300 13px 'Roboto', sans-serif;
+  text-align: left;
 }
 
 #routes-select {
   color: white !important;
   background-color: #ff6569 !important;
-  font: 300 'Roboto', sans-serif;
+  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;
-}
-
-// .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);
-//   }
-// }
+}