start work on ts card

Author: hexaeder

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -7,7 +7,7 @@ using Bonito: Grid, @js_str, onload, jsrender
 using WGLMakie.Makie
 using WGLMakie.Makie.Colors
 using WGLMakie.Makie.ColorSchemes
-using NetworkDynamics: extract_nw
+using NetworkDynamics: extract_nw, SymbolicIndex
 using NetworkDynamics: SII
 using Graphs: nv, ne
 using GraphMakie
@@ -69,6 +69,7 @@ function graphplot_card(app; kwargs...)
             error("Received more than one node state to plot...")
         end
         notify(node_state)
+        nothing
     end;
 
     edge_state = Observable(Vector{Float32}(undef, NE))
@@ -83,6 +84,7 @@ function graphplot_card(app; kwargs...)
             error("Received more than one edge state to plot...")
         end
         notify(edge_state)
+        nothing
     end;
 
     node_color = Observable(Vector{RGB{Float64}}(undef, NV))
@@ -92,6 +94,7 @@ function graphplot_card(app; kwargs...)
             node_color[][i] = isnan(statevec[i]) ? RGB(0,0,0) : get(scheme, statevec[i], range)
         end
         notify(node_color)
+        nothing
     end
 
     edge_color = Observable(Vector{RGB{Float64}}(undef, NE))
@@ -101,32 +104,32 @@ function graphplot_card(app; kwargs...)
             edge_color[][i] = isnan(statevec[i]) ? RGB(0,0,0) : get(scheme, statevec[i], range)
         end
         notify(edge_color)
+        nothing
     end
 
     notify(app.t) # trigger updates
 
     SMALL = 30
     BIG = 50
     node_size = Observable(fill(SMALL, NV))
-    onany(app.sel_nodes; update=true) do selected
-        @debug "GP: app.sel_nodes => node_size"
-        fill!(node_size[], SMALL)
-        for sel in selected
-            node_size[][sel] = BIG
-        end
-        notify(node_size)
-    end
-
     THIN = 3
     THICK = 6
     edge_width = Observable(fill(THIN, NE))
-    onany(app.sel_edges; update=true) do selected
-        @debug "GP: app.sel_edges => edge_width"
+
+    onany(app.graphplot.selcomp) do selcomp
+        @debug "GP: Sel comp => node_size, edge_width"
+        fill!(node_size[], SMALL)
         fill!(edge_width[], THIN)
-        for sel in selected
-            edge_width[][sel] = THICK
+        for s in selcomp
+            if s isa VIndex
+                node_size[][s.compidx] = BIG
+            else
+                edge_width[][s.compidx] = THICK
+            end
         end
+        notify(node_size)
         notify(edge_width)
+        nothing
     end
 
     g = @lift $(nw).im.g
@@ -157,6 +160,7 @@ function graphplot_card(app; kwargs...)
     on(ax.scene.viewport) do lims
         @debug "GP: viewport => adapt xy scaling"
         adapt_xy_scaling!(ax)
+        nothing
     end
     Card(fig; class="graphplot-card", kwargs...)
 end
@@ -201,6 +205,7 @@ function timeslider_card(app)
             @debug "app.tmin, app.tmax => clamp app.t[]"
             app.t[] = _t
         end
+        nothing
     end
     t_slider = ContinuousSlider(twindow, app.t; arrowkeys=true)
     Card(
@@ -233,7 +238,8 @@ function gpstate_control_card(app, type)
     on(app.sol; update=true) do _sol
         _nw = extract_nw(_sol)
         idxs = VEIndex.(1:nv(_nw))
-        options[] = state_options(_nw, idxs)
+        options[] = gen_state_options(_nw, idxs)
+        nothing
     end
     multisel = MultiSelect(options, stateobs; placeholder="Select state for coloring", multi=false, T=Symbol)
     selector = Grid(
@@ -281,13 +287,15 @@ function gpstate_control_card(app, type)
         else
             error("More than one state for maxrange calculation...")
         end
+        nothing
     end;
 
     onany(thumb_l, thumb_r; update=true) do _thumb_l, _thumb_r
         @debug "GP: $(type) color slider => app.gp.colorrange"
         # store the thumb position
         thumb_pos_cache[thumb_pos_key()] = (_thumb_l, _thumb_r)
         colorrange[] = (_thumb_l, _thumb_r)
+        nothing
     end
 
     fig = with_theme(apptheme()) do
@@ -326,14 +334,15 @@ function _maxrange(sol, idxs, rel)
     extrema(Iterators.flatten(u_for_t))
 end
 
-function state_options(nw::Network, sidxs)
+function gen_state_options(nw::Network, sidxs)
+    options = OptionGroup{Symbol}[]
+    isempty(sidxs) && return options
     groups = [
         ("Outputs & States", cf -> unique!(vcat(NetworkDynamics.outsym_flat(cf), sym(cf)))),
-        ("Inputs", NetworkDynamics.insym_all),
+        ("Inputs", cf -> collect(NetworkDynamics.insym_all(cf))),
         ("Observables", obssym),
         ("Parameters", psym),
     ]
-    options = OptionGroup{Symbol}[]
     exclusive_syms = Symbol[]
     for (label, getter) in groups
         common_syms = mapreduce(∩, sidxs) do sidx
@@ -354,6 +363,55 @@ function state_options(nw::Network, sidxs)
     options
 end
 
+function timeseries_card(app)
+    comp_options = Observable{Vector{OptionGroup{SymbolicIndex}}}()
+    on(app.sol; update=true) do _sol
+        @debug "TS: app.sol => comp_options"
+        g = extract_nw(_sol).im.g
+        vg = OptionGroup{SymbolicIndex}("Nodes", VIndex.(1:nv(g)))
+        eg = OptionGroup{SymbolicIndex}("Edges", EIndex.(1:ne(g)))
+        comp_options[] = [vg, eg]
+        nothing
+    end
+
+    state_options = Observable{Vector{OptionGroup{Symbol}}}()
+    onany(app.sol, app.tsplot.selcomp; update=true) do _sol, _sel
+        @debug "TS: app.sol, app.tsplot.selcomp => state_options"
+        _nw = extract_nw(_sol)
+        state_options[] = gen_state_options(_nw, _sel)
+        nothing
+    end
+
+    comp_sel = MultiSelect(comp_options, app.tsplot.selcomp;
+        placeholder="Select components",
+        multi=true,
+        option_to_string=_sidx_to_str,
+        T=SymbolicIndex)
+    comp_sel_dom = Grid(DOM.span("States"), comp_sel; columns = "70px 1fr", align_items = "center")
+    state_sel = MultiSelect(state_options, app.tsplot.states;
+        placeholder="Select states",
+        multi=true,
+        T=Symbol)
+    state_sel_dom = Grid(DOM.span("Components"), state_sel; columns = "70px 1fr", align_items = "center")
+
+    # hl choice of elements in graphplot
+    on(app.tsplot.selcomp; update=true) do _sel
+        if app.graphplot.selcomp[] != _sel
+            app.graphplot.selcomp[] = _sel
+        end
+        nothing
+    end
+
+    Card(
+        Grid(
+            comp_sel_dom,
+            state_sel_dom,
+        )
+    )
+end
+function _sidx_to_str(s)
+    (s isa VIndex ? "v" : "e") * string(s.compidx)
+end
 function clear_obs!(nt::NamedTuple)
     for v in values(nt)
         clear_obs!(v)

NetworkDynamicsInspector/src/widgets.jl

@@ -88,6 +88,7 @@ function ContinuousSlider(range, value_l::Observable{T}, value_r::Observable{T};
             value_r[] = r_c
         end
         changed && @debug "Slider: range changed => clamped thumb values"
+        nothing
     end
     =#
 
@@ -344,23 +345,23 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
 
     # generate internal observables of js representation of options and selection
     jsoptions = @lift options_to_jsoptions($(multiselect.options); option_to_string=multiselect.option_to_string)
-    jsselection = Observable{Vector{Int}}(
-        selection_to_jsselection(multiselect.options[], multiselect.selection[]))
+    jsselection = Observable{Vector{Int}}()
 
     onany(jsselection) do _jssel
         sel = jsselection_to_selection(multiselect.options[], _jssel)
         # @info "New jsselection triggers new selection:" _jssel sel
         if sel != multiselect.selection[]
             multiselect.selection[] = sel
         end
+        nothing
     end
 
-    onany(multiselect.options, multiselect.selection) do _opts, _sel
+    onany(multiselect.options, multiselect.selection; update=true) do _opts, _sel
         if !multiselect.multi && length(_sel) > 1
             deleteat!(_sel, firstindex(_sel)+1:lastindex(_sel))
         end
         jssel = selection_to_jsselection(_opts, _sel)
-        # @info "New options or selection triggers new jsselection:" _opts _sel jssel
+        @debug "MS \"$(multiselect.placeholder)\": New opts or sel triggers new jsselection:" _opts _sel jssel
 
         # filter out invalid selections
         if any(isnothing, jssel)
@@ -369,9 +370,8 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
             filter!(!isnothing, jssel)
         end
 
-        if jssel != jsselection[]
-            jsselection[] = jssel
-        end
+        jsselection[] = jssel
+        nothing
     end
 
     # Create a multi-select element
@@ -446,12 +446,10 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
         function updateDisplayedSelection(new_sel_nr) {
             const jq_select = $jqselect
             const new_sel = new_sel_nr.map(String);
-            const old_sel = jq_select.data('preserved-order') || [];
-            if (!array_equal(new_sel, old_sel)){
-                jq_select.data('preserved-order', new_sel);
-                jq_select.val(new_sel).trigger('change');
-                select2_renderSelections();
-            }
+
+            jq_select.data('preserved-order', new_sel);
+            jq_select.val(new_sel).trigger('change');
+            select2_renderSelections();
         }
         updateDisplayedSelection($(jsselection).value)
         $(jsselection).on(updateDisplayedSelection)

NetworkDynamicsInspector/test/multiselect_test.jl

@@ -17,22 +17,14 @@ let
     app = App(;) do session
         NetworkDynamicsInspector.clear_obs!(gui)
 
-        ms1 = MultiSelect(gui.options, gui.selection; placeholder="pick language", T=Symbol)
-        ms2 = MultiSelect(gui.options, gui.selection_single; placeholder="pick language", multi=false, T=Symbol)
+        ms1 = MultiSelect(gui.options, gui.selection; placeholder="multi", T=Symbol)
+        ms2 = MultiSelect(gui.options, gui.selection_single; placeholder="single", multi=false, T=Symbol)
 
         return wrap_assets(Grid(ms1, ms2; columns="100%", width="500px"))
     end;
     serve_app(app)
 end
 
-foo = Ref{Any}()
-isdefined(foo,1)
-foo[] = 2
-
-
-(SERVER[])
-s = SERVER[]
-
 @test gui.selection[] == [:Rust, :French]
 gui.selection[] = [:Rust, :French, :Julia, :foo]
 gui.selection[] = []
@@ -43,11 +35,21 @@ gui.selection_single[] = [:French, :Julia]
 @test gui.selection_single[] == [:French]
 gui.selection_single[] = []
 
-gui.selection[] = [:Rust, :French]
+gui.selection[] = [:German, :Rust, :French]
 gui.selection_single[] = [:French]
 # change options
 gui.options[] = [
-        OptionGroup("Programming Languages", [:Julia, :Rust, :Java]),
+        OptionGroup("Languages", [:French, :Spanish, :German]),
+    ]
+@test gui.selection[] == [:German, :French]
+@test gui.selection_single[] == [:French]
+
+
+# change options but keep number the same
+gui.selection[] = [:French]
+gui.selection_single[] = [:French]
+gui.options[] = [
+        OptionGroup("Languages", [:French, :Spanish]),
     ]
-@test gui.selection[] == [:Rust]
-@test gui.selection_single[] == []
+@test gui.selection[] == [:French]
+@test gui.selection_single[] == [:French]

test/Inspector_test.jl

@@ -1,4 +1,5 @@
 using NetworkDynamics
+using NetworkDynamics: SymbolicIndex
 using NetworkDynamicsInspector
 using Bonito
 using WGLMakie
@@ -62,9 +63,9 @@ app = (;
     t = Observable{Float64}(0.0),
     tmin = Observable{Float64}(sol.t[begin]),
     tmax = Observable{Float64}(sol.t[end]),
-    sel_nodes = Observable{Vector{Int}}(Int[]),
-    sel_edges = Observable{Vector{Int}}(Int[]),
+    active_tsplot = Observable{Int}(1),
     graphplot = (;
+        selcomp = Observable{Vector{SymbolicIndex}}(SymbolicIndex[]),
         nstate = Observable{Vector{Symbol}}([:θ]),
         estate = Observable{Vector{Symbol}}([:P]),
         nstate_rel = Observable{Bool}(false),
@@ -73,6 +74,10 @@ app = (;
         ncolorscheme = Observable{ColorScheme}(ColorSchemes.coolwarm),
         ecolorrange = Observable{Tuple{Float32,Float32}}((-1.0, 1.0)),
         ecolorscheme = Observable{ColorScheme}(ColorSchemes.coolwarm),
+    ),
+    tsplot = (;
+        selcomp = Observable{Vector{SymbolicIndex}}(SymbolicIndex[]),
+        states = Observable{Vector{Symbol}}(Symbol[]),
     )
 );
 
@@ -90,19 +95,28 @@ let
             ),
             DOM.div(
                 NetworkDynamicsInspector.timeslider_card(app),
+                NetworkDynamicsInspector.timeseries_card(app),
                 class="timeseries-col"
             ),
-            # columns="1fr 2fr",
-            # width="500px",
             class="maingrid"
         ) |> wrap_assets
     end;
     serve_app(_app)
 end
 
+
+app.tsplot.states[] = [ :θ, :P]
+notify(app.tsplot.states)
+app.tsplot.selcomp[]
+
 sol([0, 2], idxs=EIndex.(2:5,:active))
 
 sol = app.sol[]
+nw = NetworkDynamics.extract_nw(sol)
+sidxs = app.tsplot.selcomp[]
+NetworkDynamicsInspector.gen_state_options(nw, sidxs)
+
+
 idxs = EIndex.(1:7, :active);
 rel = false;
 NetworkDynamicsInspector._maxrange(sol, idxs, rel)