Unify voltage ranges

src/components/app-wrapper.jsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import App from './app';
 import {
     createTheme,
@@ -75,6 +75,7 @@ import {
     MAP_BASEMAP_CARTO_NOLABEL,
     businessErrorsFr,
     businessErrorsEn,
+    fetchBaseVoltages,
 } from '@gridsuite/commons-ui';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router';
@@ -103,11 +104,15 @@ import events_locale_fr from '../translations/dynamic/events-locale-fr';
 import events_locale_en from '../translations/dynamic/events-locale-en';
 import spreadsheet_locale_fr from '../translations/spreadsheet-fr';
 import spreadsheet_locale_en from '../translations/spreadsheet-en';
+import base_voltages_fr from '../translations/external/base-voltages-fr';
+import base_voltages_en from '../translations/external/base-voltages-en';
 import { PARAM_THEME, basemap_style_theme_key } from '../utils/config-params';
 import useNotificationsUrlGenerator from 'hooks/use-notifications-url-generator';
 import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community';
 import { lightThemeCssVars } from '../styles/light-theme-css-vars';
 import { darkThemeCssVars } from '../styles/dark-theme-css-vars';
+import { getBaseVoltagesCssVars } from 'utils/colors';
+import { saveLocalStorageBaseVoltages } from 'redux/session-storage/local-storage';
 
 // Register all community features (migration to V33)
 ModuleRegistry.registerModules([AllCommunityModule]);
@@ -408,6 +413,7 @@ const messages = {
         ...errors_locale_en,
         ...events_locale_en,
         ...spreadsheet_locale_en,
+        ...base_voltages_en,
         ...parametersEn,
         ...useUniqueNameValidationEn,
         ...filterEn,
@@ -447,6 +453,7 @@ const messages = {
         ...errors_locale_fr,
         ...events_locale_fr,
         ...spreadsheet_locale_fr,
+        ...base_voltages_fr,
         ...parametersFr,
         ...useUniqueNameValidationFr,
         ...filterFr,
@@ -462,7 +469,19 @@ const AppWrapperWithRedux = () => {
     const theme = useSelector((state) => state[PARAM_THEME]);
     const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]);
 
-    const rootCssVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars;
+    useEffect(() => {
+        fetchBaseVoltages().then((appMetadataBaseVoltages) => {
+            saveLocalStorageBaseVoltages(appMetadataBaseVoltages);
+        });
+    }, []);
+
+    const rootCssVars = useMemo(() => {
+        const themeVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars;
+        return {
+            ...themeVars,
+            ...getBaseVoltagesCssVars(theme),
+        };
+    }, [theme]);
 
     const urlMapper = useNotificationsUrlGenerator();
 

src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane.tsx

@@ -11,10 +11,11 @@ import { useSelector } from 'react-redux';
 import { PARAM_LANGUAGE, PARAM_USE_NAME } from '../../../../../../utils/config-params';
 import PositionDiagram from './position-diagram';
 import { SLD_DISPLAY_MODE } from '../../../../../network/constants';
-import { getVoltageLevelSingleLineDiagram } from '../../../../../../services/study/network';
+import { getVoltageLevelSingleLineDiagramUrl } from '../../../../../../services/study/network';
 import { AppState } from 'redux/reducer';
 import type { UUID } from 'node:crypto';
 import { DiagramType } from '../../diagram.type';
+import { getBaseVoltagesConfig } from 'utils/base-voltages-utils';
 
 interface PositionDiagramPaneProps {
     open: boolean;
@@ -40,29 +41,28 @@ const PositionDiagramPane: FC<PositionDiagramPaneProps> = ({
         if (!voltageLevelId) {
             return '';
         }
-        return getVoltageLevelSingleLineDiagram({
+        return getVoltageLevelSingleLineDiagramUrl({
             studyUuid: studyUuid,
             currentNodeUuid: currentNodeUuid,
             currentRootNetworkUuid: currentRootNetworkUuid,
             voltageLevelId: voltageLevelId,
-            useName: useName,
-            centerLabel: networkVisuParams.singleLineDiagramParameters.centerLabel,
-            diagonalLabel: networkVisuParams.singleLineDiagramParameters.diagonalLabel,
-            componentLibrary: networkVisuParams.singleLineDiagramParameters.componentLibrary,
-            sldDisplayMode: SLD_DISPLAY_MODE.FEEDER_POSITION,
-            language: language,
         });
-    }, [
-        voltageLevelId,
-        studyUuid,
-        currentNodeUuid,
-        currentRootNetworkUuid,
-        useName,
-        networkVisuParams.singleLineDiagramParameters.centerLabel,
-        networkVisuParams.singleLineDiagramParameters.diagonalLabel,
-        networkVisuParams.singleLineDiagramParameters.componentLibrary,
-        language,
-    ]);
+    }, [voltageLevelId, studyUuid, currentNodeUuid, currentRootNetworkUuid]);
+    const sldRequestInfos = {
+        useName: useName,
+        centerLabel: networkVisuParams.singleLineDiagramParameters.centerLabel,
+        diagonalLabel: networkVisuParams.singleLineDiagramParameters.diagonalLabel,
+        componentLibrary: networkVisuParams.singleLineDiagramParameters.componentLibrary,
+        sldDisplayMode: SLD_DISPLAY_MODE.FEEDER_POSITION,
+        topologicalColoring: true,
+        language: language,
+        baseVoltagesConfigInfos: getBaseVoltagesConfig(),
+    };
+    const fetchOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(sldRequestInfos),
+    };
 
     return (
         <Dialog onClose={onClose} open={open} maxWidth="md" scroll="body">
@@ -72,6 +72,7 @@ const PositionDiagramPane: FC<PositionDiagramPaneProps> = ({
                     diagramTitle={voltageLevelId}
                     svgUrl={voltageLevelSingleLineDiagramUrl}
                     svgType={DiagramType.VOLTAGE_LEVEL}
+                    fetchOptions={fetchOptions}
                 />
             )}
         </Dialog>

src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram.tsx

@@ -28,6 +28,7 @@ interface PositionDiagramProps {
     onClose: () => void;
     svgType: string;
     disabled?: boolean;
+    fetchOptions?: RequestInit;
 }
 
 const PositionDiagram = forwardRef((props: PositionDiagramProps, ref: Ref<HTMLDivElement>) => {
@@ -59,7 +60,7 @@ const PositionDiagram = forwardRef((props: PositionDiagramProps, ref: Ref<HTMLDi
     useEffect(() => {
         if (props.svgUrl) {
             updateLoadingState(true);
-            fetchSvg(props.svgUrl)
+            fetchSvg(props.svgUrl, props.fetchOptions)
                 .then((data) => {
                     if (data !== null) {
                         setSvg({

src/components/network/constants.ts

@@ -210,22 +210,3 @@ export const REGULATING_TERMINAL_TYPES = [
 export const NUMBER = 'number';
 export const ENUM = 'enum';
 export const BOOLEAN = 'boolean';
-
-export interface VoltageLevelInterval {
-    name: string;
-    vlValue: number;
-    minValue: number;
-    maxValue: number;
-}
-
-export const BASE_VOLTAGES: VoltageLevelInterval[] = [
-    { name: 'vl300to500', vlValue: 400, minValue: 300, maxValue: Infinity },
-    { name: 'vl180to300', vlValue: 225, minValue: 180, maxValue: 300 },
-    { name: 'vl120to180', vlValue: 150, minValue: 120, maxValue: 180 },
-    { name: 'vl70to120', vlValue: 90, minValue: 70, maxValue: 120 },
-    { name: 'vl50to70', vlValue: 63, minValue: 50, maxValue: 70 },
-    { name: 'vl30to50', vlValue: 45, minValue: 30, maxValue: 50 },
-    { name: 'vl0to30', vlValue: 20, minValue: 0, maxValue: 30 },
-];
-
-export const MAX_VOLTAGE = 500;

src/components/network/network-map-panel.tsx

@@ -70,7 +70,7 @@ import GuidancePopup from './guidance-popup';
 import SelectionCreationPanel from './selection-creation-panel/selection-creation-panel';
 import { useEquipmentMenu } from '../../hooks/use-equipment-menu';
 import useEquipmentDialogs from 'hooks/use-equipment-dialogs';
-import { getNominalVoltageColor } from 'utils/colors';
+import { getBaseVoltageNetworkMapColor } from 'utils/colors';
 
 const LABELS_ZOOM_THRESHOLD = 9;
 const ARROWS_ZOOM_THRESHOLD = 7;
@@ -1107,7 +1107,7 @@ export const NetworkMapPanel = ({
                         onDrawEvent(event);
                     }}
                     shouldDisableToolTip={isInDrawingMode.value}
-                    getNominalVoltageColor={getNominalVoltageColor}
+                    getNominalVoltageColor={getBaseVoltageNetworkMapColor}
                 />
                 {mapEquipments && mapEquipments?.substations?.length > 0 && renderNominalVoltageFilter()}
                 {renderSearchEquipment()}

src/components/network/nominal-voltage-filter.tsx

@@ -8,9 +8,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Checkbox, List, ListItem, ListItemButton, ListItemText, Paper, Tooltip } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { type MuiStyles } from '@gridsuite/commons-ui';
-import { BASE_VOLTAGES, MAX_VOLTAGE, VoltageLevelInterval } from './constants';
-import { getNominalVoltageIntervalName } from './utils/nominal-voltage-filter-utils';
+import { BaseVoltage, type MuiStyles } from '@gridsuite/commons-ui';
+import { getBaseVoltageIntervalName } from 'utils/base-voltages-utils';
+import { getLocalStorageBaseVoltages } from 'redux/session-storage/local-storage';
 
 const styles = {
     nominalVoltageZone: {
@@ -40,30 +40,35 @@
     },
 } as const satisfies MuiStyles;
 
+type VoltageLevelValuesInterval = Pick<BaseVoltage, 'name' | 'minValue' | 'maxValue'> & {
+    vlListValues: number[];
+    isChecked: boolean;
+};
+
 export type NominalVoltageFilterProps = {
     nominalVoltages: number[];
     filteredNominalVoltages: number[];
     onChange: (filteredNominalVoltages: number[]) => void;
 };
 
-type VoltageLevelValuesInterval = VoltageLevelInterval & {
-    vlListValues: number[];
-    isChecked: boolean;
-};
-
 export default function NominalVoltageFilter({
     nominalVoltages,
     filteredNominalVoltages,
     onChange,
 }: Readonly<NominalVoltageFilterProps>) {
     const [voltageLevelIntervals, setVoltageLevelIntervals] = useState<VoltageLevelValuesInterval[]>(
-        BASE_VOLTAGES.map((interval) => ({ ...interval, vlListValues: [], isChecked: true }))
+        getLocalStorageBaseVoltages().map(({ name, minValue, maxValue }) => ({
+            name,
+            minValue,
+            maxValue,
+            vlListValues: [],
+            isChecked: true,
+        }))
     );
+
     useEffect(() => {
-        const newIntervals = BASE_VOLTAGES.map((interval) => {
-            const vlListValues = nominalVoltages.filter(
-                (vnom) => getNominalVoltageIntervalName(vnom) === interval.name
-            );
+        const newIntervals = getLocalStorageBaseVoltages().map((interval) => {
+            const vlListValues = nominalVoltages.filter((vnom) => getBaseVoltageIntervalName(vnom) === interval.name);
             return { ...interval, vlListValues, isChecked: true };
         });
         setVoltageLevelIntervals(newIntervals);
@@ -114,10 +119,11 @@
                                     id={'voltageLevelInterval'}
                                     values={{
                                         lowBound: interval.minValue,
-                                        highBound: interval.maxValue === Infinity ? MAX_VOLTAGE : interval.maxValue,
+                                        highBound: interval.maxValue,
                                     }}
                                 />
                             }
+                            placement="left"
                         >
                             <ListItemButton
                                 role={undefined}
@@ -134,7 +140,7 @@
                                 <ListItemText
                                     sx={styles.nominalVoltageText}
                                     disableTypography
-                                    primary={`${interval.vlValue} kV`}
+                                    primary={<FormattedMessage id={interval.name} />}
                                 ></ListItemText>
                             </ListItemButton>
                         </Tooltip>

src/components/voltage-level-choice.jsx

@@ -11,7 +11,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { getNominalVoltageColor } from '../utils/colors';
+import { getBaseVoltageNetworkMapColor } from '../utils/colors';
 import { useNameOrId } from './utils/equipmentInfosHandler';
 import { Box } from '@mui/material';
 
@@ -64,7 +64,7 @@ const VoltageLevelChoice = ({ handleClose, onClickHandler, substation, position
             >
                 {substation !== undefined &&
                     substation.voltageLevels.sort(voltageLevelComparator).map((voltageLevel) => {
-                        let color = getNominalVoltageColor(voltageLevel.nominalV);
+                        let color = getBaseVoltageNetworkMapColor(voltageLevel.nominalV);
                         let colorString =
                             'rgb(' + color[0].toString() + ',' + color[1].toString() + ',' + color[2].toString() + ')';
 

src/components/workspace/diagrams/nad/use-nad-diagram.ts

@@ -20,6 +20,7 @@ import type { DiagramConfigPosition } from '../../../../services/explore';
 import { useDiagramNotifications } from '../common/use-diagram-notifications';
 import { isNodeBuilt, isStatusBuilt } from '../../../graph/util/model-functions';
 import { NodeType } from '../../../graph/tree-node.type';
+import { getBaseVoltagesConfig } from 'utils/base-voltages-utils';
 
 interface UseNadDiagramProps {
     diagramMetadata: NADPanelMetadata;
@@ -208,6 +209,7 @@ export const useNadDiagram = ({
                               }),
                         nadPositionsGenerationMode:
                             networkVisuParams.networkAreaDiagramParameters.nadPositionsGenerationMode,
+                        baseVoltagesConfigInfos: getBaseVoltagesConfig(),
                     }),
                 };