add view for cluster, track and mc with each one

key4hep · Jul 3, 2024 · 8279495 · 8279495
1 parent 0dc5988
commit 8279495
Show file tree

Hide file tree

Showing 21 changed files with 521 additions and 271 deletions.
diff --git a/css/views.css b/css/views.css
@@ -5,6 +5,8 @@
   justify-content: flex-start;
   align-items: center;
   padding: 8px;
+  max-height: 90px;
+  overflow-y: auto;
 }
 
 .view-button {
@@ -39,3 +41,21 @@
   overflow-x: hidden;
   width: fit-content;
 }
+
+.view-selector-menu::-webkit-scrollbar {
+  width: 7px;
+}
+
+.view-selector-menu::-webkit-scrollbar-track {
+  background: #e1e1e1;
+  border-radius: 5px;
+}
+
+.view-selector-menu::-webkit-scrollbar-thumb {
+  background: #afafaf;
+  border-radius: 5px;
+}
+
+.view-selector-menu::-webkit-scrollbar-thumb:hover {
+  background: #858585;
+}
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
           <label class="mr-10" for="event-number">Select event number:</label>
           <select name="event-number" id="event-number"></select>
         </div>
-        <div id="available-views">
+        <div id="available-views" class="view-selector-menu">
         </div>
         <br>
         <div class="align-right">
@@ -152,7 +152,7 @@
 
   <div id="views">
     <p>Select a view:</p>
-    <div id="view-selector"></div>
+    <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
   <canvas id="canvas" width="100vw" height="100vh"></canvas>

diff --git a/js/event-number.js b/js/event-number.js
@@ -1,6 +1,6 @@
 import { loadObjects } from "./types/load.js";
 import { copyObject } from "./lib/copy.js";
-import { canvas, jsonData, selectedObjectTypes } from "./main.js";
+import { jsonData, selectedObjectTypes } from "./main.js";
 import { objectTypes } from "./types/objects.js";
 import { drawCurrentView, saveScrollLocation } from "./views/views.js";
 
@@ -37,7 +37,7 @@ function loadSelectedEvent() {
     )) {
       const classType = objectTypes[key];
       const collection = value.collection;
-      classType.setup(collection, canvas);
+      classType.setup(collection);
     }
     copyObject(objects, currentObjects);
   } else {

diff --git a/js/main.js b/js/main.js
@@ -16,6 +16,10 @@ const selectedObjectTypes = {
     "edm4hep::MCParticle",
     "edm4hep::ReconstructedParticle",
     "edm4hep::MCRecoParticleAssociation",
+    "edm4hep::MCRecoTrackParticleAssociation",
+    "edm4hep::MCRecoClusterParticleAssociation",
+    "edm4hep::Cluster",
+    "edm4hep::Track",
   ],
 };
 

diff --git a/js/types/links.js b/js/types/links.js
@@ -1,15 +1,19 @@
-export const colors = {
-  "daughters": "#00AA00",
+const colors = {
   "parents": "#AA0000",
+  "daughters": "#00AA00",
   "mcreco": "#0000AA",
+  "tracks": "#AAAA00",
+  "clusters": "#00AAAA",
   "particles": "#AA00AA",
+  "mcclusters": "#AA00AA",
+  "mctracks": "#AA0000",
 };
 
-export function generateRandomColor() {
+function generateRandomColor() {
   return "#" + ((0xffffff * Math.random()) << 0).toString(16).padStart(6, "0");
 }
 
-export class Link {
+class Link {
   // we may create a specific class for each type if needed
   constructor(from, to) {
     this.from = from;
@@ -109,7 +113,7 @@ export class Link {
   }
 }
 
-export class ParentLink extends Link {
+class ParentLink extends Link {
   constructor(from, to) {
     super(to, from);
     this.color = colors["parents"];
@@ -119,7 +123,7 @@ export class ParentLink extends Link {
   }
 }
 
-export class DaughterLink extends Link {
+class DaughterLink extends Link {
   constructor(from, to) {
     super(from, to);
     this.color = colors["daughters"];
@@ -129,7 +133,7 @@ export class DaughterLink extends Link {
   }
 }
 
-export class MCRecoParticleAssociation extends Link {
+class MCRecoParticleAssociation extends Link {
   constructor(from, to, weight) {
     super(from, to);
     this.color = colors["mcreco"];
@@ -157,19 +161,51 @@ export class MCRecoParticleAssociation extends Link {
   }
 }
 
-export class Particles extends Link {
+class Particles extends Link {
   constructor(from, to) {
     super(from, to);
     this.color = colors["particles"];
   }
 }
 
+class Clusters extends Link {
+  constructor(from, to) {
+    super(from, to);
+    this.color = colors["clusters"];
+  }
+}
+
+class Tracks extends Link {
+  constructor(from, to) {
+    super(from, to);
+    this.color = colors["tracks"];
+  }
+}
+
+class MCRecoTrackParticleAssociation extends Link {
+  constructor(from, to, weight) {
+    super(from, to);
+    this.color = colors["mctracks"];
+    this.weight = weight;
+  }
+}
+
+class MCRecoClusterParticleAssociation extends Link {
+  constructor(from, to, weight) {
+    super(from, to);
+    this.color = colors["mcclusters"];
+    this.weight = weight;
+  }
+}
+
 export const linkTypes = {
   "parents": ParentLink,
   "daughters": DaughterLink,
-  "trackerHits": Link,
-  "startVertex": Link,
-  "particles": Particles,
-  "clusters": Link,
   "edm4hep::MCRecoParticleAssociation": MCRecoParticleAssociation,
+  "edm4hep::MCRecoClusterParticleAssociation": MCRecoClusterParticleAssociation,
+  "edm4hep::MCRecoTrackParticleAssociation": MCRecoTrackParticleAssociation,
+  "clusters": Clusters,
+  "tracks": Tracks,
+  "particles": Particles,
+  "startVertex": Link,
 };
diff --git a/js/types/load.js b/js/types/load.js
@@ -212,12 +212,3 @@ export function loadObjects(jsonData, event, objectsToLoad) {
 
   return objects;
 }
-// console.time("load");
-// const data = loadObjects(json, 0, [
-//   "edm4hep::MCParticle",
-//   "edm4hep::ReconstructedParticle",
-//   "edm4hep::Cluster",
-//   "edm4hep::MCRecoParticleAssociation",
-// ]);
-// console.timeEnd("load");
-// console.log(data);
diff --git a/js/types/objects.js b/js/types/objects.js
@@ -6,6 +6,8 @@ class EDMObject {
   constructor() {
     this.x = NaN;
     this.y = NaN;
+    this.index = NaN;
+    this.collectionId = NaN;
     this.width = 120;
     this.height = 240;
     this.lineColor = "black";
@@ -34,81 +36,7 @@ class EDMObject {
   }
 }
 
-export class Cluster extends EDMObject {
-  constructor() {
-    super();
-  }
-}
-
-export class ParticleID extends EDMObject {
-  constructor() {
-    super();
-  }
-}
-
-export class ReconstructedParticle extends EDMObject {
-  constructor() {
-    super();
-  }
-
-  draw(ctx) {
-    const boxCenterX = this.x + this.width / 2;
-
-    drawRoundedRect(ctx, this.x, this.y, this.width, this.height, "#f5f5f5");
-
-    const topY = this.y + 20;
-    const topLines = [];
-    topLines.push("ID: " + this.index);
-    const energy = parseInt(this.energy * 100) / 100;
-    topLines.push("e = " + energy + " GeV");
-    topLines.push("c = " + this.charge + " e");
-    if (Math.abs(this.charge) < 1.0 && this.charge != 0) {
-      if (Math.round(this.charge * 1000) === 667) {
-        topLines.push("q = 2/3 e");
-      }
-      if (Math.round(this.charge * 1000) === -667) {
-        topLines.push("q = -2/3 e");
-      }
-      if (Math.round(this.charge * 1000) === 333) {
-        topLines.push("q = 1/3 e");
-      }
-      if (Math.round(this.charge * 1000) === -333) {
-        topLines.push("q = -1/3 e");
-      }
-    } else {
-      topLines.push("q = " + this.charge + " e");
-    }
-
-    ctx.save();
-    ctx.font = "16px sans-serif";
-    for (const [i, lineText] of topLines.entries()) {
-      ctx.fillText(
-        lineText,
-        boxCenterX - ctx.measureText(lineText).width / 2,
-        topY + i * 23
-      );
-    }
-    ctx.restore();
-  }
-
-  static setup(recoCollection) {}
-
-  static filter() {}
-}
-
-export class Vertex extends EDMObject {
-  constructor() {
-    super();
-  }
-}
-
-export class Track extends EDMObject {
-  constructor() {
-    super();
-  }
-}
-
-export class MCParticle extends EDMObject {
+class MCParticle extends EDMObject {
   constructor() {
     super();
 
@@ -285,11 +213,101 @@ export class MCParticle extends EDMObject {
   }
 }
 
+class ReconstructedParticle extends EDMObject {
+  constructor() {
+    super();
+  }
+
+  draw(ctx) {
+    const boxCenterX = this.x + this.width / 2;
+
+    drawRoundedRect(ctx, this.x, this.y, this.width, this.height, "#f5f5f5");
+
+    const topY = this.y + 20;
+    const topLines = [];
+    topLines.push("ID: " + this.index);
+    const energy = parseInt(this.energy * 100) / 100;
+    topLines.push("e = " + energy + " GeV");
+    topLines.push("c = " + this.charge + " e");
+    if (Math.abs(this.charge) < 1.0 && this.charge != 0) {
+      if (Math.round(this.charge * 1000) === 667) {
+        topLines.push("q = 2/3 e");
+      }
+      if (Math.round(this.charge * 1000) === -667) {
+        topLines.push("q = -2/3 e");
+      }
+      if (Math.round(this.charge * 1000) === 333) {
+        topLines.push("q = 1/3 e");
+      }
+      if (Math.round(this.charge * 1000) === -333) {
+        topLines.push("q = -1/3 e");
+      }
+    } else {
+      topLines.push("q = " + this.charge + " e");
+    }
+
+    ctx.save();
+    ctx.font = "16px sans-serif";
+    for (const [i, lineText] of topLines.entries()) {
+      ctx.fillText(
+        lineText,
+        boxCenterX - ctx.measureText(lineText).width / 2,
+        topY + i * 23
+      );
+    }
+    ctx.restore();
+  }
+
+  static setup(recoCollection) {}
+
+  static filter() {}
+}
+
+class Cluster extends EDMObject {
+  constructor() {
+    super();
+  }
+
+  draw(ctx) {
+    const boxCenterX = this.x + this.width / 2;
+
+    drawRoundedRect(ctx, this.x, this.y, this.width, this.height, "#f5f5f5");
+  }
+
+  static setup(clusterCollection) {}
+}
+
+class Track extends EDMObject {
+  constructor() {
+    super();
+  }
+
+  draw(ctx) {
+    const boxCenterX = this.x + this.width / 2;
+
+    drawRoundedRect(ctx, this.x, this.y, this.width, this.height, "#f5f5f5");
+  }
+
+  static setup(trackCollection) {}
+}
+
+class ParticleID extends EDMObject {
+  constructor() {
+    super();
+  }
+}
+
+class Vertex extends EDMObject {
+  constructor() {
+    super();
+  }
+}
+
 export const objectTypes = {
+  "edm4hep::MCParticle": MCParticle,
+  "edm4hep::ReconstructedParticle": ReconstructedParticle,
   "edm4hep::Cluster": Cluster,
+  "edm4hep::Track": Track,
   "edm4hep::ParticleID": ParticleID,
-  "edm4hep::ReconstructedParticle": ReconstructedParticle,
   "edm4hep::Vertex": Vertex,
-  "edm4hep::Track": Track,
-  "edm4hep::MCParticle": MCParticle,
 };