fix small bug (change from innerHTML to appendChild

key4hep · Jun 5, 2024 · 49f2bf8 · 49f2bf8
1 parent 0b27623
commit 49f2bf8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 45 deletions.
diff --git a/js/main.js b/js/main.js
@@ -1,7 +1,12 @@
 import { errorMsg, loadMCParticles } from "./tools.js";
 import { PdgToggle } from "./menu/show-pdg.js";
 import { drawAll } from "./draw.js";
-import { bits, genStatus } from "./menu/filter/filter.js";
+import {
+  bits,
+  genStatus,
+  renderRangeParameters,
+  parametersRange,
+} from "./menu/filter/filter.js";
 import {
   mouseDown,
   mouseUp,
@@ -207,8 +212,9 @@ document
     });
     bits.setCheckBoxes();
     genStatus.setCheckBoxes();
-    bits.render();
-    genStatus.render();
+    renderRangeParameters(filters, parametersRange);
+    bits.render(filters);
+    genStatus.render(filters);
 
     const pdgToggle = new PdgToggle("show-pdg");
     pdgToggle.init(() => {

diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js
@@ -13,7 +13,10 @@ const filterButton = document.getElementById("filter-button");
 const openFilter = document.getElementById("open-filter");
 const closeFilter = document.getElementById("close-filter");
 const filterContent = document.getElementById("filter-content");
+const filters = document.getElementById("filters");
 const filter = document.getElementById("filter");
+const apply = document.getElementById("filter-apply");
+const reset = document.getElementById("filter-reset");
 
 let active = false;
 
@@ -34,9 +37,23 @@ filterButton.addEventListener("click", () => {
   }
 });
 
-const filters = document.getElementById("filters");
-const apply = document.getElementById("filter-apply");
-const reset = document.getElementById("filter-reset");
+export function renderRangeParameters(container, rangeParameters) {
+  const rangeFilters = document.createElement("div");
+  rangeFilters.id = "range-filters";
+  rangeFilters.style.display = "grid";
+  rangeFilters.style.width = "fit-content";
+  rangeFilters.style.columnGap = "10px";
+  rangeFilters.style.rowGap = "5px";
+  rangeFilters.style.alignItems = "center";
+  rangeFilters.style.gridTemplateColumns =
+    "fit-content(100%) fit-content(100%)";
+  rangeParameters.forEach((parameter) => {
+    parameter.min = undefined;
+    parameter.max = undefined;
+    parameter.render(rangeFilters);
+  });
+  container.appendChild(rangeFilters);
+}
 
 let parametersRange = [
   {
@@ -67,16 +84,6 @@ parametersRange = parametersRange.sort((a, b) =>
 
 parametersRange = parametersRange.map((parameter) => new Range(parameter));
 
-const rangeFilters = document.createElement("div");
-filters.appendChild(rangeFilters);
-rangeFilters.style.display = "grid";
-rangeFilters.id = "range-filters";
-rangeFilters.style.width = "fit-content";
-rangeFilters.style.columnGap = "10px";
-rangeFilters.style.gridTemplateColumns = "fit-content(100%) fit-content(100%)";
-
-parametersRange.forEach((parameter) => parameter.render(rangeFilters));
-
 class CheckboxBuilder {
   constructor(name) {
     this.uniqueValues = new Set();
@@ -94,15 +101,16 @@ class CheckboxBuilder {
     );
   }
 
-  render() {
-    if (this.checkBoxes.length !== 0)
-      this.checkBoxes.forEach((checkbox) => (checkbox.checked = false));
-    filters.innerHTML += `<p>${this.name}</p>`;
+  render(container) {
+    this.checkBoxes.forEach((checkbox) => (checkbox.checked = false));
+    const title = document.createElement("p");
+    title.textContent = this.name;
+    container.appendChild(title);
     const options = document.createElement("div");
     options.style.display = "flex";
     options.style.flexDirection = "row";
     options.style.flexWrap = "wrap";
-    filters.appendChild(options);
+    container.appendChild(options);
     this.checkBoxes.forEach((checkbox) => checkbox.render(options));
   }
 }
@@ -146,14 +154,9 @@ function removeFilter(particlesHandler, currentParticles, visibleParticles) {
 
   filters.innerHTML = "";
 
-  parametersRange.forEach((parameter) => {
-    parameter.min = undefined;
-    parameter.max = undefined;
-    parameter.render(filters);
-  });
-
-  bits.render();
-  genStatus.render();
+  renderRangeParameters(filters, parametersRange);
+  bits.render(filters);
+  genStatus.render(filters);
 }
 
 apply.addEventListener("click", () =>
@@ -170,4 +173,4 @@ reset.addEventListener("click", () =>
   removeFilter(particlesHandler, currentParticles, visibleParticles)
 );
 
-export { bits, genStatus };
+export { bits, genStatus, parametersRange };
diff --git a/js/menu/filter/parameters.js b/js/menu/filter/parameters.js
@@ -15,13 +15,12 @@ class FilterParameter {
   }
 }
 
-function createNumberInput(container, placeholder) {
+function createNumberInput(placeholder) {
   const input = document.createElement("input");
   input.type = "number";
   input.placeholder = placeholder;
   input.style.width = "35px";
 
-  container.appendChild(input);
   return input;
 }
 
@@ -36,16 +35,27 @@ export class Range extends FilterParameter {
 
   render(container) {
     const label = document.createElement("label");
-    label.textContent = `${this.property} `;
+    label.textContent = `${this.property}`;
+
+    const inputMin = createNumberInput("min");
+    inputMin.addEventListener("input", (e) => {
+      this.min = e.target.value;
+    });
+
+    const separator = document.createTextNode("-");
+
+    const inputMax = createNumberInput("max");
+    inputMax.addEventListener("input", (e) => {
+      this.max = e.target.value;
+    });
+
+    const unitElement = document.createTextNode(`${this.unit}`);
 
     const content = document.createElement("div");
-    const inputMin = createNumberInput(container, "min");
-    const separator = document.createTextNode(" - ");
-    const inputMax = createNumberInput(container, "max");
     content.appendChild(inputMin);
     content.appendChild(separator);
     content.appendChild(inputMax);
-    content.appendChild(document.createTextNode(` ${this.unit}`));
+    content.appendChild(unitElement);
     content.style.display = "grid";
     content.style.gridAutoFlow = "column";
     content.style.columnGap = "5px";
@@ -55,14 +65,6 @@ export class Range extends FilterParameter {
 
     container.appendChild(label);
     container.appendChild(content);
-
-    inputMin.addEventListener("input", () => {
-      this.min = inputMin.value;
-    });
-
-    inputMax.addEventListener("input", () => {
-      this.max = inputMax.value;
-    });
   }
 
   buildCondition() {