🔧 Trip chain tab.

DLR-SC · Aug 14, 2024 · 98fad73 · 98fad73
1 parent 66c1bc6
commit 98fad73
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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));
       });
     }