Fix particleid reco filtering

css/filter.css

@@ -4,7 +4,7 @@
   top: 10px;
   right: 10px;
   z-index: 1;
-  width: 300px;
+  width: 320px;
   max-height: 65vh;
   padding: 10px;
   background-color: #e1e1e1;

js/draw/box.js

@@ -33,7 +33,7 @@ function createText(
 
 function createObjectModal(lines) {
   const text = createText(lines.join("\n"), {
-    fontFamily: "sans-serif",
+    fontFamily: ["Arial", "sans-serif"],
     fontSize: 14,
     fontWeight: "normal",
     align: "center",

js/filters/collections/particleid.js

@@ -38,6 +38,7 @@ function renderParticleIdFilters(viewObjects) {
     const checkbox = new CheckboxComponent("type", type, type, true);
     checkboxes.type.push(checkbox);
     typeCheckboxesContainer.appendChild(checkbox.render());
+    checkbox.checked(true);
   });
   typeContainer.appendChild(typeCheckboxesContainer);
 
@@ -53,6 +54,7 @@ function renderParticleIdFilters(viewObjects) {
     const checkbox = new CheckboxComponent("PDG", pdg, pdg, true);
     checkboxes.pdg.push(checkbox);
     pdgCheckboxesContainer.appendChild(checkbox.render());
+    checkbox.checked(true);
   });
   pdgContainer.appendChild(pdgCheckboxesContainer);
 
@@ -73,6 +75,7 @@ function renderParticleIdFilters(viewObjects) {
     );
     checkboxes.algorithmType.push(checkbox);
     algorithmTypeCheckboxesContainer.appendChild(checkbox.render());
+    checkbox.checked(true);
   });
   algorithmTypeContainer.appendChild(algorithmTypeCheckboxesContainer);
 

js/filters/filter.js

@@ -150,15 +150,15 @@ export function initFilters(
       return;
     }
 
-    reconnectFunction(viewCurrentObjects, ids);
+    reconnectFunction(viewCurrentObjects, ids, collections);
     await render(viewCurrentObjects);
     const { x, y } = filterScroll();
     setScroll(x, y);
     setScrollBarsPosition();
     setRenderable(viewCurrentObjects);
   };
   filters.reset = async () => {
-    restoreRelations(viewCurrentObjects);
+    restoreRelations(viewObjects);
     resetFiltersContent();
     copyObject(viewObjects, viewCurrentObjects);
     await render(viewCurrentObjects);

js/filters/reconnect/mixed.js

@@ -1,5 +1,10 @@
-export function reconnectMixedViews(viewCurrentObjects, ids) {
+import { getRelationsFromCollections } from "../../lib/extract-relations.js";
+
+export function reconnectMixedViews(viewCurrentObjects, ids, collections) {
   const idsToRemove = new Set();
+  const idsToShow = new Set();
+
+  const relationsToCheck = getRelationsFromCollections(collections);
 
   for (const { collection, oneToMany, oneToOne } of Object.values(
     viewCurrentObjects.datatypes
@@ -17,6 +22,10 @@ export function reconnectMixedViews(viewCurrentObjects, ids) {
         for (const [relationName, relations] of Object.entries(
           oneToManyRelations
         )) {
+          if (!relationsToCheck.has(relationName)) {
+            continue;
+          }
+
           object.oneToManyRelations[relationName] = [];
           for (const relation of relations) {
             const { to } = relation;
@@ -25,6 +34,8 @@ export function reconnectMixedViews(viewCurrentObjects, ids) {
             if (ids.has(toId)) {
               oneToMany[relationName].push(relation);
               object.oneToManyRelations[relationName].push(relation);
+              idsToShow.add(objectId);
+              idsToShow.add(toId);
             } else {
               idsToRemove.add(objectId);
             }
@@ -34,12 +45,18 @@ export function reconnectMixedViews(viewCurrentObjects, ids) {
         for (const [relationName, relation] of Object.entries(
           oneToOneRelations
         )) {
+          if (!relationsToCheck.has(relationName)) {
+            continue;
+          }
+
           const { to } = relation;
           const toId = `${to.index}-${to.collectionId}`;
 
           if (ids.has(toId)) {
             oneToOne[relationName].push(relation);
             object.oneToOneRelations[relationName] = relation;
+            idsToShow.add(objectId);
+            idsToShow.add(toId);
           } else {
             idsToRemove.add(objectId);
           }
@@ -55,4 +72,12 @@ export function reconnectMixedViews(viewCurrentObjects, ids) {
       (object) => !idsToRemove.has(`${object.index}-${object.collectionId}`)
     );
   }
+
+  for (const [collectionName, { collection }] of Object.entries(
+    viewCurrentObjects.datatypes
+  )) {
+    viewCurrentObjects.datatypes[collectionName].collection = collection.filter(
+      (object) => idsToShow.has(`${object.index}-${object.collectionId}`)
+    );
+  }
 }

js/lib/extract-relations.js

@@ -0,0 +1,28 @@
+import { datatypes } from "../../output/datatypes.js";
+
+export function getRelationsFromCollections(collections) {
+  const collectionsSet = new Set(collections);
+  const relationsFromCollection = new Set();
+
+  collections.forEach((collection) => {
+    const { oneToOneRelations, oneToManyRelations } = datatypes[collection];
+
+    if (oneToManyRelations) {
+      oneToManyRelations.forEach(({ type, name }) => {
+        if (collectionsSet.has(type) && type !== collection) {
+          relationsFromCollection.add(name);
+        }
+      });
+    }
+
+    if (oneToOneRelations) {
+      oneToOneRelations.forEach(({ type, name }) => {
+        if (collectionsSet.has(type) && type !== collection) {
+          relationsFromCollection.add(name);
+        }
+      });
+    }
+  });
+
+  return relationsFromCollection;
+}

js/types/objects.js

@@ -224,8 +224,8 @@ export class MCParticle extends EDMObject {
 class ReconstructedParticle extends EDMObject {
   constructor() {
     super();
-    this.width = 145;
-    this.height = 190;
+    this.width = 170;
+    this.height = 200;
     this.color = "#fbffdf";
     this.radius = 30;
     this.titleName = "Reconstructed\nParticle";
@@ -256,8 +256,8 @@ class ReconstructedParticle extends EDMObject {
 class Cluster extends EDMObject {
   constructor() {
     super();
-    this.width = 140;
-    this.height = 170;
+    this.width = 145;
+    this.height = 200;
     this.color = "#ffe8df";
     this.radius = 20;
     this.titleName = "Cluster";
@@ -288,7 +288,7 @@ class Track extends EDMObject {
   constructor() {
     super();
     this.width = 140;
-    this.height = 150;
+    this.height = 180;
     this.color = "#fff6df";
     this.radius = 25;
     this.titleName = "Track";
@@ -348,8 +348,8 @@ class ParticleID extends EDMObject {
 class Vertex extends EDMObject {
   constructor() {
     super();
-    this.width = 140;
-    this.height = 150;
+    this.width = 155;
+    this.height = 175;
     this.color = "#f5d3ef";
     this.radius = 25;
     this.titleName = "Vertex";

js/views/templates/onewayview.js

@@ -1,3 +1,6 @@
+const topMargin = 50;
+const horizontalGapPercentage = 0.5;
+
 export function oneWayView(viewObjects, fromCollectionName, relationName) {
   const relations =
     viewObjects.datatypes[fromCollectionName].oneToOne[relationName];
@@ -11,8 +14,8 @@ export function oneWayView(viewObjects, fromCollectionName, relationName) {
 
   const fromWidth = fromCollection[0].width;
   const toWidth = toCollection[0].width;
-  const fromHorizontalGap = 0.3 * fromWidth;
-  const toHorizontalGap = 0.3 * toWidth;
+  const fromHorizontalGap = horizontalGapPercentage * fromWidth;
+  const toHorizontalGap = horizontalGapPercentage * toWidth;
   const gap = 2 * (fromWidth + toWidth);
   const totalWidth = gap + fromWidth + toWidth;
 
@@ -38,10 +41,10 @@ export function oneWayView(viewObjects, fromCollectionName, relationName) {
     toCollection[i].x = toX;
 
     const space = height + verticalGap;
-    fromCollection[i].y = accHeight + space / 2 - fromHeight / 2;
-    toCollection[i].y = accHeight + space / 2 - toHeight / 2;
+    fromCollection[i].y = topMargin + accHeight + space / 2 - fromHeight / 2;
+    toCollection[i].y = topMargin + accHeight + space / 2 - toHeight / 2;
     accHeight += height + verticalGap;
   }
 
-  return [width, totalHeight];
+  return [width, totalHeight + topMargin];
 }

js/views/templates/tree.js

@@ -98,7 +98,7 @@ export function buildTree(collection, relationOfReference) {
 
   matrix.forEach((row, i) => {
     row.forEach((object, j) => {
-      const row = i + startingRow - 1;
+      const row = i + startingRow;
       const col = j;
       object.x = col * horizontalGap + col * boxWidth + horizontalGap;
       object.y = row * verticalGap + row * boxHeight + verticalGap;