add info card for element

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -85,3 +85,22 @@ html, body {
     display: none; /* Initially hidden */
     transform: translate(12px, 12px); /* Offset from cursor */
 }
+
+#element-info-box {
+    font-family: monospace;
+    overflow: scroll;
+    border: 2px solid #dbdbdb;
+    border-radius: 4px;
+    background-color: #f5f5f5;
+    color: #222;
+    padding: 1px 10px;
+}
+.element-info-card {
+    /* overflow:hidden; */
+    /* resize:vertical; */
+}
+
+.julia-prompt {
+    color: #066f00;
+    font-weight: bolder;
+}

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -15,6 +15,9 @@ using GraphMakie.NetworkLayout
 using Bonito.Hyperscript
 using Bonito.Tables.OrderedCollections
 
+# defined based on the julia version
+using NetworkDynamics: AnnotatedIOBuffer, AnnotatedString
+
 const JQUERY = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js")
 const SELECT2_CSS = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css")
 const SELECT2_JS = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js")
@@ -113,7 +116,7 @@ function graphplot_card(app, session)
     BIG = 50
     node_size = Observable(fill(SMALL, NV))
     THIN = 5
-    THICK = 8
+    THICK = 10
     edge_width = Observable(fill(THIN, NE))
 
     onany(app.graphplot._selcomp; update=true) do selcomp
@@ -228,19 +231,24 @@ function graphplot_card(app, session)
     end
 
     # interactions
-    clickaction = (i, type) -> begin
+    clickaction = (i, ax, type) -> begin
+        shift_pressed = Makie.Keyboard.left_shift ∈ events(ax).keyboardstate ||
+                        Makie.Keyboard.right_shift ∈ events(ax).keyboardstate
+
         idx = type == :vertex ? VIndex(i) : EIndex(i)
-        selcomp = app.tsplots[][app.active_tsplot[]].selcomp
-        if idx ∉ selcomp[]
-            push!(selcomp[], idx)
-        else
-            filter!(x -> x != idx, selcomp[])
+        if !shift_pressed # only update info window when click + shift
+            selcomp = app.tsplots[][app.active_tsplot[]].selcomp
+            if idx ∉ selcomp[]
+                push!(selcomp[], idx)
+            else
+                filter!(x -> x != idx, selcomp[])
+            end
+            notify(selcomp)
         end
         app.graphplot._lastclickel[] = idx
-        notify(selcomp)
     end
-    nch = NodeClickHandler((i, _, _) -> clickaction(i, :vertex))
-    ech = EdgeClickHandler((i, _, _) -> clickaction(i, :edge))
+    nch = NodeClickHandler((i, _, ax) -> clickaction(i, ax, :vertex))
+    ech = EdgeClickHandler((i, _, ax) -> clickaction(i, ax, :edge))
 
     register_interaction!(ax, :nodeclick, nch)
     register_interaction!(ax, :nodehover, nhh)
@@ -810,4 +818,42 @@ function _smallest_free(d::Dict)
     return i
 end
 
+function element_info_card(app, session)
+    eltext = Observable{AnnotatedString}("")
+    onany_throttled(app.graphplot._lastclickel, app.t; update=true, delay=0.1) do el, t
+        if isnothing(el)
+            eltext[] = ""
+        else
+            buf = AnnotatedIOBuffer()
+            NetworkDynamics.dump_state(buf, app.sol[], t, el)
+            s = read(seekstart(buf), AnnotatedString)
+            htmlbuf = IOBuffer()
+            show(htmlbuf, MIME"text/html"(), s)
+            html = replace(String(take!(htmlbuf)), r"\n" => "<br>")
+
+            t = NetworkDynamics.str_significant(app.t[]; sigdigits=3)
+            fake_prompt = "<span class=julia-prompt>julia&gt; </span><span class=julia-command>dump_state(sol, $t, $(repr(el)))</span>"
+            eltext[] = "<pre>$fake_prompt<br><br>$html</pre>"
+        end
+    end
+
+    js = js"""
+        const div = document.getElementById("element-info-box");
+
+        function replaceDivContentWithHTML(htmlString) {
+            if (!div) return;
+            div.innerHTML = htmlString;
+        }
+
+        $(eltext).on(replaceDivContentWithHTML);
+        replaceDivContentWithHTML($(eltext).value);
+    """
+    evaljs(session, js)
+
+    Card(
+        DOM.div(;id="element-info-box");
+        class="element-info-card resize-with-gp"
+    )
+end
+
 end # module NetworkDynamicsInspector

NetworkDynamicsInspector/src/utils.jl

@@ -105,7 +105,7 @@ function on_throttled(f, obs; update=false, delay)
 end
 function onany_throttled(f, obs...; update=false, delay)
     tr = Throttle(f, delay)
-    onany(obs; update) do args...
+    onany(obs...; update) do args...
         tr(args...)
     end
 end

src/component_functions.jl

@@ -489,6 +489,8 @@ insym(c::EdgeModel)::@NamedTuple{src::Vector{Symbol},dst::Vector{Symbol}} = c.in
 
 insym_all(c::VertexModel) = c.insym
 insym_all(c::EdgeModel) = Iterators.flatten(values(c.insym))
+insym_flat(c::VertexModel) = insym_all(c)
+insym_flat(c::EdgeModel) = collect(insym_all(c))
 
 """
     indim(c::VertexModel)::Int

src/metadata.jl

@@ -303,7 +303,8 @@ contains parameters and observed.
 
 See also: [`get_initial_state`](@ref).
 """
-function dump_initial_state(cf::ComponentModel; sigdigits=5, p=true, obs=true)
+dump_initial_state(cf::ComponentModel; kwargs...) = dump_initial_state(stdout, cf; kwargs...)
+function dump_initial_state(io, cf::ComponentModel; sigdigits=5, p=true, obs=true)
     lns = AnnotatedString[]
     symidx  = _append_states!(lns, cf, sort(sym(cf)); sigdigits)
     psymidx = _append_states!(lns, cf, sort(psym(cf)); sigdigits)
@@ -313,26 +314,26 @@ function dump_initial_state(cf::ComponentModel; sigdigits=5, p=true, obs=true)
     obsidx = _append_observed!(lns, cf; sigdigits)
     aligned = align_strings(lns)
 
-    printstyled("Inputs:\n", bold=true)
-    _printlines(aligned, insymidx)
-    printstyled("States:\n", bold=true)
-    _printlines(aligned, symidx)
-    printstyled("Outputs:\n", bold=true)
-    _printlines(aligned, outsymidx)
+    printstyled(io, "Inputs:\n", bold=true)
+    _printlines(io, aligned, insymidx)
+    printstyled(io, "States:\n", bold=true)
+    _printlines(io, aligned, symidx)
+    printstyled(io, "Outputs:\n", bold=true)
+    _printlines(io, aligned, outsymidx)
     if p
-        printstyled("Parameters:\n", bold=true)
-        _printlines(aligned, psymidx)
+        printstyled(io, "Parameters:\n", bold=true)
+        _printlines(io, aligned, psymidx)
     end
     if obs
         if length(obsidx) == 0
-            printstyled("$(length(obssym(cf))) Observed symbols uninitialized.", bold=true)
+            printstyled(io, "$(length(obssym(cf))) Observed symbols uninitialized.", bold=true)
         elseif length(obsidx) == length(obssym(cf))
-            printstyled("Observed:\n", bold=true)
+            printstyled(io, "Observed:\n", bold=true)
         else
             diff = length(obssym(cf)) - length(obsidx)
-            printstyled("Observed ($diff additional uninitialized):\n", bold=true)
+            printstyled(io, "Observed ($diff additional uninitialized):\n", bold=true)
         end
-        _printlines(aligned, obsidx; newline=false)
+        _printlines(io, aligned, obsidx; newline=false)
     end
 end
 function _append_states!(lns, cf, syms; sigdigits)
@@ -396,13 +397,76 @@ function _append_observed!(lns, cf; sigdigits)
     end
     fidx:length(lns)
 end
-function _printlines(aligned, range; newline=true)
+function _printlines(io, aligned, range; newline=true)
     lines = @views aligned[range]
     for i in eachindex(lines)
         if newline == false && i == lastindex(lines)
-            print(lines[i])
+            print(io, lines[i])
         else
-            println(lines[i])
+            println(io, lines[i])
+        end
+    end
+end
+
+dump_state(sol, idx, t; kwargs...) = dump_state(stdout, sol, idx, t; kwargs...)
+function dump_state(io, sol, t, idx; sigdigits=3)
+    cf = extract_nw(sol)[idx]
+    _sym = sort(sym(cf))
+    _outsym = sort(outsym_flat(cf))
+    _insym = sort(insym_flat(cf))
+    _psym = sort(psym(cf))
+    _obssym = sort(obssym(cf))
+
+    groups = [("Outputs", _outsym), ("States", _sym), ("Inputs", _insym), ("Parameters", _psym), ("Observables", _obssym)]
+    filter!(g -> !isempty(g[2]), groups)
+    allsym = reduce(vcat, g[2] for g in groups)
+    nwidxs = idxtype(idx).(idx.compidx, allsym)
+    u0s, uts = sol([sol.t[begin], t]; idxs=nwidxs)
+    guesses = [has_guess(cf, sym) ? get_guess(cf, sym) : nothing for sym in allsym]
+    inits = [has_init(cf, sym) ? get_init(cf, sym) : nothing for sym in allsym]
+    defaults = [has_default(cf, sym) ? get_default(cf, sym) : nothing for sym in allsym]
+
+    t_str = str_significant(t; sigdigits)
+    t0_str = str_significant(sol.t[begin]; sigdigits)
+    strings = AnnotatedString[styled"{bold:& &&  t=$t_str &&  t=$t0_str &&  Default/Init}"]
+    for (sym, g, d, i, u0, ut) in zip(allsym, guesses, defaults, inits, u0s, uts)
+        buf = AnnotatedIOBuffer()
+        print(buf, " &"*string(sym)*" && ")
+
+        if !isnothing(ut)
+            print(buf, str_significant(ut; sigdigits, phantom_minus=true))
+        end
+        print(buf, " && ")
+
+        if !isnothing(u0)
+            print(buf, str_significant(u0; sigdigits, phantom_minus=true))
+        end
+        print(buf, " && ")
+
+        if !isnothing(d)
+            print(buf, str_significant(d; sigdigits, phantom_minus=true))
+        elseif !isnothing(i)
+            ival = str_significant(i; sigdigits, phantom_minus=true)
+            print(buf, styled"{blue: $ival}")
+            if !isnothing(g)
+                gval = str_significant(i; sigdigits, phantom_minus=true)
+                print(buf, " (from $gval)")
+            end
+        end
+
+        s = read(seekstart(buf), AnnotatedString)
+        push!(strings, s)
+    end
+    aligned = align_strings(strings)
+
+    let i = 2
+        println(io, aligned[1])
+        for (label, syms) in groups
+            println(io, styled"{bold:$label}")
+            for sym in syms
+                println(io, aligned[i])
+                i += 1
+            end
         end
     end
 end

test/Inspector_test.jl

@@ -142,6 +142,7 @@ let
                 NetworkDynamicsInspector.graphplot_card(app, session),
                 NetworkDynamicsInspector.gpstate_control_card(app, :vertex),
                 NetworkDynamicsInspector.gpstate_control_card(app, :edge),
+                NetworkDynamicsInspector.element_info_card(app, session),
                 class="graphplot-col"
             ),
             DOM.div(