Deploy preview for PR 70 🛫

key4hep · Aug 3, 2024 · 758f97f · 758f97f
1 parent 77fda02
commit 758f97f
Show file tree

Hide file tree

Showing 16 changed files with 313 additions and 126 deletions.
diff --git a/...964a1e325ed338ecd63a990839efa6ecdd023.idx → ...923358f7fe31a0e073b92765141e67fcb5579.idx b/...964a1e325ed338ecd63a990839efa6ecdd023.idx → ...923358f7fe31a0e073b92765141e67fcb5579.idx
diff --git a/...64a1e325ed338ecd63a990839efa6ecdd023.pack → ...23358f7fe31a0e073b92765141e67fcb5579.pack b/...64a1e325ed338ecd63a990839efa6ecdd023.pack → ...23358f7fe31a0e073b92765141e67fcb5579.pack
diff --git a/...964a1e325ed338ecd63a990839efa6ecdd023.rev → ...923358f7fe31a0e073b92765141e67fcb5579.rev b/...964a1e325ed338ecd63a990839efa6ecdd023.rev → ...923358f7fe31a0e073b92765141e67fcb5579.rev
diff --git a/pr-preview/pr-70/css/filter.css b/pr-preview/pr-70/css/filter.css
@@ -1,9 +1,10 @@
 #filters {
+  display: none;
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 1;
-  width: 25%;
+  width: 300px;
   max-height: 50%;
   overflow-y: auto;
   padding: 10px;

diff --git a/pr-preview/pr-70/js/draw/link.js b/pr-preview/pr-70/js/draw/link.js
@@ -49,41 +49,18 @@ function bezierCurve({
   return curve;
 }
 
-export function drawBezierLink(link) {
+export function drawBezierLink(link, reverse = false) {
   const app = getApp();
   const container = getContainer();
 
-  const [fromX, fromY] = fromPoints(link.from);
-  const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
-    link.from,
-    link.to
-  );
-
-  let curve = bezierCurve({
-    fromX: fromX + link.xShift,
-    fromY: fromY,
-    cpFromX: cpFromX + link.xShift,
-    cpFromY: cpFromY,
-    cpToX: cpToX + link.xShift,
-    cpToY: cpToY,
-    toX: toX + link.xShift,
-    toY: toY,
-    color: link.color,
-  });
-
-  link.renderedLink = curve;
-
-  const boxFrom = link.from.renderedBox;
-  const boxTo = link.to.renderedBox;
-
-  const boxFromOnMove = () => {
-    container.removeChild(curve);
+  if (!reverse) {
     const [fromX, fromY] = fromPoints(link.from);
     const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
       link.from,
       link.to
     );
-    curve = bezierCurve({
+
+    let curve = bezierCurve({
       fromX: fromX + link.xShift,
       fromY: fromY,
       cpFromX: cpFromX + link.xShift,
@@ -94,29 +71,87 @@ export function drawBezierLink(link) {
       toY: toY,
       color: link.color,
     });
+
     link.renderedLink = curve;
-    link.renderedLink.renderable = link.isVisible();
+
+    const boxFrom = link.from.renderedBox;
+    const boxTo = link.to.renderedBox;
+
+    const boxFromOnMove = () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(link.from);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        link.from,
+        link.to
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
+      container.addChild(curve);
+    };
+
+    boxFrom.on("pointerdown", () => {
+      app.stage.on("pointermove", boxFromOnMove);
+    });
+    app.stage.on("pointerup", () => {
+      app.stage.off("pointermove", boxFromOnMove);
+    });
+    app.stage.on("pointerupoutside", () => {
+      app.stage.off("pointermove", boxFromOnMove);
+    });
+
+    const boxToOnMove = () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(link.from);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        link.from,
+        link.to
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
+      container.addChild(curve);
+    };
+
+    boxTo.on("pointerdown", () => {
+      app.stage.on("pointermove", boxToOnMove);
+    });
+    app.stage.on("pointerup", () => {
+      app.stage.off("pointermove", boxToOnMove);
+    });
+    app.stage.on("pointerupoutside", () => {
+      app.stage.off("pointermove", boxToOnMove);
+    });
+
     container.addChild(curve);
-  };
-
-  boxFrom.on("pointerdown", () => {
-    app.stage.on("pointermove", boxFromOnMove);
-  });
-  app.stage.on("pointerup", () => {
-    app.stage.off("pointermove", boxFromOnMove);
-  });
-  app.stage.on("pointerupoutside", () => {
-    app.stage.off("pointermove", boxFromOnMove);
-  });
-
-  const boxToOnMove = () => {
-    container.removeChild(curve);
-    const [fromX, fromY] = fromPoints(link.from);
+  } else {
+    const [fromX, fromY] = fromPoints(link.to);
     const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
-      link.from,
-      link.to
+      link.to,
+      link.from
     );
-    curve = bezierCurve({
+
+    let curve = bezierCurve({
       fromX: fromX + link.xShift,
       fromY: fromY,
       cpFromX: cpFromX + link.xShift,
@@ -127,20 +162,79 @@ export function drawBezierLink(link) {
       toY: toY,
       color: link.color,
     });
+
     link.renderedLink = curve;
-    link.renderedLink.renderable = link.isVisible();
+
+    const boxFrom = link.to.renderedBox;
+    const boxTo = link.from.renderedBox;
+
+    const boxFromOnMove = () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(link.to);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        link.to,
+        link.from
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
+      container.addChild(curve);
+    };
+
+    boxFrom.on("pointerdown", () => {
+      app.stage.on("pointermove", boxFromOnMove);
+    });
+    app.stage.on("pointerup", () => {
+      app.stage.off("pointermove", boxFromOnMove);
+    });
+    app.stage.on("pointerupoutside", () => {
+      app.stage.off("pointermove", boxFromOnMove);
+    });
+
+    const boxToOnMove = () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(link.to);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        link.to,
+        link.from
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      link.renderedLink = curve;
+      link.renderedLink.renderable = link.isVisible();
+      container.addChild(curve);
+    };
+
+    boxTo.on("pointerdown", () => {
+      app.stage.on("pointermove", boxToOnMove);
+    });
+
+    app.stage.on("pointerup", () => {
+      app.stage.off("pointermove", boxToOnMove);
+    });
+    app.stage.on("pointerupoutside", () => {
+      app.stage.off("pointermove", boxToOnMove);
+    });
+
     container.addChild(curve);
-  };
-
-  boxTo.on("pointerdown", () => {
-    app.stage.on("pointermove", boxToOnMove);
-  });
-  app.stage.on("pointerup", () => {
-    app.stage.off("pointermove", boxToOnMove);
-  });
-  app.stage.on("pointerupoutside", () => {
-    app.stage.off("pointermove", boxToOnMove);
-  });
-
-  container.addChild(curve);
+  }
 }
diff --git a/pr-preview/pr-70/js/event-number.js b/pr-preview/pr-70/js/event-number.js
@@ -2,7 +2,7 @@ import { loadObjects } from "./types/load.js";
 import { copyObject } from "./lib/copy.js";
 import { jsonData, selectedObjectTypes } from "./main.js";
 import { objectTypes } from "./types/objects.js";
-import { drawCurrentView, saveScrollLocation } from "./views/views.js";
+import { drawView, getView, saveScrollLocation } from "./views/views.js";
 
 const eventNumber = document.getElementById("selected-event");
 const previousEvent = document.getElementById("previous-event");
@@ -49,7 +49,7 @@ export function renderEvent(eventNumber) {
   currentEvent.event = eventNumber;
   loadSelectedEvent();
   updateEventNumber();
-  drawCurrentView();
+  drawView(getView());
 }
 
 previousEvent.addEventListener("click", () => {

diff --git a/pr-preview/pr-70/js/filters/collections/mcparticle.js b/pr-preview/pr-70/js/filters/collections/mcparticle.js
@@ -39,6 +39,7 @@ function renderMCParticleFilters() {
   Object.keys(SimStatusBitFieldDisplayValues).forEach((status) => {
     const checkbox = new CheckboxComponent(
       "simulatorStatus",
+      status,
       SimStatusBitFieldDisplayValues[status]
     );
     checkboxes.simStatus.push(checkbox);
@@ -50,7 +51,7 @@ function renderMCParticleFilters() {
   container.appendChild(generatorStatusTitle);
 
   [1, 2, 3, 4].map((status) => {
-    const checkbox = new CheckboxComponent("generatorStatus", status);
+    const checkbox = new CheckboxComponent("generatorStatus", status, status);
     checkboxes.generatorStatus.push(checkbox);
     container.appendChild(checkbox.render());
   });
@@ -81,22 +82,15 @@ export function initMCParticleFilters(parentContainer) {
     const { simStatus, generatorStatus } = checkboxes;
 
     for (const checkbox of simStatus) {
-      const checked = checkbox.checked();
-      if (
-        !bitfieldCheckboxLogic(
-          checked,
-          SimStatusBitFieldDisplayValues[checkbox.displayedName],
-          object,
-          "simulatorStatus"
-        )
-      ) {
+      const { checked, value } = checkbox.getValues();
+      if (!bitfieldCheckboxLogic(checked, value, object, "simulatorStatus")) {
         return false;
       }
     }
 
     for (const checkbox of generatorStatus) {
-      const checked = checkbox.checked();
-      if (!checkboxLogic(checked, object, "generatorStatus")) {
+      const { checked, value } = checkbox.getValues();
+      if (!checkboxLogic(checked, value, object, "generatorStatus")) {
         return false;
       }
     }

diff --git a/pr-preview/pr-70/js/filters/collections/vertex.js b/pr-preview/pr-70/js/filters/collections/vertex.js
@@ -1,4 +1,4 @@
-import { RangeComponent, rangeLogic } from "../components/range.js";
+import { magnitudeRangeLogic, RangeComponent } from "../components/range.js";
 
 function renderVertexFilters() {
   const container = document.createElement("div");

diff --git a/pr-preview/pr-70/js/filters/components/checkbox.js b/pr-preview/pr-70/js/filters/components/checkbox.js
@@ -1,7 +1,8 @@
 export class CheckboxComponent {
-  constructor(propertyName, displayedName) {
+  constructor(propertyName, displayedName, value) {
     this.propertyName = propertyName;
     this.displayedName = displayedName;
+    this.value = value;
   }
 
   render() {
@@ -19,14 +20,17 @@ export class CheckboxComponent {
     return div;
   }
 
-  checked() {
-    return this.checkbox.checked;
+  getValues() {
+    return {
+      checked: this.checkbox.checked,
+      value: this.value,
+    };
   }
 }
 
-export function checkboxLogic(checked, object, property) {
+export function checkboxLogic(checked, value, object, property) {
   if (checked) {
-    return object[property] === checked;
+    return object[property] === value;
   }
   return true;
 }

diff --git a/pr-preview/pr-70/js/filters/filter.js b/pr-preview/pr-70/js/filters/filter.js
@@ -4,7 +4,7 @@ import { initMCParticleFilters } from "./collections/mcparticle.js";
 import { initRecoParticleFilters } from "./collections/recoparticle.js";
 import { initTrackFilters } from "./collections/track.js";
 import { initVertexFilters } from "./collections/vertex.js";
-import { reconnect } from "./reconnect.js";
+import { reconnect, restoreObjectsLinks } from "./reconnect.js";
 
 const map = {
   "edm4hep::MCParticle": initMCParticleFilters,
@@ -42,7 +42,7 @@ export function initFilters(
 ) {
   const criteriaFunctions = {};
 
-  const setupContent = () => {
+  const resetFiltersContent = () => {
     const content = document.getElementById("filters-content");
     content.replaceChildren();
 
@@ -63,16 +63,17 @@ export function initFilters(
     }
   };
 
-  setupContent();
+  resetFiltersContent();
 
   filters.apply = async () => {
-    reconnect({ viewObjects, viewCurrentObjects }, criteriaFunctions);
+    reconnect(viewObjects, viewCurrentObjects, criteriaFunctions);
     await render(viewCurrentObjects);
     filterScroll();
     setRenderable(viewCurrentObjects);
   };
   filters.reset = async () => {
-    setupContent();
+    resetFiltersContent();
+    restoreObjectsLinks(viewCurrentObjects);
     copyObject(viewObjects, viewCurrentObjects);
     await render(viewCurrentObjects);
     originalScroll();