combine "show-all" and "hide-all" buttons

gligen_gui/static/js/extra.js

@@ -214,4 +214,51 @@ function getPort() {
     return split[2];
   }
   console.log(currentUrl.pathname);
-}
+}
+
+// Toggle boxes
+function toggleBoxes(button) {
+  let icon_button_eye;
+  let buttonText;
+
+  let allHidden = false;
+
+  if (State.boxMap.size === 0) {
+    console.error("Box map is empty.");
+    return;
+  }
+
+  // Intialize button text based on the current state
+  buttonText = allHidden ? "Show All" : "Hide All";
+  button.textContent = buttonText;
+
+  State.boxMap.forEach((box) => {
+    if (!box.hide) {
+      allHidden = true;
+      return;
+    }
+  });
+
+  // Toggle the hide property of each box
+  State.boxMap.forEach((box, box_id) => {
+    box.hide = !box.hide;
+
+    icon_button_eye = document.getElementById(`eye-button-${box_id}`);
+    if (box.hide) {
+      icon_button_eye.src = "/static/images/eye-off.svg";
+      icon_button_eye.style.opacity = "0.5";
+    } else {
+      icon_button_eye.src = "/static/images/eye-on.svg";
+      icon_button_eye.style.opacity = "1";
+    }
+  });
+
+  clearCanvas("canvas_main");
+
+  // Redraw the boxes to reflect the updated visibility state
+  drawBoxes();
+
+  // Update button text based on the current state
+  buttonText = allHidden ? "Show All" : "Hide All";
+  button.textContent = buttonText;
+}

gligen_gui/static/js/script.js

@@ -735,27 +735,8 @@ window.addEventListener("load", () => {
 
   document.getElementById("add-lora").addEventListener("click", addLora);
 
-  document.getElementById("show-all").addEventListener("click", (event) => {
-    let icon_button_eye;
-    State.boxMap.forEach((box, box_id, map) => {
-      box.hide = false;
-      icon_button_eye = document.getElementById(`eye-button-${box_id}`);
-      icon_button_eye.src = "/static/images/eye-on.svg";
-      icon_button_eye.style.opacity = "1";
-    });
-    clearCanvas("canvas_main");
-    drawBoxes();
-  });
-
-  document.getElementById("hide-all").addEventListener("click", (event) => {
-    let icon_button_eye;
-    State.boxMap.forEach((box, box_id, map) => {
-      box.hide = true;
-      icon_button_eye = document.getElementById(`eye-button-${box_id}`);
-      icon_button_eye.src = "/static/images/eye-off.svg";
-      icon_button_eye.style.opacity = "0.5";
-    });
-    clearCanvas("canvas_main");
+  document.getElementById("toggle-all").addEventListener("click", (event) => {
+    toggleBoxes(document.getElementById("toggle-all"));
   });
 
   document.getElementById("delete-all").addEventListener("click", (event) => {

gligen_gui/templates/base.html

@@ -225,8 +225,7 @@
                 ></div> -->
                 </div>
                 <div class="row button-row button-row--left">
-                  <button id="show-all">SHOW ALL</button>
-                  <button id="hide-all">HIDE ALL</button>
+                  <button id="toggle-all">HIDE ALL</button>
                   <button id="delete-all">DELETE ALL</button>
                 </div>
                 <div class="vertical-spacer-1_5"></div>