Skip to content

Commit

Permalink
Deploy preview for PR 25 🛫
Browse files Browse the repository at this point in the history
  • Loading branch information
brauliorivas committed May 31, 2024
1 parent c582978 commit eb80daf
Show file tree
Hide file tree
Showing 21 changed files with 1,036 additions and 56 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
36 changes: 36 additions & 0 deletions pr-preview/pr-25/css/filter.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
#filter {
width: 16%;
position: fixed;
flex-direction: column;
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
top: 10px;
right: 10px;
z-index: 1;
}

#filter-header {
display: flex;
justify-content: space-between;
align-items: center;
}

#filter-button {
cursor: pointer;
}

#close-filter {
display: none;
}

#filter-content {
display: none;
flex-direction: column;
margin-top: 10px;
}

#filters {
display: flex;
flex-direction: column;
}
1 change: 1 addition & 0 deletions pr-preview/pr-25/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ body {
margin: 0;
padding: 0;
/* overflow: hidden; */
font-family: sans-serif;
}

.manipulation-tool {
Expand Down
5 changes: 2 additions & 3 deletions pr-preview/pr-25/css/toggle.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
#toggle {
position: fixed;
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
Expand All @@ -9,9 +8,9 @@
z-index: 1;
}

#toggle-label {
.toggle-label {
margin-right: 10px;
font-family: sans-serif;
margin-left: 10px;
}

.switch {
Expand Down
1 change: 1 addition & 0 deletions pr-preview/pr-25/img/down_arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions pr-preview/pr-25/img/up_arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 23 additions & 3 deletions pr-preview/pr-25/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
<link rel="stylesheet" href="css/canvas.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/toggle.css">
<link rel="stylesheet" href="css/filter.css">
</head>

<body>
<div id="input-modal" class="modal-background">
<div class="modal-content">

<p>Welcome to <span id="logo">
<p>¡¡¡Welcome to <span id="logo">
<span id="logo-d">d</span><span id="logo-m">m</span><span id="logo-x">X</span>
</span></p>

Expand Down Expand Up @@ -45,17 +46,36 @@
</div>

<div id="toggle" class="manipulation-tool">
<span id="toggle-label">Show PDG IDs</span>
<span class="toggle-label">Show PDG IDs</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
<span id="show-pdg" class="slider round"></span>
</label>
</div>

<div id="filter" class="manipulation-tool">
<div id="filter-header">
<span>Filters</span>
<div id="filter-button">
<img id="open-filter" src="img/down_arrow.svg" alt="Open filter" width="20" height="20" />
<img id="close-filter" src="img/up_arrow.svg" alt="Close filter" width="20" height="20" />
</div>
</div>
<div id="filter-content">
<div id="filters">
</div>
<div>
<button id="filter-apply">Apply</button>
<button id="filter-reset">Reset</button>
</div>
</div>
</div>

<canvas id="canvas" width="100vw" height="100vh"></canvas>

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

</html>
18 changes: 18 additions & 0 deletions pr-preview/pr-25/js/draw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export function drawAll(ctx, parentLinks, childrenLinks, infoBoxes) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// console.time("drawParentLinks");
for (const link of parentLinks) {
link.draw(ctx, infoBoxes);
}
// console.timeEnd("drawParentLinks");
// console.time("drawChildrenLinks");
for (const link of childrenLinks) {
link.draw(ctx, infoBoxes);
}
// console.timeEnd("drawChildrenLinks");
// console.time("drawBoxes");
for (const infoBox of infoBoxes) {
if (infoBox !== null) infoBox.draw(ctx);
}
// console.timeEnd("drawBoxes");
}
52 changes: 25 additions & 27 deletions pr-preview/pr-25/js/main.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { errorMsg, loadMCParticles } from "./tools.js";
import Toggle from "./menu/toggle.js";

const toggle = new Toggle();
import { PdgToggle } from "./menu/show-pdg.js";
import { drawAll } from "./draw.js";

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

const manipulationTools = document.getElementsByClassName("manipulation-tool");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Expand Down Expand Up @@ -50,7 +51,7 @@ const mouseUp = function (event) {
isDragging = false;

// console.time("drawAll");
drawAll();
drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
// console.timeEnd("drawAll");
};

Expand Down Expand Up @@ -81,7 +82,7 @@ const mouseMove = function (event) {
infoBox.y += dy;

// console.time("drawVisible");
drawVisible();
drawVisible(visibleParentLinks, visibleChildrenLinks, visibleBoxes);
// console.timeEnd("drawVisible");

prevMouseX = mouseX;
Expand Down Expand Up @@ -170,7 +171,11 @@ const getVisible = function () {
*/
};

const drawVisible = function () {
const drawVisible = function (
visibleParentLinks,
visibleChildrenLinks,
visibleBoxes
) {
const boundigClientRect = canvas.getBoundingClientRect();
ctx.clearRect(
0 - boundigClientRect.x,
Expand All @@ -189,25 +194,6 @@ const drawVisible = function () {
}
};

const drawAll = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// console.time("drawParentLinks");
for (const link of parentLinks) {
link.draw(ctx, infoBoxes);
}
// console.timeEnd("drawParentLinks");
// console.time("drawChildrenLinks");
for (const link of childrenLinks) {
link.draw(ctx, infoBoxes);
}
// console.timeEnd("drawChildrenLinks");
// console.time("drawBoxes");
for (const infoBox of infoBoxes) {
infoBox.draw(ctx);
}
// console.timeEnd("drawBoxes");
};

function start() {
if (!infoBoxes) {
return;
Expand Down Expand Up @@ -273,7 +259,7 @@ function start() {
}
}

drawAll();
drawAll(ctx, parentLinks, childrenLinks, infoBoxes);

getVisible();
}
Expand Down Expand Up @@ -338,5 +324,17 @@ document
start();
hideInputModal();
window.scroll((canvas.width - window.innerWidth) / 2, 0);
toggle.init(infoBoxes, drawAll);

for (const tool of manipulationTools) {
tool.style.display = "flex";
}

const pdgToggle = new PdgToggle("show-pdg");
pdgToggle.init(() => {
pdgToggle.toggle(infoBoxes, () => {
drawAll(ctx, parentLinks, childrenLinks, infoBoxes);
});
});
});

export { parentLinks, childrenLinks, infoBoxes, ctx };
78 changes: 78 additions & 0 deletions pr-preview/pr-25/js/menu/filter/filter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { Link } from "../../objects.js";
import { drawAll } from "../../draw.js";
import { parentLinks, childrenLinks, infoBoxes, ctx } from "../../main.js";
import { Range, Checkbox, buildCriteriaFunction } from "./parameters.js";
import { reconnect } from "./reconnect.js";

const filterButton = document.getElementById("filter-button");
const openFilter = document.getElementById("open-filter");
const closeFilter = document.getElementById("close-filter");
const filterContent = document.getElementById("filter-content");

let active = false;

filterButton.addEventListener("click", () => {
active = !active;

if (active) {
openFilter.style.display = "none";
closeFilter.style.display = "block";
filterContent.style.display = "flex";
} else {
openFilter.style.display = "block";
closeFilter.style.display = "none";
filterContent.style.display = "none";
}
});

const filters = document.getElementById("filters");
const apply = document.getElementById("filter-apply");
const reset = document.getElementById("filter-reset");

let parametersRange = ["momentum", "vertex", "time", "mass", "charge"];

parametersRange = parametersRange.map((parameter) => new Range(parameter));

parametersRange.forEach((parameter) => parameter.render(filters));

let bitsCheckbox = [23, 24, 25, 26, 27, 28, 29, 30];

bitsCheckbox = bitsCheckbox.map((bit) => new Checkbox("simStatus", bit));

bitsCheckbox.forEach((checkbox) => checkbox.render(filters));

apply.addEventListener("click", () => {
const rangeFunctions = Range.buildFilter(parametersRange);
const checkboxFunctions = Checkbox.buildFilter(bitsCheckbox);

const criteriaFunction = buildCriteriaFunction(
rangeFunctions,
checkboxFunctions
);

const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
criteriaFunction,
parentLinks,
childrenLinks,
infoBoxes
);

drawAll(ctx, newParentLinks, newChildrenLinks, filteredParticles);
});

reset.addEventListener("click", () => {
drawAll(ctx, parentLinks, childrenLinks, infoBoxes);

filters.innerHTML = "";

parametersRange.forEach((parameter) => {
parameter.min = undefined;
parameter.max = undefined;
parameter.render(filters);
});

bitsCheckbox.forEach((checkbox) => {
checkbox.checked = false;
checkbox.render(filters);
});
});
Loading

0 comments on commit eb80daf

Please sign in to comment.