apmtools 0.2.22__tar.gz → 0.2.24__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: apmtools
-Version: 0.2.022
+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.22 → apmtools-0.2.24}/pyproject.toml

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

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

@@ -449,72 +449,7 @@ def create_summary_app(
     subset_columns = columns
 
     app_ui = ui.page_sidebar(
-        ui.div(
-            ui.tags.style("""
-            /* Allow the main pane to consume all width remaining after the sidebar. */
-            .bslib-sidebar-layout > .main,
-            .bslib-sidebar-layout > main,
-            .bslib-sidebar-layout .main {
-                min-width: 0;
-                width: 100%;
-                max-width: none;
-            }
-            /* Remove the default Bootstrap container width limit, if present. */
-            .container, .container-fluid { max-width: none !important; }
-            .summary-plot-container {
-                width: 100%;
-                max-width: none;
-                aspect-ratio: 2 / 1;
-                min-width: 0;
-                min-height: 0;
-                padding: 0;
-                margin: 0;
-                position: relative;
-            }
-            .summary-plot-container > .html-widget-output,
-            .summary-plot-container > .shiny-plot-output,
-            .summary-plot-container > #plot {
-                width: 100% !important;
-                height: 100% !important;
-                max-width: none !important;
-            }
-        """),
-            ui.tags.script("""
-            // Plotly sometimes retains the pixel width measured before the
-            // Shiny sidebar and widget have finished laying out.
-            (() => {
-              function resizePlot() {
-                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;
-                observer.observe(container);
-                resizePlot();
-                return true;
-              };
-              document.addEventListener('DOMContentLoaded', attach);
-              window.addEventListener('resize', resizePlot);
-              if (!attach()) {
-                const startup = new MutationObserver((_, watcher) => {
-                  if (attach()) watcher.disconnect();
-                });
-                startup.observe(document.documentElement, {
-                  childList: true, subtree: true
-                });
-              }
-            })();
-        """),
-            ui.div(
-                output_widget("plot", height="100%", width="100%"),
-                class_="summary-plot-container",
-            ),
-        ),
-        sidebar=ui.sidebar(
+        ui.sidebar(
             ui.h4("Plot controls"),
             ui.input_select("plot_type", "Plot type",
                             choices=PLOT_TYPES, selected=plot_type),
@@ -578,6 +513,86 @@ def create_summary_app(
                 "Summary.group_stat()."
             ),
         ),
+        ui.div(
+            ui.tags.style("""
+            /* Allow the main pane to consume all width remaining after the sidebar. */
+            .bslib-sidebar-layout > .main,
+            .bslib-sidebar-layout > main,
+            .bslib-sidebar-layout .main {
+                min-width: 0;
+                width: 100%;
+                max-width: none;
+            }
+            /* Remove the default Bootstrap container width limit, if present. */
+            .container, .container-fluid { max-width: none !important; }
+            .summary-plot-container {
+                width: 100%;
+                max-width: none;
+                /* Height is set from actual rendered width by ResizeObserver. */
+                height: 500px;
+                min-width: 0;
+                min-height: 0;
+                padding: 0;
+                margin: 0;
+                position: relative;
+            }
+            .summary-plot-container > .html-widget-output,
+            .summary-plot-container > .shiny-plot-output,
+            .summary-plot-container > #plot {
+                width: 100% !important;
+                height: 100% !important;
+                max-width: none !important;
+            }
+        """),
+            ui.tags.script("""
+            (() => {
+              // 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 || 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);
+                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;
+              };
+              if (!install()) {
+                const startup = new MutationObserver((_, watcher) => {
+                  if (install()) watcher.disconnect();
+                });
+                startup.observe(document.documentElement, {childList: true, subtree: true});
+              }
+            })();
+        """),
+            ui.div(
+                output_widget("plot", height="100%", width="100%"),
+                class_="summary-plot-container",
+            ),
+        ),
     )
 
     def server(input, output, session):