From 3d93f2973ceb7a0c76c1be3ee0718214562d485c Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Thu, 11 Jul 2024 19:33:10 -0500 Subject: [PATCH 01/21] add switcher between release and main --- css/switch-deploy.css | 23 +++++++++++++++++++++++ index.html | 6 ++++++ js/switch-deploy.js | 22 ++++++++++++++++++++++ 3 files changed, 51 insertions(+) create mode 100644 css/switch-deploy.css create mode 100644 js/switch-deploy.js diff --git a/css/switch-deploy.css b/css/switch-deploy.css new file mode 100644 index 00000000..5f496930 --- /dev/null +++ b/css/switch-deploy.css @@ -0,0 +1,23 @@ +#switch-deploy { + display: flex; + flex-direction: row; + align-items: center; +} + +#switch-deploy-button { + cursor: pointer; + background-color: #fff; + border: 1px solid #000; + padding: 5px; + border-radius: 5px; + font-family: sans-serif; + font-size: 14px; +} + +#switch-deploy-button:hover { + background-color: #c5c5c5; +} + +#switch-deploy-text { + margin: 0 10px 0 0; +} diff --git a/index.html b/index.html index 3cb6744e..700ccfbf 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ + @@ -148,6 +149,10 @@ +
+

Switch to

+ +
@@ -162,6 +167,7 @@ + \ No newline at end of file diff --git a/js/switch-deploy.js b/js/switch-deploy.js new file mode 100644 index 00000000..445ae82b --- /dev/null +++ b/js/switch-deploy.js @@ -0,0 +1,22 @@ +const button = document.getElementById("switch-deploy-button"); + +button.addEventListener("click", () => { + const currentUrl = window.location.href; + + if (currentUrl.includes("/main")) { + window.location.href = currentUrl.replace("/main", "/release"); + } else if (currentUrl.includes("/release")) { + window.location.href = currentUrl.replace("/release", "/main"); + } else { + window.location.href = "https://key4hep.github.io/eede/release/index.html"; + } +}); + +const url = window.location.href; +if (url.includes("/main")) { + button.innerText = "Release"; +} else if (url.includes("/release")) { + button.innerText = "Main"; +} else { + button.innerText = "Release"; +} From fa4fbbd30fd9eebf8ab50186c732d1c7a21bf2b2 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 10:19:02 -0500 Subject: [PATCH 02/21] show switcher on home page instead of modal --- css/switch-deploy.css | 11 ++++++++++- index.html | 9 +++++---- js/main.js | 7 +++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/css/switch-deploy.css b/css/switch-deploy.css index 5f496930..dea8a671 100644 --- a/css/switch-deploy.css +++ b/css/switch-deploy.css @@ -1,7 +1,15 @@ #switch-deploy { + position: fixed; + left: 10px; + bottom: 10px; display: flex; flex-direction: row; align-items: center; + z-index: 1; + background-color: #fff; + padding: 5px; + border-radius: 5px; + border: 1px solid #000; } #switch-deploy-button { @@ -16,8 +24,9 @@ #switch-deploy-button:hover { background-color: #c5c5c5; + cursor: pointer; } #switch-deploy-text { - margin: 0 10px 0 0; + margin: 0 7px 0 0; } diff --git a/index.html b/index.html index 700ccfbf..48d7fdab 100644 --- a/index.html +++ b/index.html @@ -149,10 +149,6 @@
-
-

Switch to

- -
@@ -160,6 +156,11 @@
+
+

Switch to

+ +
+ diff --git a/js/main.js b/js/main.js index 192fcd09..176a5e2f 100644 --- a/js/main.js +++ b/js/main.js @@ -41,6 +41,12 @@ function showViewsMenu() { viewsMenu.style.display = "flex"; } +function hideDeploySwitch() { + const deploySwitch = document.getElementById("switch-deploy"); + + deploySwitch.style.display = "none"; +} + document.getElementById("input-file").addEventListener("change", (event) => { for (const file of event.target.files) { if (!file.name.endsWith("edm4hep.json")) { @@ -133,6 +139,7 @@ document showEventSwitcher(); showViewsMenu(); renderEvent(eventNum); + hideDeploySwitch(); }); export { canvas, ctx, jsonData, selectedObjectTypes }; From d2b072dda5f70f77d7e633241a04fe8f201896d6 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 11:29:28 -0500 Subject: [PATCH 03/21] create helper function to draw object header --- js/lib/graphic-primitives.js | 11 +++++++++++ js/types/objects.js | 2 -- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 2e3438f5..64119846 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -107,3 +107,14 @@ export function drawStraightLink(ctx, link) { ctx.stroke(); ctx.restore(); } + +export function drawObjectHeader(ctx, object, y) { + ctx.save(); + ctx.font = "16px sans-serif"; + ctx.fontWeight = "bold"; + const text = object.constructor.name; + const boxCenterX = object.x + object.width / 2; + const x = boxCenterX - ctx.measureText(text).width / 2; + ctx.fillText(text, x, y); + ctx.restore(); +} diff --git a/js/types/objects.js b/js/types/objects.js index 5d526164..57ce68f9 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -44,9 +44,7 @@ class EDMObject { export class MCParticle extends EDMObject { constructor() { super(); - this.row = -1; - this.texImg = null; } From 824c6ddcb3dfd59e71dcdd6df7a41a4d911b5e6c Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 11:59:27 -0500 Subject: [PATCH 04/21] write object name on top --- js/lib/graphic-primitives.js | 21 +++++-- js/types/objects.js | 112 ++++++++++++++--------------------- 2 files changed, 62 insertions(+), 71 deletions(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 64119846..f8426ad5 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -108,13 +108,26 @@ export function drawStraightLink(ctx, link) { ctx.restore(); } -export function drawObjectHeader(ctx, object, y) { +export function drawObjectHeader(ctx, object) { ctx.save(); - ctx.font = "16px sans-serif"; - ctx.fontWeight = "bold"; + ctx.font = "bold 16px sans-serif"; const text = object.constructor.name; const boxCenterX = object.x + object.width / 2; + const textWidth = ctx.measureText(text).width; const x = boxCenterX - ctx.measureText(text).width / 2; - ctx.fillText(text, x, y); + const topY = object.y + 20; + + if (textWidth > object.width) { + const lines = text.split(/(?=[A-Z])/); + for (const [i, lineText] of lines.entries()) { + ctx.fillText( + lineText, + boxCenterX - ctx.measureText(lineText).width / 2, + topY + i * 20 + ); + } + } else { + ctx.fillText(text, x, topY); + } ctx.restore(); } diff --git a/js/types/objects.js b/js/types/objects.js index 57ce68f9..483cac06 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -2,11 +2,14 @@ import { drawTex, drawRoundedRect, drawTextLines, + drawObjectHeader, } from "../lib/graphic-primitives.js"; import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; +const TOP_MARGIN = 40; + class EDMObject { constructor() { this.x = NaN; @@ -14,13 +17,24 @@ class EDMObject { this.index = NaN; this.collectionId = NaN; this.width = 120; - this.height = 240; + this.height = 260; this.lineColor = "black"; this.lineWidth = 2; this.color = "white"; } - draw(ctx) {} + draw(ctx) { + drawRoundedRect( + ctx, + this.x, + this.y, + this.width, + this.height, + this.color, + this.radius + ); + drawObjectHeader(ctx, this); + } isHere(mouseX, mouseY) { return ( @@ -46,6 +60,8 @@ export class MCParticle extends EDMObject { super(); this.row = -1; this.texImg = null; + this.color = "#dff6ff"; + this.radius = 15; } updateTexImg(text) { @@ -63,15 +79,7 @@ export class MCParticle extends EDMObject { draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#dff6ff", - 15 - ); + super.draw(ctx); if (this.texImg.complete) { drawTex( @@ -93,7 +101,7 @@ export class MCParticle extends EDMObject { }; } - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const topLines = []; topLines.push("ID: " + this.index); topLines.push("Gen. stat.: " + this.generatorStatus); @@ -198,23 +206,17 @@ class ReconstructedParticle extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 190; + this.color = "#fbffdf"; + this.radius = 30; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#fbffdf", - 30 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + 1.5 * TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -243,23 +245,17 @@ class Cluster extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 170; + this.color = "#ffe8df"; + this.radius = 20; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#ffe8df", - 20 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); lines.push("type: " + this.type); @@ -282,23 +278,17 @@ class Track extends EDMObject { constructor() { super(); this.width = 140; - this.height = 180; + this.height = 150; + this.color = "#fff6df"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#fff6df", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -322,23 +312,17 @@ class ParticleID extends EDMObject { constructor() { super(); this.width = 140; - this.height = 120; + this.height = 140; + this.color = "#c9edf7"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#c9edf7", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); @@ -357,23 +341,17 @@ class Vertex extends EDMObject { constructor() { super(); this.width = 140; - this.height = 140; + this.height = 150; + this.color = "#f5d3ef"; + this.radius = 25; } draw(ctx) { const boxCenterX = this.x + this.width / 2; - drawRoundedRect( - ctx, - this.x, - this.y, - this.width, - this.height, - "#f5d3ef", - 25 - ); + super.draw(ctx); - const topY = this.y + 20; + const topY = this.y + TOP_MARGIN; const lines = []; lines.push("ID: " + this.index); From abff17c159f69d1957cbfa46136dda68b9eb65e5 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 12:06:41 -0500 Subject: [PATCH 05/21] adjust test according to new mcparticle height --- test/objects.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/objects.test.js b/test/objects.test.js index 1c483342..31cdee92 100644 --- a/test/objects.test.js +++ b/test/objects.test.js @@ -108,7 +108,7 @@ describe("Link", () => { secondObject.x = 140; secondObject.y = 250; - expect(link.isVisible(0, 0, 250, 250)).toBe(true); + expect(link.isVisible(0, 0, 300, 300)).toBe(true); }); it("should return false if the link is not visible", () => { From fb30b713780011c36be9d2241eb5ee403df6777c Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 12:13:07 -0500 Subject: [PATCH 06/21] load collection name into object --- js/types/load.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/js/types/load.js b/js/types/load.js index b9ee63d7..201602e4 100644 --- a/js/types/load.js +++ b/js/types/load.js @@ -21,13 +21,19 @@ function loadEmptyRelations(object, relations) { } } -export function loadPlainObject(collection, datatype, collectionId) { +export function loadPlainObject( + collection, + datatype, + collectionId, + collectionName +) { const objects = []; for (const [index, particle] of collection.entries()) { const newObject = new objectTypes[datatype](); newObject.index = index; newObject.collectionId = collectionId; + newObject.collectionName = collectionName; loadMembers(newObject, particle, datatypes[datatype].members); loadEmptyRelations(newObject, datatypes[datatype]); @@ -66,7 +72,7 @@ export function loadObjects(jsonData, event, objectsToLoad) { }); for (const datatype of datatypesToLoad) { - Object.values(eventData).forEach((element) => { + Object.entries(eventData).forEach(([key, element]) => { const collectionName = `${datatype}Collection`; if (element.collType === collectionName) { const collection = element.collection; @@ -74,7 +80,8 @@ export function loadObjects(jsonData, event, objectsToLoad) { const objectCollection = loadPlainObject( collection, datatype, - collectionId + collectionId, + key ); objects.datatypes[datatype].collection.push(...objectCollection); } From ec335b9f632101b6a2def98ad84ea6f8339be59a Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 12:21:18 -0500 Subject: [PATCH 07/21] detect when mouse is over an object --- js/event-number.js | 1 + js/events.js | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/js/event-number.js b/js/event-number.js index 83b773ad..abfac08e 100644 --- a/js/event-number.js +++ b/js/event-number.js @@ -43,6 +43,7 @@ function loadSelectedEvent() { } else { copyObject(eventCollection[currentEvent.event], currentObjects); } + console.log(currentObjects); } export function renderEvent(eventNumber) { diff --git a/js/events.js b/js/events.js index 9c6a0043..d0ff6be9 100644 --- a/js/events.js +++ b/js/events.js @@ -44,14 +44,22 @@ const mouseOut = function (event, dragTools) { }; const mouseMove = function (event, visibleObjects, dragTools) { - if (!dragTools.isDragging) { - return; - } - const boundigClientRect = canvas.getBoundingClientRect(); const mouseX = parseInt(event.clientX - boundigClientRect.x); const mouseY = parseInt(event.clientY - boundigClientRect.y); + for (const { collection } of Object.values(visibleObjects.datatypes)) { + for (const object of collection) { + if (object.isHere(mouseX, mouseY)) { + object.showObjectTip(); + } + } + } + + if (!dragTools.isDragging) { + return; + } + const dx = mouseX - dragTools.prevMouseX; const dy = mouseY - dragTools.prevMouseY; From 1de96bee18853a96ba359136ea25f9f976b36607 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 14:57:11 -0500 Subject: [PATCH 08/21] show collection name from object when hovered --- js/events.js | 22 +++++++++++++++++----- js/lib/graphic-primitives.js | 10 ++++++++++ js/types/objects.js | 5 +++++ 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/js/events.js b/js/events.js index d0ff6be9..51a1f117 100644 --- a/js/events.js +++ b/js/events.js @@ -1,4 +1,4 @@ -import { canvas } from "./main.js"; +import { canvas, ctx } from "./main.js"; import { drawAll, drawVisible } from "./draw.js"; const mouseDown = function (event, visibleObjects, dragTools) { @@ -48,11 +48,23 @@ const mouseMove = function (event, visibleObjects, dragTools) { const mouseX = parseInt(event.clientX - boundigClientRect.x); const mouseY = parseInt(event.clientY - boundigClientRect.y); - for (const { collection } of Object.values(visibleObjects.datatypes)) { - for (const object of collection) { - if (object.isHere(mouseX, mouseY)) { - object.showObjectTip(); + const allObjects = Object.values(visibleObjects.datatypes) + .map((datatype) => datatype.collection) + .flat(); + + for (const object of allObjects) { + if (object.isHere(mouseX, mouseY)) { + if (dragTools.hoveredObject !== object) { + dragTools.hoveredObject = object; + drawVisible(visibleObjects); + setTimeout(() => { + object.showObjectTip(ctx); + }, 200); + setTimeout(() => { + drawVisible(visibleObjects); + }, 2000); } + break; } } diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index f8426ad5..2defa72b 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -131,3 +131,13 @@ export function drawObjectHeader(ctx, object) { } ctx.restore(); } + +export function drawObjectInfoTip(ctx, object) { + ctx.save(); + const collectionName = "Collection: " + object.collectionName; + const x = object.x + object.width / 2; + const y = object.y - 10; + ctx.font = "bold 12px sans-serif"; + ctx.fillText(collectionName, x, y); + ctx.restore(); +} diff --git a/js/types/objects.js b/js/types/objects.js index 483cac06..9875884b 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -3,6 +3,7 @@ import { drawRoundedRect, drawTextLines, drawObjectHeader, + drawObjectInfoTip, } from "../lib/graphic-primitives.js"; import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; @@ -53,6 +54,10 @@ class EDMObject { y < this.y + this.height ); } + + showObjectTip(ctx) { + drawObjectInfoTip(ctx, this); + } } export class MCParticle extends EDMObject { From 3c9312853176caccb3f0867bb18a1912f8386eeb Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 15:05:12 -0500 Subject: [PATCH 09/21] remove log --- js/event-number.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/event-number.js b/js/event-number.js index abfac08e..83b773ad 100644 --- a/js/event-number.js +++ b/js/event-number.js @@ -43,7 +43,6 @@ function loadSelectedEvent() { } else { copyObject(eventCollection[currentEvent.event], currentObjects); } - console.log(currentObjects); } export function renderEvent(eventNumber) { From db4f5a38d9fae6fc714f4f487f7b2af69ade2785 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 15:13:27 -0500 Subject: [PATCH 10/21] improve hover effect --- js/events.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/js/events.js b/js/events.js index 51a1f117..0c300be8 100644 --- a/js/events.js +++ b/js/events.js @@ -52,22 +52,24 @@ const mouseMove = function (event, visibleObjects, dragTools) { .map((datatype) => datatype.collection) .flat(); + let someHovered = false; for (const object of allObjects) { if (object.isHere(mouseX, mouseY)) { if (dragTools.hoveredObject !== object) { dragTools.hoveredObject = object; drawVisible(visibleObjects); - setTimeout(() => { - object.showObjectTip(ctx); - }, 200); - setTimeout(() => { - drawVisible(visibleObjects); - }, 2000); + object.showObjectTip(ctx); } + someHovered = true; break; } } + if (!someHovered) { + dragTools.hoveredObject = null; + drawVisible(visibleObjects); + } + if (!dragTools.isDragging) { return; } From 3073c29bbfef211084fdbf97d899dd61047b4720 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 15:15:38 -0500 Subject: [PATCH 11/21] move further left text --- js/lib/graphic-primitives.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 2defa72b..5335f754 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -135,7 +135,7 @@ export function drawObjectHeader(ctx, object) { export function drawObjectInfoTip(ctx, object) { ctx.save(); const collectionName = "Collection: " + object.collectionName; - const x = object.x + object.width / 2; + const x = object.x; const y = object.y - 10; ctx.font = "bold 12px sans-serif"; ctx.fillText(collectionName, x, y); From 3c459903f7905cb14605cafd95b50ed0528f08d9 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 13 Jul 2024 18:56:06 -0500 Subject: [PATCH 12/21] change cursor on mouse over --- js/events.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/events.js b/js/events.js index 0c300be8..8eb2e169 100644 --- a/js/events.js +++ b/js/events.js @@ -61,11 +61,13 @@ const mouseMove = function (event, visibleObjects, dragTools) { object.showObjectTip(ctx); } someHovered = true; + document.body.style.cursor = "pointer"; break; } } if (!someHovered) { + document.body.style.cursor = "default"; dragTools.hoveredObject = null; drawVisible(visibleObjects); } From 92cc302c66e0bd78c518488698bd6fe1afaf1aaa Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 13 Jul 2024 21:08:24 -0500 Subject: [PATCH 13/21] display simulator status for MCParticle on mouse over together with collection --- js/lib/graphic-primitives.js | 15 ++++++++++----- js/menu/filter/filter.js | 2 +- js/types/objects.js | 23 ++++++++++++++++++++++- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/js/lib/graphic-primitives.js b/js/lib/graphic-primitives.js index 5335f754..a09cf63f 100644 --- a/js/lib/graphic-primitives.js +++ b/js/lib/graphic-primitives.js @@ -132,12 +132,17 @@ export function drawObjectHeader(ctx, object) { ctx.restore(); } -export function drawObjectInfoTip(ctx, object) { +export function drawObjectInfoTip(ctx, x, y, ...args) { ctx.save(); - const collectionName = "Collection: " + object.collectionName; - const x = object.x; - const y = object.y - 10; ctx.font = "bold 12px sans-serif"; - ctx.fillText(collectionName, x, y); + const lines = args.length; + const height = 20 * lines; + const maxWidth = Math.max(...args.map((arg) => ctx.measureText(arg).width)); + ctx.fillStyle = "rgba(225, 225, 225, 1)"; + ctx.fillRect(x, y, maxWidth + 10, height + 10); + ctx.fillStyle = "black"; + for (const [i, arg] of args.entries()) { + ctx.fillText(arg, x + 5, y + 20 + i * 20); + } ctx.restore(); } diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js index 60724f6a..7938140e 100644 --- a/js/menu/filter/filter.js +++ b/js/menu/filter/filter.js @@ -60,7 +60,7 @@ let parametersRange = units.sort((a, b) => parametersRange = parametersRange.map((parameter) => new Range(parameter)); -const SimStatusBitFieldDisplayValues = { +export const SimStatusBitFieldDisplayValues = { 23: "Overlay", 24: "Stopped", 25: "LeftDetector", diff --git a/js/types/objects.js b/js/types/objects.js index 9875884b..1df1ea2f 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -8,6 +8,7 @@ import { import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; +import { SimStatusBitFieldDisplayValues } from "../menu/filter/filter.js"; const TOP_MARGIN = 40; @@ -56,7 +57,10 @@ class EDMObject { } showObjectTip(ctx) { - drawObjectInfoTip(ctx, this); + const x = this.x; + const y = this.y - 10; + const collectionName = "Collection: " + this.collectionName; + drawObjectInfoTip(ctx, x, y, collectionName); } } @@ -125,6 +129,23 @@ export class MCParticle extends EDMObject { drawTextLines(ctx, bottomLines, boxCenterX, bottomY, 22); } + showObjectTip(ctx) { + const x = this.x; + const y = this.y - 10; + const collectionName = "Collection: " + this.collectionName; + const displaySimulatorStatus = + SimStatusBitFieldDisplayValues[this.simulatorStatus]; + let simulatorStatus = ""; + + if (displaySimulatorStatus) { + simulatorStatus = "Simulator status: " + displaySimulatorStatus; + } else { + simulatorStatus = "Simulator status: " + this.simulatorStatus; + } + + drawObjectInfoTip(ctx, x, y, collectionName, simulatorStatus); + } + static setup(mcCollection) { for (const mcParticle of mcCollection) { const parentLength = mcParticle.oneToManyRelations["parents"].length; From 1fcfeabbc79c664ea3497fb4ab7170bb79c9997f Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Sat, 13 Jul 2024 21:23:22 -0500 Subject: [PATCH 14/21] move mappings from SimStatus into new file to fix tests --- js/lib/getName.js | 2 +- js/menu/filter/filter.js | 12 +----------- js/types/objects.js | 2 +- {data => mappings}/particles.js | 0 mappings/sim-status.js | 10 ++++++++++ 5 files changed, 13 insertions(+), 13 deletions(-) rename {data => mappings}/particles.js (100%) create mode 100644 mappings/sim-status.js diff --git a/js/lib/getName.js b/js/lib/getName.js index edfbc1f5..599fb792 100644 --- a/js/lib/getName.js +++ b/js/lib/getName.js @@ -1,4 +1,4 @@ -import { mappings } from "../../data/particles.js"; +import { mappings } from "../../mappings/particles.js"; export function getName(pdg) { const particle = mappings[pdg]; diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js index 7938140e..abcc5807 100644 --- a/js/menu/filter/filter.js +++ b/js/menu/filter/filter.js @@ -5,6 +5,7 @@ import { reconnect } from "./reconnect.js"; import { getVisible } from "../../events.js"; import { units } from "../../types/units.js"; import { copyObject } from "../../lib/copy.js"; +import { SimStatusBitFieldDisplayValues } from "../../../mappings/sim-status.js"; const filterButton = document.getElementById("filter-button"); const openFilter = document.getElementById("open-filter"); @@ -60,17 +61,6 @@ let parametersRange = units.sort((a, b) => parametersRange = parametersRange.map((parameter) => new Range(parameter)); -export const SimStatusBitFieldDisplayValues = { - 23: "Overlay", - 24: "Stopped", - 25: "LeftDetector", - 26: "DecayedInCalorimeter", - 27: "DecayedInTracker", - 28: "VertexIsNotEndpointOfParent", - 29: "Backscatter", - 30: "CreatedInSimulation", -}; - const bits = new BitFieldBuilder( "simulatorStatus", "Simulation status", diff --git a/js/types/objects.js b/js/types/objects.js index 1df1ea2f..b9b7dc3b 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -8,7 +8,7 @@ import { import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; -import { SimStatusBitFieldDisplayValues } from "../menu/filter/filter.js"; +import { SimStatusBitFieldDisplayValues } from "../../mappings/sim-status.js"; const TOP_MARGIN = 40; diff --git a/data/particles.js b/mappings/particles.js similarity index 100% rename from data/particles.js rename to mappings/particles.js diff --git a/mappings/sim-status.js b/mappings/sim-status.js new file mode 100644 index 00000000..49727790 --- /dev/null +++ b/mappings/sim-status.js @@ -0,0 +1,10 @@ +export const SimStatusBitFieldDisplayValues = { + 23: "Overlay", + 24: "Stopped", + 25: "LeftDetector", + 26: "DecayedInCalorimeter", + 27: "DecayedInTracker", + 28: "VertexIsNotEndpointOfParent", + 29: "Backscatter", + 30: "CreatedInSimulation", +}; From c8ad0fdc2054c6f249cac58343f3735b01079f6a Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Thu, 11 Jul 2024 19:33:10 -0500 Subject: [PATCH 15/21] add switcher between release and main --- css/switch-deploy.css | 23 +++++++++++++++++++++++ index.html | 6 ++++++ js/switch-deploy.js | 22 ++++++++++++++++++++++ 3 files changed, 51 insertions(+) create mode 100644 css/switch-deploy.css create mode 100644 js/switch-deploy.js diff --git a/css/switch-deploy.css b/css/switch-deploy.css new file mode 100644 index 00000000..5f496930 --- /dev/null +++ b/css/switch-deploy.css @@ -0,0 +1,23 @@ +#switch-deploy { + display: flex; + flex-direction: row; + align-items: center; +} + +#switch-deploy-button { + cursor: pointer; + background-color: #fff; + border: 1px solid #000; + padding: 5px; + border-radius: 5px; + font-family: sans-serif; + font-size: 14px; +} + +#switch-deploy-button:hover { + background-color: #c5c5c5; +} + +#switch-deploy-text { + margin: 0 10px 0 0; +} diff --git a/index.html b/index.html index 3cb6744e..700ccfbf 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ + @@ -148,6 +149,10 @@ +
+

Switch to

+ +
@@ -162,6 +167,7 @@ + \ No newline at end of file diff --git a/js/switch-deploy.js b/js/switch-deploy.js new file mode 100644 index 00000000..445ae82b --- /dev/null +++ b/js/switch-deploy.js @@ -0,0 +1,22 @@ +const button = document.getElementById("switch-deploy-button"); + +button.addEventListener("click", () => { + const currentUrl = window.location.href; + + if (currentUrl.includes("/main")) { + window.location.href = currentUrl.replace("/main", "/release"); + } else if (currentUrl.includes("/release")) { + window.location.href = currentUrl.replace("/release", "/main"); + } else { + window.location.href = "https://key4hep.github.io/eede/release/index.html"; + } +}); + +const url = window.location.href; +if (url.includes("/main")) { + button.innerText = "Release"; +} else if (url.includes("/release")) { + button.innerText = "Main"; +} else { + button.innerText = "Release"; +} From a588bfdde27fc58b2cc545e142d596290d7b8f94 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Fri, 12 Jul 2024 10:19:02 -0500 Subject: [PATCH 16/21] show switcher on home page instead of modal --- css/switch-deploy.css | 11 ++++++++++- index.html | 9 +++++---- js/main.js | 7 +++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/css/switch-deploy.css b/css/switch-deploy.css index 5f496930..dea8a671 100644 --- a/css/switch-deploy.css +++ b/css/switch-deploy.css @@ -1,7 +1,15 @@ #switch-deploy { + position: fixed; + left: 10px; + bottom: 10px; display: flex; flex-direction: row; align-items: center; + z-index: 1; + background-color: #fff; + padding: 5px; + border-radius: 5px; + border: 1px solid #000; } #switch-deploy-button { @@ -16,8 +24,9 @@ #switch-deploy-button:hover { background-color: #c5c5c5; + cursor: pointer; } #switch-deploy-text { - margin: 0 10px 0 0; + margin: 0 7px 0 0; } diff --git a/index.html b/index.html index 700ccfbf..48d7fdab 100644 --- a/index.html +++ b/index.html @@ -149,10 +149,6 @@
-
-

Switch to

- -
@@ -160,6 +156,11 @@
+
+

Switch to

+ +
+ diff --git a/js/main.js b/js/main.js index e9ab8b74..2dd779e9 100644 --- a/js/main.js +++ b/js/main.js @@ -43,6 +43,12 @@ function showViewsMenu() { viewsMenu.style.display = "flex"; } +function hideDeploySwitch() { + const deploySwitch = document.getElementById("switch-deploy"); + + deploySwitch.style.display = "none"; +} + document.getElementById("input-file").addEventListener("change", (event) => { for (const file of event.target.files) { if (!file.name.endsWith("edm4hep.json")) { @@ -135,6 +141,7 @@ document showEventSwitcher(); showViewsMenu(); renderEvent(eventNum); + hideDeploySwitch(); }); export { canvas, ctx, jsonData, selectedObjectTypes }; From b9d7f732ec12000f21991dce6526436ddc193c82 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 17:10:38 -0500 Subject: [PATCH 17/21] simplify if statement --- js/switch-deploy.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/js/switch-deploy.js b/js/switch-deploy.js index 445ae82b..d69e70b3 100644 --- a/js/switch-deploy.js +++ b/js/switch-deploy.js @@ -3,9 +3,7 @@ const button = document.getElementById("switch-deploy-button"); button.addEventListener("click", () => { const currentUrl = window.location.href; - if (currentUrl.includes("/main")) { - window.location.href = currentUrl.replace("/main", "/release"); - } else if (currentUrl.includes("/release")) { + if (currentUrl.includes("/release")) { window.location.href = currentUrl.replace("/release", "/main"); } else { window.location.href = "https://key4hep.github.io/eede/release/index.html"; @@ -13,9 +11,7 @@ button.addEventListener("click", () => { }); const url = window.location.href; -if (url.includes("/main")) { - button.innerText = "Release"; -} else if (url.includes("/release")) { +if (url.includes("/release")) { button.innerText = "Main"; } else { button.innerText = "Release"; From 5f881c46eccb0bc244f0af205b4e60aa0b0738a1 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 17:12:31 -0500 Subject: [PATCH 18/21] rename main to develop --- js/switch-deploy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/switch-deploy.js b/js/switch-deploy.js index d69e70b3..24fb9009 100644 --- a/js/switch-deploy.js +++ b/js/switch-deploy.js @@ -12,7 +12,7 @@ button.addEventListener("click", () => { const url = window.location.href; if (url.includes("/release")) { - button.innerText = "Main"; + button.innerText = "Develop"; } else { button.innerText = "Release"; } From 28b2d709bcd518aec0a60a702e29e31df1d54ba4 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Mon, 15 Jul 2024 17:45:39 -0500 Subject: [PATCH 19/21] parse bitfield according to @tmadlener bitwise operations --- js/types/objects.js | 28 ++++++++++++++++------------ mappings/sim-status.js | 24 ++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 12 deletions(-) diff --git a/js/types/objects.js b/js/types/objects.js index b9b7dc3b..4f9c90ff 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -8,7 +8,7 @@ import { import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; -import { SimStatusBitFieldDisplayValues } from "../../mappings/sim-status.js"; +import { getSimStatusDisplayValuesFromBit } from "../../mappings/sim-status.js"; const TOP_MARGIN = 40; @@ -114,7 +114,17 @@ export class MCParticle extends EDMObject { const topLines = []; topLines.push("ID: " + this.index); topLines.push("Gen. stat.: " + this.generatorStatus); - topLines.push("Sim. stat.: " + this.simulatorStatus); + const simulatorStatus = getSimStatusDisplayValuesFromBit( + this.simulatorStatus + ); + const simulatorStatusFirstLetter = simulatorStatus + .map((s) => s[0]) + .join(", "); + const simulatorStatusString = + simulatorStatusFirstLetter !== "" + ? simulatorStatusFirstLetter + : this.simulatorStatus; + topLines.push("Sim. stat.: " + simulatorStatusString); const bottomY = this.y + this.height * 0.6; const bottomLines = []; @@ -133,17 +143,11 @@ export class MCParticle extends EDMObject { const x = this.x; const y = this.y - 10; const collectionName = "Collection: " + this.collectionName; - const displaySimulatorStatus = - SimStatusBitFieldDisplayValues[this.simulatorStatus]; - let simulatorStatus = ""; - - if (displaySimulatorStatus) { - simulatorStatus = "Simulator status: " + displaySimulatorStatus; - } else { - simulatorStatus = "Simulator status: " + this.simulatorStatus; - } + const simulatorStatus = getSimStatusDisplayValuesFromBit( + this.simulatorStatus + ); - drawObjectInfoTip(ctx, x, y, collectionName, simulatorStatus); + drawObjectInfoTip(ctx, x, y, collectionName, ...simulatorStatus); } static setup(mcCollection) { diff --git a/mappings/sim-status.js b/mappings/sim-status.js index 49727790..db438605 100644 --- a/mappings/sim-status.js +++ b/mappings/sim-status.js @@ -8,3 +8,27 @@ export const SimStatusBitFieldDisplayValues = { 29: "Backscatter", 30: "CreatedInSimulation", }; + +export function parseBits(bit) { + const bits = []; + + for (let i = 0; i < 32; i++) { + if (bit & (1 << i)) { + bits.push(i); + } + } + + return bits; +} + +export function getSimStatusDisplayValues(bits) { + return bits.map((bit) => + SimStatusBitFieldDisplayValues[bit] !== undefined + ? SimStatusBitFieldDisplayValues[bit] + : `Bit ${bit}` + ); +} + +export function getSimStatusDisplayValuesFromBit(bit) { + return getSimStatusDisplayValues(parseBits(bit)); +} From 598f8ceec4203dc07a084ae2110b5b20d87f2f95 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Tue, 16 Jul 2024 15:41:52 -0500 Subject: [PATCH 20/21] remove commas to save space --- js/types/objects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/types/objects.js b/js/types/objects.js index 4f9c90ff..6370034d 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -119,7 +119,7 @@ export class MCParticle extends EDMObject { ); const simulatorStatusFirstLetter = simulatorStatus .map((s) => s[0]) - .join(", "); + .join(""); const simulatorStatusString = simulatorStatusFirstLetter !== "" ? simulatorStatusFirstLetter From 136f20adf45968c714ce62297387cf0da1b16ea6 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad Date: Wed, 17 Jul 2024 09:46:23 -0500 Subject: [PATCH 21/21] add more vertical space for collection type title --- js/types/objects.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/types/objects.js b/js/types/objects.js index 483cac06..e52006d9 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -8,7 +8,7 @@ import { getName } from "../lib/getName.js"; import { linkTypes } from "./links.js"; import { parseCharge } from "../lib/parseCharge.js"; -const TOP_MARGIN = 40; +const TOP_MARGIN = 45; class EDMObject { constructor() { @@ -62,6 +62,7 @@ export class MCParticle extends EDMObject { this.texImg = null; this.color = "#dff6ff"; this.radius = 15; + this.height = 270; } updateTexImg(text) { @@ -85,7 +86,7 @@ export class MCParticle extends EDMObject { drawTex( ctx, boxCenterX, - this.y + this.height * 0.4, + this.y + TOP_MARGIN + 80, this.texImg, this.width ); @@ -94,7 +95,7 @@ export class MCParticle extends EDMObject { drawTex( ctx, boxCenterX, - this.y + this.height * 0.4, + this.y + TOP_MARGIN + 80, this.texImg, this.width ); @@ -107,7 +108,7 @@ export class MCParticle extends EDMObject { topLines.push("Gen. stat.: " + this.generatorStatus); topLines.push("Sim. stat.: " + this.simulatorStatus); - const bottomY = this.y + this.height * 0.6; + const bottomY = this.y + this.height * 0.65; const bottomLines = []; bottomLines.push("p = " + this.momentum + " GeV"); bottomLines.push("d = " + this.vertex + " mm");