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,24 @@ 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(() => {
+        if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) return {};
+        return {
+            ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars),
+            ...getVoltageLevelsCssVars(baseVoltagesConfig.current, theme),
+        };
+    }, [baseVoltagesConfig, theme]);
 
     const urlMapper = useNotificationsUrlGenerator();
 

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

@@ -28,10 +28,11 @@
 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';
+import { BaseVoltagesConfigInfos } from 'utils/constants';
 
 type UseDiagramModelProps = {
     diagramTypes: DiagramType[];
@@ -55,6 +56,9 @@
     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 baseVoltagesConfigRef = useRef<BaseVoltageConfig[]>([]);
+    baseVoltagesConfigRef.current = baseVoltagesConfig ?? [];
     const getDiagramTitle = useDiagramTitle();
 
     const [diagrams, setDiagrams] = useState<Record<UUID, Diagram>>({});
@@ -286,6 +290,18 @@
         });
     }, []);
 
+    const getBaseVoltagesConfigInfos = (): BaseVoltagesConfigInfos => {
+        return {
+            baseVoltages: baseVoltagesConfigRef.current.map((vl: BaseVoltageConfig) => ({
+                name: vl.name,
+                minValue: vl.minValue,
+                maxValue: vl.maxValue,
+                profile: 'Default',
+            })),
+            defaultProfile: 'Default',
+        };
+    };
+
     const fetchDiagramSvg = useCallback(
         (diagram: Diagram) => {
             // make url from type
@@ -304,13 +320,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)) {

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

@@ -5,12 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, 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: {
@@ -46,6 +47,13 @@ export type NominalVoltageFilterProps = {
     onChange: (filteredNominalVoltages: number[]) => void;
 };
 
+export interface VoltageLevelInterval {
+    name: string;
+    vlValue: number;
+    minValue: number;
+    maxValue: number;
+    label: string;
+}
 type VoltageLevelValuesInterval = VoltageLevelInterval & {
     vlListValues: number[];
     isChecked: boolean;
@@ -56,13 +64,34 @@ export default function NominalVoltageFilter({
     filteredNominalVoltages,
     onChange,
 }: Readonly<NominalVoltageFilterProps>) {
+    const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig);
+    const baseVoltageIntervals =
+        baseVoltagesConfig?.map(({ name, vlValue, minValue, maxValue, label }) => ({
+            name,
+            vlValue,
+            minValue,
+            maxValue,
+            label,
+        })) ?? [];
+    const baseVoltageIntervalsRef = useRef<VoltageLevelInterval[]>([]);
+    baseVoltageIntervalsRef.current = baseVoltageIntervals;
+
     const [voltageLevelIntervals, setVoltageLevelIntervals] = useState<VoltageLevelValuesInterval[]>(
-        BASE_VOLTAGES.map((interval) => ({ ...interval, vlListValues: [], isChecked: true }))
+        baseVoltageIntervalsRef.current.map((interval) => ({ ...interval, vlListValues: [], isChecked: true }))
     );
+
+    const getNominalVoltageIntervalNameByVoltageValue = (voltageValue: number): string | undefined => {
+        for (let interval of baseVoltageIntervalsRef.current) {
+            if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) {
+                return interval.name;
+            }
+        }
+    };
+
     useEffect(() => {
-        const newIntervals = BASE_VOLTAGES.map((interval) => {
+        const newIntervals = baseVoltageIntervalsRef.current.map((interval) => {
             const vlListValues = nominalVoltages.filter(
-                (vnom) => getNominalVoltageIntervalName(vnom) === interval.name
+                (vnom) => getNominalVoltageIntervalNameByVoltageValue(vnom) === interval.name
             );
             return { ...interval, vlListValues, isChecked: true };
         });
@@ -134,7 +163,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;

src/redux/reducer.ts

@@ -10,6 +10,7 @@
     type AuthenticationActions,
     type AuthenticationRouterErrorAction,
     type AuthenticationRouterErrorState,
+    BaseVoltageConfig,
     type CommonStoreState,
     ComputingType,
     type GsLang,
@@ -168,6 +169,7 @@
     SET_ACTIVE_SPREADSHEET_TAB,
     SET_ADDED_SPREADSHEET_TAB,
     SET_APP_TAB_INDEX,
+    SET_BASE_VOLTAGES_CONFIG,
     SET_CALCULATION_SELECTIONS,
     SET_COMPUTATION_STARTING,
     SET_COMPUTING_STATUS,
@@ -219,6 +221,7 @@
     PCCMIN_ANALYSIS_RESULT_PAGINATION,
     type PccminAnalysisResultFilterAction,
     PccminAnalysisResultPaginationAction,
+    SetBaseVoltagesConfigAction,
     SPREADSHEET_FILTER,
     type SpreadsheetFilterAction,
     STATEESTIMATION_RESULT_FILTER,
@@ -583,6 +586,7 @@
     authenticationRouterError: AuthenticationRouterErrorState | null;
     showAuthenticationRouterLogin: boolean;
     appTabIndex: number;
+    baseVoltagesConfig: BaseVoltageConfig[] | undefined;
     attemptedLeaveParametersTabIndex: number | null;
     isDirtyComputationParameters: boolean;
     studyUpdated: StudyUpdated;
@@ -758,6 +762,7 @@
 const initialState: AppState = {
     syncEnabled: false,
     appTabIndex: 0,
+    baseVoltagesConfig: undefined,
     attemptedLeaveParametersTabIndex: null,
     isDirtyComputationParameters: false,
     studyUuid: null,
@@ -999,6 +1004,10 @@
         state.appTabIndex = action.tabIndex;
     });
 
+    builder.addCase(SET_BASE_VOLTAGES_CONFIG, (state, action: SetBaseVoltagesConfigAction) => {
+        state.baseVoltagesConfig = action.baseVoltagesConfig;
+    });
+
     builder.addCase(ATTEMPT_LEAVE_PARAMETERS_TAB, (state, action: AttemptLeaveParametersTabAction) => {
         state.attemptedLeaveParametersTabIndex = action.targetTabIndex;
     });

src/services/utils.ts

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { catchErrorHandler, fetchStudyMetadata, StudyMetadata } from '@gridsuite/commons-ui';
+import { BaseVoltageConfig, catchErrorHandler, fetchStudyMetadata, StudyMetadata } from '@gridsuite/commons-ui';
 import { getUserToken } from '../redux/user-store';
 
 export const FetchStatus = {
@@ -82,6 +82,22 @@
             return defaultValues;
         });
 };
+
+export async function fetchBaseVoltagesConfig(): Promise<BaseVoltageConfig[]> {
+    console.info('fetching base voltages configuration from apps-metadata file');
+    const emptyConfig: BaseVoltageConfig[] = [];
+    return fetchStudyMetadata()
+        .then((studyMetadata) => {
+            return studyMetadata?.baseVoltagesConfig ?? emptyConfig;
+        })
+        .catch((error: unknown) => {
+            catchErrorHandler(error, (message) => {
+                console.error(`fetching error (${message}), then empty config will be used.`);
+            });
+            return emptyConfig;
+        });
+}
+
 export const getQueryParamsList = (params: string[] | number[] | null | undefined, paramName: string) => {
     if (params != null && Array.isArray(params) && params.length > 0) {
         const urlSearchParams = new URLSearchParams();