fix layout

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -16,3 +16,34 @@ html, body {
     //font-size: 12px;
     //color: blue;
 }
+
+.maingrid {
+    display: grid;
+    grid-template-columns: 25% 75%;
+    width: 100%;
+}
+.graphplot-col {
+    display: grid;
+    grid-template-columns: 100%;
+}
+.timeseries-col{
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+.graphplot-card {
+    heigth:400px;
+    /* grid-column: 1; */
+}
+.gpstate-control-card.vertex {
+    height:min-content;
+    /* grid-column: 1; */
+}
+.gpstate-control-card.edge {
+    height:min-content;
+    /* grid-column: 1; */
+}
+
+.timeslider-card {
+    height:min-content;
+}

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -158,7 +158,7 @@ function graphplot_card(app; kwargs...)
         @debug "GP: viewport => adapt xy scaling"
         adapt_xy_scaling!(ax)
     end
-    Card(fig; kwargs...)
+    Card(fig; class="graphplot-card", kwargs...)
 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)
@@ -172,6 +172,7 @@ function _gracefully_extract_states!(vec, sol, t, idxs, rel)
     end
 end
 function adapt_xy_scaling!(ax)
+    autolimits!(ax)
     vp = ax.scene.viewport[]
     fl = ax.finallimits[]
     vp_aspect = reduce(/, vp.widths)
@@ -212,6 +213,7 @@ function timeslider_card(app)
             justify_content="begin",
             align_items="center",
         );
+        class="timeslider-card"
     );
 end
 
@@ -222,6 +224,7 @@ function gpstate_control_card(app, type)
     stateobs_rel = type ==:vertex ? app.graphplot.nstate_rel : app.graphplot.estate_rel
     colorrange = type == :vertex ? app.graphplot.ncolorrange : app.graphplot.ecolorrange
     colorscheme = type == :vertex ? app.graphplot.ncolorscheme : app.graphplot.ecolorscheme
+    class = type == :vertex ? "gpstate-control-card vertex" : "gpstate-control-card edge"
 
     ####
     #### State selection
@@ -306,7 +309,8 @@ function gpstate_control_card(app, type)
             cslider,
             # RoundedLabel(@lift $maxrange[2]; style=Styles("text-align"=>"left"));
             columns="100%",
-        )
+        );
+        class
     )
 end
 function _maxrange(sol, idxs, rel)

NetworkDynamicsInspector/src/widgets.jl

@@ -282,6 +282,22 @@ function Bonito.jsrender(session::Session, slider::ContinuousSlider)
                 }
             }, { signal: controller.signal });
         }
+
+        // update positions on resize
+        const observer = new ResizeObserver(entries => {
+            thumbpos_r = isNaN(thumbval_r) ? 0 : val_to_pos(thumbval_r);
+            thumbpos_l = isNaN(thumbval_l) ? 0 : val_to_pos(thumbval_l);
+
+            const thumb_width = thumb_r.offsetWidth / 2;
+            const left_r = (thumbpos_r - thumb_width) + 'px';
+            const left_l = (thumbpos_l - thumb_width) + 'px';
+
+            thumb_l.style.left = left_l;
+            thumb_r.style.left = left_r;
+            track_active.style.left = thumbpos_l + 'px';  // Update the active track
+            track_active.style.width = (thumbpos_r-thumbpos_l) + 'px';  // Update the active track
+        });
+        observer.observe(container);
     }
     """
     onload(session, container, jscode)
@@ -383,14 +399,17 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
         select
     )
 
-    # jqdocument = Bonito.JSString(raw"$(document)")
+    jqdocument = Bonito.JSString(raw"$(document)")
     jqselect = Bonito.JSString(raw"$('#"* id * raw"')")
 
     esc = Bonito.JSString(raw"$")
     js_onload = js"""
     (select) => {
-        $jqselect.select2({
-            placeholder: $(multiselect.placeholder)
+        $(jqdocument).ready(function(){
+            $jqselect.select2({
+                width: '100%',
+                placeholder: $(multiselect.placeholder)
+            });
         });
 
         function array_equal(a1, a2){

test/Inspector_test.jl

@@ -81,13 +81,20 @@ let
         @info "start new session"
         WGLMakie.activate!(resize_to=:parent)
         NetworkDynamicsInspector.clear_obs!(app)
-        Grid(
-            NetworkDynamicsInspector.graphplot_card(app; height="400px"),
-            NetworkDynamicsInspector.gpstate_control_card(app, :vertex),
-            NetworkDynamicsInspector.gpstate_control_card(app, :edge),
-            NetworkDynamicsInspector.timeslider_card(app),
-            columns="100%",
-            width="500px"
+        DOM.div(
+            DOM.div(
+                NetworkDynamicsInspector.graphplot_card(app),
+                NetworkDynamicsInspector.gpstate_control_card(app, :vertex),
+                NetworkDynamicsInspector.gpstate_control_card(app, :edge),
+                class="graphplot-col"
+            ),
+            DOM.div(
+                NetworkDynamicsInspector.timeslider_card(app),
+                class="timeseries-col"
+            ),
+            # columns="1fr 2fr",
+            # width="500px",
+            class="maingrid"
         ) |> wrap_assets
     end;
     serve_app(_app)