add help bubbles on cards

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -13,6 +13,10 @@ body {
     box-sizing: border-box;
 }
 
+span {
+    font-size: 12px;
+}
+
 .maingrid {
     display: grid;
     grid-template-columns: min-content auto;
@@ -24,7 +28,7 @@ body {
 /* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
 /* to the sides we only go +- 5 px (padding of body)*/
 .graphplot-col{
-    overflow: hidden; /* otherwise axis won't shrink */
+    /* overflow: hidden; /\* otherwise axis won't shrink *\/ */
     margin:-10px -10px -10px -5px; /* t r b l */
     padding:10px  10px  10px  5px;
 }
@@ -42,6 +46,7 @@ body {
 
 .bonito-card {
     margin: 5px !important;
+    position:relative;
 }
 
 .graphplot-card {
@@ -163,3 +168,75 @@ button{
     padding: 5px !important;
     padding-bottom: 3px !important;
 }
+
+
+.help-icon {
+    position: absolute;
+    /* text-shadow: 0 0 1px #999999; */
+    color: #999999;
+    top: 0px;
+    left: 0px;
+    width: 20px;
+    height: 20px;
+    min-width: 0;
+    min-height: 0;
+    border-width: 0;
+    box-shadow: none;
+    /* background-color: #333; */
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    font-size: 10px;
+    cursor: pointer;
+    display: flex; /* Use flexbox for centering */
+    align-items: center; /* Vertically center */
+    justify-content: center; /* Horizontally center */
+}
+
+.timeseries-card .help-icon {
+    display:none;
+}
+.timeseries-card.active-tseries .help-icon {
+    display:flex;
+}
+
+.tooltip.help-text {
+    position: absolute;
+    top: 5px; /* Adjust based on the size of the icon */
+    left: 5px;
+    width: 200px; /* Adjust as needed */
+    white-space: normal; /* Allow text to wrap */
+    word-wrap: break-word; /* Break long words if necessary */
+}
+
+.tooltip {
+    display: none; /* Initially hidden */
+    position: absolute;
+    background-color: rgba(51, 51, 51, 0.99); /* Slightly transparent */
+    color: white;
+    padding: 5px 5px;
+    border-radius: 5px;
+    font-size: 12px;
+    white-space: normal; /* Allow text to wrap */
+    z-index: 1000; /* Ensure it's above other elements */
+}
+
+.tooltip ul {
+    margin: 0; /* Remove extra padding for list items */
+    padding-left: 10px; /* Adjust as needed for bullet alignment */
+}
+
+.tooltip li {
+    padding-left: 0; /* Remove extra padding for list items */
+}
+
+.tooltip.gp-tooltip {
+    font-family: monospace;
+    pointer-events: none;
+    transform: translate(12px, 12px); /* Offset from cursor */
+    white-space: normal; /* Allow text to wrap */
+}
+
+.help-icon:hover + .help-text {
+    display: block; /* Show on hover */
+}

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -63,7 +63,7 @@ export set_sol!, set_state!, set_graphplot!, set_timeseries!, define_timeseries!
     ecolorscheme::Observable{ColorScheme} = ColorSchemes.coolwarm
     _selcomp::Observable{Vector{SymbolicCompIndex}} = SymbolicCompIndex[]
     _hoverel::Observable{Union{SymbolicCompIndex,Nothing}} = nothing
-    _lastclickel::Observable{Union{SymbolicCompIndex,Nothing}} = nothing
+    _lastclickel::Observable{Union{SymbolicCompIndex,Nothing}} = VIndex(1)
 end
 function GraphPlot(sol)
     nw = extract_nw(sol)
@@ -475,16 +475,26 @@ function timeslider_card(app)
         nothing
     end
     t_slider = ContinuousSlider(twindow, app.t; arrowkeys=true)
+
+    help = HoverHelp(html"""
+    <ul>
+    <li>Adjust the time for the graph coloring.</li>
+    <li>Use <strong>Arrow Keys</strong> to adjust the time in small increments.</li>
+    <li>Use <strong>Shift + Arrow Keys</strong> to adjust the time in larger increments.</li>
+    <li>Use second slider to adjust the time window (i.e. to focus on a specific timeframe in the plots below)</li>
+    <ul>
+    """)
+
     Card(
-        Grid(
+        [Grid(
             DOM.span("Time"), t_slider, RoundedLabel(t_slider.value_r),
             RoundedLabel(tw_slider.value_l; style=Styles("text-align"=>"right")),
             tw_slider,
             RoundedLabel(tw_slider.value_r; style=Styles("text-align"=>"left"));
             columns="70px auto 70px",
             justify_content="begin",
             align_items="center",
-        );
+        ), help];
         class="bonito-card timeslider-card"
     );
 end
@@ -521,8 +531,14 @@ function element_info_card(app, session)
     """
     Bonito.evaljs(session, js)
 
+    help = HoverHelp(html"""
+    Show details on last clicked element.
+    <strong>Shift + Click</strong> element in graphplot to update details pane
+    without adding/removing timeseries.
+    """)
+
     Card(
-        DOM.div(;id="element-info-box");
+        [DOM.div(;id="element-info-box"), help];
         class="bonito-card element-info-card resize-with-gp"
     )
 end

NetworkDynamicsInspector/src/graphplot.jl

@@ -136,6 +136,7 @@ function graphplot_card(app, session)
     // Create tooltip element
     const tooltip = document.createElement("div");
     tooltip.classList.add("tooltip"); // Apply styles from CSS
+    tooltip.classList.add("gp-tooltip"); // Apply styles from CSS
     document.body.appendChild(tooltip);
 
     // let tooltipTimeout; // Store timeout reference
@@ -212,7 +213,14 @@ function graphplot_card(app, session)
     register_interaction!(ax, :edgeclick, ech)
     register_interaction!(ax, :edgehover, ehh)
 
-    Card(fig; class="bonito-card graphplot-card")
+    help = HoverHelp(html"""
+    <ul>
+    <li><strong>Click</strong> on a node or edge to select it for timeseries plotting (highlighted plot).</li>
+    <li><strong>Shift + Click</strong>. only update the element info pane.</li>
+    <li><strong>Ctrl + Click</strong> resets axis after zoom</li>
+    </ul>
+    """)
+    Card([fig, help]; 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)
@@ -354,18 +362,26 @@ function gpstate_control_card(app, type)
 
     cslider = ContinuousSlider(maxrange, thumb_l, thumb_r)
 
-    Card(
-        DOM.div(
-            selector,
-            DOM.div(fig; style=Styles("height" => "40px")),
-            # fig,
-            # RoundedLabel(@lift $maxrange[1]; style=Styles("text-align"=>"right")),
-            cslider,
-            # RoundedLabel(@lift $maxrange[2]; style=Styles("text-align"=>"left"));
-            class="gpstate-control-card-content",
-        );
-        class
-    )
+    childs = Any[DOM.div(
+        selector,
+        DOM.div(fig; style=Styles("height" => "40px")),
+        # fig,
+        # RoundedLabel(@lift $maxrange[1]; style=Styles("text-align"=>"right")),
+        cslider,
+        # RoundedLabel(@lift $maxrange[2]; style=Styles("text-align"=>"left"));
+        class="gpstate-control-card-content",
+    )]
+    if type == :vertex
+        help = HoverHelp(html"""
+        Select the state to color the graphplot.
+        <ul>
+        <li>Use slider to adjust the color range. <strong>Shift</strong> while draggin the knobs to scale symmetricly</li>
+        <li>Toggle <strong>Rel to u0</strong> to color by the difference to the initial state.</li>
+        </ul>
+        """)
+        push!(childs, help)
+    end
+    Card(childs; class)
 end
 
 function _maxrange(sol, idxs, rel)

NetworkDynamicsInspector/src/timeseries.jl

@@ -135,8 +135,8 @@ function timeseries_card(app, key, session)
         T=Symbol,
         id=gendomid("statesel"))
 
-    reset_color_button = Bonito.Button("Reset Color", style=Styles("margin-left"=>"10px"))
-    on(reset_color_button.value) do _
+    reset_style_button = Bonito.Button("Reset Styles", style=Styles("margin-left"=>"10px"))
+    on(reset_style_button.value) do _
         empty!(color_cache)
         empty!(linestyle_cache)
         notify(tsplot.selcomp)
@@ -149,7 +149,7 @@ function timeseries_card(app, key, session)
 
     comp_state_sel_dom = Grid(
         DOM.span("Components"), comp_sel,
-        DOM.div(reset_color_button, reset_axis_button, rel_toggle; style=Styles("grid-row"=>"1/3", "grid-column"=>"3")),
+        DOM.div(reset_style_button, reset_axis_button, rel_toggle; style=Styles("grid-row"=>"1/3", "grid-column"=>"3")),
         DOM.span("States"), state_sel;
         columns = "min-content auto min-content",
         align_items = "center",
@@ -324,7 +324,7 @@ function timeseries_card(app, key, session)
     datahash = Ref{UInt64}()
     onany(ts, valid_idxs, tsplot.rel, app.sol; update=true) do _ts, _valid_idxs, _rel, _sol
         # only replot if the data has actually changed
-        newhash = hash((_ts, _valid_idxs, _rel, _sol))
+        newhash = hash((_ts, _valid_idxs, _rel, _sol, linestyle_cache, color_cache))
         newhash == datahash[] && return
         datahash[] = newhash
 
@@ -399,13 +399,25 @@ function timeseries_card(app, key, session)
         cardclass *= " active-tseries"
     end
 
+    help = HoverHelp(html"""
+    Select the components and states to plot.
+    <ul>
+    <li><strong>Click</strong> on the plot to set the time.</li>
+    <li><strong>Click and Drag</strong> to zoom in.</li>
+    <li><strong>Ctrl + Click</strong> to reset zoom.</li>
+    <li>Use timeslider to change the x-axis limits.</li>
+    <li>Toggle "Rel to u0" to plot the difference to the initial value.</li>
+    <li>Click "Reset Styles" to pick colors and linestyles in order of apperance.</li>
+    </ul>
+    """)
+
     card = Card(
-        DOM.div(
+        [DOM.div(
             comp_state_sel_dom,
             DOM.div(fig; class="timeseries-axis-container"),
             closebutton(app, key);
             class="timeseries-card-container"
-        );
+        ), help];
         class=cardclass,
         id=key
     )

NetworkDynamicsInspector/src/widgets.jl

@@ -896,3 +896,8 @@ function Bonito.jsrender(session::Session, toggle::ToggleSwitch)
     )
     Bonito.jsrender(session, container)
 end
+
+function HoverHelp(help)
+    [DOM.div("?", class="help-icon"),
+     DOM.div(help, class="help-text tooltip")]
+end