Skip to content

Commit a07e56e

Browse files
rolnicorolnico
authored
Merge branch 'main' into nro/add_some_security
2 parents 049d78b + 2f19c3d commit a07e56e

35 files changed

Lines changed: 1329 additions & 489 deletions

‎demo/index.html‎

Lines changed: 86 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!--
2-
Copyright (c) 2023, RTE (http://www.rte-france.com)
3-
This Source Code Form is subject to the terms of the Mozilla Public
4-
License, v. 2.0. If a copy of the MPL was not distributed with this
5-
file, You can obtain one at http://mozilla.org/MPL/2.0/.
6-
-->
2+
~ Copyright (c) 2023, RTE (https://www.rte-france.com)
3+
~ This Source Code Form is subject to the terms of the Mozilla Public
4+
~ License, v. 2.0. If a copy of the MPL was not distributed with this
5+
~ file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
~ SPDX-License-Identifier: MPL-2.0
7+
-->
8+
79
<!doctype html>
810
<html lang="en">
911
<head>
1012
<meta charset="utf-8" />
1113
<meta name="viewport" content="width=device-width, initial-scale=1" />
1214
<meta name="theme-color" content="#000000" />
13-
<meta name="description" content="network map viewer demo app" />
14-
<title>SVG Viewers Examples</title>
15+
<meta name="description" content="network-viewer demo app" />
16+
<title>Network-viewer examples</title>
1517
<link rel="stylesheet" href="src/style.css" />
1618
<link rel="stylesheet" href="src/zoom.css" />
1719
<link rel="stylesheet" href="src/demo.css" />
@@ -20,61 +22,99 @@
2022
<div class="floating-toc">
2123
<h3>Contents</h3>
2224
<ul>
23-
<li><a href="#map-viewer">Network Map Viewer</a></li>
24-
<li><a href="#nad-viewers">Network Area Diagram Viewers</a></li>
25-
<li><a href="#sld-viewers">Single Line Diagram Viewers</a></li>
26-
<li><hr /></li>
27-
<li><a href="synced-viewers.html">Synced Viewers Demo</a></li>
25+
<li><a href="index.html">Network area diagram viewers</a></li>
26+
<li><a href="map-viewer.html">Map viewers</a></li>
27+
<li><a href="sld.html">Single-line diagram viewers</a></li>
28+
<li><a href="synced-viewers.html">Synced viewers demo</a></li>
2829
</ul>
2930
</div>
3031
<div class="flex-container">
31-
<div id="map-viewer" class="viewer-section">
32-
<h2>Network Map Viewer</h2>
33-
<div class="break"></div>
34-
<div id="root"></div>
35-
</div>
36-
<div class="break"></div>
3732
<div id="nad-viewers" class="viewer-section">
3833
<h2>Network Area Diagram Viewers</h2>
3934
<div class="break"></div>
40-
<div id="svg-container-nad"></div>
41-
<div id="svg-container-nad-no-moving"></div>
42-
<div class="break"></div>
43-
<div id="svg-container-nad-multibus-vlnodes"></div>
44-
<div id="svg-container-nad-multibus-vlnodes14"></div>
35+
<figure class="diagram-figure">
36+
<figcaption>Basic</figcaption>
37+
<div id="svg-container-nad"></div>
38+
</figure>
39+
<figure class="diagram-figure">
40+
<figcaption>Nodes cannot move</figcaption>
41+
<div id="svg-container-nad-no-moving"></div>
42+
</figure>
4543
<div class="break"></div>
46-
<div id="svg-container-nad-pst-hvdc"></div>
47-
<div id="svg-container-nad-threewt-dl-ub"></div>
44+
<figure class="diagram-figure">
45+
<figcaption>Slider with callback</figcaption>
46+
<div id="svg-container-nad-multibus-vlnodes"></div>
47+
</figure>
48+
<figure class="diagram-figure">
49+
<figcaption>Another basic network</figcaption>
50+
<div id="svg-container-nad-multibus-vlnodes14"></div>
51+
</figure>
4852
<div class="break"></div>
49-
<div id="svg-container-nad-partial-network"></div>
50-
<div id="svg-container-nad-partial-network-custom-view-box"></div>
53+
<figure class="diagram-figure">
54+
<figcaption>With HVDC</figcaption>
55+
<div id="svg-container-nad-pst-hvdc"></div>
56+
</figure>
57+
<figure class="diagram-figure">
58+
<figcaption>With three windings transformer and boundary line</figcaption>
59+
<div id="svg-container-nad-threewt-dl-ub"></div>
60+
</figure>
5161
<div class="break"></div>
52-
<div id="svg-container-nad-pegase-network"></div>
62+
<figure class="diagram-figure">
63+
<figcaption>Partial network</figcaption>
64+
<div id="svg-container-nad-partial-network"></div>
65+
</figure>
66+
<figure class="diagram-figure">
67+
<figcaption>Partial network with custom view box</figcaption>
68+
<div id="svg-container-nad-partial-network-custom-view-box"></div>
69+
</figure>
5370
<div class="break"></div>
54-
<div id="svg-container-nad-pegase-network-adaptive-zoom"></div>
71+
<figure class="diagram-figure">
72+
<figcaption>Pegase network</figcaption>
73+
<div id="svg-container-nad-pegase-network"></div>
74+
</figure>
5575
<div class="break"></div>
56-
<div id="svg-container-nad-partial-network-adaptive-zoom"></div>
57-
<div id="svg-container-nad-multibus-vlnodes-middle-arrow"></div>
76+
<figure class="diagram-figure">
77+
<figcaption>Pegase network with adaptive zoom</figcaption>
78+
<div id="svg-container-nad-pegase-network-adaptive-zoom"></div>
79+
</figure>
5880
<div class="break"></div>
59-
<div id="svg-container-nad-multibus-vlnodes-limit-percentage"></div>
60-
<div id="svg-container-nad-pst-hvdc-multiple-labels"></div>
81+
<figure class="diagram-figure">
82+
<figcaption>Partial network with adaptive zoom</figcaption>
83+
<div id="svg-container-nad-partial-network-adaptive-zoom"></div>
84+
</figure>
85+
<figure class="diagram-figure">
86+
<figcaption>Edge info with middle arrows</figcaption>
87+
<div id="svg-container-nad-multibus-vlnodes-middle-arrow"></div>
88+
</figure>
6189
<div class="break"></div>
62-
<div id="svg-container-nad-hoverCallback"></div>
63-
<div id="svg-container-nad-pst-hvdc-custom"></div>
64-
<div class="break"></div>
65-
<div id="svg-container-nad-double-arrows"></div>
66-
<div id="svg-container-nad-components"></div>
67-
</div>
68-
<div class="break"></div>
69-
<div id="sld-viewers" class="viewer-section">
70-
<h2>Single Line Diagram Viewers</h2>
90+
<figure class="diagram-figure">
91+
<figcaption>Edge info with limit percentage and blinking display</figcaption>
92+
<div id="svg-container-nad-multibus-vlnodes-limit-percentage"></div>
93+
</figure>
94+
<figure class="diagram-figure">
95+
<figcaption>Edge info with multiple labels</figcaption>
96+
<div id="svg-container-nad-pst-hvdc-multiple-labels"></div>
97+
</figure>
7198
<div class="break"></div>
72-
<div id="svg-container-sld"></div>
73-
<div id="svg-container-sld-with-callbacks"></div>
99+
<figure class="diagram-figure">
100+
<figcaption>Hover callbacks</figcaption>
101+
<div id="svg-container-nad-hoverCallback"></div>
102+
</figure>
103+
<figure class="diagram-figure">
104+
<figcaption>Custom style provider</figcaption>
105+
<div id="svg-container-nad-pst-hvdc-custom"></div>
106+
</figure>
74107
<div class="break"></div>
75-
<div id="svg-container-sldsub-with-callbacks"></div>
108+
<figure class="diagram-figure">
109+
<figcaption>Edge info with double arrows</figcaption>
110+
<div id="svg-container-nad-double-arrows"></div>
111+
</figure>
112+
<figure class="diagram-figure">
113+
<figcaption>Edge info with components</figcaption>
114+
<div id="svg-container-nad-components"></div>
115+
</figure>
76116
</div>
77117
</div>
78-
<script type="module" src="/src/index.tsx"></script>
118+
<script type="module" src="./src/nad.ts"></script>
79119
</body>
80120
</html>

‎demo/map-viewer.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!--
2+
~ Copyright (c) 2026, RTE (https://www.rte-france.com)
3+
~ This Source Code Form is subject to the terms of the Mozilla Public
4+
~ License, v. 2.0. If a copy of the MPL was not distributed with this
5+
~ file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
~ SPDX-License-Identifier: MPL-2.0
7+
-->
8+
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="utf-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<meta name="theme-color" content="#000000" />
15+
<meta name="description" content="network-viewer demo app" />
16+
<title>Network-viewer examples</title>
17+
<link rel="stylesheet" href="src/style.css" />
18+
<link rel="stylesheet" href="src/zoom.css" />
19+
<link rel="stylesheet" href="src/demo.css" />
20+
</head>
21+
<body>
22+
<div class="floating-toc">
23+
<h3>Contents</h3>
24+
<ul>
25+
<li><a href="index.html">Network area diagram viewers</a></li>
26+
<li><a href="map-viewer.html">Map viewers</a></li>
27+
<li><a href="sld.html">Single-line diagram viewers</a></li>
28+
<li><a href="synced-viewers.html">Synced viewers demo</a></li>
29+
</ul>
30+
</div>
31+
32+
<div class="flex-container">
33+
<div id="map-viewer" class="viewer-section">
34+
<h2>Network map viewer</h2>
35+
<div class="break"></div>
36+
<figure class="diagram-figure">
37+
<figcaption>Basic map</figcaption>
38+
<div id="root"></div>
39+
</figure>
40+
</div>
41+
</div>
42+
43+
<script type="module" src="./src/map-viewer.tsx"></script>
44+
</body>
45+
</html>

‎demo/sld.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!--
2+
~ Copyright (c) 2026, RTE (https://www.rte-france.com)
3+
~ This Source Code Form is subject to the terms of the Mozilla Public
4+
~ License, v. 2.0. If a copy of the MPL was not distributed with this
5+
~ file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
~ SPDX-License-Identifier: MPL-2.0
7+
-->
8+
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="utf-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<meta name="theme-color" content="#000000" />
15+
<meta name="description" content="network-viewer demo app" />
16+
<title>Network-viewer examples</title>
17+
<link rel="stylesheet" href="src/style.css" />
18+
<link rel="stylesheet" href="src/zoom.css" />
19+
<link rel="stylesheet" href="src/demo.css" />
20+
</head>
21+
<body>
22+
<div class="floating-toc">
23+
<h3>Contents</h3>
24+
<ul>
25+
<li><a href="index.html">Network area diagram viewers</a></li>
26+
<li><a href="map-viewer.html">Map viewers</a></li>
27+
<li><a href="sld.html">Single-line diagram viewers</a></li>
28+
<li><a href="synced-viewers.html">Synced viewers demo</a></li>
29+
</ul>
30+
</div>
31+
32+
<div class="flex-container">
33+
<div id="sld-viewers" class="viewer-section">
34+
<h2>Single Line Diagram Viewers</h2>
35+
<div class="break"></div>
36+
<figure class="diagram-figure">
37+
<figcaption>Basic</figcaption>
38+
<div id="svg-container-sld"></div>
39+
</figure>
40+
<figure class="diagram-figure">
41+
<figcaption>With Callbacks</figcaption>
42+
<div id="svg-container-sld-with-callbacks"></div>
43+
</figure>
44+
<div class="break"></div>
45+
<figure class="diagram-figure">
46+
<figcaption>Substation with Callbacks</figcaption>
47+
<div id="svg-container-sldsub-with-callbacks"></div>
48+
</figure>
49+
</div>
50+
</div>
51+
52+
<script type="module" src="./src/sld.ts"></script>
53+
</body>
54+
</html>

‎demo/src/App.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
/**
2-
* Copyright (c) 2023, RTE (http://www.rte-france.com)
1+
/*
2+
* Copyright (c) 2023, RTE (https://www.rte-france.com)
33
* This Source Code Form is subject to the terms of the Mozilla Public
44
* License, v. 2.0. If a copy of the MPL was not distributed with this
55
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
* SPDX-License-Identifier: MPL-2.0
67
*/
78

89
import { useEffect, useRef } from 'react';
@@ -11,28 +12,22 @@ import { IntlProvider } from 'react-intl';
1112
import { DEFAULT_INTL_CONFIG } from 'react-intl/src/utils';
1213
import { GeoData, type MapEquipment, MapEquipments, NetworkMap, type NetworkMapRef } from '../../src';
1314

14-
import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
1515
import sposdata from './map-viewer/data/spos.json';
1616
import lposdata from './map-viewer/data/lpos.json';
1717
import smapdata from './map-viewer/data/smap.json';
1818
import lmapdata from './map-viewer/data/lmap.json';
1919

20+
// Called after a click (right mouse click) on some equipment (line or substation)
21+
function showEquipmentMenu(equipment: MapEquipment, x: number, y: number, type: string) {
22+
console.log('# Show equipment menu: ' + JSON.stringify(equipment) + ', type: ' + type);
23+
}
24+
2025
export default function App() {
2126
const INITIAL_ZOOM = 9;
2227
const LABELS_ZOOM_THRESHOLD = 9;
2328
const ARROWS_ZOOM_THRESHOLD = 7;
2429
const useName = true;
2530

26-
useEffect(() => {
27-
addNadToDemo();
28-
addSldToDemo();
29-
}, []);
30-
31-
//called after a click (right mouse click) on an equipment (line or substation)
32-
function showEquipmentMenu(equipment: MapEquipment, x: number, y: number, type: string) {
33-
console.log('# Show equipment menu: ' + JSON.stringify(equipment) + ', type: ' + type);
34-
}
35-
3631
const darkTheme = createTheme({
3732
palette: {
3833
mode: 'dark',
@@ -132,10 +127,8 @@ export default function App() {
132127
);
133128
}}
134129
getNominalVoltageColor={(nominalVoltage: number) => {
135-
if (nominalVoltage >= 200) {
136-
return [255, 0, 0]; // Red for high voltage
137-
}
138-
return [0, 0, 255]; // Blue for others
130+
// Red for high voltage, blue for others
131+
return nominalVoltage >= 200 ? [255, 0, 0] : [0, 0, 255];
139132
}}
140133
/>
141134
<button onClick={() => networkMapRef.current?.resetZoomAndPosition()}>

‎demo/src/demo.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,20 @@
3434
.floating-toc a:hover {
3535
text-decoration: underline;
3636
}
37+
38+
.diagram-figure {
39+
margin: 5px;
40+
display: inline-flex;
41+
flex-direction: column;
42+
}
43+
44+
.diagram-figure figcaption {
45+
font-size: 0.85em;
46+
font-weight: 600;
47+
color: #444;
48+
padding: 4px 6px;
49+
background: #f0f0f0;
50+
border: 1px solid #ccc;
51+
border-bottom: none;
52+
border-radius: 4px 4px 0 0;
53+
}

demo/src/diagram-viewers/data/sld-example.svg renamed to demo/src/diagram-viewers/data/sld/sld-example.svg

File renamed without changes.

demo/src/diagram-viewers/data/sld-example_metadata.json renamed to demo/src/diagram-viewers/data/sld/sld-example_metadata.json

File renamed without changes.

demo/src/diagram-viewers/data/sld-sub-example.svg renamed to demo/src/diagram-viewers/data/sld/sld-sub-example.svg

File renamed without changes.

demo/src/diagram-viewers/data/sld-sub-example_metadata.json renamed to demo/src/diagram-viewers/data/sld/sld-sub-example_metadata.json

File renamed without changes.

0 commit comments

Comments
 (0)