Merge pull request #48 from brauliorivas/feat/view-cluster-track

Views for cluster and track
key4hep · Jul 9, 2024 · e650135 · e650135
2 parents 0aa445b + de191b1
commit e650135
Show file tree

Hide file tree

Showing 45 changed files with 1,818 additions and 1,200 deletions.
diff --git a/css/views.css b/css/views.css
@@ -0,0 +1,61 @@
+#available-views {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8px;
+  max-height: 90px;
+  overflow-y: auto;
+}
+
+.view-button {
+  background-color: #f1f1f1;
+  border: 1px solid #000;
+  border-radius: 5px;
+  padding: 8px;
+  margin: 8px;
+  cursor: pointer;
+  height: fit-content;
+}
+
+#views {
+  display: none;
+  flex-direction: column;
+  position: fixed;
+  top: 25%;
+  left: 10px;
+  width: fit-content;
+  height: 50%;
+  background-color: #e1e1e1;
+  padding: 15px;
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+
+#view-selector {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow-y: auto;
+  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
@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="css/event.css">
   <link rel="stylesheet" href="css/information.css">
   <link rel="stylesheet" href="css/contact.css">
+  <link rel="stylesheet" href="css/views.css">
 </head>
 
 <body>
@@ -41,6 +42,8 @@
           <label class="mr-10" for="event-number">Select event number:</label>
           <select name="event-number" id="event-number"></select>
         </div>
+        <div id="available-views" class="view-selector-menu">
+        </div>
         <br>
         <div class="align-right">
           <button id="visualize-button">Visualize</button>
@@ -147,12 +150,18 @@
     </div>
   </div>
 
+  <div id="views">
+    <p>Select a view:</p>
+    <div id="view-selector" class="view-selector-menu"></div>
+  </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/menu/filter/filter.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>
 </body>
 
 </html>
diff --git a/js/draw.js b/js/draw.js
@@ -1,21 +1,42 @@
 import { canvas, ctx } from "./main.js";
 
-export function drawAll(ctx, loadedObjects) {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+function draw(objects) {
+  const datatypes = objects.datatypes;
+  const associations = objects.associations;
 
-  for (const elements of Object.values(loadedObjects)) {
+  for (const collection of Object.values(associations)) {
+    for (const association of collection) {
+      association.draw(ctx);
+    }
+  }
+
+  for (const elements of Object.values(datatypes)) {
     const { collection, oneToMany, oneToOne } = elements;
 
     for (const links of Object.values(oneToMany)) {
-      for (const link of links) link.draw(ctx);
+      for (const link of links) {
+        link.draw(ctx);
+      }
     }
 
-    for (const link of Object.values(oneToOne)) link.draw(ctx);
+    for (const links of Object.values(oneToOne)) {
+      for (const link of links) {
+        link.draw(ctx);
+      }
+    }
 
-    for (const object of collection) object.draw(ctx);
+    for (const object of collection) {
+      object.draw(ctx);
+    }
   }
 }
 
+export function drawAll(loadedObjects) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  draw(loadedObjects);
+}
+
 export function drawVisible(visibleObjects) {
   const boundigClientRect = canvas.getBoundingClientRect();
   ctx.clearRect(
@@ -25,15 +46,5 @@ export function drawVisible(visibleObjects) {
     window.innerHeight
   );
 
-  for (const elements of Object.values(visibleObjects)) {
-    const { collection, oneToMany, oneToOne } = elements;
-
-    for (const links of Object.values(oneToMany)) {
-      for (const link of links) link.draw(ctx);
-    }
-
-    for (const link of Object.values(oneToOne)) link.draw(ctx);
-
-    for (const object of collection) object.draw(ctx);
-  }
+  draw(visibleObjects);
 }
diff --git a/js/event-number.js b/js/event-number.js
@@ -0,0 +1,73 @@
+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";
+
+const eventNumber = document.getElementById("selected-event");
+const previousEvent = document.getElementById("previous-event");
+const nextEvent = document.getElementById("next-event");
+
+const currentEvent = {};
+
+const eventCollection = {};
+const currentObjects = {};
+
+function updateEventNumber() {
+  if (eventNumber.firstChild) {
+    eventNumber.removeChild(eventNumber.firstChild);
+  }
+  eventNumber.appendChild(
+    document.createTextNode(`Event: ${currentEvent.event}`)
+  );
+}
+
+function loadSelectedEvent() {
+  if (eventCollection[currentEvent.event] === undefined) {
+    const objects = loadObjects(
+      jsonData.data,
+      currentEvent.event,
+      selectedObjectTypes.types
+    );
+
+    eventCollection[currentEvent.event] = objects;
+
+    for (const [key, value] of Object.entries(
+      eventCollection[currentEvent.event].datatypes
+    )) {
+      const classType = objectTypes[key];
+      const collection = value.collection;
+      classType.setup(collection);
+    }
+    copyObject(objects, currentObjects);
+  } else {
+    copyObject(eventCollection[currentEvent.event], currentObjects);
+  }
+}
+
+export function renderEvent(eventNumber) {
+  saveScrollLocation();
+  currentEvent.event = eventNumber;
+  loadSelectedEvent();
+  updateEventNumber();
+  drawCurrentView();
+}
+
+previousEvent.addEventListener("click", () => {
+  const newEventNum = `${parseInt(currentEvent.event) - 1}`;
+  renderEvent(newEventNum);
+});
+nextEvent.addEventListener("click", () => {
+  const newEventNum = `${parseInt(currentEvent.event) + 1}`;
+  renderEvent(newEventNum);
+});
+eventNumber.addEventListener("click", () => {
+  const eventSelectorMenu = document.getElementById("event-selector-menu");
+  if (eventSelectorMenu.style.display === "flex") {
+    eventSelectorMenu.style.display = "none";
+  } else {
+    eventSelectorMenu.style.display = "flex";
+  }
+});
+
+export { currentObjects, currentEvent };
diff --git a/js/events.js b/js/events.js
@@ -1,4 +1,4 @@
-import { canvas, ctx } from "./main.js";
+import { canvas } from "./main.js";
 import { drawAll, drawVisible } from "./draw.js";
 
 const mouseDown = function (event, visibleObjects, dragTools) {
@@ -10,7 +10,7 @@ const mouseDown = function (event, visibleObjects, dragTools) {
   dragTools.prevMouseX = mouseX;
   dragTools.prevMouseY = mouseY;
 
-  for (const { collection } of Object.values(visibleObjects)) {
+  for (const { collection } of Object.values(visibleObjects.datatypes)) {
     for (const object of collection) {
       if (object.isHere(mouseX, mouseY)) {
         dragTools.draggedObject = object;
@@ -30,7 +30,7 @@ const mouseUp = function (event, currentObjects, dragTools) {
   dragTools.isDragging = false;
 
   // console.time("drawAll");
-  drawAll(ctx, currentObjects);
+  drawAll(currentObjects);
   // console.timeEnd("drawAll");
 };
 
@@ -47,7 +47,6 @@ const mouseMove = function (event, visibleObjects, dragTools) {
   if (!dragTools.isDragging) {
     return;
   }
-  event.preventDefault();
 
   const boundigClientRect = canvas.getBoundingClientRect();
   const mouseX = parseInt(event.clientX - boundigClientRect.x);
@@ -60,9 +59,7 @@ const mouseMove = function (event, visibleObjects, dragTools) {
   draggedObject.x += dx;
   draggedObject.y += dy;
 
-  // console.time("drawVisible");
   drawVisible(visibleObjects);
-  // console.timeEnd("drawVisible");
 
   dragTools.prevMouseX = mouseX;
   dragTools.prevMouseY = mouseY;
@@ -71,10 +68,14 @@ const mouseMove = function (event, visibleObjects, dragTools) {
 const getVisible = function (loadedObjects, visibleObjects) {
   const boundigClientRect = canvas.getBoundingClientRect();
 
-  for (const [objectType, elements] of Object.entries(loadedObjects)) {
+  visibleObjects.datatypes = {};
+  visibleObjects.associations = {};
+  for (const [objectType, elements] of Object.entries(
+    loadedObjects.datatypes ?? {}
+  )) {
     const { collection, oneToMany, oneToOne } = elements;
 
-    visibleObjects[objectType] = {
+    visibleObjects.datatypes[objectType] = {
       collection: [],
       oneToMany: {},
       oneToOne: {},
@@ -89,12 +90,12 @@ const getVisible = function (loadedObjects, visibleObjects) {
           window.innerHeight
         )
       ) {
-        visibleObjects[objectType].collection.push(object);
+        visibleObjects.datatypes[objectType].collection.push(object);
       }
     }
 
     for (const [name, links] of Object.entries(oneToMany)) {
-      visibleObjects[objectType].oneToMany[name] = [];
+      visibleObjects.datatypes[objectType].oneToMany[name] = [];
 
       for (const link of links) {
         if (
@@ -105,13 +106,13 @@ const getVisible = function (loadedObjects, visibleObjects) {
             window.innerHeight
           )
         ) {
-          visibleObjects[objectType].oneToMany[name].push(link);
+          visibleObjects.datatypes[objectType].oneToMany[name].push(link);
         }
       }
     }
 
     for (const [name, links] of Object.entries(oneToOne)) {
-      visibleObjects[objectType].oneToOne[name] = null;
+      visibleObjects.datatypes[objectType].oneToOne[name] = [];
 
       for (const link of links) {
         if (
@@ -122,11 +123,30 @@ const getVisible = function (loadedObjects, visibleObjects) {
             window.innerHeight
           )
         ) {
-          visibleObjects[objectType].oneToOne[name] = link;
+          visibleObjects.datatypes[objectType].oneToOne[name].push(link);
         }
       }
     }
   }
+
+  for (const [name, links] of Object.entries(
+    loadedObjects.associations ?? {}
+  )) {
+    visibleObjects.associations[name] = [];
+
+    for (const link of links) {
+      if (
+        link.isVisible(
+          0 - boundigClientRect.x,
+          0 - boundigClientRect.y,
+          window.innerWidth,
+          window.innerHeight
+        )
+      ) {
+        visibleObjects.associations[name].push(link);
+      }
+    }
+  }
 };
 
 const onScroll = function (currentObjects, visibleObjects) {