use tomselect and get rid of JQuery

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -13,28 +13,6 @@ body {
     box-sizing: border-box;
 }
 
-.ts-dropdown .optgroup-header{
-    font-weight: bolder;
-}
-.ts-dropdown .option{
-    font-family: monospace !important;
-}
-.ts-dropdown .option.selected{
-    background-color: #dddd;
-}
-
-.select2-container .select2-selection .select2-selection__rendered,
-.select2-container .select2-selection--single .select2-selection__rendered,
-.select2-container .select2-results__option{
-    font-family: monospace;
-    /* font-size: 20px; */
-}
-.select2-results__group {
-    font-family: sans-serif;
-    /* font-size: 12px; */
-    /* color: blue; */
-}
-
 .maingrid {
     display: grid;
     grid-template-columns: min-content auto;
@@ -160,3 +138,28 @@ button{
     font-weight: normal !important;
     font-family: sans-serif !important;;
 }
+
+
+/* Style for TomSelect elements */
+.ts-dropdown .optgroup-header{
+    font-weight: bolder;
+}
+.ts-dropdown .option{
+    font-family: monospace !important;
+}
+.ts-dropdown .option.selected{
+    background-color: #dddd;
+}
+.ts-control .item {
+    font-family: monospace;
+}
+
+.ts-control .item::before {
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.ts-control {
+    padding: 5px !important;
+    padding-bottom: 3px !important;
+}

NetworkDynamicsInspector/src/timeseries.jl

@@ -40,28 +40,6 @@ function timeseries_col(app, session)
     """
     Bonito.onload(session, col, onload_js)
 
-    # HACK: sometimes, the select2 lib is not available after a tsplots change, in that case, trigger again
-    # from js we trigger recreate_dom which notifies the tsplots
-    recreate_dom = Observable{Bool}(true)
-    on(_->notify(app.tsplots), recreate_dom)
-    jqdocument = Bonito.JSString(raw"$(document)")
-    esc = Bonito.JSString(raw"$")
-    rebuild_dom_hack = js"""
-    (tscol) => {
-        function dom_changed() {
-            // wait for ready then check if defined and recreate
-            if (typeof $(esc).fn.select2 !== 'function') {
-                console.warn('Select2 is not defined. Calling replot...');
-                $(recreate_dom).notify(true);
-            }
-        }
-
-        const observer = new MutationObserver(dom_changed);
-        observer.observe(tscol, {childList: true, subtree: true});
-    }
-    """
-    Bonito.onload(session, col, rebuild_dom_hack)
-
     return col
 end
 
@@ -129,14 +107,14 @@ function timeseries_card(app, key, session)
         nothing
     end
 
-    comp_sel = MultiSelect(comp_options, tsplot.selcomp;
+    comp_sel = TomSelect(comp_options, tsplot.selcomp;
         placeholder="Select components",
         multi=true,
         option_to_string=s -> sidx_to_str(s, app),
         T=SymbolicCompIndex,
         id=gendomid("compsel"))
     # comp_sel_dom = Grid(DOM.span("Components"), comp_sel; columns = "70px 1fr", align_items = "center")
-    state_sel = MultiSelect(state_options, tsplot.states;
+    state_sel = TomSelect(state_options, tsplot.states;
         placeholder="Select states",
         multi=true,
         T=Symbol,
@@ -230,14 +208,12 @@ function timeseries_card(app, key, session)
         // Generate new styles
         let styleContent = "";
         items.forEach(({ title, color }) => {
-            styleContent += `#$(comp_ms_id) +span li[title='${title}']::after {
-                content: 'xx';
-                display: inline-block;
-                padding: 0px 1px;
-                background-color: ${color} !important;
-                color: ${color} !important;
-                border-left: 1px solid #aaa;
-                cursor: default;
+            styleContent += `#$(comp_ms_id) +div div[data-value='${title}']::before {
+                content: '';
+                background-color: ${color};
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
             }\n`;
         });
 
@@ -268,14 +244,11 @@ function timeseries_card(app, key, session)
 
         if(items.length > 1) {
             items.forEach(({ title, linestyle }) => {
-                styleContent += `#$(state_ms_id) +span li[title='${title}']::after {
+                styleContent += `#$(state_ms_id) +div div[data-value='${title}']::before {
                     content: '${linestyle}';
-                    display: inline-block;
-                    padding: 0px 1px;
                     color: inherit;
-                    border-left: 1px solid #aaa;
-                    font-size: smaller;
-                    cursor: default;
+                    border-right: 1px solid #d0d0d0;
+                    padding-right: 5px;
                 }\n`;
             });
 
@@ -417,11 +390,9 @@ function timeseries_card(app, key, session)
     )
 
     # trigger plot on document ready
-    jqdocument = Bonito.JSString(raw"$(document)")
     trigger_plot = js"""
-    $(jqdocument).ready(function(){
+    window.addEventListener('load', function() {
         console.log("Document ready, trigger plot");
-        // $(data).notify();
         $(replot).notify();
     });
     """

NetworkDynamicsInspector/src/widgets.jl

@@ -679,19 +679,21 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
             items: Array.from($(tsselection).value),
             optgroupField: 'class',
             placeholder: $(tomselect.placeholder),
+            hidePlaceholder: true,
             plugins: {},
         };
         // push remove button to plugins when multi
         if ($(tomselect.multi)) {
             settings.plugins.remove_button = {
                 title: 'Remove this item'
             }
+            settings.plugins.drag_drop = {}
         }
         const tomselect = new TomSelect(tom_dom, settings);
 
         function selEvent(){
             const newsel = Array.from(tomselect.items);
-            console.log("Change event, update tsselection", newsel);
+            //console.log("Change event, update tsselection", newsel);
             $(tsselection).notify(newsel);
         }
         //tomselect.on('item_add', selEvent);
@@ -700,7 +702,7 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
         // tomselect.on('item_select', selEvent); // click on tag?
 
         $(tsoptions).on(val => {
-            console.log("Got new options", val);
+            //console.log("Got new options", val);
             tomselect.clear(true); // false -> silent
             tomselect.clearOptions();
             tomselect.clearOptionGroups();
@@ -709,12 +711,7 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
                 tomselect.addOptionGroup(group.value, {label: group.label});
             });
             tomselect.refreshOptions(false); // false -> dont open
-            console.log("Finished update of options")
-            // seting value will update the tsselection
-            // which triggers check in julia
-            //console.log("Setting value in option update", $(tsselection).value);
-            //tomselect.setValue($(tsselection).value);
-            //tomselect.refreshItems();
+            //console.log("Finished update of options")
         });
 
         function array_equal(a1, a2) {
@@ -728,7 +725,7 @@ function Bonito.jsrender(session::Session, tomselect::TomSelect{T}) where {T}
         $(tsselection).on(val => {
             const current_items = Array.from(tomselect.items);
             if (!array_equal(val, current_items)) {
-                console.log("Update displayed value of tomselect", val, current_items);
+                //console.log("Update displayed value of tomselect", val, current_items);
                 tomselect.setValue(val, true); // do not notify
                 //tomselect.refreshItems();
             }