diff --git a/frontend/src/components/Sidebar/SidebarTabs.tsx b/frontend/src/components/Sidebar/SidebarTabs.tsx index 334273ad..78ddfb0e 100644 --- a/frontend/src/components/Sidebar/SidebarTabs.tsx +++ b/frontend/src/components/Sidebar/SidebarTabs.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import {useTranslation} from 'react-i18next'; -import React, {useCallback, useContext, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import {Grid, Typography} from '@mui/material'; import TabContext from '@mui/lab/TabContext'; import TabPanel from '@mui/lab/TabPanel'; @@ -27,6 +27,7 @@ import legendPresets from '../../../assets/heatmap_legend_presets.json?url'; import {GeoJSON, GeoJsonProperties} from 'geojson'; import TripChainView from '../TripChainView'; import StatisticsDashboard from './StatisicsComponent/StatisticsDashboard'; +import {selectDistrict} from '../../store/DataSelectionSlice'; export default function SidebarTabs(): JSX.Element { const {t, i18n} = useTranslation('global'); @@ -126,6 +127,18 @@ export default function SidebarTabs(): JSX.Element { [t] ); + // Set selected area in store + useEffect(() => { + dispatch( + selectDistrict({ + ags: String(selectedArea?.['RS']), + name: String(selectedArea?.['GEN']), + type: String(selectedArea?.['BEZ']), + }) + ); + // This effect should only run when the selectedArea changes + }, [selectedArea, dispatch]); + const localization = useMemo(() => { return { formatNumber: formatNumber, @@ -173,7 +186,7 @@ export default function SidebarTabs(): JSX.Element { height: '100%', }} > - + - + d.key) .colors(d3.scaleOrdinal(d3.schemeBlues[9].slice().reverse())) .on('filtered', function (_chart: any) { - const selectedFilters = _chart.filters()//.map((d: any) => Object.values(KeyInfo.infection_state).findIndex((e: any) => e.icon === d)); + const selectedFilters = _chart.filters() dispatch( selectInfectionStates({ infectionStates: selectedFilters,