From 5053077bb6592a9a1c1191acf889e71eb5bdea06 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 27 Jul 2024 19:26:10 -0500 Subject: [PATCH 1/2] create small menu at bottom left to load new file --- css/current-file.css | 19 ++++++++++ img/upload.svg | 1 + index.html | 11 ++++++ js/current-file.js | 84 ++++++++++++++++++++++++++++++++++++++++++++ js/event-number.js | 9 +++-- js/information.js | 8 ++--- js/main.js | 4 +++ js/views/views.js | 2 +- 8 files changed, 126 insertions(+), 12 deletions(-) create mode 100644 css/current-file.css create mode 100644 img/upload.svg create mode 100644 js/current-file.js 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/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..b342ef9b 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + @@ -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..2c32ad09 --- /dev/null +++ b/js/current-file.js @@ -0,0 +1,84 @@ +import { eventCollection, renderEvent } from "./event-number.js"; +import { selectViewInformation } from "./information.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")) { + errorMsg("Provided file is not EDM4hep JSON!"); + } + + if (!file.type.endsWith("/json")) { + errorMsg("ERROR: Provided file is not EDM4hep JSON!"); + } + + 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/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) { From dbe48154fb0454613dff6114db5e0b098d566243 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 27 Jul 2024 20:09:53 -0500 Subject: [PATCH 2/2] show information message if the file is not valid --- ...empty-view.css => information-message.css} | 4 ++-- index.html | 6 +++--- js/current-file.js | 7 +++++-- js/lib/messages.js | 19 +++++++++++++++++-- 4 files changed, 27 insertions(+), 9 deletions(-) rename css/{empty-view.css => information-message.css} (81%) 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/index.html b/index.html index b342ef9b..5167f9eb 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - + @@ -181,9 +181,9 @@

-
+
Empty view -

This view has no elements

+

This view has no elements

diff --git a/js/current-file.js b/js/current-file.js index 2c32ad09..dffd0cfb 100644 --- a/js/current-file.js +++ b/js/current-file.js @@ -1,5 +1,6 @@ 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"; @@ -8,11 +9,13 @@ const fileInput = document.getElementById("change-file-input"); fileInput.addEventListener("change", (event) => { for (const file of event.target.files) { if (!file.name.endsWith("edm4hep.json")) { - errorMsg("Provided file is not EDM4hep JSON!"); + showMessage("ERROR: Provided file is not EDM4hep JSON!"); + return; } if (!file.type.endsWith("/json")) { - errorMsg("ERROR: Provided file is not EDM4hep JSON!"); + showMessage("ERROR: Provided file is not JSON!"); + return; } setFileName(file.name); 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); +}