Skip to content

Commit 2659b8f

Browse files
brauliorivasbrauliorivas
authored
Merge pull request #62 from key4hep/feat/view-info-section
Information about the current view
2 parents f294357 + 4474702 commit 2659b8f

File tree

8 files changed

+211
-53
lines changed

8 files changed

+211
-53
lines changed

‎css/empty-view.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
background-color: #e1e1e1;
55
padding: 10px;
66
position: fixed;
7-
z-index: 2;
7+
z-index: 1;
88
height: 30px;
99
top: 50%;
1010
left: 50%;

‎css/information.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,40 @@
3737
.info-modal-content {
3838
width: 100%;
3939
}
40+
41+
#information-buttons {
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: flex-start;
45+
align-items: center;
46+
margin-top: 10px;
47+
}
48+
49+
.information-button {
50+
background-color: #fff;
51+
padding: 5px;
52+
border-radius: 5px;
53+
border: 1px solid black;
54+
margin: 0 5px;
55+
}
56+
57+
.information-button:hover {
58+
cursor: pointer;
59+
background-color: #c5c5c5;
60+
}
61+
62+
#information-button {
63+
background-color: #c5c5c5;
64+
}
65+
66+
#view-information-button {
67+
display: none;
68+
}
69+
70+
#information-button {
71+
display: none;
72+
}
73+
74+
#view-information-content {
75+
display: none;
76+
}

‎index.html

Lines changed: 61 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -100,55 +100,67 @@
100100
<div class="info-modal-content">
101101
<span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
102102
class="logo-letter d">d</span><span class="logo-letter e3">E</span>
103-
<p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
104-
href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
105-
Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
106-
rel="noopener noreferrer">EDM4hep</a> website.
107-
</p>
108-
<p>
109-
Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
110-
target="_blank" rel="noopener noreferrer">issue</a>.
111-
</p>
112-
<p>Contact:</p>
113-
<ul>
114-
<li class="contact-element">Juraj Smiesko:
115-
<address class="email">
116-
<a href="mailto:juraj.smiesko@cern.ch">
117-
<img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
118-
</a>
119-
</address>
120-
<button class="copy-email-button" data-email="juraj.smiesko@cern.ch">
121-
<abbr title="Copy to Clipboard">
122-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
123-
</abbr>
124-
</button>
125-
126-
</li>
127-
<li class="contact-element">Thomas Madlener:
128-
<address class="email">
129-
<a href="mailto:thomas.madlener@desy.de">
130-
<img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
131-
</a>
132-
</address>
133-
<button class="copy-email-button" data-email="thomas.madlener@desy.de">
134-
<abbr title="Copy to Clipboard">
135-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
136-
</abbr>
137-
</button>
138-
</li>
139-
<li class="contact-element">Braulio Rivas:
140-
<address class="email">
141-
<a href="mailto:brauliorivas@pm.me">
142-
<img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
143-
</a>
144-
</address>
145-
<button class="copy-email-button" data-email="brauliorivas@pm.me">
146-
<abbr title="Copy to Clipboard">
147-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
148-
</abbr>
149-
</button>
150-
</li>
151-
</ul>
103+
<div id="information-buttons">
104+
<button id="view-information-button" class="information-button">This view</button>
105+
<button id="information-button" class="information-button">About eede</button>
106+
</div>
107+
<div id="information-options">
108+
<div id="information-content">
109+
<p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
110+
href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
111+
Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
112+
rel="noopener noreferrer">EDM4hep</a> website.
113+
</p>
114+
<p>
115+
Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
116+
target="_blank" rel="noopener noreferrer">issue</a>.
117+
</p>
118+
<p>Contact:</p>
119+
<ul>
120+
<li class="contact-element">Juraj Smiesko:
121+
<address class="email">
122+
<a href="mailto:juraj.smiesko@cern.ch">
123+
<img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
124+
</a>
125+
</address>
126+
<button class="copy-email-button" data-email="juraj.smiesko@cern.ch">
127+
<abbr title="Copy to Clipboard">
128+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
129+
</abbr>
130+
</button>
131+
132+
</li>
133+
<li class="contact-element">Thomas Madlener:
134+
<address class="email">
135+
<a href="mailto:thomas.madlener@desy.de">
136+
<img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
137+
</a>
138+
</address>
139+
<button class="copy-email-button" data-email="thomas.madlener@desy.de">
140+
<abbr title="Copy to Clipboard">
141+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
142+
</abbr>
143+
</button>
144+
</li>
145+
<li class="contact-element">Braulio Rivas:
146+
<address class="email">
147+
<a href="mailto:brauliorivas@pm.me">
148+
<img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
149+
</a>
150+
</address>
151+
<button class="copy-email-button" data-email="brauliorivas@pm.me">
152+
<abbr title="Copy to Clipboard">
153+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
154+
</abbr>
155+
</button>
156+
</li>
157+
</ul>
158+
</div>
159+
<div id="view-information-content">
160+
<h2 id="view-title-info"></h2>
161+
<div id="view-description-info"></div>
162+
</div>
163+
</div>
152164
</div>
153165
</div>
154166

‎js/information.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ const infoIcon = document.getElementById("information-icon");
22
const closeIcon = document.getElementById("close-information");
33
const copyToClipboardButtons =
44
document.getElementsByClassName("copy-email-button");
5+
const informationButton = document.getElementById("information-button");
6+
const viewButton = document.getElementById("view-information-button");
57

68
Array.from(copyToClipboardButtons).forEach((button) => {
79
button.addEventListener("click", () => {
@@ -56,3 +58,63 @@ window.addEventListener("click", (event) => {
5658
hideModal();
5759
}
5860
});
61+
62+
function chooseButton(id) {
63+
const buttons = document.getElementsByClassName("information-button");
64+
Array.from(buttons).forEach((button) => {
65+
if (button.id === id) {
66+
button.style.backgroundColor = "#c5c5c5";
67+
} else {
68+
button.style.backgroundColor = "#ffffff";
69+
}
70+
});
71+
}
72+
73+
function showOption(id) {
74+
const informationOptions = document.getElementById("information-options");
75+
const children = informationOptions.children;
76+
Array.from(children).forEach((child) => {
77+
if (child.id === id) {
78+
child.style.display = "block";
79+
} else {
80+
child.style.display = "none";
81+
}
82+
});
83+
}
84+
85+
export function selectInformationSection() {
86+
chooseButton("information-button");
87+
showOption("information-content");
88+
}
89+
90+
export function selectViewInformation() {
91+
chooseButton("view-information-button");
92+
showOption("view-information-content");
93+
}
94+
95+
informationButton.addEventListener("click", () => {
96+
selectInformationSection();
97+
});
98+
99+
viewButton.addEventListener("click", () => {
100+
selectViewInformation();
101+
});
102+
103+
export function showViewInformation(title, description) {
104+
if (viewButton.style.display !== "block") {
105+
viewButton.style.display = "block";
106+
}
107+
108+
const viewTitle = document.getElementById("view-title-info");
109+
viewTitle.innerText = `Learn more about ${title} view`;
110+
111+
const viewDescription = document.getElementById("view-description-info");
112+
viewDescription.replaceChildren();
113+
const newElement = document.createElement("div");
114+
newElement.innerHTML = description;
115+
viewDescription.appendChild(newElement.firstChild);
116+
}
117+
118+
export function hideViewInformation() {
119+
viewButton.style.display = "none";
120+
}

‎js/lib/html-string.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function spanWithColor(text, color) {
2+
return `<span style="color: ${color};">${text}</span>`;
3+
}

‎js/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { errorMsg } from "./lib/messages.js";
22
import { renderEvent } from "./event-number.js";
33
import { setView, getView } from "./views/views.js";
44
import { views } from "./views/views-dictionary.js";
5+
import { selectViewInformation } from "./information.js";
56

67
const canvas = document.getElementById("canvas");
78
const ctx = canvas.getContext("2d");
@@ -39,8 +40,10 @@ function showEventSwitcher() {
3940

4041
function showViewsMenu() {
4142
const viewsMenu = document.getElementById("views");
43+
const aboutButton = document.getElementById("information-button");
4244

4345
viewsMenu.style.display = "flex";
46+
aboutButton.style.display = "block";
4447
}
4548

4649
function hideDeploySwitch() {
@@ -141,6 +144,7 @@ document
141144
showEventSwitcher();
142145
showViewsMenu();
143146
renderEvent(eventNum);
147+
selectViewInformation();
144148
hideDeploySwitch();
145149
});
146150

‎js/views/views-dictionary.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,72 +18,99 @@ import { setupNoFilter } from "../filter/nofilter.js";
1818
import { vertexList, preFilterVertexList } from "./vertexlist.js";
1919
import { particleIDList, preFilterParticleIDList } from "./particleidlist.js";
2020
import { recoParticleID, preFilterRecoParticleID } from "./recoparticleid.js";
21+
import { spanWithColor } from "../lib/html-string.js";
2122

2223
export const views = {
2324
"Monte Carlo Particle Tree": {
2425
filters: setupMCParticleFilter,
2526
viewFunction: mcParticleTree,
2627
scrollFunction: scrollTopCenter,
2728
preFilterFunction: preFilterMCTree,
29+
description: `<p>${spanWithColor(
30+
"Red",
31+
"#AA0000"
32+
)} relations mean parent relation (from bottom to top), ${spanWithColor(
33+
"green",
34+
"#00AA00"
35+
)} relations mean daughter relation (from top to bottom).</p>`,
2836
},
2937
"Reconstructed Particle Tree": {
3038
filters: setupNoFilter,
3139
viewFunction: recoParticleTree,
3240
scrollFunction: scrollTopLeft,
3341
preFilterFunction: preFilterRecoTree,
42+
description: `<p>A tree of the Reconstructed Particles. ${spanWithColor(
43+
"Purple",
44+
"#AA00AA"
45+
)} relations mean relation between particles.</p>`,
3446
},
3547
"Track Tree": {
3648
filters: setupNoFilter,
3749
viewFunction: trackTree,
3850
scrollFunction: scrollTopLeft,
3951
preFilterFunction: preFilterTrackTree,
52+
description: `<p>A tree of the Tracks.</p>`,
4053
},
4154
"Cluster Tree": {
4255
filters: setupNoFilter,
4356
viewFunction: clusterTree,
4457
scrollFunction: scrollTopLeft,
4558
preFilterFunction: preFilterClusterTree,
59+
description: `<p>A tree of the Clusters.</p>`,
4660
},
4761
"RecoParticle-Cluster-Track-Vertex": {
4862
filters: setupNoFilter,
4963
viewFunction: recoClusterTrackVertex,
5064
scrollFunction: scrollTopCenter,
5165
preFilterFunction: preFilterRecoClusterTrackVertex,
66+
description: `<p>Relations that a Reconstruced Particle has with other objects. ${spanWithColor(
67+
"Green",
68+
"#AAAA00"
69+
)} connections are towards Tracks, and ${spanWithColor(
70+
"sky blue",
71+
"#00AAAA"
72+
)} connections are towards Clusters.</p>`,
5273
},
5374
"Monte Carlo-Reconstructed Particle": {
5475
filters: setupNoFilter,
5576
viewFunction: mcRecoAssociation,
5677
scrollFunction: scrollTopCenter,
5778
preFilterFunction: preFilterMCReco,
79+
description: `<p>Association between Monte Carlo Particles and Reconstructed Particles. 1:1 relation.</p>`,
5880
},
5981
"Monte Carlo Particle-Track": {
6082
filters: setupNoFilter,
6183
viewFunction: mcTrackAssociation,
6284
scrollFunction: scrollTopCenter,
6385
preFilterFunction: preFilterMCTrack,
86+
description: `<p>Association between Monte Carlo Particles and Tracks. 1:1 relation.</p>`,
6487
},
6588
"Monte Carlo Particle-Cluster": {
6689
filters: setupNoFilter,
6790
viewFunction: mcClusterAssociation,
6891
scrollFunction: scrollTopCenter,
6992
preFilterFunction: preFilterMCCluster,
93+
description: `<p>Association between Monte Carlo Particles and Clusters. 1:1 relation.</p>`,
7094
},
7195
"ParticleID List": {
7296
filters: setupNoFilter,
7397
viewFunction: particleIDList,
7498
scrollFunction: scrollTopLeft,
7599
preFilterFunction: preFilterParticleIDList,
100+
description: `<p>A list of ParticleIDs found in the event.</p>`,
76101
},
77102
"Vertex List": {
78103
filters: setupNoFilter,
79104
viewFunction: vertexList,
80105
scrollFunction: scrollTopLeft,
81106
preFilterFunction: preFilterVertexList,
107+
description: `<p>A list of Vertices found in the event.</p>`,
82108
},
83109
"ParticleID-Reconstructed Particle": {
84110
filters: setupNoFilter,
85111
viewFunction: recoParticleID,
86112
scrollFunction: scrollTopCenter,
87113
preFilterFunction: preFilterRecoParticleID,
114+
description: `<p>1:1 relation from ParticleID to Reconstructed Particle.</p>`,
88115
},
89116
};

0 commit comments

Comments
 (0)