Network map viewer integration (#30 #31 #32)

Signed-off-by: LE SAULNIER Kevin <[email protected]>
powsybl · Mar 8, 2024 · 7298706 · 7298706
1 parent 6025c80
commit 7298706
Show file tree

Hide file tree

Showing 43 changed files with 17,675 additions and 10,474 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,9 @@
 # parcel
 /.parcel-cache
 
+# demo
+/demo/node_modules
+/demo/build
+/demo/dist
+
 
diff --git a/README.md b/README.md
@@ -8,9 +8,17 @@ Installation using npm:
 
 #### For developers
 
-For development purpose, you can run 'npm run watch' for hot building (rebuild after a code save). 
-Your consumer project should point on the local distribution. Edit your package.json depedencies : 
-'"powsybl-diagram-viewer": "file: path/to/powsybl-diagram-viewer",'
+For development purpose, to install this library locally from an app, you should run these commands in the library project :
+- npm install
+- npm run build
+- npm pack
+
+Then in the app project :
+- npm install {PATH_TO_LIBRARY}/powsybl-diagram-viewer-{LIBRARY_VERSION}.tgz
+
+*Warning* : with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.
+To fix this, run this command from the app **after** running "npm install"
+- rm -Rf node_modules/.cache
 
 #### For integrators
 

diff --git a/__tests__/network-area-diagram.test.ts b/__tests__/network-area-diagram.test.ts
@@ -1,4 +1,4 @@
-import { NetworkAreaDiagramViewer } from '../src/network-area-diagram-viewer';
+import { NetworkAreaDiagramViewer } from '../src/components/network-area-diagram-viewer/network-area-diagram-viewer';
 
 describe('Test network-area-diagram-viewer.ts', () => {
     // SVG not loaded properly in DOM with Jest. Has to be enrich...

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,32 @@
+<!--
+    Copyright (c) 2023, RTE (http://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/.
+-->
+<!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="network map viewer demo app"
+    />
+    <title>SVG Viewers Examples</title>
+    <link rel="stylesheet" href="src/style.css" />
+  </head>
+  <body>
+    <div class="flex-container">
+      <div id="root"></div>
+      <div class="break"></div>
+      <div id="svg-container"></div>
+      <div id="svg-container-sld"></div>
+      <div id="svg-container-sld-with-callbacks"></div>
+      <div class="break"></div>
+      <div id="svg-container-sldsub-with-callbacks"></div>
+    </div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/demo/src/App.jsx b/demo/src/App.jsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2023, RTE (http://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/.
+ */
+
+import React, { useEffect } from 'react';
+import { NetworkMap, GeoData } from '../../src/';
+import {
+    createTheme,
+    ThemeProvider,
+    StyledEngineProvider,
+} from '@mui/material/styles';
+
+import DemoMapEquipments from './map-viewer/demo-map-equipments';
+
+import sposdata from './map-viewer/data/spos.json';
+import lposdata from './map-viewer/data/lpos.json';
+import smapdata from './map-viewer/data/smap.json';
+import lmapdata from './map-viewer/data/lmap.json';
+import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
+
+function App() {
+    const INITIAL_ZOOM = 9;
+    const LABELS_ZOOM_THRESHOLD = 9;
+    const ARROWS_ZOOM_THRESHOLD = 7;
+    const useName = true;
+
+    useEffect(() => {
+        addNadToDemo();
+        addSldToDemo();
+    }, []);
+
+    //called after a click (right mouse click) on an equipment (line or substation)
+    function showEquipmentMenu(equipment, x, y, type) {
+        console.log(
+            '# Show equipment menu: ' +
+                JSON.stringify(equipment) +
+                ', type: ' +
+                type
+        );
+    }
+
+    const darkTheme = createTheme({
+        palette: {
+            mode: 'dark',
+        },
+        link: {
+            color: 'green',
+        },
+        node: {
+            background: '#1976d2',
+            hover: '#90caf9',
+            border: '#cce3f9',
+        },
+        selectedRow: {
+            background: '#545C5B',
+        },
+        mapboxStyle: 'mapbox://styles/mapbox/dark-v9',
+        aggrid: 'ag-theme-alpine-dark',
+    });
+
+    //declare data to be displayed: coordinates and network data
+    const geoData = new GeoData(new Map(), new Map());
+    geoData.setSubstationPositions(sposdata);
+    geoData.setLinePositions(lposdata);
+
+    const mapEquipments = new DemoMapEquipments(smapdata, lmapdata);
+
+    useEffect(() => {
+        const handleContextmenu = (e) => {
+            e.preventDefault();
+        };
+        document.addEventListener('contextmenu', handleContextmenu);
+        return () => {
+            document.removeEventListener('contextmenu', handleContextmenu);
+        };
+    }, []);
+
+    return (
+        <div className="App">
+            <header className="App-header"></header>
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={darkTheme}>
+                    <div
+                        style={{
+                            position: 'relative',
+                            width: 1000,
+                            height: 1000,
+                        }}
+                    >
+                        <NetworkMap
+                            mapEquipments={mapEquipments}
+                            geoData={geoData}
+                            labelsZoomThreshold={LABELS_ZOOM_THRESHOLD}
+                            arrowsZoomThreshold={ARROWS_ZOOM_THRESHOLD}
+                            initialZoom={INITIAL_ZOOM}
+                            useName={useName}
+                            onSubstationClick={(vlId) => {
+                                console.log('# OpenVoltageLevel: ' + vlId);
+                            }}
+                            onSubstationClickChooseVoltageLevel={(
+                                idSubstation,
+                                x,
+                                y
+                            ) =>
+                                console.log(
+                                    `# Choose Voltage Level for substation: ${idSubstation}  at coordinates (${x}, ${y})`
+                                )
+                            }
+                            onSubstationMenuClick={(equipment, x, y) =>
+                                showEquipmentMenu(equipment, x, y, 'substation')
+                            }
+                            onLineMenuClick={(equipment, x, y) =>
+                                showEquipmentMenu(equipment, x, y, 'line')
+                            }
+                            onVoltageLevelMenuClick={(equipment, x, y) => {
+                                console.log(
+                                    `# VoltageLevel menu click: ${JSON.stringify(
+                                        equipment
+                                    )} at coordinates (${x}, ${y})`
+                                );
+                            }}
+                            mapLibrary={'cartonolabel'}
+                            mapTheme={'dark'}
+                        />
+                    </div>
+                </ThemeProvider>
+            </StyledEngineProvider>
+        </div>
+    );
+}
+
+export default App;
diff --git a/demo/src/diagram-viewers/add-diagrams.js b/demo/src/diagram-viewers/add-diagrams.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2022, RTE (http://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/.
+ */
+
+import NadSvgExample from './data/nad-example.svg';
+import SldSvgExample from './data/sld-example.svg';
+import SldSvgExampleMeta from './data/sld-example-meta.json';
+import SldSvgSubExample from './data/sld-sub-example.svg';
+import SldSvgSubExampleMeta from './data/sld-sub-example-meta.json';
+
+import { NetworkAreaDiagramViewer } from '../../../src/components/network-area-diagram-viewer/network-area-diagram-viewer';
+import { SingleLineDiagramViewer } from '../../../src/components/single-line-diagram-viewer/single-line-diagram-viewer';
+
+export const addNadToDemo = () => {
+    fetch(NadSvgExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            new NetworkAreaDiagramViewer(
+                document.getElementById('svg-container'),
+                svgContent,
+                500,
+                600,
+                1000,
+                1200
+            );
+
+            document
+                .getElementById('svg-container')
+                .getElementsByTagName('svg')[0]
+                .setAttribute('style', 'border:2px; border-style:solid;');
+        });
+};
+
+export const addSldToDemo = () => {
+    fetch(SldSvgExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            new SingleLineDiagramViewer(
+                document.getElementById('svg-container-sld'),
+                svgContent, //svg content
+                null, //svg metadata
+                'voltage-level',
+                500,
+                600,
+                1000,
+                1200,
+                null, //callback on the next voltage arrows
+                null, //callback on the breakers
+                null, //callback on the feeders
+                null //arrows color
+            );
+
+            document
+                .getElementById('svg-container-sld')
+                .getElementsByTagName('svg')[0]
+                .setAttribute('style', 'border:2px; border-style:solid;');
+        });
+
+    fetch(SldSvgExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            new SingleLineDiagramViewer(
+                document.getElementById('svg-container-sld-with-callbacks'),
+                svgContent, //svg content
+                SldSvgExampleMeta, //svg metadata
+                'voltage-level',
+                500,
+                600,
+                1000,
+                1200,
+                handleNextVL, //callback on the next voltage arrows
+                handleSwitch, //callback on the breakers
+                handleFeeder, //callback on the feeders
+                'lightblue' //arrows color
+            );
+
+            document
+                .getElementById('svg-container-sld-with-callbacks')
+                .getElementsByTagName('svg')[0]
+                .setAttribute('style', 'border:2px; border-style:solid;');
+        });
+
+    fetch(SldSvgSubExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            new SingleLineDiagramViewer(
+                document.getElementById('svg-container-sldsub-with-callbacks'),
+                svgContent, //svg content
+                SldSvgSubExampleMeta, //svg metadata
+                'substation',
+                500,
+                600,
+                1200,
+                1200,
+                handleNextVL, //callback on the next voltage arrows
+                handleSwitch, //callback on the breakers
+                handleFeeder, //callback on the feeders
+                'lightblue' //arrows color
+            );
+
+            document
+                .getElementById('svg-container-sldsub-with-callbacks')
+                .getElementsByTagName('svg')[0]
+                .setAttribute('style', 'border:2px; border-style:solid;');
+        });
+};
+
+const handleNextVL = (id) => {
+    const msg = 'Clicked on navigation arrow, dest VL is ' + id;
+    console.log(msg);
+};
+
+const handleSwitch = (id, switch_status, element) => {
+    const msg =
+        'Clicked on switch: ' +
+        id +
+        ', switch_status: ' +
+        (switch_status ? 'close' : 'open') +
+        '. elementId: ' +
+        element.id;
+    console.log(msg);
+};
+
+const handleFeeder = (id, feederType, svgId, x, y) => {
+    const msg =
+        'Clicked on feeder: ' +
+        id +
+        ', feeder type: ' +
+        feederType +
+        ', svgId: ' +
+        svgId +
+        'x: ' +
+        x +
+        ', y: ' +
+        y;
+    console.log(msg);
+};
diff --git a/demo/data/nad-example.svg → .../src/diagram-viewers/data/nad-example.svg b/demo/data/nad-example.svg → .../src/diagram-viewers/data/nad-example.svg
diff --git a/demo/data/sld-example-meta.json → ...iagram-viewers/data/sld-example-meta.json b/demo/data/sld-example-meta.json → ...iagram-viewers/data/sld-example-meta.json
diff --git a/demo/data/sld-example.svg → .../src/diagram-viewers/data/sld-example.svg b/demo/data/sld-example.svg → .../src/diagram-viewers/data/sld-example.svg
diff --git a/demo/data/sld-sub-example-meta.json → ...am-viewers/data/sld-sub-example-meta.json b/demo/data/sld-sub-example-meta.json → ...am-viewers/data/sld-sub-example-meta.json
diff --git a/demo/data/sld-sub-example.svg → .../diagram-viewers/data/sld-sub-example.svg b/demo/data/sld-sub-example.svg → .../diagram-viewers/data/sld-sub-example.svg
diff --git a/demo/src/index.html b/demo/src/index.html