Skip to content

Commit 8dad19e

Browse files
brauliorivasbrauliorivas
committed
fix merge conflict
2 parents 55523d2 + e856a9a commit 8dad19e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2575
-1275
lines changed

‎css/empty-view.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#empty-view {
2+
display: none;
3+
align-items: center;
4+
background-color: #e1e1e1;
5+
padding: 10px;
6+
position: fixed;
7+
z-index: 1;
8+
height: 30px;
9+
top: 50%;
10+
left: 50%;
11+
transform: translate(-50%, -50%);
12+
border-radius: 5px;
13+
border: 1px solid #000;
14+
}
15+
16+
#empty-view p {
17+
margin-left: 10px;
18+
}

‎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+
}

‎css/switch-deploy.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
#switch-deploy {
2+
position: fixed;
3+
left: 10px;
4+
bottom: 10px;
5+
display: flex;
6+
flex-direction: row;
7+
align-items: center;
8+
z-index: 1;
9+
background-color: #fff;
10+
padding: 5px;
11+
border-radius: 5px;
12+
border: 1px solid #000;
13+
}
14+
15+
#switch-deploy-button {
16+
cursor: pointer;
17+
background-color: #fff;
18+
border: 1px solid #000;
19+
padding: 5px;
20+
border-radius: 5px;
21+
font-family: sans-serif;
22+
font-size: 14px;
23+
}
24+
25+
#switch-deploy-button:hover {
26+
background-color: #c5c5c5;
27+
cursor: pointer;
28+
}
29+
30+
#switch-deploy-text {
31+
margin: 0 7px 0 0;
32+
}

‎css/views.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
#available-views {
2+
display: flex;
3+
flex-wrap: wrap;
4+
flex-direction: row;
5+
justify-content: flex-start;
6+
align-items: center;
7+
padding: 8px;
8+
max-height: 90px;
9+
overflow-y: auto;
10+
}
11+
12+
.view-button {
13+
background-color: #f1f1f1;
14+
border: 1px solid #000;
15+
border-radius: 5px;
16+
padding: 8px;
17+
margin: 8px;
18+
cursor: pointer;
19+
height: fit-content;
20+
}
21+
22+
#views {
23+
display: none;
24+
flex-direction: column;
25+
position: fixed;
26+
top: 25%;
27+
left: 10px;
28+
width: fit-content;
29+
height: 50%;
30+
background-color: #e1e1e1;
31+
padding: 15px;
32+
border: 1px solid #000;
33+
border-radius: 5px;
34+
}
35+
36+
#view-selector {
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: flex-start;
40+
overflow-y: auto;
41+
overflow-x: hidden;
42+
width: fit-content;
43+
}
44+
45+
.view-selector-menu::-webkit-scrollbar {
46+
width: 7px;
47+
}
48+
49+
.view-selector-menu::-webkit-scrollbar-track {
50+
background: #e1e1e1;
51+
border-radius: 5px;
52+
}
53+
54+
.view-selector-menu::-webkit-scrollbar-thumb {
55+
background: #afafaf;
56+
border-radius: 5px;
57+
}
58+
59+
.view-selector-menu::-webkit-scrollbar-thumb:hover {
60+
background: #858585;
61+
}

‎img/blue-info.svg

Lines changed: 5 additions & 0 deletions
Loading

‎index.html

Lines changed: 98 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
<link rel="stylesheet" href="css/event.css">
1717
<link rel="stylesheet" href="css/information.css">
1818
<link rel="stylesheet" href="css/contact.css">
19+
<link rel="stylesheet" href="css/views.css">
20+
<link rel="stylesheet" href="css/empty-view.css">
21+
<link rel="stylesheet" href="css/switch-deploy.css">
1922
</head>
2023

2124
<body>
@@ -33,14 +36,27 @@
3336
<div class="mb-20">
3437
<label class="mr-10" for="input-file">Select EDM4hep JSON:</label>
3538
<input id="input-file" name="input-file" type="file" accept=".json">
36-
<p class="small-text ml-20">Example input file (right click to save): <a
37-
href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a>
39+
<p class="small-text ml-20">Example input files (right click to save):
40+
<ul class="small-text">
41+
<li>
42+
Delphes: <a
43+
href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a>
44+
[5.6 MB]
45+
</li>
46+
<li>
47+
Full Sim: <a
48+
href="https://fccsw.web.cern.ch/fccsw/eede/wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json">wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json</a>
49+
[28 MB]
50+
</li>
51+
</ul>
3852
</p>
3953
</div>
4054
<div id="event-selector">
4155
<label class="mr-10" for="event-number">Select event number:</label>
4256
<select name="event-number" id="event-number"></select>
4357
</div>
58+
<div id="available-views" class="view-selector-menu">
59+
</div>
4460
<br>
4561
<div class="align-right">
4662
<button id="visualize-button">Visualize</button>
@@ -95,65 +111,94 @@
95111
<div class="info-modal-content">
96112
<span class="logo-letter e1">e</span><span class="logo-letter e2">e</span><span
97113
class="logo-letter d">d</span><span class="logo-letter e3">E</span>
98-
<p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
99-
href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
100-
Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
101-
rel="noopener noreferrer">EDM4hep</a> website.
102-
</p>
103-
<p>
104-
Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
105-
target="_blank" rel="noopener noreferrer">issue</a>.
106-
</p>
107-
<p>Contact:</p>
108-
<ul>
109-
<li class="contact-element">Juraj Smiesko:
110-
<address class="email">
111-
<a href="mailto:juraj.smiesko@cern.ch">
112-
<img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
113-
</a>
114-
</address>
115-
<button class="copy-email-button" data-email="juraj.smiesko@cern.ch">
116-
<abbr title="Copy to Clipboard">
117-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
118-
</abbr>
119-
</button>
120-
121-
</li>
122-
<li class="contact-element">Thomas Madlener:
123-
<address class="email">
124-
<a href="mailto:thomas.madlener@desy.de">
125-
<img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
126-
</a>
127-
</address>
128-
<button class="copy-email-button" data-email="thomas.madlener@desy.de">
129-
<abbr title="Copy to Clipboard">
130-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
131-
</abbr>
132-
</button>
133-
</li>
134-
<li class="contact-element">Braulio Rivas:
135-
<address class="email">
136-
<a href="mailto:brauliorivas@pm.me">
137-
<img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
138-
</a>
139-
</address>
140-
<button class="copy-email-button" data-email="brauliorivas@pm.me">
141-
<abbr title="Copy to Clipboard">
142-
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
143-
</abbr>
144-
</button>
145-
</li>
146-
</ul>
147-
<p>Version: 0.10</p>
114+
<div id="information-buttons">
115+
<button id="view-information-button" class="information-button">This view</button>
116+
<button id="information-button" class="information-button">About eede</button>
117+
</div>
118+
<div id="information-options">
119+
<div id="information-content">
120+
<p>Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the <a
121+
href="https://github.com/key4hep/eede/wiki" target="_blank" rel="noopener noreferrer">wiki</a>.
122+
Want to learn more about EDM4hep? Check out the <a href="https://edm4hep.web.cern.ch" target="_blank"
123+
rel="noopener noreferrer">EDM4hep</a> website.
124+
</p>
125+
<p>
126+
Found a bug or have a feature request? Open a new <a href="https://github.com/key4hep/eede/issues"
127+
target="_blank" rel="noopener noreferrer">issue</a>.
128+
</p>
129+
<p>Contact:</p>
130+
<ul>
131+
<li class="contact-element">Juraj Smiesko:
132+
<address class="email">
133+
<a href="mailto:juraj.smiesko@cern.ch">
134+
<img src="img/juraj-email.webp" alt="juraj-email" height="21px" />
135+
</a>
136+
</address>
137+
<button class="copy-email-button" data-email="juraj.smiesko@cern.ch">
138+
<abbr title="Copy to Clipboard">
139+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
140+
</abbr>
141+
</button>
142+
143+
</li>
144+
<li class="contact-element">Thomas Madlener:
145+
<address class="email">
146+
<a href="mailto:thomas.madlener@desy.de">
147+
<img src="img/thomas-email.webp" alt="thomas-email" height="21px" />
148+
</a>
149+
</address>
150+
<button class="copy-email-button" data-email="thomas.madlener@desy.de">
151+
<abbr title="Copy to Clipboard">
152+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
153+
</abbr>
154+
</button>
155+
</li>
156+
<li class="contact-element">Braulio Rivas:
157+
<address class="email">
158+
<a href="mailto:brauliorivas@pm.me">
159+
<img src="img/braulio-email.webp" alt="braulio-email" height="21px" />
160+
</a>
161+
</address>
162+
<button class="copy-email-button" data-email="brauliorivas@pm.me">
163+
<abbr title="Copy to Clipboard">
164+
<img src="img/copy.svg" alt="Copy" width="16" height="16" />
165+
</abbr>
166+
</button>
167+
</li>
168+
</ul>
169+
<p>Version: 0.20</p>
170+
</div>
171+
<div id="view-information-content">
172+
<h2 id="view-title-info"></h2>
173+
<div id="view-description-info"></div>
174+
</div>
175+
</div>
148176
</div>
149177
</div>
150178

179+
<div id="views">
180+
<p>Select a view:</p>
181+
<div id="view-selector" class="view-selector-menu"></div>
182+
</div>
183+
184+
<div id="empty-view">
185+
<img src="img/blue-info.svg" alt="Empty view" width="20" height="20" />
186+
<p>This view has no elements</p>
187+
</div>
188+
189+
<div id="switch-deploy">
190+
<p id="switch-deploy-text">Switch to</p>
191+
<button id="switch-deploy-button">release</button>
192+
</div>
193+
151194
<canvas id="canvas" width="100vw" height="100vh"></canvas>
152195

153196
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
154197
<script type="module" src="js/main.js"></script>
155-
<script type="module" src="js/menu/filter/filter.js"></script>
156198
<script type="module" src="js/information.js"></script>
199+
<script type="module" src="js/views/views.js"></script>
200+
<script type="module" src="js/menu/filter/filter.js"></script>
201+
<script type="module" src="js/switch-deploy.js"></script>
157202
</body>
158203

159204
</html>

0 commit comments

Comments
 (0)