Merge pull request #247 from JuliaDynamics/hw/fixinspector

Hw/fixinspector

Author: hexaeder

NetworkDynamicsInspector/Project.toml

@@ -13,6 +13,7 @@ Graphs = "86223c79-3864-5bf0-83f7-82e725a168b6"
 NetworkDynamics = "22e9dc34-2a0d-11e9-0de0-8588d035468b"
 Observables = "510215fc-4207-5dde-b226-833fc4488ee2"
 OrderedCollections = "bac558e1-5e72-5ebc-8fee-abe8a469f55d"
+PrecompileTools = "aea7be01-6a6a-4083-8856-8a6e6704d82a"
 SciMLBase = "0bca4576-84f4-4d90-8ffe-ffa030f20462"
 WGLMakie = "276b4fcb-3e11-5398-bf8b-a0c2d153d008"
 
@@ -36,6 +37,7 @@ Graphs = "1.12.0"
 NetworkDynamics = "0.9.13"
 Observables = "0.5.5"
 OrderedCollections = "1.8.0"
+PrecompileTools = "1.2.1"
 SciMLBase = "2.75.1"
 WGLMakie = "0.11"
 julia = "1.10"

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -24,6 +24,7 @@ using Colors: Colors, @colorant_str, RGB, color
 using ColorSchemes: ColorSchemes, ColorScheme
 using SciMLBase: SciMLBase
 using Downloads: Downloads
+using PrecompileTools: @compile_workload
 
 # defined based on the julia version
 using NetworkDynamics: AnnotatedIOBuffer, AnnotatedString, @styled_str
@@ -65,9 +66,9 @@ function get_webapp(app)
             @info "GUI Session updated"
         end
 
-        clear_obs!(app)
+        clear_obs_and_close!(app)
 
-        resize_gp = js"""
+        resize_with_gp = js"""
         const graphplotCard = document.querySelector(".graphplot-card");
 
         // Function to update the width dynamically
@@ -100,7 +101,6 @@ function get_webapp(app)
         // Initial update
         updateResizeWithGpWidth();
         """
-        Bonito.evaljs(session, resize_gp)
 
         DOM.div(
             APP_CSS,
@@ -110,6 +110,7 @@ function get_webapp(app)
                 gpstate_control_card(app, :vertex),
                 gpstate_control_card(app, :edge),
                 element_info_card(app, session),
+                resize_with_gp;
                 class="graphplot-col"
             ),
             timeseries_col(app, session),
@@ -139,6 +140,7 @@ function inspect(sol; restart=false, reset=false, display=CURRENT_DISPLAY[])
     CURRENT_DISPLAY[] = display
 
     appstate = if reset || isnothing(APPSTATE[])
+        isnothing(APPSTATE[]) || clear_obs_and_close!(APPSTATE[])
         AppState(sol)
     else
         APPSTATE[].sol[] = sol
@@ -242,7 +244,6 @@ function element_info_card(app, session)
         $(eltext).on(replaceDivContentWithHTML);
         replaceDivContentWithHTML($(eltext).value);
     """
-    Bonito.evaljs(session, js)
 
     help = HoverHelp(html"""
     Show details on last clicked element.
@@ -251,11 +252,41 @@ function element_info_card(app, session)
     """)
 
     Card(
-        [DOM.div(;id="element-info-box"), help];
+        [DOM.div(;id="element-info-box"), help, js];
         class="bonito-card element-info-card resize-with-gp"
     )
 end
 
-
+@compile_workload begin
+    using NetworkDynamics: EdgeModel, VertexModel, AntiSymmetric 
+    using Graphs: complete_graph
+    Base.@propagate_inbounds function diffusionedge!(e, v_s, v_d, (p,), _)
+        e .= p * (v_s[1] .- v_d[1])
+    end
+    e = EdgeModel(g=AntiSymmetric(diffusionedge!), outdim=1, pdim=1, pdef=[1], name=:diff_edge, indim=1)
+    Base.@propagate_inbounds function diffusionvertex!(dv, _, acc, _, _)
+        dv[1] = acc[1]
+        nothing
+    end
+    v = VertexModel(f=diffusionvertex!, dim=1, g=1:1, indim=1)
+
+    g = complete_graph(3)
+    nw = Network(g, v, e)
+    prob = SciMLBase.ODEProblem(nw,
+        zeros(NetworkDynamics.dim(nw)), (0, 0.1),
+        zeros(NetworkDynamics.pdim(nw)))
+
+    t = [0, 0.1]
+    u = [zeros(NetworkDynamics.dim(nw)) for _ in t]
+    sol = SciMLBase.build_solution(prob, nothing, t, u)
+
+    app = NetworkDynamicsInspector.AppState(sol);
+    session = Bonito.Session()
+    NetworkDynamicsInspector.graphplot_card(app, session);
+    NetworkDynamicsInspector.gpstate_control_card(app, :vertex);
+    NetworkDynamicsInspector.element_info_card(app, session);
+    NetworkDynamicsInspector.timeseries_col(app, session);
+    NetworkDynamicsInspector.clear_obs_and_close!(app);
+end
 
 end # module NetworkDynamicsInspector

NetworkDynamicsInspector/src/graphplot.jl

@@ -130,7 +130,7 @@ function graphplot_card(app, session)
     ####
     tooltip_text = Observable{String}("")
 
-    js = js"""
+    gp_tooltip_js = js"""
     const gpcard = document.querySelector(".graphplot-card");
 
     // Create tooltip element
@@ -177,7 +177,6 @@ function graphplot_card(app, session)
         }
     });
     """
-    Bonito.evaljs(session, js)
 
     nhh = NodeHoverHandler() do hstate, idx, event, axis
         tooltip_text[] = hstate ? sidx_to_str(VIndex(idx), app) : ""
@@ -220,7 +219,8 @@ function graphplot_card(app, session)
     <li><strong>Ctrl + Click</strong> resets axis after zoom</li>
     </ul>
     """)
-    Card([WithConfig(fig; resize_to=:parent), help]; class="bonito-card graphplot-card")
+    Card([WithConfig(fig; resize_to=:parent), help, gp_tooltip_js];
+        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)

NetworkDynamicsInspector/src/serving.jl

@@ -85,11 +85,13 @@ function serve_app(::BrowserDisp, app)
     nothing
 end
 function close_display(::BrowserDisp; kwargs...)
+    if haskey(BROWSER_STATE, :handler) && BROWSER_STATE[:handler] isa Bonito.HTTPServer.BrowserDisplay
+        close(BROWSER_STATE[:handler])
+    end
     BROWSER_STATE[:handler] = nothing
 end
 
 
-
 function close_session(session)
     if !isnothing(session) && Base.isopen(session)
         @info "Close existing session"

NetworkDynamicsInspector/src/timeseries.jl

@@ -1,14 +1,7 @@
 function timeseries_col(app, session)
-    col = DOM.div(
-        timeslider_card(app),
-        timeseries_cards(app, session),
-        add_timeseries_button(app),
-        class="timeseries-col"
-    )
-
     # add js to update the active ts plot
     onload_js = js"""
-    (tscol) => {
+        const tscol = document.querySelector(".timeseries-col");
         tscol.addEventListener("click", function(event) {
             // Find the closest .timeseries-card ancestor of the clicked element
             const clickedCard = event.target.closest('.timeseries-card');
@@ -36,11 +29,15 @@ function timeseries_col(app, session)
         const triggerWindowResize_throttled = Bonito.throttle_function(triggerWindowResize, 100);
         const resizeObserver = new ResizeObserver(triggerWindowResize_throttled);
         resizeObserver.observe(tscol);
-    }
     """
-    Bonito.onload(session, col, onload_js)
 
-    return col
+    DOM.div(
+        timeslider_card(app),
+        timeseries_cards(app, session),
+        add_timeseries_button(app),
+        onload_js;
+        class="timeseries-col"
+    )
 end
 
 function timeseries_cards(app, session)
@@ -55,38 +52,42 @@ function timeseries_cards(app, session)
         known_tsplots = collect(keys(cache))
         current_tsplots = collect(values(_tsplots))
 
-        # do nothing if the TSPlots objects themselve did not change
-        Set(known_tsplots) == Set(current_tsplots) && return
-
-        # del_tsplots = setdiff(known_tsplots, current_tsplots)
-        # new_tsplots = setdiff(current_tsplots, known_tsplots)
-        # FIXME: it is not possible to redisplay the same tsplot, recreate all
-        del_tsplots = known_tsplots
-        new_tsplots = current_tsplots
+        # do nothing if the TSPlots objects themselve did not change unless on update!
+        if !isdefined(container, 0) || Set(known_tsplots) != Set(current_tsplots)
+            # del_tsplots = setdiff(known_tsplots, current_tsplots)
+            # new_tsplots = setdiff(current_tsplots, known_tsplots)
+            # FIXME: it is not possible to redisplay the same tsplot, recreate all
+            del_tsplots = known_tsplots
+            new_tsplots = current_tsplots
+
+            for del in del_tsplots
+                (; card, observerfunctions, plotqueue) = cache[del]
+                close(plotqueue) # close plotqueue
+                Observables.off.(observerfunctions) # disable all observer functions
+                delete!(cache, del) # delete from cache
+            end
+            for new in new_tsplots
+                key = only([key for (key, value) in _tsplots if value == new])
+                ntup = timeseries_card(app, key, session)
+                cache[new] = ntup
+            end
 
-        for del in del_tsplots
-            (; card, observerfunctions, plotqueue) = cache[del]
-            close(plotqueue) # close plotqueue
-            Observables.off.(observerfunctions) # disable all observer functions
-            delete!(cache, del) # delete from cache
+            cards = [cache[ts].card for ts in values(_tsplots)]
+            # update the display by notifying the content
+            container[] = DOM.div(cards; class="timeseries-stack")
         end
-        for new in new_tsplots
-            key = only([key for (key, value) in _tsplots if value == new])
-            ntup = timeseries_card(app, key, session)
-            cache[new] = ntup
-        end
-
-        cards = [cache[ts].card for ts in values(_tsplots)]
-        # update the display by notifying the content
-        container[] = DOM.div(cards; class="timeseries-stack")
 
         nothing
     end
 
     # update the selected components in the graphplot when the active tsplot changes
     on(app.active_tsplot; update=true) do active
-        activesel = app.tsplots[][active].selcomp[]
-        app.graphplot._selcomp[] = activesel
+        if haskey(app.tsplots[], active)
+            activesel = app.tsplots[][active].selcomp[]
+            app.graphplot._selcomp[] = activesel
+        else
+            app.active_tsplot[] = first(keys(app.tsplots[]))
+        end
     end
 
     return container
@@ -224,7 +225,7 @@ function timeseries_card(app, key, session)
     comp_ms_id = Bonito.JSString(comp_sel.id)
     state_ms_id = Bonito.JSString(state_sel.id)
 
-    js = js"""
+    legendlike_style_js = js"""
     function colorListItems(items) {
         let styleTag = document.getElementById("dynamic-style-$(comp_ms_id)");
 
@@ -294,7 +295,6 @@ function timeseries_card(app, key, session)
         linestyleListItems(c);
     });
     """
-    Bonito.evaljs(session, js)
 
     fig, ax = with_theme(apptheme()) do
         fig = Figure(size=(100, 400))
@@ -401,7 +401,9 @@ function timeseries_card(app, key, session)
                 @error "$key: Plotting failed for idx $(valid_idxs[])" e
             end
         end
-        put!(plotqueue, task)
+        if !is_precompiling()
+            put!(plotqueue, task)
+        end
         nothing
     end |> track_obsf
 
@@ -444,6 +446,7 @@ function timeseries_card(app, key, session)
     card = Card(
         [DOM.div(
             comp_state_sel_dom,
+            legendlike_style_js,
             DOM.div(WithConfig(fig; resize_to=:parent); class="timeseries-axis-container"),
             closebutton(app, key);
             class="timeseries-card-container"
@@ -473,7 +476,7 @@ function _plot_queue(key)
             rmt = take!(ch) # remove the executed task
             @assert istaskdone(rmt)
         end
-        @info "Plot queue for $key closed"
+        @debug "Plot queue for $key closed"
     end
 end
 

NetworkDynamicsInspector/src/utils.jl

@@ -27,28 +27,34 @@ function gen_state_options(nw::Network, sidxs)
     options
 end
 
-function clear_obs!(x::Union{NamedTuple, AbstractDict})
+function clear_obs_and_close!(x::Union{NamedTuple, AbstractDict})
     for v in values(x)
-        clear_obs!(v)
+        clear_obs_and_close!(v)
     end
 end
-function clear_obs!(obs::Observable)
+function clear_obs_and_close!(obs::Observable)
     empty!(obs.listeners)
-    clear_obs!(obs.val)
+    clear_obs_and_close!(obs.val)
 end
-function clear_obs!(v::AbstractVector)
+function clear_obs_and_close!(v::AbstractVector)
     for el in v
-        clear_obs!(el)
+        clear_obs_and_close!(el)
     end
 end
-function clear_obs!(x::T) where {T}
+function clear_obs_and_close!(x::T) where {T}
     if T <: Union{GraphPlot, TimeseriesPlot, AppState}
         for f in fieldnames(T)
-            clear_obs!(getfield(x, f))
+            clear_obs_and_close!(getfield(x, f))
         end
     end
     x
 end
+function clear_obs_and_close!(of::Observables.ObserverFunction)
+    Observables.off(of)
+end
+function clear_obs_and_close!(ch::Channel)
+    close(ch)
+end
 
 NetworkDynamics.extract_nw(o::Observable) = extract_nw(o.val)
 function NetworkDynamics.extract_nw(o::NamedTuple)
@@ -155,3 +161,5 @@ function wait_for(queue)
         sleep(0.01)
     end
 end
+
+is_precompiling() = ccall(:jl_generating_output, Cint, ()) == 1