ui-speedspacechart: fix display issues when the GEV is integrated in …

…OSRD

- add setHeight props in SpeedSpaceChart, set it with dynamicHeight
- adapt the story in .tsx to use a useState() hook
- remove mt-2 useless tailwind rule for front-interractivity-layer
- calculate the settings panel height by using the SpeedSpaceChart height
- disable speedLimits and temporarySpeedLimits checkboxes
- add missing type: 'non_electrified' in ElectrifictationValues

ui-speedspacechart/src/__tests__/utils.spec.ts

@@ -7,6 +7,7 @@ import {
   getAdaptiveHeight,
   positionOnGraphScale,
   getLinearLayerMarginTop,
+  getLinearLayersDisplayedHeight,
   slopesValues,
   findPreviousAndNextPosition,
 } from '../components/utils';
@@ -267,6 +268,48 @@ describe('getLinearLayerMarginTop', () => {
   });
 });
 
+describe('getLinearLayersDisplayedHeight', () => {
+  let layersDisplay = {
+    steps: false,
+    declivities: false,
+    speedLimits: false,
+    temporarySpeedLimits: false,
+    electricalProfiles: false,
+    powerRestrictions: false,
+    speedLimitTags: false,
+  };
+
+  it('should return the sum of the heights of the linear layers that are displayed', () => {
+    layersDisplay = {
+      ...layersDisplay,
+      electricalProfiles: true,
+      powerRestrictions: true,
+      speedLimitTags: true,
+    };
+    expect(getLinearLayersDisplayedHeight(layersDisplay)).toBe(136);
+  });
+
+  it('should return one linear layer height', () => {
+    layersDisplay = {
+      ...layersDisplay,
+      electricalProfiles: true,
+      powerRestrictions: false,
+      speedLimitTags: false,
+    };
+
+    expect(getLinearLayersDisplayedHeight(layersDisplay)).toBe(56);
+  });
+
+  it('should return 0 if no linear layers are displayed', () => {
+    layersDisplay = {
+      ...layersDisplay,
+      electricalProfiles: false,
+    };
+
+    expect(getLinearLayersDisplayedHeight(layersDisplay)).toBe(0);
+  });
+});
+
 describe('findPreviousAndNextPosition', () => {
   const xPositionReference = (ref: number) => ref;
 

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -28,6 +28,7 @@ export type SpeedSpaceChartProps = {
   width: number;
   height: number;
   backgroundColor: string;
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
   data: Data;
   translations?: {
     detailsBoxDisplay: {
@@ -56,6 +57,7 @@ const SpeedSpaceChart = ({
   height,
   backgroundColor,
   data,
+  setHeight,
   translations,
 }: SpeedSpaceChartProps) => {
   const [store, setStore] = useState<Store>({
@@ -145,6 +147,10 @@ const SpeedSpaceChart = ({
     }
   }, [data]);
 
+  useEffect(() => {
+    setHeight(dynamicHeight);
+  }, [setHeight, dynamicHeight]);
+
   return (
     <div
       style={{
@@ -166,6 +172,7 @@ const SpeedSpaceChart = ({
           style={{ width: adjustedWidthRightAxis }}
         >
           <SettingsPanel
+            globalHeight={dynamicHeight}
             color={backgroundColor}
             store={store}
             setStore={setStore}

ui-speedspacechart/src/components/common/DetailsBox.tsx

@@ -74,8 +74,8 @@ const DetailsBox = ({
       {tractionStatus && effortText && <span id="effort-text">{effortText}</span>}
       {electricalModeText && (
         <div id="electrical-mode-text">
-          <p>{electricalModeText}</p>
-          {electricalProfiles && <p className="ml-2">{electricalProfileText}</p>}
+          <span>{electricalModeText}</span>
+          {electricalProfiles && <span className="ml-2">{electricalProfileText}</span>}
         </div>
       )}
       {powerRestrictions && <span id="power-restriction">{powerRestrictionText}</span>}

ui-speedspacechart/src/components/common/SettingsPanel.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Store } from '../../types/chartTypes';
 import type { SpeedSpaceChartProps } from '../SpeedSpaceChart';
 import { DETAILS_BOX_SELECTION, LAYERS_SELECTION } from '../const';
 import { X } from '@osrd-project/ui-icons';
 import { Checkbox } from '@osrd-project/ui-core';
-import { checkLayerData } from '../utils';
+import { checkLayerData, getAdaptiveHeight } from '../utils';
+
+const SETTINGS_PANEL_BASE_HEIGHT = 442;
+const SPEEDSPACECHART_BASE_HEIGHT = 521.5;
 
 type SettingsPanelProps = {
+  globalHeight: number;
   color: string;
   store: Store;
   setStore: React.Dispatch<React.SetStateAction<Store>>;
@@ -15,12 +19,14 @@ type SettingsPanelProps = {
 };
 
 const SettingsPanel = ({
+  globalHeight,
   color,
   store,
   setStore,
   setIsMouseHoveringSettingsPanel,
   translations,
 }: SettingsPanelProps) => {
+  const [height, setHeight] = useState(`${SETTINGS_PANEL_BASE_HEIGHT}px`);
   const closeSettingsPanel = () => {
     setIsMouseHoveringSettingsPanel(false);
     setStore((prev) => ({
@@ -29,10 +35,20 @@ const SettingsPanel = ({
     }));
   };
 
+  useEffect(() => {
+    const linearLayersHeight = getAdaptiveHeight(0, store.layersDisplay);
+
+    if (globalHeight < SPEEDSPACECHART_BASE_HEIGHT + linearLayersHeight) {
+      setHeight(
+        `${globalHeight - linearLayersHeight - (SPEEDSPACECHART_BASE_HEIGHT - SETTINGS_PANEL_BASE_HEIGHT)}px`
+      );
+    }
+  }, [globalHeight, store.layersDisplay]);
+
   return (
     <div
       id="settings-panel"
-      style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)` }}
+      style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)`, height }}
       className="font-sans"
       onMouseEnter={() => setIsMouseHoveringSettingsPanel(true)}
       onMouseLeave={() => setIsMouseHoveringSettingsPanel(false)}

ui-speedspacechart/src/components/layers/FrontInteractivityLayer.tsx

@@ -23,7 +23,7 @@ const FrontInteractivityLayer = ({
   return (
     <canvas
       id="front-interactivity-layer"
-      className="absolute ml-10 mt-2"
+      className="absolute"
       ref={canvas}
       width={width}
       height={height}

ui-speedspacechart/src/components/utils.ts

@@ -4,6 +4,7 @@ import {
   LINEAR_LAYER_SEPARATOR_HEIGHT,
   LINEAR_LAYERS_HEIGHTS_BY_NAME,
   LAYERS_SELECTION,
+  LINEAR_LAYERS_HEIGHTS,
 } from './const';
 
 type SpeedRangeValues = {
@@ -75,17 +76,13 @@ export const getAdaptiveHeight = (
   layersDisplay: Store['layersDisplay'],
   isIncludingLinearLayers: boolean = true
 ): number => {
-  let adjustment = 0;
+  const adjustment = [
+    layersDisplay.electricalProfiles ? LINEAR_LAYERS_HEIGHTS.ELECTRICAL_PROFILES_HEIGHT : 0,
+    layersDisplay.powerRestrictions ? LINEAR_LAYERS_HEIGHTS.POWER_RESTRICTIONS_HEIGHT : 0,
+    layersDisplay.speedLimitTags ? LINEAR_LAYERS_HEIGHTS.SPEED_LIMIT_TAGS_HEIGHT : 0,
+  ].reduce((acc, curr) => acc + curr, 0);
 
-  Object.keys(LINEAR_LAYERS_HEIGHTS_BY_NAME).forEach((key) => {
-    const layer = key as keyof typeof LINEAR_LAYERS_HEIGHTS_BY_NAME;
-    if (layersDisplay[layer]) {
-      adjustment += isIncludingLinearLayers
-        ? LINEAR_LAYERS_HEIGHTS_BY_NAME[layer]
-        : -LINEAR_LAYERS_HEIGHTS_BY_NAME[layer];
-    }
-  });
-  return height + adjustment;
+  return (height += isIncludingLinearLayers ? adjustment : -adjustment);
 };
 
 /**
@@ -108,6 +105,13 @@ export const getLinearLayerMarginTop = (
   return height + adjustment - MARGINS.MARGIN_BOTTOM;
 };
 
+export const getLinearLayersDisplayedHeight = (layersDisplay: Store['layersDisplay']) =>
+  [
+    layersDisplay.electricalProfiles ? LINEAR_LAYERS_HEIGHTS.ELECTRICAL_PROFILES_HEIGHT : 0,
+    layersDisplay.powerRestrictions ? LINEAR_LAYERS_HEIGHTS.POWER_RESTRICTIONS_HEIGHT : 0,
+    layersDisplay.speedLimitTags ? LINEAR_LAYERS_HEIGHTS.SPEED_LIMIT_TAGS_HEIGHT : 0,
+  ].reduce((acc, curr) => acc + curr, 0);
+
 /**
  * Calculates the position on the graph scale based on the given parameters.
  * @param position - The current position.
@@ -191,7 +195,9 @@ export const drawLinearLayerBackground = (
  */
 export const checkLayerData = (store: Store, selection: (typeof LAYERS_SELECTION)[number]) => {
   return (
-    (selection === 'electricalProfiles' ||
+    (selection === 'speedLimits' ||
+      selection === 'temporarySpeedLimits' ||
+      selection === 'electricalProfiles' ||
       selection === 'powerRestrictions' ||
       selection === 'speedLimitTags') &&
     !store[selection]

ui-speedspacechart/src/stories/SpeedSpaceChart.stories.ts → ui-speedspacechart/src/stories/SpeedSpaceChart.stories.tsx

@@ -1,7 +1,8 @@
+import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@osrd-project/ui-core/dist/theme.css';
 import '@osrd-project/ui-speedspacechart/dist/theme.css';
-import SpeedSpaceChart from '../components/SpeedSpaceChart';
+import SpeedSpaceChart, { type SpeedSpaceChartProps } from '../components/SpeedSpaceChart';
 import { pathPropertiesPmpLm } from './assets/path_properties_PMP_LM';
 import { simulationPmpLm } from './assets/simulation_PMP_LM';
 import { formatData } from './utils';
@@ -16,19 +17,58 @@ const data = formatData(
   speedLimitTags
 );
 
+const SpeedSpaceChartStory = ({
+  height,
+  width,
+  backgroundColor,
+  data,
+  translations,
+}: SpeedSpaceChartProps) => {
+  const [containerHeight, setContainerHeight] = useState(521.5);
+
+  useEffect(() => {
+    setContainerHeight(height);
+  }, [height]);
+
+  return (
+    <div style={{ height: containerHeight }}>
+      <SpeedSpaceChart
+        width={width}
+        height={height}
+        backgroundColor={backgroundColor}
+        data={data}
+        setHeight={setContainerHeight}
+        translations={translations}
+      />
+    </div>
+  );
+};
+
 const meta: Meta<typeof SpeedSpaceChart> = {
   title: 'SpeedSpaceChart/Rendering',
   component: SpeedSpaceChart,
+  decorators: [(Story) => <Story />],
   parameters: {
     layout: 'centered',
     backgrounds: {
       default: 'dark',
     },
   },
+  args: {
+    width: 1440,
+    height: 521.5,
+    backgroundColor: 'rgb(247, 246, 238)',
+    data: data,
+    setHeight: () => {},
+    translations: translations,
+  },
+
+  render: (args) => <SpeedSpaceChartStory {...args} />,
   tags: ['autodocs'],
 };
 
 export default meta;
+
 type Story = StoryObj<typeof SpeedSpaceChart>;
 
 export const SpeedSpaceChartDefault: Story = {
@@ -37,6 +77,7 @@ export const SpeedSpaceChartDefault: Story = {
     height: 521.5,
     backgroundColor: 'rgb(247, 246, 238)',
     data,
+    setHeight: () => {},
     translations,
   },
 };

ui-speedspacechart/src/styles/main.css

@@ -135,7 +135,6 @@
 #settings-panel {
   position: absolute;
   display: flex;
-  height: 27.625rem;
   width: 32.875rem;
   margin-right: 20px;
   color: rgb(49, 46, 43);

ui-speedspacechart/src/types/chartTypes.ts

@@ -2,6 +2,7 @@ export type ElectricalPofilelValues = {
   electricalProfile: string;
   color?: string;
   heightLevel?: number;
+  handled?: boolean;
 };
 
 export type PowerRestrictionValues = {
@@ -15,7 +16,7 @@ export type SpeedLimitTagValues = {
 };
 
 export type ElectrificationValues = {
-  type: 'electrification' | 'neutral_section';
+  type: 'electrification' | 'neutral_section' | 'non_electrified';
   voltage?: '1500V' | '25000V';
   lowerPantograph?: boolean;
 };
@@ -37,6 +38,8 @@ export type Data = {
   electricalProfiles?: LayerData<ElectricalPofilelValues>[];
   powerRestrictions?: LayerData<PowerRestrictionValues>[];
   speedLimitTags?: LayerData<SpeedLimitTagValues>[];
+  speedLimits?: LayerData<number>[];
+  temporarySpeedLimits?: LayerData<number>[];
 };
 
 export type Store = Data & {