From 8be5b51219d40e7ce0ff1dd5699ba25b7bcac14d Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Wed, 29 Oct 2025 16:36:46 +0100 Subject: [PATCH 01/10] first commit --- src/components/network/constants.ts | 19 ---------- .../network/nominal-voltage-filter.tsx | 6 +-- .../utils/nominal-voltage-filter-utils.tsx | 15 -------- src/utils/colors.ts | 22 +++-------- src/utils/constants.ts | 38 +++++++++++++++++++ 5 files changed, 46 insertions(+), 54 deletions(-) delete mode 100644 src/components/network/utils/nominal-voltage-filter-utils.tsx create mode 100644 src/utils/constants.ts diff --git a/src/components/network/constants.ts b/src/components/network/constants.ts index e7caf770a9..77f9ba6b1d 100644 --- a/src/components/network/constants.ts +++ b/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; diff --git a/src/components/network/nominal-voltage-filter.tsx b/src/components/network/nominal-voltage-filter.tsx index bb00dafc13..0e71cf40bb 100644 --- a/src/components/network/nominal-voltage-filter.tsx +++ b/src/components/network/nominal-voltage-filter.tsx @@ -9,8 +9,8 @@ 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 { getNominalVoltageIntervalName } from 'utils/constants'; +import { BASE_VOLTAGES, MAX_VOLTAGE, VoltageLevelInterval } from 'utils/constants'; const styles = { nominalVoltageZone: { @@ -134,7 +134,7 @@ export default function NominalVoltageFilter({ diff --git a/src/components/network/utils/nominal-voltage-filter-utils.tsx b/src/components/network/utils/nominal-voltage-filter-utils.tsx deleted file mode 100644 index 19c34301ab..0000000000 --- a/src/components/network/utils/nominal-voltage-filter-utils.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) 2025, RTE (http://www.rte-france.com) - * This Source Code Form is subject to the terms of the Mozilla Public - * 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 { BASE_VOLTAGES } from '../constants'; - -export const getNominalVoltageIntervalName = (voltageValue: number): string | undefined => { - for (let interval of BASE_VOLTAGES) { - if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { - return interval.name; - } - } -}; diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 00a26dee14..645d70cc35 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -5,22 +5,10 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export function getNominalVoltageColor(nominalVoltage: number): number[] { - if (nominalVoltage >= 300) { - return [255, 0, 0]; - } else if (nominalVoltage >= 180 && nominalVoltage < 300) { - return [34, 139, 34]; - } else if (nominalVoltage >= 120 && nominalVoltage < 180) { - return [1, 175, 175]; - } else if (nominalVoltage >= 70 && nominalVoltage < 120) { - return [204, 85, 0]; - } else if (nominalVoltage >= 50 && nominalVoltage < 70) { - return [160, 32, 240]; - } else if (nominalVoltage >= 30 && nominalVoltage < 50) { - return [255, 130, 144]; - } else { - return [171, 175, 40]; - } -} +import { getNominalVoltageInterval } from './constants'; + +export const getNominalVoltageColor = (voltageValue: number): number[] | undefined => { + return getNominalVoltageInterval(voltageValue)?.color; +}; export const INVALID_LOADFLOW_OPACITY = 0.2; diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000000..866256afa5 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2025, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * 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/. + */ +export interface VoltageLevelInterval { + name: string; + vlValue: number; + minValue: number; + maxValue: number; + label: string; + color: number[]; +} + +export const BASE_VOLTAGES: VoltageLevelInterval[] = [ + { name: 'vl300to500', vlValue: 400, minValue: 300, maxValue: Infinity, label: '400 kV', color: [255, 0, 0] }, + { name: 'vl200to300', vlValue: 225, minValue: 200, maxValue: 300, label: '225 kV', color: [34, 139, 34] }, + { name: 'vl100to200', vlValue: 150, minValue: 100, maxValue: 200, label: '150 kV', color: [1, 175, 175] }, + { name: 'vl70to100', vlValue: 90, minValue: 70, maxValue: 100, label: '90 kV', color: [204, 85, 0] }, + { name: 'vl50to70', vlValue: 63, minValue: 50, maxValue: 70, label: '63 kV', color: [160, 32, 240] }, + { name: 'vl40to50', vlValue: 42, minValue: 40, maxValue: 50, label: '42 kV', color: [255, 130, 144] }, + { name: 'vl0to40', vlValue: 20, minValue: 0, maxValue: 40, label: 'HTA', color: [171, 175, 40] }, +]; + +export const MAX_VOLTAGE = 500; + +export const getNominalVoltageInterval = (voltageValue: number): VoltageLevelInterval | undefined => { + for (let interval of BASE_VOLTAGES) { + if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { + return interval; + } + } +}; + +export const getNominalVoltageIntervalName = (voltageValue: number): string | undefined => { + return getNominalVoltageInterval(voltageValue)?.name; +}; From 03c24b030f18db8a551da70e2650213b96757a63 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Thu, 30 Oct 2025 09:17:13 +0100 Subject: [PATCH 02/10] add color to base voltages constant --- src/utils/constants.ts | 71 +++++++++++++++++++++++++++++++++++++----- 1 file changed, 64 insertions(+), 7 deletions(-) diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 866256afa5..cfd8c14f6e 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -11,16 +11,73 @@ export interface VoltageLevelInterval { maxValue: number; label: string; color: number[]; + profile: string; } export const BASE_VOLTAGES: VoltageLevelInterval[] = [ - { name: 'vl300to500', vlValue: 400, minValue: 300, maxValue: Infinity, label: '400 kV', color: [255, 0, 0] }, - { name: 'vl200to300', vlValue: 225, minValue: 200, maxValue: 300, label: '225 kV', color: [34, 139, 34] }, - { name: 'vl100to200', vlValue: 150, minValue: 100, maxValue: 200, label: '150 kV', color: [1, 175, 175] }, - { name: 'vl70to100', vlValue: 90, minValue: 70, maxValue: 100, label: '90 kV', color: [204, 85, 0] }, - { name: 'vl50to70', vlValue: 63, minValue: 50, maxValue: 70, label: '63 kV', color: [160, 32, 240] }, - { name: 'vl40to50', vlValue: 42, minValue: 40, maxValue: 50, label: '42 kV', color: [255, 130, 144] }, - { name: 'vl0to40', vlValue: 20, minValue: 0, maxValue: 40, label: 'HTA', color: [171, 175, 40] }, + { + name: 'vl300to500', + vlValue: 400, + minValue: 300, + maxValue: Infinity, + label: '400 kV', + color: [255, 0, 0], + profile: 'Default', + }, + { + name: 'vl200to300', + vlValue: 225, + minValue: 200, + maxValue: 300, + label: '225 kV', + color: [34, 139, 34], + profile: 'Default', + }, + { + name: 'vl100to200', + vlValue: 150, + minValue: 100, + maxValue: 200, + label: '150 kV', + color: [1, 175, 175], + profile: 'Default', + }, + { + name: 'vl70to100', + vlValue: 90, + minValue: 70, + maxValue: 100, + label: '90 kV', + color: [204, 85, 0], + profile: 'Default', + }, + { + name: 'vl50to70', + vlValue: 63, + minValue: 50, + maxValue: 70, + label: '63 kV', + color: [160, 32, 240], + profile: 'Default', + }, + { + name: 'vl40to50', + vlValue: 42, + minValue: 40, + maxValue: 50, + label: '42 kV', + color: [255, 130, 144], + profile: 'Default', + }, + { + name: 'vl0to40', + vlValue: 20, + minValue: 0, + maxValue: 40, + label: 'HTA', + color: [171, 175, 40], + profile: 'Default', + }, ]; export const MAX_VOLTAGE = 500; From 436e68cf646f8480280c3787e5c53113ea3edccc Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Tue, 4 Nov 2025 16:28:41 +0100 Subject: [PATCH 03/10] unify colors declaration --- .../grid-layout/hooks/use-diagram-model.ts | 10 + .../network/nominal-voltage-filter.tsx | 10 +- src/services/study/network.ts | 2 + src/styles/dark-theme-css-vars.ts | 214 +--------------- src/styles/light-theme-css-vars.ts | 214 +--------------- src/utils/colors.ts | 50 +++- src/utils/constants.ts | 241 ++++++++++++++++-- 7 files changed, 297 insertions(+), 444 deletions(-) diff --git a/src/components/grid-layout/hooks/use-diagram-model.ts b/src/components/grid-layout/hooks/use-diagram-model.ts index 1a5562a36d..0402a8173e 100644 --- a/src/components/grid-layout/hooks/use-diagram-model.ts +++ b/src/components/grid-layout/hooks/use-diagram-model.ts @@ -32,6 +32,7 @@ import { 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 { getBaseVoltagesConfigInfos } from 'utils/constants'; type UseDiagramModelProps = { diagramTypes: DiagramType[]; @@ -304,6 +305,7 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx positions: diagram.positions, nadPositionsGenerationMode: networkVisuParams.networkAreaDiagramParameters.nadPositionsGenerationMode, + baseVoltagesConfigInfos: getBaseVoltagesConfigInfos(), }; fetchOptions = { method: 'POST', @@ -311,6 +313,14 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx 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)) { diff --git a/src/components/network/nominal-voltage-filter.tsx b/src/components/network/nominal-voltage-filter.tsx index 0e71cf40bb..39b8fde7d7 100644 --- a/src/components/network/nominal-voltage-filter.tsx +++ b/src/components/network/nominal-voltage-filter.tsx @@ -9,8 +9,12 @@ 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 { getNominalVoltageIntervalName } from 'utils/constants'; -import { BASE_VOLTAGES, MAX_VOLTAGE, VoltageLevelInterval } from 'utils/constants'; +import { + BASE_VOLTAGES, + MAX_VOLTAGE, + VoltageLevelInterval, + getNominalVoltageIntervalNameByVoltageValue, +} from 'utils/constants'; const styles = { nominalVoltageZone: { @@ -62,7 +66,7 @@ export default function NominalVoltageFilter({ useEffect(() => { const newIntervals = BASE_VOLTAGES.map((interval) => { const vlListValues = nominalVoltages.filter( - (vnom) => getNominalVoltageIntervalName(vnom) === interval.name + (vnom) => getNominalVoltageIntervalNameByVoltageValue(vnom) === interval.name ); return { ...interval, vlListValues, isChecked: true }; }); diff --git a/src/services/study/network.ts b/src/services/study/network.ts index eedcc7e1d3..4dff33a479 100644 --- a/src/services/study/network.ts +++ b/src/services/study/network.ts @@ -79,6 +79,7 @@ export function getVoltageLevelSingleLineDiagram({ if (componentLibrary !== null) { queryParams.append('componentLibrary', String(componentLibrary)); } + //baseVoltagesConfig return ( getStudyUrlWithNodeUuidAndRootNetworkUuid(studyUuid, currentNodeUuid, currentRootNetworkUuid) + '/network/voltage-levels/' + @@ -236,6 +237,7 @@ export function getSubstationSingleLineDiagram({ if (componentLibrary !== null) { queryParams.append('componentLibrary', String(componentLibrary)); } + //baseVoltagesConfig return ( getStudyUrlWithNodeUuidAndRootNetworkUuid(studyUuid, currentNodeUuid, currentRootNetworkUuid) + '/network/substations/' + diff --git a/src/styles/dark-theme-css-vars.ts b/src/styles/dark-theme-css-vars.ts index a7159b3783..fa38c0dc9f 100644 --- a/src/styles/dark-theme-css-vars.ts +++ b/src/styles/dark-theme-css-vars.ts @@ -5,6 +5,9 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +import { DARK_THEME } from '@gridsuite/commons-ui'; +import { cssColors } from 'utils/colors'; + export const darkThemeCssVars = { '.nad-edge-infos text': { stroke: '#292e33', // Border outside of the displayed values on lines. Same color as the background. @@ -18,214 +21,5 @@ export const darkThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#32373bd9', // same displayed color as #6c6c6c20 but with 0.85 opacity }, - '.sld-vl0to30, .nad-vl0to30': { - '--vl-color': '#CCC93A', - }, - '.sld-vl0to30.sld-bus-1, .nad-vl0to30.nad-bus-1': { - '--vl-color': '#5E835C', - }, - '.sld-vl0to30.sld-bus-2, .nad-vl0to30.nad-bus-2': { - '--vl-color': '#B1B46C', - }, - '.sld-vl0to30.sld-bus-3, .nad-vl0to30.nad-bus-3': { - '--vl-color': '#A156AA', - }, - '.sld-vl0to30.sld-bus-4, .nad-vl0to30.nad-bus-4': { - '--vl-color': '#CB3DDD', - }, - '.sld-vl0to30.sld-bus-5, .nad-vl0to30.nad-bus-5': { - '--vl-color': '#AC8AC2', - }, - '.sld-vl0to30.sld-bus-6, .nad-vl0to30.nad-bus-6': { - '--vl-color': '#734097', - }, - '.sld-vl0to30.sld-bus-7, .nad-vl0to30.nad-bus-7': { - '--vl-color': '#BCADCC', - }, - '.sld-vl0to30.sld-bus-8, .nad-vl0to30.nad-bus-8': { - '--vl-color': '#A246E0', - }, - '.sld-vl0to30.sld-bus-9, .nad-vl0to30.nad-bus-9': { - '--vl-color': '#C38CEB', - }, - '.sld-vl30to50, .nad-vl30to50': { - '--vl-color': '#EA8E9B', - }, - '.sld-vl30to50.sld-bus-1, .nad-vl30to50.nad-bus-1': { - '--vl-color': '#A43857', - }, - '.sld-vl30to50.sld-bus-2, .nad-vl30to50.nad-bus-2': { - '--vl-color': '#CEAAB0', - }, - '.sld-vl30to50.sld-bus-3, .nad-vl30to50.nad-bus-3': { - '--vl-color': '#459C63', - }, - '.sld-vl30to50.sld-bus-4, .nad-vl30to50.nad-bus-4': { - '--vl-color': '#00E266', - }, - '.sld-vl30to50.sld-bus-5, .nad-vl30to50.nad-bus-5': { - '--vl-color': '#A7B368', - }, - '.sld-vl30to50.sld-bus-6, .nad-vl30to50.nad-bus-6': { - '--vl-color': '#3F7340', - }, - '.sld-vl30to50.sld-bus-7, .nad-vl30to50.nad-bus-7': { - '--vl-color': '#C2CB92', - }, - '.sld-vl30to50.sld-bus-8, .nad-vl30to50.nad-bus-8': { - '--vl-color': '#218B21', - }, - '.sld-vl30to50.sld-bus-9, .nad-vl30to50.nad-bus-9': { - '--vl-color': '#58D058', - }, - '.sld-vl50to70, .nad-vl50to70': { - '--vl-color': '#D47DFF', - }, - '.sld-vl50to70.sld-bus-1, .nad-vl50to70.nad-bus-1': { - '--vl-color': '#C230D2', - }, - '.sld-vl50to70.sld-bus-2, .nad-vl50to70.nad-bus-2': { - '--vl-color': '#AB94BF', - }, - '.sld-vl50to70.sld-bus-3, .nad-vl50to70.nad-bus-3': { - '--vl-color': '#1F7620', - }, - '.sld-vl50to70.sld-bus-4, .nad-vl50to70.nad-bus-4': { - '--vl-color': '#C5ED3B', - }, - '.sld-vl50to70.sld-bus-5, .nad-vl50to70.nad-bus-5': { - '--vl-color': '#A7B368', - }, - '.sld-vl50to70.sld-bus-6, .nad-vl50to70.nad-bus-6': { - '--vl-color': '#697046', - }, - '.sld-vl50to70.sld-bus-7, .nad-vl50to70.nad-bus-7': { - '--vl-color': '#E1E444', - }, - '.sld-vl50to70.sld-bus-8, .nad-vl50to70.nad-bus-8': { - '--vl-color': '#AAAE50', - }, - '.sld-vl50to70.sld-bus-9, .nad-vl50to70.nad-bus-9': { - '--vl-color': '#D4D486', - }, - '.sld-vl70to120, .nad-vl70to120': { - '--vl-color': '#FF6100', - }, - '.sld-vl70to120.sld-bus-1, .nad-vl70to120.nad-bus-1': { - '--vl-color': '#B27153', - }, - '.sld-vl70to120.sld-bus-2, .nad-vl70to120.nad-bus-2': { - '--vl-color': '#C6A68B', - }, - '.sld-vl70to120.sld-bus-3, .nad-vl70to120.nad-bus-3': { - '--vl-color': '#25699D', - }, - '.sld-vl70to120.sld-bus-4, .nad-vl70to120.nad-bus-4': { - '--vl-color': '#0057F9', - }, - '.sld-vl70to120.sld-bus-5, .nad-vl70to120.nad-bus-5': { - '--vl-color': '#74AFEA', - }, - '.sld-vl70to120.sld-bus-6, .nad-vl70to120.nad-bus-6': { - '--vl-color': '#44679C', - }, - '.sld-vl70to120.sld-bus-7, .nad-vl70to120.nad-bus-7': { - '--vl-color': '#458BE8', - }, - '.sld-vl70to120.sld-bus-8, .nad-vl70to120.nad-bus-8': { - '--vl-color': '#2862AE', - }, - '.sld-vl70to120.sld-bus-9, .nad-vl70to120.nad-bus-9': { - '--vl-color': '#B0D4FE', - }, - '.sld-vl120to180, .nad-vl120to180': { - '--vl-color': '#29AFB0', - }, - '.sld-vl120to180.sld-bus-1, .nad-vl120to180.nad-bus-1': { - '--vl-color': '#336B6F', - }, - '.sld-vl120to180.sld-bus-2, .nad-vl120to180.nad-bus-2': { - '--vl-color': '#84C6CC', - }, - '.sld-vl120to180.sld-bus-3, .nad-vl120to180.nad-bus-3': { - '--vl-color': '#BA133C', - }, - '.sld-vl120to180.sld-bus-4, .nad-vl120to180.nad-bus-4': { - '--vl-color': '#FF8290', - }, - '.sld-vl120to180.sld-bus-5, .nad-vl120to180.nad-bus-5': { - '--vl-color': '#DAA8AD', - }, - '.sld-vl120to180.sld-bus-6, .nad-vl120to180.nad-bus-6': { - '--vl-color': '#97353A', - }, - '.sld-vl120to180.sld-bus-7, .nad-vl120to180.nad-bus-7': { - '--vl-color': '#EABCBD', - }, - '.sld-vl120to180.sld-bus-8, .nad-vl120to180.nad-bus-8': { - '--vl-color': '#EA2E33', - }, - '.sld-vl120to180.sld-bus-9, .nad-vl120to180.nad-bus-9': { - '--vl-color': '#EA6E72', - }, - '.sld-vl180to300, .nad-vl180to300': { - '--vl-color': '#00FF50', - }, - '.sld-vl180to300.sld-bus-1, .nad-vl180to300.nad-bus-1': { - '--vl-color': '#42954B', - }, - '.sld-vl180to300.sld-bus-2, .nad-vl180to300.nad-bus-2': { - '--vl-color': '#A7B27E', - }, - '.sld-vl180to300.sld-bus-3, .nad-vl180to300.nad-bus-3': { - '--vl-color': '#F57F17', - }, - '.sld-vl180to300.sld-bus-4, .nad-vl180to300.nad-bus-4': { - '--vl-color': '#A3715C', - }, - '.sld-vl180to300.sld-bus-5, .nad-vl180to300.nad-bus-5': { - '--vl-color': '#DBAB9D', - }, - '.sld-vl180to300.sld-bus-6, .nad-vl180to300.nad-bus-6': { - '--vl-color': '#885239', - }, - '.sld-vl180to300.sld-bus-7, .nad-vl180to300.nad-bus-7': { - '--vl-color': '#B39572', - }, - '.sld-vl180to300.sld-bus-8, .nad-vl180to300.nad-bus-8': { - '--vl-color': '#C94119', - }, - '.sld-vl180to300.sld-bus-9, .nad-vl180to300.nad-bus-9': { - '--vl-color': '#EABC45', - }, - '.sld-vl300to500, .nad-vl300to500': { - '--vl-color': '#FF0007', - }, - '.sld-vl300to500.sld-bus-1, .nad-vl300to500.nad-bus-1': { - '--vl-color': '#DD6484', - }, - '.sld-vl300to500.sld-bus-2, .nad-vl300to500.nad-bus-2': { - '--vl-color': '#FFBCBE', - }, - '.sld-vl300to500.sld-bus-3, .nad-vl300to500.nad-bus-3': { - '--vl-color': '#25699D', - }, - '.sld-vl300to500.sld-bus-4, .nad-vl300to500.nad-bus-4': { - '--vl-color': '#0057F9', - }, - '.sld-vl300to500.sld-bus-5, .nad-vl300to500.nad-bus-5': { - '--vl-color': '#74AFEA', - }, - '.sld-vl300to500.sld-bus-6, .nad-vl300to500.nad-bus-6': { - '--vl-color': '#44679C', - }, - '.sld-vl300to500.sld-bus-7, .nad-vl300to500.nad-bus-7': { - '--vl-color': '#458BE8', - }, - '.sld-vl300to500.sld-bus-8, .nad-vl300to500.nad-bus-8': { - '--vl-color': '#2862AE', - }, - '.sld-vl300to500.sld-bus-9, .nad-vl300to500.nad-bus-9': { - '--vl-color': '#B0D4FE', - }, + ...cssColors(DARK_THEME), }; diff --git a/src/styles/light-theme-css-vars.ts b/src/styles/light-theme-css-vars.ts index 9c3a96d364..4344967417 100644 --- a/src/styles/light-theme-css-vars.ts +++ b/src/styles/light-theme-css-vars.ts @@ -5,6 +5,9 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +import { LIGHT_THEME } from '@gridsuite/commons-ui'; +import { cssColors } from 'utils/colors'; + export const lightThemeCssVars = { '.nad-edge-infos text': { stroke: 'white', // Border outside of the displayed values on lines. Same color as the background. @@ -21,214 +24,5 @@ export const lightThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#f0f0f0cc', // same displayed color as #9c9c9c20 but with 0.8 opacity }, - '.sld-vl0to30, .nad-vl0to30': { - '--vl-color': '#ABAE28', - }, - '.sld-vl0to30.sld-bus-1, .nad-vl0to30.nad-bus-1': { - '--vl-color': '#69701B', - }, - '.sld-vl0to30.sld-bus-2, .nad-vl0to30.nad-bus-2': { - '--vl-color': '#D8D20A', - }, - '.sld-vl0to30.sld-bus-3, .nad-vl0to30.nad-bus-3': { - '--vl-color': '#A156AA', - }, - '.sld-vl0to30.sld-bus-4, .nad-vl0to30.nad-bus-4': { - '--vl-color': '#CB3DDD', - }, - '.sld-vl0to30.sld-bus-5, .nad-vl0to30.nad-bus-5': { - '--vl-color': '#A684BC', - }, - '.sld-vl0to30.sld-bus-6, .nad-vl0to30.nad-bus-6': { - '--vl-color': '#62188B', - }, - '.sld-vl0to30.sld-bus-7, .nad-vl0to30.nad-bus-7': { - '--vl-color': '#885CA8', - }, - '.sld-vl0to30.sld-bus-8, .nad-vl0to30.nad-bus-8': { - '--vl-color': '#A020F0', - }, - '.sld-vl0to30.sld-bus-9, .nad-vl0to30.nad-bus-9': { - '--vl-color': '#CC80FF', - }, - '.sld-vl30to50, .nad-vl30to50': { - '--vl-color': '#FF8290', - }, - '.sld-vl30to50.sld-bus-1, .nad-vl30to50.nad-bus-1': { - '--vl-color': '#E7173E', - }, - '.sld-vl30to50.sld-bus-2, .nad-vl30to50.nad-bus-2': { - '--vl-color': '#DAA8AD', - }, - '.sld-vl30to50.sld-bus-3, .nad-vl30to50.nad-bus-3': { - '--vl-color': '#459C63', - }, - '.sld-vl30to50.sld-bus-4, .nad-vl30to50.nad-bus-4': { - '--vl-color': '#00E266', - }, - '.sld-vl30to50.sld-bus-5, .nad-vl30to50.nad-bus-5': { - '--vl-color': '#A7B368', - }, - '.sld-vl30to50.sld-bus-6, .nad-vl30to50.nad-bus-6': { - '--vl-color': '#1A4D1B', - }, - '.sld-vl30to50.sld-bus-7, .nad-vl30to50.nad-bus-7': { - '--vl-color': '#C2CB92', - }, - '.sld-vl30to50.sld-bus-8, .nad-vl30to50.nad-bus-8': { - '--vl-color': '#218B21', - }, - '.sld-vl30to50.sld-bus-9, .nad-vl30to50.nad-bus-9': { - '--vl-color': '#58D058', - }, - '.sld-vl50to70, .nad-vl50to70': { - '--vl-color': '#A020F0', - }, - '.sld-vl50to70.sld-bus-1, .nad-vl50to70.nad-bus-1': { - '--vl-color': '#62188B', - }, - '.sld-vl50to70.sld-bus-2, .nad-vl50to70.nad-bus-2': { - '--vl-color': '#AC8AC2', - }, - '.sld-vl50to70.sld-bus-3, .nad-vl50to70.nad-bus-3': { - '--vl-color': '#1F7620', - }, - '.sld-vl50to70.sld-bus-4, .nad-vl50to70.nad-bus-4': { - '--vl-color': '#C5ED3B', - }, - '.sld-vl50to70.sld-bus-5, .nad-vl50to70.nad-bus-5': { - '--vl-color': '#A7B368', - }, - '.sld-vl50to70.sld-bus-6, .nad-vl50to70.nad-bus-6': { - '--vl-color': '#55591B', - }, - '.sld-vl50to70.sld-bus-7, .nad-vl50to70.nad-bus-7': { - '--vl-color': '#E5E845', - }, - '.sld-vl50to70.sld-bus-8, .nad-vl50to70.nad-bus-8': { - '--vl-color': '#ABAE28', - }, - '.sld-vl50to70.sld-bus-9, .nad-vl50to70.nad-bus-9': { - '--vl-color': '#DAD971', - }, - '.sld-vl70to120, .nad-vl70to120': { - '--vl-color': '#FF9D00', - }, - '.sld-vl70to120.sld-bus-1, .nad-vl70to120.nad-bus-1': { - '--vl-color': '#7E3109', - }, - '.sld-vl70to120.sld-bus-2, .nad-vl70to120.nad-bus-2': { - '--vl-color': '#C50', - }, - '.sld-vl70to120.sld-bus-3, .nad-vl70to120.nad-bus-3': { - '--vl-color': '#25699D', - }, - '.sld-vl70to120.sld-bus-4, .nad-vl70to120.nad-bus-4': { - '--vl-color': '#0057F9', - }, - '.sld-vl70to120.sld-bus-5, .nad-vl70to120.nad-bus-5': { - '--vl-color': '#74AFEA', - }, - '.sld-vl70to120.sld-bus-6, .nad-vl70to120.nad-bus-6': { - '--vl-color': '#1B3459', - }, - '.sld-vl70to120.sld-bus-7, .nad-vl70to120.nad-bus-7': { - '--vl-color': '#458BE8', - }, - '.sld-vl70to120.sld-bus-8, .nad-vl70to120.nad-bus-8': { - '--vl-color': '#2862AE', - }, - '.sld-vl70to120.sld-bus-9, .nad-vl70to120.nad-bus-9': { - '--vl-color': '#B0D4FE', - }, - '.sld-vl120to180, .nad-vl120to180': { - '--vl-color': '#00AFAE', - }, - '.sld-vl120to180.sld-bus-1, .nad-vl120to180.nad-bus-1': { - '--vl-color': '#0A6365', - }, - '.sld-vl120to180.sld-bus-2, .nad-vl120to180.nad-bus-2': { - '--vl-color': '#79CED4', - }, - '.sld-vl120to180.sld-bus-3, .nad-vl120to180.nad-bus-3': { - '--vl-color': '#A30E32', - }, - '.sld-vl120to180.sld-bus-4, .nad-vl120to180.nad-bus-4': { - '--vl-color': '#FF8290', - }, - '.sld-vl120to180.sld-bus-5, .nad-vl120to180.nad-bus-5': { - '--vl-color': '#DAA8AD', - }, - '.sld-vl120to180.sld-bus-6, .nad-vl120to180.nad-bus-6': { - '--vl-color': '#C30D33', - }, - '.sld-vl120to180.sld-bus-7, .nad-vl120to180.nad-bus-7': { - '--vl-color': '#E3BEC0', - }, - '.sld-vl120to180.sld-bus-8, .nad-vl120to180.nad-bus-8': { - '--vl-color': '#FF8290', - }, - '.sld-vl120to180.sld-bus-9, .nad-vl120to180.nad-bus-9': { - '--vl-color': '#FFCCD0', - }, - '.sld-vl180to300, .nad-vl180to300': { - '--vl-color': '#32B532', - }, - '.sld-vl180to300.sld-bus-1, .nad-vl180to300.nad-bus-1': { - '--vl-color': '#1E5D1F', - }, - '.sld-vl180to300.sld-bus-2, .nad-vl180to300.nad-bus-2': { - '--vl-color': '#A7B368', - }, - '.sld-vl180to300.sld-bus-3, .nad-vl180to300.nad-bus-3': { - '--vl-color': '#E47400', - }, - '.sld-vl180to300.sld-bus-4, .nad-vl180to300.nad-bus-4': { - '--vl-color': '#6B3A26', - }, - '.sld-vl180to300.sld-bus-5, .nad-vl180to300.nad-bus-5': { - '--vl-color': '#D69A88', - }, - '.sld-vl180to300.sld-bus-6, .nad-vl180to300.nad-bus-6': { - '--vl-color': '#7E3109', - }, - '.sld-vl180to300.sld-bus-7, .nad-vl180to300.nad-bus-7': { - '--vl-color': '#B78B58', - }, - '.sld-vl180to300.sld-bus-8, .nad-vl180to300.nad-bus-8': { - '--vl-color': '#C94119', - }, - '.sld-vl180to300.sld-bus-9, .nad-vl180to300.nad-bus-9': { - '--vl-color': '#FFC019', - }, - '.sld-vl300to500, .nad-vl300to500': { - '--vl-color': '#F00', - }, - '.sld-vl300to500.sld-bus-1, .nad-vl300to500.nad-bus-1': { - '--vl-color': '#920A0A', - }, - '.sld-vl300to500.sld-bus-2, .nad-vl300to500.nad-bus-2': { - '--vl-color': '#FF9494', - }, - '.sld-vl300to500.sld-bus-3, .nad-vl300to500.nad-bus-3': { - '--vl-color': '#25699D', - }, - '.sld-vl300to500.sld-bus-4, .nad-vl300to500.nad-bus-4': { - '--vl-color': '#0057F9', - }, - '.sld-vl300to500.sld-bus-5, .nad-vl300to500.nad-bus-5': { - '--vl-color': '#74AFEA', - }, - '.sld-vl300to500.sld-bus-6, .nad-vl300to500.nad-bus-6': { - '--vl-color': '#1B3459', - }, - '.sld-vl300to500.sld-bus-7, .nad-vl300to500.nad-bus-7': { - '--vl-color': '#458BE8', - }, - '.sld-vl300to500.sld-bus-8, .nad-vl300to500.nad-bus-8': { - '--vl-color': '#2862AE', - }, - '.sld-vl300to500.sld-bus-9, .nad-vl300to500.nad-bus-9': { - '--vl-color': '#B0D4FE', - }, + ...cssColors(LIGHT_THEME), }; diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 645d70cc35..83ba6b584c 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -5,10 +5,56 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { getNominalVoltageInterval } from './constants'; +import { DARK_THEME, LIGHT_THEME } from '@gridsuite/commons-ui'; +import { + BASE_VOLTAGES, + getNominalVoltageIntervalByIntervalName, + getNominalVoltageIntervalByVoltageValue, +} from './constants'; + +function parseRGB(stringRGB: string): number[] | undefined { + return stringRGB + .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) + ?.slice(1) + .map(Number); +} + +export const getColor = ( + intervalName: string, + busNumber: number, + theme: string = DARK_THEME // use theme +): string | undefined => { + const voltageInterval = getNominalVoltageIntervalByIntervalName(intervalName); + const bus = busNumber === 0 ? 'default' : 'bus-' + String(busNumber); + const color = + theme === LIGHT_THEME ? voltageInterval?.lightThemeColors[bus] : voltageInterval?.darkThemeColors[bus]; + return color; +}; export const getNominalVoltageColor = (voltageValue: number): number[] | undefined => { - return getNominalVoltageInterval(voltageValue)?.color; + const color = getNominalVoltageIntervalByVoltageValue(voltageValue)?.mapColor; + return color ? parseRGB(color) : undefined; }; export const INVALID_LOADFLOW_OPACITY = 0.2; + +export const cssColors = (theme: string) => { + const css: Record = {}; + + for (const interval of BASE_VOLTAGES) { + const className = `.sld-${interval.name}, .nad-${interval.name}`; + + const themeColors = theme === DARK_THEME ? interval.darkThemeColors : interval.lightThemeColors; + css[className] = { '--vl-color': themeColors.default }; + + for (let i = 1; i <= 9; i++) { + const key = `bus-${i}`; + const color = themeColors[key]; + if (!color) continue; + + const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; + css[selector] = { '--vl-color': color }; + } + } + return css; +}; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index cfd8c14f6e..283dfe0121 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -4,85 +4,257 @@ * 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/. */ + +type ThemeColors = Record; export interface VoltageLevelInterval { name: string; vlValue: number; minValue: number; maxValue: number; label: string; - color: number[]; + mapColor: string; + darkThemeColors: ThemeColors; + lightThemeColors: ThemeColors; profile: string; } export const BASE_VOLTAGES: VoltageLevelInterval[] = [ { - name: 'vl300to500', + name: 'vl7', vlValue: 400, minValue: 300, - maxValue: Infinity, + maxValue: 500, label: '400 kV', - color: [255, 0, 0], profile: 'Default', + mapColor: 'rgb(255, 0, 0)', + lightThemeColors: { + default: 'rgb(255, 0, 0)', + 'bus-1': 'rgb(146, 10, 10)', + 'bus-2': 'rgb(255, 148, 148)', + 'bus-3': 'rgb(37, 105, 157)', + 'bus-4': 'rgb(0, 87, 249)', + 'bus-5': 'rgb(116, 175, 234)', + 'bus-6': 'rgb(27, 52, 89)', + 'bus-7': 'rgb(69, 139, 232)', + 'bus-8': 'rgb(40, 98, 174)', + 'bus-9': 'rgb(176, 212, 254)', + }, + darkThemeColors: { + default: 'rgb(255, 0, 7)', + 'bus-1': 'rgb(221, 100, 132)', + 'bus-2': 'rgb(255, 188, 190)', + 'bus-3': 'rgb(37, 105, 157)', + 'bus-4': 'rgb(0, 87, 249)', + 'bus-5': 'rgb(116, 175, 234)', + 'bus-6': 'rgb(68, 103, 156)', + 'bus-7': 'rgb(69, 139, 232)', + 'bus-8': 'rgb(40, 98, 174)', + 'bus-9': 'rgb(176, 212, 254)', + }, }, { - name: 'vl200to300', + name: 'vl6', vlValue: 225, minValue: 200, maxValue: 300, label: '225 kV', - color: [34, 139, 34], profile: 'Default', + mapColor: 'rgb(34, 139, 34)', + lightThemeColors: { + default: 'rgb(50, 181, 50)', + 'bus-1': 'rgb(30, 93, 31)', + 'bus-2': 'rgb(167, 179, 104)', + 'bus-3': 'rgb(228, 116, 0)', + 'bus-4': 'rgb(107, 58, 38)', + 'bus-5': 'rgb(214, 154, 136)', + 'bus-6': 'rgb(126, 49, 9)', + 'bus-7': 'rgb(183, 139, 88)', + 'bus-8': 'rgb(201, 65, 25)', + 'bus-9': 'rgb(255, 192, 25)', + }, + darkThemeColors: { + default: 'rgb(0, 255, 80)', + 'bus-1': 'rgb(66, 149, 75)', + 'bus-2': 'rgb(167, 178, 126)', + 'bus-3': 'rgb(245, 127, 23)', + 'bus-4': 'rgb(163, 113, 92)', + 'bus-5': 'rgb(219, 171, 157)', + 'bus-6': 'rgb(136, 82, 57)', + 'bus-7': 'rgb(179, 149, 114)', + 'bus-8': 'rgb(201, 65, 25)', + 'bus-9': 'rgb(234, 188, 69)', + }, }, { - name: 'vl100to200', + name: 'vl5', vlValue: 150, minValue: 100, maxValue: 200, label: '150 kV', - color: [1, 175, 175], profile: 'Default', + mapColor: 'rgb(1, 175, 175)', + lightThemeColors: { + default: 'rgb(0, 175, 174)', + 'bus-1': 'rgb(10, 99, 101)', + 'bus-2': 'rgb(121, 206, 212)', + 'bus-3': 'rgb(163, 14, 50)', + 'bus-4': 'rgb(255, 130, 144)', + 'bus-5': 'rgb(218, 168, 173)', + 'bus-6': 'rgb(195, 13, 51)', + 'bus-7': 'rgb(227, 190, 192)', + 'bus-8': 'rgb(255, 130, 144)', + 'bus-9': 'rgb(255, 204, 208)', + }, + darkThemeColors: { + default: 'rgb(41, 175, 176)', + 'bus-1': 'rgb(51, 107, 111)', + 'bus-2': 'rgb(132, 198, 204)', + 'bus-3': 'rgb(186, 19, 60)', + 'bus-4': 'rgb(255, 130, 144)', + 'bus-5': 'rgb(218, 168, 173)', + 'bus-6': 'rgb(151, 53, 58)', + 'bus-7': 'rgb(234, 188, 189)', + 'bus-8': 'rgb(234, 46, 51)', + 'bus-9': 'rgb(234, 110, 114)', + }, }, { - name: 'vl70to100', + name: 'vl4', vlValue: 90, minValue: 70, maxValue: 100, label: '90 kV', - color: [204, 85, 0], profile: 'Default', + mapColor: 'rgb(204, 85, 0)', + lightThemeColors: { + default: 'rgb(255, 157, 0)', + 'bus-1': 'rgb(126, 49, 9)', + 'bus-2': 'rgb(204, 85, 0)', + 'bus-3': 'rgb(37, 105, 157)', + 'bus-4': 'rgb(0, 87, 249)', + 'bus-5': 'rgb(116, 175, 234)', + 'bus-6': 'rgb(27, 52, 89)', + 'bus-7': 'rgb(69, 139, 232)', + 'bus-8': 'rgb(40, 98, 174)', + 'bus-9': 'rgb(176, 212, 254)', + }, + darkThemeColors: { + default: 'rgb(255, 97, 0)', + 'bus-1': 'rgb(178, 113, 83)', + 'bus-2': 'rgb(198, 166, 139)', + 'bus-3': 'rgb(37, 105, 157)', + 'bus-4': 'rgb(0, 87, 249)', + 'bus-5': 'rgb(116, 175, 234)', + 'bus-6': 'rgb(68, 103, 156)', + 'bus-7': 'rgb(69, 139, 232)', + 'bus-8': 'rgb(40, 98, 174)', + 'bus-9': 'rgb(176, 212, 254)', + }, }, { - name: 'vl50to70', + name: 'vl3', vlValue: 63, minValue: 50, maxValue: 70, label: '63 kV', - color: [160, 32, 240], profile: 'Default', + mapColor: 'rgb(160, 32, 240)', + lightThemeColors: { + default: 'rgb(160, 32, 240)', + 'bus-1': 'rgb(98, 24, 139)', + 'bus-2': 'rgb(172, 138, 194)', + 'bus-3': 'rgb(31, 118, 32)', + 'bus-4': 'rgb(197, 237, 59)', + 'bus-5': 'rgb(167, 179, 104)', + 'bus-6': 'rgb(85, 89, 27)', + 'bus-7': 'rgb(229, 232, 69)', + 'bus-8': 'rgb(171, 174, 40)', + 'bus-9': 'rgb(218, 217, 113)', + }, + darkThemeColors: { + default: 'rgb(212, 125, 255)', + 'bus-1': 'rgb(194, 48, 210)', + 'bus-2': 'rgb(171, 148, 191)', + 'bus-3': 'rgb(31, 118, 32)', + 'bus-4': 'rgb(197, 237, 59)', + 'bus-5': 'rgb(167, 179, 104)', + 'bus-6': 'rgb(105, 112, 70)', + 'bus-7': 'rgb(225, 228, 68)', + 'bus-8': 'rgb(170, 174, 80)', + 'bus-9': 'rgb(212, 212, 134)', + }, }, { - name: 'vl40to50', + name: 'vl2', vlValue: 42, minValue: 40, maxValue: 50, label: '42 kV', - color: [255, 130, 144], profile: 'Default', + mapColor: 'rgb(255, 130, 144)', + lightThemeColors: { + default: 'rgb(255, 130, 144)', + 'bus-1': 'rgb(231, 23, 62)', + 'bus-2': 'rgb(218, 168, 173)', + 'bus-3': 'rgb(69, 156, 99)', + 'bus-4': 'rgb(0, 226, 102)', + 'bus-5': 'rgb(167, 179, 104)', + 'bus-6': 'rgb(26, 77, 27)', + 'bus-7': 'rgb(194, 203, 146)', + 'bus-8': 'rgb(33, 139, 33)', + 'bus-9': 'rgb(88, 208, 88)', + }, + darkThemeColors: { + default: 'rgb(234, 142, 155)', + 'bus-1': 'rgb(164, 56, 87)', + 'bus-2': 'rgb(206, 170, 176)', + 'bus-3': 'rgb(69, 156, 99)', + 'bus-4': 'rgb(0, 226, 102)', + 'bus-5': 'rgb(167, 179, 104)', + 'bus-6': 'rgb(63, 115, 64)', + 'bus-7': 'rgb(194, 203, 146)', + 'bus-8': 'rgb(33, 139, 33)', + 'bus-9': 'rgb(88, 208, 88)', + }, }, { - name: 'vl0to40', + name: 'vl1', vlValue: 20, minValue: 0, maxValue: 40, label: 'HTA', - color: [171, 175, 40], profile: 'Default', + mapColor: 'rgb(171, 175, 40)', + lightThemeColors: { + default: 'rgb(171, 174, 40)', + 'bus-1': 'rgb(105, 112, 27)', + 'bus-2': 'rgb(216, 210, 10)', + 'bus-3': 'rgb(161, 86, 170)', + 'bus-4': 'rgb(203, 61, 221)', + 'bus-5': 'rgb(166, 132, 188)', + 'bus-6': 'rgb(98, 24, 139)', + 'bus-7': 'rgb(136, 92, 168)', + 'bus-8': 'rgb(160, 32, 240)', + 'bus-9': 'rgb(204, 128, 255)', + }, + darkThemeColors: { + default: 'rgb(204, 201, 58)', + 'bus-1': 'rgb(94, 131, 92)', + 'bus-2': 'rgb(177, 180, 108)', + 'bus-3': 'rgb(161, 86, 170)', + 'bus-4': 'rgb(203, 61, 221)', + 'bus-5': 'rgb(172, 138, 194)', + 'bus-6': 'rgb(115, 64, 151)', + 'bus-7': 'rgb(188, 173, 204)', + 'bus-8': 'rgb(162, 70, 224)', + 'bus-9': 'rgb(195, 140, 235)', + }, }, ]; export const MAX_VOLTAGE = 500; -export const getNominalVoltageInterval = (voltageValue: number): VoltageLevelInterval | undefined => { +export const getNominalVoltageIntervalByVoltageValue = (voltageValue: number): VoltageLevelInterval | undefined => { for (let interval of BASE_VOLTAGES) { if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { return interval; @@ -90,6 +262,37 @@ export const getNominalVoltageInterval = (voltageValue: number): VoltageLevelInt } }; -export const getNominalVoltageIntervalName = (voltageValue: number): string | undefined => { - return getNominalVoltageInterval(voltageValue)?.name; +export const getNominalVoltageIntervalByIntervalName = (intervalName: string): VoltageLevelInterval | undefined => { + for (let interval of BASE_VOLTAGES) { + if (interval.name === intervalName) { + return interval; + } + } +}; + +export const getNominalVoltageIntervalNameByVoltageValue = (voltageValue: number): string | undefined => { + return getNominalVoltageIntervalByVoltageValue(voltageValue)?.name; +}; + +export interface BaseVoltages { + name: string; + minValue: number; + maxValue: number; + profile: string; +} +export interface BaseVoltagesConfigInfos { + baseVoltages: BaseVoltages[]; + defaultProfile: string; +} + +export const getBaseVoltagesConfigInfos = (): BaseVoltagesConfigInfos => { + return { + baseVoltages: BASE_VOLTAGES.map((vl) => ({ + name: vl.name, + minValue: vl.minValue, + maxValue: vl.maxValue, + profile: 'Default', + })), + defaultProfile: 'Default', + }; }; From 13e03e33c1319296cca1b2f3c7c23bbb7a6bb277 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Thu, 6 Nov 2025 10:18:07 +0100 Subject: [PATCH 04/10] delete comment --- src/services/study/network.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/services/study/network.ts b/src/services/study/network.ts index 4dff33a479..eedcc7e1d3 100644 --- a/src/services/study/network.ts +++ b/src/services/study/network.ts @@ -79,7 +79,6 @@ export function getVoltageLevelSingleLineDiagram({ if (componentLibrary !== null) { queryParams.append('componentLibrary', String(componentLibrary)); } - //baseVoltagesConfig return ( getStudyUrlWithNodeUuidAndRootNetworkUuid(studyUuid, currentNodeUuid, currentRootNetworkUuid) + '/network/voltage-levels/' + @@ -237,7 +236,6 @@ export function getSubstationSingleLineDiagram({ if (componentLibrary !== null) { queryParams.append('componentLibrary', String(componentLibrary)); } - //baseVoltagesConfig return ( getStudyUrlWithNodeUuidAndRootNetworkUuid(studyUuid, currentNodeUuid, currentRootNetworkUuid) + '/network/substations/' + From c2f279674b58daf940777c05f43aa26bb389c486 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Fri, 7 Nov 2025 09:48:38 +0100 Subject: [PATCH 05/10] create distinct file for base voltages ocnfig --- src/utils/base-voltages-config.json | 233 +++++++++++++++++++++++++++ src/utils/constants.ts | 234 ---------------------------- 2 files changed, 233 insertions(+), 234 deletions(-) create mode 100644 src/utils/base-voltages-config.json diff --git a/src/utils/base-voltages-config.json b/src/utils/base-voltages-config.json new file mode 100644 index 0000000000..bfce4f4b31 --- /dev/null +++ b/src/utils/base-voltages-config.json @@ -0,0 +1,233 @@ +[ + { + "name": "vl7", + "vlValue": 400, + "minValue": 300, + "maxValue": 500, + "label": "400 kV", + "profile": "Default", + "mapColor": "rgb(255, 0, 0)", + "lightThemeColors": { + "default": "rgb(255, 0, 0)", + "bus-1": "rgb(146, 10, 10)", + "bus-2": "rgb(255, 148, 148)", + "bus-3": "rgb(37, 105, 157)", + "bus-4": "rgb(0, 87, 249)", + "bus-5": "rgb(116, 175, 234)", + "bus-6": "rgb(27, 52, 89)", + "bus-7": "rgb(69, 139, 232)", + "bus-8": "rgb(40, 98, 174)", + "bus-9": "rgb(176, 212, 254)" + }, + "darkThemeColors": { + "default": "rgb(255, 0, 7)", + "bus-1": "rgb(221, 100, 132)", + "bus-2": "rgb(255, 188, 190)", + "bus-3": "rgb(37, 105, 157)", + "bus-4": "rgb(0, 87, 249)", + "bus-5": "rgb(116, 175, 234)", + "bus-6": "rgb(68, 103, 156)", + "bus-7": "rgb(69, 139, 232)", + "bus-8": "rgb(40, 98, 174)", + "bus-9": "rgb(176, 212, 254)" + } + }, + { + "name": "vl6", + "vlValue": 225, + "minValue": 200, + "maxValue": 300, + "label": "225 kV", + "profile": "Default", + "mapColor": "rgb(34, 139, 34)", + "lightThemeColors": { + "default": "rgb(50, 181, 50)", + "bus-1": "rgb(30, 93, 31)", + "bus-2": "rgb(167, 179, 104)", + "bus-3": "rgb(228, 116, 0)", + "bus-4": "rgb(107, 58, 38)", + "bus-5": "rgb(214, 154, 136)", + "bus-6": "rgb(126, 49, 9)", + "bus-7": "rgb(183, 139, 88)", + "bus-8": "rgb(201, 65, 25)", + "bus-9": "rgb(255, 192, 25)" + }, + "darkThemeColors": { + "default": "rgb(0, 255, 80)", + "bus-1": "rgb(66, 149, 75)", + "bus-2": "rgb(167, 178, 126)", + "bus-3": "rgb(245, 127, 23)", + "bus-4": "rgb(163, 113, 92)", + "bus-5": "rgb(219, 171, 157)", + "bus-6": "rgb(136, 82, 57)", + "bus-7": "rgb(179, 149, 114)", + "bus-8": "rgb(201, 65, 25)", + "bus-9": "rgb(234, 188, 69)" + } + }, + { + "name": "vl5", + "vlValue": 150, + "minValue": 100, + "maxValue": 200, + "label": "150 kV", + "profile": "Default", + "mapColor": "rgb(1, 175, 175)", + "lightThemeColors": { + "default": "rgb(0, 175, 174)", + "bus-1": "rgb(10, 99, 101)", + "bus-2": "rgb(121, 206, 212)", + "bus-3": "rgb(163, 14, 50)", + "bus-4": "rgb(255, 130, 144)", + "bus-5": "rgb(218, 168, 173)", + "bus-6": "rgb(195, 13, 51)", + "bus-7": "rgb(227, 190, 192)", + "bus-8": "rgb(255, 130, 144)", + "bus-9": "rgb(255, 204, 208)" + }, + "darkThemeColors": { + "default": "rgb(41, 175, 176)", + "bus-1": "rgb(51, 107, 111)", + "bus-2": "rgb(132, 198, 204)", + "bus-3": "rgb(186, 19, 60)", + "bus-4": "rgb(255, 130, 144)", + "bus-5": "rgb(218, 168, 173)", + "bus-6": "rgb(151, 53, 58)", + "bus-7": "rgb(234, 188, 189)", + "bus-8": "rgb(234, 46, 51)", + "bus-9": "rgb(234, 110, 114)" + } + }, + { + "name": "vl4", + "vlValue": 90, + "minValue": 70, + "maxValue": 100, + "label": "90 kV", + "profile": "Default", + "mapColor": "rgb(204, 85, 0)", + "lightThemeColors": { + "default": "rgb(255, 157, 0)", + "bus-1": "rgb(126, 49, 9)", + "bus-2": "rgb(204, 85, 0)", + "bus-3": "rgb(37, 105, 157)", + "bus-4": "rgb(0, 87, 249)", + "bus-5": "rgb(116, 175, 234)", + "bus-6": "rgb(27, 52, 89)", + "bus-7": "rgb(69, 139, 232)", + "bus-8": "rgb(40, 98, 174)", + "bus-9": "rgb(176, 212, 254)" + }, + "darkThemeColors": { + "default": "rgb(255, 97, 0)", + "bus-1": "rgb(178, 113, 83)", + "bus-2": "rgb(198, 166, 139)", + "bus-3": "rgb(37, 105, 157)", + "bus-4": "rgb(0, 87, 249)", + "bus-5": "rgb(116, 175, 234)", + "bus-6": "rgb(68, 103, 156)", + "bus-7": "rgb(69, 139, 232)", + "bus-8": "rgb(40, 98, 174)", + "bus-9": "rgb(176, 212, 254)" + } + }, + { + "name": "vl3", + "vlValue": 63, + "minValue": 69, + "maxValue": 70, + "label": "63 kV", + "profile": "Default", + "mapColor": "rgb(160, 32, 240)", + "lightThemeColors": { + "default": "rgb(160, 32, 240)", + "bus-1": "rgb(98, 24, 139)", + "bus-2": "rgb(172, 138, 194)", + "bus-3": "rgb(31, 118, 32)", + "bus-4": "rgb(197, 237, 59)", + "bus-5": "rgb(167, 179, 104)", + "bus-6": "rgb(85, 89, 27)", + "bus-7": "rgb(229, 232, 69)", + "bus-8": "rgb(171, 174, 40)", + "bus-9": "rgb(218, 217, 113)" + }, + "darkThemeColors": { + "default": "rgb(212, 125, 255)", + "bus-1": "rgb(194, 48, 210)", + "bus-2": "rgb(171, 148, 191)", + "bus-3": "rgb(31, 118, 32)", + "bus-4": "rgb(197, 237, 59)", + "bus-5": "rgb(167, 179, 104)", + "bus-6": "rgb(105, 112, 70)", + "bus-7": "rgb(225, 228, 68)", + "bus-8": "rgb(170, 174, 80)", + "bus-9": "rgb(212, 212, 134)" + } + }, + { + "name": "vl2", + "vlValue": 42, + "minValue": 40, + "maxValue": 69, + "label": "42 kV", + "profile": "Default", + "mapColor": "rgb(255, 130, 144)", + "lightThemeColors": { + "default": "rgb(255, 130, 144)", + "bus-1": "rgb(231, 23, 62)", + "bus-2": "rgb(218, 168, 173)", + "bus-3": "rgb(69, 156, 99)", + "bus-4": "rgb(0, 226, 102)", + "bus-5": "rgb(167, 179, 104)", + "bus-6": "rgb(26, 77, 27)", + "bus-7": "rgb(194, 203, 146)", + "bus-8": "rgb(33, 139, 33)", + "bus-9": "rgb(88, 208, 88)" + }, + "darkThemeColors": { + "default": "rgb(234, 142, 155)", + "bus-1": "rgb(164, 56, 87)", + "bus-2": "rgb(206, 170, 176)", + "bus-3": "rgb(69, 156, 99)", + "bus-4": "rgb(0, 226, 102)", + "bus-5": "rgb(167, 179, 104)", + "bus-6": "rgb(63, 115, 64)", + "bus-7": "rgb(194, 203, 146)", + "bus-8": "rgb(33, 139, 33)", + "bus-9": "rgb(88, 208, 88)" + } + }, + { + "name": "vl1", + "vlValue": 20, + "minValue": 0, + "maxValue": 40, + "label": "HTA", + "profile": "Default", + "mapColor": "rgb(171, 175, 40)", + "lightThemeColors": { + "default": "rgb(171, 174, 40)", + "bus-1": "rgb(105, 112, 27)", + "bus-2": "rgb(216, 210, 10)", + "bus-3": "rgb(161, 86, 170)", + "bus-4": "rgb(203, 61, 221)", + "bus-5": "rgb(166, 132, 188)", + "bus-6": "rgb(98, 24, 139)", + "bus-7": "rgb(136, 92, 168)", + "bus-8": "rgb(160, 32, 240)", + "bus-9": "rgb(204, 128, 255)" + }, + "darkThemeColors": { + "default": "rgb(204, 201, 58)", + "bus-1": "rgb(94, 131, 92)", + "bus-2": "rgb(177, 180, 108)", + "bus-3": "rgb(161, 86, 170)", + "bus-4": "rgb(203, 61, 221)", + "bus-5": "rgb(172, 138, 194)", + "bus-6": "rgb(115, 64, 151)", + "bus-7": "rgb(188, 173, 204)", + "bus-8": "rgb(162, 70, 224)", + "bus-9": "rgb(195, 140, 235)" + } + } +] \ No newline at end of file diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 283dfe0121..2167d2a182 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -18,240 +18,6 @@ export interface VoltageLevelInterval { profile: string; } -export const BASE_VOLTAGES: VoltageLevelInterval[] = [ - { - name: 'vl7', - vlValue: 400, - minValue: 300, - maxValue: 500, - label: '400 kV', - profile: 'Default', - mapColor: 'rgb(255, 0, 0)', - lightThemeColors: { - default: 'rgb(255, 0, 0)', - 'bus-1': 'rgb(146, 10, 10)', - 'bus-2': 'rgb(255, 148, 148)', - 'bus-3': 'rgb(37, 105, 157)', - 'bus-4': 'rgb(0, 87, 249)', - 'bus-5': 'rgb(116, 175, 234)', - 'bus-6': 'rgb(27, 52, 89)', - 'bus-7': 'rgb(69, 139, 232)', - 'bus-8': 'rgb(40, 98, 174)', - 'bus-9': 'rgb(176, 212, 254)', - }, - darkThemeColors: { - default: 'rgb(255, 0, 7)', - 'bus-1': 'rgb(221, 100, 132)', - 'bus-2': 'rgb(255, 188, 190)', - 'bus-3': 'rgb(37, 105, 157)', - 'bus-4': 'rgb(0, 87, 249)', - 'bus-5': 'rgb(116, 175, 234)', - 'bus-6': 'rgb(68, 103, 156)', - 'bus-7': 'rgb(69, 139, 232)', - 'bus-8': 'rgb(40, 98, 174)', - 'bus-9': 'rgb(176, 212, 254)', - }, - }, - { - name: 'vl6', - vlValue: 225, - minValue: 200, - maxValue: 300, - label: '225 kV', - profile: 'Default', - mapColor: 'rgb(34, 139, 34)', - lightThemeColors: { - default: 'rgb(50, 181, 50)', - 'bus-1': 'rgb(30, 93, 31)', - 'bus-2': 'rgb(167, 179, 104)', - 'bus-3': 'rgb(228, 116, 0)', - 'bus-4': 'rgb(107, 58, 38)', - 'bus-5': 'rgb(214, 154, 136)', - 'bus-6': 'rgb(126, 49, 9)', - 'bus-7': 'rgb(183, 139, 88)', - 'bus-8': 'rgb(201, 65, 25)', - 'bus-9': 'rgb(255, 192, 25)', - }, - darkThemeColors: { - default: 'rgb(0, 255, 80)', - 'bus-1': 'rgb(66, 149, 75)', - 'bus-2': 'rgb(167, 178, 126)', - 'bus-3': 'rgb(245, 127, 23)', - 'bus-4': 'rgb(163, 113, 92)', - 'bus-5': 'rgb(219, 171, 157)', - 'bus-6': 'rgb(136, 82, 57)', - 'bus-7': 'rgb(179, 149, 114)', - 'bus-8': 'rgb(201, 65, 25)', - 'bus-9': 'rgb(234, 188, 69)', - }, - }, - { - name: 'vl5', - vlValue: 150, - minValue: 100, - maxValue: 200, - label: '150 kV', - profile: 'Default', - mapColor: 'rgb(1, 175, 175)', - lightThemeColors: { - default: 'rgb(0, 175, 174)', - 'bus-1': 'rgb(10, 99, 101)', - 'bus-2': 'rgb(121, 206, 212)', - 'bus-3': 'rgb(163, 14, 50)', - 'bus-4': 'rgb(255, 130, 144)', - 'bus-5': 'rgb(218, 168, 173)', - 'bus-6': 'rgb(195, 13, 51)', - 'bus-7': 'rgb(227, 190, 192)', - 'bus-8': 'rgb(255, 130, 144)', - 'bus-9': 'rgb(255, 204, 208)', - }, - darkThemeColors: { - default: 'rgb(41, 175, 176)', - 'bus-1': 'rgb(51, 107, 111)', - 'bus-2': 'rgb(132, 198, 204)', - 'bus-3': 'rgb(186, 19, 60)', - 'bus-4': 'rgb(255, 130, 144)', - 'bus-5': 'rgb(218, 168, 173)', - 'bus-6': 'rgb(151, 53, 58)', - 'bus-7': 'rgb(234, 188, 189)', - 'bus-8': 'rgb(234, 46, 51)', - 'bus-9': 'rgb(234, 110, 114)', - }, - }, - { - name: 'vl4', - vlValue: 90, - minValue: 70, - maxValue: 100, - label: '90 kV', - profile: 'Default', - mapColor: 'rgb(204, 85, 0)', - lightThemeColors: { - default: 'rgb(255, 157, 0)', - 'bus-1': 'rgb(126, 49, 9)', - 'bus-2': 'rgb(204, 85, 0)', - 'bus-3': 'rgb(37, 105, 157)', - 'bus-4': 'rgb(0, 87, 249)', - 'bus-5': 'rgb(116, 175, 234)', - 'bus-6': 'rgb(27, 52, 89)', - 'bus-7': 'rgb(69, 139, 232)', - 'bus-8': 'rgb(40, 98, 174)', - 'bus-9': 'rgb(176, 212, 254)', - }, - darkThemeColors: { - default: 'rgb(255, 97, 0)', - 'bus-1': 'rgb(178, 113, 83)', - 'bus-2': 'rgb(198, 166, 139)', - 'bus-3': 'rgb(37, 105, 157)', - 'bus-4': 'rgb(0, 87, 249)', - 'bus-5': 'rgb(116, 175, 234)', - 'bus-6': 'rgb(68, 103, 156)', - 'bus-7': 'rgb(69, 139, 232)', - 'bus-8': 'rgb(40, 98, 174)', - 'bus-9': 'rgb(176, 212, 254)', - }, - }, - { - name: 'vl3', - vlValue: 63, - minValue: 50, - maxValue: 70, - label: '63 kV', - profile: 'Default', - mapColor: 'rgb(160, 32, 240)', - lightThemeColors: { - default: 'rgb(160, 32, 240)', - 'bus-1': 'rgb(98, 24, 139)', - 'bus-2': 'rgb(172, 138, 194)', - 'bus-3': 'rgb(31, 118, 32)', - 'bus-4': 'rgb(197, 237, 59)', - 'bus-5': 'rgb(167, 179, 104)', - 'bus-6': 'rgb(85, 89, 27)', - 'bus-7': 'rgb(229, 232, 69)', - 'bus-8': 'rgb(171, 174, 40)', - 'bus-9': 'rgb(218, 217, 113)', - }, - darkThemeColors: { - default: 'rgb(212, 125, 255)', - 'bus-1': 'rgb(194, 48, 210)', - 'bus-2': 'rgb(171, 148, 191)', - 'bus-3': 'rgb(31, 118, 32)', - 'bus-4': 'rgb(197, 237, 59)', - 'bus-5': 'rgb(167, 179, 104)', - 'bus-6': 'rgb(105, 112, 70)', - 'bus-7': 'rgb(225, 228, 68)', - 'bus-8': 'rgb(170, 174, 80)', - 'bus-9': 'rgb(212, 212, 134)', - }, - }, - { - name: 'vl2', - vlValue: 42, - minValue: 40, - maxValue: 50, - label: '42 kV', - profile: 'Default', - mapColor: 'rgb(255, 130, 144)', - lightThemeColors: { - default: 'rgb(255, 130, 144)', - 'bus-1': 'rgb(231, 23, 62)', - 'bus-2': 'rgb(218, 168, 173)', - 'bus-3': 'rgb(69, 156, 99)', - 'bus-4': 'rgb(0, 226, 102)', - 'bus-5': 'rgb(167, 179, 104)', - 'bus-6': 'rgb(26, 77, 27)', - 'bus-7': 'rgb(194, 203, 146)', - 'bus-8': 'rgb(33, 139, 33)', - 'bus-9': 'rgb(88, 208, 88)', - }, - darkThemeColors: { - default: 'rgb(234, 142, 155)', - 'bus-1': 'rgb(164, 56, 87)', - 'bus-2': 'rgb(206, 170, 176)', - 'bus-3': 'rgb(69, 156, 99)', - 'bus-4': 'rgb(0, 226, 102)', - 'bus-5': 'rgb(167, 179, 104)', - 'bus-6': 'rgb(63, 115, 64)', - 'bus-7': 'rgb(194, 203, 146)', - 'bus-8': 'rgb(33, 139, 33)', - 'bus-9': 'rgb(88, 208, 88)', - }, - }, - { - name: 'vl1', - vlValue: 20, - minValue: 0, - maxValue: 40, - label: 'HTA', - profile: 'Default', - mapColor: 'rgb(171, 175, 40)', - lightThemeColors: { - default: 'rgb(171, 174, 40)', - 'bus-1': 'rgb(105, 112, 27)', - 'bus-2': 'rgb(216, 210, 10)', - 'bus-3': 'rgb(161, 86, 170)', - 'bus-4': 'rgb(203, 61, 221)', - 'bus-5': 'rgb(166, 132, 188)', - 'bus-6': 'rgb(98, 24, 139)', - 'bus-7': 'rgb(136, 92, 168)', - 'bus-8': 'rgb(160, 32, 240)', - 'bus-9': 'rgb(204, 128, 255)', - }, - darkThemeColors: { - default: 'rgb(204, 201, 58)', - 'bus-1': 'rgb(94, 131, 92)', - 'bus-2': 'rgb(177, 180, 108)', - 'bus-3': 'rgb(161, 86, 170)', - 'bus-4': 'rgb(203, 61, 221)', - 'bus-5': 'rgb(172, 138, 194)', - 'bus-6': 'rgb(115, 64, 151)', - 'bus-7': 'rgb(188, 173, 204)', - 'bus-8': 'rgb(162, 70, 224)', - 'bus-9': 'rgb(195, 140, 235)', - }, - }, -]; - export const MAX_VOLTAGE = 500; export const getNominalVoltageIntervalByVoltageValue = (voltageValue: number): VoltageLevelInterval | undefined => { From cd0fe0c4600d7eb337d2484423d3bd3faca87432 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Fri, 7 Nov 2025 23:57:10 +0100 Subject: [PATCH 06/10] use redux store --- src/components/app-wrapper.jsx | 41 ++- .../grid-layout/hooks/use-diagram-model.ts | 19 +- src/components/network/network-map-panel.tsx | 5 +- .../network/nominal-voltage-filter.tsx | 43 +++- src/components/voltage-level-choice.jsx | 4 +- src/redux/actions.ts | 14 ++ src/redux/reducer.ts | 10 + src/services/utils.ts | 9 +- src/styles/dark-theme-css-vars.ts | 4 - src/styles/light-theme-css-vars.ts | 4 - src/utils/base-voltages-config.json | 233 ------------------ src/utils/colors.ts | 56 ++--- src/utils/constants.ts | 36 --- 13 files changed, 145 insertions(+), 333 deletions(-) delete mode 100644 src/utils/base-voltages-config.json diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx index aaa8ce6eaf..df5718e0af 100644 --- a/src/components/app-wrapper.jsx +++ b/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,8 @@ 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 { fetchBaseVoltagesConfig } from '../services/utils'; +import { setBaseVoltagesConfig } from '../redux/actions'; // Register all community features (migration to V33) ModuleRegistry.registerModules([AllCommunityModule]); @@ -448,9 +450,42 @@ 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 getVoltageLevelsCssVars = (theme) => { + const css = {}; + + for (const interval of baseVoltagesConfig) { + const className = `.sld-${interval.name}, .nad-${interval.name}`; + + const themeColors = theme === LIGHT_THEME ? interval.lightThemeColors : interval.darkThemeColors; + css[className] = { '--vl-color': themeColors.default }; + + for (let i = 1; i <= 9; i++) { + const key = `bus-${i}`; + const color = themeColors[key]; + if (!color) continue; + + const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; + css[selector] = { '--vl-color': color }; + } + } + return css; + }; + + const rootCssVars = [ + ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars), + ...getVoltageLevelsCssVars(theme), + ]; const urlMapper = useNotificationsUrlGenerator(); diff --git a/src/components/grid-layout/hooks/use-diagram-model.ts b/src/components/grid-layout/hooks/use-diagram-model.ts index 0402a8173e..965849d6d2 100644 --- a/src/components/grid-layout/hooks/use-diagram-model.ts +++ b/src/components/grid-layout/hooks/use-diagram-model.ts @@ -28,11 +28,11 @@ import { BUILD_STATUS, SLD_DISPLAY_MODE } from 'components/network/constants'; 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 { getBaseVoltagesConfigInfos } from 'utils/constants'; +import { BaseVoltagesConfigInfos } from 'utils/constants'; type UseDiagramModelProps = { diagramTypes: DiagramType[]; @@ -56,6 +56,9 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx 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([]); + baseVoltagesConfigRef.current = baseVoltagesConfig ?? []; const getDiagramTitle = useDiagramTitle(); const [diagrams, setDiagrams] = useState>({}); @@ -287,6 +290,18 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx }); }, []); + 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 diff --git a/src/components/network/network-map-panel.tsx b/src/components/network/network-map-panel.tsx index f8cab0c071..f1f0d6df51 100644 --- a/src/components/network/network-map-panel.tsx +++ b/src/components/network/network-map-panel.tsx @@ -164,6 +164,7 @@ export const NetworkMapPanel = forwardRef state.isNetworkModificationTreeModelUpToDate ); + const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig) ?? []; const theme = useTheme(); const { snackInfo } = useSnackMessage(); @@ -1184,7 +1185,9 @@ export const NetworkMapPanel = forwardRef + getNominalVoltageColor(baseVoltagesConfig, voltageValue) + } /> {mapEquipments && mapEquipments?.substations?.length > 0 && renderNominalVoltageFilter()} {renderSearchEquipment()} diff --git a/src/components/network/nominal-voltage-filter.tsx b/src/components/network/nominal-voltage-filter.tsx index 39b8fde7d7..7155af6c04 100644 --- a/src/components/network/nominal-voltage-filter.tsx +++ b/src/components/network/nominal-voltage-filter.tsx @@ -5,16 +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, - getNominalVoltageIntervalNameByVoltageValue, -} from 'utils/constants'; +import { MAX_VOLTAGE } from 'utils/constants'; +import { useSelector } from 'react-redux'; +import { AppState } from 'redux/reducer'; const styles = { nominalVoltageZone: { @@ -50,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; @@ -60,11 +64,32 @@ export default function NominalVoltageFilter({ filteredNominalVoltages, onChange, }: Readonly) { + const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig); + const baseVoltageIntervals = + baseVoltagesConfig?.map(({ name, vlValue, minValue, maxValue, label }) => ({ + name, + vlValue, + minValue, + maxValue, + label, + })) ?? []; + const baseVoltageIntervalsRef = useRef([]); + baseVoltageIntervalsRef.current = baseVoltageIntervals; + const [voltageLevelIntervals, setVoltageLevelIntervals] = useState( - 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) => getNominalVoltageIntervalNameByVoltageValue(vnom) === interval.name ); diff --git a/src/components/voltage-level-choice.jsx b/src/components/voltage-level-choice.jsx index 81f5ad3f71..1121088a7e 100644 --- a/src/components/voltage-level-choice.jsx +++ b/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 ( @@ -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() + ')'; diff --git a/src/redux/actions.ts b/src/redux/actions.ts index 935d3ccd69..f409d59681 100644 --- a/src/redux/actions.ts +++ b/src/redux/actions.ts @@ -15,6 +15,7 @@ import { } from '../utils/config-params'; import type { Action } from 'redux'; import { + BaseVoltageConfig, ComputingType, type GsLang, type GsLangUser, @@ -152,6 +153,7 @@ export type AppActions = | ReorderTableDefinitionsAction | RenameTableDefinitionAction | SetAppTabIndexAction + | SetBaseVoltagesConfigAction | AttemptLeaveParametersTabAction | ConfirmLeaveParametersTabAction | CancelLeaveParametersTabAction @@ -180,6 +182,18 @@ export function setAppTabIndex(tabIndex: number): SetAppTabIndexAction { }; } +export const SET_BASE_VOLTAGES_CONFIG = 'SET_BASE_VOLTAGES_CONFIG'; +export type SetBaseVoltagesConfigAction = Readonly> & { + 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> & { targetTabIndex: number; diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts index 1cad9fbf7d..8bb52796b5 100644 --- a/src/redux/reducer.ts +++ b/src/redux/reducer.ts @@ -10,6 +10,7 @@ import { type AuthenticationActions, type AuthenticationRouterErrorAction, type AuthenticationRouterErrorState, + BaseVoltageConfig, type CommonStoreState, ComputingType, type GsLang, @@ -168,6 +169,7 @@ import { 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 @@ import { PCCMIN_ANALYSIS_RESULT_PAGINATION, type PccminAnalysisResultFilterAction, PccminAnalysisResultPaginationAction, + SetBaseVoltagesConfig, SPREADSHEET_FILTER, type SpreadsheetFilterAction, STATEESTIMATION_RESULT_FILTER, @@ -243,6 +246,7 @@ import { type UpdateTableDefinitionAction, USE_NAME, type UseNameAction, + SetBaseVoltagesConfigAction, } from './actions'; import { getLocalStorageComputedLanguage, @@ -583,6 +587,7 @@ export interface AppState extends CommonStoreState, AppConfigState { authenticationRouterError: AuthenticationRouterErrorState | null; showAuthenticationRouterLogin: boolean; appTabIndex: number; + baseVoltagesConfig: BaseVoltageConfig[] | undefined; attemptedLeaveParametersTabIndex: number | null; isDirtyComputationParameters: boolean; studyUpdated: StudyUpdated; @@ -758,6 +763,7 @@ const initialTablesState: TablesState = { const initialState: AppState = { syncEnabled: false, appTabIndex: 0, + baseVoltagesConfig: undefined, attemptedLeaveParametersTabIndex: null, isDirtyComputationParameters: false, studyUuid: null, @@ -999,6 +1005,10 @@ export const reducer = createReducer(initialState, (builder) => { 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; }); diff --git a/src/services/utils.ts b/src/services/utils.ts index 9b0228054e..697fb73b83 100644 --- a/src/services/utils.ts +++ b/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,13 @@ export const fetchDefaultParametersValues = () => { return defaultValues; }); }; + +export async function fetchBaseVoltagesConfig(): Promise { + console.info('fetching base voltages configuration from apps-metadata file'); + const studyMetadata = await fetchStudyMetadata(); + return studyMetadata.baseVoltagesCongig; +} + export const getQueryParamsList = (params: string[] | number[] | null | undefined, paramName: string) => { if (params != null && Array.isArray(params) && params.length > 0) { const urlSearchParams = new URLSearchParams(); diff --git a/src/styles/dark-theme-css-vars.ts b/src/styles/dark-theme-css-vars.ts index fa38c0dc9f..ae760fd492 100644 --- a/src/styles/dark-theme-css-vars.ts +++ b/src/styles/dark-theme-css-vars.ts @@ -5,9 +5,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { DARK_THEME } from '@gridsuite/commons-ui'; -import { cssColors } from 'utils/colors'; - export const darkThemeCssVars = { '.nad-edge-infos text': { stroke: '#292e33', // Border outside of the displayed values on lines. Same color as the background. @@ -21,5 +18,4 @@ export const darkThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#32373bd9', // same displayed color as #6c6c6c20 but with 0.85 opacity }, - ...cssColors(DARK_THEME), }; diff --git a/src/styles/light-theme-css-vars.ts b/src/styles/light-theme-css-vars.ts index 4344967417..9b1468401e 100644 --- a/src/styles/light-theme-css-vars.ts +++ b/src/styles/light-theme-css-vars.ts @@ -5,9 +5,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { LIGHT_THEME } from '@gridsuite/commons-ui'; -import { cssColors } from 'utils/colors'; - export const lightThemeCssVars = { '.nad-edge-infos text': { stroke: 'white', // Border outside of the displayed values on lines. Same color as the background. @@ -24,5 +21,4 @@ export const lightThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#f0f0f0cc', // same displayed color as #9c9c9c20 but with 0.8 opacity }, - ...cssColors(LIGHT_THEME), }; diff --git a/src/utils/base-voltages-config.json b/src/utils/base-voltages-config.json deleted file mode 100644 index bfce4f4b31..0000000000 --- a/src/utils/base-voltages-config.json +++ /dev/null @@ -1,233 +0,0 @@ -[ - { - "name": "vl7", - "vlValue": 400, - "minValue": 300, - "maxValue": 500, - "label": "400 kV", - "profile": "Default", - "mapColor": "rgb(255, 0, 0)", - "lightThemeColors": { - "default": "rgb(255, 0, 0)", - "bus-1": "rgb(146, 10, 10)", - "bus-2": "rgb(255, 148, 148)", - "bus-3": "rgb(37, 105, 157)", - "bus-4": "rgb(0, 87, 249)", - "bus-5": "rgb(116, 175, 234)", - "bus-6": "rgb(27, 52, 89)", - "bus-7": "rgb(69, 139, 232)", - "bus-8": "rgb(40, 98, 174)", - "bus-9": "rgb(176, 212, 254)" - }, - "darkThemeColors": { - "default": "rgb(255, 0, 7)", - "bus-1": "rgb(221, 100, 132)", - "bus-2": "rgb(255, 188, 190)", - "bus-3": "rgb(37, 105, 157)", - "bus-4": "rgb(0, 87, 249)", - "bus-5": "rgb(116, 175, 234)", - "bus-6": "rgb(68, 103, 156)", - "bus-7": "rgb(69, 139, 232)", - "bus-8": "rgb(40, 98, 174)", - "bus-9": "rgb(176, 212, 254)" - } - }, - { - "name": "vl6", - "vlValue": 225, - "minValue": 200, - "maxValue": 300, - "label": "225 kV", - "profile": "Default", - "mapColor": "rgb(34, 139, 34)", - "lightThemeColors": { - "default": "rgb(50, 181, 50)", - "bus-1": "rgb(30, 93, 31)", - "bus-2": "rgb(167, 179, 104)", - "bus-3": "rgb(228, 116, 0)", - "bus-4": "rgb(107, 58, 38)", - "bus-5": "rgb(214, 154, 136)", - "bus-6": "rgb(126, 49, 9)", - "bus-7": "rgb(183, 139, 88)", - "bus-8": "rgb(201, 65, 25)", - "bus-9": "rgb(255, 192, 25)" - }, - "darkThemeColors": { - "default": "rgb(0, 255, 80)", - "bus-1": "rgb(66, 149, 75)", - "bus-2": "rgb(167, 178, 126)", - "bus-3": "rgb(245, 127, 23)", - "bus-4": "rgb(163, 113, 92)", - "bus-5": "rgb(219, 171, 157)", - "bus-6": "rgb(136, 82, 57)", - "bus-7": "rgb(179, 149, 114)", - "bus-8": "rgb(201, 65, 25)", - "bus-9": "rgb(234, 188, 69)" - } - }, - { - "name": "vl5", - "vlValue": 150, - "minValue": 100, - "maxValue": 200, - "label": "150 kV", - "profile": "Default", - "mapColor": "rgb(1, 175, 175)", - "lightThemeColors": { - "default": "rgb(0, 175, 174)", - "bus-1": "rgb(10, 99, 101)", - "bus-2": "rgb(121, 206, 212)", - "bus-3": "rgb(163, 14, 50)", - "bus-4": "rgb(255, 130, 144)", - "bus-5": "rgb(218, 168, 173)", - "bus-6": "rgb(195, 13, 51)", - "bus-7": "rgb(227, 190, 192)", - "bus-8": "rgb(255, 130, 144)", - "bus-9": "rgb(255, 204, 208)" - }, - "darkThemeColors": { - "default": "rgb(41, 175, 176)", - "bus-1": "rgb(51, 107, 111)", - "bus-2": "rgb(132, 198, 204)", - "bus-3": "rgb(186, 19, 60)", - "bus-4": "rgb(255, 130, 144)", - "bus-5": "rgb(218, 168, 173)", - "bus-6": "rgb(151, 53, 58)", - "bus-7": "rgb(234, 188, 189)", - "bus-8": "rgb(234, 46, 51)", - "bus-9": "rgb(234, 110, 114)" - } - }, - { - "name": "vl4", - "vlValue": 90, - "minValue": 70, - "maxValue": 100, - "label": "90 kV", - "profile": "Default", - "mapColor": "rgb(204, 85, 0)", - "lightThemeColors": { - "default": "rgb(255, 157, 0)", - "bus-1": "rgb(126, 49, 9)", - "bus-2": "rgb(204, 85, 0)", - "bus-3": "rgb(37, 105, 157)", - "bus-4": "rgb(0, 87, 249)", - "bus-5": "rgb(116, 175, 234)", - "bus-6": "rgb(27, 52, 89)", - "bus-7": "rgb(69, 139, 232)", - "bus-8": "rgb(40, 98, 174)", - "bus-9": "rgb(176, 212, 254)" - }, - "darkThemeColors": { - "default": "rgb(255, 97, 0)", - "bus-1": "rgb(178, 113, 83)", - "bus-2": "rgb(198, 166, 139)", - "bus-3": "rgb(37, 105, 157)", - "bus-4": "rgb(0, 87, 249)", - "bus-5": "rgb(116, 175, 234)", - "bus-6": "rgb(68, 103, 156)", - "bus-7": "rgb(69, 139, 232)", - "bus-8": "rgb(40, 98, 174)", - "bus-9": "rgb(176, 212, 254)" - } - }, - { - "name": "vl3", - "vlValue": 63, - "minValue": 69, - "maxValue": 70, - "label": "63 kV", - "profile": "Default", - "mapColor": "rgb(160, 32, 240)", - "lightThemeColors": { - "default": "rgb(160, 32, 240)", - "bus-1": "rgb(98, 24, 139)", - "bus-2": "rgb(172, 138, 194)", - "bus-3": "rgb(31, 118, 32)", - "bus-4": "rgb(197, 237, 59)", - "bus-5": "rgb(167, 179, 104)", - "bus-6": "rgb(85, 89, 27)", - "bus-7": "rgb(229, 232, 69)", - "bus-8": "rgb(171, 174, 40)", - "bus-9": "rgb(218, 217, 113)" - }, - "darkThemeColors": { - "default": "rgb(212, 125, 255)", - "bus-1": "rgb(194, 48, 210)", - "bus-2": "rgb(171, 148, 191)", - "bus-3": "rgb(31, 118, 32)", - "bus-4": "rgb(197, 237, 59)", - "bus-5": "rgb(167, 179, 104)", - "bus-6": "rgb(105, 112, 70)", - "bus-7": "rgb(225, 228, 68)", - "bus-8": "rgb(170, 174, 80)", - "bus-9": "rgb(212, 212, 134)" - } - }, - { - "name": "vl2", - "vlValue": 42, - "minValue": 40, - "maxValue": 69, - "label": "42 kV", - "profile": "Default", - "mapColor": "rgb(255, 130, 144)", - "lightThemeColors": { - "default": "rgb(255, 130, 144)", - "bus-1": "rgb(231, 23, 62)", - "bus-2": "rgb(218, 168, 173)", - "bus-3": "rgb(69, 156, 99)", - "bus-4": "rgb(0, 226, 102)", - "bus-5": "rgb(167, 179, 104)", - "bus-6": "rgb(26, 77, 27)", - "bus-7": "rgb(194, 203, 146)", - "bus-8": "rgb(33, 139, 33)", - "bus-9": "rgb(88, 208, 88)" - }, - "darkThemeColors": { - "default": "rgb(234, 142, 155)", - "bus-1": "rgb(164, 56, 87)", - "bus-2": "rgb(206, 170, 176)", - "bus-3": "rgb(69, 156, 99)", - "bus-4": "rgb(0, 226, 102)", - "bus-5": "rgb(167, 179, 104)", - "bus-6": "rgb(63, 115, 64)", - "bus-7": "rgb(194, 203, 146)", - "bus-8": "rgb(33, 139, 33)", - "bus-9": "rgb(88, 208, 88)" - } - }, - { - "name": "vl1", - "vlValue": 20, - "minValue": 0, - "maxValue": 40, - "label": "HTA", - "profile": "Default", - "mapColor": "rgb(171, 175, 40)", - "lightThemeColors": { - "default": "rgb(171, 174, 40)", - "bus-1": "rgb(105, 112, 27)", - "bus-2": "rgb(216, 210, 10)", - "bus-3": "rgb(161, 86, 170)", - "bus-4": "rgb(203, 61, 221)", - "bus-5": "rgb(166, 132, 188)", - "bus-6": "rgb(98, 24, 139)", - "bus-7": "rgb(136, 92, 168)", - "bus-8": "rgb(160, 32, 240)", - "bus-9": "rgb(204, 128, 255)" - }, - "darkThemeColors": { - "default": "rgb(204, 201, 58)", - "bus-1": "rgb(94, 131, 92)", - "bus-2": "rgb(177, 180, 108)", - "bus-3": "rgb(161, 86, 170)", - "bus-4": "rgb(203, 61, 221)", - "bus-5": "rgb(172, 138, 194)", - "bus-6": "rgb(115, 64, 151)", - "bus-7": "rgb(188, 173, 204)", - "bus-8": "rgb(162, 70, 224)", - "bus-9": "rgb(195, 140, 235)" - } - } -] \ No newline at end of file diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 83ba6b584c..22361764ce 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -5,12 +5,9 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { DARK_THEME, LIGHT_THEME } from '@gridsuite/commons-ui'; -import { - BASE_VOLTAGES, - getNominalVoltageIntervalByIntervalName, - getNominalVoltageIntervalByVoltageValue, -} from './constants'; +import { BaseVoltageConfig } from '@gridsuite/commons-ui'; + +export const MAX_VOLTAGE = 500; function parseRGB(stringRGB: string): number[] | undefined { return stringRGB @@ -19,42 +16,23 @@ function parseRGB(stringRGB: string): number[] | undefined { .map(Number); } -export const getColor = ( - intervalName: string, - busNumber: number, - theme: string = DARK_THEME // use theme -): string | undefined => { - const voltageInterval = getNominalVoltageIntervalByIntervalName(intervalName); - const bus = busNumber === 0 ? 'default' : 'bus-' + String(busNumber); - const color = - theme === LIGHT_THEME ? voltageInterval?.lightThemeColors[bus] : voltageInterval?.darkThemeColors[bus]; - return color; +export const getNominalVoltageIntervalByVoltageValue = ( + baseVoltages: BaseVoltageConfig[], + voltageValue: number +): BaseVoltageConfig | undefined => { + for (let interval of baseVoltages) { + if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { + return interval; + } + } }; -export const getNominalVoltageColor = (voltageValue: number): number[] | undefined => { - const color = getNominalVoltageIntervalByVoltageValue(voltageValue)?.mapColor; +export const getNominalVoltageColor = ( + baseVoltages: BaseVoltageConfig[], + voltageValue: number +): number[] | undefined => { + const color = getNominalVoltageIntervalByVoltageValue(baseVoltages, voltageValue)?.mapColor; return color ? parseRGB(color) : undefined; }; export const INVALID_LOADFLOW_OPACITY = 0.2; - -export const cssColors = (theme: string) => { - const css: Record = {}; - - for (const interval of BASE_VOLTAGES) { - const className = `.sld-${interval.name}, .nad-${interval.name}`; - - const themeColors = theme === DARK_THEME ? interval.darkThemeColors : interval.lightThemeColors; - css[className] = { '--vl-color': themeColors.default }; - - for (let i = 1; i <= 9; i++) { - const key = `bus-${i}`; - const color = themeColors[key]; - if (!color) continue; - - const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; - css[selector] = { '--vl-color': color }; - } - } - return css; -}; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 2167d2a182..5d892fe20f 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -12,34 +12,10 @@ export interface VoltageLevelInterval { minValue: number; maxValue: number; label: string; - mapColor: string; - darkThemeColors: ThemeColors; - lightThemeColors: ThemeColors; - profile: string; } export const MAX_VOLTAGE = 500; -export const getNominalVoltageIntervalByVoltageValue = (voltageValue: number): VoltageLevelInterval | undefined => { - for (let interval of BASE_VOLTAGES) { - if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { - return interval; - } - } -}; - -export const getNominalVoltageIntervalByIntervalName = (intervalName: string): VoltageLevelInterval | undefined => { - for (let interval of BASE_VOLTAGES) { - if (interval.name === intervalName) { - return interval; - } - } -}; - -export const getNominalVoltageIntervalNameByVoltageValue = (voltageValue: number): string | undefined => { - return getNominalVoltageIntervalByVoltageValue(voltageValue)?.name; -}; - export interface BaseVoltages { name: string; minValue: number; @@ -50,15 +26,3 @@ export interface BaseVoltagesConfigInfos { baseVoltages: BaseVoltages[]; defaultProfile: string; } - -export const getBaseVoltagesConfigInfos = (): BaseVoltagesConfigInfos => { - return { - baseVoltages: BASE_VOLTAGES.map((vl) => ({ - name: vl.name, - minValue: vl.minValue, - maxValue: vl.maxValue, - profile: 'Default', - })), - defaultProfile: 'Default', - }; -}; From bc4febabbb34c367640fb5df8f1684449baba4e7 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Sat, 8 Nov 2025 02:23:46 +0100 Subject: [PATCH 07/10] fix --- src/components/app-wrapper.jsx | 66 ++++++++++++++++++++++------------ src/redux/actions.ts | 2 +- src/redux/reducer.ts | 5 +-- src/services/utils.ts | 18 ++++++++-- src/utils/colors.ts | 7 ++-- 5 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx index df5718e0af..d402ae451c 100644 --- a/src/components/app-wrapper.jsx +++ b/src/components/app-wrapper.jsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useMemo, useEffect } from 'react'; +import { useMemo, useEffect, useCallback } from 'react'; import App from './app'; import { createTheme, @@ -453,39 +453,59 @@ const AppWrapperWithRedux = () => { const baseVoltagesConfig = useSelector((state) => state.baseVoltagesConfig); const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]); + console.log('computedLanguage : ' + computedLanguage); + + console.log('avant useEffect : ' + baseVoltagesConfig); + const dispatch = useDispatch(); useEffect(() => { - fetchBaseVoltagesConfig().then((appMetadataBaseVoltagesConfig) => - dispatch(setBaseVoltagesConfig(appMetadataBaseVoltagesConfig)) - ); + console.log('hello from useEffect'); + fetchBaseVoltagesConfig().then((appMetadataBaseVoltagesConfig) => { + dispatch(setBaseVoltagesConfig(appMetadataBaseVoltagesConfig)); + console.log('depuis appMetadata : ' + appMetadataBaseVoltagesConfig.length); + console.log('depuis appMetadata hehe : ' + appMetadataBaseVoltagesConfig[0]); + }); }, [dispatch]); - const getVoltageLevelsCssVars = (theme) => { - const css = {}; + console.log('après useEffect : ' + baseVoltagesConfig); + + const getVoltageLevelsCssVars = useCallback( + (theme) => { + if (!baseVoltagesConfig) return {}; + const css = {}; + console.log('depuis la fonction get css : ' + baseVoltagesConfig); - for (const interval of baseVoltagesConfig) { - const className = `.sld-${interval.name}, .nad-${interval.name}`; + for (const interval of baseVoltagesConfig) { + const className = `.sld-${interval.name}, .nad-${interval.name}`; - const themeColors = theme === LIGHT_THEME ? interval.lightThemeColors : interval.darkThemeColors; - css[className] = { '--vl-color': themeColors.default }; + const themeColors = theme === LIGHT_THEME ? interval.lightThemeColors : interval.darkThemeColors; + css[className] = { '--vl-color': themeColors.default }; - for (let i = 1; i <= 9; i++) { - const key = `bus-${i}`; - const color = themeColors[key]; - if (!color) continue; + for (let i = 1; i <= 9; i++) { + const key = `bus-${i}`; + const color = themeColors[key]; + if (!color) continue; - const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; - css[selector] = { '--vl-color': color }; + const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; + css[selector] = { '--vl-color': color }; + } } - } - return css; - }; + return css; + }, + [baseVoltagesConfig] + ); + console.log('voltageLevelsCssVars' + getVoltageLevelsCssVars(theme)); + + const rootCssVars = useMemo(() => { + if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) return {}; + return { + ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars), + ...getVoltageLevelsCssVars(theme), + }; + }, [baseVoltagesConfig, getVoltageLevelsCssVars, theme]); - const rootCssVars = [ - ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars), - ...getVoltageLevelsCssVars(theme), - ]; + console.log('rootCssVars' + rootCssVars); const urlMapper = useNotificationsUrlGenerator(); diff --git a/src/redux/actions.ts b/src/redux/actions.ts index f409d59681..a6aec03ce8 100644 --- a/src/redux/actions.ts +++ b/src/redux/actions.ts @@ -187,7 +187,7 @@ export type SetBaseVoltagesConfigAction = Readonly { builder.addCase(SET_BASE_VOLTAGES_CONFIG, (state, action: SetBaseVoltagesConfigAction) => { state.baseVoltagesConfig = action.baseVoltagesConfig; + console.log('dans reducer : ' + state.baseVoltagesConfig); }); builder.addCase(ATTEMPT_LEAVE_PARAMETERS_TAB, (state, action: AttemptLeaveParametersTabAction) => { @@ -1347,6 +1347,7 @@ export const reducer = createReducer(initialState, (builder) => { builder.addCase(SELECT_COMPUTED_LANGUAGE, (state, action: SelectComputedLanguageAction) => { state.computedLanguage = action.computedLanguage; + console.log('reducer computedLanguage'); }); builder.addCase(SET_PARAMS_LOADED, (state, action: SetParamsLoadedAction) => { diff --git a/src/services/utils.ts b/src/services/utils.ts index 697fb73b83..bd2a31e42b 100644 --- a/src/services/utils.ts +++ b/src/services/utils.ts @@ -83,10 +83,22 @@ export const fetchDefaultParametersValues = () => { }); }; -export async function fetchBaseVoltagesConfig(): Promise { +export async function fetchBaseVoltagesConfig(): Promise { console.info('fetching base voltages configuration from apps-metadata file'); - const studyMetadata = await fetchStudyMetadata(); - return studyMetadata.baseVoltagesCongig; + console.log('la fonction fetch est bien appelée !'); + const emptyConfig: BaseVoltageConfig[] = []; + return fetchStudyMetadata() + .then((studyMetadata) => { + console.log('le fetch a bien récupéré des objets : ' + studyMetadata?.baseVoltagesConfig?.length); + return studyMetadata?.baseVoltagesConfig ?? emptyConfig; + }) + .catch((error: unknown) => { + console.log('erreur lors du fetch'); + 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) => { diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 22361764ce..8f4bf102f5 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -27,12 +27,9 @@ export const getNominalVoltageIntervalByVoltageValue = ( } }; -export const getNominalVoltageColor = ( - baseVoltages: BaseVoltageConfig[], - voltageValue: number -): number[] | undefined => { +export const getNominalVoltageColor = (baseVoltages: BaseVoltageConfig[], voltageValue: number): number[] => { const color = getNominalVoltageIntervalByVoltageValue(baseVoltages, voltageValue)?.mapColor; - return color ? parseRGB(color) : undefined; + return (color ? parseRGB(color) : [0, 0, 0]) ?? [0, 0, 0]; }; export const INVALID_LOADFLOW_OPACITY = 0.2; From b99c1a184ae9302924e7d0cbc44c567052ebd5d6 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Sat, 8 Nov 2025 02:29:57 +0100 Subject: [PATCH 08/10] remove logs --- src/components/app-wrapper.jsx | 13 ------------- src/redux/reducer.ts | 2 -- src/services/utils.ts | 3 --- 3 files changed, 18 deletions(-) diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx index d402ae451c..4dd2b40b17 100644 --- a/src/components/app-wrapper.jsx +++ b/src/components/app-wrapper.jsx @@ -453,28 +453,18 @@ const AppWrapperWithRedux = () => { const baseVoltagesConfig = useSelector((state) => state.baseVoltagesConfig); const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]); - console.log('computedLanguage : ' + computedLanguage); - - console.log('avant useEffect : ' + baseVoltagesConfig); - const dispatch = useDispatch(); useEffect(() => { - console.log('hello from useEffect'); fetchBaseVoltagesConfig().then((appMetadataBaseVoltagesConfig) => { dispatch(setBaseVoltagesConfig(appMetadataBaseVoltagesConfig)); - console.log('depuis appMetadata : ' + appMetadataBaseVoltagesConfig.length); - console.log('depuis appMetadata hehe : ' + appMetadataBaseVoltagesConfig[0]); }); }, [dispatch]); - console.log('après useEffect : ' + baseVoltagesConfig); - const getVoltageLevelsCssVars = useCallback( (theme) => { if (!baseVoltagesConfig) return {}; const css = {}; - console.log('depuis la fonction get css : ' + baseVoltagesConfig); for (const interval of baseVoltagesConfig) { const className = `.sld-${interval.name}, .nad-${interval.name}`; @@ -495,7 +485,6 @@ const AppWrapperWithRedux = () => { }, [baseVoltagesConfig] ); - console.log('voltageLevelsCssVars' + getVoltageLevelsCssVars(theme)); const rootCssVars = useMemo(() => { if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) return {}; @@ -505,8 +494,6 @@ const AppWrapperWithRedux = () => { }; }, [baseVoltagesConfig, getVoltageLevelsCssVars, theme]); - console.log('rootCssVars' + rootCssVars); - const urlMapper = useNotificationsUrlGenerator(); return ( diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts index c688b5cbd0..5075b9d313 100644 --- a/src/redux/reducer.ts +++ b/src/redux/reducer.ts @@ -1006,7 +1006,6 @@ export const reducer = createReducer(initialState, (builder) => { builder.addCase(SET_BASE_VOLTAGES_CONFIG, (state, action: SetBaseVoltagesConfigAction) => { state.baseVoltagesConfig = action.baseVoltagesConfig; - console.log('dans reducer : ' + state.baseVoltagesConfig); }); builder.addCase(ATTEMPT_LEAVE_PARAMETERS_TAB, (state, action: AttemptLeaveParametersTabAction) => { @@ -1347,7 +1346,6 @@ export const reducer = createReducer(initialState, (builder) => { builder.addCase(SELECT_COMPUTED_LANGUAGE, (state, action: SelectComputedLanguageAction) => { state.computedLanguage = action.computedLanguage; - console.log('reducer computedLanguage'); }); builder.addCase(SET_PARAMS_LOADED, (state, action: SetParamsLoadedAction) => { diff --git a/src/services/utils.ts b/src/services/utils.ts index bd2a31e42b..8ac38f41b3 100644 --- a/src/services/utils.ts +++ b/src/services/utils.ts @@ -85,15 +85,12 @@ export const fetchDefaultParametersValues = () => { export async function fetchBaseVoltagesConfig(): Promise { console.info('fetching base voltages configuration from apps-metadata file'); - console.log('la fonction fetch est bien appelée !'); const emptyConfig: BaseVoltageConfig[] = []; return fetchStudyMetadata() .then((studyMetadata) => { - console.log('le fetch a bien récupéré des objets : ' + studyMetadata?.baseVoltagesConfig?.length); return studyMetadata?.baseVoltagesConfig ?? emptyConfig; }) .catch((error: unknown) => { - console.log('erreur lors du fetch'); catchErrorHandler(error, (message) => { console.error(`fetching error (${message}), then empty config will be used.`); }); From 2fcdf3ec29b64b300185b84a70c12a33d7a71b33 Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Wed, 12 Nov 2025 10:32:05 +0100 Subject: [PATCH 09/10] add property --- src/components/app-wrapper.jsx | 32 ++++---------------------------- src/utils/colors.ts | 29 ++++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx index 4dd2b40b17..ab3491377d 100644 --- a/src/components/app-wrapper.jsx +++ b/src/components/app-wrapper.jsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useMemo, useEffect, useCallback } from 'react'; +import { useMemo, useEffect } from 'react'; import App from './app'; import { createTheme, @@ -102,6 +102,7 @@ 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'; @@ -461,38 +462,13 @@ const AppWrapperWithRedux = () => { }); }, [dispatch]); - const getVoltageLevelsCssVars = useCallback( - (theme) => { - if (!baseVoltagesConfig) return {}; - const css = {}; - - for (const interval of baseVoltagesConfig) { - const className = `.sld-${interval.name}, .nad-${interval.name}`; - - const themeColors = theme === LIGHT_THEME ? interval.lightThemeColors : interval.darkThemeColors; - css[className] = { '--vl-color': themeColors.default }; - - for (let i = 1; i <= 9; i++) { - const key = `bus-${i}`; - const color = themeColors[key]; - if (!color) continue; - - const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; - css[selector] = { '--vl-color': color }; - } - } - return css; - }, - [baseVoltagesConfig] - ); - const rootCssVars = useMemo(() => { if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) return {}; return { ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars), - ...getVoltageLevelsCssVars(theme), + ...getVoltageLevelsCssVars(baseVoltagesConfig.current, theme), }; - }, [baseVoltagesConfig, getVoltageLevelsCssVars, theme]); + }, [baseVoltagesConfig, theme]); const urlMapper = useNotificationsUrlGenerator(); diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 8f4bf102f5..0092130286 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { BaseVoltageConfig } from '@gridsuite/commons-ui'; +import { BaseVoltageConfig, LIGHT_THEME } from '@gridsuite/commons-ui'; export const MAX_VOLTAGE = 500; @@ -32,4 +32,31 @@ export const getNominalVoltageColor = (baseVoltages: BaseVoltageConfig[], voltag return (color ? parseRGB(color) : [0, 0, 0]) ?? [0, 0, 0]; }; +export const getVoltageLevelsCssVars = ( + baseVoltages: BaseVoltageConfig[], + theme: string +): Record> => { + const css: Record> = {}; + + for (const interval of baseVoltages) { + const className = `.sld-${interval.name}, .nad-${interval.name}`; + + const themeColors = + theme === LIGHT_THEME + ? interval.sldAndNadColors.lightThemeColors + : interval.sldAndNadColors.darkThemeColors; + css[className] = { '--vl-color': themeColors.default }; + + for (let i = 1; i <= 9; i++) { + const key = `bus-${i}`; + const color = themeColors[key]; + if (!color) continue; + + const selector = `.sld-${interval.name}.sld-${key}, .nad-${interval.name}.nad-${key}`; + css[selector] = { '--vl-color': color }; + } + } + return css; +}; + export const INVALID_LOADFLOW_OPACITY = 0.2; From c6b20750753f5b6ccd3bc76b23f71927103b6e5b Mon Sep 17 00:00:00 2001 From: Caroline Jeandat Date: Wed, 12 Nov 2025 14:54:23 +0100 Subject: [PATCH 10/10] clean --- src/components/app-wrapper.jsx | 9 ++- .../grid-layout/hooks/use-diagram-model.ts | 24 ++++++-- .../network/nominal-voltage-filter.tsx | 61 +++++++++---------- src/utils/constants.ts | 20 ------ 4 files changed, 54 insertions(+), 60 deletions(-) diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx index ab3491377d..79b5f0419a 100644 --- a/src/components/app-wrapper.jsx +++ b/src/components/app-wrapper.jsx @@ -463,10 +463,13 @@ const AppWrapperWithRedux = () => { }, [dispatch]); const rootCssVars = useMemo(() => { - if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) return {}; + const themeVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars; + if (!baseVoltagesConfig || baseVoltagesConfig.length === 0) { + return themeVars; + } return { - ...(theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars), - ...getVoltageLevelsCssVars(baseVoltagesConfig.current, theme), + ...themeVars, + ...getVoltageLevelsCssVars(baseVoltagesConfig, theme), }; }, [baseVoltagesConfig, theme]); diff --git a/src/components/grid-layout/hooks/use-diagram-model.ts b/src/components/grid-layout/hooks/use-diagram-model.ts index 965849d6d2..5df8f1e452 100644 --- a/src/components/grid-layout/hooks/use-diagram-model.ts +++ b/src/components/grid-layout/hooks/use-diagram-model.ts @@ -32,7 +32,17 @@ 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'; + +interface BaseVoltages { + name: string; + minValue: number; + maxValue: number; + profile: string; +} +interface BaseVoltagesConfigInfos { + baseVoltages: BaseVoltages[]; + defaultProfile: string; +} type UseDiagramModelProps = { diagramTypes: DiagramType[]; @@ -57,8 +67,6 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx 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([]); - baseVoltagesConfigRef.current = baseVoltagesConfig ?? []; const getDiagramTitle = useDiagramTitle(); const [diagrams, setDiagrams] = useState>({}); @@ -290,9 +298,12 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx }); }, []); - const getBaseVoltagesConfigInfos = (): BaseVoltagesConfigInfos => { + const getBaseVoltagesConfigInfos = useCallback((): BaseVoltagesConfigInfos | undefined => { + if (!baseVoltagesConfig) { + return; + } return { - baseVoltages: baseVoltagesConfigRef.current.map((vl: BaseVoltageConfig) => ({ + baseVoltages: baseVoltagesConfig.map((vl: BaseVoltageConfig) => ({ name: vl.name, minValue: vl.minValue, maxValue: vl.maxValue, @@ -300,7 +311,7 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx })), defaultProfile: 'Default', }; - }; + }, [baseVoltagesConfig]); const fetchDiagramSvg = useCallback( (diagram: Diagram) => { @@ -362,6 +373,7 @@ export const useDiagramModel = ({ diagramTypes, onAddDiagram, onDiagramAlreadyEx [ getUrl, networkVisuParams.networkAreaDiagramParameters.nadPositionsGenerationMode, + getBaseVoltagesConfigInfos, handleFetchSuccess, handleFetchError, handleFetchFinally, diff --git a/src/components/network/nominal-voltage-filter.tsx b/src/components/network/nominal-voltage-filter.tsx index 7155af6c04..a4e88e2ac1 100644 --- a/src/components/network/nominal-voltage-filter.tsx +++ b/src/components/network/nominal-voltage-filter.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +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'; @@ -41,15 +41,8 @@ const styles = { }, } as const satisfies MuiStyles; -export type NominalVoltageFilterProps = { - nominalVoltages: number[]; - filteredNominalVoltages: number[]; - onChange: (filteredNominalVoltages: number[]) => void; -}; - -export interface VoltageLevelInterval { +interface VoltageLevelInterval { name: string; - vlValue: number; minValue: number; maxValue: number; label: string; @@ -59,44 +52,50 @@ type VoltageLevelValuesInterval = VoltageLevelInterval & { isChecked: boolean; }; +export type NominalVoltageFilterProps = { + nominalVoltages: number[]; + filteredNominalVoltages: number[]; + onChange: (filteredNominalVoltages: number[]) => void; +}; + export default function NominalVoltageFilter({ nominalVoltages, filteredNominalVoltages, onChange, }: Readonly) { - const baseVoltagesConfig = useSelector((state: AppState) => state.baseVoltagesConfig); - const baseVoltageIntervals = - baseVoltagesConfig?.map(({ name, vlValue, minValue, maxValue, label }) => ({ - name, - vlValue, - minValue, - maxValue, - label, - })) ?? []; - const baseVoltageIntervalsRef = useRef([]); - baseVoltageIntervalsRef.current = baseVoltageIntervals; - + const baseVoltagesConfigIntervals = useSelector( + (state: AppState) => + state.baseVoltagesConfig?.map(({ name, minValue, maxValue, label }) => ({ + name, + minValue, + maxValue, + label, + })) ?? [] + ); const [voltageLevelIntervals, setVoltageLevelIntervals] = useState( - baseVoltageIntervalsRef.current.map((interval) => ({ ...interval, vlListValues: [], isChecked: true })) + baseVoltagesConfigIntervals.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; + const getNominalVoltageIntervalName = useCallback( + (voltageValue: number) => { + for (let interval of baseVoltagesConfigIntervals) { + if (voltageValue >= interval.minValue && voltageValue < interval.maxValue) { + return interval.name; + } } - } - }; + }, + [baseVoltagesConfigIntervals] + ); useEffect(() => { - const newIntervals = baseVoltageIntervalsRef.current.map((interval) => { + const newIntervals = baseVoltagesConfigIntervals.map((interval) => { const vlListValues = nominalVoltages.filter( - (vnom) => getNominalVoltageIntervalNameByVoltageValue(vnom) === interval.name + (vnom) => getNominalVoltageIntervalName(vnom) === interval.name ); return { ...interval, vlListValues, isChecked: true }; }); setVoltageLevelIntervals(newIntervals); - }, [nominalVoltages]); + }, [baseVoltagesConfigIntervals, getNominalVoltageIntervalName, nominalVoltages]); const handleToggle = useCallback( (interval: VoltageLevelValuesInterval) => { diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 5d892fe20f..5f7d747ad5 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -5,24 +5,4 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -type ThemeColors = Record; -export interface VoltageLevelInterval { - name: string; - vlValue: number; - minValue: number; - maxValue: number; - label: string; -} - export const MAX_VOLTAGE = 500; - -export interface BaseVoltages { - name: string; - minValue: number; - maxValue: number; - profile: string; -} -export interface BaseVoltagesConfigInfos { - baseVoltages: BaseVoltages[]; - defaultProfile: string; -}