From 86328a31edb882b6177d866b02a1c647749e103d Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad <61257604+brauliorivas@users.noreply.github.com> Date: Wed, 15 May 2024 09:06:27 -0500 Subject: [PATCH 1/4] Automated deploys via workflows (#16) * setup workflow yml for static site * configure possible workflows for dmX * 3 workflows set up for dmX * remove preview when pr not merged + don't force push --- .github/workflows/development.yml | 22 ++++++++++++++++++++++ .github/workflows/preview.yml | 30 ++++++++++++++++++++++++++++++ .github/workflows/static.yml | 23 +++++++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 .github/workflows/development.yml create mode 100644 .github/workflows/preview.yml create mode 100644 .github/workflows/static.yml diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml new file mode 100644 index 00000000..462db31a --- /dev/null +++ b/.github/workflows/development.yml @@ -0,0 +1,22 @@ +name: Release version of dmX in GitHub Pages +on: + push: + branches: [release] + +permissions: + contents: write +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Deploy + uses: JamesIves/github-pages-deploy-action@v4 + with: + folder: . + clean-exclude: | + pr-preview/ + main/ + target-folder: release/ diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml new file mode 100644 index 00000000..9e77499d --- /dev/null +++ b/.github/workflows/preview.yml @@ -0,0 +1,30 @@ +name: Deploy PR previews to GitHub Pages +concurrency: preview-${{ github.ref }} +on: + pull_request: + types: + - opened + - reopened + - synchronize + - closed +permissions: + contents: write +jobs: + deploy-preview: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: rossjrw/pr-preview-action@v1 + if: contains(['opened', 'reopened', 'synchronize'], ${{ github.event.action }}) + with: + source-dir: . + preview-branch: gh-pages + umbrella-dir: pr-preview + action: auto + - 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 + action: remove diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 00000000..f838e0f0 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,23 @@ +name: Deploy dmX to GitHub Pages +on: + push: + branches: [main] + +permissions: + contents: write +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Deploy + uses: JamesIves/github-pages-deploy-action@v4 + with: + folder: . + clean-exclude: | + pr-preview/ + beta/ + target-folder: main/ + force: false From 0ec7955eb3a8c21efb2842c132477461d0ef9505 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 13 May 2024 14:51:37 -0500 Subject: [PATCH 2/4] filtering/reconnecting WIP --- js/filter.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++ js/main.js | 18 +++++++++----- 2 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 js/filter.js diff --git a/js/filter.js b/js/filter.js new file mode 100644 index 00000000..5352a5cb --- /dev/null +++ b/js/filter.js @@ -0,0 +1,66 @@ +import { Link } from "./objects.js"; + +export function reconnect( + criteriaFunction, + parentLinks, + childrenLinks, + particles +) { + const filteredParticles = []; + const newParentLinks = []; + const newChildrenLinks = []; + + for (const particle of particles) { + if (!criteriaFunction(particle)) { + const parentParticles = []; + const childrenParticles = []; + + for (const parent of particle.parents) { + if (criteriaFunction(particles[parent])) { + parentParticles.push(parent); + } + } + + for (const child of particle.children) { + if (criteriaFunction(particles[child])) { + childrenParticles.push(child); + } + } + + for (const parent of parentParticles) { + for (const child of childrenParticles) { + const link = new Link(newParentLinks.length, parent, child); + newParentLinks.push(link); + } + } + } else { + filteredParticles.push(particle); + + for (const parentLinkId of particle.parentLinks) { + const parentLink = parentLinks[parentLinkId]; + const parent = particles[parentLink.from]; + if (criteriaFunction(parent)) { + newParentLinks.push( + new Link(newParentLinks.length, parentLink.from, parentLink.to) + ); + } + } + + for (const childrenLinkId of particle.childrenLinks) { + const childrenLink = childrenLinks[childrenLinkId]; + const child = particles[childrenLink.to]; + if (criteriaFunction(child)) { + newChildrenLinks.push( + new Link( + newChildrenLinks.length, + childrenLink.from, + childrenLink.to + ) + ); + } + } + } + } + + return [filteredParticles, newParentLinks, newChildrenLinks]; +} diff --git a/js/main.js b/js/main.js index f7dd8148..f88e8429 100644 --- a/js/main.js +++ b/js/main.js @@ -50,7 +50,7 @@ const mouseUp = function (event) { isDragging = false; // console.time("drawAll"); - drawAll(); + drawAll(parentLinks, childrenLinks, infoBoxes); // console.timeEnd("drawAll"); }; @@ -81,7 +81,7 @@ const mouseMove = function (event) { infoBox.y += dy; // console.time("drawVisible"); - drawVisible(); + drawVisible(visibleParentLinks, visibleChildrenLinks, visibleBoxes); // console.timeEnd("drawVisible"); prevMouseX = mouseX; @@ -170,7 +170,11 @@ const getVisible = function () { */ }; -const drawVisible = function () { +const drawVisible = function ( + visibleParentLinks, + visibleChildrenLinks, + visibleBoxes +) { const boundigClientRect = canvas.getBoundingClientRect(); ctx.clearRect( 0 - boundigClientRect.x, @@ -189,7 +193,7 @@ const drawVisible = function () { } }; -const drawAll = function () { +const drawAll = function (parentLinks, childrenLinks, infoBoxes) { ctx.clearRect(0, 0, canvas.width, canvas.height); // console.time("drawParentLinks"); for (const link of parentLinks) { @@ -273,7 +277,7 @@ function start() { } } - drawAll(); + drawAll(parentLinks, childrenLinks, infoBoxes); getVisible(); } @@ -338,5 +342,7 @@ document start(); hideInputModal(); window.scroll((canvas.width - window.innerWidth) / 2, 0); - toggle.init(infoBoxes, drawAll); + toggle.init(infoBoxes, () => { + drawAll(parentLinks, childrenLinks, infoBoxes); + }); }); From 4e5f1a16f7cf8c5f98e02d0c99ee5a444c1a6c1f Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Tue, 14 May 2024 17:27:58 -0500 Subject: [PATCH 3/4] basic filtering for MC particle function --- css/toggle.css | 3 ++- index.html | 9 +++++++-- js/main.js | 20 +++++++++++++++++++- js/{ => menu}/filter.js | 30 +++++++++++++++--------------- js/menu/toggle.js | 2 +- 5 files changed, 44 insertions(+), 20 deletions(-) rename js/{ => menu}/filter.js (68%) diff --git a/css/toggle.css b/css/toggle.css index 397d820f..12e519c5 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -9,8 +9,9 @@ z-index: 1; } -#toggle-label { +.toggle-label { margin-right: 10px; + margin-left: 10px; font-family: sans-serif; } diff --git a/index.html b/index.html index 5a37f9ec..920c325b 100644 --- a/index.html +++ b/index.html @@ -45,10 +45,15 @@
- Show PDG IDs + Show PDG IDs + Filter +
diff --git a/js/main.js b/js/main.js index f88e8429..bc2a5fd4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,5 @@ import { errorMsg, loadMCParticles } from "./tools.js"; +import { reconnect } from "./menu/filter.js"; import Toggle from "./menu/toggle.js"; const toggle = new Toggle(); @@ -6,6 +7,8 @@ const toggle = new Toggle(); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); +const filterToggle = document.getElementById("filter"); + canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -207,7 +210,7 @@ const drawAll = function (parentLinks, childrenLinks, infoBoxes) { // console.timeEnd("drawChildrenLinks"); // console.time("drawBoxes"); for (const infoBox of infoBoxes) { - infoBox.draw(ctx); + if (infoBox !== null) infoBox.draw(ctx); } // console.timeEnd("drawBoxes"); }; @@ -345,4 +348,19 @@ document toggle.init(infoBoxes, () => { drawAll(parentLinks, childrenLinks, infoBoxes); }); + + filterToggle.addEventListener("click", () => { + const filteringFunction = (particle) => { + return particle.charge === 0; + }; + + const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect( + filteringFunction, + parentLinks, + childrenLinks, + infoBoxes + ); + + drawAll(newParentLinks, newChildrenLinks, filteredParticles); + }); }); diff --git a/js/filter.js b/js/menu/filter.js similarity index 68% rename from js/filter.js rename to js/menu/filter.js index 5352a5cb..3afda9f9 100644 --- a/js/filter.js +++ b/js/menu/filter.js @@ -1,4 +1,4 @@ -import { Link } from "./objects.js"; +import { Link } from "../objects.js"; export function reconnect( criteriaFunction, @@ -6,12 +6,14 @@ export function reconnect( childrenLinks, particles ) { - const filteredParticles = []; const newParentLinks = []; const newChildrenLinks = []; + const filteredParticles = []; for (const particle of particles) { if (!criteriaFunction(particle)) { + filteredParticles.push(null); + const parentParticles = []; const childrenParticles = []; @@ -29,8 +31,14 @@ export function reconnect( for (const parent of parentParticles) { for (const child of childrenParticles) { - const link = new Link(newParentLinks.length, parent, child); - newParentLinks.push(link); + const linkToParent = new Link(newParentLinks.length, child, parent); + linkToParent.xShift = 3; + const linkToChild = new Link(newChildrenLinks.length, parent, child); + linkToChild.color = "#0A0"; + linkToChild.xShift = -3; + + newParentLinks.push(linkToParent); + newChildrenLinks.push(linkToChild); } } } else { @@ -40,9 +48,7 @@ export function reconnect( const parentLink = parentLinks[parentLinkId]; const parent = particles[parentLink.from]; if (criteriaFunction(parent)) { - newParentLinks.push( - new Link(newParentLinks.length, parentLink.from, parentLink.to) - ); + newParentLinks.push(parentLink); } } @@ -50,17 +56,11 @@ export function reconnect( const childrenLink = childrenLinks[childrenLinkId]; const child = particles[childrenLink.to]; if (criteriaFunction(child)) { - newChildrenLinks.push( - new Link( - newChildrenLinks.length, - childrenLink.from, - childrenLink.to - ) - ); + newChildrenLinks.push(childrenLink); } } } } - return [filteredParticles, newParentLinks, newChildrenLinks]; + return [newParentLinks, newChildrenLinks, filteredParticles]; } diff --git a/js/menu/toggle.js b/js/menu/toggle.js index c9c84c3a..d63c4c55 100644 --- a/js/menu/toggle.js +++ b/js/menu/toggle.js @@ -1,5 +1,5 @@ const toggle = document.getElementById("toggle"); -const slider = document.getElementsByClassName("slider")[0]; +const slider = document.getElementById("show-pdg"); class Toggle { constructor() { From ccaeeca1a4441c0d587833ac2258e8ab7c03aecc Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Tue, 14 May 2024 19:09:57 -0500 Subject: [PATCH 4/4] refactor toggle functionality + fix reconnect child/parent --- js/main.js | 35 +++++++++++++++++++---------------- js/menu/filter.js | 30 +++++++++++++++++++++++------- js/menu/show-pdg.js | 22 ++++++++++++++++++++++ js/menu/toggle.js | 29 ++++++----------------------- 4 files changed, 70 insertions(+), 46 deletions(-) create mode 100644 js/menu/show-pdg.js diff --git a/js/main.js b/js/main.js index bc2a5fd4..babcdcde 100644 --- a/js/main.js +++ b/js/main.js @@ -1,13 +1,11 @@ import { errorMsg, loadMCParticles } from "./tools.js"; -import { reconnect } from "./menu/filter.js"; -import Toggle from "./menu/toggle.js"; - -const toggle = new Toggle(); +import { PdgToggle } from "./menu/show-pdg.js"; +import { Filter } from "./menu/filter.js"; const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); -const filterToggle = document.getElementById("filter"); +const toggleMenu = document.getElementById("toggle"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -345,22 +343,27 @@ document start(); hideInputModal(); window.scroll((canvas.width - window.innerWidth) / 2, 0); - toggle.init(infoBoxes, () => { - drawAll(parentLinks, childrenLinks, infoBoxes); - }); - filterToggle.addEventListener("click", () => { - const filteringFunction = (particle) => { - return particle.charge === 0; - }; + toggleMenu.style.display = "flex"; + + const pdgToggle = new PdgToggle("show-pdg"); + pdgToggle.init(() => { + pdgToggle.toggle(infoBoxes, () => { + drawAll(parentLinks, childrenLinks, infoBoxes); + }); + }); - const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect( + const filteringFunction = (particle) => { + return particle.charge === 0; + }; + const filter = new Filter("filter"); + filter.init(() => { + filter.toggle( filteringFunction, parentLinks, childrenLinks, - infoBoxes + infoBoxes, + drawAll ); - - drawAll(newParentLinks, newChildrenLinks, filteredParticles); }); }); diff --git a/js/menu/filter.js b/js/menu/filter.js index 3afda9f9..420d7f1a 100644 --- a/js/menu/filter.js +++ b/js/menu/filter.js @@ -1,11 +1,27 @@ import { Link } from "../objects.js"; +import { Toggle } from "./toggle.js"; -export function reconnect( - criteriaFunction, - parentLinks, - childrenLinks, - particles -) { +export class Filter extends Toggle { + constructor(id) { + super(id); + } + + toggle(criteriaFunction, parentLinks, childrenLinks, particles, drawAll) { + if (this.isSliderActive) { + const [newParentLinks, newChildrenLinks, newParticles] = reconnect( + criteriaFunction, + parentLinks, + childrenLinks, + particles + ); + drawAll(newParentLinks, newChildrenLinks, newParticles); + } else { + drawAll(parentLinks, childrenLinks, particles); + } + } +} + +function reconnect(criteriaFunction, parentLinks, childrenLinks, particles) { const newParentLinks = []; const newChildrenLinks = []; const filteredParticles = []; @@ -31,7 +47,7 @@ export function reconnect( for (const parent of parentParticles) { for (const child of childrenParticles) { - const linkToParent = new Link(newParentLinks.length, child, parent); + const linkToParent = new Link(newParentLinks.length, parent, child); linkToParent.xShift = 3; const linkToChild = new Link(newChildrenLinks.length, parent, child); linkToChild.color = "#0A0"; diff --git a/js/menu/show-pdg.js b/js/menu/show-pdg.js new file mode 100644 index 00000000..e78627a7 --- /dev/null +++ b/js/menu/show-pdg.js @@ -0,0 +1,22 @@ +// const slider = document.getElementById("show-pdg"); +import { Toggle } from "./toggle.js"; + +export class PdgToggle extends Toggle { + constructor(id) { + super(id); + } + + toggle(infoBoxes, redraw) { + if (this.isSliderActive) { + for (const infoBox of infoBoxes) { + infoBox.updateTexImg(`${infoBox.pdg}`); + } + } else { + for (const infoBox of infoBoxes) { + infoBox.updateTexImg(infoBox.name); + } + } + + redraw(); + } +} diff --git a/js/menu/toggle.js b/js/menu/toggle.js index d63c4c55..d3fd2025 100644 --- a/js/menu/toggle.js +++ b/js/menu/toggle.js @@ -1,30 +1,13 @@ -const toggle = document.getElementById("toggle"); -const slider = document.getElementById("show-pdg"); - -class Toggle { - constructor() { +export class Toggle { + constructor(id) { this.isSliderActive = false; + this.slider = document.getElementById(id); } - init(infoBoxes, drawAll) { - toggle.style.display = "flex"; - - slider.addEventListener("click", () => { + init(callback) { + this.slider.addEventListener("click", () => { this.isSliderActive = !this.isSliderActive; - - if (this.isSliderActive) { - for (const infoBox of infoBoxes) { - infoBox.updateTexImg(`${infoBox.pdg}`); - } - } else { - for (const infoBox of infoBoxes) { - infoBox.updateTexImg(infoBox.name); - } - } - - drawAll(); + callback(); }); } } - -export default Toggle;