Converted route filter on performance tab from mui component to regular html component.

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: RobbyTipton

src/app/components/BarGraph.tsx

@@ -150,24 +150,24 @@ const BarGraph = props => {
         >
           Save Series
         </button>
+        <form className="routesForm" id="routes-formcontrol">
+          <label id="routes-dropdown">Select Route: </label>
+          <select
+            labelId="demo-simple-select-label"
+            id="routes-select"
+            onChange={e => setRoute(e.target.value)}
+          >
+            <option>
+              All Routes
+            </option>
+            {allRoutes.map(route => (
+              <option className="routes">
+                {route}
+              </option>
+            ))}
+          </select>
+        </form>
       </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

@@ -178,7 +178,7 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [series, setSeries] = useState(true);
   const [action, setAction] = useState(false);
 
-  const [route, setRoute] = useState(null);
+  const [route, setRoute] = useState('All Routes');
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance'));
@@ -242,7 +242,7 @@ const PerformanceVisx = (props: BarStackProps) => {
       filteredSnapshots.push(data.barStack[i]);
     }
   }
-  if (route) {
+  if (route !== 'All Routes') {
     data.barStack = filteredSnapshots;
   }
 

src/app/styles/components/_buttons.scss

@@ -9,16 +9,16 @@
   align-items: center;
   border-style: solid;
   border-color: transparent;
-  border-radius: 3px;
+  border-radius: 5px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 14px 'Roboto', sans-serif;
-  font-size: $button-text-size;
+  font: 400 14px 'Roboto', sans-serif;
+  // font-size: $button-text-size;
   width: 120px;
   background: $red-color-gradient;
   height: 30px;
   position: absolute;
-  right: 2.5rem;
+  right: 3rem;
 
   &.animate {
     background: rgb(41, 164, 41);
@@ -196,7 +196,6 @@
   background: $blue-color-gradient;
 }
 
-
 .import-button:hover,
 .howToUse-button:hover,
 .export-button:hover,
@@ -241,9 +240,11 @@
 .dropdown-dark {
   background: #444;
   border-color: #111111 #0a0a0a black;
-  background-image: -webkit-linear-gradient(top,
-      transparent,
-      rgba(0, 0, 0, 0.4));
+  background-image: -webkit-linear-gradient(
+    top,
+    transparent,
+    rgba(0, 0, 0, 0.4)
+  );
   background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
@@ -271,7 +272,7 @@
   color: #ccc;
 }
 
-.dropdown-dark .dropdown-select>option {
+.dropdown-dark .dropdown-select > option {
   background: #444;
   text-shadow: 0 1px rgba(0, 0, 0, 0.4);
 }

src/app/styles/components/_performanceVisx.scss

@@ -1,56 +1,62 @@
 @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;
+  display: flex;
+  justify-content: center;
 }
 
 .MuiSwitch-colorPrimary.Mui-checked {
-	color: #62d6fb !important;
+  color: #62d6fb !important;
 }
 
 .MuiSwitch-switchBase {
-	color: #ff6569 !important;
+  color: #ff6569 !important;
 }
 
 .MuiSwitch-track {
-	background-color: #e7e7e7 !important;
+  background-color: #e7e7e7 !important;
 }
 
 .MuiTypography-body1 {
-	font-size: 2em !important;
+  font-size: 2em !important;
 }
 
 #routes-formcontrol {
   padding: 3px;
   margin-left: 50px;
-  font: 300 13px 'Roboto', sans-serif;
+  font: 400 14px 'Roboto', sans-serif;
   text-align: left;
-  min-width: 10em;
-  max-height: 50%;
+  // min-width: 10em;
+  // max-height: 50%;
 }
 
 #routes-dropdown {
   color: white !important;
-  background-color: #ff6569 !important;
-  font: 300 13px 'Roboto', sans-serif;
+  // background-color: #ff6569 !important;
+  font: 400 14px 'Roboto', sans-serif;
   text-align: left;
 }
 
 #routes-select {
   color: white !important;
   background-color: #ff6569 !important;
-  font: 300 13px 'Roboto', sans-serif;
+  font: 400 14px 'Roboto', sans-serif;
   text-align: left;
+  width: 120px;
+  height: 30px;
+  border-radius: 5px;
+  text-align: center;
 }
 
 #seriesname {
-    float: right;
-    width: 220px;
-    margin-right: 165px;
-    height: 24px;
+  float: right;
+  width: 220px;
+  margin-right: 165px;
+  height: 24px;
 }
 
-input:focus, textarea:focus, select:focus{
-	outline: none;
-}
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}