Merge pull request #68 from key4hep/feat/load-from-anywhere

Feat/load from anywhere
key4hep · Jul 29, 2024 · 711ed19 · 711ed19
2 parents 9a6a61d + dbe4815
commit 711ed19
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 19 deletions.
diff --git a/css/current-file.css 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 → css/information-message.css b/css/empty-view.css → 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
diff --git a/index.html b/index.html
@@ -17,8 +17,9 @@
   <link rel="stylesheet" href="css/information.css">
   <link rel="stylesheet" href="css/contact.css">
   <link rel="stylesheet" href="css/views.css">
-  <link rel="stylesheet" href="css/empty-view.css">
+  <link rel="stylesheet" href="css/information-message.css">
   <link rel="stylesheet" href="css/switch-deploy.css">
+  <link rel="stylesheet" href="css/current-file.css">
 </head>
 
 <body>
@@ -180,21 +181,31 @@ <h2 id="view-title-info"></h2>
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
-  <div id="empty-view">
+  <div id="information-message-modal">
     <img src="img/blue-info.svg" alt="Empty view" width="20" height="20" />
-    <p>This view has no elements</p>
+    <p id="information-text">This view has no elements</p>
   </div>
 
   <div id="switch-deploy">
     <p id="switch-deploy-text">Switch to</p>
     <button id="switch-deploy-button">release</button>
   </div>
 
+  <input id="change-file-input" type="file" accept=".json" hidden>
+
+  <div id="current-file">
+    <span>Current file: <span id="current-file-name">some file name</span></span>
+    <button id="change-file">
+      <img src="img/upload.svg" alt="Change file" width="20" height="20" />
+    </button>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
   <script type="module" src="js/pixi.min.mjs"> </script>
   <script type="module" src="js/main.js"></script>
   <script type="module" src="js/information.js"></script>
   <script type="module" src="js/views/views.js"></script>
+  <script type="module" src="js/current-file.js"></script>
   <script type="module" src="js/switch-deploy.js"></script>
   <script type="module" src="js/menu/filter/filter.js"></script>
 </body>

diff --git a/js/current-file.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {