better assset handling

Author: hexaeder

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -13,6 +13,11 @@ using Graphs: nv, ne
 using GraphMakie
 using GraphMakie.NetworkLayout
 
+const JQUERY = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js")
+const SELECT2_CSS = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css")
+const SELECT2_JS = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js")
+const APP_CSS = Asset(joinpath(pkgdir(NetworkDynamicsInspector), "assets", "app.css"))
+
 export ContinuousSlider, RoundedLabel
 include("widgets.jl")
 

NetworkDynamicsInspector/src/utils.jl

@@ -1,19 +1,3 @@
-
-function wrap_assets(appdom)
-    jquery = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js")
-    select2_css = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css")
-    select2_js = Asset("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js")
-    css = Asset(joinpath(pkgdir(NetworkDynamicsInspector), "assets", "app.css"))
-
-    DOM.body(
-        jquery,
-        select2_css,
-        select2_js,
-        css,
-        appdom;
-    )
-end
-
 function gen_state_options(nw::Network, sidxs)
     options = OptionGroup{Symbol}[]
     isempty(sidxs) && return options

NetworkDynamicsInspector/src/widgets.jl

@@ -398,9 +398,9 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
     )
 
     container = DOM.div(
-        # jquery,
-        # select2_css,
-        # select2_js,
+        JQUERY,
+        SELECT2_CSS,
+        SELECT2_JS,
         select
     )
 

test/Inspector_test.jl

@@ -83,6 +83,8 @@ app = (;
 
 let
     isfile(WGLMakie.WGL.bundle_file) && rm(WGLMakie.WGL.bundle_file)
+    bonitobundle = joinpath(pkgdir(Bonito), "js_dependencies", "Bonito.bundled.js")
+    ispath(bonitobundle) && rm(bonitobundle)
     _app = App() do session
         @info "start new session"
         WGLMakie.activate!(resize_to=:parent)
@@ -125,6 +127,7 @@ let
         Bonito.evaljs(session, resize_gp)
 
         DOM.div(
+            NetworkDynamicsInspector.APP_CSS,
             DOM.div(
                 NetworkDynamicsInspector.graphplot_card(app),
                 NetworkDynamicsInspector.gpstate_control_card(app, :vertex),
@@ -142,7 +145,7 @@ let
                 class="timeseries-col"
             ),
             class="maingrid"
-        ) |> wrap_assets
+        )
     end;
     serve_app(_app)
 end