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,
@@ -72,7 +72,7 @@ import {
 } from '@gridsuite/commons-ui';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router';
-import { Provider, useSelector } from 'react-redux';
+import { Provider, useSelector, useDispatch } from 'react-redux';
 import messages_en from '../translations/en.json';
 import messages_fr from '../translations/fr.json';
 import messages_plugins from '../plugins/translations';
@@ -102,6 +102,9 @@ 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 { getVoltageLevelsCssVars } from 'utils/colors';
+import { fetchBaseVoltagesConfig } from '../services/utils';
+import { setBaseVoltagesConfig } from '../redux/actions';
 
 // Register all community features (migration to V33)
 ModuleRegistry.registerModules([AllCommunityModule]);
@@ -448,9 +451,27 @@ const basename = new URL(document.querySelector('base').href).pathname;
 const AppWrapperWithRedux = () => {
     const computedLanguage = useSelector((state) => state.computedLanguage);
     const theme = useSelector((state) => state[PARAM_THEME]);
+    const baseVoltagesConfig = useSelector((state) => state.baseVoltagesConfig);
     const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]);
 
-    const rootCssVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars;
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        fetchBaseVoltagesConfig().then((appMetadataBaseVoltagesConfig) => {
+            dispatch(setBaseVoltagesConfig(appMetadataBaseVoltagesConfig));
+        });
+    }, [dispatch]);
+
+    const rootCssVars = useMemo(() => {
+        const themeVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars;
+        if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) {
+            return themeVars;
+        }
+        return {
+            ...themeVars,
+            ...getVoltageLevelsCssVars(baseVoltagesConfig, theme),
+        };
+    }, [baseVoltagesConfig, theme]);
 
     const urlMapper = useNotificationsUrlGenerator();
 

src/components/grid-layout/hooks/use-diagram-model.ts

@@ -28,11 +28,22 @@
 import { useDiagramParamsInitialization } from './use-diagram-params-initialization';
 import { useIntl } from 'react-intl';
 import { useDiagramTitle } from './use-diagram-title';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { BaseVoltageConfig, useSnackMessage } from '@gridsuite/commons-ui';
 import { NodeType } from 'components/graph/tree-node.type';
 import { isThereTooManyOpenedNadDiagrams, mergePositions } from '../cards/diagrams/diagram-utils';
 import { DiagramMetadata } from '@powsybl/network-viewer';
 
+interface BaseVoltages {
+    name: string;
+    minValue: number;
+    maxValue: number;
+    profile: string;
+}
+interface BaseVoltagesConfigInfos {
+    baseVoltages: BaseVoltages[];
+    defaultProfile: string;
+}
+
 type UseDiagramModelProps = {
     diagramTypes: DiagramType[];
     onAddDiagram: (diagram: Diagram) => void;
@@ -55,6 +66,7 @@
     const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);
     const paramUseName = useSelector((state: AppState) => state[PARAM_USE_NAME]);
     const language = useSelector((state: AppState) => state[PARAM_LANGUAGE]);
+    const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig);
     const getDiagramTitle = useDiagramTitle();
 
     const [diagrams, setDiagrams] = useState<Record<UUID, Diagram>>({});
@@ -286,6 +298,21 @@
         });
     }, []);
 
+    const getBaseVoltagesConfigInfos = useCallback((): BaseVoltagesConfigInfos | undefined => {
+        if (!baseVoltagesConfig) {
+            return;
+        }
+        return {
+            baseVoltages: baseVoltagesConfig.map((vl: BaseVoltageConfig) => ({
+                name: vl.name,
+                minValue: vl.minValue,
+                maxValue: vl.maxValue,
+                profile: 'Default',
+            })),
+            defaultProfile: 'Default',
+        };
+    }, [baseVoltagesConfig]);
+
     const fetchDiagramSvg = useCallback(
         (diagram: Diagram) => {
             // make url from type
@@ -304,13 +331,22 @@
                     positions: diagram.positions,
                     nadPositionsGenerationMode:
                         networkVisuParams.networkAreaDiagramParameters.nadPositionsGenerationMode,
+                    baseVoltagesConfigInfos: getBaseVoltagesConfigInfos(),
                 };
                 fetchOptions = {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(nadRequestInfos),
                 };
             }
+            if (diagram.type === DiagramType.SUBSTATION || diagram.type === DiagramType.VOLTAGE_LEVEL) {
+                const sldRequestInfos = { baseVoltagesConfigInfos: getBaseVoltagesConfigInfos() };
+                fetchOptions = {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(sldRequestInfos),
+                };
+            }
 
             setLoadingDiagrams((loadingDiagrams) => {
                 if (loadingDiagrams.includes(diagram.diagramUuid)) {
@@ -337,6 +373,7 @@
         [
             getUrl,
             networkVisuParams.networkAreaDiagramParameters.nadPositionsGenerationMode,
+            getBaseVoltagesConfigInfos,
             handleFetchSuccess,
             handleFetchError,
             handleFetchFinally,

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

@@ -164,6 +164,7 @@ export const NetworkMapPanel = forwardRef<NetworkMapPanelRef, NetworkMapPanelPro
         const isNetworkModificationTreeUpToDate = useSelector(
             (state: AppState) => state.isNetworkModificationTreeModelUpToDate
         );
+        const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig) ?? [];
         const theme = useTheme();
         const { snackInfo } = useSnackMessage();
 
@@ -1184,7 +1185,9 @@ export const NetworkMapPanel = forwardRef<NetworkMapPanelRef, NetworkMapPanelPro
                             onDrawEvent(event);
                         }}
                         shouldDisableToolTip={!visible || isInDrawingMode.value}
-                        getNominalVoltageColor={getNominalVoltageColor}
+                        getNominalVoltageColor={(voltageValue) =>
+                            getNominalVoltageColor(baseVoltagesConfig, voltageValue)
+                        }
                     />
                     {mapEquipments && mapEquipments?.substations?.length > 0 && renderNominalVoltageFilter()}
                     {renderSearchEquipment()}

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

@@ -9,8 +9,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 { MAX_VOLTAGE } from 'utils/constants';
+import { useSelector } from 'react-redux';
+import { AppState } from 'redux/reducer';
 
 const styles = {
     nominalVoltageZone: {
@@ -40,34 +41,61 @@ const styles = {
     },
 } as const satisfies MuiStyles;
 
+interface VoltageLevelInterval {
+    name: string;
+    minValue: number;
+    maxValue: number;
+    label: string;
+}
+type VoltageLevelValuesInterval = VoltageLevelInterval & {
+    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 baseVoltagesConfigIntervals = useSelector(
+        (state: AppState) =>
+            state.baseVoltagesConfig?.map(({ name, minValue, maxValue, label }) => ({
+                name,
+                minValue,
+                maxValue,
+                label,
+            })) ?? []
+    );
     const [voltageLevelIntervals, setVoltageLevelIntervals] = useState<VoltageLevelValuesInterval[]>(
-        BASE_VOLTAGES.map((interval) => ({ ...interval, vlListValues: [], isChecked: true }))
+        baseVoltagesConfigIntervals.map((interval) => ({ ...interval, vlListValues: [], isChecked: true }))
     );
+
+    const getNominalVoltageIntervalName = useCallback(
+        (voltageValue: number) => {
+            for (let interval of baseVoltagesConfigIntervals) {
+                if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) {
+                    return interval.name;
+                }
+            }
+        },
+        [baseVoltagesConfigIntervals]
+    );
+
     useEffect(() => {
-        const newIntervals = BASE_VOLTAGES.map((interval) => {
+        const newIntervals = baseVoltagesConfigIntervals.map((interval) => {
             const vlListValues = nominalVoltages.filter(
                 (vnom) => getNominalVoltageIntervalName(vnom) === interval.name
             );
             return { ...interval, vlListValues, isChecked: true };
         });
         setVoltageLevelIntervals(newIntervals);
-    }, [nominalVoltages]);
+    }, [baseVoltagesConfigIntervals, getNominalVoltageIntervalName, nominalVoltages]);
 
     const handleToggle = useCallback(
         (interval: VoltageLevelValuesInterval) => {
@@ -134,7 +162,7 @@ export default function NominalVoltageFilter({
                                 <ListItemText
                                     sx={styles.nominalVoltageText}
                                     disableTypography
-                                    primary={`${interval.vlValue} kV`}
+                                    primary={interval.label}
                                 ></ListItemText>
                             </ListItemButton>
                         </Tooltip>

src/components/voltage-level-choice.jsx

@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography';
 import { getNominalVoltageColor } from '../utils/colors';
 import { useNameOrId } from './utils/equipmentInfosHandler';
 import { Box } from '@mui/material';
+import { useSelector } from 'react-redux';
 
 const styles = {
     menu: {
@@ -48,6 +49,7 @@ const voltageLevelComparator = (vl1, vl2) => {
 
 const VoltageLevelChoice = ({ handleClose, onClickHandler, substation, position }) => {
     const { getNameOrId } = useNameOrId();
+    const baseVoltagesConfig = useSelector((state) => state.baseVoltagesConfig);
 
     return (
         <Box sx={styles.menu}>
@@ -64,7 +66,7 @@ const VoltageLevelChoice = ({ handleClose, onClickHandler, substation, position
             >
                 {substation !== undefined &&
                     substation.voltageLevels.sort(voltageLevelComparator).map((voltageLevel) => {
-                        let color = getNominalVoltageColor(voltageLevel.nominalV);
+                        let color = getNominalVoltageColor(baseVoltagesConfig, voltageLevel.nominalV);
                         let colorString =
                             'rgb(' + color[0].toString() + ',' + color[1].toString() + ',' + color[2].toString() + ')';
 

src/redux/actions.ts

@@ -15,6 +15,7 @@
 } from '../utils/config-params';
 import type { Action } from 'redux';
 import {
+    BaseVoltageConfig,
     ComputingType,
     type GsLang,
     type GsLangUser,
@@ -152,6 +153,7 @@
     | ReorderTableDefinitionsAction
     | RenameTableDefinitionAction
     | SetAppTabIndexAction
+    | SetBaseVoltagesConfigAction
     | AttemptLeaveParametersTabAction
     | ConfirmLeaveParametersTabAction
     | CancelLeaveParametersTabAction
@@ -180,6 +182,18 @@
     };
 }
 
+export const SET_BASE_VOLTAGES_CONFIG = 'SET_BASE_VOLTAGES_CONFIG';
+export type SetBaseVoltagesConfigAction = Readonly<Action<typeof SET_BASE_VOLTAGES_CONFIG>> & {
+    baseVoltagesConfig: BaseVoltageConfig[];
+};
+
+export function setBaseVoltagesConfig(baseVoltagesConfig: BaseVoltageConfig[]): SetBaseVoltagesConfigAction {
+    return {
+        type: SET_BASE_VOLTAGES_CONFIG,
+        baseVoltagesConfig,
+    };
+}
+
 export const ATTEMPT_LEAVE_PARAMETERS_TAB = 'ATTEMPT_LEAVE_PARAMETERS_TAB';
 export type AttemptLeaveParametersTabAction = Readonly<Action<typeof ATTEMPT_LEAVE_PARAMETERS_TAB>> & {
     targetTabIndex: number;