From 4f6f904485ca8080f39a8c0bcf6ced2bb7eb73d1 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Fri, 11 Oct 2024 15:04:10 +0200
Subject: [PATCH] front: add settings panel to space time chart

Signed-off-by: Simon Ser <contact@emersion.fr>
---
 front/public/locales/en/simulation.json       |  4 ++
 front/public/locales/fr/simulation.json       |  4 ++
 .../ManchetteWithSpaceTimeChart.tsx           | 23 ++++++++--
 .../ManchetteWithSpaceTimeChart/Settings.tsx  | 43 +++++++++++++++++++
 .../styles/manchetteWithSpaceTimeChart.scss   | 16 +++++++
 .../styles/simulationResult.scss              |  1 +
 6 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/Settings.tsx
 create mode 100644 front/src/modules/simulationResult/styles/manchetteWithSpaceTimeChart.scss

diff --git a/front/public/locales/en/simulation.json b/front/public/locales/en/simulation.json
index 33c8d2358fd..00f95571adf 100644
--- a/front/public/locales/en/simulation.json
+++ b/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",
diff --git a/front/public/locales/fr/simulation.json b/front/public/locales/fr/simulation.json
index f992ddd2771..2a8b10f64ca 100644
--- a/front/public/locales/fr/simulation.json
+++ b/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",
diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
index 55dce2efa5c..a6b5196c7b9 100644
--- a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
+++ b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
@@ -1,5 +1,6 @@
 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';
@@ -7,6 +8,7 @@ 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>
diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/Settings.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/Settings.tsx
new file mode 100644
index 00000000000..a40608a2fdb
--- /dev/null
+++ b/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;
diff --git a/front/src/modules/simulationResult/styles/manchetteWithSpaceTimeChart.scss b/front/src/modules/simulationResult/styles/manchetteWithSpaceTimeChart.scss
new file mode 100644
index 00000000000..4362765518e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/front/src/modules/simulationResult/styles/simulationResult.scss b/front/src/modules/simulationResult/styles/simulationResult.scss
index b20ab870671..e0038857f3f 100644
--- a/front/src/modules/simulationResult/styles/simulationResult.scss
+++ b/front/src/modules/simulationResult/styles/simulationResult.scss
@@ -1,4 +1,5 @@
 @use './timeline';
+@use './manchetteWithSpaceTimeChart';
 
 .chart-container {
   display: block;