[nad-viewer] Add edge info components in SVG creation from metadata by massimo-ferraro · Pull Request #418 · powsybl/powsybl-network-viewer

massimo-ferraro · 2026-06-19T07:04:13Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)
A PR or issue has been opened in all impacted repositories (if any)

Does this PR already have an issue describing the problem?
no

What kind of change does this PR introduce?
feature

What is the current behavior?
In the NAD viewer, the SVG writer that creates the SVG starting from diagram metadata does not handle components in edge infos

What is the new behavior (if this is a feature change)?
In the NAD viewer, the SVG writer that creates the SVG starting from diagram metadata handles components in edge infos

Does this PR introduce a breaking change or deprecate an API?

Yes
No

If yes, please check if the following requirements are fulfilled

The Breaking Change or Deprecated label has been added
The migration steps are described in the following section

What changes might users need to make in their application due to this PR? (migration steps)
The creation of the SVG from metadata was previously done in a single step: the SVG was created and provided to the viewer, in the constructor, for the parsing and visualization.
The creation is now done in 2 steps:

the first step creates an empty SVG, with the correct viewbox, to be provided to the viewer for the parsing
the second step adds all the content to the DOM element handled by the viewer

So the SVG writer methods has been changed for implementing these 2 steps, even if the old single step method is still available.
This changes were done for handling the asynchronous loading of the components.
A new parameter for choosing the creation of the SVG from the diagram metadata has been added to the NAD parameters

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

rolnico · 2026-06-23T09:13:05Z

        this.svgDraw = SVG().addTo(this.svgDiv).size(this.width, this.height).viewbox(viewBox);
        this.innerSvg = <SVGElement>this.svgDraw.svg(this.svgContent).node.firstElementChild;
+        if (this.nadViewerParameters.getCreateSvgFromMetadata()) {
+            this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);


Suggested change

this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);

if (!this.svgWriter) {

console.warn(

'[NAD] createSvgFromMetadata is true but no SvgWriter was created (diagramMetadata may be null).'

);

}

this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);

Or maybe add the check on the metadata?

Check on svgWriter added

rolnico · 2026-06-23T09:17:36Z

        }
    }

+    private addEvents(svgDraw: Svg, drawnSvg: SVGElement, hasMetadata: boolean) {


drawnSvg is not used in the method?

You are right, it was used before aligning the branch to the main branch. Removed

rolnico · 2026-06-23T09:20:24Z

        this.svgDraw = SVG().addTo(this.svgDiv).size(this.width, this.height).viewbox(viewBox);
        this.innerSvg = <SVGElement>this.svgDraw.svg(this.svgContent).node.firstElementChild;
+        if (this.nadViewerParameters.getCreateSvgFromMetadata()) {
+            this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);


Maybe also add a check on the cast?

Suggested change

this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);

const svgEl = this.innerSvg;

if (!(svgEl instanceof SVGSVGElement)) {

console.error('[NAD] Expected SVGSVGElement for addSvgContent, got:', svgEl);

return;

}

this.svgWriter?.addSvgContent(svgEl);

Check added

rolnico · 2026-06-23T09:21:35Z

    // If not provided, the default library SVG files are used.
    svgUrlResolver?: (fileName: string) => string;
+
+    // Whether create the SVG from diagram metadata, instead of using the SVG content provided as input


Suggested change

// Whether create the SVG from diagram metadata, instead of using the SVG content provided as input

// Whether to create the SVG from diagram metadata, instead of using the SVG content provided as input

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

rolnico · 2026-06-26T09:06:05Z

+        if (this.nadViewerParameters.getCreateSvgFromMetadata() && this.diagramMetadata != null) {
+            this.svgWriter = new SvgWriter(this.diagramMetadata);


Suggested change

if (this.nadViewerParameters.getCreateSvgFromMetadata() && this.diagramMetadata != null) {

this.svgWriter = new SvgWriter(this.diagramMetadata);

this.componentLibrary = this.nadViewerParameters.getComponentLibrary() ?? DefaultLibraryComponents;

if (this.nadViewerParameters.getCreateSvgFromMetadata() && this.diagramMetadata != null) {

this.svgWriter = new SvgWriter(

this.diagramMetadata,

this.componentLibrary,

this.nadViewerParameters.getSvgUrlResolver()

);

Otherwise the SvgWriter always use the default values (library + svg url resolver)

rolnico · 2026-06-26T09:06:36Z

Suggested change

Moved up

rolnico · 2026-06-26T09:07:28Z

+        if (this.nadViewerParameters.getCreateSvgFromMetadata()) {
+            this.addSvgContent(this.svgWriter, this.innerSvg);


Suggested change

if (this.nadViewerParameters.getCreateSvgFromMetadata()) {

this.addSvgContent(this.svgWriter, this.innerSvg);

if (this.svgWriter != null) {

this.svgWriter.addSvgContent(<SVGSVGElement>this.innerSvg);

rolnico · 2026-06-26T09:08:40Z

+    private addSvgContent(svgWriter: SvgWriter | undefined, svgElement: SVGElement) {
+        if (svgWriter === undefined) {
+            console.warn(
+                '[NAD] createSvgFromMetadata is true but no SvgWriter was created (diagramMetadata may be null).'
+            );
+            return;
+        }
+        if (!(svgElement instanceof SVGSVGElement)) {
+            console.error('[NAD] Expected SVGSVGElement for addSvgContent, got:', svgElement);
+            return;
+        }
+        svgWriter.addSvgContent(svgElement);
+    }


This method could be removed

method removed

rolnico · 2026-06-26T09:10:57Z

+        return new XMLSerializer().serializeToString(baseSvg.xmlDoc);
+    }
+
+    public createBaseSvg(textBoxSize?: { width: number; height: number }): { xmlDoc: XMLDocument; svg: SVGSVGElement } {


Suggested change

public createBaseSvg(textBoxSize?: { width: number; height: number }): { xmlDoc: XMLDocument; svg: SVGSVGElement } {

private createBaseSvg(textBoxSize?: { width: number; height: number }): {

xmlDoc: XMLDocument;

svg: SVGSVGElement;

} {

rolnico · 2026-06-26T09:11:42Z

+        const baseSvg = this.createBaseSvg();
+        return new XMLSerializer().serializeToString(baseSvg.xmlDoc);


Suggested change

const baseSvg = this.createBaseSvg();

return new XMLSerializer().serializeToString(baseSvg.xmlDoc);

const vb = MetadataUtils.getViewBox(

this.diagramMetadata.nodes,

this.diagramMetadata.textNodes,

this.svgParameters

);

return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}"></svg>`;

The serialization/deserialisation can probably be avoided

you are right, used suggested code

rolnico · 2026-06-26T09:29:42Z

        3: 'THREE',
    };
+    componentLibrary: LibraryComponent[] = DefaultLibraryComponents;
+    urlResolver: ((fileName: string) => string) | undefined = undefined;


Suggested change

urlResolver: ((fileName: string) => string) | undefined = undefined;

urlResolver: ((fileName: string) => string) | undefined = undefined;

private abortController: AbortController | undefined = undefined;

add abortController so that each addSvgContent call aborts the previous contrtoller, cancelling in-flight detchs from any prior init() invocation

The getComponentPath method in component-utils.ts should change to:

export async function getComponentPath( componentFilename: string, svgUrlResolver?: (fileName: string) => string, signal?: AbortSignal ): Promise<SVGPathElement> { const url = svgUrlResolver ? svgUrlResolver(componentFilename) : DefaultComponentSvgMapping[componentFilename]; if (!url) throw new Error(`Unknown component file: ${componentFilename}`); const response = await fetch(url, { signal }); const svgContent = await response.text(); const path = SVG().svg(svgContent).node.firstElementChild?.firstElementChild; if (!path) throw new Error(`No path found in component SVG: ${componentFilename}`); return path as SVGPathElement; }

As far as I understood, the AbortController is used to correctly handle multiple calls to the addSvgContent method. This method is called in the init method of the viewer, in turn called by the constructor. So there should not be multiple calls to the addSvgContent method, at least not for the same SvgWriter. Should be the controller added if, for some reason, the call to the addSvgContent method is put also in other point of the viewer code? Take also into account that the addSvgContent method, right now, assumes that the input SVG is empty, otherwise the resulting svg would have duplicated elements, if you call it multiple times. So, if you want, I can anyway add the controller (it should not create issues) but I'm not sure it is really necessary and useful here.

rolnico · 2026-06-26T09:33:56Z

+        return { xmlDoc, svg };
+    }
+
+    public addSvgContent(svg: SVGSVGElement) {


Suggested change

public addSvgContent(svg: SVGSVGElement) {

public addSvgContent(svg: SVGSVGElement) {

this.abortController?.abort();

this.abortController = new AbortController();

this.threeWindingsTransformers = [];

this.threeWindingsTransformerEdges = [];

reset the arrays to not duplicate 3WT nodes

rolnico · 2026-06-26T09:34:39Z

+                void ComponentUtils.getComponentPath(subComponent.fileName, this.urlResolver).then((path) => {
+                    edgeInfoComponent.appendChild(path);
+                });


Suggested change

void ComponentUtils.getComponentPath(subComponent.fileName, this.urlResolver).then((path) => {

edgeInfoComponent.appendChild(path);

});

ComponentUtils.getComponentPath(subComponent.fileName, this.urlResolver, this.abortController?.signal)

.then((path) => {

edgeInfoComponent.appendChild(path);

})

.catch((err: unknown) => {

if (err instanceof DOMException && err.name === 'AbortError') return;

console.error('[NAD] Failed to load component', subComponent.fileName, err);

});

AbortError is silently ignored while other errors log to console

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

sonarqubecloud · 2026-07-07T17:04:06Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
68.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[nad-viewer] Add edge info components in SVG creation from metadata

1a0d31e

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

massimo-ferraro self-assigned this Jun 19, 2026

massimo-ferraro requested a review from rolnico June 19, 2026 07:08

rolnico requested changes Jun 23, 2026

View reviewed changes

Fixes after review

6ce58d0

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

rolnico requested changes Jun 26, 2026

View reviewed changes

massimo-ferraro added 3 commits June 29, 2026 16:48

Fixes after review

a5a6cbc

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

Align to integration branch

3c13172

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

Align to integration branch

6717503

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

-            this.svgWriter?.addSvgContent(<SVGSVGElement>this.innerSvg);
+            const svgEl = this.innerSvg;
+            if (!(svgEl instanceof SVGSVGElement)) {
+                console.error('[NAD] Expected SVGSVGElement for addSvgContent, got:', svgEl);
+                return;
+            }
+            this.svgWriter?.addSvgContent(svgEl);

	// Whether create the SVG from diagram metadata, instead of using the SVG content provided as input
	// Whether to create the SVG from diagram metadata, instead of using the SVG content provided as input

		if (this.nadViewerParameters.getCreateSvgFromMetadata() && this.diagramMetadata != null) {
		this.svgWriter = new SvgWriter(this.diagramMetadata);

		if (this.nadViewerParameters.getCreateSvgFromMetadata()) {
		this.addSvgContent(this.svgWriter, this.innerSvg);

		const baseSvg = this.createBaseSvg();
		return new XMLSerializer().serializeToString(baseSvg.xmlDoc);

-        const baseSvg = this.createBaseSvg();
-        return new XMLSerializer().serializeToString(baseSvg.xmlDoc);
+        const vb = MetadataUtils.getViewBox(
+            this.diagramMetadata.nodes,
+            this.diagramMetadata.textNodes,
+            this.svgParameters
+        );
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}"></svg>`;

	urlResolver: ((fileName: string) => string) \| undefined = undefined;
	urlResolver: ((fileName: string) => string) \| undefined = undefined;
	private abortController: AbortController \| undefined = undefined;

-    public addSvgContent(svg: SVGSVGElement) {
+    public addSvgContent(svg: SVGSVGElement) {
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.threeWindingsTransformers = [];
+        this.threeWindingsTransformerEdges = [];

Uh oh!

Conversation

massimo-ferraro commented Jun 19, 2026 • edited by So-Fras Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Jul 7, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

massimo-ferraro commented Jun 19, 2026 •

edited by So-Fras

Loading