front: resizable GET

front/src/applications/operationalStudies/views/SimulationResults.tsx

@@ -7,7 +7,10 @@ import { useTranslation } from 'react-i18next';
 import type { SimulationResultsData } from 'applications/operationalStudies/types';
 import type { Conflict } from 'common/api/osrdEditoastApi';
 import SimulationWarpedMap from 'common/Map/WarpedMap/SimulationWarpedMap';
-import ManchetteWithSpaceTimeChartWrapper from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart';
+import ResizableSection from 'common/ResizableSection';
+import ManchetteWithSpaceTimeChartWrapper, {
+  MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT,
+} from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart';
 import SimulationResultsMap from 'modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap';
 import useGetProjectedTrainOperationalPoints from 'modules/simulationResult/components/SpaceTimeChart/useGetProjectedTrainOperationalPoints';
 import useProjectedConflicts from 'modules/simulationResult/components/SpaceTimeChart/useProjectedConflicts';
@@ -24,6 +27,7 @@ import { getPointCoordinates } from 'utils/geometry';
 
 const SPEED_SPACE_CHART_HEIGHT = 521.5;
 const HANDLE_TAB_RESIZE_HEIGHT = 20;
+const MANCHETTE_HEIGHT_DIFF = 76;
 
 type SimulationResultsProps = {
   scenarioData: { name: string; infraName: string };
@@ -56,6 +60,10 @@ const SimulationResults = ({
   const [extViewport, setExtViewport] = useState<Viewport>();
   const [showWarpedMap, setShowWarpedMap] = useState(false);
 
+  const [manchetteWithSpaceTimeChartHeight, setManchetteWithSpaceTimeChartHeight] = useState(
+    MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT
+  );
+
   const [speedSpaceChartContainerHeight, setSpeedSpaceChartContainerHeight] =
     useState(SPEED_SPACE_CHART_HEIGHT);
   const [mapCanvas, setMapCanvas] = useState<string>();
@@ -131,42 +139,52 @@ const SimulationResults = ({
       )}
 
       {/* SIMULATION : SPACE TIME CHART */}
-      <div className="simulation-warped-map d-flex flex-row align-items-stretch mb-2">
-        {projectionData && projectionData.projectedTrains.length > 0 && pathProperties && (
-          <>
-            <button
-              type="button"
-              className="show-warped-map-button my-3 ml-3 mr-1"
-              aria-label={t('toggleWarpedMap')}
-              title={t('toggleWarpedMap')}
-              onClick={() => setShowWarpedMap(!showWarpedMap)}
-            >
-              {showWarpedMap ? <ChevronLeft /> : <ChevronRight />}
-            </button>
-            <SimulationWarpedMap
-              collapsed={!showWarpedMap}
-              pathGeometry={projectionData.geometry}
-            />
+      <ResizableSection
+        height={manchetteWithSpaceTimeChartHeight}
+        setHeight={setManchetteWithSpaceTimeChartHeight}
+        minHeight={MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT}
+      >
+        <div
+          className="simulation-warped-map d-flex flex-row align-items-stretch mb-2"
+          style={{ height: manchetteWithSpaceTimeChartHeight }}
+        >
+          {projectionData && projectionData.projectedTrains.length > 0 && pathProperties && (
+            <>
+              <button
+                type="button"
+                className="show-warped-map-button my-3 ml-3 mr-1"
+                aria-label={t('toggleWarpedMap')}
+                title={t('toggleWarpedMap')}
+                onClick={() => setShowWarpedMap(!showWarpedMap)}
+              >
+                {showWarpedMap ? <ChevronLeft /> : <ChevronRight />}
+              </button>
+              <SimulationWarpedMap
+                collapsed={!showWarpedMap}
+                pathGeometry={projectionData.geometry}
+              />
 
-            <div className="osrd-simulation-container d-flex flex-grow-1 flex-shrink-1">
-              <div className="chart-container">
-                <ManchetteWithSpaceTimeChartWrapper
-                  operationalPoints={projectedOperationalPoints}
-                  projectPathTrainResult={projectionData?.projectedTrains}
-                  selectedTrainScheduleId={selectedTrainSchedule?.id}
-                  waypointsPanelData={{
-                    filteredWaypoints: filteredOperationalPoints,
-                    setFilteredWaypoints: setFilteredOperationalPoints,
-                    projectionPath: projectionData.trainSchedule.path,
-                  }}
-                  conflicts={conflictZones}
-                  projectionLoaderData={projectionData.projectionLoaderData}
-                />
+              <div className="osrd-simulation-container d-flex flex-grow-1 flex-shrink-1">
+                <div className="chart-container">
+                  <ManchetteWithSpaceTimeChartWrapper
+                    operationalPoints={projectedOperationalPoints}
+                    projectPathTrainResult={projectionData?.projectedTrains}
+                    selectedTrainScheduleId={selectedTrainSchedule?.id}
+                    waypointsPanelData={{
+                      filteredWaypoints: filteredOperationalPoints,
+                      setFilteredWaypoints: setFilteredOperationalPoints,
+                      projectionPath: projectionData.trainSchedule.path,
+                    }}
+                    conflicts={conflictZones}
+                    projectionLoaderData={projectionData.projectionLoaderData}
+                    height={manchetteWithSpaceTimeChartHeight - MANCHETTE_HEIGHT_DIFF}
+                  />
+                </div>
               </div>
-            </div>
-          </>
-        )}
-      </div>
+            </>
+          )}
+        </div>
+      </ResizableSection>
 
       {/* TRAIN : SPACE SPEED CHART */}
       {selectedTrainRollingStock && trainSimulation && pathProperties && selectedTrainSchedule && (

front/src/applications/stdcm/components/StdcmResults/StdcmDebugResults.tsx

@@ -7,13 +7,17 @@ import useProjectedTrainsForStdcm from 'applications/stdcm/hooks/useProjectedTra
 import type { StdcmResultsOutput } from 'applications/stdcm/types';
 import { osrdEditoastApi, type TrackRange } from 'common/api/osrdEditoastApi';
 import { useOsrdConfSelectors } from 'common/osrdContext';
+import ResizableSection from 'common/ResizableSection';
 import i18n from 'i18n';
-import ManchetteWithSpaceTimeChartWrapper from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart';
+import ManchetteWithSpaceTimeChartWrapper, {
+  MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT,
+} from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart';
 import SpeedSpaceChartContainer from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';
 
 const SPEED_SPACE_CHART_HEIGHT = 521.5;
 const HANDLE_TAB_RESIZE_HEIGHT = 20;
+const MANCHETTE_HEIGHT_DIFF = 100;
 
 type StdcmDebugResultsProps = {
   pathTrackRanges: TrackRange[];
@@ -31,6 +35,10 @@ const StdcmDebugResults = ({
     useState(SPEED_SPACE_CHART_HEIGHT);
   const tWithoutPrefix = i18n.getFixedT(null, 'stdcm');
 
+  const [manchetteWithSpaceTimeChartHeight, setManchetteWithSpaceTimeChartHeight] = useState(
+    MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT
+  );
+
   const projectedData = useProjectedTrainsForStdcm(results);
 
   const { data: workSchedules } = osrdEditoastApi.endpoints.postWorkSchedulesProjectPath.useQuery(
@@ -46,18 +54,30 @@ const StdcmDebugResults = ({
   return (
     <>
       {projectedData && pathProperties.manchetteOperationalPoints && (
-        <div className="osrd-simulation-container mb-2">
-          <p className="mt-2 mb-3 ml-4 font-weight-bold">{tWithoutPrefix('spaceTimeGraphic')}</p>
-          <div className="chart-container mt-2">
-            <ManchetteWithSpaceTimeChartWrapper
-              operationalPoints={pathProperties.manchetteOperationalPoints}
-              projectPathTrainResult={projectedData.spaceTimeData}
-              selectedTrainScheduleId={STDCM_TRAIN_ID}
-              workSchedules={workSchedules}
-              projectionLoaderData={projectedData.projectionLoaderData}
-            />
+        <ResizableSection
+          height={manchetteWithSpaceTimeChartHeight}
+          setHeight={setManchetteWithSpaceTimeChartHeight}
+          minHeight={MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT}
+        >
+          <div
+            className="osrd-simulation-container mb-2"
+            style={{
+              height: manchetteWithSpaceTimeChartHeight,
+            }}
+          >
+            <p className="mt-2 mb-3 ml-4 font-weight-bold">{tWithoutPrefix('spaceTimeGraphic')}</p>
+            <div className="chart-container mt-2">
+              <ManchetteWithSpaceTimeChartWrapper
+                operationalPoints={pathProperties.manchetteOperationalPoints}
+                projectPathTrainResult={projectedData.spaceTimeData}
+                selectedTrainScheduleId={STDCM_TRAIN_ID}
+                workSchedules={workSchedules}
+                projectionLoaderData={projectedData.projectionLoaderData}
+                height={manchetteWithSpaceTimeChartHeight - MANCHETTE_HEIGHT_DIFF}
+              />
+            </div>
           </div>
-        </div>
+        </ResizableSection>
       )}
 
       <div className="osrd-simulation-container my-2 speedspacechart-container">

front/src/common/ResizableSection.tsx

@@ -0,0 +1,60 @@
+import { useState, type PropsWithChildren } from 'react';
+
+import { Rnd } from 'react-rnd';
+
+const ResizableSection = ({
+  minHeight,
+  height,
+  setHeight,
+  children,
+}: PropsWithChildren<{
+  minHeight?: number;
+  height: number;
+  setHeight?: React.Dispatch<React.SetStateAction<number>>;
+}>) => {
+  const [baseHeight, setBaseHeight] = useState(height);
+  const [sectionHeight, setSectionHeight] = useState(baseHeight);
+
+  return (
+    <div className="resizable-section" style={{ height: sectionHeight }}>
+      <Rnd
+        default={{
+          x: 0,
+          y: 0,
+          width: '100%',
+          height: sectionHeight,
+        }}
+        size={{
+          width: '100%',
+          height: sectionHeight,
+        }}
+        minHeight={minHeight}
+        disableDragging
+        enableResizing={{
+          top: false,
+          topLeft: false,
+          topRight: false,
+          bottomLeft: false,
+          bottomRight: false,
+          bottom: true,
+          left: false,
+          right: false,
+        }}
+        resizeHandleClasses={{
+          bottom: 'resizable-section-handle',
+        }}
+        onResizeStart={() => {
+          setBaseHeight(sectionHeight);
+        }}
+        onResize={(_e, _dir, _refToElement, delta) => {
+          setSectionHeight(baseHeight + delta.height);
+          setHeight?.(baseHeight + delta.height);
+        }}
+      >
+        {children}
+      </Rnd>
+    </div>
+  );
+};
+
+export default ResizableSection;

front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx

@@ -40,8 +40,10 @@ type ManchetteWithSpaceTimeChartProps = {
     totalTrains: number;
     allTrainsProjected: boolean;
   };
+  height?: number;
 };
-const DEFAULT_HEIGHT = 561;
+
+export const MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT = 561;
 
 const ManchetteWithSpaceTimeChartWrapper = ({
   operationalPoints,
@@ -51,8 +53,8 @@ const ManchetteWithSpaceTimeChartWrapper = ({
   conflicts = [],
   workSchedules,
   projectionLoaderData: { totalTrains, allTrainsProjected },
+  height = MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT,
 }: ManchetteWithSpaceTimeChartProps) => {
-  const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const [waypointsPanelIsOpen, setWaypointsPanelIsOpen] = useState(false);
@@ -154,7 +156,8 @@ const ManchetteWithSpaceTimeChartWrapper = ({
     manchetteWaypoints,
     cutProjectedTrains,
     manchetteWithSpaceTimeChartRef,
-    selectedTrainScheduleId
+    selectedTrainScheduleId,
+    height
   );
 
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
@@ -202,17 +205,17 @@ const ManchetteWithSpaceTimeChartWrapper = ({
       <div
         ref={manchetteWithSpaceTimeChartRef}
         className="manchette flex"
-        style={{ height: `${heightOfManchetteWithSpaceTimeChart}px` }}
+        style={{ height }}
         onScroll={handleScroll}
       >
-        <Manchette {...manchetteProps} />
+        <Manchette {...manchetteProps} height={height} />
         <div
           className="space-time-chart-container"
           style={{
             bottom: 0,
             left: 0,
             top: 2,
-            height: `${heightOfManchetteWithSpaceTimeChart - 6}px`,
+            height: height - 6,
           }}
         >
           <div className="toolbar">
@@ -229,6 +232,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
           )}
           <SpaceTimeChart
             className="inset-0 absolute h-full"
+            height={height}
             spaceOrigin={
               (waypointsPanelData?.filteredWaypoints ?? operationalPoints).at(0)?.position || 0
             }

front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx

@@ -91,6 +91,11 @@ const SpeedSpaceChartContainer = ({
       disableDragging
       enableResizing={{
         bottom: true,
+        top: false,
+        topLeft: false,
+        topRight: false,
+        left: false,
+        right: false,
       }}
       onResizeStart={() => {
         setBaseHeightOfSpeedSpaceChart(heightOfSpeedSpaceChart);

front/src/styles/scss/common/_components.scss

@@ -8,5 +8,6 @@
 @import 'components/selector';
 @import 'components/stationCard';
 @import 'components/tabs';
+@import 'components/resizableSection';
 @import 'components/tipped';
 @import 'components/typeAndPath';

front/src/styles/scss/common/components/_resizableSection.scss

@@ -0,0 +1,17 @@
+.resizable-section-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &::after {
+    content: '';
+    width: 72px;
+    height: 4px;
+    border-radius: 2px;
+    margin-bottom: 6px;
+    background-color: var(--coolgray3);
+  }
+  &:hover::after {
+    background-color: var(--coolgray9);
+  }
+}