don't apply filtering if no input changed

key4hep · Aug 13, 2024 · 22dceaa · 22dceaa
1 parent 6953f08
commit 22dceaa
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/js/filters/components/checkbox.js b/js/filters/components/checkbox.js
@@ -8,6 +8,8 @@ const createCheckbox = () => {
   const checkbox = document.createElement("input");
   checkbox.type = "checkbox";
   checkbox.classList.add("filter-checkbox");
+  checkbox.classList.add("filter-input-checkbox");
+
   return checkbox;
 };
 

diff --git a/js/filters/components/common.js b/js/filters/components/common.js
@@ -43,11 +43,17 @@ export function buildCollectionCheckboxes(collection) {
   container.appendChild(checkboxesContainer);
 
   selectAll.addEventListener("click", () => {
-    checkboxes.forEach((checkbox) => checkbox.checked(true));
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked(true);
+      checkbox.checkbox.dispatchEvent(new Event("change"));
+    });
   });
 
   clearAll.addEventListener("click", () => {
-    checkboxes.forEach((checkbox) => checkbox.checked(false));
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked(false);
+      checkbox.checkbox.dispatchEvent(new Event("change"));
+    });
   });
 
   return [container, checkboxes];

diff --git a/js/filters/components/range.js b/js/filters/components/range.js
@@ -3,6 +3,7 @@ const createInput = (placeholder) => {
   input.type = "number";
   input.placeholder = placeholder;
   input.classList.add("range-input");
+  input.classList.add("filter-input-range");
 
   return input;
 };

diff --git a/js/filters/filter.js b/js/filters/filter.js
@@ -47,6 +47,8 @@ export function initFilters(
 ) {
   const criteriaFunctions = {};
 
+  let someInputChanged = false;
+
   const resetFiltersContent = () => {
     const content = document.getElementById("filters-content");
     content.replaceChildren();
@@ -69,11 +71,32 @@ export function initFilters(
 
     const filterOutCheckbox = document.getElementById("invert-filter");
     filterOutCheckbox.checked = false;
+
+    const allCheckboxes = document.getElementsByClassName(
+      "filter-input-checkbox"
+    );
+
+    for (const input of allCheckboxes) {
+      input.addEventListener("change", () => {
+        someInputChanged = true;
+      });
+    }
+
+    const allInputs = document.getElementsByClassName("filter-input-range");
+
+    for (const input of allInputs) {
+      input.addEventListener("input", () => {
+        someInputChanged = true;
+      });
+    }
   };
 
   resetFiltersContent();
 
   filters.apply = async () => {
+    if (!someInputChanged) {
+      return;
+    }
     const filterOutValue = document.getElementById("invert-filter").checked;
     const ids = filterOut(
       viewObjects,