Skip to content

Commit

Permalink
Merge branch 'main' into new-types
Browse files Browse the repository at this point in the history
  • Loading branch information
brauliorivas authored May 31, 2024
2 parents c7b270c + 23a1eb2 commit 170de18
Show file tree
Hide file tree
Showing 16 changed files with 665 additions and 63 deletions.
24 changes: 18 additions & 6 deletions .github/workflows/preview.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,37 @@ on:
- synchronize
- closed

permissions:
contents: write
pull-requests: write
jobs:
deploy-preview:
environment: github-pages
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/checkout@v3
- uses: rossjrw/pr-preview-action@v1
- name: Checkout PR
uses: actions/checkout@v3
with:
ref: ${{ github.event.pull_request.head.sha }}

- name: Deploy to GH-Pages
uses: rossjrw/pr-preview-action@v1
id: preview_step
if: contains(['opened', 'reopened', 'synchronize'], ${{ github.event.action }})
with:
source-dir: .
preview-branch: gh-pages
umbrella-dir: pr-preview
deploy-repository: "key4hep/dmx"
token: ${{ secrets.PR_TOKEN }}
action: auto
- uses: rossjrw/pr-preview-action@v1

- name: Remove preview
uses: rossjrw/pr-preview-action@v1
if: github.event.action == 'closed' && !github.event.pull_request.merged
with:
source-dir: .
preview-branch: gh-pages
umbrella-dir: pr-preview
deploy-repository: "key4hep/dmx"
token: ${{ secrets.PR_TOKEN }}
action: remove
36 changes: 36 additions & 0 deletions 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 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 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 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 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.
28 changes: 24 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@
<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>
</span>!</p>

<div id="input-message">
</div>
Expand All @@ -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 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 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 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 170de18

Please sign in to comment.