[Tableau de bord]: ne pas filtrer les objets épinglés par rapport à la zone

frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx

@@ -1,4 +1,5 @@
-import { getFilteredAmps, getOpenedPanel } from '@features/Dashboard/slice'
+import { useGetAMPsQuery } from '@api/ampsAPI'
+import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -7,15 +8,15 @@ import { groupBy } from 'lodash'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { ListLayerGroup } from './ListLayerGroup'
-import { AmpPanel } from './Panel'
 import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { ListLayerGroup } from './ListLayerGroup'
+import { AmpPanel } from './Panel'
 
 import type { AMPFromAPI } from 'domain/entities/AMPs'
 
 type AmpsProps = {
-  amps: AMPFromAPI[] | undefined
+  amps: AMPFromAPI[]
   columnWidth: number
   isExpanded: boolean
   isSelectedAccordionOpen: boolean
@@ -34,13 +35,16 @@ export function Amps({
 
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
-  const ampsByLayerName = groupBy(filteredAmps, r => r.name)
+  const ampsByLayerName = groupBy(amps, r => r.name)
 
-  const selectedAmpByLayerName = groupBy(
-    amps?.filter(({ id }) => selectedAmpIds.includes(id)),
-    r => r.name
-  )
+  const { selectedAmpByLayerName } = useGetAMPsQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      selectedAmpByLayerName: groupBy(
+        Object.values(data?.entities ?? []).filter(amp => selectedAmpIds.includes(amp.id)),
+        amp => amp.name
+      )
+    })
+  })
 
   useEffect(() => {
     if (isSelectedAccordionOpen) {

frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx

@@ -18,7 +18,14 @@ import { TerritorialPressure } from './TerritorialPressure'
 import { Toolbar } from './Toolbar'
 import { VigilanceAreas } from './VigilanceAreas'
 import { Weather } from './Weather'
-import { dashboardActions, getFilteredReportings, type DashboardType } from '../../slice'
+import {
+  dashboardActions,
+  getFilteredAmps,
+  getFilteredRegulatoryAreas,
+  getFilteredReportings,
+  getFilteredVigilanceAreas,
+  type DashboardType
+} from '../../slice'
 
 type DashboardProps = {
   dashboardForm: [string, DashboardType]
@@ -28,13 +35,13 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
   const dispatch = useAppDispatch()
   const previewSelectionFilter = dashboard.filters.previewSelection ?? false
 
+  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
+  const filteredRegulatoryAreas = useAppSelector(state => getFilteredRegulatoryAreas(state.dashboard))
+  const filteredVigilanceAreas = useAppSelector(state => getFilteredVigilanceAreas(state.dashboard))
   const filteredReportings = useAppSelector(state => getFilteredReportings(state.dashboard))
 
   const { data: controlUnits } = useGetControlUnitsQuery(undefined, RTK_DEFAULT_QUERY_OPTIONS)
   const activeControlUnits = useMemo(() => controlUnits?.filter(isNotArchived), [controlUnits])
-  const selectedReportings =
-    dashboard.extractedArea?.reportings.filter(reporting => dashboard.dashboard.reportingIds.includes(+reporting.id)) ??
-    []
 
   const firstColumnRef = useRef<HTMLDivElement>(null)
   const firstColumnWidth = firstColumnRef.current?.clientWidth ?? 0
@@ -104,13 +111,13 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
                 columnWidth={firstColumnWidth}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
                 isSelectedAccordionOpen={previewSelectionFilter}
-                regulatoryAreas={dashboard.extractedArea?.regulatoryAreas}
+                regulatoryAreas={filteredRegulatoryAreas ?? []}
                 selectedRegulatoryAreaIds={dashboard.dashboard.regulatoryAreaIds}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.REGULATORY_AREAS)}
               />
 
               <Amps
-                amps={dashboard.extractedArea?.amps}
+                amps={filteredAmps ?? []}
                 columnWidth={firstColumnWidth}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.AMP}
                 isSelectedAccordionOpen={previewSelectionFilter}
@@ -123,7 +130,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
                 isSelectedAccordionOpen={previewSelectionFilter}
                 selectedVigilanceAreaIds={dashboard.dashboard.vigilanceAreaIds}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.VIGILANCE_AREAS)}
-                vigilanceAreas={dashboard.extractedArea?.vigilanceAreas}
+                vigilanceAreas={filteredVigilanceAreas ?? []}
               />
             </Column>
             <Column $filterHeight={toolbarHeight}>
@@ -136,7 +143,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
                 isExpanded={expandedAccordionSecondColumn === Dashboard.Block.REPORTINGS}
                 isSelectedAccordionOpen={previewSelectionFilter}
                 reportings={filteredReportings ?? []}
-                selectedReportings={selectedReportings}
+                selectedReportingIds={dashboard.dashboard.reportingIds}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.REPORTINGS)}
               />
             </Column>

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx

@@ -1,4 +1,5 @@
-import { getFilteredRegulatoryAreas, getOpenedPanel } from '@features/Dashboard/slice'
+import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
+import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -7,18 +8,18 @@ import { groupBy } from 'lodash'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { ListLayerGroup } from './ListLayerGroup'
-import { RegulatoryPanel } from './Panel'
 import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { ListLayerGroup } from './ListLayerGroup'
+import { RegulatoryPanel } from './Panel'
 
 import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
 type RegulatoriesAreasProps = {
   columnWidth: number
   isExpanded: boolean
   isSelectedAccordionOpen: boolean
-  regulatoryAreas: RegulatoryLayerCompactFromAPI[] | undefined
+  regulatoryAreas: RegulatoryLayerCompactFromAPI[]
   selectedRegulatoryAreaIds: number[]
   setExpandedAccordion: () => void
 }
@@ -30,17 +31,19 @@ export function RegulatoryAreas({
   selectedRegulatoryAreaIds: selectedRegulatoryAreas,
   setExpandedAccordion
 }: RegulatoriesAreasProps) {
-  const filteredRegulatoryAreas = useAppSelector(state => getFilteredRegulatoryAreas(state.dashboard))
-
   const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.REGULATORY_AREAS))
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-  const regulatoryAreasByLayerName = groupBy(filteredRegulatoryAreas, r => r.layer_name)
+  const regulatoryAreasByLayerName = groupBy(regulatoryAreas, r => r.layer_name)
 
-  const selectedRegulatoryAreasByLayerName = groupBy(
-    regulatoryAreas?.filter(({ id }) => selectedRegulatoryAreas.includes(id)),
-    r => r.layer_name
-  )
+  const { selectedRegulatoryAreasByLayerName } = useGetRegulatoryLayersQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      selectedRegulatoryAreasByLayerName: groupBy(
+        Object.values(data?.entities ?? []).filter(regulatory => selectedRegulatoryAreas.includes(regulatory.id)),
+        regulatory => regulatory.layer_name
+      )
+    })
+  })
 
   useEffect(() => {
     if (isSelectedAccordionOpen) {

frontend/src/features/Dashboard/components/DashboardForm/Reportings/index.tsx

@@ -1,5 +1,5 @@
+import { useGetReportingsByIdsQuery } from '@api/reportingsAPI'
 import { pluralize } from '@mtes-mct/monitor-ui'
-import { type Reporting } from 'domain/entities/reporting'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
@@ -8,18 +8,20 @@ import { SelectedAccordion } from '../SelectedAccordion'
 import { Filters } from './Filters'
 import { Layer } from './Layer'
 
+import type { Reporting } from 'domain/entities/reporting'
+
 type ReportingsProps = {
   isExpanded: boolean
   isSelectedAccordionOpen: boolean
-  reportings: Reporting[] | undefined
-  selectedReportings: Reporting[]
+  reportings: Reporting[]
+  selectedReportingIds: number[]
   setExpandedAccordion: () => void
 }
 export function Reportings({
   isExpanded,
   isSelectedAccordionOpen,
   reportings,
-  selectedReportings,
+  selectedReportingIds,
   setExpandedAccordion
 }: ReportingsProps) {
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
@@ -30,24 +32,26 @@ export function Reportings({
     }
   }, [isSelectedAccordionOpen])
 
+  const { data: selectedReportings } = useGetReportingsByIdsQuery(selectedReportingIds)
+
   return (
     <div>
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Signalements">
         <StyledFilters $isExpanded={isExpanded} />
         {reportings?.map(reporting => (
-          <Layer key={reporting.id} isPinned={selectedReportings.includes(reporting)} reporting={reporting} />
+          <Layer key={reporting.id} isPinned={selectedReportingIds.includes(+reporting.id)} reporting={reporting} />
         ))}
       </Accordion>
       <SelectedAccordion
         isExpanded={isExpandedSelectedAccordion}
-        isReadOnly={selectedReportings?.length === 0}
+        isReadOnly={selectedReportingIds?.length === 0}
         setExpandedAccordion={() => setExpandedSelectedAccordion(!isExpandedSelectedAccordion)}
-        title={`${selectedReportings?.length ?? 0} ${pluralize(
+        title={`${selectedReportingIds?.length ?? 0} ${pluralize(
           'signalement',
-          selectedReportings?.length ?? 0
-        )} ${pluralize('sélectionné', selectedReportings?.length ?? 0)}`}
+          selectedReportingIds?.length ?? 0
+        )} ${pluralize('sélectionné', selectedReportingIds?.length ?? 0)}`}
       >
-        {selectedReportings?.map(reporting => (
+        {Object.values(selectedReportings?.entities ?? []).map(reporting => (
           <Layer key={reporting.id} isSelected reporting={reporting} />
         ))}
       </SelectedAccordion>

frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx

@@ -1,4 +1,5 @@
-import { getFilteredVigilanceAreas, getOpenedPanel } from '@features/Dashboard/slice'
+import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
+import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
 import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { VigilanceArea } from '@features/VigilanceArea/types'
@@ -7,18 +8,18 @@ import { pluralize } from '@mtes-mct/monitor-ui'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { Layer } from './Layer'
-import { Panel } from './Panel'
 import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
+import { Layer } from './Layer'
+import { Panel } from './Panel'
 
 type VigilanceAreasProps = {
   columnWidth: number
   isExpanded: boolean
   isSelectedAccordionOpen: boolean
   selectedVigilanceAreaIds: number[]
   setExpandedAccordion: () => void
-  vigilanceAreas: VigilanceArea.VigilanceArea[] | undefined
+  vigilanceAreas: VigilanceArea.VigilanceArea[]
 }
 export function VigilanceAreas({
   columnWidth,
@@ -31,9 +32,13 @@ export function VigilanceAreas({
   const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.VIGILANCE_AREAS))
   const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-  const selectedVigilanceAreas = vigilanceAreas?.filter(({ id }) => selectedVigilanceAreaIds?.includes(id))
-
-  const filteredVigilanceAreas = useAppSelector(state => getFilteredVigilanceAreas(state.dashboard))
+  const { selectedVigilanceAreas } = useGetVigilanceAreasQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      selectedVigilanceAreas: Object.values(data?.entities ?? []).filter(vigilanceArea =>
+        selectedVigilanceAreaIds.includes(vigilanceArea.id)
+      )
+    })
+  })
 
   useEffect(() => {
     if (isSelectedAccordionOpen) {
@@ -47,12 +52,12 @@ export function VigilanceAreas({
 
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones de vigilance">
         <StyledLayerList
-          $baseLayersLength={filteredVigilanceAreas?.length ?? 0}
+          $baseLayersLength={vigilanceAreas.length}
           $maxHeight={100}
           $showBaseLayers={isExpanded}
           data-cy="dashboard-vigilance-areas-list"
         >
-          {filteredVigilanceAreas?.map(vigilanceArea => (
+          {vigilanceAreas.map(vigilanceArea => (
             <Layer
               key={vigilanceArea.id}
               isPinned={selectedVigilanceAreaIds.includes(vigilanceArea.id)}

frontend/src/features/Dashboard/slice.ts

@@ -392,15 +392,15 @@ export const dashboardSlice = createSlice({
     updateArea(
       state,
       action: PayloadAction<{
+        dashboard: Dashboard.Dashboard
         dashboardKey: string
         extractedArea: Dashboard.ExtractedArea
-        filteredDashboard: Dashboard.Dashboard
       }>
     ) {
-      const { dashboardKey: id, extractedArea, filteredDashboard } = action.payload
+      const { dashboard, dashboardKey: id, extractedArea } = action.payload
       if (state.dashboards[id]) {
         state.dashboards[id].extractedArea = extractedArea
-        state.dashboards[id].dashboard = filteredDashboard
+        state.dashboards[id].dashboard = dashboard
       }
     },
     updateDashboard(state, action: PayloadAction<{ dashboard: Dashboard.DashboardFromApi }>) {

frontend/src/features/Dashboard/useCases/editDashboard.ts

@@ -6,7 +6,7 @@ import { sideWindowPaths } from 'domain/entities/sideWindow'
 import { generatePath } from 'react-router'
 
 import { dashboardActions, initialDashboard } from '../slice'
-import { getFilteredDashboardAndExtractedArea } from '../utils'
+import { getPopulatedExtractedArea } from '../utils'
 
 import type { HomeAppThunk } from '@store/index'
 
@@ -32,18 +32,9 @@ export const editDashboard =
         throw Error()
       }
 
-      const { extractedArea, filteredDashboard } = await getFilteredDashboardAndExtractedArea(
-        dashboard,
-        dashboard.geom,
-        data,
-        dispatch
-      )
+      const extractedArea = await getPopulatedExtractedArea(data, dispatch)
 
-      const formattedDashboard = {
-        ...initialDashboard,
-        dashboard: filteredDashboard,
-        extractedArea
-      }
+      const formattedDashboard = { ...initialDashboard, dashboard, extractedArea }
       dispatch(dashboardActions.editDashboard(formattedDashboard))
       dispatch(dashboardActions.setActiveDashboardId(dashboard.id))
       dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: dashboard.id })))

frontend/src/features/Dashboard/useCases/editDashboardArea.ts

@@ -3,7 +3,7 @@ import { addMainWindowBanner } from '@features/MainWindow/useCases/addMainWindow
 import { Level } from '@mtes-mct/monitor-ui'
 
 import { dashboardActions } from '../slice'
-import { getFilteredDashboardAndExtractedArea } from '../utils'
+import { getPopulatedExtractedArea } from '../utils'
 
 import type { HomeAppThunk } from '@store/index'
 import type { GeoJSON } from 'domain/types/GeoJSON'
@@ -18,14 +18,11 @@ export const editDashboardArea =
     if (data) {
       const dashboard = getState().dashboard.dashboards[dashboardKey]?.dashboard
       if (dashboard) {
-        const { extractedArea, filteredDashboard } = await getFilteredDashboardAndExtractedArea(
-          dashboard,
-          geometry,
-          data,
-          dispatch
-        )
+        const extractedArea = await getPopulatedExtractedArea(data, dispatch)
 
-        dispatch(dashboardActions.updateArea({ dashboardKey, extractedArea, filteredDashboard }))
+        dispatch(
+          dashboardActions.updateArea({ dashboard: { ...dashboard, geom: geometry }, dashboardKey, extractedArea })
+        )
       }
     }
     if (error) {