Merge branch 'main' into jamalkhey/locate-substation-with-zoom

.github/workflows/release.yml

@@ -0,0 +1,62 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      versionType:
+        description: version type increment
+        required: true
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+      nodeAuthToken:
+        description: NPM access token
+        required: true
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Mask Node Auth Token
+        run: |
+          NODE_AUTH_TOKEN=$(jq -r '.inputs.nodeAuthToken' $GITHUB_EVENT_PATH)
+          echo ::add-mask::$NODE_AUTH_TOKEN
+          echo NODE_AUTH_TOKEN=$NODE_AUTH_TOKEN >> $GITHUB_ENV
+
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        name: Generate app token
+        with:
+          app-id: ${{ vars.POWSYBL_ACTIONS_APPID }}
+          private-key: ${{ secrets.POWSYBL_ACTIONS_SECRET }}
+
+      - name: Checkout sources
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Add release commit and publish
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          npm version ${{ github.event.inputs.versionType }} 
+          git push origin main
+          git push origin $(git tag --points-at HEAD)
+          npm install
+          npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ env.NODE_AUTH_TOKEN }}
+
+      - name: Create GitHub release
+        run: |
+          gh release create $(git tag --points-at HEAD) --generate-notes
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -3,7 +3,7 @@
 
 # distribution
 /dist
-/powsybl-diagram-viewer-*.tgz
+/powsybl-network-viewer-*.tgz
 
 # distrib for demo
 /output

README.md

@@ -1,10 +1,16 @@
-# powsybl-diagram-viewer
+# powsybl-network-viewer
 
-Typescript library to integrate a powsybl svg diagram in a javascript project. The library is built with the Vite bundler.
+Typescript library to integrate network viewers in a javascript project.
+This library contains three viewers: 
+- network-area-diagram-viewer, to integrate the SVG representing a graph of voltage levels within a network, the SVG and the corresponding metadata JSON file being generated by [powsybl-diagram](https://github.com/powsybl/powsybl-diagram)
+- single-line-diagram-viewer, to integrate the SVG representing single-line diagrams, the SVG and the corresponding metadata JSON file being generated by  [powsybl-diagram](https://github.com/powsybl/powsybl-diagram)
+- network-map-viewer, to display the substations / voltage levels on a map
+
+The library is built with the Vite bundler.
 Node from v18+ is required to build with Vite.
 
 Installation using npm:  
-'npm install @powsybl/diagram-viewer'
+'npm install @powsybl/network-viewer'
 
 #### For developers
 
@@ -14,26 +20,22 @@ For development purpose, to install this library locally from an app, you should
 - npm pack
 
 Then in the app project :
-- npm install {PATH_TO_LIBRARY}/powsybl-diagram-viewer-{LIBRARY_VERSION}.tgz
+- npm install {PATH_TO_LIBRARY}/powsybl-network-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
 
-If you want to deploy a new version of powsybl-diagram-viewer in the [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-diagram-viewer),
+If you want to deploy a new version of powsybl-network-viewer in the [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-network-viewer),
 you need to follow the steps below:
 
--   Update to the new version in [package.json](https://github.com/powsybl/powsybl-diagram-viewer/blob/main/package.json) (example `0.6.0`)
--   Update the package-lock.json: `npm install`
--   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to main.
--   [Make a release](https://github.com/powsybl/powsybl-diagram-viewer/releases/new) on GitHub by creating a new tag on the last commit. On the release creation page:
-  - In "Choose a tag": type the tag you want to create (ex.: v0.6.0) and select "create new tag"
-  - In "Target": click on "recent commit" tab and select your release commit
-  - Click on "Generate release note"
-  - Click on "Publish release"
--   It will trigger a job that will publish the release on NPM
+- [Make a release action](https://github.com/powsybl/powsybl-network-viewer/actions/workflows/release.yml)
+- In the 'run workflow' combobox select, let the branch on main
+- Enter the type of evolution (major | minor | patch)
+- Enter your NPM access token (see [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
+- Click 'run workflow'
 
 Notes :
 * Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.

demo/src/diagram-viewers/add-diagrams.ts

@@ -6,11 +6,17 @@
  */
 
 import NadSvgExample from './data/nad-eurostag-tutorial-example1.svg';
+import NadSvgExampleMeta from './data/nad-eurostag-tutorial-example1_metadata.json';
 import NadSvgPstHvdcExample from './data/nad-four-substations.svg';
+import NadSvgPstHvdcExampleMeta from './data/nad-four-substations_metadata.json';
 import NadSvgMultibusVLNodesExample from './data/nad-ieee9-zeroimpedance-cdf.svg';
+import NadSvgMultibusVLNodesExampleMeta from './data/nad-ieee9-zeroimpedance-cdf_metadata.json';
 import NadSvgMultibusVLNodes14Example from './data/nad-ieee14cdf-solved.svg';
-import NadSvgTrheeWTDanglingLineUnknownBusExample from './data/nad-scada.svg';
+import NadSvgMultibusVLNodes14ExampleMeta from './data/nad-ieee14cdf-solved_metadata.json';
+import NadSvgThreeWTDanglingLineUnknownBusExample from './data/nad-scada.svg';
+import NadSvgThreeWTDanglingLineUnknownBusExampleMeta from './data/nad-scada_metadata.json';
 import NadSvgPartialNetworkExample from './data/nad-ieee300cdf-VL9006.svg';
+import NadSvgPartialNetworkExampleMeta from './data/nad-ieee300cdf-VL9006_metadata.json';
 import SldSvgExample from './data/sld-example.svg';
 import SldSvgExampleMeta from './data/sld-example-meta.json';
 import SldSvgSubExample from './data/sld-sub-example.svg';
@@ -37,6 +43,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad')!,
                 svgContent,
+                NadSvgExampleMeta,
                 500,
                 600,
                 1000,
@@ -62,6 +69,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-no-moving')!,
                 svgContent,
+                NadSvgExampleMeta,
                 500,
                 600,
                 1000,
@@ -87,6 +95,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-multibus-vlnodes')!,
                 svgContent,
+                NadSvgMultibusVLNodesExampleMeta,
                 500,
                 600,
                 1000,
@@ -112,6 +121,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-multibus-vlnodes14')!,
                 svgContent,
+                NadSvgMultibusVLNodes14ExampleMeta,
                 500,
                 600,
                 1000,
@@ -137,6 +147,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-pst-hvdc')!,
                 svgContent,
+                NadSvgPstHvdcExampleMeta,
                 500,
                 600,
                 1000,
@@ -156,12 +167,13 @@ export const addNadToDemo = () => {
                 .setAttribute('style', 'border:2px; border-style:solid;');
         });
 
-    fetch(NadSvgTrheeWTDanglingLineUnknownBusExample)
+    fetch(NadSvgThreeWTDanglingLineUnknownBusExample)
         .then((response) => response.text())
         .then((svgContent) => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-threewt-dl-ub')!,
                 svgContent,
+                NadSvgThreeWTDanglingLineUnknownBusExampleMeta,
                 500,
                 600,
                 1000,
@@ -187,6 +199,7 @@ export const addNadToDemo = () => {
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-partial-network')!,
                 svgContent,
+                NadSvgPartialNetworkExampleMeta,
                 500,
                 600,
                 1000,