Merge pull request #42 from jtpio/update-examples

Update the example notebooks

Author: jtpio

README.md

@@ -24,17 +24,21 @@ Try it in your browser with Binder:
 
 ## Examples
 
-### Widgets and Panels
+### Add Jupyter Widgets to the JupyterLab interface
 
-![widgets-panels](https://user-images.githubusercontent.com/591645/69000410-8f151f00-08cf-11ea-8491-7b8848497b62.gif)
+![widgets-panels](https://user-images.githubusercontent.com/591645/80025074-59104280-84e0-11ea-9766-0cb49cba285a.gif)
 
-### Command Registry
+### Execute Commands
 
-![command-registry](./docs/screencasts/commands.gif)
+![command-registry](https://user-images.githubusercontent.com/591645/80026017-beb0fe80-84e1-11ea-842d-fa3bf5bc4a9b.gif)
 
 ### Custom Python Commands and Command Palette
 
-![custom-commands](https://user-images.githubusercontent.com/591645/73125753-adbc2400-3faa-11ea-95f8-f7060e883ccd.gif)
+![custom-commands](https://user-images.githubusercontent.com/591645/80026023-c1135880-84e1-11ea-9e83-fdb739659357.gif)
+
+### Building small UI applications
+
+![ipytree-example](https://user-images.githubusercontent.com/591645/80026006-b8bb1d80-84e1-11ea-87cc-86495186b938.gif)
 
 ## Installation
 
@@ -56,6 +60,22 @@ To install the JupyterLab extension:
 jupyter labextension install @jupyter-widgets/jupyterlab-manager ipylab
 ```
 
+## Running the examples locally
+
+To try out the examples locally, the recommended way is to create a new environment with the dependencies:
+
+```bash
+# create a new conda environment
+conda create -n ipylab-examples -c conda-forge jupyterlab ipylab ipytree bqplot ipywidgets numpy
+conda activate ipylab-examples
+
+# install the JupyterLab extensions
+jupyter labextension install @jupyter-widgets/jupyterlab-manager ipylab bqplot ipytree
+
+# start JupyterLab
+jupyter lab
+```
+
 ## Under the hood
 
 `ipylab` can be seen as a proxy from Python to JupyterLab over Jupyter Widgets:

environment.yml

@@ -2,7 +2,9 @@ name: ipylab
 channels:
   - conda-forge
 dependencies:
+- bqplot=0.12
 - ipylab=0.2.1
 - ipytree=0.1
 - jupyterlab=2
 - nodejs
+- numpy

examples/commands.ipynb

@@ -162,7 +162,11 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## Add your own command"
+    "## Add your own command\n",
+    "\n",
+    "Let's create a nice plot with `bqlot` and generate some random data.\n",
+    "\n",
+    "See https://github.com/bqplot/bqplot/blob/master/examples/Advanced%20Plotting/Animations.ipynb for more details."
    ]
   },
   {
@@ -171,11 +175,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from random import randint\n",
-    "from ipywidgets import IntSlider\n",
+    "import numpy as np\n",
     "\n",
-    "slider = IntSlider(min=0, max=100)\n",
-    "slider"
+    "from bqplot import LinearScale, Lines, Bars, Axis, Figure\n",
+    "from ipywidgets import IntSlider"
    ]
   },
   {
@@ -184,10 +187,65 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "def my_command():\n",
-    "    slider.value = randint(0, 100)\n",
+    "xs = LinearScale()\n",
+    "ys1 = LinearScale()\n",
+    "ys2 = LinearScale()\n",
+    "\n",
+    "x = np.arange(20)\n",
+    "y = np.cumsum(np.random.randn(20))\n",
+    "y1 = np.random.rand(20)\n",
     "\n",
-    "app.commands.add_command('random', execute=my_command, label=\"My Random Command\")"
+    "line = Lines(x=x, y=y, scales={'x': xs, 'y': ys1}, colors=['magenta'], marker='square')\n",
+    "bar = Bars(x=x, y=y1, scales={'x': xs, 'y': ys2}, colorpadding=0.2, colors=['steelblue'])\n",
+    "\n",
+    "xax = Axis(scale=xs, label='x', grid_lines='solid')\n",
+    "yax1 = Axis(scale=ys1, orientation='vertical', tick_format='0.1f', label='y', grid_lines='solid')\n",
+    "yax2 = Axis(scale=ys2, orientation='vertical', side='right', tick_format='0.0%', label='y1', grid_lines='none')\n",
+    "\n",
+    "Figure(marks=[bar, line], axes=[xax, yax1, yax2], animation_duration=1000)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We now define a function to update the data."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_data():\n",
+    "    line.y = np.cumsum(np.random.randn(20))\n",
+    "    bar.y = np.random.rand(20)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "update_data()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This function will now be called when the JupyterLab command is executed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "app.commands.add_command('update_data', execute=update_data, label=\"Update Data\")"
    ]
   },
   {
@@ -203,7 +261,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "app.commands.execute('random')"
+    "app.commands.execute('update_data')"
    ]
   },
   {
@@ -262,7 +320,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "palette.add_item('random', 'Python Commands')"
+    "palette.add_item('update_data', 'Python Commands')"
    ]
   },
   {
@@ -287,7 +345,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "app.commands.remove_command('random')"
+    "app.commands.remove_command('update_data')"
    ]
   }
  ],
@@ -307,7 +365,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.1"
+   "version": "3.8.2"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {