further work on resizing

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -9,12 +9,12 @@ html, body {
 .select2-container .select2-selection--single .select2-selection__rendered,
 .select2-container .select2-results__option{
     font-family: monospace;
-    //font-size: 20px;
+    /* font-size: 20px; */
 }
 .select2-results__group {
     font-family: sans-serif;
-    //font-size: 12px;
-    //color: blue;
+    /* font-size: 12px; */
+    /* color: blue; */
 }
 
 .maingrid {
@@ -28,16 +28,19 @@ html, body {
     display: flex;
     flex-direction: column;
     gap: 5px;
+    /* to keep shadows visible */
+    /* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
     overflow: hidden; /* otherwise it won't shrink */
+    margin:-10px;
+    padding:10px
 }
 
 .graphplot-card {
-    heigth:400px; /* initial widht and height */
+    height:400px; /* initial widht and height */
     width: 400px;
     min-width:250px;
     resize: both;
     overflow: hidden;
-    /* grid-column: 1; */
 }
 
 .gpstate-control-card {
@@ -55,6 +58,7 @@ html, body {
 .timeseries-card-container{
     display: flex;
     flex-direction: column;
+    overflow: hidden;
     height: 100%;  /* otherwise it won't shrink */
 }
 .timeseries-card-container .comp-state-sel-grid {

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -146,13 +146,15 @@ function graphplot_card(app; kwargs...)
             node_attr=(;colorrange=app.graphplot.ncolorrange, colormap=app.graphplot.ncolorscheme),
             edge_attr=(;colorrange=app.graphplot.ncolorrange, colormap=app.graphplot.ncolorscheme))
 
-        # hidespines!(ax)
-        # hidedecorations!(ax)
+        hidespines!(ax)
+        hidedecorations!(ax)
         fig, ax
     end
+    xratio = Ref{Float64}(1.0)
+    yratio = Ref{Float64}(1.0)
     on(ax.scene.viewport) do lims
         @debug "GP: viewport => adapt xy scaling"
-        adapt_xy_scaling!(ax)
+        adapt_xy_scaling!(xratio, yratio, ax)
         nothing
     end
     Card(fig; class="graphplot-card", kwargs...)
@@ -168,21 +170,41 @@ function _gracefully_extract_states!(vec, sol, t, idxs, rel)
         vec[mask] .= only(sol([t]; idxs=idxs[mask]).u)
     end
 end
-function adapt_xy_scaling!(ax)
+function adapt_xy_scaling!(xratio, yratio, ax)
+    # in theory, this should work without autolimits, but it doesnt
     autolimits!(ax)
+
     vp = ax.scene.viewport[]
     fl = ax.finallimits[]
-    vp_aspect = reduce(/, vp.widths)
-    fl_aspect = reduce(/, fl.widths)
+    vp_aspect = reduce(/, Float64.(vp.widths))
+    fl_aspect = reduce(/, Float64.(fl.widths))
     ratio = vp_aspect/fl_aspect
 
-    if ratio > 1 # need to increase x limits
-        low = ax.finallimits[].origin[1]
-        hi = low + ax.finallimits[].widths[1]
+    potential_x_factor = xratio[]*ratio
+    potential_y_factor = yratio[]/ratio
+
+    if potential_x_factor >= 1 && potential_y_factor >= 1
+        # both valid, pick smaller
+        resize = potential_x_factor < potential_y_factor ? :x : :y
+    elseif potential_x_factor > 1
+        resize = :x
+    elseif potential_y_factor > 1
+        resize = :y
+    else
+        resize = potential_x_factor > potential_y_factor ? :x : :y
+        @warn "No valid scaling factor found, chose $resize"
+    end
+    @info "Resizing $resize"
+
+    if resize == :x
+        xratio[] = potential_x_factor
+        low = Float64(ax.finallimits[].origin[1])
+        hi = Float64(low + ax.finallimits[].widths[1])
         xlims!(ax, ratio*low, ratio*hi)
-    else # need to increast y limits
-        low = ax.finallimits[].origin[2]
-        hi = low + ax.finallimits[].widths[2]
+    else
+        yratio[] = potential_y_factor
+        low = Float64(ax.finallimits[].origin[2])
+        hi = Float64(low + ax.finallimits[].widths[2])
         ylims!(ax, low/ratio, hi/ratio)
     end
 end

NetworkDynamicsInspector/src/utils.jl

@@ -77,3 +77,43 @@ end
 
 getcycled(v::AbstractVector, i) = v[mod1(i, length(v))]
 gendomid(s::String) = replace(string(gensym("selectbox")), "#"=>"")
+
+mutable struct Throttle{F}
+    f::F
+    delay::Float64
+    @atomic prev::Float64
+    @atomic future_task::Union{Timer,Nothing}
+end
+function Throttle(f, delay)
+    Throttle(f, Float64(delay), 0.0, nothing)
+end
+
+function (tr::Throttle)(args...)
+    now = time()
+    if !isnothing(tr.future_task)
+        close(tr.future_task)
+        @atomic tr.future_task = nothing
+    end
+    if now - tr.prev > tr.delay
+        @atomic tr.prev = now
+        return tr.f(args...)
+    else
+        waitfor = tr.delay - (now - tr.prev) + 1e-3
+        @atomic tr.future_task = Timer(waitfor) do _
+            tr(args...)
+        end
+    end
+end
+
+function on_throttled(f, obs; update=false, delay)
+    tr = Throttle(f, delay)
+    on(obs; update) do args...
+        tr(args...)
+    end
+end
+function onany_throttled(f, obs...; update=false, delay)
+    tr = Throttle(f, delay)
+    onany(obs; update) do args...
+        tr(args...)
+    end
+end

test/Inspector_test.jl

@@ -82,6 +82,7 @@ app = (;
 );
 
 let
+    isfile(WGLMakie.WGL.bundle_file) && rm(WGLMakie.WGL.bundle_file)
     _app = App() do session
         @info "start new session"
         WGLMakie.activate!(resize_to=:parent)
@@ -109,12 +110,12 @@ let
             styleTag.innerHTML = `.resize-with-gp { width: ${graphplotWidth} !important; }`;
 
             // Manually trigger the resize event on the window
-            const resizeEvent = new Event('resize');
-            window.dispatchEvent(resizeEvent);
+            // const resizeEvent = new Event('resize');
+            // window.dispatchEvent(resizeEvent);
         };
 
         // Use ResizeObserver for live resizing feedback
-        const updateResizeWithGpWidth_throttled = Bonito.throttle_function(updateResizeWithGpWidth, 1);
+        const updateResizeWithGpWidth_throttled = Bonito.throttle_function(updateResizeWithGpWidth, 10);
         const resizeObserver = new ResizeObserver(updateResizeWithGpWidth_throttled);
         resizeObserver.observe(graphplotCard);