add nad edge infos

src/components/grid-layout/cards/diagrams/diagram-styles.ts

@@ -34,6 +34,20 @@ export const styles = {
             stroke: theme.palette.text.primary,
             strokeWidth: 3,
         },
+
+        /* css edge infos */
+        '& .nad-arrow-out, & .nad-arrow-in': {
+            fill: 'black',
+        },
+        '& .nad-reactive.nad-arrow-out, & .nad-reactive.nad-arrow-in': {
+            fill: 'blue',
+        },
+        '& text.nad-reactive': {
+            fill: 'black',
+        },
+        '& .nad-active, & .nad-permanent-limit-percentage, & .nad-bus-descr, & .nad-reactive text': {
+            fill: 'black',
+        },
     }),
     divSingleLineDiagram: (theme) => ({
         '& polyline': {
@@ -124,14 +138,14 @@ 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-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': {
+        '& .nad-active, & text.nad-reactive, & .nad-permanent-limit-percentage': {
             fill: '#787F81', // Text color of the values and arrows on lines (same color in light and dark mode)
         },
         '& .nad-bus-descr': {

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, 2000, 3500, 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

@@ -473,7 +473,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
                 onToggleHoverCallback: handleToggleHover,
                 onRightClickCallback: showEquipmentMenu,
                 initialViewBox: nadViewBox[nadPanelId] ?? diagramViewerRef?.current?.getViewBox(),
-                enableAdaptiveTextZoom: true,
+                enableAdaptiveTextZoom: true, // we need to set at false ?
                 adaptiveTextZoomThreshold: 3500,
             };
             const diagramViewer = new NetworkAreaDiagramViewer(

src/nad-index.css

@@ -36,7 +36,7 @@
     fill: #787F81;
 }
 .nad-reactive {
-    fill: #0277bd;
+    fill: blue;
 }
 .nad-current {
     fill: #bd4802;
@@ -156,7 +156,33 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path {
 }
 
 /* NETWORK AREA DIAGRAM LEVEL OF DETAIL */
+/* default hide nad edge infos*/
+.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-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 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 +259,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 +291,9 @@ g.nad-disconnected > .nad-disconnected.nad-edge-path {
 :is(.nad-zoom-2000) .nad-textnode-highlight {
     transform: scale(1.3);
 }
+
+.nad-edge-infos path.nad-reactive,
+.nad-reactive path {
+    fill: blue !important;
+    stroke: blue !important;
+}

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

@@ -12,6 +12,12 @@ export const darkThemeCssVars = {
     '.nad-active': {
         fill: 'white', // Text color of the values and arrows on lines.
     },
+    '.nad-reactive': {
+        fill: 'white',
+    },
+    '.nad-permanent-limit-percentage': {
+        fill: 'white',
+    },
     '.nad-label-box': {
         backgroundColor: '#6c6c6c20',
     },

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

@@ -12,6 +12,12 @@ export const lightThemeCssVars = {
     '.nad-active': {
         fill: '#212121', // Text color of the values and arrows on lines.
     },
+    '.nad-reactive': {
+        fill: 'blue',
+    },
+    '.nad-permanent-limit-percentage': {
+        fill: '#212121',
+    },
     '.nad-label-box': {
         backgroundColor: '#9c9c9c20',
     },