From 05371ccf52841c927063eab4653cdf5bdfddd9d1 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 13 Jul 2024 20:21:48 -0500 Subject: [PATCH 1/7] show basic informationabout the current view inside the modal --- css/empty-view.css | 2 +- css/information.css | 33 +++++++++++ index.html | 110 +++++++++++++++++++---------------- js/information.js | 51 ++++++++++++++++ js/views/views-dictionary.js | 17 ++++++ js/views/views.js | 13 ++++- 6 files changed, 173 insertions(+), 53 deletions(-) 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..951496b7 100644 --- a/css/information.css +++ b/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; +} diff --git a/index.html b/index.html index b415557c..ca365ab0 100644 --- a/index.html +++ b/index.html @@ -99,55 +99,67 @@
eedE -

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:

- +
+ + +
+
+
+

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: + + +
    • +
+
+
+

+

+
+
diff --git a/js/information.js b/js/information.js index d26168cc..53a820db 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,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"; +} diff --git a/js/views/views-dictionary.js b/js/views/views-dictionary.js index 03112d6d..9496be07 100644 --- a/js/views/views-dictionary.js +++ b/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.", }, }; diff --git a/js/views/views.js b/js/views/views.js index f74cb3ba..2b61b1ac 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 = {}; @@ -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); From 873c4f358e5e659163c3363de8aac2d22139639e Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 18:08:01 -0500 Subject: [PATCH 2/7] select view information by default when visualizing --- js/information.js | 14 +++++++++++--- js/main.js | 2 ++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/js/information.js b/js/information.js index 53a820db..fcb93a1b 100644 --- a/js/information.js +++ b/js/information.js @@ -82,14 +82,22 @@ function showOption(id) { }); } -informationButton.addEventListener("click", () => { +export function selectInformationSection() { chooseButton("information-button"); showOption("information-content"); -}); +} -viewButton.addEventListener("click", () => { +export function selectViewInformation() { chooseButton("view-information-button"); showOption("view-information-content"); +} + +informationButton.addEventListener("click", () => { + selectInformationSection(); +}); + +viewButton.addEventListener("click", () => { + selectViewInformation(); }); export function showViewInformation(title, description) { diff --git a/js/main.js b/js/main.js index e9ab8b74..e581d726 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"); @@ -135,6 +136,7 @@ document showEventSwitcher(); showViewsMenu(); renderEvent(eventNum); + selectViewInformation(); }); export { canvas, ctx, jsonData, selectedObjectTypes }; From f67d4803c4e60760812a2591f9b58433f85108f1 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 18:09:07 -0500 Subject: [PATCH 3/7] show first This View button --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ca365ab0..1df50559 100644 --- a/index.html +++ b/index.html @@ -100,8 +100,8 @@ eedE
- +
From 2a0f9f96a306b536fc44602cbea90b7344294ff0 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 18:16:15 -0500 Subject: [PATCH 4/7] use html for descriptions --- index.html | 2 +- js/information.js | 5 ++++- js/views/views-dictionary.js | 23 ++++++++++++----------- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 1df50559..51117b64 100644 --- a/index.html +++ b/index.html @@ -157,7 +157,7 @@

-

+
diff --git a/js/information.js b/js/information.js index fcb93a1b..d0972c08 100644 --- a/js/information.js +++ b/js/information.js @@ -109,7 +109,10 @@ export function showViewInformation(title, description) { viewTitle.innerText = `Learn more about ${title} view`; const viewDescription = document.getElementById("view-description-info"); - viewDescription.innerText = description; + viewDescription.replaceChildren(); + const newElement = document.createElement("div"); + newElement.innerHTML = description; + viewDescription.appendChild(newElement.firstChild); } export function hideViewInformation() { diff --git a/js/views/views-dictionary.js b/js/views/views-dictionary.js index 9496be07..c5989cd2 100644 --- a/js/views/views-dictionary.js +++ b/js/views/views-dictionary.js @@ -26,7 +26,7 @@ export const views = { scrollFunction: scrollTopCenter, preFilterFunction: preFilterMCTree, description: - "Red relations mean parent relation (from bottom to top), green relations mean daughter relation (from top to bottom).", + "

Red relations mean parent relation (from bottom to top), green relations mean daughter relation (from top to bottom).

", }, "Reconstructed Particle Tree": { filters: setupNoFilter, @@ -34,21 +34,21 @@ export const views = { scrollFunction: scrollTopLeft, preFilterFunction: preFilterRecoTree, description: - "A tree of the Reconstructed Particles. Purple relations mean relation between particles.", + "

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.", + description: "

A tree of the Tracks.

", }, "Cluster Tree": { filters: setupNoFilter, viewFunction: clusterTree, scrollFunction: scrollTopLeft, preFilterFunction: preFilterClusterTree, - description: "A tree of the Clusters.", + description: "

A tree of the Clusters.

", }, "RecoParticle-Cluster-Track-Vertex": { filters: setupNoFilter, @@ -56,7 +56,7 @@ export const views = { 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.", + "

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, @@ -64,7 +64,7 @@ export const views = { scrollFunction: scrollTopCenter, preFilterFunction: preFilterMCReco, description: - "Association between Monte Carlo Particles and Reconstructed Particles. 1:1 relation.", + "

Association between Monte Carlo Particles and Reconstructed Particles. 1:1 relation.

", }, "Monte Carlo Particle-Track": { filters: setupNoFilter, @@ -72,7 +72,7 @@ export const views = { scrollFunction: scrollTopCenter, preFilterFunction: preFilterMCTrack, description: - "Association between Monte Carlo Particles and Tracks. 1:1 relation.", + "

Association between Monte Carlo Particles and Tracks. 1:1 relation.

", }, "Monte Carlo Particle-Cluster": { filters: setupNoFilter, @@ -80,27 +80,28 @@ export const views = { scrollFunction: scrollTopCenter, preFilterFunction: preFilterMCCluster, description: - "Association between Monte Carlo Particles and Clusters. 1:1 relation.", + "

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.", + 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.", + 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.", + description: + "

1:1 relation from ParticleID to Reconstructed Particle.

", }, }; From 0281cbd86cc71d4443d7d3e9fd8a24bc8891004a Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 18:26:12 -0500 Subject: [PATCH 5/7] wrap words in span to use html color styling --- js/lib/html-string.js | 3 +++ js/views/views-dictionary.js | 45 +++++++++++++++++++++--------------- 2 files changed, 30 insertions(+), 18 deletions(-) create mode 100644 js/lib/html-string.js 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/views/views-dictionary.js b/js/views/views-dictionary.js index c5989cd2..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,83 +26,91 @@ 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).

", + 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. Purple relations mean relation between particles.

", + 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.

", + description: `

A tree of the Tracks.

`, }, "Cluster Tree": { filters: setupNoFilter, viewFunction: clusterTree, scrollFunction: scrollTopLeft, preFilterFunction: preFilterClusterTree, - description: "

A tree of the Clusters.

", + 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.

", + 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.

", + 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.

", + 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.

", + 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.

", + 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.

", + 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.

", + description: `

1:1 relation from ParticleID to Reconstructed Particle.

`, }, }; From 6e03d82f56a26d3ed28c404e13b156d77fbf0bf4 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Wed, 17 Jul 2024 10:00:10 -0500 Subject: [PATCH 6/7] hide about eede button at beginning --- css/information.css | 4 ++++ js/main.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/css/information.css b/css/information.css index 951496b7..e6ebef1e 100644 --- a/css/information.css +++ b/css/information.css @@ -67,6 +67,10 @@ display: none; } +#information-button { + display: none; +} + #view-information-content { display: none; } diff --git a/js/main.js b/js/main.js index e581d726..5cf37d0c 100644 --- a/js/main.js +++ b/js/main.js @@ -40,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"; } document.getElementById("input-file").addEventListener("change", (event) => { From 07291a8bdbee367f349ef1e7bd91b3833704582f Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Wed, 17 Jul 2024 10:04:01 -0500 Subject: [PATCH 7/7] set view name on info button --- js/views/views.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/views/views.js b/js/views/views.js index 2b61b1ac..982d1011 100644 --- a/js/views/views.js +++ b/js/views/views.js @@ -41,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); @@ -88,6 +93,7 @@ const drawView = (view) => { drawAll(viewCurrentObjects); getVisible(viewCurrentObjects, viewVisibleObjects); filters(viewObjects, viewCurrentObjects, viewVisibleObjects); + setInfoButtonName(getView()); canvas.onmousedown = (event) => { mouseDown(event, viewVisibleObjects, dragTools);