Merge branch 'main' into feat/view-info-section

key4hep · Jul 17, 2024 · 4474702 · 4474702
2 parents 07291a8 + f294357
commit 4474702
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 95 deletions.
diff --git a/css/switch-deploy.css b/css/switch-deploy.css
@@ -0,0 +1,32 @@
+#switch-deploy {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 1;
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #000;
+}
+
+#switch-deploy-button {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #000;
+  padding: 5px;
+  border-radius: 5px;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+#switch-deploy-button:hover {
+  background-color: #c5c5c5;
+  cursor: pointer;
+}
+
+#switch-deploy-text {
+  margin: 0 7px 0 0;
+}
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="css/contact.css">
   <link rel="stylesheet" href="css/views.css">
   <link rel="stylesheet" href="css/empty-view.css">
+  <link rel="stylesheet" href="css/switch-deploy.css">
 </head>
 
 <body>
@@ -173,13 +174,19 @@ <h2 id="view-title-info"></h2>
     <p>This view has no elements</p>
   </div>
 
+  <div id="switch-deploy">
+    <p id="switch-deploy-text">Switch to</p>
+    <button id="switch-deploy-button">release</button>
+  </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/information.js"></script>
   <script type="module" src="js/views/views.js"></script>
   <script type="module" src="js/menu/filter/filter.js"></script>
+  <script type="module" src="js/switch-deploy.js"></script>
 </body>
 
 </html>
diff --git a/js/events.js b/js/events.js
@@ -1,4 +1,4 @@
-import { canvas } from "./main.js";
+import { canvas, ctx } from "./main.js";
 import { drawAll, drawVisible } from "./draw.js";
 
 const mouseDown = function (event, visibleObjects, dragTools) {
@@ -44,14 +44,38 @@ const mouseOut = function (event, dragTools) {
 };
 
 const mouseMove = function (event, visibleObjects, dragTools) {
-  if (!dragTools.isDragging) {
-    return;
-  }
-
   const boundigClientRect = canvas.getBoundingClientRect();
   const mouseX = parseInt(event.clientX - boundigClientRect.x);
   const mouseY = parseInt(event.clientY - boundigClientRect.y);
 
+  const allObjects = Object.values(visibleObjects.datatypes)
+    .map((datatype) => datatype.collection)
+    .flat();
+
+  let someHovered = false;
+  for (const object of allObjects) {
+    if (object.isHere(mouseX, mouseY)) {
+      if (dragTools.hoveredObject !== object) {
+        dragTools.hoveredObject = object;
+        drawVisible(visibleObjects);
+        object.showObjectTip(ctx);
+      }
+      someHovered = true;
+      document.body.style.cursor = "pointer";
+      break;
+    }
+  }
+
+  if (!someHovered) {
+    document.body.style.cursor = "default";
+    dragTools.hoveredObject = null;
+    drawVisible(visibleObjects);
+  }
+
+  if (!dragTools.isDragging) {
+    return;
+  }
+
   const dx = mouseX - dragTools.prevMouseX;
   const dy = mouseY - dragTools.prevMouseY;
 

diff --git a/js/lib/getName.js b/js/lib/getName.js
@@ -1,4 +1,4 @@
-import { mappings } from "../../data/particles.js";
+import { mappings } from "../../mappings/particles.js";
 
 export function getName(pdg) {
   const particle = mappings[pdg];

diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js
@@ -111,3 +111,42 @@ export function drawStraightLink(ctx, link) {
 export function updateCanvas(ctx, x, y, width, height) {
   ctx.clearRect(x, y, width, height);
 }
+
+export function drawObjectHeader(ctx, object) {
+  ctx.save();
+  ctx.font = "bold 16px sans-serif";
+  const text = object.constructor.name;
+  const boxCenterX = object.x + object.width / 2;
+  const textWidth = ctx.measureText(text).width;
+  const x = boxCenterX - ctx.measureText(text).width / 2;
+  const topY = object.y + 20;
+
+  if (textWidth > object.width) {
+    const lines = text.split(/(?=[A-Z])/);
+    for (const [i, lineText] of lines.entries()) {
+      ctx.fillText(
+        lineText,
+        boxCenterX - ctx.measureText(lineText).width / 2,
+        topY + i * 20
+      );
+    }
+  } else {
+    ctx.fillText(text, x, topY);
+  }
+  ctx.restore();
+}
+
+export function drawObjectInfoTip(ctx, x, y, ...args) {
+  ctx.save();
+  ctx.font = "bold 12px sans-serif";
+  const lines = args.length;
+  const height = 20 * lines;
+  const maxWidth = Math.max(...args.map((arg) => ctx.measureText(arg).width));
+  ctx.fillStyle = "rgba(225, 225, 225, 1)";
+  ctx.fillRect(x, y, maxWidth + 10, height + 10);
+  ctx.fillStyle = "black";
+  for (const [i, arg] of args.entries()) {
+    ctx.fillText(arg, x + 5, y + 20 + i * 20);
+  }
+  ctx.restore();
+}
diff --git a/js/main.js b/js/main.js
@@ -46,6 +46,12 @@ function showViewsMenu() {
   aboutButton.style.display = "block";
 }
 
+function hideDeploySwitch() {
+  const deploySwitch = document.getElementById("switch-deploy");
+
+  deploySwitch.style.display = "none";
+}
+
 document.getElementById("input-file").addEventListener("change", (event) => {
   for (const file of event.target.files) {
     if (!file.name.endsWith("edm4hep.json")) {
@@ -139,6 +145,7 @@ document
     showViewsMenu();
     renderEvent(eventNum);
     selectViewInformation();
+    hideDeploySwitch();
   });
 
 export { canvas, ctx, jsonData, selectedObjectTypes };
diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js
@@ -5,6 +5,7 @@ import { reconnect } from "./reconnect.js";
 import { getVisible } from "../../events.js";
 import { units } from "../../types/units.js";
 import { copyObject } from "../../lib/copy.js";
+import { SimStatusBitFieldDisplayValues } from "../../../mappings/sim-status.js";
 
 const filterButton = document.getElementById("filter-button");
 const openFilter = document.getElementById("open-filter");
@@ -60,17 +61,6 @@ let parametersRange = units.sort((a, b) =>
 
 parametersRange = parametersRange.map((parameter) => new Range(parameter));
 
-const SimStatusBitFieldDisplayValues = {
-  23: "Overlay",
-  24: "Stopped",
-  25: "LeftDetector",
-  26: "DecayedInCalorimeter",
-  27: "DecayedInTracker",
-  28: "VertexIsNotEndpointOfParent",
-  29: "Backscatter",
-  30: "CreatedInSimulation",
-};
-
 const bits = new BitFieldBuilder(
   "simulatorStatus",
   "Simulation status",

diff --git a/js/switch-deploy.js b/js/switch-deploy.js
@@ -0,0 +1,18 @@
+const button = document.getElementById("switch-deploy-button");
+
+button.addEventListener("click", () => {
+  const currentUrl = window.location.href;
+
+  if (currentUrl.includes("/release")) {
+    window.location.href = currentUrl.replace("/release", "/main");
+  } else {
+    window.location.href = "https://key4hep.github.io/eede/release/index.html";
+  }
+});
+
+const url = window.location.href;
+if (url.includes("/release")) {
+  button.innerText = "Develop";
+} else {
+  button.innerText = "Release";
+}
diff --git a/js/types/load.js b/js/types/load.js
@@ -21,13 +21,19 @@ function loadEmptyRelations(object, relations) {
   }
 }
 
-export function loadPlainObject(collection, datatype, collectionId) {
+export function loadPlainObject(
+  collection,
+  datatype,
+  collectionId,
+  collectionName
+) {
   const objects = [];
 
   for (const [index, particle] of collection.entries()) {
     const newObject = new objectTypes[datatype]();
     newObject.index = index;
     newObject.collectionId = collectionId;
+    newObject.collectionName = collectionName;
 
     loadMembers(newObject, particle, datatypes[datatype].members);
     loadEmptyRelations(newObject, datatypes[datatype]);
@@ -66,15 +72,16 @@ export function loadObjects(jsonData, event, objectsToLoad) {
   });
 
   for (const datatype of datatypesToLoad) {
-    Object.values(eventData).forEach((element) => {
+    Object.entries(eventData).forEach(([key, element]) => {
       const collectionName = `${datatype}Collection`;
       if (element.collType === collectionName) {
         const collection = element.collection;
         const collectionId = element.collID;
         const objectCollection = loadPlainObject(
           collection,
           datatype,
-          collectionId
+          collectionId,
+          key
         );
         objects.datatypes[datatype].collection.push(...objectCollection);
       }