Support displaying complex mime types in Output Widget

news/2 Fixes/9503.md

@@ -0,0 +1 @@
+Support displaying of complex outputs (such as Plots) in the Output Widget.

src/test/datascience/notebook/executionService.vscode.test.ts

@@ -99,6 +99,8 @@ suite('DataScience - VSCode Notebook - (Execution) (slow)', function () {
             await startJupyterServer();
             await createEmptyPythonNotebook(disposables);
             assert.isOk(vscodeNotebook.activeNotebookEditor, 'No active notebook');
+            // With less realestate, the outputs might not get rendered (VS Code optimization to avoid rendering if not in viewport).
+            await commands.executeCommand('workbench.action.closePanel');
             traceInfo(`Start Test (completed) ${this.currentTest?.title}`);
         } catch (e) {
             await captureScreenShot(this.currentTest?.title || 'unknown');
@@ -371,6 +373,66 @@ suite('DataScience - VSCode Notebook - (Execution) (slow)', function () {
 
         await waitForExecutionCompletedSuccessfully(cell);
     });
+    test('Clearing output immediately via code', async function () {
+        // Assume you are executing a cell that prints numbers 1-100.
+        // When printing number 50, you click clear.
+        // Cell output should now start printing output from 51 onwards, & not 1.
+        await insertCodeCell(
+            dedent`
+            from ipywidgets import widgets
+            from IPython.display import display, clear_output
+            import time
+
+            display(widgets.Button(description="First Button"))
+
+            time.sleep(2)
+            clear_output()
+
+            display(widgets.Button(description="Second Button"))`,
+            { index: 0 }
+        );
+        const cell = vscodeNotebook.activeNotebookEditor?.notebook.cellAt(0)!;
+
+        await runAllCellsInActiveNotebook();
+
+        await Promise.all([
+            waitForExecutionCompletedSuccessfully(cell),
+            waitForTextOutput(cell, 'Second Button', 0, false)
+        ]);
+    });
+    test('Clearing output via code only when receiving new output', async function () {
+        // Assume you are executing a cell that prints numbers 1-100.
+        // When printing number 50, you click clear.
+        // Cell output should now start printing output from 51 onwards, & not 1.
+        await insertCodeCell(
+            dedent`
+            from ipywidgets import widgets
+            from IPython.display import display, clear_output
+            import time
+
+            display(widgets.Button(description="First Button"))
+
+            time.sleep(2)
+            clear_output(True)
+
+            display(widgets.Button(description="Second Button"))`,
+            { index: 0 }
+        );
+        const cell = vscodeNotebook.activeNotebookEditor?.notebook.cellAt(0)!;
+
+        await runAllCellsInActiveNotebook();
+
+        // Wait for first button to appear then second.
+        await Promise.all([
+            waitForExecutionCompletedSuccessfully(cell),
+            waitForTextOutput(cell, 'First Button', 0, false),
+            waitForTextOutput(cell, 'Second Button', 0, false)
+        ]);
+
+        // Verify first is no longer visible and second is visible.
+        assert.notInclude(getCellOutputs(cell), 'First Button');
+        assert.include(getCellOutputs(cell), 'Second Button');
+    });
     test('Shell commands should give preference to executables in Python Environment', async function () {
         if (IS_REMOTE_NATIVE_TEST()) {
             return this.skip();

src/test/datascience/widgets/notebooks/interactive_button.ipynb

@@ -0,0 +1,28 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import display\n",
+    "from ipywidgets import widgets, interactive\n",
+    "button = widgets.Button(description=\"Click Me!\")\n",
+    "def on_button_clicked(b):\n",
+    "    print(\"Button clicked\")\n",
+    "\n",
+    "display(button)\n",
+    "button.on_click(on_button_clicked)\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

src/test/datascience/widgets/notebooks/interactive_function.ipynb

@@ -0,0 +1,28 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import widgets, interact\n",
+    "def do_something(filter_text):\n",
+    "    print(f\"Executing do_something with '{filter_text}'\")\n",
+    "    return filter_text\n",
+    "    \n",
+    "    \n",
+    "interact(do_something, filter_text=widgets.Text(value='Foo'))\n",
+    "do_something('Hello World')"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

src/test/datascience/widgets/notebooks/interactive_plot.ipynb

@@ -0,0 +1,60 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Since we don't want to install plotly on the CI, we can test with a custom mime type.\n",
+    "# The mime type application/vnd.custom should end up getting rendered as an individual output in the cell (instead of letting the Output Widget handle it - which it cannot).\n",
+    "\n",
+    "import ipywidgets as widgets\n",
+    "from ipywidgets import interact\n",
+    "import IPython.display\n",
+    "\n",
+    "\n",
+    "def update_graph(txt):\n",
+    "    print(f\"Text Value is {txt}\")\n",
+    "    display({\"application/vnd.custom\": f\"Text Value is {txt}\"}, raw=True)\n",
+    "\n",
+    "\n",
+    "text = widgets.Text(value='Foo')\n",
+    "interact(update_graph, txt=text)\n",
+    "update_graph(\"Hello World\")\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# This is a real world example.\n",
+    "\n",
+    "import ipywidgets as widgets\n",
+    "from ipywidgets import interact\n",
+    "import pandas as pd\n",
+    "import plotly.express as px\n",
+    "pd.options.plotting.backend = \"plotly\"\n",
+    "\n",
+    "def update_graph(rng):\n",
+    "    df = pd.DataFrame({\"x\": list(range(*rng)), \"y\": list(range(*rng))})\n",
+    "    fig = df.plot.scatter(x=\"x\", y=\"y\")\n",
+    "    fig.show()\n",
+    "\n",
+    "slider=widgets.IntRangeSlider(value=(0, 10), min=0, max=20, description='Hello')\n",
+    "interact(update_graph, rng=slider)\n",
+    "update_graph([0, 10])\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

src/test/datascience/widgets/notebooks/interactive_plot_another_cell.ipynb

@@ -0,0 +1,84 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipywidgets as widgets\n",
+    "from ipywidgets import interact\n",
+    "# import pandas as pd\n",
+    "# import plotly.express as px\n",
+    "# pd.options.plotting.backend = \"plotly\"\n",
+    "\n",
+    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import display\n",
+    "\n",
+    "out = widgets.Output()\n",
+    "out"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@out.capture()\n",
+    "def function_with_captured_output():\n",
+    "    print('First output widget')\n",
+    "\n",
+    "function_with_captured_output()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "out2 = widgets.Output()\n",
+    "caption = widgets.Label(value='Label Widget')\n",
+    "textbox = widgets.Text()\n",
+    "widgets.link((caption, 'value'), (textbox, 'value'))\n",
+    "\n",
+    "@out.capture()\n",
+    "def function_with_captured_output():\n",
+    "    display(out2)\n",
+    "    display(caption)\n",
+    "    display(textbox)\n",
+    "    # Output a custom mime type instead of a plotly plot so that we don't have to install plotly on CI.\n",
+    "    display({\"application/vnd.custom\": f\"Custom Mime Output under the `output widget`\"}, raw=True)\n",
+    "    # df = pd.DataFrame({\"x\": list(range(10)), \"y\": list(range(10))})\n",
+    "    # fig = df.plot.scatter(x=\"x\", y=\"y\")\n",
+    "    # fig.show()\n",
+    "\n",
+    "\n",
+    "function_with_captured_output()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@out2.capture()\n",
+    "def function_with_captured_output2():\n",
+    "    print('Second output widget')\n",
+    "\n",
+    "function_with_captured_output2()"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

src/test/datascience/widgets/notebooks/nested_output_widget.ipynb

@@ -0,0 +1,72 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import display\n",
+    "\n",
+    "out = widgets.Output()\n",
+    "out"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@out.capture()\n",
+    "def function_with_captured_output():\n",
+    "    print('First output widget')\n",
+    "\n",
+    "function_with_captured_output()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "out2 = widgets.Output()\n",
+    "caption = widgets.Label(value='Label Widget')\n",
+    "textbox = widgets.Text()\n",
+    "widgets.link((caption, 'value'), (textbox, 'value'))\n",
+    "\n",
+    "@out.capture()\n",
+    "def function_with_captured_output():\n",
+    "    display(out2)\n",
+    "    display(caption)\n",
+    "    display(textbox)\n",
+    "\n",
+    "function_with_captured_output()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@out2.capture()\n",
+    "def function_with_captured_output2():\n",
+    "    print('Second output widget')\n",
+    "\n",
+    "function_with_captured_output2()"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}