Information about the current view

css/empty-view.css

@@ -4,7 +4,7 @@
   background-color: #e1e1e1;
   padding: 10px;
   position: fixed;
-  z-index: 2;
+  z-index: 1;
   height: 30px;
   top: 50%;
   left: 50%;

css/information.css

@@ -37,3 +37,36 @@
 .info-modal-content {
   width: 100%;
 }
+
+#information-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.information-button {
+  background-color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid black;
+  margin: 0 5px;
+}
+
+.information-button:hover {
+  cursor: pointer;
+  background-color: #c5c5c5;
+}
+
+#information-button {
+  background-color: #c5c5c5;
+}
+
+#view-information-button {
+  display: none;
+}
+
+#view-information-content {
+  display: none;
+}

index.html

@@ -99,55 +99,67 @@
     <div class="info-modal-content">
       <span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
         class="logo-letter d">d</span><span class="logo-letter e3">E</span>
-      <p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
-          href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
-        Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
-          rel="noopener noreferrer">EDM4hep</a> website.
-      </p>
-      <p>
-        Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
-          target="_blank" rel="noopener noreferrer">issue</a>.
-      </p>
-      <p>Contact:</p>
-      <ul>
-        <li class="contact-element">Juraj Smiesko:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-
-        </li>
-        <li class="contact-element">Thomas Madlener:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-        </li>
-        <li class="contact-element">Braulio Rivas:
-          <address class="email">
-            <a href="mailto:[email protected]">
-              <img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
-            </a>
-          </address>
-          <button class="copy-email-button" data-email="[email protected]">
-            <abbr title="Copy to Clipboard">
-              <img src="img/copy.svg" alt="Copy" width="16" height="16" />
-            </abbr>
-          </button>
-        </li>
-      </ul>
+      <div id="information-buttons">
+        <button id="information-button" class="information-button">About eede</button>
+        <button id="view-information-button" class="information-button">This view</button>
+      </div>
+      <div id="information-options">
+        <div id="information-content">
+          <p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
+              href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
+            Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
+              rel="noopener noreferrer">EDM4hep</a> website.
+          </p>
+          <p>
+            Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
+              target="_blank" rel="noopener noreferrer">issue</a>.
+          </p>
+          <p>Contact:</p>
+          <ul>
+            <li class="contact-element">Juraj Smiesko:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+
+            </li>
+            <li class="contact-element">Thomas Madlener:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+            </li>
+            <li class="contact-element">Braulio Rivas:
+              <address class="email">
+                <a href="mailto:[email protected]">
+                  <img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
+                </a>
+              </address>
+              <button class="copy-email-button" data-email="[email protected]">
+                <abbr title="Copy to Clipboard">
+                  <img src="img/copy.svg" alt="Copy" width="16" height="16" />
+                </abbr>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div id="view-information-content">
+          <h2 id="view-title-info"></h2>
+          <p id="view-description-info"></p>
+        </div>
+      </div>
     </div>
   </div>
 

js/information.js

@@ -2,6 +2,8 @@ const infoIcon = document.getElementById("information-icon");
 const closeIcon = document.getElementById("close-information");
 const copyToClipboardButtons =
   document.getElementsByClassName("copy-email-button");
+const informationButton = document.getElementById("information-button");
+const viewButton = document.getElementById("view-information-button");
 
 Array.from(copyToClipboardButtons).forEach((button) => {
   button.addEventListener("click", () => {
@@ -56,3 +58,52 @@ window.addEventListener("click", (event) => {
     hideModal();
   }
 });
+
+function chooseButton(id) {
+  const buttons = document.getElementsByClassName("information-button");
+  Array.from(buttons).forEach((button) => {
+    if (button.id === id) {
+      button.style.backgroundColor = "#c5c5c5";
+    } else {
+      button.style.backgroundColor = "#ffffff";
+    }
+  });
+}
+
+function showOption(id) {
+  const informationOptions = document.getElementById("information-options");
+  const children = informationOptions.children;
+  Array.from(children).forEach((child) => {
+    if (child.id === id) {
+      child.style.display = "block";
+    } else {
+      child.style.display = "none";
+    }
+  });
+}
+
+informationButton.addEventListener("click", () => {
+  chooseButton("information-button");
+  showOption("information-content");
+});
+
+viewButton.addEventListener("click", () => {
+  chooseButton("view-information-button");
+  showOption("view-information-content");
+});
+
+export function showViewInformation(title, description) {
+  if (viewButton.style.display !== "block") {
+    viewButton.style.display = "block";
+  }
+
+  const viewTitle = document.getElementById("view-title-info");
+  viewTitle.innerText = `Learn more about ${title} view`;
+
+  const viewDescription = document.getElementById("view-description-info");
+  viewDescription.innerText = description;
+}
+
+export function hideViewInformation() {
+  viewButton.style.display = "none";
+}

js/views/views-dictionary.js

@@ -25,65 +25,82 @@ export const views = {
     viewFunction: mcParticleTree,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCTree,
+    description:
+      "Red relations mean parent relation (from bottom to top), green relations mean daughter relation (from top to bottom).",
   },
   "Reconstructed Particle Tree": {
     filters: setupNoFilter,
     viewFunction: recoParticleTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterRecoTree,
+    description:
+      "A tree of the Reconstructed Particles. Purple relations mean relation between particles.",
   },
   "Track Tree": {
     filters: setupNoFilter,
     viewFunction: trackTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterTrackTree,
+    description: "A tree of the Tracks.",
   },
   "Cluster Tree": {
     filters: setupNoFilter,
     viewFunction: clusterTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterClusterTree,
+    description: "A tree of the Clusters.",
   },
   "RecoParticle-Cluster-Track-Vertex": {
     filters: setupNoFilter,
     viewFunction: recoClusterTrackVertex,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterRecoClusterTrackVertex,
+    description:
+      "Relations that a Reconstruced Particle has with other objects. Green connections are towards Tracks, and sky blue connections are towards Clusters.",
   },
   "Monte Carlo-Reconstructed Particle": {
     filters: setupNoFilter,
     viewFunction: mcRecoAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCReco,
+    description:
+      "Association between Monte Carlo Particles and Reconstructed Particles. 1:1 relation.",
   },
   "Monte Carlo Particle-Track": {
     filters: setupNoFilter,
     viewFunction: mcTrackAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCTrack,
+    description:
+      "Association between Monte Carlo Particles and Tracks. 1:1 relation.",
   },
   "Monte Carlo Particle-Cluster": {
     filters: setupNoFilter,
     viewFunction: mcClusterAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCCluster,
+    description:
+      "Association between Monte Carlo Particles and Clusters. 1:1 relation.",
   },
   "ParticleID List": {
     filters: setupNoFilter,
     viewFunction: particleIDList,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterParticleIDList,
+    description: "A list of ParticleIDs found in the event.",
   },
   "Vertex List": {
     filters: setupNoFilter,
     viewFunction: vertexList,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterVertexList,
+    description: "A list of Vertices found in the event.",
   },
   "ParticleID-Reconstructed Particle": {
     filters: setupNoFilter,
     viewFunction: recoParticleID,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterRecoParticleID,
+    description: "1:1 relation from ParticleID to Reconstructed Particle.",
   },
 };

js/views/views.js

@@ -13,6 +13,7 @@ import {
   onScroll,
 } from "../events.js";
 import { emptyViewMessage, hideEmptyViewMessage } from "../lib/messages.js";
+import { showViewInformation, hideViewInformation } from "../information.js";
 import { emptyCanvas } from "../draw.js";
 
 const currentView = {};
@@ -50,8 +51,13 @@ const drawView = (view) => {
     prevMouseY: 0,
   };
 
-  const { preFilterFunction, viewFunction, scrollFunction, filters } =
-    views[view];
+  const {
+    preFilterFunction,
+    viewFunction,
+    scrollFunction,
+    filters,
+    description,
+  } = views[view];
 
   const viewObjects = {};
   const viewCurrentObjects = {};
@@ -63,10 +69,11 @@ const drawView = (view) => {
   if (isEmpty) {
     emptyCanvas();
     emptyViewMessage();
+    hideViewInformation();
     return;
   }
+  showViewInformation(view, description);
   hideEmptyViewMessage();
-
   viewFunction(viewObjects);
   copyObject(viewObjects, viewCurrentObjects);