Created Functioning Vertical Sliders Per Route

src/app/FrontendTypes.ts

@@ -249,7 +249,7 @@ export interface HandleProps {
 
 export interface MainSliderProps {
   className: string;
-  snapshotsLength: number;
+  snapshots: any[];
 }
 
 export interface DefaultMargin {

src/app/components/TimeTravel/MainSlider.tsx → src/app/components/TimeTravel/VerticalSlider.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { HandleProps, MainSliderProps, MainState, RootState } from '../../FrontendTypes';
 
 const { Handle } = Slider; // component constructor of Slider that allows customization of the handle
-
+//takes in snapshot length
 const handle = (props: HandleProps): JSX.Element => {
   const { value, dragging, index, ...restProps } = props;
 
@@ -27,42 +27,50 @@ const handle = (props: HandleProps): JSX.Element => {
   );
 };
 
-function MainSlider(props: MainSliderProps): JSX.Element {
+function VerticalSlider(props: MainSliderProps): JSX.Element {
   const dispatch = useDispatch();
-  const { snapshotsLength } = props; // destructure props to get our total number of snapshots
+  const { snapshots} = props; // destructure props to get our total number of snapshots
   const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0.
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
 
   useEffect(() => {
     if (currLocation) {
       // if we have a 'currLocation'
-      //@ts-ignore
-      setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'
+      let correctedSliderIndex;
+
+      for (let i = 0; i<snapshots.length; i++){
+        //@ts-ignore -- ignores the errors on the next line
+        if (snapshots[i].props.index === currLocation.index){
+          correctedSliderIndex = i;
+        }
+      }
+      setSliderIndex(correctedSliderIndex)
+
     } else {
       setSliderIndex(0); // just set the thumb position to the beginning
     }
   }, [currLocation]); // if currLocation changes, rerun useEffect
+
 
   return (
     <Slider
       className='travel-slider'
       color='#0af548'
+      vertical = 'true'
+      reverse = 'true'
+      height = '100%'
       min={0} // index of our first snapshot
-      max={snapshotsLength - 1} // index of our last snapshot
+      max={snapshots.length - 1} // index of our last snapshot
       value={sliderIndex} // currently slider thumb position
       onChange={(index: any) => {
         // when the slider position changes
         setSliderIndex(index); // update the sliderIndex
-      }}
-      onAfterChange={() => {
-        // after updating the sliderIndex
-        dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex]
-        dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null
+        dispatch(changeSlider(snapshots[index].props.index));
       }}
       handle={handle}
     />
   );
 }
 
-export default MainSlider;
+export default VerticalSlider;

src/app/containers/ActionContainer.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from 'react';
 import Action from '../components/Actions/Action';
 import SwitchAppDropdown from '../components/Actions/SwitchApp';
-// Import new dropdown
 import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import RouteDescription from '../components/Actions/RouteDescription';
@@ -11,11 +10,14 @@ import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
 
+import Slider from 'rc-slider';
+import VerticalSlider from '../components/TimeTravel/VerticalSlider';
 
 /*
   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.
 */
 
+
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -59,6 +61,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     children?: [];
     }
   */
+
 
   const displayArray = (obj: Obj): void => {
     if (
@@ -87,6 +90,7 @@ function ActionContainer(props: ActionContainerProps): JSX.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 => {
+        //recursive call
         displayArray(element);
       });
     }
@@ -134,6 +138,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       const selected = index === viewIndex; // boolean on whether the current index is the same as the viewIndex
       const last = viewIndex === -1 && index === hierarchyArr.length - 1; // boolean on whether the view index is less than 0 and if the index is the same as the last snapshot's index value in hierarchyArr
       const isCurrIndex = index === currLocation.index;
+
       return (
         <Action
           key={`action${index}`}
@@ -247,12 +252,28 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-         {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
-          {dropdownSelection === 'TimeJump' && 
+          <div className='MapRouteAndSlider' style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+          }}>
+            <div className='snapshots'>
+             {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
+              {dropdownSelection === 'TimeJump' && 
             Object.keys(routes).map((route, i) => (
-              <RouteDescription key={`route${i}`} actions={routes[route]} />
-            ))
+                  <div style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  height: `${routes[route].length * 4.5}vh`,
+                  marginBottom: '30px'
+                  }}>
+                <VerticalSlider className='main-slider' snapshots={routes[route]}/>
+                <RouteDescription key={`route${i}`} actions={routes[route]} />
+                  </div>
+              ))
           }
+            </div>
+          </div>
         </div>
       ) : null}
     </div>

src/app/containers/TravelContainer.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 import React, { useState } from 'react';
-import MainSlider from '../components/TimeTravel/MainSlider';
 import Dropdown from '../components/TimeTravel/Dropdown';
 import {
   playForward,
@@ -85,7 +84,6 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       >
         {playing ? 'Pause' : 'Play'}
       </Button>
-      <MainSlider className='main-slider' snapshotsLength={snapshotsLength} />
       <Button
         variant='contained'
         className='backward-button'

src/app/slices/mainSlice.ts

@@ -201,14 +201,16 @@ export const mainSlice = createSlice({
       tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
     },
 
-    changeSlider: (state, action) => {
+    changeSlider: (state, action) => { //should really be called jump to snapshot
       const { port, currentTab, tabs } = state;
       const { hierarchy, snapshots } = tabs[currentTab] || {};
 
       // finds the name by the action.payload parsing through the hierarchy to send to background.js the current name in the jump action
       const nameFromIndex = findName(action.payload, hierarchy);
       // nameFromIndex is a number based on which jump button is pushed
 
+      console.log("changeSlider to ", action.payload);
+
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],