From d3286298ae0d85ef0f90038d4caef05c5c839fb4 Mon Sep 17 00:00:00 2001 From: "SOUISSI Maissa (Externe)" Date: Wed, 4 Mar 2026 09:18:02 +0100 Subject: [PATCH 1/6] add nad edge infos and adjust css Signed-off-by: SOUISSI Maissa (Externe) --- .../cards/diagrams/diagram-styles.ts | 5 +- .../cards/diagrams/diagram-utils.ts | 2 +- .../network-area-diagram-content.tsx | 2 +- src/nad-index.css | 78 +++++++++++++++---- src/styles/dark-theme-css-vars.ts | 21 +++++ src/styles/light-theme-css-vars.ts | 22 ++++++ src/utils/colors.ts | 2 +- 7 files changed, 110 insertions(+), 22 deletions(-) diff --git a/src/components/grid-layout/cards/diagrams/diagram-styles.ts b/src/components/grid-layout/cards/diagrams/diagram-styles.ts index b4d923ddef..b4f6e0ae0b 100644 --- a/src/components/grid-layout/cards/diagrams/diagram-styles.ts +++ b/src/components/grid-layout/cards/diagrams/diagram-styles.ts @@ -124,16 +124,13 @@ export const styles = { }, }, divDiagramLoadflowInvalid: { - '& .sld-active-power, & .sld-reactive-power, & .sld-current-value, & .sld-permanent-limit-percentage, & .sld-voltage, & .sld-angle, & .sld-consumption-sum, & .sld-production-sum, & .sld-balance': + '& .sld-active-power, & .sld-reactive-power, & .sld-current-value, & .sld-permanent-limit-percentage, & .sld-voltage, & .sld-angle, & .sld-consumption-sum, & .sld-production-sum, & .sld-balance , .nad-reactive, & text.nad-permanent-limit-percentage, & path.nad-permanent-limit-percentage, & .nad-active': { opacity: INVALID_COMPUTATION_OPACITY, }, '& .sld-overload, & .sld-vl-overvoltage, & .sld-vl-undervoltage': { animation: 'none !important', }, - '& .nad-active': { - fill: '#787F81', // Text color of the values and arrows on lines (same color in light and dark mode) - }, '& .nad-bus-descr': { color: '#787F81', }, diff --git a/src/components/grid-layout/cards/diagrams/diagram-utils.ts b/src/components/grid-layout/cards/diagrams/diagram-utils.ts index 4278155c72..9286ee2416 100644 --- a/src/components/grid-layout/cards/diagrams/diagram-utils.ts +++ b/src/components/grid-layout/cards/diagrams/diagram-utils.ts @@ -22,7 +22,7 @@ export const MAX_HEIGHT_NETWORK_AREA_DIAGRAM = Infinity; // Array of zoom levels used to determine level-of-detail rendering by applying in the network-viewer the // corresponding css class 'nad-zoom-{level}' to the NAD's SVG. -export const NAD_ZOOM_LEVELS = [0, 2000, 3500, 6000, 9000, 12000, 15000]; +export const NAD_ZOOM_LEVELS = [0, 500, 1000, 2000, 3500, 5000, 6000, 9000, 12000, 15000]; // be careful when using this method because there are treatments made on purpose export function getEquipmentTypeFromFeederType(feederType: FeederTypes | null): { diff --git a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx index f07bf67691..fc0b21b967 100644 --- a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx +++ b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx @@ -474,7 +474,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props: onRightClickCallback: showEquipmentMenu, initialViewBox: nadViewBox[nadPanelId] ?? diagramViewerRef?.current?.getViewBox(), enableAdaptiveTextZoom: true, - adaptiveTextZoomThreshold: 3500, + adaptiveTextZoomThreshold: 9000, }; const diagramViewer = new NetworkAreaDiagramViewer( svgRef.current, diff --git a/src/nad-index.css b/src/nad-index.css index d432b06b77..ae5d56805b 100644 --- a/src/nad-index.css +++ b/src/nad-index.css @@ -36,7 +36,7 @@ fill: #787F81; } .nad-reactive { - fill: #0277bd; + fill: blue; } .nad-current { fill: #bd4802; @@ -70,13 +70,6 @@ foreignObject.nad-text-nodes { .nad-edge-infos { cursor: default; } -.nad-edge-infos text { - font: 20px sans-serif; - dominant-baseline: middle; - stroke-width: 10; - stroke-linejoin: round; - paint-order: stroke; -} g.nad-disconnected > .nad-disconnected.nad-edge-path { /* When both edges of a line are disconnected in a NAD, both of them and their parent have the .nad-disconnected class */ @@ -156,7 +149,42 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { } /* NETWORK AREA DIAGRAM LEVEL OF DETAIL */ +.nad-edge-infos .nad-active, +.nad-edge-infos .nad-reactive, +.nad-edge-infos .nad-permanent-limit-percentage { + display:none; +} +/* zoom 3500 → active + permanent */ +.nad-zoom-5000 .nad-active, +.nad-zoom-5000 .nad-permanent-limit-percentage { + display: inline; +} +/* zoom 3500 → active + permanent */ +.nad-zoom-3500 .nad-active, +.nad-zoom-3500 .nad-permanent-limit-percentage { + display: inline; +} +/* zoom 2000 → active + permanent */ +.nad-zoom-2000 .nad-active, +.nad-zoom-2000 .nad-permanent-limit-percentage { + display: inline; +} +/* zoom 1000 → active + permanent */ +.nad-zoom-1000 .nad-active, +.nad-zoom-1000 .nad-permanent-limit-percentage { + display: inline; +} +/* zoom 500 → + reactive */ +.nad-zoom-500 .nad-active, +.nad-zoom-500 .nad-reactive, +.nad-zoom-500 .nad-permanent-limit-percentage { + display:inline; +} +/* zoom 0 → show all */ +.nad-zoom-0 .nad-edge-infos * { + display:inline; +} /* Makes the nodes' edges thicker when zooming a lot */ .nad-zoom-0 { :is( @@ -233,13 +261,7 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { } } -/* Hides the data on the lines until sufficiently zoomed in. */ -:is(.nad-zoom-2000, .nad-zoom-3500, .nad-zoom-6000, .nad-zoom-9000, .nad-zoom-12000, .nad-zoom-15000) :is( - .nad-edge-infos - ) { - display: none; -} - + /* Hides the voltage levels 0 to 50 when zoomed out. */ :is(.nad-zoom-6000, .nad-zoom-9000, .nad-zoom-12000, .nad-zoom-15000) :is( .nad-voltage-level-1, .nad-voltage-level-2 @@ -271,3 +293,29 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { :is(.nad-zoom-2000) .nad-textnode-highlight { transform: scale(1.3); } + + +/* Make nad-edge-infos text more readable zoom level */ +/* Default text settings */ +.nad-edge-infos text { + font-family: sans-serif; + dominant-baseline: middle; + stroke-linejoin: round; + paint-order: stroke; + /* Initial font size and stroke-width */ + font-size: 20px; + stroke-width: 5px; + /* Smooth transition for size and stroke */ + transition: font-size 0.2s ease, stroke-width 0.2s ease; +} + +.nad-zoom-0 .nad-edge-infos text { font-size: 20px; stroke-width: 5px; } +.nad-zoom-500 .nad-edge-infos text { font-size: 20px; stroke-width: 5px; } +.nad-zoom-1000 .nad-edge-infos text { font-size: 30px; stroke-width: 5.5px; } +.nad-zoom-1500 .nad-edge-infos text { font-size: 35px; stroke-width: 6px; } +.nad-zoom-2000 .nad-edge-infos text { font-size: 40px; stroke-width: 7px; } +.nad-zoom-2500 .nad-edge-infos text { font-size: 45px; stroke-width: 7.5px; } +.nad-zoom-3000 .nad-edge-infos text { font-size: 50px; stroke-width: 8px; } +.nad-zoom-3500 .nad-edge-infos text { font-size: 60px; stroke-width: 9px; } +.nad-zoom-4000 .nad-edge-infos text { font-size: 65px; stroke-width: 9.5px; } +.nad-zoom-5000 .nad-edge-infos text { font-size: 70px; stroke-width: 10px; } \ No newline at end of file diff --git a/src/styles/dark-theme-css-vars.ts b/src/styles/dark-theme-css-vars.ts index ae760fd492..dbf3727048 100644 --- a/src/styles/dark-theme-css-vars.ts +++ b/src/styles/dark-theme-css-vars.ts @@ -18,4 +18,25 @@ export const darkThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#32373bd9', // same displayed color as #6c6c6c20 but with 0.85 opacity }, + '.nad-arrow-out, .nad-arrow-in': { + fill: 'white', + }, + '& .nad-reactive.nad-arrow-out, & .nad-reactive.nad-arrow-in': { + fill: '#77b5fe', + }, + '& .nad-reactive': { + fill: '#77b5fe', + }, + 'text.nad-reactive': { + fill: '#77b5fe', + }, + + '.nad-active, .nad-permanent-limit-percentage, .nad-bus-descr,': { + fill: 'white', + }, + + '.nad-edge-infos path.nad-reactive, .nad-reactive path': { + fill: '#77b5fe', + stroke: '#77b5fe', + }, }; diff --git a/src/styles/light-theme-css-vars.ts b/src/styles/light-theme-css-vars.ts index 9b1468401e..f658ed5600 100644 --- a/src/styles/light-theme-css-vars.ts +++ b/src/styles/light-theme-css-vars.ts @@ -21,4 +21,26 @@ export const lightThemeCssVars = { '.nad-textnode-highlight': { backgroundColor: '#f0f0f0cc', // same displayed color as #9c9c9c20 but with 0.8 opacity }, + '.nad-arrow-out, .nad-arrow-in': { + fill: 'black', + }, + '& .nad-reactive': { + fill: 'blue', + }, + '& .nad-reactive.nad-arrow-out, & .nad-reactive.nad-arrow-in': { + fill: 'blue', + }, + + 'text.nad-reactive': { + fill: 'blue', + }, + + '.nad-active, .nad-permanent-limit-percentage, .nad-bus-descr': { + fill: 'black', + }, + + '.nad-edge-infos path.nad-reactive, .nad-reactive path': { + fill: 'blue', + stroke: 'blue', + }, }; diff --git a/src/utils/colors.ts b/src/utils/colors.ts index d541a45fe4..4b5e010245 100644 --- a/src/utils/colors.ts +++ b/src/utils/colors.ts @@ -7,7 +7,7 @@ import { BaseVoltage, LIGHT_THEME } from '@gridsuite/commons-ui'; -export const INVALID_COMPUTATION_OPACITY = 0.2; +export const INVALID_COMPUTATION_OPACITY = 0.5; function parseRGB(stringRGB: string): number[] | undefined { const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/; From 50b772637f5a2a251b6a897d3e9b866a042b3215 Mon Sep 17 00:00:00 2001 From: Sylvain Bouzols Date: Fri, 13 Mar 2026 15:58:52 +0100 Subject: [PATCH 2/6] Apply suggestion from @sBouzols --- src/nad-index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nad-index.css b/src/nad-index.css index ae5d56805b..c093dd445e 100644 --- a/src/nad-index.css +++ b/src/nad-index.css @@ -154,7 +154,7 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { .nad-edge-infos .nad-permanent-limit-percentage { display:none; } -/* zoom 3500 → active + permanent */ +/* zoom 5000 → active + permanent */ .nad-zoom-5000 .nad-active, .nad-zoom-5000 .nad-permanent-limit-percentage { display: inline; From c58668aaad1da3f7d0016ba89f6c0c2ff9068f04 Mon Sep 17 00:00:00 2001 From: "SOUISSI Maissa (Externe)" Date: Fri, 13 Mar 2026 16:44:39 +0100 Subject: [PATCH 3/6] fixes Signed-off-by: SOUISSI Maissa (Externe) --- .../network-area-diagram-content.tsx | 2 +- src/nad-index.css | 39 +++---------------- 2 files changed, 7 insertions(+), 34 deletions(-) diff --git a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx index 7750ff4dfd..f721edff26 100644 --- a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx +++ b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx @@ -474,7 +474,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props: onRightClickCallback: showEquipmentMenu, initialViewBox: nadViewBox[nadPanelId] ?? diagramViewerRef?.current?.getViewBox(), enableAdaptiveTextZoom: true, - adaptiveTextZoomThreshold: 9000, + adaptiveTextZoomThreshold: 6000, }; const diagramViewer = new NetworkAreaDiagramViewer( svgRef.current, diff --git a/src/nad-index.css b/src/nad-index.css index c093dd445e..ad666d743b 100644 --- a/src/nad-index.css +++ b/src/nad-index.css @@ -154,37 +154,14 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { .nad-edge-infos .nad-permanent-limit-percentage { display:none; } -/* zoom 5000 → active + permanent */ -.nad-zoom-5000 .nad-active, -.nad-zoom-5000 .nad-permanent-limit-percentage { - display: inline; -} -/* zoom 3500 → active + permanent */ -.nad-zoom-3500 .nad-active, -.nad-zoom-3500 .nad-permanent-limit-percentage { - display: inline; -} -/* zoom 2000 → active + permanent */ -.nad-zoom-2000 .nad-active, -.nad-zoom-2000 .nad-permanent-limit-percentage { - display: inline; -} -/* zoom 1000 → active + permanent */ -.nad-zoom-1000 .nad-active, -.nad-zoom-1000 .nad-permanent-limit-percentage { - display: inline; -} -/* zoom 500 → + reactive */ -.nad-zoom-500 .nad-active, -.nad-zoom-500 .nad-reactive, -.nad-zoom-500 .nad-permanent-limit-percentage { - display:inline; -} -/* zoom 0 → show all */ -.nad-zoom-0 .nad-edge-infos * { - display:inline; +:is(.nad-zoom-5000, .nad-zoom-3500, .nad-zoom-2000, .nad-zoom-1000, .nad-zoom-500, .nad-zoom-0) :is(.nad-active, .nad-permanent-limit-percentage) { + display: inline; +} +:is(.nad-zoom-500, .nad-zoom-0) :is(.nad-reactive) { + display: inline; } + /* Makes the nodes' edges thicker when zooming a lot */ .nad-zoom-0 { :is( @@ -312,10 +289,6 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { .nad-zoom-0 .nad-edge-infos text { font-size: 20px; stroke-width: 5px; } .nad-zoom-500 .nad-edge-infos text { font-size: 20px; stroke-width: 5px; } .nad-zoom-1000 .nad-edge-infos text { font-size: 30px; stroke-width: 5.5px; } -.nad-zoom-1500 .nad-edge-infos text { font-size: 35px; stroke-width: 6px; } .nad-zoom-2000 .nad-edge-infos text { font-size: 40px; stroke-width: 7px; } -.nad-zoom-2500 .nad-edge-infos text { font-size: 45px; stroke-width: 7.5px; } -.nad-zoom-3000 .nad-edge-infos text { font-size: 50px; stroke-width: 8px; } .nad-zoom-3500 .nad-edge-infos text { font-size: 60px; stroke-width: 9px; } -.nad-zoom-4000 .nad-edge-infos text { font-size: 65px; stroke-width: 9.5px; } .nad-zoom-5000 .nad-edge-infos text { font-size: 70px; stroke-width: 10px; } \ No newline at end of file From 67963df821e031a40ef8557c6d129a4d0c755c39 Mon Sep 17 00:00:00 2001 From: "SOUISSI Maissa (Externe)" Date: Mon, 16 Mar 2026 12:44:30 +0100 Subject: [PATCH 4/6] adjust css arrow Signed-off-by: SOUISSI Maissa (Externe) --- src/nad-index.css | 11 ++++++++++- src/styles/dark-theme-css-vars.ts | 4 ++++ src/styles/light-theme-css-vars.ts | 5 +++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/nad-index.css b/src/nad-index.css index ad666d743b..7f2f10c134 100644 --- a/src/nad-index.css +++ b/src/nad-index.css @@ -291,4 +291,13 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { .nad-zoom-1000 .nad-edge-infos text { font-size: 30px; stroke-width: 5.5px; } .nad-zoom-2000 .nad-edge-infos text { font-size: 40px; stroke-width: 7px; } .nad-zoom-3500 .nad-edge-infos text { font-size: 60px; stroke-width: 9px; } -.nad-zoom-5000 .nad-edge-infos text { font-size: 70px; stroke-width: 10px; } \ No newline at end of file +.nad-zoom-5000 .nad-edge-infos text { font-size: 70px; stroke-width: 10px; } + +/* Make arrows scale with zoom */ + .nad-zoom-5000 .nad-edge-infos path { + stroke-width: 12px; +} +:is(.nad-zoom-2000, .nad-zoom-3500) .nad-edge-infos path { + stroke-width: 10px; +} + \ No newline at end of file diff --git a/src/styles/dark-theme-css-vars.ts b/src/styles/dark-theme-css-vars.ts index dbf3727048..15aaaf07b0 100644 --- a/src/styles/dark-theme-css-vars.ts +++ b/src/styles/dark-theme-css-vars.ts @@ -39,4 +39,8 @@ export const darkThemeCssVars = { fill: '#77b5fe', stroke: '#77b5fe', }, + '.nad-edge-infos path.nad-permanent-limit-percentage, .nad-permanent-limit-percentage path': { + fill: 'white', + stroke: 'white', + }, }; diff --git a/src/styles/light-theme-css-vars.ts b/src/styles/light-theme-css-vars.ts index f658ed5600..7d3afc780f 100644 --- a/src/styles/light-theme-css-vars.ts +++ b/src/styles/light-theme-css-vars.ts @@ -43,4 +43,9 @@ export const lightThemeCssVars = { fill: 'blue', stroke: 'blue', }, + + '.nad-edge-infos path.nad-permanent-limit-percentage, .nad-permanent-limit-percentage path': { + fill: 'black', + stroke: 'black', + }, }; From 9609db81b4101d9a1c355352db5d90c0d57bc714 Mon Sep 17 00:00:00 2001 From: "SOUISSI Maissa (Externe)" Date: Mon, 16 Mar 2026 12:45:22 +0100 Subject: [PATCH 5/6] fix Signed-off-by: SOUISSI Maissa (Externe) --- src/nad-index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nad-index.css b/src/nad-index.css index 7f2f10c134..9198e8fe13 100644 --- a/src/nad-index.css +++ b/src/nad-index.css @@ -294,7 +294,7 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path { .nad-zoom-5000 .nad-edge-infos text { font-size: 70px; stroke-width: 10px; } /* Make arrows scale with zoom */ - .nad-zoom-5000 .nad-edge-infos path { +.nad-zoom-5000 .nad-edge-infos path { stroke-width: 12px; } :is(.nad-zoom-2000, .nad-zoom-3500) .nad-edge-infos path { From 50ddbfc6fd3d22a2436f452fd40ab6c4a5e070d1 Mon Sep 17 00:00:00 2001 From: sBouzols Date: Tue, 24 Mar 2026 15:54:05 +0100 Subject: [PATCH 6/6] fixes Signed-off-by: sBouzols --- src/components/grid-layout/cards/diagrams/diagram-styles.ts | 2 +- src/styles/dark-theme-css-vars.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/grid-layout/cards/diagrams/diagram-styles.ts b/src/components/grid-layout/cards/diagrams/diagram-styles.ts index b4f6e0ae0b..ceb3dd432c 100644 --- a/src/components/grid-layout/cards/diagrams/diagram-styles.ts +++ b/src/components/grid-layout/cards/diagrams/diagram-styles.ts @@ -124,7 +124,7 @@ export const styles = { }, }, divDiagramLoadflowInvalid: { - '& .sld-active-power, & .sld-reactive-power, & .sld-current-value, & .sld-permanent-limit-percentage, & .sld-voltage, & .sld-angle, & .sld-consumption-sum, & .sld-production-sum, & .sld-balance , .nad-reactive, & text.nad-permanent-limit-percentage, & path.nad-permanent-limit-percentage, & .nad-active': + '& .sld-active-power, & .sld-reactive-power, & .sld-current-value, & .sld-permanent-limit-percentage, & .sld-voltage, & .sld-angle, & .sld-consumption-sum, & .sld-production-sum, & .sld-balance , & .nad-reactive, & text.nad-permanent-limit-percentage, & path.nad-permanent-limit-percentage, & .nad-active': { opacity: INVALID_COMPUTATION_OPACITY, }, diff --git a/src/styles/dark-theme-css-vars.ts b/src/styles/dark-theme-css-vars.ts index 15aaaf07b0..55f68c82c0 100644 --- a/src/styles/dark-theme-css-vars.ts +++ b/src/styles/dark-theme-css-vars.ts @@ -31,7 +31,7 @@ export const darkThemeCssVars = { fill: '#77b5fe', }, - '.nad-active, .nad-permanent-limit-percentage, .nad-bus-descr,': { + '.nad-active, .nad-permanent-limit-percentage, .nad-bus-descr': { fill: 'white', },