Merge pull request #2 from osscar-org/develop

Support for JLab2.1 with new features
osscar-org · Apr 30, 2020 · 11201ef · 11201ef
2 parents df31294 + ff77176
commit 11201ef
Show file tree

Hide file tree

Showing 11 changed files with 294 additions and 147 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -8,21 +8,23 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest 
     steps:
     - name: Checkout
       uses: actions/checkout@v1
     - name: Install node
       uses: actions/setup-node@v1
       with:
-       node-version: '10.x'
+       node-version: '13.x'
     - name: Install Python
       uses: actions/setup-python@v1
       with:
-        python-version: '3.7'
+        python-version: '3.8'
         architecture: 'x64'
     - name: Install dependencies
-      run: python -m pip install jupyterlab==1.2.6
+      run: |
+        python -m pip install jupyterlab==2.1.1
+        python -m pip install ipywidgets 
     - name: Build the extension
       run: |
         jlpm && jlpm run build

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # widget-periodictable
 
-![Build](https://github.com/osscar-org/widget-periodictable/workflows/Build/badge.svg)
+![Build](https://github.com/osscar-org/widget-periodictable/workflows/Build/badge.svg?branch=develop)
 
 A jupyter widget to select chemical elements from the periodic table. This is a update version of the
 widget from:
@@ -14,7 +14,7 @@ https://github.com/aiidalab/aiidalab-widget-periodictable
 
 ## Usage and try it on Binder
 
-[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/osscar-org/widget-periodictable/master?urlpath=%2Flab%2Ftree%2Fexamples%2Fintroduction.ipynb)
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/osscar-org/widget-periodictable/develop?urlpath=%2Flab%2Ftree%2Fexamples%2Fintroduction.ipynb)
 
 ## Installation
 
@@ -37,6 +37,16 @@ the nbextension:
 ```bash
 jupyter nbextension enable --py [--sys-prefix|--user|--system] widget_periodictable
 ```
+
+## Selection and disable
+
+By clicking on the elements, one can select and disable the elements. The selected elements can be divided into different states with custom colors.
+One can obtain the element list by state.
+
+```bash
+PTable.get_elements_by_state(1)
+```
+
 # Acknowlegements
 
 We acknowledge support from:

diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb
@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -19,12 +19,27 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "312dc9bc4c7645ba8711de89900c888a",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "PTableWidget(noselect_color='blue', selected_colors=['red', 'green', 'yellow'], states=3)"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "# Show the widget\n",
-    "widget = PTableWidget()\n",
+    "widget = PTableWidget(states = 3, selected_colors = ['red', 'green', 'yellow'], noselect_color='blue')\n",
     "widget"
    ]
   },
@@ -44,9 +59,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "9f716d75f43f46e0913e2b4e19f04f04",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(Button(button_style='success', description='Get the currently selected values', layout=Layout(w…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "output = widgets.Output()\n",
     "\n",
@@ -76,9 +106,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "ba9d09402e0c43fe95a68fcb72561881",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Checkbox(value=False, description='Disable oxygen')"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "toggle_disabled = widgets.Checkbox(\n",
     "    value=\"O\" in widget.disabled_elements,\n",
@@ -114,9 +159,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "24001f1755fe492c97818b9fb70cf517",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Button(button_style='success', description='Select only Li and H (from python)', layout=Layout(width='300px'),…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "def on_set_from_ptyhon(event):\n",
     "    # NOTE! If you put an element which does not exist, it will stay forever in the list, but it's ignored\n",
@@ -141,9 +201,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 6,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "c99467dc0c284c1b9e4bb718730c8366",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Button(button_style='success', description='Make noble gases bold', layout=Layout(width='300px'), style=Button…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "def get_noble_gases_state():\n",
     "    label_deactivate = \"Make noble gases bold\"\n",
@@ -188,6 +263,15 @@
     "button_noble.on_click(on_toggle_noble_gases)\n",
     "button_noble"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This work has been done with the support of the EPFL Open Science Fund [OSSCAR](http://www.osscar.org).\n",
+    "\n",
+    "<img src=\"http://www.osscar.org/wp-content/uploads/2019/03/OSSCAR-logo.png\" style=\"height:40px; width: 200px\"/>"
+   ]
   }
  ],
  "metadata": {
@@ -206,7 +290,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.1"
+   "version": "3.8.2"
   }
  },
  "nbformat": 4,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "widget-periodictable",
-  "version": "0.3.0",
+  "version": "1.1.0",
   "description": "A jupyter widget to select chemical elements from the periodic table.",
   "keywords": [
     "jupyter",
@@ -49,7 +49,7 @@
     "watch:nbextension": "webpack --watch"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.1.10 || ^2"
+    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3"
   },
   "devDependencies": {
     "@phosphor/application": "^1.6.0",
@@ -75,7 +75,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "ts-loader": "^5.2.1",
-    "typescript": "~3.1.2",
+    "typescript": "~3.8",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2"
   },

diff --git a/periodictable.png b/periodictable.png
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -29,7 +29,7 @@ const examplePlugin: IPlugin<Application<Widget>, void> = {
   requires: [IJupyterWidgetRegistry],
   activate: activateWidgetExtension,
   autoStart: true
-};
+} as unknown as IPlugin<Application<Widget>, void>;
 
 export default examplePlugin;