From 98fad73a37715684780dfd98642d7dca7f435c6f Mon Sep 17 00:00:00 2001
From: Jonas Gilg <jonas.gilg@dlr.de>
Date: Wed, 14 Aug 2024 12:54:08 +0200
Subject: [PATCH] :wrench: Trip chain tab.

---
 .../components/Sidebar/SidebarContainer.tsx   | 20 ++++++++++++++++---
 frontend/src/components/TripChainView.tsx     |  2 +-
 frontend/src/data_sockets/PandemosContext.tsx |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Sidebar/SidebarContainer.tsx b/frontend/src/components/Sidebar/SidebarContainer.tsx
index 810ee055..cd9e174a 100644
--- a/frontend/src/components/Sidebar/SidebarContainer.tsx
+++ b/frontend/src/components/Sidebar/SidebarContainer.tsx
@@ -12,6 +12,8 @@ import {selectDistrict} from 'store/DataSelectionSlice';
 import {selectHeatmapLegend} from 'store/UserPreferenceSlice';
 import {GeoJsonProperties} from 'geojson';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ToggleButton from '@mui/material/ToggleButton';
 
 export default function MapContainer() {
   const {t} = useTranslation();
@@ -32,7 +34,7 @@ export default function MapContainer() {
   const [selectedArea, setSelectedArea] = useState<GeoJsonProperties>(
     storeSelectedArea.name != ''
       ? {RS: storeSelectedArea.ags, GEN: storeSelectedArea.name, BEZ: storeSelectedArea.type}
-      : defaultValue,
+      : defaultValue
   );
   const [legend] = useState<HeatmapLegend>(storeHeatLegend);
 
@@ -52,7 +54,7 @@ export default function MapContainer() {
         ags: String(selectedArea?.['RS']),
         name: String(selectedArea?.['GEN']),
         type: String(selectedArea?.['BEZ']),
-      }),
+      })
     );
     // This effect should only run when the selectedArea changes
   }, [selectedArea, dispatch]);
@@ -63,18 +65,30 @@ export default function MapContainer() {
     // This effect should only run when the legend changes
   }, [legend, dispatch]);
 
+  const [expanded, setExpanded] = useState(false);
+
   return (
     <Box
       id='sidebar-root'
       sx={{
         // Self
-        width: '422px',
+        width: expanded ? '1200px' : '422px',
         height: '100%',
         borderRight: `1px solid ${theme.palette.divider}`,
         background: theme.palette.background.default,
+        display: 'flex',
       }}
     >
       <SidebarTabs />
+      <ToggleButton
+        color='primary'
+        selected={expanded}
+        onChange={() => setExpanded(!expanded)}
+        sx={{height: '100%', minWidth: 0, padding: 0}}
+        value=''
+      >
+        {expanded ? '◀' : '▶'}
+      </ToggleButton>
     </Box>
   );
 }
diff --git a/frontend/src/components/TripChainView.tsx b/frontend/src/components/TripChainView.tsx
index 8953bd32..9e92ad85 100644
--- a/frontend/src/components/TripChainView.tsx
+++ b/frontend/src/components/TripChainView.tsx
@@ -133,7 +133,7 @@ export default function TripChainView(): JSX.Element {
           <ToggleButton value='all'>All</ToggleButton>
         </ToggleButtonGroup>
       </Box>
-      <List sx={{width: '100%', flexGrow: 1, overflow: 'auto'}}>
+      <List sx={{minWidth: '100%', flexGrow: 1, overflow: 'auto'}}>
         {tripChainsByOccurrence?.slice(0, maxDisplayed > 0 ? maxDisplayed : -1).map((tc) => {
           return (
             <ListItem key={tc[0]} divider disablePadding>
diff --git a/frontend/src/data_sockets/PandemosContext.tsx b/frontend/src/data_sockets/PandemosContext.tsx
index e99577fd..18ad3a32 100644
--- a/frontend/src/data_sockets/PandemosContext.tsx
+++ b/frontend/src/data_sockets/PandemosContext.tsx
@@ -146,7 +146,7 @@ export const PandemosProvider = ({children}: {children: React.ReactNode}) => {
       let start = 0;
       tripChain.forEach((trip, index) => {
         if (getLocation(trip.start_location)?.location_type === 0) start = index;
-        if (getLocation(trip.end_location)?.location_type === 0)
+        if (getLocation(trip.end_location)?.location_type === 0 || getLocation(trip.end_location)?.location_type === 10)
           tripChains.set(tripId++, tripChain.slice(start, index + 1));
       });
     }