From 0a08d1d995f85f78dd3052e96f7dd256c86b8783 Mon Sep 17 00:00:00 2001
From: Don Jayamanne <don.jayamanne@yahoo.com>
Date: Mon, 23 Mar 2020 16:39:11 -0700
Subject: [PATCH 1/2] Add more tests

---
 .../nativeEditor.ui.functional.test.ts        | 146 +++++++++++-
 .../uiTests/notebooks/ipySheet_widgets.ipynb  | 208 ++++++++++++++++++
 2 files changed, 353 insertions(+), 1 deletion(-)
 create mode 100644 src/test/datascience/uiTests/notebooks/ipySheet_widgets.ipynb

diff --git a/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts b/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
index 3bb851e65019..d1fb3a291c1e 100644
--- a/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
+++ b/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
@@ -85,6 +85,12 @@ use(chaiAsPromised);
             if (nb.metadata && nb.metadata.kernelspec) {
                 delete nb.metadata.kernelspec;
             }
+            // Clear all output (from previous executions).
+            nb.cells.forEach(cell => {
+                if (Array.isArray(cell.outputs)) {
+                    cell.outputs = [];
+                }
+            });
             const result = await openNotebook(ioc, disposables, JSON.stringify(nb));
             notebookUi = result.notebookUI;
             return result;
@@ -98,6 +104,9 @@ use(chaiAsPromised);
         async function openStandardWidgetsIpynb() {
             return openNotebookFile('standard_widgets.ipynb');
         }
+        async function openIPySheetsIpynb() {
+            return openNotebookFile('ipySheet_widgets.ipynb');
+        }
 
         test('Notebook has 3 cells', async () => {
             const { notebookUI } = await openABCIpynb();
@@ -192,7 +201,7 @@ use(chaiAsPromised);
 
                 await notebookUI.executeCell(3);
                 await notebookUI.executeCell(4);
-                // await sleep(500_000);
+
                 const button = await retryIfFail(async () => {
                     // Find the button & the lable in cell output for 3 & 4 respectively.
                     const buttons = await (await notebookUI.getCellOutput(3)).$$('button.widget-button');
@@ -212,6 +221,141 @@ use(chaiAsPromised);
                     assert.include(cell4Output, 'Button Clicked');
                 });
             });
+            test('Render ipysheets', async () => {
+                const { notebookUI } = await openIPySheetsIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(3));
+
+                await notebookUI.executeCell(1);
+                await notebookUI.executeCell(3);
+
+                await retryIfFail(async () => {
+                    const cellOutput = await notebookUI.getCellOutputHTML(3);
+
+                    assert.include(cellOutput, 'Hello</td>');
+                    assert.include(cellOutput, 'World</td>');
+                });
+            });
+            test('Render ipysheets', async () => {
+                const { notebookUI } = await openIPySheetsIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(3));
+
+                await notebookUI.executeCell(1);
+                await notebookUI.executeCell(3);
+
+                await retryIfFail(async () => {
+                    const cellOutput = await notebookUI.getCellOutputHTML(3);
+
+                    assert.include(cellOutput, 'Hello</td>');
+                    assert.include(cellOutput, 'World</td>');
+                });
+            });
+            test('Search ipysheets with textbox in another cell', async () => {
+                const { notebookUI } = await openIPySheetsIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(6));
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(7));
+
+                await notebookUI.executeCell(5);
+                await notebookUI.executeCell(6);
+                await notebookUI.executeCell(7);
+
+                // Wait for sheets to get rendered.
+                await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(7);
+
+                    assert.include(cellOutputHtml, 'test</td>');
+                    assert.include(cellOutputHtml, 'train</td>');
+
+                    const cellOutput = await notebookUI.getCellOutput(6);
+                    const highlighted = await cellOutput.$$('td.htSearchResult');
+                    assert.equal(highlighted.length, 0);
+                });
+
+                // Type `test` into textbox.
+                await retryIfFail(async () => {
+                    const cellOutput = await notebookUI.getCellOutput(6);
+                    const textboxes = await cellOutput.$$('input[type=text]');
+                    assert.equal(textboxes.length, 1, 'No Texbox');
+                    await textboxes[0].focus();
+
+                    await notebookUI.type('test');
+                });
+
+                // Confirm cell is filtered and highlighted.
+                await retryIfFail(async () => {
+                    const cellOutput = await notebookUI.getCellOutput(7);
+                    const highlighted = await cellOutput.$$('td.htSearchResult');
+                    assert.equal(highlighted.length, 2);
+                });
+            });
+            test('Update ipysheets cells with textbox & slider in another cell', async () => {
+                const { notebookUI } = await openIPySheetsIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(10));
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(12));
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(13));
+
+                await notebookUI.executeCell(9);
+                await notebookUI.executeCell(10);
+                await notebookUI.executeCell(12);
+                await notebookUI.executeCell(13);
+
+                // Wait for slider to get rendered with value `0`.
+                const sliderLabel = await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(10);
+
+                    assert.include(cellOutputHtml, 'ui-slider-handle');
+                    assert.include(cellOutputHtml, 'left: 0%');
+
+                    const cellOutput = await notebookUI.getCellOutput(10);
+                    const sliderLables = await cellOutput.$$('div.widget-readout');
+
+                    return sliderLables[0];
+                });
+
+                // Confirm slider lable reads `0`.
+                await retryIfFail(async () => {
+                    const sliderValue = await notebookUI.page?.evaluate(ele => ele.innerHTML.trim(), sliderLabel);
+                    assert.equal(sliderValue || '', '0');
+                });
+
+                // Wait for textbox to get rendered.
+                const textbox = await retryIfFail(async () => {
+                    const cellOutput = await notebookUI.getCellOutput(12);
+                    const textboxes = await cellOutput.$$('input[type=number]');
+                    assert.equal(textboxes.length, 1);
+
+                    const value = await notebookUI.page?.evaluate(el => (el as HTMLInputElement).value, textboxes[0]);
+                    assert.equal(value || '', '0');
+
+                    return textboxes[0];
+                });
+
+                // Wait for sheets to get rendered.
+                await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(13);
+                    assert.include(cellOutputHtml, '>50.000</td>');
+                    assert.notInclude(cellOutputHtml, '>100.000</td>');
+                });
+
+                // Type `50` into textbox.
+                await retryIfFail(async () => {
+                    await textbox.focus();
+                    await notebookUI.type('50');
+                });
+
+                // Confirm slider label reads `50`.
+                await retryIfFail(async () => {
+                    const sliderValue = await notebookUI.page?.evaluate(ele => ele.innerHTML.trim(), sliderLabel);
+                    assert.equal(sliderValue || '', '50');
+                });
+
+                // Wait for sheets to get updated with calculation.
+                await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(13);
+
+                    assert.include(cellOutputHtml, '>50.000</td>');
+                    assert.include(cellOutputHtml, '>100.000</td>');
+                });
+            });
         });
     });
 });
diff --git a/src/test/datascience/uiTests/notebooks/ipySheet_widgets.ipynb b/src/test/datascience/uiTests/notebooks/ipySheet_widgets.ipynb
new file mode 100644
index 000000000000..2cf40ef38208
--- /dev/null
+++ b/src/test/datascience/uiTests/notebooks/ipySheet_widgets.ipynb
@@ -0,0 +1,208 @@
+{
+    "cells": [
+        {
+            "source": [
+                "# Prerequisites\n",
+                "\n",
+                "### pip install ipysheet"
+            ],
+            "cell_type": "markdown",
+            "metadata": {}
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 38,
+            "metadata": {
+                "scrolled": true
+            },
+            "outputs": [],
+            "source": [
+                "from ipywidgets import FloatSlider, IntSlider, Image\n",
+                "import ipysheet"
+            ]
+        },
+        {
+            "source": [
+                "# 1. Test Rendering a Sheet"
+            ],
+            "cell_type": "markdown",
+            "metadata": {}
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 39,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "sheet = ipysheet.sheet(rows=3, columns=4)\n",
+                "cell1 = ipysheet.cell(0, 0, 'Hello')\n",
+                "cell2 = ipysheet.cell(2, 0, 'World')\n",
+                "cell_value = ipysheet.cell(2,2, 42.)\n",
+                "sheet"
+            ]
+        },
+        {
+            "source": [
+                "# 2. Test Searching a Sheet (interact with textbox in a different cell)"
+            ],
+            "cell_type": "markdown",
+            "metadata": {}
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 40,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "\n",
+                "import numpy as np\n",
+                "import pandas as pd\n",
+                "from ipysheet import from_dataframe\n",
+                "from ipywidgets import Text, VBox, link\n",
+                "\n",
+                "df = pd.DataFrame({'A': 1.,\n",
+                "                   'B': pd.Timestamp('20130102'),\n",
+                "                   'C': pd.Series(1, index=list(range(4)), dtype='float32'),\n",
+                "                   'D': np.array([False, True, False, False], dtype='bool'),\n",
+                "                   'E': pd.Categorical([\"test\", \"train\", \"test\", \"train\"]),\n",
+                "                   'F': 'foo'})\n",
+                "\n",
+                "df.loc[[0, 2], ['B']] = np.nan\n",
+                "\n",
+                "\n",
+                "sheet2 = from_dataframe(df)\n",
+                "\n",
+                "search_box = Text(description='Search:')\n",
+                "link((search_box, 'value'), (sheet2, 'search_token'))"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 41,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "search_box"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 42,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "sheet2"
+            ]
+        },
+        {
+            "source": [
+                "# 3. Test calculations (slider update cell value via python code)"
+            ],
+            "cell_type": "markdown",
+            "metadata": {}
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 51,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "from ipywidgets import FloatSlider, IntSlider, Image, IntText, link\n",
+                "import ipysheet\n",
+                "\n",
+                "slider = IntSlider(description=\"Continuous\", continuous_update=True)\n",
+                "textbox = IntText(description=\"Continuous\", continuous_update=True)\n",
+                "\n",
+                "link((slider, 'value'), (textbox, 'value'))"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 52,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "slider"
+            ]
+        },
+        {
+            "source": [
+                "* Typing value into textbox will move slider\n",
+                "* The value in cell will also get updated"
+            ],
+            "cell_type": "markdown",
+            "metadata": {}
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 53,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "textbox"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 57,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "sheet = ipysheet.sheet()\n",
+                "\n",
+                "cell1 = ipysheet.cell(0, 0, slider, style={'min-width': '150px'})\n",
+                "cell3 = ipysheet.cell(2, 2, 50.)\n",
+                "cell_sum = ipysheet.cell(3, 2, 50.)\n",
+                "\n",
+                "@ipysheet.calculation(inputs=[(cell1, 'value'), cell3], output=cell_sum)\n",
+                "def calculate(a, b):\n",
+                "    return a + b\n",
+                "\n",
+                "sheet"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": []
+        }
+    ],
+    "metadata": {
+        "celltoolbar": "Attachments",
+        "file_extension": ".py",
+        "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.8.1-final"
+        },
+        "mimetype": "text/x-python",
+        "name": "python",
+        "npconvert_exporter": "python",
+        "pygments_lexer": "ipython3",
+        "toc": {
+            "base_numbering": 1,
+            "nav_menu": {},
+            "number_sections": false,
+            "sideBar": false,
+            "skip_h1_title": false,
+            "title_cell": "Table of Contents",
+            "title_sidebar": "Contents",
+            "toc_cell": false,
+            "toc_position": {},
+            "toc_section_display": false,
+            "toc_window_display": false
+        },
+        "version": 3
+    },
+    "nbformat": 4,
+    "nbformat_minor": 2
+}

From 4403515f7592412b49c6dd77c68febb0120d93a5 Mon Sep 17 00:00:00 2001
From: Don Jayamanne <don.jayamanne@yahoo.com>
Date: Mon, 23 Mar 2020 17:01:12 -0700
Subject: [PATCH 2/2] ipyvolume and pythreejs tests

---
 build/conda-functional-requirements.txt       |   2 +
 src/test/datascience/uiTests/helpers.ts       |   5 +-
 .../nativeEditor.ui.functional.test.ts        |  53 ++++++
 .../uiTests/notebooks/ipyvolume_widgets.ipynb | 107 ++++++++++++
 .../uiTests/notebooks/pythreejs_widgets.ipynb | 156 ++++++++++++++++++
 5 files changed, 322 insertions(+), 1 deletion(-)
 create mode 100644 src/test/datascience/uiTests/notebooks/ipyvolume_widgets.ipynb
 create mode 100644 src/test/datascience/uiTests/notebooks/pythreejs_widgets.ipynb

diff --git a/build/conda-functional-requirements.txt b/build/conda-functional-requirements.txt
index 7f11f53981a7..0b4f9cb2d2db 100644
--- a/build/conda-functional-requirements.txt
+++ b/build/conda-functional-requirements.txt
@@ -17,3 +17,5 @@ flask
 django
 isort
 pathlib2>=2.2.0 ; python_version<'3.6' # Python 2.7 compatibility (pytest)
+pythreejs
+ipyvolume
diff --git a/src/test/datascience/uiTests/helpers.ts b/src/test/datascience/uiTests/helpers.ts
index 2f6143af303b..55725dcb1f2b 100644
--- a/src/test/datascience/uiTests/helpers.ts
+++ b/src/test/datascience/uiTests/helpers.ts
@@ -38,7 +38,7 @@ const maxWaitTimeForMessage = 15_000;
 export const waitTimeForUIToUpdate = 3_000;
 
 export class BaseWebUI implements IAsyncDisposable {
-    protected page?: playwright.Page;
+    public page?: playwright.Page;
     private readonly disposables: IDisposable[] = [];
     private readonly webServerPromise = createDeferred<WebServer>();
     private webServer?: WebServer;
@@ -50,6 +50,9 @@ export class BaseWebUI implements IAsyncDisposable {
         await this.browser?.close();
         await this.page?.close();
     }
+    public async type(text: string): Promise<void> {
+        await this.page?.keyboard.type(text);
+    }
     public _setWebServer(webServer: WebServer) {
         this.webServer = webServer;
         this.webServerPromise.resolve(webServer);
diff --git a/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts b/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
index d1fb3a291c1e..1d7746e690e8 100644
--- a/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
+++ b/src/test/datascience/uiTests/nativeEditor.ui.functional.test.ts
@@ -107,6 +107,12 @@ use(chaiAsPromised);
         async function openIPySheetsIpynb() {
             return openNotebookFile('ipySheet_widgets.ipynb');
         }
+        async function openIPyVolumeIpynb() {
+            return openNotebookFile('ipyvolume_widgets.ipynb');
+        }
+        async function openPyThreejsIpynb() {
+            return openNotebookFile('pythreejs_widgets.ipynb');
+        }
 
         test('Notebook has 3 cells', async () => {
             const { notebookUI } = await openABCIpynb();
@@ -356,6 +362,53 @@ use(chaiAsPromised);
                     assert.include(cellOutputHtml, '>100.000</td>');
                 });
             });
+            test('Render ipyvolume', async () => {
+                const { notebookUI } = await openIPyVolumeIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(3));
+
+                await notebookUI.executeCell(1);
+                await notebookUI.executeCell(2);
+                await notebookUI.executeCell(3);
+                await notebookUI.executeCell(4);
+
+                // Confirm sliders and canvas are rendered.
+                await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(1);
+                    assert.include(cellOutputHtml, '<canvas ');
+
+                    const cellOutput = await notebookUI.getCellOutput(1);
+                    const sliders = await cellOutput.$$('div.ui-slider');
+                    assert.equal(sliders.length, 2);
+                });
+
+                // Confirm canvas is rendered.
+                await retryIfFail(async () => {
+                    const cellOutputHtml = await notebookUI.getCellOutputHTML(4);
+                    assert.include(cellOutputHtml, '<canvas ');
+                });
+            });
+            test('Render pythreejs', async () => {
+                const { notebookUI } = await openPyThreejsIpynb();
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(3));
+                await assert.eventually.isFalse(notebookUI.cellHasOutput(8));
+
+                await notebookUI.executeCell(1);
+                await notebookUI.executeCell(2);
+                await notebookUI.executeCell(3);
+                await notebookUI.executeCell(4);
+                await notebookUI.executeCell(5);
+                await notebookUI.executeCell(6);
+                await notebookUI.executeCell(7);
+                await notebookUI.executeCell(8);
+
+                // Confirm canvas is rendered.
+                await retryIfFail(async () => {
+                    let cellOutputHtml = await notebookUI.getCellOutputHTML(3);
+                    assert.include(cellOutputHtml, '<canvas ');
+                    cellOutputHtml = await notebookUI.getCellOutputHTML(8);
+                    assert.include(cellOutputHtml, '<canvas ');
+                });
+            });
         });
     });
 });
diff --git a/src/test/datascience/uiTests/notebooks/ipyvolume_widgets.ipynb b/src/test/datascience/uiTests/notebooks/ipyvolume_widgets.ipynb
new file mode 100644
index 000000000000..a42becbc0da1
--- /dev/null
+++ b/src/test/datascience/uiTests/notebooks/ipyvolume_widgets.ipynb
@@ -0,0 +1,107 @@
+{
+    "nbformat": 4,
+    "nbformat_minor": 2,
+    "metadata": {
+        "language_info": {
+            "name": "python",
+            "codemirror_mode": {
+                "name": "ipython",
+                "version": 3
+            },
+            "version": "3.8.1-final"
+        },
+        "orig_nbformat": 2,
+        "file_extension": ".py",
+        "mimetype": "text/x-python",
+        "name": "python",
+        "npconvert_exporter": "python",
+        "pygments_lexer": "ipython3",
+        "version": 3
+    },
+    "cells": [
+        {
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Install ipyvolume\n",
+                "pip install ipyvolume"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 11,
+            "metadata": {},
+            "outputs": [
+            ],
+            "source": [
+                "import ipyvolume as ipv\n",
+                "import numpy as np\n",
+                "x, y, z, u, v, w = np.random.random((6, 1000))*2-1\n",
+                "selected = np.random.randint(0, 1000, 100)\n",
+                "ipv.figure()\n",
+                "quiver = ipv.quiver(x, y, z, u, v, w, size=5, size_selected=8, selected=selected)\n",
+                "\n",
+                "from ipywidgets import FloatSlider, ColorPicker, VBox, jslink\n",
+                "size = FloatSlider(min=0, max=30, step=0.1)\n",
+                "size_selected = FloatSlider(min=0, max=30, step=0.1)\n",
+                "color = ColorPicker()\n",
+                "color_selected = ColorPicker()\n",
+                "jslink((quiver, 'size'), (size, 'value'))\n",
+                "jslink((quiver, 'size_selected'), (size_selected, 'value'))\n",
+                "jslink((quiver, 'color'), (color, 'value'))\n",
+                "jslink((quiver, 'color_selected'), (color_selected, 'value'))\n",
+                "VBox([ipv.gcc(), size, size_selected, color, color_selected])"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 12,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "\n",
+                "import ipyvolume as ipv\n",
+                "import numpy as np"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 13,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "\n",
+                "s = 1/2**0.5\n",
+                "# 4 vertices for the tetrahedron\n",
+                "x = np.array([1.,  -1, 0,  0])\n",
+                "y = np.array([0,   0, 1., -1])\n",
+                "z = np.array([-s, -s, s,  s])\n",
+                "# and 4 surfaces (triangles), where the number refer to the vertex index\n",
+                "triangles = [(0, 1, 2), (0, 1, 3), (0, 2, 3), (1,3,2)]"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 14,
+            "metadata": {},
+            "outputs": [
+            ],
+            "source": [
+                "ipv.figure()\n",
+                "# we draw the tetrahedron\n",
+                "mesh = ipv.plot_trisurf(x, y, z, triangles=triangles, color='orange')\n",
+                "# and also mark the vertices\n",
+                "ipv.scatter(x, y, z, marker='sphere', color='blue')\n",
+                "ipv.xyzlim(-2, 2)\n",
+                "ipv.show()"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": []
+        }
+    ]
+}
diff --git a/src/test/datascience/uiTests/notebooks/pythreejs_widgets.ipynb b/src/test/datascience/uiTests/notebooks/pythreejs_widgets.ipynb
new file mode 100644
index 000000000000..0d9ec45b6aae
--- /dev/null
+++ b/src/test/datascience/uiTests/notebooks/pythreejs_widgets.ipynb
@@ -0,0 +1,156 @@
+{
+    "nbformat": 4,
+    "nbformat_minor": 2,
+    "metadata": {
+        "language_info": {
+            "name": "python",
+            "codemirror_mode": {
+                "name": "ipython",
+                "version": 3
+            },
+            "version": "3.8.1-final"
+        },
+        "orig_nbformat": 2,
+        "file_extension": ".py",
+        "mimetype": "text/x-python",
+        "name": "python",
+        "npconvert_exporter": "python",
+        "pygments_lexer": "ipython3",
+        "version": 3
+    },
+    "cells": [
+        {
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Intall pythreejs\n",
+                "pip install pythreejs"
+            ],
+            "execution_count": null,
+            "outputs": []
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 11,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "from pythreejs import *\n",
+                "from IPython.display import display\n",
+                "from math import pi\n",
+                ""
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 12,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "# Reduce repo churn for examples with embedded state:\n",
+                "from pythreejs._example_helper import use_example_model_ids\n",
+                "use_example_model_ids()"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 13,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "BoxGeometry(\n",
+                "    width=5,\n",
+                "    height=10,\n",
+                "    depth=15,\n",
+                "    widthSegments=5,\n",
+                "    heightSegments=10,\n",
+                "    depthSegments=15)"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 14,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "view_width = 600\n",
+                "view_height = 400"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 15,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "sphere = Mesh(\n",
+                "    SphereBufferGeometry(1, 32, 16),\n",
+                "    MeshStandardMaterial(color='red')\n",
+                ")"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 16,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "cube = Mesh(\n",
+                "    BoxBufferGeometry(1, 1, 1),\n",
+                "    MeshPhysicalMaterial(color='green'),\n",
+                "    position=[2, 0, 4]\n",
+                ")\n",
+                ""
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 17,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "camera = PerspectiveCamera( position=[10, 6, 10], aspect=view_width/view_height)\n",
+                "key_light = DirectionalLight(position=[0, 10, 10])\n",
+                "ambient_light = AmbientLight()"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": 18,
+            "metadata": {},
+            "outputs": [
+            ],
+            "source": [
+                "f = \"\"\"\n",
+                "function f(origu, origv, out) {\n",
+                "    // scale u and v to the ranges I want: [0, 2*pi]\n",
+                "    var u = 2*Math.PI*origu;\n",
+                "    var v = 2*Math.PI*origv;\n",
+                "\n",
+                "    var x = Math.sin(u);\n",
+                "    var y = Math.cos(v);\n",
+                "    var z = Math.cos(u+v);\n",
+                "\n",
+                "    out.set(x,y,z)\n",
+                "}\n",
+                "\"\"\"\n",
+                "surf_g = ParametricGeometry(func=f, slices=16, stacks=16);\n",
+                "\n",
+                "surf1 = Mesh(geometry=surf_g,\n",
+                "             material=MeshLambertMaterial(color='green', side='FrontSide'))\n",
+                "surf2 = Mesh(geometry=surf_g,\n",
+                "             material=MeshLambertMaterial(color='yellow', side='BackSide'))\n",
+                "surf = Group(children=[surf1, surf2])\n",
+                "\n",
+                "camera2 = PerspectiveCamera( position=[10, 6, 10], aspect=view_width/view_height)\n",
+                "scene2 = Scene(children=[surf, camera2,\n",
+                "                         DirectionalLight(position=[3, 5, 1], intensity=0.6),\n",
+                "                         AmbientLight(intensity=0.5)])\n",
+                "renderer2 = Renderer(camera=camera2, scene=scene2,\n",
+                "                     controls=[OrbitControls(controlling=camera2)],\n",
+                "                     width=view_width, height=view_height)\n",
+                "display(renderer2)"
+            ]
+        }
+    ]
+}