More theming and preferences events fixes

modules/frontend/html/custom.js

@@ -822,29 +822,28 @@ $(function () {
     },
   });
 
-  $("#graphlayout").change(function () {
+  $("#graphlayout").on("prefupdate", function () {
     layout = $(this).val();
     if (cy) {
       // render graph with new layout if there is one
       getGraphlayout(layout).run();
     }
   });
 
-  $("#nodesizes").change(function () {
+  $("#nodesizes").on("prefupdate", function () {
     if (cy) {
       applyNodeStyles(cy);
     }
   });
 
-  $("#nodelabels").change(function () {
+  $("#nodelabels").on("prefupdate", function () {
     if (cy) {
       cy.style().update();
     }
   });
 
   updateQueries();
 
-
   $(document).on("preferences.loaded", function (evt) {
     settings_loaded = true;
     autorun_query();

modules/frontend/html/graph.js

@@ -815,7 +815,6 @@ function initgraph(data) {
     cy = window.cy = cytoscape({
       container: document.getElementById("cy"),
       wheelSensitivity: 0.2,
-      style: cytostyle,
 
       renderer: {
         name: "canvas", // still uses the canvas renderer
@@ -824,6 +823,8 @@ function initgraph(data) {
       },
     });
 
+    cy.style(cytostyle);
+
     cy.ready(function () {
         busystatus("Rendering graph");
         nodemenu = cy.contextMenus({

modules/frontend/html/index.html

@@ -451,13 +451,13 @@
                     Theme
                     <div class="float-end">
                     <input type="radio" class="btn-check" name="theme" value="light" id="theme-light" preference="theme" autocomplete="off">
-                    <label class="btn" for="theme-light">Light</label>
+                    <label class="btn btn-sm" for="theme-light">Light</label>
 
                     <input type="radio" class="btn-check" name="theme" value="auto" id="theme-auto" preference="theme" defaultpref="auto" autocomplete="off">
-                    <label class="btn" for="theme-auto">Auto</label>
+                    <label class="btn btn-sm" for="theme-auto">Auto</label>
 
                     <input type="radio" class="btn-check" name="theme" value="dark" id="theme-dark" preference="theme" autocomplete="off">
-                    <label class="btn" for="theme-dark">Dark</label>
+                    <label class="btn btn-sm" for="theme-dark">Dark</label>
                     </div>
                 </div>
 

modules/frontend/html/preferences.js

@@ -18,12 +18,7 @@ function loadprefs() {
 function updatecontrol(ele) {
     defaultval = $('input[name="'+ele.attr("name")+'"][defaultpref]').attr("defaultpref");
     val = getpref(ele.attr("preference"), defaultval);
-    // console.log(
-    //   "Loaded settings for " +
-    //     ele.attr("preference") +
-    //     " with default value " +
-    //     defaultval + " value " + val
-    // );
+    triggerevent = true;
     if (val != null) {
         if (ele.attr("type") == "checkbox") {
             if (val === "false") {
@@ -32,27 +27,31 @@ function updatecontrol(ele) {
             ele.prop("checked", val)
         } else if (ele.attr("type") == "radio") {
             $('[type=radio][name="'+ele.attr("name")+'"]').each(function (index, radioitem) {
-                // console.log(radioitem);
                 $(this).prop("checked", $(this).attr("value") == val);
+                if ($(this).attr("value") == val) {
+                    ele.trigger("prefupdate");
+                }
             });
         } else {
             ele.val(val)
+            ele.trigger("prefupdate");
         }
         console.log("Triggering change event for element with preference "+ele.attr("preference")+" with value "+val);
-        ele.trigger("change");
     }
 }
 
-function onchangepreference(ele) {
+function onUIPreferenceChange(ele) {
     if (ele.attr("type") == "checkbox") {
         setpref(ele.attr("preference"), ele.prop("checked"))
+        ele.trigger("prefupdate");
     } else if (ele.attr("type") == "radio") {
         $('input[name="'+ele.attr("name")+'"]:checked').each(function( index, checkedele ) {
-            // console.log("Updating radio to "+$(this).val());
             setpref(ele.attr("preference"), $(this).val());
+            $(this).trigger("prefupdate");
         });
     } else {
         setpref(ele.attr("preference"), ele.val())
+        ele.trigger("prefupdate");
     }
 }
 
@@ -99,6 +98,6 @@ function prefsinit() {
 
     // Dynamically save preferences
     $('[preference]').change(function () {
-        onchangepreference($(this));
+        onUIPreferenceChange($(this));
     });
 };

modules/frontend/html/themes.js

@@ -13,6 +13,7 @@ const translateAutoTheme = (theme) => {
 const setTheme = (theme) => {
     document.documentElement.setAttribute("data-bs-theme", theme);
     if (cy) {
+        cy.style(cytostyle);
         applyEdgeStyles(cy);
         applyNodeStyles(cy);
     }
@@ -22,15 +23,16 @@ var lasttheme = ""; // Store the last theme for comparison
 
 // jquery ready
 $(document).ready(function () {
-    $("input[name='theme']").on("change", function () {
-        var selectedTheme = $("input[name='theme']:checked").val();
-        // console.log("theme is "+ selectedTheme+", was "+lasttheme);
+    $("input[name='theme']").on("prefupdate", function () {
+    // $("input[preference='theme']").on("prefupdate", function () {
+        var selectedTheme = getpref("theme", "auto"); // Update the preference value in case it changed elsewhere
+        console.log("new theme is "+ selectedTheme+", was "+lasttheme);
         if (selectedTheme != lasttheme) {
+            // console.log("Theme changed, triggering UI refresh");
+            lasttheme = selectedTheme; // Update the last theme after setting it
             // console.log("theme changed to "+ selectedTheme);
             setTheme(translateAutoTheme(selectedTheme));
         }
-
-        lasttheme = selectedTheme; // Update the last theme after setting it
     });
 });