Merge pull request #61 from key4hep/feat/empty-view-alert

Empty view alert

css/empty-view.css

@@ -0,0 +1,18 @@
+#empty-view {
+  display: none;
+  align-items: center;
+  background-color: #e1e1e1;
+  padding: 10px;
+  position: fixed;
+  z-index: 2;
+  height: 30px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+  border: 1px solid #000;
+}
+
+#empty-view p {
+  margin-left: 10px;
+}

index.html

@@ -17,6 +17,7 @@
   <link rel="stylesheet" href="css/information.css">
   <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>
 
@@ -156,6 +157,11 @@
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
+  <div id="empty-view">
+    <img src="img/blue-info.svg" alt="Empty view" width="20" height="20" />
+    <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>

js/draw.js

@@ -1,4 +1,5 @@
 import { canvas, ctx } from "./main.js";
+import { updateCanvas } from "./lib/graphic-primitives.js";
 
 function draw(objects) {
   const datatypes = objects.datatypes;
@@ -32,19 +33,26 @@ function draw(objects) {
 }
 
 export function drawAll(loadedObjects) {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
+  emptyCanvas();
   draw(loadedObjects);
 }
 
 export function drawVisible(visibleObjects) {
+  emptyVisibleCanvas();
+  draw(visibleObjects);
+}
+
+export function emptyCanvas() {
+  updateCanvas(ctx, 0, 0, canvas.width, canvas.height);
+}
+
+function emptyVisibleCanvas() {
   const boundigClientRect = canvas.getBoundingClientRect();
-  ctx.clearRect(
+  updateCanvas(
+    ctx,
     0 - boundigClientRect.x,
     0 - boundigClientRect.y,
     window.innerWidth,
     window.innerHeight
   );
-
-  draw(visibleObjects);
 }

js/lib/empty-object.js

@@ -0,0 +1,32 @@
+const updateEmpty = (empty, length) => {
+  if (length === 0) {
+    empty.value = empty.value && true;
+  } else {
+    empty.value = false;
+  }
+};
+
+export function checkEmptyObject(obj) {
+  const datatypes = obj.datatypes;
+  const associations = obj.associations;
+
+  let empty = { value: true };
+
+  Object.values(datatypes).forEach((datatype) => {
+    updateEmpty(empty, datatype.collection.length);
+
+    Object.values(datatype.oneToMany).forEach((oneToMany) => {
+      updateEmpty(empty, oneToMany.length);
+    });
+
+    Object.values(datatype.oneToOne).forEach((oneToOne) => {
+      updateEmpty(empty, oneToOne.length);
+    });
+  });
+
+  Object.values(associations).forEach((association) => {
+    updateEmpty(empty, association.length);
+  });
+
+  return empty.value;
+}

js/lib/graphic-primitives.js

@@ -108,6 +108,10 @@ export function drawStraightLink(ctx, link) {
   ctx.restore();
 }
 
+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";

js/lib/messages.js

@@ -11,3 +11,13 @@ export function errorMsg(msg) {
   msgDiv.style.color = "red";
   msgDiv.innerHTML = "<p>ERROR: " + msg + "</p>";
 }
+
+export function emptyViewMessage() {
+  const msgDiv = document.getElementById("empty-view");
+  msgDiv.style.display = "flex";
+}
+
+export function hideEmptyViewMessage() {
+  const msgDiv = document.getElementById("empty-view");
+  msgDiv.style.display = "none";
+}

js/views/association-view.js

@@ -5,11 +5,6 @@ export function buildAssociationView(viewObjects, associationName) {
   const associations = viewObjects.associations[associationName];
   const length = associations.length;
 
-  if (length === 0) {
-    alert("No association found!");
-    return;
-  }
-
   const fromWidth = associations[0].from.width;
   const toWidth = associations[0].to.width;
   const fromHorizontalGap = 0.3 * fromWidth;

js/views/clustertree.js

@@ -5,11 +5,6 @@ export function clusterTree(viewCurrentObjects) {
   const clusterCollection =
     viewCurrentObjects.datatypes["edm4hep::Cluster"].collection ?? [];
 
-  if (clusterCollection.length === 0) {
-    alert("No Clusters found in this event.");
-    return;
-  }
-
   buildTree(clusterCollection, "clusters");
 }
 

js/views/list.js

@@ -1,10 +1,6 @@
 import { canvas } from "../main.js";
 
 export function listView(collection) {
-  if (collection.length === 0) {
-    alert("No objects found!");
-    return;
-  }
   const width = window.innerWidth;
   canvas.width = width;
 

js/views/mcparticletree.js

@@ -5,10 +5,6 @@ export function mcParticleTree(viewCurrentObjects) {
   const mcCollection =
     viewCurrentObjects.datatypes["edm4hep::MCParticle"].collection ?? [];
 
-  if (mcCollection.length === 0) {
-    alert("No MCParticles found in this event.");
-  }
-
   const getMaxRow = (parentLinks) => {
     let maxRow = -1;
     for (const parentLink of parentLinks) {

js/views/onewayview.js

@@ -7,11 +7,6 @@ export function oneWayView(viewObjects, fromCollectionName, relationName) {
   const fromCollection = relations.map((relation) => relation.from);
   const toCollection = relations.map((relation) => relation.to);
 
-  if (fromCollection.length === 0 || toCollection.length === 0) {
-    alert("No association found!");
-    return;
-  }
-
   const fromWidth = fromCollection[0].width;
   const toWidth = toCollection[0].width;
   const fromHorizontalGap = 0.3 * fromWidth;

js/views/recoclustertrack.js

@@ -5,11 +5,6 @@ export function recoClusterTrackVertex(viewObjects) {
   const recoParticles =
     viewObjects.datatypes["edm4hep::ReconstructedParticle"].collection;
 
-  if (recoParticles.length === 0) {
-    alert("No reconstructed particles found!");
-    return;
-  }
-
   const findFirstObject = (relationName) => {
     const object = recoParticles.find((particle) => {
       const relation = particle.oneToManyRelations[relationName];

js/views/recoparticletree.js

@@ -6,10 +6,6 @@ export function recoParticleTree(viewCurrentObjects) {
     viewCurrentObjects.datatypes["edm4hep::ReconstructedParticle"].collection ??
     [];
 
-  if (recoCollection.length === 0) {
-    alert("No ReconstructedParticles found in this event.");
-  }
-
   buildTree(recoCollection, "particles");
 }
 

js/views/tracktree.js

@@ -5,11 +5,6 @@ export function trackTree(viewCurrentObjects) {
   const trackCollection =
     viewCurrentObjects.datatypes["edm4hep::Track"].collection ?? [];
 
-  if (trackCollection.length === 0) {
-    alert("No Tracks found in this event.");
-    return;
-  }
-
   buildTree(trackCollection, "tracks");
 }
 

js/views/views.js

@@ -1,5 +1,6 @@
 import { currentObjects, currentEvent } from "../event-number.js";
 import { copyObject } from "../lib/copy.js";
+import { checkEmptyObject } from "../lib/empty-object.js";
 import { getVisible } from "../events.js";
 import { drawAll } from "../draw.js";
 import { canvas } from "../main.js";
@@ -11,6 +12,8 @@ import {
   mouseMove,
   onScroll,
 } from "../events.js";
+import { emptyViewMessage, hideEmptyViewMessage } from "../lib/messages.js";
+import { emptyCanvas } from "../draw.js";
 
 const currentView = {};
 
@@ -55,6 +58,15 @@ const drawView = (view) => {
   const viewVisibleObjects = {};
 
   preFilterFunction(currentObjects, viewObjects);
+  const isEmpty = checkEmptyObject(viewObjects);
+
+  if (isEmpty) {
+    emptyCanvas();
+    emptyViewMessage();
+    return;
+  }
+  hideEmptyViewMessage();
+
   viewFunction(viewObjects);
   copyObject(viewObjects, viewCurrentObjects);