diff --git a/css/filter.css b/css/filter.css index 3fb1a8e..37628f2 100644 --- a/css/filter.css +++ b/css/filter.css @@ -4,7 +4,7 @@ top: 10px; right: 10px; z-index: 1; - width: 300px; + width: 320px; max-height: 65vh; padding: 10px; background-color: #e1e1e1; diff --git a/js/draw/box.js b/js/draw/box.js index 01929b7..094917c 100644 --- a/js/draw/box.js +++ b/js/draw/box.js @@ -33,7 +33,7 @@ function createText( function createObjectModal(lines) { const text = createText(lines.join("\n"), { - fontFamily: "sans-serif", + fontFamily: ["Arial", "sans-serif"], fontSize: 14, fontWeight: "normal", align: "center", diff --git a/js/filters/collections/particleid.js b/js/filters/collections/particleid.js index 2b1aea8..f955a4a 100644 --- a/js/filters/collections/particleid.js +++ b/js/filters/collections/particleid.js @@ -38,6 +38,7 @@ function renderParticleIdFilters(viewObjects) { const checkbox = new CheckboxComponent("type", type, type, true); checkboxes.type.push(checkbox); typeCheckboxesContainer.appendChild(checkbox.render()); + checkbox.checked(true); }); typeContainer.appendChild(typeCheckboxesContainer); @@ -53,6 +54,7 @@ function renderParticleIdFilters(viewObjects) { const checkbox = new CheckboxComponent("PDG", pdg, pdg, true); checkboxes.pdg.push(checkbox); pdgCheckboxesContainer.appendChild(checkbox.render()); + checkbox.checked(true); }); pdgContainer.appendChild(pdgCheckboxesContainer); @@ -73,6 +75,7 @@ function renderParticleIdFilters(viewObjects) { ); checkboxes.algorithmType.push(checkbox); algorithmTypeCheckboxesContainer.appendChild(checkbox.render()); + checkbox.checked(true); }); algorithmTypeContainer.appendChild(algorithmTypeCheckboxesContainer); diff --git a/js/filters/filter.js b/js/filters/filter.js index 263fa5f..acf6eed 100644 --- a/js/filters/filter.js +++ b/js/filters/filter.js @@ -150,7 +150,7 @@ export function initFilters( return; } - reconnectFunction(viewCurrentObjects, ids); + reconnectFunction(viewCurrentObjects, ids, collections); await render(viewCurrentObjects); const { x, y } = filterScroll(); setScroll(x, y); @@ -158,7 +158,7 @@ export function initFilters( setRenderable(viewCurrentObjects); }; filters.reset = async () => { - restoreRelations(viewCurrentObjects); + restoreRelations(viewObjects); resetFiltersContent(); copyObject(viewObjects, viewCurrentObjects); await render(viewCurrentObjects); diff --git a/js/filters/reconnect/mixed.js b/js/filters/reconnect/mixed.js index 49a5432..a4be6eb 100644 --- a/js/filters/reconnect/mixed.js +++ b/js/filters/reconnect/mixed.js @@ -1,5 +1,10 @@ -export function reconnectMixedViews(viewCurrentObjects, ids) { +import { getRelationsFromCollections } from "../../lib/extract-relations.js"; + +export function reconnectMixedViews(viewCurrentObjects, ids, collections) { const idsToRemove = new Set(); + const idsToShow = new Set(); + + const relationsToCheck = getRelationsFromCollections(collections); for (const { collection, oneToMany, oneToOne } of Object.values( viewCurrentObjects.datatypes @@ -17,6 +22,10 @@ export function reconnectMixedViews(viewCurrentObjects, ids) { for (const [relationName, relations] of Object.entries( oneToManyRelations )) { + if (!relationsToCheck.has(relationName)) { + continue; + } + object.oneToManyRelations[relationName] = []; for (const relation of relations) { const { to } = relation; @@ -25,6 +34,8 @@ export function reconnectMixedViews(viewCurrentObjects, ids) { if (ids.has(toId)) { oneToMany[relationName].push(relation); object.oneToManyRelations[relationName].push(relation); + idsToShow.add(objectId); + idsToShow.add(toId); } else { idsToRemove.add(objectId); } @@ -34,12 +45,18 @@ export function reconnectMixedViews(viewCurrentObjects, ids) { for (const [relationName, relation] of Object.entries( oneToOneRelations )) { + if (!relationsToCheck.has(relationName)) { + continue; + } + const { to } = relation; const toId = `${to.index}-${to.collectionId}`; if (ids.has(toId)) { oneToOne[relationName].push(relation); object.oneToOneRelations[relationName] = relation; + idsToShow.add(objectId); + idsToShow.add(toId); } else { idsToRemove.add(objectId); } @@ -55,4 +72,12 @@ export function reconnectMixedViews(viewCurrentObjects, ids) { (object) => !idsToRemove.has(`${object.index}-${object.collectionId}`) ); } + + for (const [collectionName, { collection }] of Object.entries( + viewCurrentObjects.datatypes + )) { + viewCurrentObjects.datatypes[collectionName].collection = collection.filter( + (object) => idsToShow.has(`${object.index}-${object.collectionId}`) + ); + } } diff --git a/js/lib/extract-relations.js b/js/lib/extract-relations.js new file mode 100644 index 0000000..d83f872 --- /dev/null +++ b/js/lib/extract-relations.js @@ -0,0 +1,28 @@ +import { datatypes } from "../../output/datatypes.js"; + +export function getRelationsFromCollections(collections) { + const collectionsSet = new Set(collections); + const relationsFromCollection = new Set(); + + collections.forEach((collection) => { + const { oneToOneRelations, oneToManyRelations } = datatypes[collection]; + + if (oneToManyRelations) { + oneToManyRelations.forEach(({ type, name }) => { + if (collectionsSet.has(type) && type !== collection) { + relationsFromCollection.add(name); + } + }); + } + + if (oneToOneRelations) { + oneToOneRelations.forEach(({ type, name }) => { + if (collectionsSet.has(type) && type !== collection) { + relationsFromCollection.add(name); + } + }); + } + }); + + return relationsFromCollection; +} diff --git a/js/types/objects.js b/js/types/objects.js index a71de3f..0df40a8 100644 --- a/js/types/objects.js +++ b/js/types/objects.js @@ -224,8 +224,8 @@ export class MCParticle extends EDMObject { class ReconstructedParticle extends EDMObject { constructor() { super(); - this.width = 145; - this.height = 190; + this.width = 170; + this.height = 200; this.color = "#fbffdf"; this.radius = 30; this.titleName = "Reconstructed\nParticle"; @@ -256,8 +256,8 @@ class ReconstructedParticle extends EDMObject { class Cluster extends EDMObject { constructor() { super(); - this.width = 140; - this.height = 170; + this.width = 145; + this.height = 200; this.color = "#ffe8df"; this.radius = 20; this.titleName = "Cluster"; @@ -288,7 +288,7 @@ class Track extends EDMObject { constructor() { super(); this.width = 140; - this.height = 150; + this.height = 180; this.color = "#fff6df"; this.radius = 25; this.titleName = "Track"; @@ -348,8 +348,8 @@ class ParticleID extends EDMObject { class Vertex extends EDMObject { constructor() { super(); - this.width = 140; - this.height = 150; + this.width = 155; + this.height = 175; this.color = "#f5d3ef"; this.radius = 25; this.titleName = "Vertex"; diff --git a/js/views/templates/onewayview.js b/js/views/templates/onewayview.js index 3f749a6..5c0b486 100644 --- a/js/views/templates/onewayview.js +++ b/js/views/templates/onewayview.js @@ -1,3 +1,6 @@ +const topMargin = 50; +const horizontalGapPercentage = 0.5; + export function oneWayView(viewObjects, fromCollectionName, relationName) { const relations = viewObjects.datatypes[fromCollectionName].oneToOne[relationName]; @@ -11,8 +14,8 @@ export function oneWayView(viewObjects, fromCollectionName, relationName) { const fromWidth = fromCollection[0].width; const toWidth = toCollection[0].width; - const fromHorizontalGap = 0.3 * fromWidth; - const toHorizontalGap = 0.3 * toWidth; + const fromHorizontalGap = horizontalGapPercentage * fromWidth; + const toHorizontalGap = horizontalGapPercentage * toWidth; const gap = 2 * (fromWidth + toWidth); const totalWidth = gap + fromWidth + toWidth; @@ -38,10 +41,10 @@ export function oneWayView(viewObjects, fromCollectionName, relationName) { toCollection[i].x = toX; const space = height + verticalGap; - fromCollection[i].y = accHeight + space / 2 - fromHeight / 2; - toCollection[i].y = accHeight + space / 2 - toHeight / 2; + fromCollection[i].y = topMargin + accHeight + space / 2 - fromHeight / 2; + toCollection[i].y = topMargin + accHeight + space / 2 - toHeight / 2; accHeight += height + verticalGap; } - return [width, totalHeight]; + return [width, totalHeight + topMargin]; } diff --git a/js/views/templates/tree.js b/js/views/templates/tree.js index ad5553a..16275be 100644 --- a/js/views/templates/tree.js +++ b/js/views/templates/tree.js @@ -98,7 +98,7 @@ export function buildTree(collection, relationOfReference) { matrix.forEach((row, i) => { row.forEach((object, j) => { - const row = i + startingRow - 1; + const row = i + startingRow; const col = j; object.x = col * horizontalGap + col * boxWidth + horizontalGap; object.y = row * verticalGap + row * boxHeight + verticalGap;