fastplotlib · kushalkolar · Sep 24, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 11, 2023
diff --git a/examples/notebooks/gridplot_simple.ipynb b/examples/notebooks/gridplot_simple.ipynb
diff --git a/examples/notebooks/linear_region_selector.ipynb b/examples/notebooks/linear_region_selector.ipynb
@@ -83,27 +83,7 @@
     "ls_x.selection.add_event_handler(set_zoom_x)\n",
     "ls_y.selection.add_event_handler(set_zoom_y)\n",
     "\n",
-    "# make some ipywidget sliders too\n",
-    "# these are not necessary, it's just to show how they can be connected\n",
-    "x_range_slider = IntRangeSlider(\n",
-    "    value=ls_x.selection(),\n",
-    "    min=ls_x.limits[0],\n",
-    "    max=ls_x.limits[1],\n",
-    "    description=\"x\"\n",
-    ")\n",
-    "\n",
-    "y_range_slider = FloatRangeSlider(\n",
-    "    value=ls_y.selection(),\n",
-    "    min=ls_y.limits[0],\n",
-    "    max=ls_y.limits[1],\n",
-    "    description=\"x\"\n",
-    ")\n",
-    "\n",
-    "# connect the region selector to the ipywidget slider\n",
-    "ls_x.add_ipywidget_handler(x_range_slider, step=5)\n",
-    "ls_y.add_ipywidget_handler(y_range_slider, step=0.1)\n",
-    "\n",
-    "VBox([gp.show(), x_range_slider, y_range_slider])"
+    "gp.show(sidecar=False)"
    ]
   },
   {
@@ -219,7 +199,7 @@
     "\n",
     "\n",
     "selector.selection.add_event_handler(update_zoomed_subplots)\n",
-    "plot.show()"
+    "plot.show(sidecar=False)"
    ]
   },
   {
@@ -273,7 +253,7 @@
     "\n",
     "\n",
     "stack_selector.selection.add_event_handler(update_zoomed_stack)\n",
-    "plot.show()"
+    "plot.show(sidecar=False)"
    ]
   },
   {

diff --git a/examples/notebooks/linear_selector.ipynb b/examples/notebooks/linear_selector.ipynb
@@ -60,7 +60,19 @@
     "\n",
     "plot.auto_scale()\n",
     "plot.show()\n",
-    "VBox([plot.show(), ipywidget_slider, ipywidget_slider2, ipywidget_slider3])"
+    "VBox([plot.show(sidecar=False), ipywidget_slider])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a632c8ee-2d4c-44fc-9391-7b2880223fdb",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "selector.step = 0.1"
    ]
   },
   {

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"
    ]
   },
   {
@@ -325,6 +327,18 @@
     "plot_test(\"astronaut\", plot)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0bb1cfc7-1a06-4abb-a10a-a877a0d51c6b",
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "plot.canvas.get_logical_size()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "b53bc11a-ddf1-4786-8dca-8f3d2eaf993d",
@@ -429,6 +443,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,6 +477,7 @@
     "\n",
     "plot_rgb.add_image(new_data, name=\"rgb-image\")\n",
     "\n",
+    "# show the plot\n",
     "plot_rgb.show()"
    ]
   },
@@ -500,6 +526,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",
@@ -576,7 +613,7 @@
     "\n",
     "plot_sync.add_animations(update_data_2)\n",
     "\n",
-    "plot_sync.show()"
+    "plot_sync.show(sidecar=False)"
    ]
   },
   {
@@ -602,7 +639,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "VBox([plot_v.show(), plot_sync.show()])"
+    "VBox([plot_v.show(sidecar=False), plot_sync.show(sidecar=False)])"
    ]
   },
   {
@@ -612,7 +649,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 +736,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 +1020,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 +1090,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 +1232,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 +1260,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/_gridplot.py b/fastplotlib/layouts/_gridplot.py
@@ -13,6 +13,8 @@
 
 if is_jupyter():
     from ipywidgets import HBox, Layout, Button, ToggleButton, VBox, Dropdown
+    from sidecar import Sidecar
+    from IPython.display import display
 
 from ._utils import make_canvas_and_renderer
 from ._defaults import create_controller
@@ -81,6 +83,8 @@ def __init__(
 
         self.shape = shape
         self.toolbar = None
+        self.sidecar = None
+        self.plot_open = False
 
         canvas, renderer = make_canvas_and_renderer(canvas, renderer)
 
@@ -294,7 +298,12 @@ def remove_animation(self, func):
             self._animate_funcs_post.remove(func)
 
     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
@@ -307,15 +316,23 @@ def show(
         maintain_aspect: bool, default ``True``
             maintain aspect ratio
 
-        toolbar: bool, default True
+        toolbar: bool, default ``True``
             show toolbar
 
+        sidecar: bool, default ``True``
+            display plot in a ``jupyterlab-sidecar``
+
+        sidecar_kwargs: dict, default ``None``
+            kwargs for sidecar instance to display plot
+            i.e. title, layout
+
         Returns
         -------
         WgpuCanvas
             the canvas
 
         """
+
         self.canvas.request_draw(self.render)
 
         self.canvas.set_logical_size(*self._starting_size)
@@ -343,7 +360,25 @@ def show(
                 0, 0
             ].camera.maintain_aspect
 
-        return VBox([self.canvas, self.toolbar.widget])
+        if not sidecar:
+            return VBox([self.canvas, self.toolbar.widget])
+
+        # used when plot.show() is being called again but sidecar has been closed via "x" button
+        # need to force new sidecar instance
+        # couldn't figure out how to get access to "close" button in order to add observe method on click
+        if self.plot_open:
+            self.sidecar = None
+
+        if self.sidecar is None:
+            if sidecar_kwargs is not None:
+                self.sidecar = Sidecar(**sidecar_kwargs)
+                self.plot_open = True
+            else:
+                self.sidecar = Sidecar()
+                self.plot_open = True
+
+        with self.sidecar:
+            return display(VBox([self.canvas, self.toolbar.widget]))
 
     def close(self):
         """Close the GridPlot"""
@@ -352,6 +387,11 @@ def close(self):
         if self.toolbar is not None:
             self.toolbar.widget.close()
 
+        if self.sidecar is not None:
+            self.sidecar.close()
+
+        self.plot_open = False
+
     def clear(self):
         """Clear all Subplots"""
         for subplot in self: