NAD viewer #1

etiennehomer · 2022-05-09T17:00:23Z

Please check if the PR fulfills these requirements (please use '[x]' to check the checkboxes, or submit the PR and then click the checkboxes)

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)

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
This PR gives a simple TS/JS component to integrate a network area diagram svg.

Signed-off-by: Etienne Homer <[email protected]>

sylvlecl · 2022-05-12T13:45:35Z

Tried to use it in pypowsybl-jupyter widget, worked fine

Signed-off-by: Etienne Homer <[email protected]>

jonenst · 2022-05-17T10:17:38Z

README.md

+
+Typescript library to integrate a powsybl svg diagram in a javascript project. The library is built with the Parcel bundler.
+Symply use: 'npm run build'


remove "symply"

jonenst · 2022-05-17T10:18:01Z

README.md

+#### For integrators
+
+If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-diagram-viewer),


reference to commons-ui

jonenst · 2022-05-17T10:19:28Z

demo/src/style.css

@@ -0,0 +1,6 @@
+#svg-container {
+    position: relative; /* let it at the charge of the user? */


jonenst · 2022-05-17T10:19:57Z

package.json

+  "version": "0.0.1",
+  "description": "Typescript library to integrate a powsybl svg diagram in a javascript project.",
+  "author": "powsybl team",
+  "homepage": "https://github.com/powsybl",


not sure maybe https://www.powsybl.org/ ?

Yes, and github repo is below in the file

jonenst · 2022-05-17T10:20:59Z

package.json

+  "scripts": {
+    "watch": "parcel watch",
+    "build": "parcel build",
+    "test": "echo \"Error: no test specified\" && exit 1",


to implement ?

Yes it's in progress

A simple test has been implemented. getDimensionsFromSvg() isn't tested as Jest doesn't support svg manipulation in the DOM.

Signed-off-by: Etienne Homer <[email protected]>

sylvlecl · 2022-05-19T07:45:01Z

src/setupTests.ts

@@ -0,0 +1,5 @@
+//FIXME workaround svg.panzoom.js import crash even though it's not used


I had the same issue in pypowsybl-jupyter, the problem is that svg.panzoom.js is somewhat broken.
A solution is to import the ESM module svg.panzoom.esm.js instead. This can be configured in jest config file.

See that issue for more background :

svgdotjs/svg.panzoom.js#82

Thanks. We already use that hack (global SVG with setupTests) in Gridstudy, we gonna do the same here. I use the jsdom environnement for tests, not the node.js one. I don't know if it would work.

Indeed, it actually requires jsdom to work since svg.js works on the DOM.
It would allow svg.js to actually modify the DOM, in the unit test.

Signed-off-by: Etienne Homer <[email protected]>

src/network-area-diagram-viewer.ts

SlimaneAmar · 2022-05-23T12:43:55Z

src/network-area-diagram-viewer.ts

+        const width: number = +svg.getAttribute('width');
+        const height: number = +svg.getAttribute('height');
+        const viewbox: VIEWBOX = svg.viewBox.baseVal;
+        return { width: width, height: height, viewbox: viewbox };


Add a test ?

Svg manipulation isn't well supported with Jest. The test doesn't pass.

SlimaneAmar · 2022-05-23T12:43:55Z

src/network-area-diagram-viewer.ts

+        const width: number = +svg.getAttribute('width');
+        const height: number = +svg.getAttribute('height');
+        const viewbox: VIEWBOX = svg.viewBox.baseVal;
+        return { width: width, height: height, viewbox: viewbox };


Add a test ?

src/network-area-diagram-viewer.ts

Signed-off-by: HOMER Etienne <[email protected]>

etiennehomer added 4 commits May 9, 2022 17:52

first commit

471d1da

Signed-off-by: Etienne Homer <[email protected]>

clean

ac82a1b

Signed-off-by: Etienne Homer <[email protected]>

clean

07a8473

Signed-off-by: Etienne Homer <[email protected]>

clean package-lock

c1ea028

Signed-off-by: Etienne Homer <[email protected]>

etiennehomer changed the title ~~NAD viewer~~ NAD viewer [WIP] May 10, 2022

etiennehomer added 3 commits May 10, 2022 10:14

fill readme

741bb2a

Signed-off-by: Etienne Homer <[email protected]>

clean package.json

084c90c

Signed-off-by: Etienne Homer <[email protected]>

clean

d4d49df

Signed-off-by: Etienne Homer <[email protected]>

etiennehomer requested review from jonenst and SlimaneAmar May 10, 2022 11:34

etiennehomer added 4 commits May 10, 2022 13:43

change name

8288e91

Signed-off-by: Etienne Homer <[email protected]>

remove env from .gitignore

d0dc079

Signed-off-by: Etienne Homer <[email protected]>

clean depedencies

d6f43fc

Signed-off-by: Etienne Homer <[email protected]>

add demo

4c1e7d9

Signed-off-by: Etienne Homer <[email protected]>

clean

16bfff7

Signed-off-by: Etienne Homer <[email protected]>

etiennehomer changed the title ~~NAD viewer [WIP]~~ NAD viewer May 12, 2022

etiennehomer added 7 commits May 12, 2022 16:44

clean

cf006c0

Signed-off-by: Etienne Homer <[email protected]>

use DomPArser

e6e6c80

Signed-off-by: Etienne Homer <[email protected]>

type all variables

9ce83ba

Signed-off-by: Etienne Homer <[email protected]>

fix demo

89a6e9b

Signed-off-by: Etienne Homer <[email protected]>

fix demo

1c1baf1

Signed-off-by: Etienne Homer <[email protected]>

configure eslint and prettier

6395eb7

Signed-off-by: Etienne Homer <[email protected]>

fix eslint

2d572bf

Signed-off-by: Etienne Homer <[email protected]>

jonenst reviewed May 17, 2022

View reviewed changes

fix readMe and remove comment'

2dee762

Signed-off-by: Etienne Homer <[email protected]>

etiennehomer added 9 commits May 17, 2022 13:07

fix hoempage

9117ff9

Signed-off-by: Etienne Homer <[email protected]>

use regex to parse svg only

1b4520d

Signed-off-by: Etienne Homer <[email protected]>

Unit tests not working

2289900

Signed-off-by: Etienne Homer <[email protected]>

remove console.info

376bf60

Signed-off-by: Etienne Homer <[email protected]>

github actions

d7a1b06

Signed-off-by: Etienne Homer <[email protected]>

empty test

fa7f314

Signed-off-by: Etienne Homer <[email protected]>

temporary disable eslint

968dadc

Signed-off-by: Etienne Homer <[email protected]>

add end line

153d19f

Signed-off-by: Etienne Homer <[email protected]>

clean

a8d220b

Signed-off-by: Etienne Homer <[email protected]>

sylvlecl reviewed May 19, 2022

View reviewed changes

etiennehomer added 4 commits May 19, 2022 18:21

add simple UT

dec7a1d

Signed-off-by: Etienne Homer <[email protected]>

fix regex

8f92639

Signed-off-by: Etienne Homer <[email protected]>

fix readme

eff4153

Signed-off-by: Etienne Homer <[email protected]>

return null if svg invalid

87171be

Signed-off-by: Etienne Homer <[email protected]>

SlimaneAmar reviewed May 23, 2022

View reviewed changes

etiennehomer added 4 commits May 24, 2022 10:26

fix review

a26c384

Signed-off-by: HOMER Etienne <[email protected]>

clean regex

9d9c076

Signed-off-by: HOMER Etienne <[email protected]>

fix demo

2504195

Signed-off-by: HOMER Etienne <[email protected]>

remove start-demo

9e37b2c

Signed-off-by: HOMER Etienne <[email protected]>

etiennehomer merged commit 78d5b12 into main Jun 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NAD viewer #1

NAD viewer #1

etiennehomer commented May 9, 2022

sylvlecl commented May 12, 2022

jonenst May 17, 2022

etiennehomer May 17, 2022

jonenst May 17, 2022

etiennehomer May 17, 2022

jonenst May 17, 2022

etiennehomer May 17, 2022

jonenst May 17, 2022

jonenst May 17, 2022

etiennehomer May 17, 2022

jonenst May 17, 2022

etiennehomer May 17, 2022

etiennehomer May 20, 2022

sylvlecl May 19, 2022

sylvlecl May 19, 2022

etiennehomer May 19, 2022

sylvlecl May 19, 2022

SlimaneAmar May 23, 2022

etiennehomer May 24, 2022

SlimaneAmar May 23, 2022


		Typescript library to integrate a powsybl svg diagram in a javascript project. The library is built with the Parcel bundler.
		Symply use: 'npm run build'

		#### For integrators

		If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-diagram-viewer),

		@@ -0,0 +1,6 @@
		#svg-container {
		position: relative; /* let it at the charge of the user? */

		@@ -0,0 +1,5 @@
		//FIXME workaround svg.panzoom.js import crash even though it's not used

NAD viewer #1

NAD viewer #1

Conversation

etiennehomer commented May 9, 2022

sylvlecl commented May 12, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment