[nad-viewer] Use SVG writer for creating nodes and edges in adaptive zoom functionality

demo/index.html

@@ -23,6 +23,7 @@
             <h3>Contents</h3>
             <ul>
                 <li><a href="index.html">Network area diagram viewers</a></li>
+                <li><a href="realgrid.html">RealGrid network</a></li>
                 <li><a href="map-viewer.html">Map viewers</a></li>
                 <li><a href="sld.html">Single-line diagram viewers</a></li>
                 <li><a href="synced-viewers.html">Synced viewers demo</a></li>

demo/java/network-viewer-demo-data/src/main/java/com/powsybl/viewer/demo/DemoFilesGenerator.java

@@ -20,6 +20,7 @@ private DemoFilesGenerator() {
     public static void main(String[] args) {
         Path demoResources = Path.of("..", "..", "src", "diagram-viewers", "data");
 
+        // NAD examples
         NadDemoFiles.drawCase1354Pegase(demoResources);
         NadDemoFiles.drawEurostag(demoResources);
         NadDemoFiles.draw9ZeroImpedance(demoResources);
@@ -34,6 +35,10 @@ public static void main(String[] args) {
         NadDemoFiles.drawNetworkWithSvcVscScDlDoubleArrows(demoResources);
         NadDemoFiles.drawNetworkWithTwoVoltageLevelsAndComponents(demoResources);
 
+        // Large NAD examples
+        NadDemoFiles.drawCaseRealGrid(demoResources);
+
+        // SLD examples
         SldDemoFiles.drawSldExample(demoResources);
         SldDemoFiles.drawSldSubExample(demoResources);
     }

demo/java/network-viewer-demo-data/src/main/java/com/powsybl/viewer/demo/NadDemoFiles.java

@@ -7,6 +7,8 @@
  */
 package com.powsybl.viewer.demo;
 
+import com.powsybl.commons.datasource.ResourceDataSource;
+import com.powsybl.commons.datasource.ResourceSet;
 import com.powsybl.computation.local.LocalComputationManager;
 import com.powsybl.diagram.test.Networks;
 import com.powsybl.ieeecdf.converter.IeeeCdfNetworkFactory;
@@ -185,6 +187,20 @@ public static void drawVL9006(Path demoResourcesDirectory) {
             VoltageLevelFilter.createVoltageLevelDepthFilter(n6, "VL9006", 1));
     }
 
+    public static void drawCaseRealGrid(Path demoResourcesDirectory) {
+        Network network = Network.read(new ResourceDataSource("RealGrid", new ResourceSet("RealGrid.zip")));
+
+        EdgeInfoParameters edgeInfoParameters = new EdgeInfoParameters(
+            EdgeInfoEnum.ACTIVE_POWER,
+            EdgeInfoEnum.NAME,
+            EdgeInfoEnum.REACTIVE_POWER,
+            EdgeInfoEnum.VALUE_PERMANENT_LIMIT_PERCENTAGE);
+
+        NetworkAreaDiagram.draw(network, demoResourcesDirectory.resolve("realgrid.svg"),
+            getNadParametersWithSvgWidthAndHeightAddedAndEdgeInfo(edgeInfoParameters),
+            VoltageLevelFilter.NO_FILTER);
+    }
+
     private static NadParameters getNadParametersWithSvgWidthAndHeightAdded() {
         SvgParameters svgParameters = new SvgParameters()
             .setCssLocation(SvgParameters.CssLocation.EXTERNAL_NO_IMPORT)
@@ -194,6 +210,18 @@ private static NadParameters getNadParametersWithSvgWidthAndHeightAdded() {
             .setLayoutFactory(new BasicForceLayoutFactory());
     }
 
+    private static NadParameters getNadParametersWithSvgWidthAndHeightAddedAndEdgeInfo(EdgeInfoParameters edgeInfoParameters) {
+        SvgParameters svgParameters = new SvgParameters()
+            .setCssLocation(SvgParameters.CssLocation.EXTERNAL_NO_IMPORT)
+            .setSvgWidthAndHeightAdded(true);
+        LabelProviderParameters parameters = new LabelProviderParameters();
+        parameters.setEdgeInfoParameters(edgeInfoParameters);
+        return new NadParameters()
+            .setSvgParameters(svgParameters)
+            .setLabelProviderFactory((n, s) ->
+                new DefaultLabelProvider(n, s.createValueFormatter(), parameters));
+    }
+
     private static NadParameters getNadParametersWithDefaultLabelProviderFilled() {
         EdgeInfoParameters edgeInfoParameters = new EdgeInfoParameters(
                 EdgeInfoEnum.ACTIVE_POWER,

demo/map-viewer.html

@@ -23,6 +23,7 @@
             <h3>Contents</h3>
             <ul>
                 <li><a href="index.html">Network area diagram viewers</a></li>
+                <li><a href="realgrid.html">RealGrid network</a></li>
                 <li><a href="map-viewer.html">Map viewers</a></li>
                 <li><a href="sld.html">Single-line diagram viewers</a></li>
                 <li><a href="synced-viewers.html">Synced viewers demo</a></li>

demo/nad-created.html

@@ -23,6 +23,7 @@
             <h3>Contents</h3>
             <ul>
                 <li><a href="index.html">Network area diagram viewers</a></li>
+                <li><a href="realgrid.html">RealGrid network</a></li>
                 <li><a href="map-viewer.html">Map viewers</a></li>
                 <li><a href="sld.html">Single-line diagram viewers</a></li>
                 <li><a href="synced-viewers.html">Synced viewers demo</a></li>
@@ -113,6 +114,7 @@ <h2>Network Area Diagram SVGs created from diagram metadata</h2>
                     <figcaption>Edge info with double arrows from metadata</figcaption>
                     <div id="svg-container-nad-double-arrows-c"></div>
                 </figure>
+                <div class="break"></div>
                 <figure class="diagram-figure">
                     <figcaption>Custom style provider</figcaption>
                     <div id="svg-container-nad-pst-hvdc-custom"></div>

demo/realgrid.html

@@ -0,0 +1,40 @@
+<!--
+  ~ Copyright (c) 2026, RTE (https://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/.
+  ~ SPDX-License-Identifier: MPL-2.0
+  -->
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="realgrid network viewer demo" />
+        <title>RealGrid NAD demo</title>
+        <link rel="stylesheet" href="src/style.css" />
+        <link rel="stylesheet" href="src/zoom.css" />
+        <link rel="stylesheet" href="src/demo.css" />
+    </head>
+    <body>
+        <div class="floating-toc">
+            <h3>Contents</h3>
+            <ul>
+                <li><a href="index.html">Network area diagram viewers</a></li>
+                <li><a href="realgrid.html">RealGrid network</a></li>
+                <li><a href="map-viewer.html">Map viewers</a></li>
+                <li><a href="sld.html">Single-line diagram viewers</a></li>
+                <li><a href="synced-viewers.html">Synced viewers demo</a></li>
+            </ul>
+        </div>
+
+        <div id="realgrid" class="viewer-section">
+            <h2>RealGrid network</h2>
+            <div id="svg-container-nad-realgrid"></div>
+        </div>
+
+        <script type="module" src="./src/realgrid.ts"></script>
+    </body>
+</html>

demo/sld.html

@@ -23,6 +23,7 @@
             <h3>Contents</h3>
             <ul>
                 <li><a href="index.html">Network area diagram viewers</a></li>
+                <li><a href="realgrid.html">RealGrid network</a></li>
                 <li><a href="map-viewer.html">Map viewers</a></li>
                 <li><a href="sld.html">Single-line diagram viewers</a></li>
                 <li><a href="synced-viewers.html">Synced viewers demo</a></li>