Skip to content

Commit

Permalink
Merge pull request #68 from key4hep/feat/load-from-anywhere
Browse files Browse the repository at this point in the history
Feat/load from anywhere
  • Loading branch information
brauliorivas authored Jul 29, 2024
2 parents 9a6a61d + dbe4815 commit 711ed19
Show file tree
Hide file tree
Showing 10 changed files with 151 additions and 19 deletions.
19 changes: 19 additions & 0 deletions css/current-file.css
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 2 additions & 2 deletions css/empty-view.css → css/information-message.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#empty-view {
#information-message-modal {
display: none;
align-items: center;
background-color: #e1e1e1;
Expand All @@ -13,6 +13,6 @@
border: 1px solid #000;
}

#empty-view p {
#information-message-modal p {
margin-left: 10px;
}
1 change: 1 addition & 0 deletions img/upload.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 14 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
87 changes: 87 additions & 0 deletions js/current-file.js
Original file line number Diff line number Diff line change
@@ -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";
}
9 changes: 4 additions & 5 deletions js/event-number.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -70,4 +69,4 @@ eventNumber.addEventListener("click", () => {
}
});

export { currentObjects, currentEvent };
export { eventCollection, currentObjects, currentEvent };
8 changes: 2 additions & 6 deletions js/information.js
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down
19 changes: 17 additions & 2 deletions js/lib/messages.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
4 changes: 4 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -139,6 +142,7 @@ document
hideDeploySwitch();
showEventSwitcher();
showViewsMenu();
showFileNameMenu();
selectViewInformation();
renderEvent(eventNum);
});
Expand Down
2 changes: 1 addition & 1 deletion js/views/views.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 711ed19

Please sign in to comment.