diff --git a/css/current-file.css b/css/current-file.css
new file mode 100644
index 00000000..c3ae4065
--- /dev/null
+++ b/css/current-file.css
@@ -0,0 +1,19 @@
+#current-file {
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
+ display: none;
+ flex-direction: row;
+ align-items: center;
+ background-color: #e1e1e1;
+ padding: 8px 10px;
+ font-size: 14px;
+ border: 1px solid #000;
+ border-radius: 5px;
+}
+
+#change-file {
+ margin-left: 5px;
+ width: 20px;
+ height: 20px;
+}
diff --git a/css/empty-view.css b/css/information-message.css
similarity index 81%
rename from css/empty-view.css
rename to css/information-message.css
index 5b728058..919a6203 100644
--- a/css/empty-view.css
+++ b/css/information-message.css
@@ -1,4 +1,4 @@
-#empty-view {
+#information-message-modal {
display: none;
align-items: center;
background-color: #e1e1e1;
@@ -13,6 +13,6 @@
border: 1px solid #000;
}
-#empty-view p {
+#information-message-modal p {
margin-left: 10px;
}
diff --git a/img/upload.svg b/img/upload.svg
new file mode 100644
index 00000000..fcf799e1
--- /dev/null
+++ b/img/upload.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index cb84b0ee..5167f9eb 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,9 @@
-
+
+
@@ -180,9 +181,9 @@
+
@@ -190,11 +191,21 @@
+
+
+
+
Current file: some file name
+
+
+
+
diff --git a/js/current-file.js b/js/current-file.js
new file mode 100644
index 00000000..dffd0cfb
--- /dev/null
+++ b/js/current-file.js
@@ -0,0 +1,87 @@
+import { eventCollection, renderEvent } from "./event-number.js";
+import { selectViewInformation } from "./information.js";
+import { showMessage } from "./lib/messages.js";
+import { jsonData } from "./main.js";
+import { scrollLocations } from "./views/views.js";
+
+const fileInput = document.getElementById("change-file-input");
+
+fileInput.addEventListener("change", (event) => {
+ for (const file of event.target.files) {
+ if (!file.name.endsWith("edm4hep.json")) {
+ showMessage("ERROR: Provided file is not EDM4hep JSON!");
+ return;
+ }
+
+ if (!file.type.endsWith("/json")) {
+ showMessage("ERROR: Provided file is not JSON!");
+ return;
+ }
+
+ setFileName(file.name);
+
+ const reader = new FileReader();
+ reader.addEventListener("load", (event) => {
+ const fileText = event.target.result;
+ jsonData.data = JSON.parse(fileText);
+
+ const eventOptions = Object.keys(jsonData.data).map((event) =>
+ parseInt(event.replace("Event ", ""))
+ );
+
+ if (eventOptions.length === 0) {
+ errorMsg("ERROR: No events found in file!");
+ return;
+ }
+
+ const eventNumber = eventOptions[0];
+ clearAllData();
+ selectViewInformation();
+ renderEvent(eventNumber);
+
+ const eventSelectorMenu = document.getElementById("event-selector-menu");
+ eventSelectorMenu.replaceChildren();
+
+ eventOptions.forEach((option) => {
+ const optionElementMenu = document.createElement("div");
+ optionElementMenu.className = "event-option";
+ optionElementMenu.appendChild(document.createTextNode(option));
+ eventSelectorMenu.appendChild(optionElementMenu);
+ optionElementMenu.addEventListener("click", () => {
+ renderEvent(option);
+ eventSelectorMenu.style.display = "none";
+ });
+ });
+ });
+
+ reader.readAsText(file);
+ break;
+ }
+});
+
+function clearAllData() {
+ Object.keys(eventCollection).forEach((key) => {
+ delete eventCollection[key];
+ });
+
+ Object.keys(scrollLocations).forEach((key) => {
+ delete scrollLocations[key];
+ });
+}
+
+function handleFileInput() {
+ fileInput.click();
+}
+
+const button = document.getElementById("change-file");
+button.addEventListener("click", handleFileInput);
+
+export function setFileName(name) {
+ const fileName = document.getElementById("current-file-name");
+ fileName.textContent = name;
+}
+
+export function showFileNameMenu() {
+ const fileNameMenu = document.getElementById("current-file");
+ fileNameMenu.style.display = "flex";
+}
diff --git a/js/event-number.js b/js/event-number.js
index 83b773ad..eef474b0 100644
--- a/js/event-number.js
+++ b/js/event-number.js
@@ -8,10 +8,9 @@ const eventNumber = document.getElementById("selected-event");
const previousEvent = document.getElementById("previous-event");
const nextEvent = document.getElementById("next-event");
-const currentEvent = {};
-
-const eventCollection = {};
-const currentObjects = {};
+const currentEvent = {}; // only store event number
+const eventCollection = {}; // store all events info (gradually store data for each event)
+const currentObjects = {}; // store data (objects) for current event number
function updateEventNumber() {
if (eventNumber.firstChild) {
@@ -70,4 +69,4 @@ eventNumber.addEventListener("click", () => {
}
});
-export { currentObjects, currentEvent };
+export { eventCollection, currentObjects, currentEvent };
diff --git a/js/information.js b/js/information.js
index d0972c08..726314b1 100644
--- a/js/information.js
+++ b/js/information.js
@@ -92,13 +92,9 @@ export function selectViewInformation() {
showOption("view-information-content");
}
-informationButton.addEventListener("click", () => {
- selectInformationSection();
-});
+informationButton.addEventListener("click", selectInformationSection);
-viewButton.addEventListener("click", () => {
- selectViewInformation();
-});
+viewButton.addEventListener("click", selectViewInformation);
export function showViewInformation(title, description) {
if (viewButton.style.display !== "block") {
diff --git a/js/lib/messages.js b/js/lib/messages.js
index 495bb3b9..96e73e0b 100644
--- a/js/lib/messages.js
+++ b/js/lib/messages.js
@@ -13,11 +13,26 @@ export function errorMsg(msg) {
}
export function emptyViewMessage() {
- const msgDiv = document.getElementById("empty-view");
+ const msgDiv = document.getElementById("information-message-modal");
msgDiv.style.display = "flex";
+
+ const msgText = document.getElementById("information-text");
+ msgText.innerText = "This view has no elements";
}
export function hideEmptyViewMessage() {
- const msgDiv = document.getElementById("empty-view");
+ const msgDiv = document.getElementById("information-message-modal");
msgDiv.style.display = "none";
}
+
+export function showMessage(message) {
+ const msgDiv = document.getElementById("information-message-modal");
+ msgDiv.style.display = "flex";
+
+ const msgText = document.getElementById("information-text");
+ msgText.innerText = message;
+
+ setTimeout(() => {
+ msgDiv.style.display = "none";
+ }, 2000);
+}
diff --git a/js/main.js b/js/main.js
index 5cf05095..271600ad 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,6 +4,7 @@ import { setView, getView } from "./views/views.js";
import { views } from "./views/views-dictionary.js";
import { selectViewInformation } from "./information.js";
import { startPixi } from "./draw/app.js";
+import { setFileName, showFileNameMenu } from "./current-file.js";
const jsonData = {};
const selectedObjectTypes = {
@@ -56,6 +57,8 @@ document.getElementById("input-file").addEventListener("change", (event) => {
errorMsg("ERROR: Provided file is not EDM4hep JSON!");
}
+ setFileName(file.name);
+
const reader = new FileReader();
reader.addEventListener("load", (event) => {
const fileText = event.target.result;
@@ -139,6 +142,7 @@ document
hideDeploySwitch();
showEventSwitcher();
showViewsMenu();
+ showFileNameMenu();
selectViewInformation();
renderEvent(eventNum);
});
diff --git a/js/views/views.js b/js/views/views.js
index aa10ac5c..8b05e1ee 100644
--- a/js/views/views.js
+++ b/js/views/views.js
@@ -12,7 +12,7 @@ const currentView = {};
const viewOptions = document.getElementById("view-selector");
-const scrollLocations = {};
+export const scrollLocations = {};
function paintButton(view) {
for (const button of buttons) {