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="view-information-button" class="information-button">This view</button>
+        <button id="information-button" class="information-button">About eede</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>
+          <div id="view-description-info"></div>
+        </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,63 @@ 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";
+    }
+  });
+}
+
+export function selectInformationSection() {
+  chooseButton("information-button");
+  showOption("information-content");
+}
+
+export function selectViewInformation() {
+  chooseButton("view-information-button");
+  showOption("view-information-content");
+}
+
+informationButton.addEventListener("click", () => {
+  selectInformationSection();
+});
+
+viewButton.addEventListener("click", () => {
+  selectViewInformation();
+});
+
+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.replaceChildren();
+  const newElement = document.createElement("div");
+  newElement.innerHTML = description;
+  viewDescription.appendChild(newElement.firstChild);
+}
+
+export function hideViewInformation() {
+  viewButton.style.display = "none";
+}

js/lib/html-string.js

@@ -0,0 +1,3 @@
+export function spanWithColor(text, color) {
+  return `<span style="color: ${color};">${text}</span>`;
+}

js/main.js

@@ -2,6 +2,7 @@ import { errorMsg } from "./lib/messages.js";
 import { renderEvent } from "./event-number.js";
 import { setView, getView } from "./views/views.js";
 import { views } from "./views/views-dictionary.js";
+import { selectViewInformation } from "./information.js";
 
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
@@ -135,6 +136,7 @@ document
     showEventSwitcher();
     showViewsMenu();
     renderEvent(eventNum);
+    selectViewInformation();
   });
 
 export { canvas, ctx, jsonData, selectedObjectTypes };

js/views/views-dictionary.js

@@ -18,72 +18,99 @@ import { setupNoFilter } from "../filter/nofilter.js";
 import { vertexList, preFilterVertexList } from "./vertexlist.js";
 import { particleIDList, preFilterParticleIDList } from "./particleidlist.js";
 import { recoParticleID, preFilterRecoParticleID } from "./recoparticleid.js";
+import { spanWithColor } from "../lib/html-string.js";
 
 export const views = {
   "Monte Carlo Particle Tree": {
     filters: setupMCParticleFilter,
     viewFunction: mcParticleTree,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCTree,
+    description: `<p>${spanWithColor(
+      "Red",
+      "#AA0000"
+    )} relations mean parent relation (from bottom to top), ${spanWithColor(
+      "green",
+      "#00AA00"
+    )} relations mean daughter relation (from top to bottom).</p>`,
   },
   "Reconstructed Particle Tree": {
     filters: setupNoFilter,
     viewFunction: recoParticleTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterRecoTree,
+    description: `<p>A tree of the Reconstructed Particles. ${spanWithColor(
+      "Purple",
+      "#AA00AA"
+    )} relations mean relation between particles.</p>`,
   },
   "Track Tree": {
     filters: setupNoFilter,
     viewFunction: trackTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterTrackTree,
+    description: `<p>A tree of the Tracks.</p>`,
   },
   "Cluster Tree": {
     filters: setupNoFilter,
     viewFunction: clusterTree,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterClusterTree,
+    description: `<p>A tree of the Clusters.</p>`,
   },
   "RecoParticle-Cluster-Track-Vertex": {
     filters: setupNoFilter,
     viewFunction: recoClusterTrackVertex,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterRecoClusterTrackVertex,
+    description: `<p>Relations that a Reconstruced Particle has with other objects. ${spanWithColor(
+      "Green",
+      "#AAAA00"
+    )} connections are towards Tracks, and ${spanWithColor(
+      "sky blue",
+      "#00AAAA"
+    )} connections are towards Clusters.</p>`,
   },
   "Monte Carlo-Reconstructed Particle": {
     filters: setupNoFilter,
     viewFunction: mcRecoAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCReco,
+    description: `<p>Association between Monte Carlo Particles and Reconstructed Particles. 1:1 relation.</p>`,
   },
   "Monte Carlo Particle-Track": {
     filters: setupNoFilter,
     viewFunction: mcTrackAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCTrack,
+    description: `<p>Association between Monte Carlo Particles and Tracks. 1:1 relation.</p>`,
   },
   "Monte Carlo Particle-Cluster": {
     filters: setupNoFilter,
     viewFunction: mcClusterAssociation,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterMCCluster,
+    description: `<p>Association between Monte Carlo Particles and Clusters. 1:1 relation.</p>`,
   },
   "ParticleID List": {
     filters: setupNoFilter,
     viewFunction: particleIDList,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterParticleIDList,
+    description: `<p>A list of ParticleIDs found in the event.</p>`,
   },
   "Vertex List": {
     filters: setupNoFilter,
     viewFunction: vertexList,
     scrollFunction: scrollTopLeft,
     preFilterFunction: preFilterVertexList,
+    description: `<p>A list of Vertices found in the event.</p>`,
   },
   "ParticleID-Reconstructed Particle": {
     filters: setupNoFilter,
     viewFunction: recoParticleID,
     scrollFunction: scrollTopCenter,
     preFilterFunction: preFilterRecoParticleID,
+    description: `<p>1:1 relation from ParticleID to Reconstructed Particle.</p>`,
   },
 };

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);