add arrow key support for time slider

Author: hexaeder

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -201,7 +201,7 @@ function timeslider_card(app)
             app.t[] = _t
         end
     end
-    t_slider = ContinuousSlider(twindow, app.t)
+    t_slider = ContinuousSlider(twindow, app.t; arrowkeys=true)
     Card(
         Grid(
             DOM.span("Time"), t_slider, RoundedLabel(t_slider.value_r),

NetworkDynamicsInspector/src/widgets.jl

@@ -63,14 +63,15 @@ struct ContinuousSlider{T} <: Bonito.AbstractSlider{T}
     track_style::Styles
     thumb_style::Styles
     track_active_style::Styles
+    arrowkeys::Bool
 end
 
-function ContinuousSlider(range, value::Observable{T}) where {T}
+function ContinuousSlider(range, value::Observable{T}; kwargs...) where {T}
     value_l = Observable{T}(zero(T)/zero(T))
-    ContinuousSlider(range, value_l, value)
+    ContinuousSlider(range, value_l, value; kwargs...)
 end
 
-function ContinuousSlider(range, value_l::Observable{T}, value_r::Observable{T}) where {T}
+function ContinuousSlider(range, value_l::Observable{T}, value_r::Observable{T}; arrowkeys=false) where {T}
     style, track_style, track_active_style, thumb_style = get_slider_style()
 
     #=
@@ -98,6 +99,7 @@ function ContinuousSlider(range, value_l::Observable{T}, value_r::Observable{T})
         track_style,
         thumb_style,
         track_active_style,
+        arrowkeys
     )
     return slider
 end
@@ -253,28 +255,35 @@ function Bonito.jsrender(session::Session, slider::ContinuousSlider)
         }, { signal: controller.signal });
         set_thumb_val($(slider.value_l).value, 'l');
         set_thumb_val($(slider.value_r).value, 'r');
+
+        function move_thumb_incremental(direction, shiftPressed) {
+            const startval = $(slider.range).value[0];
+            const endval = $(slider.range).value[1];
+            let step = (endval - startval) / 100;
+            if (shiftPressed) {step *= 10;}
+
+            let newval;
+            if (direction === 'right') {
+                newval = Math.min(thumbval_r + step, endval);
+            } else if (direction === 'left') {
+                newval = Math.max(thumbval_r - step, startval);
+            }
+            $(slider.value_r).notify(newval);
+        }
+
+        if ($(slider.arrowkeys)) {
+            document.addEventListener('keydown', function (e) {
+                if (e.key === 'ArrowRight') {
+                    move_thumb_incremental('right', e.shiftKey);
+                    e.preventDefault();
+                } else if (e.key === 'ArrowLeft') {
+                    move_thumb_incremental('left', e.shiftKey);
+                    e.preventDefault();
+                }
+            }, { signal: controller.signal });
+        }
     }
     """
-    # function move_thumb_incremental(direction, shiftPressed) {
-    #     const startval = $(slider.values[][begin]);
-    #     const endval = $(slider.values[][end]);
-    #     let step = (endval - startval) / 100;
-    #     if (shiftPressed) {step *= 10;}
-    #     if (direction === 'right') {
-    #         set_thumb_val(Math.min(thumbval + step, endval));
-    #     } else if (direction === 'left') {
-    #         set_thumb_val(Math.max(thumbval - step, startval));
-    #     }
-    # }
-    # document.addEventListener('keydown', function (e) {
-    #     if (e.key === 'ArrowRight') {
-    #         move_thumb_incremental('right', e.shiftKey);
-    #         e.preventDefault();
-    #     } else if (e.key === 'ArrowLeft') {
-    #         move_thumb_incremental('left', e.shiftKey);
-    #         e.preventDefault();
-    #     }
-    # }, { signal: controller.signal });
     onload(session, container, jscode)
 
     return jsrender(session, container)

NetworkDynamicsInspector/test/slider_test.jl

@@ -6,14 +6,18 @@ gui = (;
     range = Observable{NTuple{2, Float64}}((-1.0, 1.0)),
     val1 = Observable{Float64}(-1.0),
     val2 = Observable{Float64}(1.0),
+    val = Observable{Float64}(0.0)
 )
 
 let
     app = App(;) do session
         NetworkDynamicsInspector.clear_obs!(gui)
-        slider = ContinuousSlider(gui.range, gui.val1, gui.val2)
+        sl1 = ContinuousSlider(gui.range, gui.val1, gui.val2)
+        sl2 = ContinuousSlider(gui.range, gui.val; arrowkeys=true)
 
-        return wrap_assets(Grid(RoundedLabel(gui.val1), slider, RoundedLabel(gui.val2);
+        return wrap_assets(Grid(
+            RoundedLabel(gui.val1), sl1, RoundedLabel(gui.val2),
+            RoundedLabel(gui.val), sl2;
             columns="1fr 3fr 1fr", width="500px"))
     end;
     serve_app(app)

test/Inspector_test.jl

@@ -52,9 +52,9 @@ sol = let
     s0 = NWState(nw)
     prob = ODEProblem(nw, uflat(s0), (0,6), copy(pflat(s0)), callback=nwcb)
     sol = solve(prob, Tsit5());
-end
+end;
 
-ENV["JULIA_DEBUG"] = NetworkDynamicsInspector
+# ENV["JULIA_DEBUG"] = NetworkDynamicsInspector
 # ENV["JULIA_DEBUG"] = ""
 
 app = (;