Uses @powsybl/diagram-viewer to build jupyter notebook widgets (#4)

* adds a SvgSldView widget based on the single-line-diagram-viewer * recreated build template from the latest widget-ts-cookiecutter; updates build dependencies to python 3.11, node 18 and jupyter-lab 3.6 * adds a first, basic explorer widget (composition of existing widgets and the SVG viewer) * aligns code to the latest version of diagram-viewer * aligns dependencies to the latest widget-ts-cookiecutter's, to make it work with python 3.12 and jupyterlab >= 4 * adds to the SLD explorer the ability to toggle a switch. * updates the diagram-viewer dependency * moves diagrams' border declaration style to the .css and applies it consistently to the widgets * reduces cell flickering with the SLD explorer * improves readability: splits widgets code in multiple files (one per widget), renames files and references, accordingly Signed-off-by: Christian Biasuzzi <[email protected]>
powsybl · Apr 15, 2024 · 7e924d4 · 7e924d4
1 parent 2a0e89f
commit 7e924d4
Show file tree

Hide file tree

Showing 38 changed files with 9,713 additions and 27,015 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,20 +15,20 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: "16.x"
+          node-version: "18.x"
       - name: Install Python
         uses: actions/setup-python@v2
         with:
-          python-version: "3.7"
+          python-version: "3.11"
           architecture: "x64"
 
       - name: Setup pip cache
         uses: actions/cache@v2
         with:
           path: ~/.cache/pip
-          key: pip-3.7-${{ hashFiles('package.json') }}
+          key: pip-3.11-${{ hashFiles('package.json') }}
           restore-keys: |
-            pip-3.7-
+            pip-3.11-
             pip-
 
       - name: Get npm cache directory
@@ -44,12 +44,11 @@ jobs:
 
       - name: Install dependencies
         run: |
-          python -m pip install -U pip setuptools codecov
+          python -m pip install -U codecov
           npm install -g codecov
       - name: Test the extension
         run: |
           python -m pip install --upgrade -v -e ".[test]"
           yarn run lint:check
-
-          pytest
+          python -m pytest
           yarn run test
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,7 @@ var/
 *.egg-info/
 .installed.cfg
 *.egg
+.yarn/
 
 # PyInstaller
 #  Usually these files are written by a python script from a template
@@ -63,6 +64,7 @@ instance/
 docs/_build/
 docs/source/_static/embed-bundle.js
 docs/source/_static/embed-bundle.js.map
+docs/source/_static/embed-bundle.js.LICENSE.txt
 
 # PyBuilder
 target/
@@ -158,3 +160,4 @@ pypowsybl_jupyter/labextension
 
 # Intellij files
 .idea/
+*.iml
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -2,40 +2,70 @@
 
 Widgets for [pypowsybl](https://github.com/powsybl/pypowsybl) in the Jupyter notebook.
 
+
 ## Installation
 
-You can install using `pip`:
+You can install pypowsybl-jupyter using `pip`:
 
 ```bash
-pip install pypowsybl-jupyter
+pip install pypowsybl_jupyter
 ```
 
 If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
 the nbextension:
 ```bash
-jupyter nbextension enable --py [--sys-prefix|--user|--system] pypowsybl-jupyter
+jupyter nbextension enable --py [--sys-prefix|--user|--system] pypowsybl_jupyter
 ```
 
+## Examples
+
+In the examples directory there are some notebooks demonstrating the widgets.
+
+
 ## Development Installation
 
+Create a dev environment:
+```bash
+conda create -n pypowsybl_jupyter-dev -c conda-forge nodejs python jupyterlab
+conda activate pypowsybl_jupyter-dev
+```
+
 Install the python. This will also build the TS package.
 ```bash
 pip install -e ".[test]"
 ```
 
+## Packaging for distribution
+
+To package pypowsybl-jupyter in a .whl file, for distribution:
+```bash
+conda activate pypowsybl_jupyter-dev
+pip install build
+pip install -e ".[test]"
+python -m build .
+```
+
+The 'created .whl file' will be available in the 'dist' directory. To install the .whl file:
+```bash
+pip install <'created .whl file'>
+```
+
+
+### Note
+
 When developing your extensions, you need to manually enable your extensions with the
 notebook / lab frontend. For lab, this is done by the command:
 
 ```
 jupyter labextension develop --overwrite .
-yarn run build
+jlpm run build
 ```
 
 For classic notebook, you need to run:
 
 ```
-jupyter nbextension install --sys-prefix --symlink --overwrite --py ipysvg
-jupyter nbextension enable --sys-prefix --py ipysvg
+jupyter nbextension install --sys-prefix --symlink --overwrite --py pypowsybl_jupyter
+jupyter nbextension enable --sys-prefix --py pypowsybl_jupyter
 ```
 
 Note that the `--symlink` flag doesn't work on Windows, so you will here have to run
@@ -45,20 +75,17 @@ of those flags here.
 
 ### How to see your changes
 #### Typescript:
-If you use JupyterLab to develop then you can watch the source directory and run JupyterLab
-at the same time in different terminals to watch for changes in the extension's source and
-automatically rebuild the widget.
+If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
+terminals to watch for changes in the extension's source and automatically rebuild the widget.
 
 ```bash
 # Watch the source directory in one terminal, automatically rebuilding when needed
-yarn run watch
+jlpm run watch
 # Run JupyterLab in another terminal
 jupyter lab
 ```
 
-After a change wait for the build to finish and then refresh your browser and the changes
-should take effect.
+After a change wait for the build to finish and then refresh your browser and the changes should take effect.
 
 #### Python:
-If you make a change to the python code then you will need to restart the notebook kernel
-to have it take effect.
+If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
diff --git a/css/svgsldwidget.css b/css/svgsldwidget.css
@@ -0,0 +1,4 @@
+.svg-sld-viewer-widget {
+  border: 2px solid lightgrey;
+  display: inline-block;
+}
diff --git a/css/svgwidget.css b/css/svgwidget.css
@@ -0,0 +1,4 @@
+.svg-viewer-widget {
+  border: 2px solid lightgrey;
+  display: inline-block;
+}
diff --git a/css/widget.css b/css/widget.css
diff --git a/examples/demo_simple.ipynb b/examples/demo_simple.ipynb
@@ -0,0 +1,61 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b6d17e9b-2a42-481b-903c-a8761f1fe829",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from pypowsybl_jupyter import display_svg\n",
+    "import pypowsybl.network as pn"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a41c8d0d-1340-400b-ab05-5e33657c4bf0",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "network = pn.create_ieee9()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4aeb5de0-94a1-464e-b561-fe0a90fc27f4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#display an SVG (e.g., a single-line-diagram svg), with pan and zoom\n",
+    "display_svg(network.get_single_line_diagram(network.get_voltage_levels().index[1]))"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/examples/demo_simple_explorer.ipynb b/examples/demo_simple_explorer.ipynb
@@ -0,0 +1,64 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b6d17e9b-2a42-481b-903c-a8761f1fe829",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from pypowsybl_jupyter import network_explorer\n",
+    "import pypowsybl.network as pn"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a41c8d0d-1340-400b-ab05-5e33657c4bf0",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "network = pn.create_ieee9()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4aeb5de0-94a1-464e-b561-fe0a90fc27f4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#Display a simple explorer widget for the network\n",
+    "#built by assembling the SvgView  SVG viewer and other basic ipywidgets.\n",
+    "#Start typing some prefix characters for the ID in the text box (e.g., VL)\n",
+    "#then select one from the list of filtered VLs and click the button to update the diagram.\n",
+    "network_explorer(network)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}