Add NAD middle edge infos and adjust css

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',
         },

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): {

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: 6000,
             };
             const diagramViewer = new NetworkAreaDiagramViewer(
                 svgRef.current,

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,6 +149,18 @@ 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;
+}
+
+: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 {
@@ -233,13 +238,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 +270,34 @@ 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-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; }
+
+/* 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;
+} 
+

src/styles/dark-theme-css-vars.ts

@@ -18,4 +18,29 @@ 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',
+    },
+    '.nad-edge-infos path.nad-permanent-limit-percentage, .nad-permanent-limit-percentage path': {
+        fill: 'white',
+        stroke: 'white',
+    },
 };

src/styles/light-theme-css-vars.ts

@@ -21,4 +21,31 @@ 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',
+    },
+
+    '.nad-edge-infos path.nad-permanent-limit-percentage, .nad-permanent-limit-percentage path': {
+        fill: 'black',
+        stroke: 'black',
+    },
 };

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;
 
 /**
  * Parse an `rgb(r, g, b)` string into a numeric color tuple.