From c55b13fec9c3fde1997c2649e7e0973bf339638b Mon Sep 17 00:00:00 2001
From: pinardo88 <gpinardo@gmail.com>
Date: Mon, 9 Dec 2024 00:12:11 -0600
Subject: [PATCH 1/2] moved slider into each route component

---
 .../components/Actions/RouteDescription.tsx   | 24 +++++++++++++++----
 src/app/containers/ActionContainer.tsx        | 15 ++----------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/app/components/Actions/RouteDescription.tsx b/src/app/components/Actions/RouteDescription.tsx
index 80e17e382..92297e269 100644
--- a/src/app/components/Actions/RouteDescription.tsx
+++ b/src/app/components/Actions/RouteDescription.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import Slider from 'rc-slider';
+import VerticalSlider from '../TimeTravel/VerticalSlider';
 
 /*
   Render's the red route description on app's left sided column between the clear button and the list of state snapshots. The route description is derived from the first state snapshot.
@@ -12,12 +14,26 @@ const RouteDescription = (props: RouteProps): JSX.Element => {
   const { actions } = props;
 
   const url: URL = new URL(actions[0].props.routePath); // Use new URL to use the url.pathname method.
+
   return (
-    <div className='routedescription'>
-      <h3 className='route'>Route: {url.pathname}</h3>
-      {actions}
-    </div>
+      <div className='routedescription' >
+        <h3 className='route'>Route: {url.pathname}</h3>
+          <div style={{
+            // div that contains slider and snapshots
+              display: 'flex',
+              flexDirection: 'row',
+              height: `${actions.length * 30}px`,
+              marginBottom: '50px'
+          }}>
+            <VerticalSlider className='main-slider' snapshots={actions} />
+            <div style={{marginTop: '10px'}}> 
+              {/* actual snapshots per route */}
+              {actions}
+            </div>
+          </div>
+      </div>
   );
 };
 
+
 export default RouteDescription;
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
index 495fc0aeb..9d70d3721 100644
--- a/src/app/containers/ActionContainer.tsx
+++ b/src/app/containers/ActionContainer.tsx
@@ -10,9 +10,6 @@ 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.
 */
@@ -261,16 +258,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
              {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
               {dropdownSelection === 'TimeJump' && 
             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' snapshots={routes[route]}/>
-                <RouteDescription key={`route${i}`} actions={routes[route]} />
-                  </div>
-              ))
+              <RouteDescription key={`route${i}`} actions={routes[route]} />
+            ))
           }
             </div>
           </div>

From 0f0b00e7d05bba2352863bdadb4da4e5f407fe88 Mon Sep 17 00:00:00 2001
From: pinardo88 <gpinardo@gmail.com>
Date: Mon, 9 Dec 2024 00:28:06 -0600
Subject: [PATCH 2/2] removed unnecessary flexbox and div

---
 src/app/containers/ActionContainer.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
index 9d70d3721..040cb20d4 100644
--- a/src/app/containers/ActionContainer.tsx
+++ b/src/app/containers/ActionContainer.tsx
@@ -249,19 +249,13 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-          <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>
+          <div className='snapshots'>
+            {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
+            {dropdownSelection === 'TimeJump' && 
+              Object.keys(routes).map((route, i) => (
+                <RouteDescription key={`route${i}`} actions={routes[route]} />
+              ))
+            }
           </div>
         </div>
       ) : null}