Filling support for quak; add quak/mosaic to examples (#155)

Author: cpsievert

examples/outputs/app.py

@@ -1,8 +1,12 @@
+from pathlib import Path
+
 import numpy as np
 from shiny import *
 
 from shinywidgets import *
 
+app_dir = Path(__file__).parent
+
 app_ui = ui.page_sidebar(
     ui.sidebar(
         ui.input_radio_buttons(
@@ -13,6 +17,8 @@
                 "plotly",
                 "ipyleaflet",
                 "pydeck",
+                "quak",
+                "mosaic",
                 "ipysigma",
                 "bokeh",
                 "bqplot",
@@ -48,22 +54,26 @@ def _():
 
         source = data.stocks()
 
-        return alt.Chart(source).transform_filter(
-            'datum.symbol==="GOOG"'
-        ).mark_area(
-            tooltip=True,
-            line={'color': '#0281CD'},
-            color=alt.Gradient(
-                gradient='linear',
-                stops=[alt.GradientStop(color='white', offset=0),
-                       alt.GradientStop(color='#0281CD', offset=1)],
-                x1=1, x2=1, y1=1, y2=0
+        return (
+            alt.Chart(source)
+            .transform_filter('datum.symbol==="GOOG"')
+            .mark_area(
+                tooltip=True,
+                line={"color": "#0281CD"},
+                color=alt.Gradient(
+                    gradient="linear",
+                    stops=[
+                        alt.GradientStop(color="white", offset=0),
+                        alt.GradientStop(color="#0281CD", offset=1),
+                    ],
+                    x1=1,
+                    x2=1,
+                    y1=1,
+                    y2=0,
+                ),
             )
-        ).encode(
-            alt.X('date:T'),
-            alt.Y('price:Q')
-        ).properties(
-            title={"text": ["Google's stock price over time"]}
+            .encode(alt.X("date:T"), alt.Y("price:Q"))
+            .properties(title={"text": ["Google's stock price over time"]})
         )
 
     @output(id="plotly")
@@ -73,8 +83,10 @@ def _():
 
         return px.density_heatmap(
             px.data.tips(),
-            x="total_bill", y="tip",
-            marginal_x="histogram", marginal_y="histogram"
+            x="total_bill",
+            y="tip",
+            marginal_x="histogram",
+            marginal_y="histogram",
         )
 
     @output(id="ipyleaflet")
@@ -119,14 +131,48 @@ def _():
         # Combined all of it and render a viewport
         return pdk.Deck(layers=[layer], initial_view_state=view_state)
 
+    @output(id="quak")
+    @render_widget
+    def _():
+        import polars as pl
+        import quak
+
+        df = pl.read_parquet(
+            "https://github.com/uwdata/mosaic/raw/main/data/athletes.parquet"
+        )
+        return quak.Widget(df)
+
+    @output(id="mosaic")
+    @render_widget
+    def _():
+        import polars as pl
+        import yaml
+        from mosaic_widget import MosaicWidget
+
+        flights = pl.read_parquet(
+            "https://github.com/uwdata/mosaic/raw/main/data/flights-200k.parquet"
+        )
+
+        # Load weather spec, remove data key to ensure load from Pandas
+        with open(app_dir / "flights.yaml") as f:
+            spec = yaml.safe_load(f)
+            _ = spec.pop("data")
+
+        return MosaicWidget(spec, data={"flights": flights})
+
     @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')
 
+        g = ig.Graph.Famous("Zachary")
+        return Sigma(
+            g,
+            node_size=g.degree,
+            node_color=g.betweenness(),
+            node_color_gradient="Viridis",
+        )
 
     @output(id="bokeh")
     @render_widget

examples/outputs/flights.yaml

@@ -0,0 +1,51 @@
+meta:
+  title: Cross-Filter Flights (200k)
+  description: >
+    Histograms showing arrival delay, departure time, and distance flown for over 200,000 flights.
+    Select a histogram region to cross-filter the charts.
+    Each plot uses an `intervalX` interactor to populate a shared Selection
+    with `crossfilter` resolution.
+data:
+  flights: { file: data/flights-200k.parquet }
+params:
+  brush: { select: crossfilter }
+vconcat:
+- plot:
+  - mark: rectY
+    data: { from: flights, filterBy: $brush }
+    x: { bin: delay }
+    y: { count: }
+    fill: steelblue
+    inset: 0.5
+  - select: intervalX
+    as: $brush
+  xDomain: Fixed
+  yTickFormat: s
+  width: 1200
+  height: 250
+- plot:
+  - mark: rectY
+    data: { from: flights, filterBy: $brush }
+    x: { bin: time }
+    y: { count: }
+    fill: steelblue
+    inset: 0.5
+  - select: intervalX
+    as: $brush
+  xDomain: Fixed
+  yTickFormat: s
+  width: 1200
+  height: 250
+- plot:
+  - mark: rectY
+    data: { from: flights, filterBy: $brush }
+    x: { bin: distance }
+    y: { count: }
+    fill: steelblue
+    inset: 0.5
+  - select: intervalX
+    as: $brush
+  xDomain: Fixed
+  yTickFormat: s
+  width: 1200
+  height: 250

examples/outputs/requirements.txt

@@ -3,15 +3,17 @@ shinywidgets
 ipywidgets
 numpy
 pandas
-qgrid
 vega_datasets
 bokeh
 jupyter_bokeh
 ipyleaflet
-pydeck
+pydeck==0.8.0
 altair
 plotly
 bqplot
 ipychart
 ipywebrtc
 vega
+quak
+mosaic-widget
+polars

js/src/output.ts

@@ -110,24 +110,40 @@ class IPyWidgetOutput extends Shiny.OutputBinding {
     // The ipywidgets container (.lmWidget)
     const lmWidget = el.children[0] as HTMLElement;
 
-    this._maybeResize(lmWidget);
+    if (fill) {
+      this._onImplementation(lmWidget, () => this._doAddFillClasses(lmWidget));
+    }
+    this._onImplementation(lmWidget, this._doResize);
   }
-  _maybeResize(lmWidget: HTMLElement): void {
+  _onImplementation(lmWidget: HTMLElement, callback: () => void): void {
     if (this._hasImplementation(lmWidget)) {
-      return this._doResize();
+      callback();
+      return;
     }
 
     // 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 (this._hasImplementation(lmWidget)) {
         mo.disconnect();
-        this._doResize();
+        callback();
       }
     });
 
     mo.observe(lmWidget, {childList: true});
   }
+  // In most cases, we can get widgets to fill through Python/CSS, but some widgets
+  // (e.g., quak) don't have a Python API and use shadow DOM, which can only access
+  // from JS
+  _doAddFillClasses(lmWidget: HTMLElement): void {
+    const impl = lmWidget.children[0];
+    const isQuakWidget = impl && !!impl.shadowRoot?.querySelector(".quak");
+    if (isQuakWidget) {
+      impl.classList.add("html-fill-container", "html-fill-item");
+      const quakWidget = impl.shadowRoot.querySelector(".quak") as HTMLElement;
+      quakWidget.style.maxHeight = "unset";
+    }
+  }
   _doResize(): void {
     // Trigger resize event to force layout (setTimeout() is needed for altair)
     // TODO: debounce this call?
@@ -137,7 +153,7 @@ class IPyWidgetOutput extends Shiny.OutputBinding {
   }
   _hasImplementation(lmWidget: HTMLElement): boolean {
     const impl = lmWidget.children[0];
-    return impl && impl.children.length > 0;
+    return impl && (impl.children.length > 0 || impl.shadowRoot?.children.length > 0);
   }
 }