diff --git a/css/empty-view.css b/css/empty-view.css
index da3d2073..5b728058 100644
--- a/css/empty-view.css
+++ b/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%;
diff --git a/css/information.css b/css/information.css
index 6f02a227..e6ebef1e 100644
--- a/css/information.css
+++ b/css/information.css
@@ -37,3 +37,40 @@
.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;
+}
+
+#information-button {
+ display: none;
+}
+
+#view-information-content {
+ display: none;
+}
diff --git a/index.html b/index.html
index ae678fe2..084ec8d2 100644
--- a/index.html
+++ b/index.html
@@ -100,55 +100,67 @@
e e d E
-
Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the wiki .
- Want to learn more about EDM4hep? Check out the EDM4hep website.
-
-
- Found a bug or have a feature request? Open a new issue .
-
-
Contact:
-
- Juraj Smiesko:
-
-
-
-
-
-
-
-
-
-
- Thomas Madlener:
-
-
-
-
-
-
-
-
-
- Braulio Rivas:
-
-
-
-
-
-
-
-
-
-
+
+ This view
+ About eede
+
+
diff --git a/js/information.js b/js/information.js
index d26168cc..d0972c08 100644
--- a/js/information.js
+++ b/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";
+}
diff --git a/js/lib/html-string.js b/js/lib/html-string.js
new file mode 100644
index 00000000..2d8e2eaf
--- /dev/null
+++ b/js/lib/html-string.js
@@ -0,0 +1,3 @@
+export function spanWithColor(text, color) {
+ return `${text} `;
+}
diff --git a/js/main.js b/js/main.js
index 2dd779e9..7c6f05d7 100644
--- a/js/main.js
+++ b/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");
@@ -39,8 +40,10 @@ function showEventSwitcher() {
function showViewsMenu() {
const viewsMenu = document.getElementById("views");
+ const aboutButton = document.getElementById("information-button");
viewsMenu.style.display = "flex";
+ aboutButton.style.display = "block";
}
function hideDeploySwitch() {
@@ -141,6 +144,7 @@ document
showEventSwitcher();
showViewsMenu();
renderEvent(eventNum);
+ selectViewInformation();
hideDeploySwitch();
});
diff --git a/js/views/views-dictionary.js b/js/views/views-dictionary.js
index 03112d6d..894b8e14 100644
--- a/js/views/views-dictionary.js
+++ b/js/views/views-dictionary.js
@@ -18,6 +18,7 @@ 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": {
@@ -25,65 +26,91 @@ export const views = {
viewFunction: mcParticleTree,
scrollFunction: scrollTopCenter,
preFilterFunction: preFilterMCTree,
+ description: `${spanWithColor(
+ "Red",
+ "#AA0000"
+ )} relations mean parent relation (from bottom to top), ${spanWithColor(
+ "green",
+ "#00AA00"
+ )} 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. ${spanWithColor(
+ "Purple",
+ "#AA00AA"
+ )} 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. ${spanWithColor(
+ "Green",
+ "#AAAA00"
+ )} connections are towards Tracks, and ${spanWithColor(
+ "sky blue",
+ "#00AAAA"
+ )} 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.
`,
},
};
diff --git a/js/views/views.js b/js/views/views.js
index f74cb3ba..982d1011 100644
--- a/js/views/views.js
+++ b/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 = {};
@@ -40,6 +41,11 @@ function scroll() {
window.scrollTo(scrollLocations[index].x, scrollLocations[index].y);
}
+function setInfoButtonName(view) {
+ const button = document.getElementById("view-information-button");
+ button.innerText = view;
+}
+
const drawView = (view) => {
paintButton(view);
@@ -50,8 +56,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 +74,11 @@ const drawView = (view) => {
if (isEmpty) {
emptyCanvas();
emptyViewMessage();
+ hideViewInformation();
return;
}
+ showViewInformation(view, description);
hideEmptyViewMessage();
-
viewFunction(viewObjects);
copyObject(viewObjects, viewCurrentObjects);
@@ -81,6 +93,7 @@ const drawView = (view) => {
drawAll(viewCurrentObjects);
getVisible(viewCurrentObjects, viewVisibleObjects);
filters(viewObjects, viewCurrentObjects, viewVisibleObjects);
+ setInfoButtonName(getView());
canvas.onmousedown = (event) => {
mouseDown(event, viewVisibleObjects, dragTools);
- 
- 
-