Skip to content

[nad-viewer] create style and footer for legends generated from metadata #436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CBiasuzzi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[nad-viewer] create style and footer for legends generated from metadata #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aee639d
create style and legendFooter from metadata (legend boxes)
CBiasuzzi Jul 21, 2026
93e2265
add test
CBiasuzzi Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions demo/java/network-viewer-demo-data/src/main/java/com/powsybl/viewer/demo/NadDemoFiles.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ public static void drawFourSubstationsCustomLabelAndStyle(Path demoResourcesDire
Map<String, VoltageLevelLegend> vlDescriptions = new HashMap<>();
var vl1Legend = new VoltageLevelLegend(
List.of("S1VL1 description1"),
List.of(),
List.of("S1VL1 footer1"),
Map.of("S1VL1_0", "S1VL1_0 description"));
var vl2Legend = new VoltageLevelLegend(
List.of("S1VL2 description1"),
Expand Down Expand Up @@ -357,7 +357,7 @@ public static void drawNetworkWithSvcVscScDlDoubleArrows(Path demoResourcesDirec
getNadParametersWithDoubleArrows(),
VoltageLevelFilter.NO_FILTER);
}

private static NadParameters getNadParametersWithComponents() {
SvgParameters svgParameters = new SvgParameters()
.setCssLocation(SvgParameters.CssLocation.EXTERNAL_NO_IMPORT);
Expand All @@ -384,7 +384,7 @@ public Optional<EdgeInfo> getThreeWindingTransformerEdgeInfo(String threeWinding
);
return nadParameters;
}

public static void drawNetworkWithTwoVoltageLevelsAndComponents(Path demoResourcesDirectory) {
Network network = Networks.createTwoVoltageLevels();
NetworkAreaDiagram.draw(network, demoResourcesDirectory.resolve("nad-edge-info-components"),
Expand Down
1 change: 1 addition & 0 deletions demo/src/diagram-viewers/data/nad-four-substations_custom.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion demo/src/diagram-viewers/data/nad-four-substations_custom_metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,8 @@
"y" : -515.14,
"legendSvgId" : "1",
"legendEdgeSvgId" : "2",
"legendHeader" : [ "S1VL1 description1" ]
"legendHeader" : [ "S1VL1 description1" ],
"legendFooter" : [ "S1VL1 footer1" ]
}, {
"svgId" : "4",
"equipmentId" : "S1VL2",
Expand Down
1 change: 1 addition & 0 deletions demo/src/nad.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,7 @@ const addNadToDemo = () => {
onToggleHoverCallback: handleToggleNadHover,
onRightClickCallback: handleRightClick,
onBendLineCallback: handleLineBending,
adaptiveTextZoom: { enabled: true, threshold: 1500 },
};
new NetworkAreaDiagramViewer(
document.getElementById('svg-container-nad-pst-hvdc-custom')!,
Expand Down
60 changes: 58 additions & 2 deletions ...s/network-viewer-core/src/network-area-diagram-viewer/network-area-diagram-viewer.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@

import { NadViewerParametersOptions } from './nad-viewer-parameters';
import { NetworkAreaDiagramViewer } from './network-area-diagram-viewer';
import { BusNodeMetadata, NodeMetadata, TextNodeMetadata } from './diagram-metadata';

describe('Test network-area-diagram-viewer', () => {
const container: HTMLDivElement = document.createElement('div');
// SVG aren't loaded properly in DOM with Vitest. Has to be enriched...
test('nad creation', () => {
const container: HTMLDivElement = document.createElement('div');

const nadViewerParametersOptions: NadViewerParametersOptions = {
minWidth: 0,
minHeight: 0,
Expand All @@ -40,4 +40,60 @@ describe('Test network-area-diagram-viewer', () => {
expect(nad.getContainer().outerHTML).toBe('<div></div>');
expect(nad.getSvgContent()).toBe('');
});

const textNode: TextNodeMetadata = {
svgId: '0-textnode',
equipmentId: 'EQUIPMENT_ID_0',
vlNode: '0',
shiftX: 0,
shiftY: 0,
connectionShiftX: 0,
connectionShiftY: 0,
};

test('legend boxes: bus nodes style attributes should be used, when defined in metadata', () => {
const nadViewer: NetworkAreaDiagramViewer = new NetworkAreaDiagramViewer(container, '', null, null);
const node: NodeMetadata = {
svgId: '0',
equipmentId: 'EQUIPMENT_ID_0',
x: 0,
y: 0,
};
const busNodes: BusNodeMetadata[] = [busNode(0, '400 kV', 'background:red; fill:red; stroke:black;')];
const legendBox = nadViewer['createLegendBox'](textNode, busNodes, node);

@NathanDissoubray NathanDissoubray Jul 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

createLegendBox is private. Do we need a public constructor, or is it usual in typescript to test private methods like that ?

@CBiasuzzi CBiasuzzi Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems it is an acceptable way to test a private method (note also that the very same approach is already used by PR 430 )

const busSquare = legendBox?.querySelector('.nad-legend-square');
expect(busSquare).toBeDefined();
expect(busSquare?.getAttribute('style')).toEqual('background:red; fill:red; stroke:black;');
});

test('legend boxes: node legendFooter should be used, when defined in metadata', () => {
const nadViewer: NetworkAreaDiagramViewer = new NetworkAreaDiagramViewer(container, '', null, null);
const node: NodeMetadata = {
svgId: '0',
equipmentId: 'EQUIPMENT_ID_0',
x: 0,
y: 0,
legendFooter: ['footer line 1', 'footer line 2'],
};

const busNodes: BusNodeMetadata[] = [busNode(0, '400 kV')];
const legendBox = nadViewer['createLegendBox'](textNode, busNodes, node);
const legendElements = legendBox?.querySelector('.nad-label-box')?.children;
expect(legendElements).toBeDefined();
if (!legendElements) throw new Error('legend elements should be defined');
const texts = Array.from(legendElements).map((child) => child.textContent);
expect(texts).toEqual(['EQUIPMENT_ID_0', '400 kV', 'footer line 1', 'footer line 2']);
});
});

function busNode(index: number, legend: string, style?: string): BusNodeMetadata {
return {
equipmentId: 'EQUIPMENT_ID_0',
index,
nbNeighbours: 0,
svgId: '',
vlNode: '0',
legend,
...(style !== undefined ? { style } : {}),
};
}
8 changes: 7 additions & 1 deletion packages/network-viewer-core/src/network-area-diagram-viewer/network-area-diagram-viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1879,12 +1879,18 @@ export class NetworkAreaDiagramViewer {
newBusLegendElement.classList.add(cls);
});
newBusLegendElement.classList.add('nad-legend-square');

if (busNode.style) {
newBusLegendElement.setAttribute('style', busNode.style);
}
const textNode = document.createTextNode(busNode.legend ?? '');
newBusDivElement?.appendChild(newBusLegendElement);
newBusDivElement?.appendChild(textNode);
newDivElement.appendChild(newBusDivElement);
}
node.legendFooter?.forEach((footer) => {
newDivElement.appendChild(this.createTextHeader(footer));
});
Comment on lines +1890 to +1892

@NathanDissoubray NathanDissoubray Jul 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the same thing as for legendHeader a bit above, line 1866
Could we make an helper function for that maybe ? If it's only in two places, maybe not needed, but if it's in other places it would be good.
Also, I think you should put this part just after the legendHeader (and not after the loop on busNodes)

@CBiasuzzi CBiasuzzi Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback.

It’s only used in those two places, I think it’s probably not worth extracting a helper for just those two lines that are involved.

Why shouldn’t I put the footer after the loop on the nodes? A footer belongs at the bottom, don't you think?
(see also this example: https://github.com/powsybl/powsybl-diagram/blob/main/network-area-diagram/src/test/resources/custom_label_provider.svg )


return newTextElement;
}

Expand Down
Loading