filtering/reconnecting

css/toggle.css

@@ -9,8 +9,9 @@
   z-index: 1;
 }
 
-#toggle-label {
+.toggle-label {
   margin-right: 10px;
+  margin-left: 10px;
   font-family: sans-serif;
 }
 

index.html

@@ -45,10 +45,15 @@
   </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>
+    <span class="toggle-label">Filter</span>
+    <label class="switch">
+      <input type="checkbox">
+      <span id="filter" class="slider round"></span>
     </label>
   </div>
 

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 { Filter } from "./menu/filter.js";
 
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
+const toggleMenu = document.getElementById("toggle");
+
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
@@ -50,7 +51,7 @@ const mouseUp = function (event) {
   isDragging = false;
 
   // console.time("drawAll");
-  drawAll();
+  drawAll(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,7 +194,7 @@ const drawVisible = function () {
   }
 };
 
-const drawAll = function () {
+const drawAll = function (parentLinks, childrenLinks, infoBoxes) {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   // console.time("drawParentLinks");
   for (const link of parentLinks) {
@@ -203,7 +208,7 @@ const drawAll = function () {
   // console.timeEnd("drawChildrenLinks");
   // console.time("drawBoxes");
   for (const infoBox of infoBoxes) {
-    infoBox.draw(ctx);
+    if (infoBox !== null) infoBox.draw(ctx);
   }
   // console.timeEnd("drawBoxes");
 };
@@ -273,7 +278,7 @@ function start() {
     }
   }
 
-  drawAll();
+  drawAll(parentLinks, childrenLinks, infoBoxes);
 
   getVisible();
 }
@@ -338,5 +343,27 @@ document
     start();
     hideInputModal();
     window.scroll((canvas.width - window.innerWidth) / 2, 0);
-    toggle.init(infoBoxes, drawAll);
+
+    toggleMenu.style.display = "flex";
+
+    const pdgToggle = new PdgToggle("show-pdg");
+    pdgToggle.init(() => {
+      pdgToggle.toggle(infoBoxes, () => {
+        drawAll(parentLinks, childrenLinks, infoBoxes);
+      });
+    });
+
+    const filteringFunction = (particle) => {
+      return particle.charge === 0;
+    };
+    const filter = new Filter("filter");
+    filter.init(() => {
+      filter.toggle(
+        filteringFunction,
+        parentLinks,
+        childrenLinks,
+        infoBoxes,
+        drawAll
+      );
+    });
   });

js/menu/filter.js

@@ -0,0 +1,82 @@
+import { Link } from "../objects.js";
+import { Toggle } from "./toggle.js";
+
+export class Filter extends Toggle {
+  constructor(id) {
+    super(id);
+  }
+
+  toggle(criteriaFunction, parentLinks, childrenLinks, particles, drawAll) {
+    if (this.isSliderActive) {
+      const [newParentLinks, newChildrenLinks, newParticles] = reconnect(
+        criteriaFunction,
+        parentLinks,
+        childrenLinks,
+        particles
+      );
+      drawAll(newParentLinks, newChildrenLinks, newParticles);
+    } else {
+      drawAll(parentLinks, childrenLinks, particles);
+    }
+  }
+}
+
+function reconnect(criteriaFunction, parentLinks, childrenLinks, particles) {
+  const newParentLinks = [];
+  const newChildrenLinks = [];
+  const filteredParticles = [];
+
+  for (const particle of particles) {
+    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];
+        const parent = particles[parentLink.from];
+        if (criteriaFunction(parent)) {
+          newParentLinks.push(parentLink);
+        }
+      }
+
+      for (const childrenLinkId of particle.childrenLinks) {
+        const childrenLink = childrenLinks[childrenLinkId];
+        const child = particles[childrenLink.to];
+        if (criteriaFunction(child)) {
+          newChildrenLinks.push(childrenLink);
+        }
+      }
+    }
+  }
+
+  return [newParentLinks, newChildrenLinks, filteredParticles];
+}

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();
+  }
+}

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;