added auto scroll for snapshots

Author: garrettlchow

src/app/containers/ActionContainer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Action from '../components/Actions/Action';
 import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,6 +18,7 @@ import RecordButton from '../components/Actions/RecordButton';
 
 function ActionContainer(props: ActionContainerProps): JSX.Element {
   const [dropdownSelection, setDropdownSelection] = useState('TimeJump');
+  const actionsEndRef = useRef(null as unknown as HTMLDivElement);
 
   const dispatch = useDispatch();
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
@@ -34,6 +35,13 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   // we create an array 'hierarchyArr' that will hold objects and numbers
   const hierarchyArr: (number | {})[] = [];
 
+  // Auto scroll when snapshots change
+  useEffect(() => {
+    if (actionsEndRef.current) {
+      actionsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [snapshots]); // Dependency on snapshots array
+
   const displayArray = (obj: Obj): void => {
     if (
       obj.stateSnapshot.children.length > 0 && // if the 'stateSnapshot' has a non-empty 'children' array
@@ -209,6 +217,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Object.keys(routes).map((route, i) => (
                 <RouteDescription key={`route${i}`} actions={routes[route]} />
               ))}
+            {/* Add ref for scrolling */}
+            <div ref={actionsEndRef} />
           </div>
         </div>
       ) : null}

src/app/styles/components/_componentMap.scss

@@ -131,45 +131,3 @@
   margin: 0;
   cursor: pointer;
 }
-
-.control-range::-webkit-slider-thumb {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #14b8a6;
-  cursor: pointer;
-  border: none;
-  transition: transform 0.2s ease;
-}
-
-.control-range::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #14b8a6;
-  cursor: pointer;
-  border: none;
-  transition: transform 0.2s ease;
-}
-
-.control-range::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-.control-range::-moz-range-thumb:hover {
-  transform: scale(1.1);
-}
-
-.control-range:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.control-range:disabled::-webkit-slider-thumb {
-  cursor: not-allowed;
-}
-
-.control-range:disabled::-moz-range-thumb {
-  cursor: not-allowed;
-}

src/app/styles/layout/_stateContainer.scss

@@ -121,28 +121,7 @@
 }
 
 .tooltip-data {
-  border-left: 2px solid #0d9488; /* Teal border */
-}
-
-.tooltip-content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.tooltip-content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.tooltip-content::-webkit-scrollbar-track {
-  background: #f1f5f9;
-}
-
-.tooltip-content::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 4px;
-}
-
-.tooltip-content::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  border-left: 2px solid #0d9488;
 }
 
 .tooltip-container {

src/app/styles/main.scss

@@ -18,27 +18,6 @@ body {
   height: 100%;
 }
 
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 8px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: none;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgb(67, 67, 71);
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(97, 97, 97);
-}
-
 // 1. Configuration and helpers
 @import 'abstracts/variablesLM';