Improve filter based on feedback

js/menu/filter/builders.js

@@ -1,11 +1,10 @@
-import { Checkbox } from "./parameters.js";
-
 export class CheckboxBuilder {
-  constructor(name, fullName) {
+  constructor(name, fullName, classType) {
     this.uniqueValues = new Set();
     this.checkBoxes = [];
     this.name = name;
     this.fullName = fullName;
+    this.classType = classType;
   }
 
   add(val) {
@@ -14,7 +13,7 @@ export class CheckboxBuilder {
 
   setCheckBoxes() {
     this.checkBoxes = Array.from(this.uniqueValues).map(
-      (option) => new Checkbox(this.name, option)
+      (option) => new this.classType(this.name, option)
     );
     this.checkBoxes.sort((a, b) => a.value - b.value);
   }

js/menu/filter/filter.js

@@ -6,7 +6,13 @@ import {
   visibleParticles,
 } from "../../main.js";
 import { CheckboxBuilder } from "./builders.js";
-import { Range, Checkbox, buildCriteriaFunction } from "./parameters.js";
+import {
+  Range,
+  Checkbox,
+  BitfieldCheckbox,
+  ValueCheckBox,
+  buildCriteriaFunction,
+} from "./parameters.js";
 import { reconnect } from "./reconnect.js";
 import { getVisible } from "../../events.js";
 
@@ -103,8 +109,16 @@ parametersRange = parametersRange.sort((a, b) =>
 
 parametersRange = parametersRange.map((parameter) => new Range(parameter));
 
-const bits = new CheckboxBuilder("simStatus", "Simulator status");
-const genStatus = new CheckboxBuilder("genStatus", "Generator status");
+const bits = new CheckboxBuilder(
+  "simStatus",
+  "Simulator status",
+  ValueCheckBox
+);
+const genStatus = new CheckboxBuilder(
+  "genStatus",
+  "Generator status",
+  BitfieldCheckbox
+);
 
 function applyFilter(particlesHandler, currentParticles, visibleParticles) {
   const rangeFunctions = Range.buildFilter(parametersRange);

js/menu/filter/parameters.js

@@ -112,7 +112,8 @@ export class Checkbox extends FilterParameter {
     container.appendChild(div);
 
     const label = document.createElement("label");
-    label.textContent = `${this.value}`;
+    const text = this.getDisplayValue();
+    label.textContent = text;
     div.appendChild(label);
 
     const input = document.createElement("input");
@@ -131,6 +132,10 @@ export class Checkbox extends FilterParameter {
     });
   }
 
+  getDisplayValue() {
+    return this.displayValue ?? this.value;
+  }
+
   buildCondition() {
     if (!this.checked) return null;
 
@@ -153,6 +158,42 @@ export class Checkbox extends FilterParameter {
   }
 }
 
+export class ValueCheckBox extends Checkbox {
+  // Classic checkbox
+  constructor(property, value) {
+    super(property, value);
+  }
+}
+
+const bitFieldDisplayValues = {
+  23: "BitOverlay",
+  24: "BitStopped",
+  25: "BitLeftDetector",
+  26: "BitDecayedInCalorimeter",
+  27: "BitDecayedInTracker",
+  28: "BitVertexIsNotEndpointOfParent",
+  29: "BitBackscatter",
+  30: "BitCreatedInSimulation",
+};
+
+export class BitfieldCheckbox extends Checkbox {
+  // Bit manipulation EDM4hep
+  constructor(property, value) {
+    super(property, value);
+  }
+
+  buildCondition() {
+    if (!this.checked) return null;
+
+    return (particle) =>
+      (parseInt(particle[this.property]) & (1 << parseInt(this.value))) !== 0;
+  }
+
+  getDisplayValue() {
+    return bitFieldDisplayValues[this.value] ?? this.value;
+  }
+}
+
 export function buildCriteriaFunction(...functions) {
   const filterFunctions = functions.filter((fn) => typeof fn === "function");