js in dom rather than evaljs/onload

Author: hexaeder

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -67,7 +67,7 @@ function get_webapp(app)
 
         clear_obs!(app)
 
-        resize_gp = js"""
+        resize_with_gp = js"""
         const graphplotCard = document.querySelector(".graphplot-card");
 
         // Function to update the width dynamically
@@ -100,7 +100,6 @@ function get_webapp(app)
         // Initial update
         updateResizeWithGpWidth();
         """
-        Bonito.evaljs(session, resize_gp)
 
         DOM.div(
             APP_CSS,
@@ -110,6 +109,7 @@ function get_webapp(app)
                 gpstate_control_card(app, :vertex),
                 gpstate_control_card(app, :edge),
                 element_info_card(app, session),
+                resize_with_gp;
                 class="graphplot-col"
             ),
             timeseries_col(app, session),
@@ -139,6 +139,7 @@ function inspect(sol; restart=false, reset=false, display=CURRENT_DISPLAY[])
     CURRENT_DISPLAY[] = display
 
     appstate = if reset || isnothing(APPSTATE[])
+        isnothing(APPSTATE[]) || clear_obs!(APPSTATE[])
         AppState(sol)
     else
         APPSTATE[].sol[] = sol
@@ -242,7 +243,6 @@ function element_info_card(app, session)
         $(eltext).on(replaceDivContentWithHTML);
         replaceDivContentWithHTML($(eltext).value);
     """
-    Bonito.evaljs(session, js)
 
     help = HoverHelp(html"""
     Show details on last clicked element.
@@ -251,7 +251,7 @@ function element_info_card(app, session)
     """)
 
     Card(
-        [DOM.div(;id="element-info-box"), help];
+        [DOM.div(;id="element-info-box"), help, js];
         class="bonito-card element-info-card resize-with-gp"
     )
 end

NetworkDynamicsInspector/src/graphplot.jl

@@ -130,7 +130,7 @@ function graphplot_card(app, session)
     ####
     tooltip_text = Observable{String}("")
 
-    js = js"""
+    gp_tooltip_js = js"""
     const gpcard = document.querySelector(".graphplot-card");
 
     // Create tooltip element
@@ -177,7 +177,6 @@ function graphplot_card(app, session)
         }
     });
     """
-    Bonito.evaljs(session, js)
 
     nhh = NodeHoverHandler() do hstate, idx, event, axis
         tooltip_text[] = hstate ? sidx_to_str(VIndex(idx), app) : ""
@@ -220,7 +219,8 @@ function graphplot_card(app, session)
     <li><strong>Ctrl + Click</strong> resets axis after zoom</li>
     </ul>
     """)
-    Card([WithConfig(fig; resize_to=:parent), help]; class="bonito-card graphplot-card")
+    Card([WithConfig(fig; resize_to=:parent), help, gp_tooltip_js];
+        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)

NetworkDynamicsInspector/src/timeseries.jl

@@ -1,14 +1,7 @@
 function timeseries_col(app, session)
-    col = DOM.div(
-        timeslider_card(app),
-        timeseries_cards(app, session),
-        add_timeseries_button(app),
-        class="timeseries-col"
-    )
-
     # add js to update the active ts plot
     onload_js = js"""
-    (tscol) => {
+        const tscol = document.querySelector(".timeseries-col");
         tscol.addEventListener("click", function(event) {
             // Find the closest .timeseries-card ancestor of the clicked element
             const clickedCard = event.target.closest('.timeseries-card');
@@ -36,11 +29,15 @@ function timeseries_col(app, session)
         const triggerWindowResize_throttled = Bonito.throttle_function(triggerWindowResize, 100);
         const resizeObserver = new ResizeObserver(triggerWindowResize_throttled);
         resizeObserver.observe(tscol);
-    }
     """
-    Bonito.onload(session, col, onload_js)
 
-    return col
+    DOM.div(
+        timeslider_card(app),
+        timeseries_cards(app, session),
+        add_timeseries_button(app),
+        onload_js;
+        class="timeseries-col"
+    )
 end
 
 function timeseries_cards(app, session)
@@ -224,7 +221,7 @@ function timeseries_card(app, key, session)
     comp_ms_id = Bonito.JSString(comp_sel.id)
     state_ms_id = Bonito.JSString(state_sel.id)
 
-    js = js"""
+    legendlike_style_js = js"""
     function colorListItems(items) {
         let styleTag = document.getElementById("dynamic-style-$(comp_ms_id)");
 
@@ -294,7 +291,6 @@ function timeseries_card(app, key, session)
         linestyleListItems(c);
     });
     """
-    Bonito.evaljs(session, js)
 
     fig, ax = with_theme(apptheme()) do
         fig = Figure(size=(100, 400))
@@ -444,6 +440,7 @@ function timeseries_card(app, key, session)
     card = Card(
         [DOM.div(
             comp_state_sel_dom,
+            legendlike_style_js,
             DOM.div(WithConfig(fig; resize_to=:parent); class="timeseries-axis-container"),
             closebutton(app, key);
             class="timeseries-card-container"

NetworkDynamicsInspector/src/widgets.jl

@@ -117,11 +117,12 @@ function Bonito.jsrender(session::Session, slider::ContinuousSlider)
     thumb_r = DOM.div(; style=thumb_style)
     track = DOM.div(; style=track_style)
     track_active = DOM.div(; style=track_active_style)
-    container = DOM.div(track, track_active, thumb_l, thumb_r; style=container_style)
+
+    containerid = gendomid("slider")
 
     # JavaScript for interactivity
     jscode = js"""
-    (container)=> {
+        const container = document.getElementById($(containerid));
         const thumb_r = $(thumb_r);
         const thumb_l = $(thumb_l);
         const track_active = $(track_active);
@@ -140,6 +141,8 @@ function Bonito.jsrender(session::Session, slider::ContinuousSlider)
         function thumb_event(e, thumb) {
             let new_pos = e.clientX - container.getBoundingClientRect().left;
             const width = track.offsetWidth;
+            let llim;
+            let rlim;
             if (thumb==='r') {
                 llim = (e.shiftKey) ? (Math.ceil(width/2)+1) : thumbpos_l+1;
                 rlim = width;
@@ -299,9 +302,9 @@ function Bonito.jsrender(session::Session, slider::ContinuousSlider)
             track_active.style.width = (thumbpos_r-thumbpos_l) + 'px';  // Update the active track
         });
         observer.observe(container);
-    }
     """
-    Bonito.onload(session, container, jscode)
+    container = DOM.div(track, track_active, thumb_l, thumb_r, jscode;
+        style=container_style, id=containerid)
 
     return Bonito.jsrender(session, container)
 end
@@ -399,13 +402,6 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
         id=tomselect.id,
     )
 
-    # node fence see https://github.com/electron/electron/issues/254
-    container = DOM.div(
-        TOMSELECT_ESS,
-        TOMSELECT_CSS,
-        tom_dom
-    )
-
     js_init = js"""
     ($TOMSELECT_ESS).then((ts) => {
         const tom_dom = document.getElementById($(tomselect.id));
@@ -487,6 +483,11 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
     });
     """
     Bonito.evaljs(session, js_init)
+    container = DOM.div(
+        TOMSELECT_ESS,
+        TOMSELECT_CSS,
+        tom_dom,
+    )
 
     return Bonito.jsrender(session, container)
 end
@@ -617,23 +618,25 @@ function Bonito.jsrender(session::Session, toggle::ToggleSwitch)
         "position" => "relative",
     )
 
-    jscode = js"""
-    (input) => {
-        input.onchange = function() {
-            $(toggle.value).notify(this.checked);
-        }
-        $(toggle.value).on(val => {
-            input.checked = val
-        });
-    }
-    """
-
+    id = gendomid("toggle")
     inputdom = DOM.input(
         type="checkbox",
         checked=toggle.value[],
-        style=input_style
+        style=input_style,
+        id=id,
     )
-    Bonito.onload(session, inputdom, jscode)
+
+    jscode = js"""
+    const input = document.getElementById($(id));
+    input.onchange = function() {
+        $(toggle.value).notify(input.checked);
+    }
+
+    $(toggle.value).on(val => {
+        console.log("callback toogle switch", val, input)
+        input.checked = val
+    });
+    """
 
     container = DOM.label(
         inputdom,
@@ -645,7 +648,8 @@ function Bonito.jsrender(session::Session, toggle::ToggleSwitch)
             ),
             DOM.div(toggle.label; class="sliederlabel");
             class="switch-label-grid", style=slider_grid_style
-        );
+        ),
+        jscode;
         style=domlabel_style
     )
     Bonito.jsrender(session, container)