currently working on the comparison dropdowns

Author: KyEBell

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -15,7 +15,7 @@ import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import { useTheme } from '@mui/material/styles';
-import { Button } from '@mui/material';
+import { Button, InputLabel } from '@mui/material';
 import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
@@ -144,12 +144,12 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
 
   const StyledFormControl = styled(FormControl)(({ theme }) => ({
     margin: theme.spacing(1),
-    minWidth: 80,
+    minWidth: 160,
     height: 30,
   }));
 
   const StyledSelect = styled(Select)({
-    minWidth: 80,
+    minWidth: 160,
     fontSize: '.75rem',
     fontWeight: 200,
     height: 30,
@@ -231,79 +231,84 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   return (
     <div>
       <div className='series-options-container'>
-        <div className='dropdown-and-delete-series-container'>
-          <Button
-            variant='contained'
-            sx={{ p: 2, color: 'white' }}
-            // type='button'
-            className='delete-button'
-            onClick={() => {
-              setButtonLoad(true);
-              dispatch(deleteSeries());
+        {/* <div className='dropdown-and-delete-series-container'> */}
+        <Button
+          variant='contained'
+          sx={{ p: 2, color: 'white' }}
+          // type='button'
+          className='delete-button'
+          onClick={() => {
+            setButtonLoad(true);
+            dispatch(deleteSeries());
 
-              setTimeout(() => {
-                setButtonLoad(false);
-              }, 1000);
-            }}
-            style={
-              buttonLoad
-                ? { backgroundColor: theme.palette.primary.main }
-                : { backgroundColor: theme.palette.secondary.main }
-            }
-          >
-            {buttonLoad ? 'Deleted' : 'Clear Series'}
-          </Button>
-          <h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
+            setTimeout(() => {
+              setButtonLoad(false);
+            }, 1000);
+          }}
+          style={
+            buttonLoad
+              ? { backgroundColor: theme.palette.secondary.main }
+              : { backgroundColor: theme.palette.primary.main }
+          }
+        >
+          {buttonLoad ? 'Deleted' : 'Clear Series'}
+        </Button>
+        {/* <h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
             Compare Series:{' '}
-          </h4>
-          <StyledFormControl
-            id='selectSeries'
-            variant='outlined'
-            sx={{ backgroundColor: theme.palette.primary.main }}
+          </h4> */}
+        <StyledFormControl
+          sx={{ m: 1, minwidth: 160 }}
+          size='medium'
+          id='selectSeries'
+          variant='outlined'
+          label='compares series'
+          // sx={{ backgroundColor: theme.palette.primary.main }}
+        >
+          <InputLabel id='selectSeries'>Compare Series</InputLabel>
+          <StyledSelect
+            // labelId='simple-select-outlined-label'
+            // id='simple-select-outlined'
+            open={open}
+            onClose={handleClose}
+            onOpen={handleOpen}
+            value={series}
+            onChange={handleSeriesChange}
+          >
+            {!comparison.length ? (
+              <MenuItem>No series available</MenuItem>
+            ) : (
+              comparison.map((tabElem, index) => (
+                <MenuItem key={`MenuItem${tabElem.name}`} value={index}>
+                  {tabElem.name}
+                </MenuItem>
+              ))
+            )}
+          </StyledSelect>
+        </StyledFormControl>
+        {/* <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4> */}
+        <StyledFormControl variant='outlined'>
+          <InputLabel>Compare Actions</InputLabel>
+          <StyledSelect
+            style={{ color: 'white' }}
+            labelId='snapshot-select'
+            id='snapshot-select'
+            open={picOpen}
+            onClose={picHandleClose}
+            onOpen={picHandleOpen}
+            value='' // snapshots
+            onChange={handleActionChange}
           >
-            <StyledSelect
-              style={{ color: 'red' }}
-              labelId='simple-select-outlined-label'
-              open={open}
-              onClose={handleClose}
-              onOpen={handleOpen}
-              value={series}
-              onChange={handleSeriesChange}
-            >
-              {!comparison.length ? (
-                <MenuItem>No series available</MenuItem>
-              ) : (
-                comparison.map((tabElem, index) => (
-                  <MenuItem key={`MenuItem${tabElem.name}`} value={index}>
-                    {tabElem.name}
-                  </MenuItem>
-                ))
-              )}
-            </StyledSelect>
-          </StyledFormControl>
-          <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
-          <StyledFormControl variant='outlined'>
-            <StyledSelect
-              style={{ color: 'white' }}
-              labelId='snapshot-select'
-              id='snapshot-select'
-              open={picOpen}
-              onClose={picHandleClose}
-              onOpen={picHandleOpen}
-              value='' // snapshots
-              onChange={handleActionChange}
-            >
-              {!comparison[snapshots] ? (
-                <MenuItem>No snapshots available</MenuItem>
-              ) : (
-                finalList.map((elem) => (
-                  <MenuItem value={elem}>{elem}</MenuItem>
-                  // <MenuItem value="test">{}</MenuItem>
-                ))
-              )}
-            </StyledSelect>
-          </StyledFormControl>
-        </div>
+            {!comparison[snapshots] ? (
+              <MenuItem>No snapshots available</MenuItem>
+            ) : (
+              finalList.map((elem) => (
+                <MenuItem value={elem}>{elem}</MenuItem>
+                // <MenuItem value="test">{}</MenuItem>
+              ))
+            )}
+          </StyledSelect>
+        </StyledFormControl>
+        {/* </div> */}
       </div>
 
       <svg ref={containerRef} width={width} height={height}>

src/app/containers/ActionContainer.tsx

@@ -9,6 +9,7 @@ import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 import RouteDescription from '../components/RouteDescription';
 import { Obj } from '../FrontendTypes';
+import { Button } from '@mui/material';
 
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
@@ -24,7 +25,6 @@ const resetSlider = () => {
   }
 };
 
-
 function ActionContainer(props): JSX.Element {
   const [{ tabs, currentTab, port }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
   const { currLocation, hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; // we destructure the currentTab object
@@ -57,7 +57,8 @@ function ActionContainer(props): JSX.Element {
       obj.stateSnapshot.children[0].state && // with a 'state'
       obj.stateSnapshot.children[0].name // and a 'name'
     ) {
-      const newObj: Record<string, unknown> = { // we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
+      const newObj: Record<string, unknown> = {
+        // we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
@@ -71,7 +72,8 @@ function ActionContainer(props): JSX.Element {
       hierarchyArr.push(newObj); // we push our record object into 'hiearchyArr' defined on line 35
     }
 
-    if (obj.children) {  // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
+    if (obj.children) {
+      // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
       obj.children.forEach((element): void => {
         displayArray(element);
       });
@@ -84,28 +86,27 @@ function ActionContainer(props): JSX.Element {
   // This function allows us to use our arrow keys to jump between snapshots. It passes an event and the index of each action-component. Using the arrow keys allows us to highligh snapshots and the enter key jumps to the selected snapshot
   function handleOnKeyDown(e: KeyboardEvent, i: number): void {
     let currIndex = i;
-    
-    if (e.key === 'ArrowUp') { // up arrow key pressed
+
+    if (e.key === 'ArrowUp') {
+      // up arrow key pressed
       currIndex -= 1;
       if (currIndex < 0) return;
       dispatch(changeView(currIndex));
-    }
-    
-    else if (e.key === 'ArrowDown') { // down arrow key pressed
+    } else if (e.key === 'ArrowDown') {
+      // down arrow key pressed
       currIndex += 1;
       if (currIndex > hierarchyArr.length - 1) return;
       dispatch(changeView(currIndex));
-    }
-    
-    else if (e.key === 'Enter') { // enter key pressed
+    } else if (e.key === 'Enter') {
+      // enter key pressed
       e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases
       e.preventDefault(); // needed or will trigger onClick right after
       dispatch(changeSlider(currIndex));
     }
   }
 
   // Sort hierarchyArr by index property of each object. This will be useful when later when we build our components so that our components will be displayed in index/chronological order
-  hierarchyArr.sort((a:Obj, b:Obj):number => a.index - b.index);
+  hierarchyArr.sort((a: Obj, b: Obj): number => a.index - b.index);
 
   // we create a map of components that are constructed from "hierarchyArr's" elements/snapshots
   actionsArr = hierarchyArr.map(
@@ -168,11 +169,12 @@ function ActionContainer(props): JSX.Element {
   };
 
   const routes: {} = {}; // Logic to create the route description components begin
-  
-  for (let i = 0; i < actionsArr.length; i += 1) { // iterate through our actionsArr
+
+  for (let i = 0; i < actionsArr.length; i += 1) {
+    // iterate through our actionsArr
     if (!routes.hasOwnProperty(actionsArr[i].props.routePath)) {
-      routes[actionsArr[i].props.routePath] = [actionsArr[i]]; // if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i]. 
-    } else { 
+      routes[actionsArr[i].props.routePath] = [actionsArr[i]]; // if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i].
+    } else {
       routes[actionsArr[i].props.routePath].push(actionsArr[i]); // If it does exist, we push the component at index [i] to the apporpriate routes[routePath]
     }
   }
@@ -202,7 +204,8 @@ function ActionContainer(props): JSX.Element {
         <div className='action-button-wrapper'>
           <SwitchAppDropdown />
           <div className='action-component exclude'>
-            <button
+            <Button
+              variant='contained'
               className='empty-button'
               onClick={() => {
                 dispatch(emptySnapshots());
@@ -212,7 +215,7 @@ function ActionContainer(props): JSX.Element {
               type='button'
             >
               Clear
-            </button>
+            </Button>
           </div>
           {/* Rendering of route description components */}
           {Object.keys(routes).map((route, i) => (

src/app/styles/components/_buttons.scss

@@ -289,7 +289,7 @@
 
 .series-options-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   margin: 0 1rem;
 }
@@ -301,6 +301,7 @@
 .dropdown-and-delete-series-container {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .close-button-container {