Merge pull request #38 from brauliorivas/feat/event-ui-auto

Switch events without reload #37 + auto event select #34
key4hep · Jun 28, 2024 · 0ad8a09 · 0ad8a09
2 parents a7b49eb + 69d3005
commit 0ad8a09
Show file tree

Hide file tree

Showing 12 changed files with 272 additions and 90 deletions.
diff --git a/css/event.css b/css/event.css
@@ -0,0 +1,56 @@
+#event-switcher {
+  position: fixed;
+  display: none;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #e1e1e1;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+.event-switch-arrow {
+  cursor: pointer;
+}
+
+.event-switch-tool {
+  margin: 0 5px;
+}
+
+#selected-event {
+  font-weight: 500;
+  cursor: pointer;
+}
+
+#selected-event:hover {
+  text-decoration: underline;
+  background-color: #d1d1d1;
+}
+
+#event-selector-menu {
+  display: none;
+  position: fixed;
+  top: 32px;
+  flex-direction: column;
+  align-items: center;
+  background-color: #e1e1e1;
+  width: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 175px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 5px;
+}
+
+.event-option {
+  cursor: pointer;
+  border: 1px solid #000;
+  width: 100%;
+  text-align: center;
+  margin: 1px 0;
+}
diff --git a/css/filter.css b/css/filter.css
@@ -2,7 +2,7 @@
   min-width: 100px;
   position: fixed;
   flex-direction: column;
-  background-color: #f5f5f5;
+  background-color: #e1e1e1;
   border-radius: 5px;
   padding: 10px;
   top: 10px;

diff --git a/css/main.css b/css/main.css
@@ -3,6 +3,7 @@ body {
   padding: 0;
   /* overflow: hidden; */
   font-family: sans-serif;
+  font-size: 16px;
 }
 
 .manipulation-tool {

diff --git a/css/toggle.css b/css/toggle.css
@@ -33,7 +33,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
+  background-color: #e1e1e1;
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }

diff --git a/img/left_arrow.svg b/img/left_arrow.svg
diff --git a/img/right_arrow.svg b/img/right_arrow.svg
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="css/modal.css">
   <link rel="stylesheet" href="css/toggle.css">
   <link rel="stylesheet" href="css/filter.css">
+  <link rel="stylesheet" href="css/event.css">
 </head>
 
 <body>
@@ -34,7 +35,7 @@
         </div>
         <div id="event-selector">
           <label class="mr-10" for="event-number">Select event number:</label>
-          <input id="event-number" name="event-number" type="number" value="0" min="0">
+          <select name="event-number" id="event-number"></select>
         </div>
         <br>
         <div class="align-right">
@@ -72,6 +73,17 @@
     </div>
   </div>
 
+  <div id="event-switcher">
+    <img id="previous-event" class="event-switch-arrow event-switch-tool" src="img/left_arrow.svg" alt="Previous event"
+      width="20" height="20" />
+    <div>
+      <span id="selected-event" class="event-switch-tool"></span>
+      <div id="event-selector-menu"></div>
+    </div>
+    <img id="next-event" class="event-switch-arrow event-switch-tool" src="img/right_arrow.svg" alt="Next event"
+      width="20" height="20" />
+  </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>

diff --git a/js/main.js b/js/main.js
@@ -1,37 +1,18 @@
 import { errorMsg } from "./tools.js";
 import { PdgToggle } from "./menu/show-pdg.js";
 import { drawAll } from "./draw.js";
-import {
-  bits,
-  genStatus,
-  renderRangeParameters,
-  parametersRange,
-  getWidthFilterContent,
-  renderGenSim,
-} from "./menu/filter/filter.js";
-import {
-  mouseDown,
-  mouseUp,
-  mouseOut,
-  mouseMove,
-  getVisible,
-  onScroll,
-} from "./events.js";
-import { loadObjects } from "./types/load.js";
-import { objectTypes } from "./types/objects.js";
-import { copyObject } from "./lib/copy.js";
+import { getWidthFilterContent } from "./menu/filter/filter.js";
+import { mouseDown, mouseUp, mouseOut, mouseMove, onScroll } from "./events.js";
+import { showEventSwitcher, loadSelectedEvent } from "./menu/event-number.js";
+import { renderEvent } from "./menu/event-number.js";
 
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-const manipulationTools = document.getElementsByClassName("manipulation-tool");
-const filter = document.getElementById("filter");
-const filters = document.getElementById("filters");
-
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
-let jsonData = {};
+const jsonData = {};
 
 const dragTools = {
   draggedObject: null,
@@ -46,17 +27,9 @@ const currentObjects = {};
 
 const visibleObjects = {};
 
-function start(currentObjects, visibleObjects) {
-  for (const [key, value] of Object.entries(currentObjects)) {
-    const classType = objectTypes[key];
-    const collection = value.collection;
-    classType.setup(collection, canvas);
-  }
-
-  drawAll(ctx, currentObjects);
-
-  getVisible(currentObjects, visibleObjects);
-}
+const selectedObjectTypes = {
+  types: ["edm4hep::MCParticle"],
+};
 
 canvas.onmousedown = (event) => {
   mouseDown(event, visibleObjects, dragTools);
@@ -74,14 +47,6 @@ window.onscroll = () => {
   onScroll(currentObjects, visibleObjects);
 };
 
-/*
-function showInputModal() {
-  const modal = document.getElementById("input-modal");
-
-  modal.style.display = "block";
-}
-*/
-
 function hideInputModal() {
   const modal = document.getElementById("input-modal");
 
@@ -101,11 +66,37 @@ document.getElementById("input-file").addEventListener("change", (event) => {
     const reader = new FileReader();
     reader.addEventListener("load", (event) => {
       const fileText = event.target.result;
-      jsonData = JSON.parse(fileText);
+      jsonData.data = JSON.parse(fileText);
 
       const eventNumberInput = document.getElementById("event-number");
-      eventNumberInput.max = Object.keys(jsonData).length - 1;
+      const options = Object.keys(jsonData.data).map((event) =>
+        parseInt(event.replace("Event ", ""))
+      );
+      eventNumberInput.max = Object.keys(options).length - 1;
+      if (options.length === 0) {
+        errorMsg("No events found in the file!");
+        return;
+      }
+      eventNumberInput.value = options[0];
       document.getElementById("event-selector").style.display = "block";
+      const eventOptions = document.getElementById("event-number");
+      const eventSelectorMenu = document.getElementById("event-selector-menu");
+      eventOptions.replaceChildren();
+      eventSelectorMenu.replaceChildren();
+      options.forEach((option) => {
+        const optionElement = document.createElement("option");
+        optionElement.appendChild(document.createTextNode(option));
+        eventOptions.appendChild(optionElement);
+
+        const optionElementMenu = document.createElement("div");
+        optionElementMenu.className = "event-option";
+        optionElementMenu.appendChild(document.createTextNode(option));
+        eventSelectorMenu.appendChild(optionElementMenu);
+        optionElementMenu.addEventListener("click", () => {
+          renderEvent(option);
+          eventSelectorMenu.style.display = "none";
+        });
+      });
     });
     reader.readAsText(file);
     break;
@@ -118,42 +109,12 @@ document
     event.preventDefault();
     const eventNum = document.getElementById("event-number").value;
 
-    const selectedObjectTypes = ["edm4hep::MCParticle"];
-    const objects = loadObjects(jsonData, eventNum, selectedObjectTypes);
-
-    copyObject(objects, loadedObjects);
-    copyObject(objects, currentObjects);
-
-    const length = Object.values(loadedObjects)
-      .map((obj) => obj.collection.length)
-      .reduce((a, b) => a + b, 0);
-
-    if (length === 0) {
-      errorMsg("Provided file does not contain any MC particle tree!");
-      return;
-    }
-    for (const eventNum in jsonData) {
-      delete jsonData[eventNum];
-    }
-    start(currentObjects, visibleObjects);
     hideInputModal();
-    window.scroll((canvas.width - window.innerWidth) / 2, 0);
+    showEventSwitcher(eventNum);
+    loadSelectedEvent();
 
-    for (const tool of manipulationTools) {
-      tool.style.display = "flex";
-    }
-
-    const mcObjects = loadedObjects["edm4hep::MCParticle"].collection;
-    mcObjects.forEach((mcObject) => {
-      genStatus.add(mcObject.generatorStatus);
-    });
-    genStatus.setCheckBoxes();
-    renderRangeParameters(filters, parametersRange);
     const width = getWidthFilterContent();
     filter.style.width = width;
-
-    renderGenSim(bits, genStatus, filters);
-
     const pdgToggle = new PdgToggle("show-pdg");
     pdgToggle.init(() => {
       pdgToggle.toggle(currentObjects, () => {
@@ -162,4 +123,12 @@ document
     });
   });
 
-export { canvas, ctx, loadedObjects, currentObjects, visibleObjects };
+export {
+  canvas,
+  ctx,
+  loadedObjects,
+  currentObjects,
+  visibleObjects,
+  jsonData,
+  selectedObjectTypes,
+};