front: add settings panel to space time chart

Signed-off-by: Simon Ser <[email protected]>

front/public/locales/en/simulation.json

@@ -43,6 +43,10 @@
   "rotate": "Rotate the chart",
   "simplify": "Data simplification",
   "speedLimitComposition": "Composition",
+  "timeSpaceChartSettings": {
+    "paths": "Paths",
+    "conflicts": "Conflicts"
+  },
   "speedSpaceChart": "Speed Space Chart",
   "speedSpaceSettings": {
     "context": "Context",

front/public/locales/fr/simulation.json

@@ -43,6 +43,10 @@
   "rotate": "Pivoter le graphique",
   "simplify": "Simplification des données",
   "speedLimitComposition": "Composition",
+  "timeSpaceChartSettings": {
+    "paths": "Sillons",
+    "conflicts": "Conflits"
+  },
   "speedSpaceChart": "Graphique Espace Vitesse",
   "speedSpaceSettings": {
     "context": "Contexte",

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

@@ -1,12 +1,14 @@
 import { useRef, useState } from 'react';
 
+import { KebabHorizontal } from '@osrd-project/ui-icons';
 import { Manchette } from '@osrd-project/ui-manchette';
 import { useManchettesWithSpaceTimeChart } from '@osrd-project/ui-manchette-with-spacetimechart';
 import { ConflictLayer, SpaceTimeChart, PathLayer } from '@osrd-project/ui-spacetimechart';
 import type { Conflict } from '@osrd-project/ui-spacetimechart';
 
 import type { TrainSpaceTimeData } from 'applications/operationalStudies/types';
 import type { OperationalPointExtensions, OperationalPointPart } from 'common/api/osrdEditoastApi';
+import Settings from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/Settings';
 
 type ManchetteWithSpaceTimeChartProps = {
   operationalPoints: {
@@ -37,11 +39,26 @@ const ManchetteWithSpaceTimeChartWrapper = ({
     selectedTrainScheduleId
   );
 
+  const [showSettings, setShowSettings] = useState(false);
+  const [settings, setSettings] = useState({ showConflicts: false });
+
   return (
     <div className="manchette-space-time-chart-wrapper">
+      {showSettings && (
+        <Settings
+          settings={settings}
+          onChange={setSettings}
+          onClose={() => setShowSettings(false)}
+        />
+      )}
       <div className="header">
-        {/* TODO : uncomment this component in #8628 */}
-        {/* <ManchetteMenuButton /> */}
+        <button
+          type="button"
+          className="settings-btn"
+          onClick={() => setShowSettings((current) => !current)}
+        >
+          <KebabHorizontal />
+        </button>
       </div>
       <div className="header-separator" />
       <div
@@ -69,7 +86,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
             {spaceTimeChartProps.paths.map((path) => (
               <PathLayer key={path.id} path={path} color={path.color} />
             ))}
-            <ConflictLayer conflicts={conflicts} />
+            {settings.showConflicts && <ConflictLayer conflicts={conflicts} />}
           </SpaceTimeChart>
         </div>
       </div>

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

@@ -0,0 +1,43 @@
+import { type ChangeEvent } from 'react';
+
+import { Checkbox } from '@osrd-project/ui-core';
+import { X } from '@osrd-project/ui-icons';
+import { useTranslation } from 'react-i18next';
+
+type Settings = {
+  showConflicts: boolean;
+};
+
+type SettingsProps = {
+  settings: Settings;
+  onChange: (settings: Settings) => void;
+  onClose: () => void;
+};
+
+const Settings = ({ settings, onChange, onClose }: SettingsProps) => {
+  const { t } = useTranslation('simulation');
+
+  const handleConflictsChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...settings, showConflicts: event.target.checked });
+  };
+
+  return (
+    <div id="settings-panel" className="flex justify-end absolute">
+      <div className="settings-panel-section">
+        <div className="settings-panel-section-title">{t('timeSpaceChartSettings.paths')}</div>
+        <div className="selection">
+          <Checkbox
+            label={t('timeSpaceChartSettings.conflicts')}
+            checked={settings.showConflicts}
+            onChange={handleConflictsChange}
+          />
+        </div>
+      </div>
+      <button type="button" id="close-settings-panel" onClick={onClose}>
+        <X />
+      </button>
+    </div>
+  );
+};
+
+export default Settings;

front/src/modules/simulationResult/styles/manchetteWithSpaceTimeChart.scss

@@ -0,0 +1,16 @@
+.manchette-space-time-chart-wrapper {
+  position: relative;
+  overflow: hidden;
+
+  #settings-panel {
+    right: 0;
+    margin-right: 0;
+    width: 16.4375rem;
+    height: 100%;
+  }
+
+  .settings-btn {
+    margin-left: 1rem;
+    vertical-align: middle;
+  }
+}

front/src/modules/simulationResult/styles/simulationResult.scss

@@ -1,4 +1,5 @@
 @use './timeline';
+@use './manchetteWithSpaceTimeChart';
 
 .chart-container {
   display: block;