added functioning individual vertical sliders per route

Author: pinardo88

src/app/FrontendTypes.ts

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

src/app/components/TimeTravel/VerticalSlider.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import Slider from 'rc-slider';
+import Tooltip from 'rc-tooltip';
+import { changeSlider, pause } from '../../slices/mainSlice';
+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;
+
+  return (
+    <Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index
+      className='travel-tooltip'
+      prefixCls='rc-slider-tooltip'
+      overlay={value} // the currentIndex
+      visible={dragging} // tooltip only visible when slider thumb is click and/or dragged
+      placement='top' // display the tooltip above the slider thumb
+      key={index}
+    >
+      <Handle
+        value={value} // the currentIndex / slider thumb position on the slider
+        {...restProps}
+      />
+    </Tooltip>
+  );
+};
+
+function VerticalSlider(props: MainSliderProps): JSX.Element {
+  const dispatch = useDispatch();
+  const { snapshotsLength, 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'
+  //   } 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
+      value={sliderIndex} // currently slider thumb position
+      onChange={(index: any) => {
+        // when the slider position changes
+        setSliderIndex(index); // update the sliderIndex
+        dispatch(changeSlider(snapshots[index].props.index));
+      }}
+      // onChangeComplete={() => {
+      //   // after updating the sliderIndex
+      //   console.log("sliderIndex", 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
+      // }}
+      handle={handle}
+    />
+  );
+}
+
+export default VerticalSlider;

src/app/containers/ActionContainer.tsx

@@ -2,13 +2,13 @@
 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';
-import DropDown from '../components/Actions/DropDown';
 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.
@@ -223,8 +223,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             {recordingActions ? <Switch defaultChecked /> : <Switch />}
           </a>
           <SwitchAppDropdown />
-          {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
-         <DropDown />
           <div className='action-component exclude'>
             <Button
               className='clear-button'
@@ -239,10 +237,31 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-          {/* Rendering of route description components */}
-          {Object.keys(routes).map((route, i) => (
-            <RouteDescription key={`route${i}`} actions={routes[route]} />
-          ))}
+          <div className='MapRouteAndSlider' style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+          }}>
+             {/* <div className='slider' style={{
+              // height: '65vh',
+            }}>
+              <VerticalSlider className='main-slider' snapshotsLength={Object.keys(routes).length} />
+            </div> */}
+            <div className='snapshots'>
+              {/* Rendering of route description components */}
+              {Object.keys(routes).map((route, i) => (
+                <div style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  height: `${routes[route].length * 4.5}vh`,
+                  marginBottom: '30px'
+                  }}>
+                <VerticalSlider className='main-slider' snapshotsLength={routes[route].length} snapshots={routes[route]}/>
+                <RouteDescription key={`route${i}`} actions={routes[route]} />
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       ) : null}
     </div>

src/app/containers/TravelContainer.tsx

@@ -85,7 +85,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       >
         {playing ? 'Pause' : 'Play'}
       </Button>
-      <MainSlider className='main-slider' snapshotsLength={snapshotsLength} />
+      {/* <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],