From eb80daf3a27161be75c210ebca0227644f212de9 Mon Sep 17 00:00:00 2001
From: brauliorivas <brauliorivas@users.noreply.github.com>
Date: Fri, 31 May 2024 16:08:59 +0000
Subject: [PATCH] =?UTF-8?q?Deploy=20preview=20for=20PR=2025=20=F0=9F=9B=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...e4e256db2022cde860fee7431094e5989400b.idx} | Bin 12216 -> 12216 bytes
 ...4e256db2022cde860fee7431094e5989400b.pack} | Bin 151611 -> 151611 bytes
 ...e4e256db2022cde860fee7431094e5989400b.rev} | Bin 1644 -> 1644 bytes
 pr-preview/pr-25/css/filter.css               |  36 +++
 pr-preview/pr-25/css/main.css                 |   1 +
 pr-preview/pr-25/css/toggle.css               |   5 +-
 pr-preview/pr-25/img/down_arrow.svg           |   1 +
 pr-preview/pr-25/img/up_arrow.svg             |   1 +
 pr-preview/pr-25/index.html                   |  26 ++-
 pr-preview/pr-25/js/draw.js                   |  18 ++
 pr-preview/pr-25/js/main.js                   |  52 +++--
 pr-preview/pr-25/js/menu/filter/filter.js     |  78 +++++++
 pr-preview/pr-25/js/menu/filter/parameters.js | 147 +++++++++++++
 pr-preview/pr-25/js/menu/filter/reconnect.js  |  70 ++++++
 pr-preview/pr-25/js/menu/show-pdg.js          |  22 ++
 pr-preview/pr-25/js/menu/toggle.js            |  29 +--
 pr-preview/pr-25/js/objects.js                |   9 +
 pr-preview/pr-25/js/types/load.js             |  77 +++++++
 pr-preview/pr-25/js/types/reconstruction.js   | 175 +++++++++++++++
 pr-preview/pr-25/test/filter.test.js          | 207 ++++++++++++++++++
 pr-preview/pr-25/test/load.test.js            | 138 ++++++++++++
 21 files changed, 1036 insertions(+), 56 deletions(-)
 rename pr-preview/pr-25/bare_pr_preview/objects/pack/{pack-cee964a1e325ed338ecd63a990839efa6ecdd023.idx => pack-fd5e4e256db2022cde860fee7431094e5989400b.idx} (98%)
 rename pr-preview/pr-25/bare_pr_preview/objects/pack/{pack-cee964a1e325ed338ecd63a990839efa6ecdd023.pack => pack-fd5e4e256db2022cde860fee7431094e5989400b.pack} (99%)
 rename pr-preview/pr-25/bare_pr_preview/objects/pack/{pack-cee964a1e325ed338ecd63a990839efa6ecdd023.rev => pack-fd5e4e256db2022cde860fee7431094e5989400b.rev} (91%)
 create mode 100644 pr-preview/pr-25/css/filter.css
 create mode 100644 pr-preview/pr-25/img/down_arrow.svg
 create mode 100644 pr-preview/pr-25/img/up_arrow.svg
 create mode 100644 pr-preview/pr-25/js/draw.js
 create mode 100644 pr-preview/pr-25/js/menu/filter/filter.js
 create mode 100644 pr-preview/pr-25/js/menu/filter/parameters.js
 create mode 100644 pr-preview/pr-25/js/menu/filter/reconnect.js
 create mode 100644 pr-preview/pr-25/js/menu/show-pdg.js
 create mode 100644 pr-preview/pr-25/js/types/load.js
 create mode 100644 pr-preview/pr-25/js/types/reconstruction.js
 create mode 100644 pr-preview/pr-25/test/filter.test.js
 create mode 100644 pr-preview/pr-25/test/load.test.js

diff --git a/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.idx b/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.idx
similarity index 98%
rename from pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.idx
rename to pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.idx
index f0ad81a09bae5bb331893805910082d34eaa8720..a115939cbd14d3c0eb2fd3e2d5655655f5bd63ab 100644
GIT binary patch
delta 64
zcmV-G0KfmZU$|eef-3^^QL}_A1_1)~jI)d^1Oq7jUQQ)#vH~pLh7ay^F$qpti9ieQ
W+8v7w_nNZSv-ID5coD_;S$?r{gB@c4

delta 64
zcmV-G0KfmZU$|eef-3^`gR_Jy1_1)|QL~IJ1Oq6}>13hfCG9hg&10#MgP!_s&Cnyh
Wei^;P>6u~<+r4Ova8JF>u<uvs`5^@W

diff --git a/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.pack b/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.pack
similarity index 99%
rename from pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.pack
rename to pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.pack
index d3aa67148a9b4d4148b0afeb751fbf1c61de9622..32e760c1b9416f342c814e2b5912f2dd94f50451 100644
GIT binary patch
delta 50
zcmV-20L}lqpb5L634pW#QS-Nh^#MBqw^8!}G6J{0_W@~G6#ZUKC2g_-EZ&9>?sPE;
IPFaaS3pkS$#sB~S

delta 50
zcmV-20L}lqpb5L634pW#QS-Nq^#L*hw^8!}I|8@9_W@~G6wc{nq2nd(Gmgz;sgQ%7
I`fkn8BVy_qP5=M^

diff --git a/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.rev b/pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.rev
similarity index 91%
rename from pr-preview/pr-25/bare_pr_preview/objects/pack/pack-cee964a1e325ed338ecd63a990839efa6ecdd023.rev
rename to pr-preview/pr-25/bare_pr_preview/objects/pack/pack-fd5e4e256db2022cde860fee7431094e5989400b.rev
index e75cea26c3db27b34640c487b940a954a6b6d2db..e8974c3332de3341071a4e0decbd0e06d5afff57 100644
GIT binary patch
delta 59
zcmV-B0L1_74D1ZB%LE0A0002Yv(N-|0Vw@mP9<%!0xaH!5AJj^2~JswKnqc|L<2$G
R8Lz<QsD~Qcgj#6OK9jiU7<K>v

delta 59
zcmV-B0L1_74D1ZB%LE0?0001rv(N-|0VvMtWTE3F?K6(eW2umXp89Uh&?6XY$1Lq@
R98RYME!ox$vA{n|$HFuc9Af|g

diff --git a/pr-preview/pr-25/css/filter.css b/pr-preview/pr-25/css/filter.css
new file mode 100644
index 00000000..73dd22ee
--- /dev/null
+++ b/pr-preview/pr-25/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/pr-preview/pr-25/css/main.css b/pr-preview/pr-25/css/main.css
index c62a1736..92b54659 100644
--- a/pr-preview/pr-25/css/main.css
+++ b/pr-preview/pr-25/css/main.css
@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   /* overflow: hidden; */
+  font-family: sans-serif;
 }
 
 .manipulation-tool {
diff --git a/pr-preview/pr-25/css/toggle.css b/pr-preview/pr-25/css/toggle.css
index 397d820f..9a173f24 100644
--- a/pr-preview/pr-25/css/toggle.css
+++ b/pr-preview/pr-25/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/pr-preview/pr-25/img/down_arrow.svg b/pr-preview/pr-25/img/down_arrow.svg
new file mode 100644
index 00000000..37813543
--- /dev/null
+++ b/pr-preview/pr-25/img/down_arrow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="396.6,160 416,180.7 256,352 96,180.7 115.3,160 256,310.5 "/></svg>
\ No newline at end of file
diff --git a/pr-preview/pr-25/img/up_arrow.svg b/pr-preview/pr-25/img/up_arrow.svg
new file mode 100644
index 00000000..f837cd67
--- /dev/null
+++ b/pr-preview/pr-25/img/up_arrow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="396.6,352 416,331.3 256,160 96,331.3 115.3,352 256,201.5 "/></svg>
\ No newline at end of file
diff --git a/pr-preview/pr-25/index.html b/pr-preview/pr-25/index.html
index 5a37f9ec..a1b96a88 100644
--- a/pr-preview/pr-25/index.html
+++ b/pr-preview/pr-25/index.html
@@ -10,13 +10,14 @@
   <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>
   <div id="input-modal" class="modal-background">
     <div class="modal-content">
 
-      <p>Welcome to <span id="logo">
+      <p>¡¡¡Welcome to <span id="logo">
           <span id="logo-d">d</span><span id="logo-m">m</span><span id="logo-x">X</span>
         </span></p>
 
@@ -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>
\ No newline at end of file
diff --git a/pr-preview/pr-25/js/draw.js b/pr-preview/pr-25/js/draw.js
new file mode 100644
index 00000000..09aa8a6b
--- /dev/null
+++ b/pr-preview/pr-25/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/pr-preview/pr-25/js/main.js b/pr-preview/pr-25/js/main.js
index f7dd8148..2f342da6 100644
--- a/pr-preview/pr-25/js/main.js
+++ b/pr-preview/pr-25/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/pr-preview/pr-25/js/menu/filter/filter.js b/pr-preview/pr-25/js/menu/filter/filter.js
new file mode 100644
index 00000000..93d9c08f
--- /dev/null
+++ b/pr-preview/pr-25/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);
+  });
+});
diff --git a/pr-preview/pr-25/js/menu/filter/parameters.js b/pr-preview/pr-25/js/menu/filter/parameters.js
new file mode 100644
index 00000000..60f1d6d6
--- /dev/null
+++ b/pr-preview/pr-25/js/menu/filter/parameters.js
@@ -0,0 +1,147 @@
+class FilterParameter {
+  property;
+
+  constructor(property) {
+    this.property = property;
+  }
+
+  render(container) {}
+
+  buildCondition() {}
+
+  static parametersFunctions(parameters) {
+    const functions = parameters.map((parameter) => parameter.buildCondition());
+    return functions.filter((fn) => fn);
+  }
+}
+
+export class Range extends FilterParameter {
+  min;
+  max;
+
+  constructor(property) {
+    super(property);
+  }
+
+  render(container) {
+    const label = document.createElement("label");
+    label.textContent = this.property;
+    container.appendChild(label);
+
+    const inputMin = document.createElement("input");
+    inputMin.type = "number";
+    inputMin.placeholder = "min";
+    container.appendChild(inputMin);
+
+    const separator = document.createTextNode(" - ");
+    container.appendChild(separator);
+
+    const inputMax = document.createElement("input");
+    inputMax.type = "number";
+    inputMax.placeholder = "max";
+    container.appendChild(inputMax);
+
+    inputMin.addEventListener("input", () => {
+      this.min = inputMin.value;
+    });
+
+    inputMax.addEventListener("input", () => {
+      this.max = inputMax.value;
+    });
+  }
+
+  buildCondition() {
+    if (!this.min && !this.max) return null;
+
+    return (particle) => {
+      if (particle) {
+        if (particle[this.property] < this.min) {
+          return false;
+        }
+
+        if (particle[this.property] > this.max) {
+          return false;
+        }
+
+        return true;
+      }
+    };
+  }
+
+  static buildFilter(parametersRange) {
+    const rangeFunctions = Range.parametersFunctions(parametersRange);
+
+    const func = rangeFunctions.reduce(
+      (acc, fn) => {
+        return (particle) => acc(particle) && fn(particle);
+      },
+      () => true
+    );
+
+    return func;
+  }
+}
+
+export class Checkbox extends FilterParameter {
+  value;
+
+  constructor(property, value) {
+    super(property);
+    this.value = value;
+  }
+
+  render(container) {
+    const div = document.createElement("div");
+    container.appendChild(div);
+
+    const label = document.createElement("label");
+    label.textContent = `${this.property}: ${this.value}`;
+    div.appendChild(label);
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    div.appendChild(input);
+
+    div.style.display = "flex";
+    div.style.alignItems = "center";
+    div.style.justifyContent = "space-between";
+
+    input.addEventListener("change", () => {
+      this.checked = input.checked;
+    });
+  }
+
+  buildCondition() {
+    if (!this.checked) return null;
+
+    return (particle) => particle[this.property] === this.value;
+  }
+
+  static buildFilter(parametersCheckbox) {
+    const checkboxFunctions = Checkbox.parametersFunctions(parametersCheckbox);
+
+    if (checkboxFunctions.length === 0) return () => true;
+
+    const func = checkboxFunctions.reduce(
+      (acc, fn) => {
+        return (particle) => acc(particle) || fn(particle);
+      },
+      () => false
+    );
+
+    return func;
+  }
+}
+
+export function buildCriteriaFunction(...functions) {
+  const filterFunctions = functions.filter((fn) => typeof fn === "function");
+
+  const finalFunction = filterFunctions.reduce(
+    (acc, fn) => {
+      return (particle) => acc(particle) && fn(particle);
+    },
+    () => true
+  );
+
+  return (particle) => finalFunction(particle);
+}
diff --git a/pr-preview/pr-25/js/menu/filter/reconnect.js b/pr-preview/pr-25/js/menu/filter/reconnect.js
new file mode 100644
index 00000000..97f6c35e
--- /dev/null
+++ b/pr-preview/pr-25/js/menu/filter/reconnect.js
@@ -0,0 +1,70 @@
+import { Link } from "../../objects.js";
+
+export function reconnect(
+  criteriaFunction,
+  parentLinks,
+  childrenLinks,
+  particles
+) {
+  const newParentLinks = [];
+  const newChildrenLinks = [];
+  const filteredParticles = [];
+
+  for (const particle of particles) {
+    if (!particle) continue;
+
+    if (!criteriaFunction(particle)) {
+      filteredParticles.push(null);
+
+      const parentParticles = [];
+      const childrenParticles = [];
+
+      for (const parent of particle.parents) {
+        if (criteriaFunction(particles[parent])) {
+          parentParticles.push(parent);
+        }
+      }
+
+      for (const child of particle.children) {
+        if (criteriaFunction(particles[child])) {
+          childrenParticles.push(child);
+        }
+      }
+
+      for (const parent of parentParticles) {
+        for (const child of childrenParticles) {
+          const linkToParent = new Link(newParentLinks.length, parent, child);
+          linkToParent.xShift = 3;
+          const linkToChild = new Link(newChildrenLinks.length, parent, child);
+          linkToChild.color = "#0A0";
+          linkToChild.xShift = -3;
+
+          newParentLinks.push(linkToParent);
+          newChildrenLinks.push(linkToChild);
+        }
+      }
+    } else {
+      filteredParticles.push(particle);
+
+      for (const parentLinkId of particle.parentLinks) {
+        const parentLink = parentLinks[parentLinkId];
+        if (!parentLink) continue;
+        const parent = particles[parentLink.from];
+        if (criteriaFunction(parent)) {
+          newParentLinks.push(parentLink);
+        }
+      }
+
+      for (const childrenLinkId of particle.childrenLinks) {
+        const childrenLink = childrenLinks[childrenLinkId];
+        if (!childrenLink) continue;
+        const child = particles[childrenLink.to];
+        if (criteriaFunction(child)) {
+          newChildrenLinks.push(childrenLink);
+        }
+      }
+    }
+  }
+
+  return [newParentLinks, newChildrenLinks, filteredParticles];
+}
diff --git a/pr-preview/pr-25/js/menu/show-pdg.js b/pr-preview/pr-25/js/menu/show-pdg.js
new file mode 100644
index 00000000..e78627a7
--- /dev/null
+++ b/pr-preview/pr-25/js/menu/show-pdg.js
@@ -0,0 +1,22 @@
+// const slider = document.getElementById("show-pdg");
+import { Toggle } from "./toggle.js";
+
+export class PdgToggle extends Toggle {
+  constructor(id) {
+    super(id);
+  }
+
+  toggle(infoBoxes, redraw) {
+    if (this.isSliderActive) {
+      for (const infoBox of infoBoxes) {
+        infoBox.updateTexImg(`${infoBox.pdg}`);
+      }
+    } else {
+      for (const infoBox of infoBoxes) {
+        infoBox.updateTexImg(infoBox.name);
+      }
+    }
+
+    redraw();
+  }
+}
diff --git a/pr-preview/pr-25/js/menu/toggle.js b/pr-preview/pr-25/js/menu/toggle.js
index c9c84c3a..d3fd2025 100644
--- a/pr-preview/pr-25/js/menu/toggle.js
+++ b/pr-preview/pr-25/js/menu/toggle.js
@@ -1,30 +1,13 @@
-const toggle = document.getElementById("toggle");
-const slider = document.getElementsByClassName("slider")[0];
-
-class Toggle {
-  constructor() {
+export class Toggle {
+  constructor(id) {
     this.isSliderActive = false;
+    this.slider = document.getElementById(id);
   }
 
-  init(infoBoxes, drawAll) {
-    toggle.style.display = "flex";
-
-    slider.addEventListener("click", () => {
+  init(callback) {
+    this.slider.addEventListener("click", () => {
       this.isSliderActive = !this.isSliderActive;
-
-      if (this.isSliderActive) {
-        for (const infoBox of infoBoxes) {
-          infoBox.updateTexImg(`${infoBox.pdg}`);
-        }
-      } else {
-        for (const infoBox of infoBoxes) {
-          infoBox.updateTexImg(infoBox.name);
-        }
-      }
-
-      drawAll();
+      callback();
     });
   }
 }
-
-export default Toggle;
diff --git a/pr-preview/pr-25/js/objects.js b/pr-preview/pr-25/js/objects.js
index 7249e2b9..c9bef14e 100644
--- a/pr-preview/pr-25/js/objects.js
+++ b/pr-preview/pr-25/js/objects.js
@@ -159,6 +159,15 @@ export class Link {
     const boxFrom = infoBoxes[this.from];
     const boxTo = infoBoxes[this.to];
 
+    if (
+      boxFrom === null ||
+      boxTo === null ||
+      boxFrom === undefined ||
+      boxTo === undefined
+    ) {
+      return;
+    }
+
     const fromX = boxFrom.x + boxFrom.width / 2;
     const fromY = boxFrom.y + boxFrom.height;
     const toX = boxTo.x + boxTo.width / 2;
diff --git a/pr-preview/pr-25/js/types/load.js b/pr-preview/pr-25/js/types/load.js
new file mode 100644
index 00000000..90abdda7
--- /dev/null
+++ b/pr-preview/pr-25/js/types/load.js
@@ -0,0 +1,77 @@
+import jsonData from "../../input/p8_ee_ZH_ecm240_edm4hep.edm4hep.json" assert { type: "json" }; // node 20
+import {
+  Cluster,
+  ParticleID,
+  ReconstructedParticle,
+  Vertex,
+  Track,
+} from "./reconstruction.js";
+
+const loaders = {
+  ReconstructedParticle: ReconstructedParticle.load,
+  ParticleID: ParticleID.load,
+  Vertex: Vertex.load,
+  Track: Track.load,
+  Cluster: Cluster.load,
+};
+
+const loadersConfig = [
+  "ReconstructedParticle",
+  "ParticleID",
+  "Vertex",
+  "Track",
+  "Cluster",
+];
+
+export function buildLoader(config) {
+  let newLoader = {
+    types: {},
+    getLoader: (name) => {
+      if (newLoader.types.hasOwnProperty(name)) {
+        return newLoader.types[name];
+      }
+      return false;
+    },
+    getAllLoaders: () => {
+      return newLoader.types;
+    },
+  };
+
+  for (const particle of config) {
+    if (loaders.hasOwnProperty(particle)) {
+      newLoader.types[particle] = loaders[particle];
+    }
+  }
+
+  return newLoader;
+}
+
+export function loadParticles(jsonData, event, loadersConfig) {
+  const eventData = Object.values(jsonData["Event " + event]);
+
+  const particles = {};
+
+  if (typeof loadersConfig === "string") loadersConfig = [loadersConfig];
+  const loader = buildLoader(loadersConfig);
+
+  Object.keys(loader.getAllLoaders()).forEach((key) => (particles[key] = []));
+
+  for (const [type, loadFunction] of Object.entries(loader.getAllLoaders())) {
+    const particlesType = eventData.filter(
+      (element) => element.collType === `edm4hep::${type}Collection`
+    );
+
+    particlesType.forEach((collection) => {
+      const loadedParticles = loadFunction(collection.collection);
+      particles[type] = loadedParticles;
+    });
+  }
+  try {
+  } catch (error) {
+    console.error(error);
+  }
+
+  return particles;
+}
+
+loadParticles(jsonData, 4, loadersConfig);
diff --git a/pr-preview/pr-25/js/types/reconstruction.js b/pr-preview/pr-25/js/types/reconstruction.js
new file mode 100644
index 00000000..f072440f
--- /dev/null
+++ b/pr-preview/pr-25/js/types/reconstruction.js
@@ -0,0 +1,175 @@
+export class Cluster {
+  constructor() {
+    // Physics properties
+    this.type = 0;
+    this.energy = 0; // GeV
+    this.energyError = 0; // GeV
+    this.position = []; // mm
+    this.positionError = [];
+    this.iTheta = 0;
+    this.phi = 0;
+    this.directionError = {}; // mm^2
+    this.shapeParameters = [];
+    this.subdetectorEnergies = [];
+    this.clusters = [];
+    this.hits = [];
+  }
+
+  static load(collection) {
+    const particles = [];
+
+    for (const [index, particle] of collection.entries()) {
+      const cluster = new Cluster();
+      cluster.index = index;
+
+      cluster.type = particle.type;
+      cluster.energy = particle.energy;
+      cluster.energyError = particle.energyError;
+      cluster.position = particle.position;
+      cluster.positionError = particle.positionError;
+      cluster.iTheta = particle.iTheta;
+      cluster.phi = particle.phi;
+      cluster.directionError = particle.directionError;
+      cluster.shapeParameters = particle.shapeParameters;
+      cluster.subdetectorEnergies = particle.subdetectorEnergies;
+      cluster.clusters = particle.clusters;
+      cluster.hits = particle.hits;
+
+      particles.push(cluster);
+    }
+
+    return particles;
+  }
+}
+
+export class ParticleID {
+  constructor() {
+    // Physics properties
+    this.type = 0;
+    this.pdg = 0;
+    this.algorithmType = 0;
+    this.likelihood = 0;
+    this.parameters = [];
+    this.particle = [];
+  }
+
+  static load(collection) {
+    const particles = [];
+
+    for (const [index, particle] of collection.entries()) {
+      const particleID = new ParticleID();
+      particleID.index = index;
+
+      particleID.type = particle.type;
+      particleID.pdg = particle.pdg;
+      particleID.algorithmType = particle.algorithmType;
+      particleID.likelihood = particle.likelihood;
+      particleID.parameters = particle.parameters;
+
+      particles.push(particleID);
+    }
+
+    return particles;
+  }
+}
+
+export class ReconstructedParticle {
+  constructor() {
+    // Physics properties
+    this.pdg = 0;
+    this.energy = 0; // GeV
+    this.momentum = {}; // GeV
+    this.referencePoint = {}; // mm
+    this.charge = 0;
+    this.mass = 0; // GeV
+    this.goodnessOfPID = 0;
+    this.covMatrix = [];
+    this.startVertex = {};
+    this.clusters = [];
+    this.tracks = [];
+    this.particles = [];
+  }
+
+  static load(collection) {
+    const particles = [];
+
+    for (const [index, particle] of collection.entries()) {
+      const reconstructedParticle = new ReconstructedParticle();
+      reconstructedParticle.index = index;
+
+      reconstructedParticle.energy = particle.energy;
+      reconstructedParticle.momentum = particle.momentum;
+      reconstructedParticle.referencePoint = particle.referencePoint;
+      reconstructedParticle.charge = particle.charge;
+      reconstructedParticle.mass = particle.mass;
+      reconstructedParticle.goodnessOfPID = particle.goodnessOfPID;
+      reconstructedParticle.covMatrix = particle.covMatrix;
+      reconstructedParticle.startVertex = particle.startVertex;
+      reconstructedParticle.clusters = particle.clusters;
+      reconstructedParticle.tracks = particle.tracks;
+      reconstructedParticle.particles = particle.particles;
+
+      particles.push(reconstructedParticle);
+    }
+
+    return particles;
+  }
+}
+
+export class Vertex {
+  constructor() {
+    // Physics properties
+    this.primary = 0;
+    this.chi2 = 0;
+    this.probability = 0;
+    this.position = 0; // mm
+    this.covMatrix = [];
+    this.algorithmType = 0;
+    this.parameters = 0;
+    this.associatedParticles = [];
+  }
+
+  static load() {}
+}
+
+export class Track {
+  constructor() {
+    // Physics properties
+    this.type = 0;
+    this.chi2 = 0;
+    this.ndf = 0;
+    this.dEdx = 0;
+    this.dEdxError = 0;
+    this.radiusOfInnermostHit = 0;
+    this.subdetectorHitNumbers = [];
+    this.trackStates = [];
+    this.dxQuantities = [];
+    this.trackerHits = [];
+    this.tracks = [];
+  }
+
+  static load(collection) {
+    const particles = [];
+
+    for (const [index, particle] of collection.entries()) {
+      const track = new Track();
+      track.index = index;
+
+      track.type = particle.type;
+      track.chi2 = particle.chi2;
+      track.ndf = particle.ndf;
+      track.dEdx = particle.dEdx;
+      track.dEdxError = particle.dEdxError;
+      track.radiusOfInnermostHit = particle.radiusOfInnermostHit;
+      track.subdetectorHitNumbers = particle.subdetectorHitNumbers;
+      track.trackStates = particle.trackStates;
+      track.dxQuantities = particle.dxQuantities;
+      track.trackerHits = particle.trackerHits;
+      track.tracks = particle.tracks;
+
+      particles.push(track);
+    }
+
+    return particles;
+  }
+}
diff --git a/pr-preview/pr-25/test/filter.test.js b/pr-preview/pr-25/test/filter.test.js
new file mode 100644
index 00000000..01e08c5f
--- /dev/null
+++ b/pr-preview/pr-25/test/filter.test.js
@@ -0,0 +1,207 @@
+import { reconnect } from "../js/menu/filter/reconnect.js";
+import { InfoBox, Link } from "../js/objects.js";
+import {
+  Range,
+  Checkbox,
+  buildCriteriaFunction,
+} from "../js/menu/filter/parameters.js";
+
+const parentLinks = [];
+const childrenLinks = [];
+const particles = [];
+
+beforeAll(() => {
+  for (let i = 0; i < 5; i++) {
+    const particle = new InfoBox(i);
+    particle.momentum = i * 100;
+    particle.charge = i;
+    particle.mass = i * 10;
+    particle.simStatus = i + 23;
+    particles.push(particle);
+  }
+
+  parentLinks.push(new Link(0, 0, 1));
+  parentLinks.push(new Link(1, 0, 2));
+  parentLinks.push(new Link(2, 2, 4));
+  parentLinks.push(new Link(3, 1, 3));
+  parentLinks.push(new Link(4, 3, 4));
+
+  childrenLinks.push(new Link(0, 0, 1));
+  childrenLinks.push(new Link(1, 0, 2));
+  childrenLinks.push(new Link(2, 1, 3));
+  childrenLinks.push(new Link(3, 2, 4));
+  childrenLinks.push(new Link(4, 3, 4));
+
+  particles[0].children = [1, 2];
+  particles[0].childrenLinks = [0, 1];
+
+  particles[1].parents = [0];
+  particles[1].children = [3];
+  particles[1].parentLinks = [0];
+  particles[1].childrenLinks = [2];
+
+  particles[2].parents = [0];
+  particles[2].children = [4];
+  particles[2].parentLinks = [1];
+  particles[2].childrenLinks = [3];
+
+  particles[3].parents = [1];
+  particles[3].children = [4];
+  particles[3].parentLinks = [3];
+  particles[3].childrenLinks = [4];
+
+  particles[4].parents = [2, 3];
+  particles[4].parentLinks = [2, 4];
+});
+
+describe("filter by ranges", () => {
+  it("filter by a single range parameter", () => {
+    const momentum = new Range("momentum");
+    momentum.min = 300;
+    momentum.max = 1000;
+    const rangeFilters = Range.buildFilter([momentum]);
+    const criteriaFunction = buildCriteriaFunction(rangeFilters);
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newChildrenLinks.map((link) => link.id)).toEqual([4]);
+    expect(newParentLinks.map((link) => link.id)).toEqual([4]);
+    expect(
+      filteredParticles.filter((p) => p).map((particle) => particle.id)
+    ).toEqual([3, 4]);
+  });
+
+  it("filter by a combination of ranges", () => {
+    const charge = new Range("charge");
+    charge.min = 3;
+    const mass = new Range("mass");
+    mass.min = 20;
+    mass.max = 40;
+    const rangeFilters = Range.buildFilter([mass, charge]);
+    const criteriaFunction = buildCriteriaFunction(rangeFilters);
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newChildrenLinks.map((link) => link.id)).toEqual([4]);
+    expect(newParentLinks.map((link) => link.id)).toEqual([4]);
+    expect(
+      filteredParticles.filter((p) => p).map((particle) => particle.id)
+    ).toEqual([3, 4]);
+  });
+});
+
+describe("filter by checkboxes", () => {
+  it("filter by a single checkbox", () => {
+    const simulatorStatus = new Checkbox("simStatus", 23);
+    simulatorStatus.checked = true;
+    const checkboxFilters = Checkbox.buildFilter([simulatorStatus]);
+    const criteriaFunction = buildCriteriaFunction(checkboxFilters);
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newChildrenLinks.map((link) => link.id)).toEqual([]);
+    expect(newParentLinks.map((link) => link.id)).toEqual([]);
+    expect(
+      filteredParticles.filter((p) => p).map((particle) => particle.id)
+    ).toEqual([0]);
+  });
+
+  it("filter by a combination of checkboxes", () => {
+    const simulatorStatus1 = new Checkbox("simStatus", 23);
+    simulatorStatus1.checked = true;
+    const simulatorStatus2 = new Checkbox("simStatus", 26);
+    simulatorStatus2.checked = true;
+    const simulatorStatus3 = new Checkbox("simStatus", 27);
+    simulatorStatus3.checked = true;
+    const checkboxFilters = Checkbox.buildFilter([
+      simulatorStatus1,
+      simulatorStatus2,
+      simulatorStatus3,
+    ]);
+    const criteriaFunction = buildCriteriaFunction(checkboxFilters);
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newChildrenLinks.map((link) => link.id)).toEqual([0, 1, 4]);
+    expect(newParentLinks.map((link) => link.id)).toEqual([0, 1, 4]);
+    expect(
+      filteredParticles.filter((p) => p).map((particle) => particle.id)
+    ).toEqual([0, 3, 4]);
+  });
+});
+
+describe("filter by ranges and checkboxes", () => {
+  it("show all particles when no kind of filter is applied", () => {
+    const charge = new Range("charge");
+    const simulatorStatus = new Checkbox("simStatus", 26);
+    const rangeFilters = Range.buildFilter([charge]);
+    const checkboxFilters = Checkbox.buildFilter([simulatorStatus]);
+    const criteriaFunction = buildCriteriaFunction(
+      rangeFilters,
+      checkboxFilters
+    );
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newParentLinks.map((link) => link.id).sort()).toEqual([
+      0, 1, 2, 3, 4,
+    ]);
+    expect(newChildrenLinks.map((link) => link.id).sort()).toEqual([
+      0, 1, 2, 3, 4,
+    ]);
+    expect(filteredParticles.map((particle) => particle.id)).toEqual([
+      0, 1, 2, 3, 4,
+    ]);
+  });
+
+  it("filter by a combination of ranges and checkboxes", () => {
+    const charge = new Range("charge");
+    charge.max = 3;
+    const simulatorStatus = new Checkbox("simStatus", 23);
+    simulatorStatus.checked = true;
+    const rangeFilters = Range.buildFilter([charge]);
+    const checkboxFilters = Checkbox.buildFilter([simulatorStatus]);
+    const criteriaFunction = buildCriteriaFunction(
+      rangeFilters,
+      checkboxFilters
+    );
+
+    const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+      criteriaFunction,
+      parentLinks,
+      childrenLinks,
+      particles
+    );
+
+    expect(newChildrenLinks.map((link) => link.id)).toEqual([]);
+    expect(newParentLinks.map((link) => link.id)).toEqual([]);
+    expect(
+      filteredParticles.filter((p) => p).map((particle) => particle.id)
+    ).toEqual([0]);
+  });
+});
diff --git a/pr-preview/pr-25/test/load.test.js b/pr-preview/pr-25/test/load.test.js
new file mode 100644
index 00000000..d6183b19
--- /dev/null
+++ b/pr-preview/pr-25/test/load.test.js
@@ -0,0 +1,138 @@
+import { buildLoader, loadParticles } from "../js/types/load";
+
+const data = {
+  "Event 0": {
+    "EFlowPhoton": {
+      "collID": 7,
+      "collType": "edm4hep::ClusterCollection",
+      "collection": [
+        {
+          "clusters": [],
+          "directionError": {
+            "x": 0.0,
+            "y": 0.0,
+            "z": 0.0,
+          },
+          "energy": 6.2020978927612305,
+          "energyError": 0.0,
+          "hits": [],
+          "iTheta": 0.0,
+          "particleIDs": [],
+          "phi": 0.0,
+          "position": {
+            "x": 0.0,
+            "y": 0.0,
+            "z": 0.0,
+          },
+          "positionError": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
+          "shapeParameters": [],
+          "subdetectorEnergies": [],
+          "type": 0,
+        },
+      ],
+    },
+    "Jet": {
+      "collID": 13,
+      "collType": "edm4hep::ReconstructedParticleCollection",
+      "collection": [
+        {
+          "charge": 1.0,
+          "clusters": [],
+          "covMatrix": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
+          "energy": 12.062528610229492,
+          "goodnessOfPID": 0.0,
+          "mass": 2.315242290496826,
+          "momentum": {
+            "x": 11.738886833190918,
+            "y": 1.2114704847335815,
+            "z": 0.9354811906814575,
+          },
+          "particleIDUsed": {
+            "collectionID": -2,
+            "index": -2,
+          },
+          "particleIDs": [
+            {
+              "collectionID": 4,
+              "index": 45,
+            },
+          ],
+          "particles": [
+            {
+              "collectionID": 14,
+              "index": 24,
+            },
+            {
+              "collectionID": 14,
+              "index": 22,
+            },
+            {
+              "collectionID": 14,
+              "index": 74,
+            },
+            {
+              "collectionID": 14,
+              "index": 23,
+            },
+            {
+              "collectionID": 14,
+              "index": 25,
+            },
+            {
+              "collectionID": 14,
+              "index": 26,
+            },
+          ],
+          "referencePoint": {
+            "x": 0.0,
+            "y": 0.0,
+            "z": 0.0,
+          },
+          "startVertex": {
+            "collectionID": -2,
+            "index": -2,
+          },
+          "tracks": [],
+          "type": 0,
+        },
+      ],
+    },
+  },
+};
+
+describe("build loader", () => {
+  it("should create a loader with a set of types", () => {
+    const loadersConfig = ["ReconstructedParticle", "ParticleID"];
+    const loader = buildLoader(loadersConfig);
+    const loaderFunctions = loadersConfig.map((type) => loader.getLoader(type));
+
+    expect(loaderFunctions.every((f) => typeof f === "function")).toBe(true);
+  });
+
+  it("should fail when requesting a loader that doesn't exist", () => {
+    const loadersConfig = ["ReconstructedParticle", "ParticleID"];
+    const loader = buildLoader(loadersConfig);
+
+    expect(loader.getLoader("Vertex")).toBe(false);
+  });
+});
+
+describe("load different types of particles", () => {
+  it("should only load particles of one type", () => {
+    const loadersConfig = "ReconstructedParticle";
+
+    const particles = loadParticles(data, "0", loadersConfig);
+
+    expect(particles.hasOwnProperty(loadersConfig)).toBe(true);
+  });
+
+  it("should load particles of multiple types", () => {
+    const loadersConfig = ["ReconstructedParticle", "Cluster"];
+
+    const particles = loadParticles(data, "0", loadersConfig);
+
+    expect(loadersConfig.every((type) => particles.hasOwnProperty(type))).toBe(
+      true
+    );
+  });
+});