resize plots without activating WGLMakie globally

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -20,6 +20,7 @@ span {
 .maingrid {
     display: grid;
     grid-template-columns: min-content auto;
+    align-items: start; /* make sure ts col is as short as possible for resize event */
     width: 100%;
     gap: 0px;
 }

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -7,7 +7,7 @@ using NetworkDynamics: NetworkDynamics, SII, EIndex, VIndex, Network,
                        obssym, psym, sym, extract_nw
 
 using Graphs: nv, ne
-using WGLMakie: WGLMakie
+using WGLMakie: WGLMakie, WithConfig
 using WGLMakie.Makie: Makie, @lift, MouseEvent, Point2f, with_theme,
                       lines!, vlines!, Theme, Figure, Colorbar, Axis,
                       xlims!, ylims!, autolimits!, hidespines!, hidedecorations!,
@@ -65,7 +65,6 @@ function get_webapp(app)
             @info "GUI Session updated"
         end
 
-        WGLMakie.activate!(resize_to=:parent)
         clear_obs!(app)
 
         resize_gp = js"""

NetworkDynamicsInspector/src/graphplot.jl

@@ -220,7 +220,7 @@ function graphplot_card(app, session)
     <li><strong>Ctrl + Click</strong> resets axis after zoom</li>
     </ul>
     """)
-    Card([fig, help]; class="bonito-card graphplot-card")
+    Card([WithConfig(fig; resize_to=:parent), help]; class="bonito-card graphplot-card")
 end
 function _gracefully_extract_states!(vec, sol, t, idxs, rel)
     isvalid(s) = SII.is_variable(sol, s) || SII.is_parameter(sol, s) || SII.is_observed(sol, s)
@@ -379,7 +379,7 @@ function gpstate_control_card(app, type)
 
     childs = Any[DOM.div(
         selector,
-        DOM.div(fig; style=Styles("height" => "40px")),
+        DOM.div(WithConfig(fig; resize_to=:parent); style=Styles("height" => "40px")),
         # fig,
         # RoundedLabel(@lift $maxrange[1]; style=Styles("text-align"=>"right")),
         cslider,

NetworkDynamicsInspector/src/timeseries.jl

@@ -444,7 +444,7 @@ function timeseries_card(app, key, session)
     card = Card(
         [DOM.div(
             comp_state_sel_dom,
-            DOM.div(fig; class="timeseries-axis-container"),
+            DOM.div(WithConfig(fig; resize_to=:parent); class="timeseries-axis-container"),
             closebutton(app, key);
             class="timeseries-card-container"
         ), help];