fastplotlib · kushalkolar · Sep 24, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 11, 2023
diff --git a/examples/notebooks/simple.ipynb b/examples/notebooks/simple.ipynb
@@ -76,7 +76,9 @@
    "id": "a9b386ac-9218-4f8f-97b3-f29b4201ef55",
    "metadata": {},
    "source": [
-    "## Simple image"
+    "## Simple image\n",
+    "\n",
+    "We are going to be using `jupyterlab-sidecar` to render some of the plots on the side. This makes it very easy to interact with your plots without having to constantly scroll up and down :D"
    ]
   },
   {
@@ -98,7 +100,7 @@
     "image_graphic = plot.add_image(data=data, name=\"sample-image\")\n",
     "\n",
     "# show the plot\n",
-    "plot.show()"
+    "plot.show(sidecar_kwargs={\"title\": \"sample image\", \"layout\": {'width': '800px'}})"
    ]
   },
   {
@@ -429,6 +431,17 @@
     "image_graphic == plot[\"sample-image\"]"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "058d9785-a692-46f6-a062-cdec9c040afe",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# close the sidecar\n",
+    "plot.sidecar.close()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "5694dca1-1041-4e09-a1da-85b293c5af47",
@@ -452,7 +465,8 @@
     "\n",
     "plot_rgb.add_image(new_data, name=\"rgb-image\")\n",
     "\n",
-    "plot_rgb.show()"
+    "# show the plot\n",
+    "plot_rgb.show(sidecar_kwargs={\"title\": \"RGB image\", \"layout\": {'width': '800px'}})"
    ]
   },
   {
@@ -500,6 +514,17 @@
     "plot_test(\"astronaut_RGB\", plot_rgb)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8316b4f2-3d6e-46b5-8776-c7c963a7aa99",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# close sidecar\n",
+    "plot_rgb.sidecar.close()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "1cb03f42-1029-4b16-a16b-35447d9e2955",
@@ -542,7 +567,7 @@
     "plot_v.add_animations(update_data)\n",
     "\n",
     "# show the plot\n",
-    "plot_v.show()"
+    "plot_v.show(sidecar_kwargs={\"title\": \"random image\", \"layout\": {'width': '800px'}})"
    ]
   },
   {
@@ -576,7 +601,7 @@
     "\n",
     "plot_sync.add_animations(update_data_2)\n",
     "\n",
-    "plot_sync.show()"
+    "plot_sync.show(sidecar=False)"
    ]
   },
   {
@@ -602,7 +627,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "VBox([plot_v.show(), plot_sync.show()])"
+    "VBox([plot_v.show(sidecar=False), plot_sync.show(sidecar=False)])"
    ]
   },
   {
@@ -612,7 +637,18 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "HBox([plot_v.show(), plot_sync.show()])"
+    "HBox([plot_v.show(sidecar=False), plot_sync.show(sidecar=False)])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f33f4cd9-02fc-41b7-961b-9dfeb455b63a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# close sidecar\n",
+    "plot_v.sidecar.close()"
    ]
   },
   {
@@ -688,7 +724,8 @@
     "colors = [\"r\"] * 25 + [\"purple\"] * 25 + [\"y\"] * 25 + [\"b\"] * 25\n",
     "sinc_graphic = plot_l.add_line(data=sinc, thickness=5, colors = colors)\n",
     "\n",
-    "plot_l.show()"
+    "# show the plot\n",
+    "plot_l.show(sidecar_kwargs={\"title\": \"lines\", \"layout\": {'width': '800px'}})"
    ]
   },
   {
@@ -971,6 +1008,17 @@
     "plot_test(\"lines-underlay\", plot_l)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bef729ea-f524-4efd-a189-bfca23b39af5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# close sidecar\n",
+    "plot_l.sidecar.close()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "2c90862e-2f2a-451f-a468-0cf6b857e87a",
@@ -1030,6 +1078,19 @@
     "plot_test(\"lines-3d\", plot_l3d)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c2c70541-98fe-4e02-a718-ac2857cc25be",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "# close sidecar\n",
+    "plot_l3d.sidecar.close()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "a202b3d0-2a0b-450a-93d4-76d0a1129d1d",
@@ -1159,6 +1220,17 @@
     "scatter_graphic.data[n_points:n_points * 2, 0] = np.linspace(-40, 0, n_points)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a9ffdde4-4b8e-4ff7-98b3-464cf5462d20",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# close sidecar\n",
+    "plot_s.sidecar.close()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "d9e554de-c436-4684-a46a-ce8a33d409ac",
@@ -1176,8 +1248,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "row1 = HBox([plot.show(), plot_v.show(), plot_sync.show()])\n",
-    "row2 = HBox([plot_l.show(), plot_l3d.show(), plot_s.show()])\n",
+    "row1 = HBox([plot.show(sidecar=False), plot_v.show(sidecar=False), plot_sync.show(sidecar=False)])\n",
+    "row2 = HBox([plot_l.show(sidecar=False), plot_l3d.show(sidecar=False), plot_s.show(sidecar=False)])\n",
     "\n",
     "VBox([row1, row2])"
    ]

diff --git a/fastplotlib/layouts/_plot.py b/fastplotlib/layouts/_plot.py
@@ -4,10 +4,12 @@
 import os
 
 import pygfx
+from IPython.display import display
 from wgpu.gui.auto import WgpuCanvas, is_jupyter
 
 if is_jupyter():
     from ipywidgets import HBox, Layout, Button, ToggleButton, VBox
+    from sidecar import Sidecar
 
 from ._subplot import Subplot
 from ._record_mixin import RecordMixin
@@ -64,6 +66,7 @@ def __init__(
         self._starting_size = size
 
         self.toolbar = None
+        self.sidecar = None
 
     def render(self):
         super(Plot, self).render()
@@ -72,7 +75,12 @@ def render(self):
         self.canvas.request_draw()
 
     def show(
-        self, autoscale: bool = True, maintain_aspect: bool = None, toolbar: bool = True
+        self,
+        autoscale: bool = True,
+        maintain_aspect: bool = None,
+        toolbar: bool = True,
+        sidecar: bool = True,
+        sidecar_kwargs: dict = None
     ):
         """
         Begins the rendering event loop and returns the canvas
@@ -88,6 +96,13 @@ def show(
         toolbar: bool, default True
             show toolbar
 
+        sidecar: bool, default True
+            display the plot in a ``jupyterlab-sidecar``
+
+        sidecar: dict, default None
+            kwargs for sidecar instance to display plot
+            i.e. title, layout
+
         Returns
         -------
         WgpuCanvas
@@ -117,7 +132,18 @@ def show(
             self.toolbar = ToolBar(self)
             self.toolbar.maintain_aspect_button.value = maintain_aspect
 
-        return VBox([self.canvas, self.toolbar.widget])
+        if not sidecar:
+            return VBox([self.canvas, self.toolbar.widget])
+
+        if self.sidecar is None:
+            # sidecar doesn't like unpacking when kwargs are `None`
+            if sidecar_kwargs is not None:
+                self.sidecar = Sidecar(**sidecar_kwargs)
+            else:
+                self.sidecar = Sidecar()
+
+        with self.sidecar:
+            return display(VBox([self.canvas, self.toolbar.widget]))
 
     def close(self):
         """Close Plot"""
@@ -126,6 +152,9 @@ def close(self):
         if self.toolbar is not None:
             self.toolbar.widget.close()
 
+        if self.sidecar is not None:
+            self.sidecar.close()
+
 
 class ToolBar:
     def __init__(self, plot: Plot):

diff --git a/setup.py b/setup.py
@@ -26,7 +26,8 @@
     [
         "jupyterlab",
         "jupyter-rfb>=0.4.1",
-        "ipywidgets>=8.0.0,<9"
+        "ipywidgets>=8.0.0,<9",
+        "sidecar"
     ],
 
     "tests":
@@ -39,7 +40,8 @@
         "jupyter-rfb>=0.4.1",
         "ipywidgets>=8.0.0,<9",
         "scikit-learn",
-        "tqdm"
+        "tqdm",
+        "sidecar"
     ]
 }