Skip to content

Commit 0ad8a09

Browse files
kjvbrtkjvbrt
authored
Merge pull request #38 from brauliorivas/feat/event-ui-auto
Switch events without reload #37 + auto event select #34
2 parents a7b49eb + 69d3005 commit 0ad8a09

File tree

12 files changed

+272
-90
lines changed

12 files changed

+272
-90
lines changed

‎css/event.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
#event-switcher {
2+
position: fixed;
3+
display: none;
4+
flex-direction: row;
5+
justify-content: center;
6+
align-items: center;
7+
z-index: 1;
8+
top: 10px;
9+
left: 50%;
10+
transform: translateX(-50%);
11+
background-color: #e1e1e1;
12+
padding: 5px 10px;
13+
border-radius: 5px;
14+
}
15+
16+
.event-switch-arrow {
17+
cursor: pointer;
18+
}
19+
20+
.event-switch-tool {
21+
margin: 0 5px;
22+
}
23+
24+
#selected-event {
25+
font-weight: 500;
26+
cursor: pointer;
27+
}
28+
29+
#selected-event:hover {
30+
text-decoration: underline;
31+
background-color: #d1d1d1;
32+
}
33+
34+
#event-selector-menu {
35+
display: none;
36+
position: fixed;
37+
top: 32px;
38+
flex-direction: column;
39+
align-items: center;
40+
background-color: #e1e1e1;
41+
width: 100px;
42+
left: 50%;
43+
transform: translateX(-50%);
44+
max-height: 175px;
45+
overflow-y: auto;
46+
overflow-x: hidden;
47+
padding: 0 5px;
48+
}
49+
50+
.event-option {
51+
cursor: pointer;
52+
border: 1px solid #000;
53+
width: 100%;
54+
text-align: center;
55+
margin: 1px 0;
56+
}

‎css/filter.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
min-width: 100px;
33
position: fixed;
44
flex-direction: column;
5-
background-color: #f5f5f5;
5+
background-color: #e1e1e1;
66
border-radius: 5px;
77
padding: 10px;
88
top: 10px;

‎css/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ body {
33
padding: 0;
44
/* overflow: hidden; */
55
font-family: sans-serif;
6+
font-size: 16px;
67
}
78

89
.manipulation-tool {

‎css/toggle.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
left: 0;
3434
right: 0;
3535
bottom: 0;
36-
background-color: #ccc;
36+
background-color: #e1e1e1;
3737
-webkit-transition: 0.4s;
3838
transition: 0.4s;
3939
}

‎img/left_arrow.svg

Lines changed: 1 addition & 0 deletions
Loading

‎img/right_arrow.svg

Lines changed: 1 addition & 0 deletions
Loading

‎index.html

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link rel="stylesheet" href="css/modal.css">
1313
<link rel="stylesheet" href="css/toggle.css">
1414
<link rel="stylesheet" href="css/filter.css">
15+
<link rel="stylesheet" href="css/event.css">
1516
</head>
1617

1718
<body>
@@ -34,7 +35,7 @@
3435
</div>
3536
<div id="event-selector">
3637
<label class="mr-10" for="event-number">Select event number:</label>
37-
<input id="event-number" name="event-number" type="number" value="0" min="0">
38+
<select name="event-number" id="event-number"></select>
3839
</div>
3940
<br>
4041
<div class="align-right">
@@ -72,6 +73,17 @@
7273
</div>
7374
</div>
7475

76+
<div id="event-switcher">
77+
<img id="previous-event" class="event-switch-arrow event-switch-tool" src="img/left_arrow.svg" alt="Previous event"
78+
width="20" height="20" />
79+
<div>
80+
<span id="selected-event" class="event-switch-tool"></span>
81+
<div id="event-selector-menu"></div>
82+
</div>
83+
<img id="next-event" class="event-switch-arrow event-switch-tool" src="img/right_arrow.svg" alt="Next event"
84+
width="20" height="20" />
85+
</div>
86+
7587
<canvas id="canvas" width="100vw" height="100vh"></canvas>
7688

7789
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>

‎js/main.js

Lines changed: 47 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,18 @@
11
import { errorMsg } from "./tools.js";
22
import { PdgToggle } from "./menu/show-pdg.js";
33
import { drawAll } from "./draw.js";
4-
import {
5-
bits,
6-
genStatus,
7-
renderRangeParameters,
8-
parametersRange,
9-
getWidthFilterContent,
10-
renderGenSim,
11-
} from "./menu/filter/filter.js";
12-
import {
13-
mouseDown,
14-
mouseUp,
15-
mouseOut,
16-
mouseMove,
17-
getVisible,
18-
onScroll,
19-
} from "./events.js";
20-
import { loadObjects } from "./types/load.js";
21-
import { objectTypes } from "./types/objects.js";
22-
import { copyObject } from "./lib/copy.js";
4+
import { getWidthFilterContent } from "./menu/filter/filter.js";
5+
import { mouseDown, mouseUp, mouseOut, mouseMove, onScroll } from "./events.js";
6+
import { showEventSwitcher, loadSelectedEvent } from "./menu/event-number.js";
7+
import { renderEvent } from "./menu/event-number.js";
238

249
const canvas = document.getElementById("canvas");
2510
const ctx = canvas.getContext("2d");
2611

27-
const manipulationTools = document.getElementsByClassName("manipulation-tool");
28-
const filter = document.getElementById("filter");
29-
const filters = document.getElementById("filters");
30-
3112
canvas.width = window.innerWidth;
3213
canvas.height = window.innerHeight;
3314

34-
let jsonData = {};
15+
const jsonData = {};
3516

3617
const dragTools = {
3718
draggedObject: null,
@@ -46,17 +27,9 @@ const currentObjects = {};
4627

4728
const visibleObjects = {};
4829

49-
function start(currentObjects, visibleObjects) {
50-
for (const [key, value] of Object.entries(currentObjects)) {
51-
const classType = objectTypes[key];
52-
const collection = value.collection;
53-
classType.setup(collection, canvas);
54-
}
55-
56-
drawAll(ctx, currentObjects);
57-
58-
getVisible(currentObjects, visibleObjects);
59-
}
30+
const selectedObjectTypes = {
31+
types: ["edm4hep::MCParticle"],
32+
};
6033

6134
canvas.onmousedown = (event) => {
6235
mouseDown(event, visibleObjects, dragTools);
@@ -74,14 +47,6 @@ window.onscroll = () => {
7447
onScroll(currentObjects, visibleObjects);
7548
};
7649

77-
/*
78-
function showInputModal() {
79-
const modal = document.getElementById("input-modal");
80-
81-
modal.style.display = "block";
82-
}
83-
*/
84-
8550
function hideInputModal() {
8651
const modal = document.getElementById("input-modal");
8752

@@ -101,11 +66,37 @@ document.getElementById("input-file").addEventListener("change", (event) => {
10166
const reader = new FileReader();
10267
reader.addEventListener("load", (event) => {
10368
const fileText = event.target.result;
104-
jsonData = JSON.parse(fileText);
69+
jsonData.data = JSON.parse(fileText);
10570

10671
const eventNumberInput = document.getElementById("event-number");
107-
eventNumberInput.max = Object.keys(jsonData).length - 1;
72+
const options = Object.keys(jsonData.data).map((event) =>
73+
parseInt(event.replace("Event ", ""))
74+
);
75+
eventNumberInput.max = Object.keys(options).length - 1;
76+
if (options.length === 0) {
77+
errorMsg("No events found in the file!");
78+
return;
79+
}
80+
eventNumberInput.value = options[0];
10881
document.getElementById("event-selector").style.display = "block";
82+
const eventOptions = document.getElementById("event-number");
83+
const eventSelectorMenu = document.getElementById("event-selector-menu");
84+
eventOptions.replaceChildren();
85+
eventSelectorMenu.replaceChildren();
86+
options.forEach((option) => {
87+
const optionElement = document.createElement("option");
88+
optionElement.appendChild(document.createTextNode(option));
89+
eventOptions.appendChild(optionElement);
90+
91+
const optionElementMenu = document.createElement("div");
92+
optionElementMenu.className = "event-option";
93+
optionElementMenu.appendChild(document.createTextNode(option));
94+
eventSelectorMenu.appendChild(optionElementMenu);
95+
optionElementMenu.addEventListener("click", () => {
96+
renderEvent(option);
97+
eventSelectorMenu.style.display = "none";
98+
});
99+
});
109100
});
110101
reader.readAsText(file);
111102
break;
@@ -118,42 +109,12 @@ document
118109
event.preventDefault();
119110
const eventNum = document.getElementById("event-number").value;
120111

121-
const selectedObjectTypes = ["edm4hep::MCParticle"];
122-
const objects = loadObjects(jsonData, eventNum, selectedObjectTypes);
123-
124-
copyObject(objects, loadedObjects);
125-
copyObject(objects, currentObjects);
126-
127-
const length = Object.values(loadedObjects)
128-
.map((obj) => obj.collection.length)
129-
.reduce((a, b) => a + b, 0);
130-
131-
if (length === 0) {
132-
errorMsg("Provided file does not contain any MC particle tree!");
133-
return;
134-
}
135-
for (const eventNum in jsonData) {
136-
delete jsonData[eventNum];
137-
}
138-
start(currentObjects, visibleObjects);
139112
hideInputModal();
140-
window.scroll((canvas.width - window.innerWidth) / 2, 0);
113+
showEventSwitcher(eventNum);
114+
loadSelectedEvent();
141115

142-
for (const tool of manipulationTools) {
143-
tool.style.display = "flex";
144-
}
145-
146-
const mcObjects = loadedObjects["edm4hep::MCParticle"].collection;
147-
mcObjects.forEach((mcObject) => {
148-
genStatus.add(mcObject.generatorStatus);
149-
});
150-
genStatus.setCheckBoxes();
151-
renderRangeParameters(filters, parametersRange);
152116
const width = getWidthFilterContent();
153117
filter.style.width = width;
154-
155-
renderGenSim(bits, genStatus, filters);
156-
157118
const pdgToggle = new PdgToggle("show-pdg");
158119
pdgToggle.init(() => {
159120
pdgToggle.toggle(currentObjects, () => {
@@ -162,4 +123,12 @@ document
162123
});
163124
});
164125

165-
export { canvas, ctx, loadedObjects, currentObjects, visibleObjects };
126+
export {
127+
canvas,
128+
ctx,
129+
loadedObjects,
130+
currentObjects,
131+
visibleObjects,
132+
jsonData,
133+
selectedObjectTypes,
134+
};

0 commit comments

Comments
 (0)