Add support for filling layout (#115)

Author: cpsievert

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED]
 
+* Widgets now `fill` inside of a `fillable` container by default. For examples, see the [ipyleaflet](https://github.com/posit-dev/py-shinywidgets/blob/main/examples/ipyleaflet/app.py), [plotly](https://github.com/posit-dev/py-shinywidgets/blob/main/examples/plotly/app.py), or other [output](https://github.com/posit-dev/py-shinywidgets/blob/main/examples/outputs/app.py) examples. If this intelligent filling isn't desirable, either provide a `height` or `fillable=False` on `output_widget()`. (#115)
 * `as_widget()` uses the new `altair.JupyterChart()` to coerce `altair.Chart()` into a `ipywidgets.widgets.Widget` instance. (#120)
 
 ## [0.2.2] - 2023-10-31

examples/ipyleaflet/app.py

@@ -1,9 +1,10 @@
-from shiny import *
-from shinywidgets import output_widget, register_widget, reactive_read
 import ipyleaflet as L
 from htmltools import css
+from shiny import *
+
+from shinywidgets import output_widget, reactive_read, register_widget
 
-app_ui = ui.page_fluid(
+app_ui = ui.page_fillable(
     ui.div(
         ui.input_slider("zoom", "Map zoom level", value=4, min=1, max=10),
         ui.output_text("map_bounds"),

examples/outputs/app.py

@@ -4,42 +4,41 @@
 
 from shinywidgets import *
 
-app_ui = ui.page_fluid(
-    bokeh_dependency(),
-    ui.layout_sidebar(
-        ui.panel_sidebar(
-            ui.input_radio_buttons(
-                "framework",
-                "Choose an ipywidget package",
-                [
-                    "qgrid",
-                    "ipyleaflet",
-                    "pydeck",
-                    "altair",
-                    "plotly",
-                    "bokeh",
-                    "bqplot",
-                    "ipychart",
-                    "ipywebrtc",
-                    # TODO: fix me
-                    # "ipyvolume",
-                ],
-                selected="ipyleaflet",
-            )
-        ),
-        ui.panel_main(
-            ui.output_ui("figure"),
-        ),
+app_ui = ui.page_sidebar(
+    ui.sidebar(
+        ui.input_radio_buttons(
+            "framework",
+            "Choose a widget",
+            [
+                "altair",
+                "plotly",
+                "ipyleaflet",
+                "pydeck",
+                "ipysigma",
+                "bokeh",
+                "bqplot",
+                "ipychart",
+                "ipywebrtc",
+                # TODO: fix ipyvolume, qgrid
+            ],
+            selected="altair",
+        )
     ),
-    title="ipywidgets in Shiny",
+    bokeh_dependency(),
+    ui.output_ui("figure", fill=True, fillable=True),
+    title="Hello Jupyter Widgets in Shiny for Python",
 )
 
 
 def server(input: Inputs, output: Outputs, session: Session):
     @output(id="figure")
     @render.ui
     def _():
-        return output_widget(input.framework())
+        return ui.card(
+            ui.card_header(input.framework()),
+            output_widget(input.framework()),
+            full_screen=True,
+        )
 
     @output(id="ipyleaflet")
     @render_widget
@@ -122,11 +121,12 @@ def _():
     @output(id="plotly")
     @render_widget
     def _():
-        import plotly.graph_objects as go
+        import plotly.express as px
 
-        return go.FigureWidget(
-            data=[go.Bar(y=[2, 1, 3])],
-            layout_title_text="A Figure Displayed with fig.show()",
+        return px.scatter(
+            x=np.random.randn(100),
+            y=np.random.randn(100),
+            color=np.random.randn(100),
         )
 
     @output(id="bqplot")
@@ -212,6 +212,14 @@ def _():
         x, y, z, u, v, w = np.random.random((6, 1000)) * 2 - 1
         return quickquiver(x, y, z, u, v, w, size=5)
 
+    @output(id="ipysigma")
+    @render_widget
+    def _():
+        import igraph as ig
+        from ipysigma import Sigma
+        g = ig.Graph.Famous('Zachary')
+        return Sigma(g, node_size=g.degree, node_color=g.betweenness(), node_color_gradient='Viridis')
+
     @output(id="pydeck")
     @render_widget
     def _():

examples/plotly/app.py

@@ -1,9 +1,9 @@
 import numpy as np
+import plotly.graph_objs as go
+from shiny import *
 from sklearn.linear_model import LinearRegression
 
-from shiny import *
 from shinywidgets import output_widget, register_widget
-import plotly.graph_objs as go
 
 # Generate some data and fit a linear regression
 n = 10000
@@ -13,7 +13,7 @@
 fit = LinearRegression().fit(x.reshape(-1, 1), dat[1])
 xgrid = np.linspace(start=min(x), stop=max(x), num=30)
 
-app_ui = ui.page_fluid(
+app_ui = ui.page_fillable(
     ui.input_checkbox("show_fit", "Show fitted line", value=True),
     output_widget("scatterplot"),
 )

examples/pydeck/app.py

@@ -1,9 +1,9 @@
 import pydeck as pdk
-
 from shiny import *
+
 from shinywidgets import *
 
-app_ui = ui.page_fluid(
+app_ui = ui.page_fillable(
     ui.input_slider("zoom", "Zoom", 0, 20, 6, step=1),
     output_widget("pydeck")
 )

js/src/output.ts

@@ -75,7 +75,7 @@ class IPyWidgetOutput extends Shiny.OutputBinding {
     Shiny.unbindAll(el);
     this.renderError(el, err);
   }
-  renderValue(el: HTMLElement, data): void {
+  async renderValue(el: HTMLElement, data): Promise<void> {
 
     // Allow for a None/null value to hide the widget (css inspired by htmlwidgets)
     if (!data) {
@@ -87,23 +87,69 @@ class IPyWidgetOutput extends Shiny.OutputBinding {
 
     // At this time point, we should've already handled an 'open' message, and so
     // the model should be ready to use
-    const model = manager.get_model(data.model_id);
+    const model = await manager.get_model(data.model_id);
     if (!model) {
       throw new Error(`No model found for id ${data.model_id}`);
     }
 
-    model.then((m) => {
-      const view = manager.create_view(m, {});
-      view.then(v => {
-        manager.display_view(v, {el: el}).then(() => {
-          // TODO: It would be better to .close() the widget here, but
-          // I'm not sure how to do that yet (at least client-side)
-          while (el.childNodes.length > 1) {
-            el.removeChild(el.childNodes[0]);
-          }
-        })
-      });
+    const view = await manager.create_view(model, {});
+    await manager.display_view(view, {el: el});
+
+    // Don't allow more than one .lmWidget container, which can happen
+    // when the view is displayed more than once
+    // TODO: It's probably better to get view(s) from m.views and .remove() them
+    while (el.childNodes.length > 1) {
+      el.removeChild(el.childNodes[0]);
+    }
+
+    // Only carry the potential to fill (i.e., add fill classes)
+    // if `output_widget(fillable=True)`
+    if (!el.classList.contains("html-fill-container")) return;
+
+    // And only fill if the `Widget.layout.height` isn't set
+    if (!data.fill) return;
+
+    // Make ipywidgets container (.lmWidget) a fill carrier
+    // el should already be a fill carrier (done during markup generation)
+    const lmWidget = el.children[0] as HTMLElement;
+    lmWidget?.classList.add("html-fill-container", "html-fill-item");
+
+    // lmWidget's children is the actual widget implementation.
+    // Ideally this would be a single element, but some widget
+    // implementations (e.g., pydeck, altair) have multiple direct children.
+    // It seems relatively safe to make all of them fill items, but there's
+    // at least one case where it's problematic (pydeck)
+    lmWidget.childNodes.forEach((child) => {
+      if (!(child instanceof HTMLElement)) return;
+      if (child.classList.contains("deckgl-ui-elements-overlay")) return;
+      child.classList.add("html-fill-item");
+    });
+
+    this._maybeResize(lmWidget);
+  }
+  _maybeResize(lmWidget: HTMLElement): void {
+    const impl = lmWidget.children[0];
+    if (impl.children.length > 0) {
+      return this._doResize(impl);
+    }
+
+    // Some widget implementation (e.g., ipyleaflet, pydeck) won't actually
+    // have rendered to the DOM at this point, so wait until they do
+    const mo = new MutationObserver((mutations) => {
+      if (impl.children.length > 0) {
+        mo.disconnect();
+        this._doResize(impl);
+      }
     });
+
+    mo.observe(impl, {childList: true});
+  }
+  _doResize(impl: Element): void {
+    // Trigger resize event to force layout (setTimeout() is needed for altair)
+    // TODO: debounce this call?
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 0);
   }
 }
 

shinywidgets/_as_widget.py

@@ -48,6 +48,13 @@ def as_widget_bokeh(x: object) -> Optional[Widget]:
             "Install the jupyter_bokeh package to use bokeh with shinywidgets."
         )
 
+    # TODO: ideally we'd do this in set_layout_defaults() but doing
+    # `BokehModel(x)._model.sizing_mode = "stretch_both"`
+    # there, but that doesn't seem to work??
+    from bokeh.plotting import figure
+    if isinstance(x, figure):
+        x.sizing_mode = "stretch_both"
+
     return BokehModel(x)  # type: ignore
 
 

shinywidgets/_dependencies.py

@@ -54,6 +54,7 @@ def output_binding_dependency() -> HTMLDependency:
         version=__version__,
         source={"package": "shinywidgets", "subdir": "static"},
         script={"src": "output.js"},
+        stylesheet={"href": "shinywidgets.css"},
     )