key4hep · kjvbrt · May 31, 2024 · May 13, 2024 · May 14, 2024 · May 15, 2024
diff --git a/css/filter.css b/css/filter.css
@@ -0,0 +1,36 @@
+#filter {
+  width: 16%;
+  position: fixed;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  padding: 10px;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
+
+#filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#filter-button {
+  cursor: pointer;
+}
+
+#close-filter {
+  display: none;
+}
+
+#filter-content {
+  display: none;
+  flex-direction: column;
+  margin-top: 10px;
+}
+
+#filters {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/css/main.css b/css/main.css
@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   /* overflow: hidden; */
+  font-family: sans-serif;
 }
 
 .manipulation-tool {

diff --git a/css/toggle.css b/css/toggle.css
@@ -1,6 +1,5 @@
 #toggle {
   position: fixed;
-  display: none;
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -9,9 +8,9 @@
   z-index: 1;
 }
 
-#toggle-label {
+.toggle-label {
   margin-right: 10px;
-  font-family: sans-serif;
+  margin-left: 10px;
 }
 
 .switch {

diff --git a/img/down_arrow.svg b/img/down_arrow.svg
diff --git a/img/up_arrow.svg b/img/up_arrow.svg
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="css/canvas.css">
   <link rel="stylesheet" href="css/modal.css">
   <link rel="stylesheet" href="css/toggle.css">
+  <link rel="stylesheet" href="css/filter.css">
 </head>
 
 <body>
@@ -45,17 +46,36 @@
   </div>
 
   <div id="toggle" class="manipulation-tool">
-    <span id="toggle-label">Show PDG IDs</span>
+    <span class="toggle-label">Show PDG IDs</span>
     <label class="switch">
       <input type="checkbox">
-      <span class="slider round"></span>
+      <span id="show-pdg" class="slider round"></span>
     </label>
   </div>
 
+  <div id="filter" class="manipulation-tool">
+    <div id="filter-header">
+      <span>Filters</span>
+      <div id="filter-button">
+        <img id="open-filter" src="img/down_arrow.svg" alt="Open filter" width="20" height="20" />
+        <img id="close-filter" src="img/up_arrow.svg" alt="Close filter" width="20" height="20" />
+      </div>
+    </div>
+    <div id="filter-content">
+      <div id="filters">
+      </div>
+      <div>
+        <button id="filter-apply">Apply</button>
+        <button id="filter-reset">Reset</button>
+      </div>
+    </div>
+  </div>
+
   <canvas id="canvas" width="100vw" height="100vh"></canvas>
 
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
   <script type="module" src="js/main.js"></script>
+  <script type="module" src="js/menu/filter/filter.js"></script>
 </body>
 
 </html>
diff --git a/js/draw.js b/js/draw.js
@@ -0,0 +1,18 @@
+export function drawAll(ctx, parentLinks, childrenLinks, infoBoxes) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  // console.time("drawParentLinks");
+  for (const link of parentLinks) {
+    link.draw(ctx, infoBoxes);
+  }
+  // console.timeEnd("drawParentLinks");
+  // console.time("drawChildrenLinks");
+  for (const link of childrenLinks) {
+    link.draw(ctx, infoBoxes);
+  }
+  // console.timeEnd("drawChildrenLinks");
+  // console.time("drawBoxes");
+  for (const infoBox of infoBoxes) {
+    if (infoBox !== null) infoBox.draw(ctx);
+  }
+  // console.timeEnd("drawBoxes");
+}
diff --git a/js/main.js b/js/main.js
@@ -1,11 +1,12 @@
 import { errorMsg, loadMCParticles } from "./tools.js";
-import Toggle from "./menu/toggle.js";
-
-const toggle = new Toggle();
+import { PdgToggle } from "./menu/show-pdg.js";
+import { drawAll } from "./draw.js";
 
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
+const manipulationTools = document.getElementsByClassName("manipulation-tool");
+
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
@@ -50,7 +51,7 @@ const mouseUp = function (event) {
   isDragging = false;
 
   // console.time("drawAll");
-  drawAll();
+  drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
   // console.timeEnd("drawAll");
 };
 
@@ -81,7 +82,7 @@ const mouseMove = function (event) {
   infoBox.y += dy;
 
   // console.time("drawVisible");
-  drawVisible();
+  drawVisible(visibleParentLinks, visibleChildrenLinks, visibleBoxes);
   // console.timeEnd("drawVisible");
 
   prevMouseX = mouseX;
@@ -170,7 +171,11 @@ const getVisible = function () {
   */
 };
 
-const drawVisible = function () {
+const drawVisible = function (
+  visibleParentLinks,
+  visibleChildrenLinks,
+  visibleBoxes
+) {
   const boundigClientRect = canvas.getBoundingClientRect();
   ctx.clearRect(
     0 - boundigClientRect.x,
@@ -189,25 +194,6 @@ const drawVisible = function () {
   }
 };
 
-const drawAll = function () {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  // console.time("drawParentLinks");
-  for (const link of parentLinks) {
-    link.draw(ctx, infoBoxes);
-  }
-  // console.timeEnd("drawParentLinks");
-  // console.time("drawChildrenLinks");
-  for (const link of childrenLinks) {
-    link.draw(ctx, infoBoxes);
-  }
-  // console.timeEnd("drawChildrenLinks");
-  // console.time("drawBoxes");
-  for (const infoBox of infoBoxes) {
-    infoBox.draw(ctx);
-  }
-  // console.timeEnd("drawBoxes");
-};
-
 function start() {
   if (!infoBoxes) {
     return;
@@ -273,7 +259,7 @@ function start() {
     }
   }
 
-  drawAll();
+  drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
 
   getVisible();
 }
@@ -338,5 +324,17 @@ document
     start();
     hideInputModal();
     window.scroll((canvas.width - window.innerWidth) / 2, 0);
-    toggle.init(infoBoxes, drawAll);
+
+    for (const tool of manipulationTools) {
+      tool.style.display = "flex";
+    }
+
+    const pdgToggle = new PdgToggle("show-pdg");
+    pdgToggle.init(() => {
+      pdgToggle.toggle(infoBoxes, () => {
+        drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
+      });
+    });
   });
+
+export { parentLinks, childrenLinks, infoBoxes, ctx };
diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js
@@ -0,0 +1,78 @@
+import { Link } from "../../objects.js";
+import { drawAll } from "../../draw.js";
+import { parentLinks, childrenLinks, infoBoxes, ctx } from "../../main.js";
+import { Range, Checkbox, buildCriteriaFunction } from "./parameters.js";
+import { reconnect } from "./reconnect.js";
+
+const filterButton = document.getElementById("filter-button");
+const openFilter = document.getElementById("open-filter");
+const closeFilter = document.getElementById("close-filter");
+const filterContent = document.getElementById("filter-content");
+
+let active = false;
+
+filterButton.addEventListener("click", () => {
+  active = !active;
+
+  if (active) {
+    openFilter.style.display = "none";
+    closeFilter.style.display = "block";
+    filterContent.style.display = "flex";
+  } else {
+    openFilter.style.display = "block";
+    closeFilter.style.display = "none";
+    filterContent.style.display = "none";
+  }
+});
+
+const filters = document.getElementById("filters");
+const apply = document.getElementById("filter-apply");
+const reset = document.getElementById("filter-reset");
+
+let parametersRange = ["momentum", "vertex", "time", "mass", "charge"];
+
+parametersRange = parametersRange.map((parameter) => new Range(parameter));
+
+parametersRange.forEach((parameter) => parameter.render(filters));
+
+let bitsCheckbox = [23, 24, 25, 26, 27, 28, 29, 30];
+
+bitsCheckbox = bitsCheckbox.map((bit) => new Checkbox("simStatus", bit));
+
+bitsCheckbox.forEach((checkbox) => checkbox.render(filters));
+
+apply.addEventListener("click", () => {
+  const rangeFunctions = Range.buildFilter(parametersRange);
+  const checkboxFunctions = Checkbox.buildFilter(bitsCheckbox);
+
+  const criteriaFunction = buildCriteriaFunction(
+    rangeFunctions,
+    checkboxFunctions
+  );
+
+  const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+    criteriaFunction,
+    parentLinks,
+    childrenLinks,
+    infoBoxes
+  );
+
+  drawAll(ctx, newParentLinks, newChildrenLinks, filteredParticles);
+});
+
+reset.addEventListener("click", () => {
+  drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
+
+  filters.innerHTML = "";
+
+  parametersRange.forEach((parameter) => {
+    parameter.min = undefined;
+    parameter.max = undefined;
+    parameter.render(filters);
+  });
+
+  bitsCheckbox.forEach((checkbox) => {
+    checkbox.checked = false;
+    checkbox.render(filters);
+  });
+});