show color and linestyle of components

Author: hexaeder

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -352,17 +352,29 @@ function timeseries_card(app, session)
         placeholder="Select components",
         multi=true,
         option_to_string=_sidx_to_str,
-        T=SymbolicIndex)
+        T=SymbolicIndex,
+        id=gendomid("compsel"))
     # comp_sel_dom = Grid(DOM.span("Components"), comp_sel; columns = "70px 1fr", align_items = "center")
     state_sel = MultiSelect(state_options, app.tsplot.states;
         placeholder="Select states",
         multi=true,
-        T=Symbol)
+        T=Symbol,
+        id=gendomid("statesel"))
+
+    reset_button = Bonito.Button("Reset Color", style=Styles("margin-left"=>"10px"))
+    on(reset_button.value) do _
+        empty!(color_cache)
+        empty!(linestyle_cache)
+        notify(app.tsplot.selcomp)
+        notify(app.tsplot.states)
+    end
+
+    rel_toggle = ToggleSwitch(value=app.tsplot.rel, label="Rel to u0")
 
     comp_state_sel_dom = Grid(
-        DOM.span("Components"), comp_sel,
-        DOM.span("States"), state_sel;
-        columns = "auto 1fr", align_items = "center"
+        DOM.span("Components"), comp_sel, reset_button,
+        DOM.span("States"), state_sel, rel_toggle;
+        columns = "auto 1fr auto", align_items = "center"
     )
 
     # hl choice of elements in graphplot
@@ -377,8 +389,15 @@ function timeseries_card(app, session)
     ####
     #### actual plot
     ####
+    COLORS = Makie.wong_colors()
+    LINESTYLES = [:solid, :dot, :dash, :dashdot, :dashdotdot]
+    LINESTYLES = ["─", "⋯", "--", "-⋅-", "-⋅⋅"]
     color_cache = Dict{Union{EIndex{Int,Nothing},VIndex{Int,Nothing}}, Int}()
     linestyle_cache = Dict{Symbol,Int}()
+
+    colorpairs = Observable{Vector{@NamedTuple{title::String,color::String}}}()
+    lstylepairs = Observable{Vector{@NamedTuple{title::String,linestyle::String}}}()
+
     on(app.tsplot.selcomp; update=true) do _sel
         @debug "TS: comp selection => update color_cache"
         for unused in setdiff(keys(color_cache), _sel)
@@ -388,6 +407,9 @@ function timeseries_card(app, session)
             i = _smallest_free(color_cache)
             color_cache[new] = i
         end
+        colorpairs[] = [(; title=_sidx_to_str(k),
+                         color="#"*Colors.hex(getcycled(COLORS, v)))
+                        for (k,v) in color_cache]
         nothing
     end
     on(app.tsplot.states; update=true) do _states
@@ -399,9 +421,91 @@ function timeseries_card(app, session)
             i = _smallest_free(linestyle_cache)
             linestyle_cache[new] = i
         end
+        lstylepairs[] = [(; title=repr(s), linestyle=getcycled(LINESTYLES, i))
+                         for (s,i) in linestyle_cache]
         nothing
     end
 
+    comp_ms_id = Bonito.JSString(comp_sel.id)
+    state_ms_id = Bonito.JSString(state_sel.id)
+
+    js = js"""
+    function colorListItems(items) {
+        let styleTag = document.getElementById("dynamic-style-$(comp_ms_id)");
+
+        // Create the <style> tag if it doesn't exist
+        if (!styleTag) {
+            styleTag = document.createElement("style");
+            styleTag.id = "dynamic-style-$(comp_ms_id)";
+            document.head.appendChild(styleTag);
+        }
+
+        // Clear previous styles
+        styleTag.innerHTML = "";
+
+        // Generate new styles
+        let styleContent = "";
+        items.forEach(({ title, color }) => {
+            styleContent += `#$(comp_ms_id) +span li[title='${title}']::after {
+                content: 'xx';
+                display: inline-block;
+                padding-left: 0px 4px;
+                background-color: ${color} !important;
+                color: ${color} !important;
+                border-left: 1px solid #aaa;
+                cursor: default;
+            }\n`;
+        });
+
+        // Insert new styles
+        styleTag.innerHTML = styleContent;
+    }
+
+    colorListItems($(colorpairs).value);
+    $(colorpairs).on((c) => {
+        colorListItems(c);
+    });
+
+    function linestyleListItems(items) {
+        let styleTag = document.getElementById("dynamic-style-$(state_ms_id)");
+
+        // Create the <style> tag if it doesn't exist
+        if (!styleTag) {
+            styleTag = document.createElement("style");
+            styleTag.id = "dynamic-style-$(state_ms_id)";
+            document.head.appendChild(styleTag);
+        }
+
+        // Clear previous styles
+        styleTag.innerHTML = "";
+
+        // Generate new styles
+        let styleContent = "";
+
+        if(items.length > 1) {
+            items.forEach(({ title, linestyle }) => {
+                styleContent += `#$(state_ms_id) +span li[title='${title}']::after {
+                    content: '${linestyle}';
+                    display: inline-block;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    color: inherit;
+                    border-left: 1px solid #aaa;
+                    font-size: smaller;
+                    cursor: default;
+                }\n`;
+            });
+
+            // Insert new styles
+            styleTag.innerHTML = styleContent;
+        }
+    }
+    linestyleListItems($(lstylepairs).value);
+    $(lstylepairs).on((c) => {
+        linestyleListItems(c);
+    });
+    """
+    evaljs(session, js)
 
     fig, ax = with_theme(apptheme()) do
         fig = Figure()

NetworkDynamicsInspector/src/utils.jl

@@ -74,3 +74,6 @@ function NetworkDynamics.extract_nw(o::NamedTuple)
         error("No sol in NamedTuple")
     end
 end
+
+getcycled(v::AbstractVector, i) = v[mod1(i, length(v))]
+gendomid(s::String) = replace(string(gensym("selectbox")), "#"=>"")

NetworkDynamicsInspector/src/widgets.jl

@@ -324,7 +324,9 @@ struct MultiSelect{T}
     placeholder::String
     multi::Bool
     option_to_string::Any
-    function MultiSelect(_options, _selection=nothing; T=Any, placeholder="", multi=true, option_to_string=repr)
+    class::String
+    id::String
+    function MultiSelect(_options, _selection=nothing; T=Any, placeholder="", multi=true, option_to_string=repr, class="", id="")
         options = _options isa Observable ? _options : Observable{Vector{T}}(_options)
         selection = if isnothing(_selection)
             Observable(T[])
@@ -334,7 +336,14 @@ struct MultiSelect{T}
         else
             Observable{Vector{T}}(_selection)
         end
-        new{T}(options, selection, placeholder, multi, option_to_string)
+        _class = multi ? "bonito-select2-multi" : "bonito-select2-single"
+        if class != ""
+            _class *= " " * class
+        end
+        if id == ""
+            id = gendomid("selectbox")
+        end
+        new{T}(options, selection, placeholder, multi, option_to_string, _class, id)
     end
 end
 
@@ -375,21 +384,17 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
     end
 
     # Create a multi-select element
-    id = replace(string(gensym("selectbox")), "#"=>"")
-
     style = Styles(
         "width" => "100%",
-        # "font-family" => "monospace",
     )
 
-    class = multiselect.multi ? "bonito-select2-multi" : "bonito-select2-single"
     select = DOM.select(
         DOM.option();
         multiple = multiselect.multi,
-        class,
+        class=multiselect.class,
         # name = "states[]",
         style,
-        id
+        id=multiselect.id,
     )
 
     container = DOM.div(
@@ -400,7 +405,7 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
     )
 
     jqdocument = Bonito.JSString(raw"$(document)")
-    jqselect = Bonito.JSString(raw"$('#"* id * raw"')")
+    jqselect = Bonito.JSString(raw"$('#"* multiselect.id * raw"')")
 
     esc = Bonito.JSString(raw"$")
     js_onload = js"""
@@ -472,6 +477,7 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
 
             const sortedElements = new_order.map(i => jq_tags.eq(i));
             jq_tags_ul.append(sortedElements);
+            console.log("Rendered selection")
         }
         function selectionHandler(e){
             const jq_select2  = $esc(this);