apmtools 0.2.23__tar.gz → 0.2.24__tar.gz

{apmtools-0.2.23 → apmtools-0.2.24}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: apmtools
-Version: 0.2.023
+Version: 0.2.024
 Summary: A collection of tools for processing air pollution monitoring data
 Project-URL: Homepage, https://github.com/federlorenz/apmtools
 Author-email: Federico Lorenzetti <lorenzetti.federico@gmail.com>

{apmtools-0.2.23 → apmtools-0.2.24}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "apmtools"
-version = "0.2.023"
+version = "0.2.024"
 authors = [
   { name="Federico Lorenzetti", email="lorenzetti.federico@gmail.com" },
 ]

{apmtools-0.2.23 → apmtools-0.2.24}/src/apmtools/shiny/summary.py

@@ -528,7 +528,8 @@ def create_summary_app(
             .summary-plot-container {
                 width: 100%;
                 max-width: none;
-                aspect-ratio: 2 / 1;
+                /* Height is set from actual rendered width by ResizeObserver. */
+                height: 500px;
                 min-width: 0;
                 min-height: 0;
                 padding: 0;
@@ -544,32 +545,46 @@ def create_summary_app(
             }
         """),
             ui.tags.script("""
-            // Plotly sometimes retains the pixel width measured before the
-            // Shiny sidebar and widget have finished laying out.
             (() => {
-              function resizePlot() {
+              // Calculate the actual height in pixels from the rendered width.
+              // CSS aspect-ratio alone does not reliably size shinywidgets.
+              const install = () => {
                 const container = document.querySelector('.summary-plot-container');
-                if (!container || !window.Plotly) return;
-                const graph = container.querySelector('.js-plotly-plot');
-                if (graph) window.Plotly.Plots.resize(graph);
-              }
-              const observer = new ResizeObserver(resizePlot);
-              const attach = () => {
-                const container = document.querySelector('.summary-plot-container');
-                if (!container) return false;
+                if (!container || container.dataset.aspectObserverInstalled) return !!container;
+                container.dataset.aspectObserverInstalled = '1';
+                let previousWidth = 0;
+                const resize = () => {
+                  const width = container.getBoundingClientRect().width;
+                  if (width <= 0) return;
+                  const height = Math.round(width / 2);
+                  if (width === previousWidth && container.style.height === `${height}px`) return;
+                  previousWidth = width;
+                  container.style.height = `${height}px`;
+                  const widget = container.querySelector('#plot');
+                  if (widget) {
+                    widget.style.width = '100%';
+                    widget.style.height = `${height}px`;
+                  }
+                  const graph = container.querySelector('.js-plotly-plot');
+                  if (graph && window.Plotly) {
+                    // Plotly sometimes retains a previous fixed pixel height.
+                    window.Plotly.relayout(graph, {width: Math.round(width), height: height});
+                  }
+                };
+                const observer = new ResizeObserver(resize);
                 observer.observe(container);
-                resizePlot();
+                window.addEventListener('resize', resize);
+                // React to Shiny rendering a new Plotly graph.
+                const mutation = new MutationObserver(() => requestAnimationFrame(resize));
+                mutation.observe(container, {childList: true, subtree: false});
+                requestAnimationFrame(resize);
                 return true;
               };
-              document.addEventListener('DOMContentLoaded', attach);
-              window.addEventListener('resize', resizePlot);
-              if (!attach()) {
+              if (!install()) {
                 const startup = new MutationObserver((_, watcher) => {
-                  if (attach()) watcher.disconnect();
-                });
-                startup.observe(document.documentElement, {
-                  childList: true, subtree: true
+                  if (install()) watcher.disconnect();
                 });
+                startup.observe(document.documentElement, {childList: true, subtree: true});
               }
             })();
         """),