removed collapse function

Author: garrettlchow

src/app/FrontendTypes.ts

@@ -105,9 +105,6 @@ export interface BarGraphComparisonAction {
 }
 
 export interface ActionContainerProps {
-  actionView: boolean;
-  setActionView: React.Dispatch<React.SetStateAction<boolean>>;
-  toggleActionContainer: () => void;
   snapshots: any;
   currLocation: any;
 }

src/app/containers/ActionContainer.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React, { useEffect, useState, useRef } from 'react';
 import Action from '../components/Actions/Action';
-import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
+import { emptySnapshots, changeSlider } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import RouteDescription from '../components/Actions/RouteDescription';
 import DropDown from '../components/Actions/DropDown';
@@ -14,8 +14,6 @@ import RecordButton from '../components/Actions/RecordButton';
   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
-
 function ActionContainer(props: ActionContainerProps): JSX.Element {
   const [dropdownSelection, setDropdownSelection] = useState('Time Jump');
   const actionsEndRef = useRef(null as unknown as HTMLDivElement);
@@ -24,12 +22,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
 
   const { currLocation, hierarchy, sliderIndex, viewIndex }: Partial<CurrentTab> = tabs[currentTab]; // we destructure the currentTab object
-  const {
-    toggleActionContainer, // function that handles Time Jump Sidebar view from MainContainer
-    actionView, // local state declared in MainContainer
-    setActionView, // function to update actionView state declared in MainContainer,
-    snapshots,
-  } = props;
+  const { snapshots } = props;
   const [recordingActions, setRecordingActions] = useState(true); // We create a local state 'recordingActions' and set it to true
   let actionsArr: JSX.Element[] = []; // we create an array 'actionsArr' that will hold elements we create later on
   // we create an array 'hierarchyArr' that will hold objects and numbers
@@ -143,62 +136,43 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   // UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
     <div id='action-id' className='action-container'>
-      <div className='actionToolContainer'>
-        <div id='arrow'>
-          <aside className='aside'>
-            <a
-              onClick={(e) => {
-                e.stopPropagation;
-                toggleActionContainer();
-              }}
-              className='toggle'
-            >
-              {' '}
-              <i />
-            </a>
-          </aside>
-          <div className='collapse'>Collapse</div>
-        </div>
-      </div>
-      {actionView ? (
-        <div className='action-button-wrapper'>
-          <RecordButton
-            isRecording={recordingActions}
-            onToggle={() => {
-              toggleRecord();
-              setRecordingActions(!recordingActions);
+      <div className='action-button-wrapper'>
+        <RecordButton
+          isRecording={recordingActions}
+          onToggle={() => {
+            toggleRecord();
+            setRecordingActions(!recordingActions);
+          }}
+        />
+        <DropDown
+          dropdownSelection={dropdownSelection}
+          setDropdownSelection={setDropdownSelection}
+        />
+        <div className='clear-button-container'>
+          <Button
+            className='clear-button-modern'
+            variant='text'
+            onClick={() => {
+              dispatch(emptySnapshots()); // set slider back to zero, visually
+              dispatch(changeSlider(0));
             }}
-          />
-          <DropDown
-            dropdownSelection={dropdownSelection}
-            setDropdownSelection={setDropdownSelection}
-          />
-          <div className='clear-button-container'>
-            <Button
-              className='clear-button-modern'
-              variant='text'
-              onClick={() => {
-                dispatch(emptySnapshots()); // set slider back to zero, visually
-                dispatch(changeSlider(0));
-              }}
-              type='button'
-            >
-              Clear
-            </Button>
-          </div>
-          <div className='snapshots'>
-            {dropdownSelection === 'Providers / Consumers' && (
-              <ProvConContainer currentSnapshot={currLocation.stateSnapshot} />
-            )}
-            {dropdownSelection === 'Time Jump' &&
-              Object.keys(routes).map((route, i) => (
-                <RouteDescription key={`route${i}`} actions={routes[route]} />
-              ))}
-            {/* Add ref for scrolling */}
-            <div ref={actionsEndRef} />
-          </div>
+            type='button'
+          >
+            Clear
+          </Button>
+        </div>
+        <div className='snapshots'>
+          {dropdownSelection === 'Providers / Consumers' && (
+            <ProvConContainer currentSnapshot={currLocation.stateSnapshot} />
+          )}
+          {dropdownSelection === 'Time Jump' &&
+            Object.keys(routes).map((route, i) => (
+              <RouteDescription key={`route${i}`} actions={routes[route]} />
+            ))}
+          {/* Add ref for scrolling */}
+          <div ref={actionsEndRef} />
         </div>
-      ) : null}
+      </div>
     </div>
   );
 }

src/app/containers/MainContainer.tsx

@@ -29,31 +29,6 @@ function MainContainer(): JSX.Element {
 
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
 
-  const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
-
-  // this function handles Time Jump sidebar view
-  const toggleActionContainer = () => {
-    setActionView(!actionView); // sets actionView to the opposite boolean value
-
-    const bodyContainer = document.getElementById('bodyContainer');
-    bodyContainer.classList.toggle('collapsed');
-
-    const toggleElem = document.querySelector('aside'); // aside is like an added text that appears "on the side" aside some text.
-    toggleElem.classList.toggle('no-aside'); // toggles the addition or the removal of the 'no-aside' class
-
-    const collapse = document.querySelector('.collapse');
-    collapse.classList.toggle('hidden');
-
-    const recordBtn = document.getElementById('recordBtn');
-
-    if (recordBtn.style.display === 'none') {
-      // switches whether to display the record toggle button by changing the display property between none and flex
-      recordBtn.style.display = 'flex';
-    } else {
-      recordBtn.style.display = 'none';
-    }
-  };
-
   // Function handles when Reactime unexpectedly disconnects
   const handleDisconnect = (msg): void => {
     if (msg === 'portDisconnect') dispatch(disconnected());
@@ -69,7 +44,6 @@ function MainContainer(): JSX.Element {
     payload: Record<string, unknown>;
     sourceTab: number;
   }) => {
-    // const { action, payload, sourceTab } = message;
     let maxTab: number;
 
     if (!sourceTab && action !== 'keepAlive') {
@@ -89,7 +63,6 @@ function MainContainer(): JSX.Element {
         dispatch(noDev(payload));
         break;
       }
-      // JR 12.20.23 9.53pm added a listener case for sending aReactApp to frontend
       case 'aReactApp': {
         dispatch(aReactApp(payload));
         break;
@@ -198,13 +171,7 @@ function MainContainer(): JSX.Element {
   return (
     <div className='main-container'>
       <div id='bodyContainer' className='body-container'>
-        <ActionContainer
-          actionView={actionView}
-          setActionView={setActionView}
-          toggleActionContainer={toggleActionContainer}
-          snapshots={snapshots}
-          currLocation={currLocation}
-        />
+        <ActionContainer snapshots={snapshots} currLocation={currLocation} />
         {/* @ts-ignore */}
         {snapshots.length ? (
           <div className='state-container-container'>

src/app/styles/components/_buttons.scss

@@ -56,64 +56,6 @@
 }
 
 /* sidebar button open and closing functionality */
-/* Container for arrow and collapse text */
-#arrow {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  background-color: white;
-}
-
-/* Base toggle styling */
-.toggle {
-  height: 100%;
-  width: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  cursor: pointer;
-}
-
-/* Modern chevron using border technique - default facing left */
-.toggle i {
-  position: relative;
-  width: 6px;
-  height: 6px;
-  border-right: 2px solid #6b7280;
-  border-bottom: 2px solid #6b7280;
-  transform: rotate(135deg); /* Changed to 135deg to face left by default */
-  transition: transform 0.3s ease;
-  display: block;
-}
-
-/* Clean up unused pseudo-elements */
-.toggle i::before,
-.toggle i::after {
-  display: none;
-}
-
-/* Rotation for collapsed state - rotate to face right */
-.no-aside .toggle i {
-  transform: rotate(-45deg); /* Changed to -45deg to face right when collapsed */
-}
-
-/* Hover state matching modern UI */
-.toggle:hover i {
-  border-color: #374151;
-}
-
-/* Modern collapse text styling */
-.collapse {
-  display: flex;
-  align-items: center;
-  color: #6b7280;
-  font-size: 1.1rem;
-  font-weight: 500;
-  font-family: 'Outfit', sans-serif;
-  transition: color 0.2s ease;
-}
-
 .record-button-container {
   display: flex;
   align-items: center;
@@ -155,26 +97,6 @@
   }
 }
 
-/* Hover state for the entire action area */
-#arrow:hover .collapse {
-  color: #374151;
-}
-
-/* Smooth transition for sidebar */
-aside {
-  background-color: white;
-  transition: width 0.3s ease;
-}
-
-.no-aside {
-  width: 45px;
-}
-
-/* Hide collapse text when sidebar is collapsed */
-.hidden {
-  display: none;
-}
-
 .clear-button-modern {
   width: 100% !important;
   background-color: #f3f4f6 !important;

src/app/styles/layout/_actionContainer.scss

@@ -15,19 +15,6 @@
   }
 }
 
-.collapsed .action-container {
-  .action-button-wrapper {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-.actionToolContainer {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e5e7eb;
-}
-
 .clear-button-container {
   padding: 16px;
 }

src/app/styles/layout/_bodyContainer.scss

@@ -8,10 +8,6 @@
     'actions states'
     'bottom bottom';
   transition: grid-template-columns 0.3s ease;
-
-  &.collapsed {
-    grid-template-columns: 45px 1fr;
-  }
 }
 
 .bottom-controls {