feat: fix loading and prepare objects to be placed on canvas by algor…

…ithm

js/draw.js

@@ -1,21 +1,33 @@
 import { canvas, ctx } from "./main.js";
 
-export function drawAll(ctx, loadedObjects) {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-  for (const elements of Object.values(loadedObjects)) {
+function draw(objects) {
+  for (const elements of Object.values(objects.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(ctx, loadedObjects) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  draw(loadedObjects);
+}
+
 export function drawVisible(visibleObjects) {
   const boundigClientRect = canvas.getBoundingClientRect();
   ctx.clearRect(
@@ -25,15 +37,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);
 }

js/events.js

@@ -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;
@@ -71,10 +71,13 @@ 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 = {};
+  for (const [objectType, elements] of Object.entries(
+    loadedObjects.datatypes ?? {}
+  )) {
     const { collection, oneToMany, oneToOne } = elements;
 
-    visibleObjects[objectType] = {
+    visibleObjects.datatypes[objectType] = {
       collection: [],
       oneToMany: {},
       oneToOne: {},
@@ -89,12 +92,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 +108,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] = null;
 
       for (const link of links) {
         if (
@@ -122,7 +125,7 @@ const getVisible = function (loadedObjects, visibleObjects) {
             window.innerHeight
           )
         ) {
-          visibleObjects[objectType].oneToOne[name] = link;
+          visibleObjects.datatypes[objectType].oneToOne[name] = link;
         }
       }
     }

js/graph/fruchrein.js

@@ -0,0 +1,4 @@
+const nodeHeight = 240;
+const nodeWidth = 120;
+
+export function fruchtermanReingold(nodes, edges) {}

js/main.js

@@ -3,7 +3,6 @@ import { PdgToggle } from "./menu/show-pdg.js";
 import { drawAll } from "./draw.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");
@@ -28,7 +27,11 @@ const currentObjects = {};
 const visibleObjects = {};
 
 const selectedObjectTypes = {
-  types: ["edm4hep::MCParticle"],
+  types: [
+    "edm4hep::MCParticle",
+    "edm4hep::ReconstructedParticle",
+    "edm4hep::MCRecoParticleAssociation",
+  ],
 };
 
 canvas.onmousedown = (event) => {
@@ -53,6 +56,11 @@ function hideInputModal() {
   modal.style.display = "none";
 }
 
+function showEventSwitcher() {
+  const eventSwitcher = document.getElementById("event-switcher");
+  eventSwitcher.style.display = "flex";
+}
+
 document.getElementById("input-file").addEventListener("change", (event) => {
   for (const file of event.target.files) {
     if (!file.name.endsWith("edm4hep.json")) {
@@ -110,8 +118,8 @@ document
     const eventNum = document.getElementById("event-number").value;
 
     hideInputModal();
-    showEventSwitcher(eventNum);
-    loadSelectedEvent();
+    showEventSwitcher();
+    renderEvent(eventNum);
 
     const width = getWidthFilterContent();
     filter.style.width = width;

js/menu/event-number.js

@@ -18,9 +18,9 @@ import {
 import { drawAll } from "../draw.js";
 import { objectTypes } from "../types/objects.js";
 import { jsonData, selectedObjectTypes } from "../main.js";
+import { placeObjects } from "../place-objects.js";
 
 const filters = document.getElementById("filters");
-const eventSwitcher = document.getElementById("event-switcher");
 const eventNumber = document.getElementById("selected-event");
 const previousEvent = document.getElementById("previous-event");
 const nextEvent = document.getElementById("next-event");
@@ -30,49 +30,24 @@ let currentEvent;
 
 const scrollLocation = {};
 
-function updateEventNumber(newEventNumber) {
+const layoutObjects = [];
+
+function updateEventNumber() {
   if (eventNumber.firstChild) {
     eventNumber.removeChild(eventNumber.firstChild);
   }
-  eventNumber.appendChild(document.createTextNode(`Event: ${newEventNumber}`));
-}
-
-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);
+  eventNumber.appendChild(document.createTextNode(`Event: ${currentEvent}`));
 }
 
-export function renderEvent(eventNumber) {
-  const data = jsonData.data[`Event ${eventNumber}`];
-
+function saveScrollLocation() {
+  if (scrollLocation[currentEvent] === undefined) return;
   scrollLocation[currentEvent] = {
     x: window.scrollX,
     y: window.scrollY,
   };
-
-  if (data === undefined) {
-    return;
-  } else {
-    currentEvent = eventNumber;
-    loadSelectedEvent(jsonData, selectedObjectTypes.types, eventNumber);
-    updateEventNumber(eventNumber);
-  }
-}
-
-export function showEventSwitcher(initialValue) {
-  eventSwitcher.style.display = "flex";
-  updateEventNumber(initialValue);
-  currentEvent = initialValue;
 }
 
-export function loadSelectedEvent() {
+function loadSelectedEvent() {
   const objects = loadObjects(
     jsonData.data,
     currentEvent,
@@ -82,7 +57,7 @@ export function loadSelectedEvent() {
   copyObject(objects, loadedObjects);
   copyObject(objects, currentObjects);
 
-  const length = Object.values(loadedObjects)
+  const length = Object.values(loadedObjects.datatypes)
     .map((obj) => obj.collection.length)
     .reduce((a, b) => a + b, 0);
 
@@ -91,7 +66,21 @@ export function loadSelectedEvent() {
     return;
   }
 
-  start(currentObjects, visibleObjects);
+  for (const [key, value] of Object.entries(currentObjects.datatypes)) {
+    const classType = objectTypes[key];
+    const collection = value.collection;
+    classType.setup(collection, canvas);
+  }
+
+  // Prepare objects for drawing
+  // if (!layoutObjects[currentEvent]) {
+  placeObjects(currentObjects);
+  //   layoutObjects[currentEvent] = true;
+  // }
+
+  drawAll(ctx, currentObjects);
+  getVisible(currentObjects, visibleObjects);
+
   if (scrollLocation[currentEvent] === undefined) {
     scrollLocation[currentEvent] = {
       x: (canvas.width - window.innerWidth) / 2,
@@ -101,11 +90,11 @@ export function loadSelectedEvent() {
 
   window.scroll(scrollLocation[currentEvent].x, scrollLocation[currentEvent].y);
 
+  // menu/filtering stuff
   for (const tool of manipulationTools) {
     tool.style.display = "flex";
   }
-
-  const mcObjects = loadedObjects["edm4hep::MCParticle"].collection;
+  const mcObjects = loadedObjects.datatypes["edm4hep::MCParticle"].collection;
   genStatus.reset();
   mcObjects.forEach((mcObject) => {
     genStatus.add(mcObject.generatorStatus);
@@ -117,6 +106,13 @@ export function loadSelectedEvent() {
   renderGenSim(bits, genStatus);
 }
 
+export function renderEvent(eventNumber) {
+  saveScrollLocation();
+  currentEvent = eventNumber;
+  loadSelectedEvent();
+  updateEventNumber();
+}
+
 previousEvent.addEventListener("click", () => {
   const newEventNum = `${parseInt(currentEvent) - 1}`;
   renderEvent(newEventNum);

js/menu/filter/reconnect.js

@@ -6,7 +6,7 @@ export function reconnect(criteriaFunction, loadedObjects) {
 
   emptyCopyObject(loadedObjects, filteredObjects);
 
-  for (const [key, value] of Object.entries(loadedObjects)) {
+  for (const [key, value] of Object.entries(loadedObjects.datatypes)) {
     const filterFunction = objectTypes[key].filter;
 
     filterFunction(value, filteredObjects, criteriaFunction);

js/place-objects.js

@@ -0,0 +1,65 @@
+import { fruchtermanReingold } from "./graph/fruchrein.js";
+
+function objectToNode(object) {
+  const edges = [];
+
+  const oneToManyRelations = object.oneToManyRelations ?? {};
+  const oneToOneRelations = object.oneToOneRelations ?? {};
+  const associations = object.associations ?? {};
+
+  for (const link of Object.values(oneToOneRelations)) {
+    edges.push(link);
+  }
+
+  for (const link of Object.values(associations)) {
+    edges.push(link);
+  }
+
+  for (const links of Object.values(oneToManyRelations)) {
+    for (const link of links) {
+      edges.push(link);
+    }
+  }
+
+  return {
+    x: object.x,
+    y: object.y,
+    width: object.width,
+    height: object.height,
+    edges,
+  };
+}
+
+export function placeObjects(objects) {
+  const nodes = [];
+  const edges = [];
+
+  const datatypes = objects.datatypes;
+  const associations = objects.associations;
+
+  for (const { collection, oneToOne, oneToMany } of Object.values(datatypes)) {
+    for (const object of collection) {
+      nodes.push(objectToNode(object));
+    }
+    for (const links of Object.values(oneToOne)) {
+      for (const link of links) {
+        edges.push(link);
+      }
+    }
+    for (const links of Object.values(oneToMany)) {
+      for (const link of links) {
+        edges.push(link);
+      }
+    }
+  }
+
+  for (const collection of Object.values(associations)) {
+    for (const association of collection) {
+      edges.push(association);
+    }
+  }
+
+  console.log(nodes, edges);
+
+  fruchtermanReingold(nodes, edges);
+}