[Tableau de bord] Fixer la taille des blocs des amps, zones réglementaires et zones de vigilance

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

@@ -61,10 +61,12 @@ const HeaderSeparator = styled.div`
   border-bottom: 2px solid ${p => p.theme.color.gainsboro};
   padding: -24px;
 `
-const AccordionContent = styled.div<{ $isExpanded: boolean }>`
+export const AccordionContent = styled.div<{ $isExpanded: boolean }>`
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
+  overflow-y: auto;
+
   font-size: 13px;
 
   max-height: ${({ $isExpanded }) => ($isExpanded ? '100vh' : '0px')};

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

@@ -4,7 +4,7 @@ import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.styl
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
-import { useEffect, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
 import { ListLayerGroup } from './ListLayerGroup'
@@ -22,85 +22,84 @@ type AmpsProps = {
   selectedAmpIds: number[]
   setExpandedAccordion: () => void
 }
-export function Amps({
-  amps,
-  columnWidth,
-  isExpanded,
-  isSelectedAccordionOpen,
-  selectedAmpIds,
-  setExpandedAccordion
-}: AmpsProps) {
-  const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.AMP))
+export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
+  ({ amps, columnWidth, isExpanded, isSelectedAccordionOpen, selectedAmpIds, setExpandedAccordion, ...props }, ref) => {
+    const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.AMP))
 
-  const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
+    const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-  const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
-  const ampsByLayerName = groupBy(filteredAmps, r => r.name)
+    const filteredAmps = useAppSelector(state => getFilteredAmps(state.dashboard))
+    const ampsByLayerName = groupBy(filteredAmps, r => r.name)
 
-  const selectedAmpByLayerName = groupBy(
-    amps?.filter(({ id }) => selectedAmpIds.includes(id)),
-    r => r.name
-  )
+    const selectedAmpByLayerName = groupBy(
+      amps?.filter(({ id }) => selectedAmpIds.includes(id)),
+      r => r.name
+    )
 
-  useEffect(() => {
-    if (isSelectedAccordionOpen) {
-      setExpandedSelectedAccordion(isSelectedAccordionOpen)
-    }
-  }, [isSelectedAccordionOpen])
+    useEffect(() => {
+      if (isSelectedAccordionOpen) {
+        setExpandedSelectedAccordion(isSelectedAccordionOpen)
+      }
+    }, [isSelectedAccordionOpen])
 
-  return (
-    <div>
-      {openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
-      <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones AMP">
-        <StyledLayerList
-          $baseLayersLength={Object.values(ampsByLayerName).length}
-          $maxHeight={100}
-          $showBaseLayers={isExpanded}
-          data-cy="dashboard-amp-list"
-        >
-          {Object.entries(ampsByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
-            const layersId = layerIdsInGroup.map((layerId: AMPFromAPI) => layerId.id)
+    return (
+      <>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <StickyContainer ref={ref} {...props}>
+          {openPanel && <StyledPanel $marginLeft={columnWidth ?? 0} layerId={openPanel.id} />}
 
-            return (
-              <ListLayerGroup
-                key={layerGroupName}
-                groupName={layerGroupName}
-                layerIds={layersId}
-                selectedAmpIds={selectedAmpIds}
-              />
-            )
-          })}
-        </StyledLayerList>
-      </Accordion>
-      <SelectedAccordion
-        isExpanded={isExpandedSelectedAccordion}
-        isReadOnly={selectedAmpIds.length === 0}
-        setExpandedAccordion={() => setExpandedSelectedAccordion(!isExpandedSelectedAccordion)}
-        title={`${selectedAmpIds.length} ${pluralize('zone', selectedAmpIds.length)} ${pluralize(
-          'sélectionnée',
-          selectedAmpIds.length
-        )}`}
-      >
-        {Object.entries(selectedAmpByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
-          const layersId = layerIdsInGroup.map((layerId: any) => layerId.id)
+          <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones AMP">
+            <StyledLayerList
+              $baseLayersLength={Object.values(ampsByLayerName).length}
+              $maxHeight={100}
+              $showBaseLayers={isExpanded}
+              data-cy="dashboard-amp-list"
+            >
+              {Object.entries(ampsByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
+                const layersId = layerIdsInGroup.map((layerId: AMPFromAPI) => layerId.id)
 
-          return (
-            <ListLayerGroup
-              key={layerGroupName}
-              groupName={layerGroupName}
-              isSelected
-              layerIds={layersId}
-              selectedAmpIds={selectedAmpIds}
-            />
-          )
-        })}
-      </SelectedAccordion>
-    </div>
-  )
-}
+                return (
+                  <ListLayerGroup
+                    key={layerGroupName}
+                    groupName={layerGroupName}
+                    layerIds={layersId}
+                    selectedAmpIds={selectedAmpIds}
+                  />
+                )
+              })}
+            </StyledLayerList>
+          </Accordion>
+          <SelectedAccordion
+            isExpanded={isExpandedSelectedAccordion}
+            isReadOnly={selectedAmpIds.length === 0}
+            setExpandedAccordion={() => setExpandedSelectedAccordion(!isExpandedSelectedAccordion)}
+            title={`${selectedAmpIds.length} ${pluralize('zone', selectedAmpIds.length)} ${pluralize(
+              'sélectionnée',
+              selectedAmpIds.length
+            )}`}
+          >
+            {Object.entries(selectedAmpByLayerName).map(([layerGroupName, layerIdsInGroup]) => {
+              const layersId = layerIdsInGroup.map((layerId: any) => layerId.id)
+
+              return (
+                <ListLayerGroup
+                  key={layerGroupName}
+                  groupName={layerGroupName}
+                  isSelected
+                  layerIds={layersId}
+                  selectedAmpIds={selectedAmpIds}
+                />
+              )
+            })}
+          </SelectedAccordion>
+        </StickyContainer>
+      </>
+    )
+  }
+)
 
 const StyledLayerList = styled(LayerSelector.LayerList)`
-  height: auto;
+  overflow-y: auto;
 `
 
 const StyledPanel = styled(AmpPanel)<{ $marginLeft?: number }>`
@@ -109,3 +108,7 @@ const StyledPanel = styled(AmpPanel)<{ $marginLeft?: number }>`
     ${p.$marginLeft}px + 25px + 4px
   )`}; // 25px is the padding, 64px is the width of the sidebar
 `
+const StickyContainer = styled.div`
+  // position: sticky;
+  // background: white;
+`

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

@@ -8,12 +8,14 @@ import { isNotArchived } from '@utils/isNotArchived'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
 
+import { AccordionContent } from './Accordion'
 import { Amps } from './Amps'
 import { Comments } from './Comments'
 import { ControlUnits } from './ControlUnits'
 import { Footer } from './Footer'
 import { RegulatoryAreas } from './RegulatoryAreas'
 import { Reportings } from './Reportings'
+import { AccordionContent as SelectedAccordionContent } from './SelectedAccordion'
 import { TerritorialPressure } from './TerritorialPressure'
 import { Toolbar } from './Toolbar'
 import { VigilanceAreas } from './VigilanceAreas'
@@ -39,6 +41,15 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
   const firstColumnRef = useRef<HTMLDivElement>(null)
   const firstColumnWidth = firstColumnRef.current?.clientWidth ?? 0
 
+  const containerRef = useRef<HTMLDivElement>(null)
+  const regRef = useRef<HTMLDivElement>(null)
+  const ampRef = useRef<HTMLDivElement>(null)
+  const zdvRef = useRef<HTMLDivElement>(null)
+  const [containerHeight, setContainerHeight] = useState<number>(0)
+  const [regulatoryAreasHeight, setRegulatoryAreasHeight] = useState<number>(0)
+  const [ampsHeight, setAmpsHeight] = useState<number>(0)
+  const [vigilanceAreasHeight, setVigilanceAreasHeight] = useState<number>(0)
+
   const toolbarRef = useRef<HTMLDivElement>(null)
   const toolbarHeight = toolbarRef.current?.clientHeight ?? 0
   const [expandedAccordionFirstColumn, setExpandedAccordionFirstColumn] = useState<Dashboard.Block | undefined>(
@@ -92,15 +103,37 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
     }
   }, [previewSelectionFilter, dispatch])
 
+  useEffect(() => {
+    if (isActive) {
+      setContainerHeight(containerRef.current?.clientHeight ?? 0)
+    }
+  }, [isActive])
+
+  useEffect(() => {
+    if (containerHeight && ampRef.current && zdvRef.current) {
+      setRegulatoryAreasHeight(containerHeight - ampRef.current.clientHeight - zdvRef.current.clientHeight)
+    }
+    if (containerHeight && regRef.current && zdvRef.current) {
+      setAmpsHeight(containerHeight - regRef.current.clientHeight - zdvRef.current.clientHeight)
+    }
+    if (containerHeight && regRef.current && ampRef.current) {
+      setVigilanceAreasHeight(containerHeight - regRef.current.clientHeight - ampRef.current.clientHeight)
+    }
+  }, [containerHeight, setExpandedAccordionFirstColumn])
+
   return (
     <>
       {isActive && (
         <>
           <Toolbar ref={toolbarRef} dashboardForm={[key, dashboard]} geometry={dashboard.dashboard.geom} />
 
-          <Container>
+          <Container ref={containerRef}>
             <Column ref={firstColumnRef} $filterHeight={toolbarHeight}>
-              <RegulatoryAreas
+              <StyledRegulatoryAreas
+                ref={regRef}
+                $maxContentHeight={150}
+                $maxHeight={containerHeight - ampsHeight - vigilanceAreasHeight - 16}
+                $maxSelectedHeight={80}
                 columnWidth={firstColumnWidth}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
                 isSelectedAccordionOpen={previewSelectionFilter}
@@ -109,15 +142,23 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.REGULATORY_AREAS)}
               />
 
-              <Amps
+              <StyledAmps
+                ref={ampRef}
+                $maxContentHeight={150}
+                $maxHeight={containerHeight - regulatoryAreasHeight - vigilanceAreasHeight - 16}
+                $maxSelectedHeight={80}
                 amps={dashboard.extractedArea?.amps}
                 columnWidth={firstColumnWidth}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.AMP}
                 isSelectedAccordionOpen={previewSelectionFilter}
                 selectedAmpIds={dashboard.dashboard.ampIds}
                 setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.AMP)}
               />
-              <VigilanceAreas
+              <StyledVigilanceAreas
+                ref={zdvRef}
+                $maxContentHeight={150}
+                $maxHeight={containerHeight - ampsHeight - regulatoryAreasHeight - 16}
+                $maxSelectedHeight={80}
                 columnWidth={firstColumnWidth}
                 isExpanded={expandedAccordionFirstColumn === Dashboard.Block.VIGILANCE_AREAS}
                 isSelectedAccordionOpen={previewSelectionFilter}
@@ -179,8 +220,60 @@ const Column = styled.div<{ $filterHeight: number }>`
   height: calc(
     100vh - 48px - 24px - 66px - ${p => p.$filterHeight}
   ); // 48px = navbar height, 24px = padding, 66px = bottom bar height, filterHeight is variable
-  scrollbar-gutter: stable;
   overflow-y: auto;
 
-  padding: 3px;
+  scrollbar-gutter: stable;
+
+  // padding: 3px;
+`
+
+const StyledRegulatoryAreas = styled(RegulatoryAreas)<{
+  $maxContentHeight: number | undefined
+  $maxHeight: number | undefined
+  $maxSelectedHeight: number | undefined
+}>`
+  padding: 5px;
+  max-height: ${p => p.$maxHeight && p.$maxHeight}px;
+  ${AccordionContent} {
+    max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
+    overflow-y: auto;
+  }
+  ${SelectedAccordionContent} {
+    max-height: ${p => p.$maxSelectedHeight && p.$maxSelectedHeight}px;
+  }
+`
+
+const StyledAmps = styled(Amps)<{
+  $maxContentHeight: number | undefined
+  $maxHeight: number | undefined
+  $maxSelectedHeight: number | undefined
+}>`
+  padding: 5px;
+
+  max-height: ${p => p.$maxHeight && p.$maxHeight}px;
+  ${AccordionContent} {
+    max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
+    overflow-y: auto;
+  }
+  ${SelectedAccordionContent} {
+    max-height: ${p => p.$maxSelectedHeight && p.$maxSelectedHeight}px;
+  }
+`
+
+const StyledVigilanceAreas = styled(VigilanceAreas)<{
+  $maxContentHeight: number | undefined
+  $maxHeight: number | undefined
+  $maxSelectedHeight: number | undefined
+}>`
+  padding: 5px;
+
+  max-height: ${p => p.$maxHeight && p.$maxHeight}px;
+
+  ${AccordionContent} {
+    max-height: ${p => p.$maxContentHeight && p.$maxContentHeight}px;
+    overflow-y: auto;
+  }
+  ${SelectedAccordionContent} {
+    max-height: ${p => p.$maxSelectedHeight && p.$maxSelectedHeight}px;
+  }
 `

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

@@ -58,9 +58,9 @@ export function ListLayerGroup({
       <StyledGroupWrapper $isOpen={zonesAreOpen} $isSelected={isSelected} onClick={clickOnGroupZones}>
         <LayerSelector.GroupName
           data-cy={`dashboard-${isSelected ? 'selected-' : ''}regulatory-result-group`}
-          title={groupName}
+          title={getTitle(groupName)}
         >
-          {getTitle(groupName) ?? ''}
+          {getTitle(groupName)}
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>
           <LayerSelector.ZonesNumber>{`${layerIds.length}/${totalNumberOfZones}`}</LayerSelector.ZonesNumber>