+
diff --git a/frontend/src/app/pages/data-models-page/guide-popup/guide-popup.component.ts b/frontend/src/app/pages/data-models-page/guide-popup/guide-popup.component.ts
new file mode 100644
index 0000000..01913b5
--- /dev/null
+++ b/frontend/src/app/pages/data-models-page/guide-popup/guide-popup.component.ts
@@ -0,0 +1,33 @@
+import {Component, OnInit} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {NgIf} from "@angular/common";
+
+@Component({
+ selector: 'app-guide-popup',
+ templateUrl: './guide-popup.component.html',
+ styleUrls: ['./guide-popup.component.css'],
+ imports: [
+ FormsModule,
+ NgIf
+ ],
+ standalone: true
+})
+export class GuidePopupComponent implements OnInit{
+ showPopup = true;
+ dontShowAgain = false;
+
+ closePopup() {
+ this.showPopup = false;
+
+ if (this.dontShowAgain) {
+ localStorage.setItem('hideGuidePopup', 'true');
+ }
+ }
+
+ ngOnInit() {
+ const hideGuidePopup = localStorage.getItem('hideGuidePopup');
+ if (hideGuidePopup === 'true') {
+ this.showPopup = false;
+ }
+ }
+}
diff --git a/frontend/src/app/pages/data-models-page/visualization/tidy-tree.ts b/frontend/src/app/pages/data-models-page/visualization/tidy-tree.ts
index f514103..b3e5105 100644
--- a/frontend/src/app/pages/data-models-page/visualization/tidy-tree.ts
+++ b/frontend/src/app/pages/data-models-page/visualization/tidy-tree.ts
@@ -70,9 +70,25 @@ export function createTidyTree(
const dynamicHeight = Math.max(baseHeight, x1 - x0 + dx * 2);
const dynamicWidth = y1 - y0 + dy * 2;
- const offsetX = Math.max(0, (baseWidth - dynamicWidth) / 3) - y0;
+ const offsetFactor = dynamicWidth / baseWidth; // Calculate a ratio based on size
+ const leftBias = Math.min(0.25, offsetFactor / 2); // Bias more for larger charts
+
+ const offsetX = (baseWidth - dynamicWidth) / 2 * (1 - leftBias) - y0;
+
+ // Ensure offset doesn't push too far left for large diagrams
+ const adjustedOffsetX = Math.max(offsetX, -y0) + 50;
+
+
+ console.log("offsetX", offsetX)
+
+ const paddingX = 10, paddingY = 10;
+ const verticalOffset = (2 * baseHeight - dynamicHeight)/ 2;
+ console.log(dynamicHeight)
+ console.log(baseHeight)
+
+ // Ensure the offset is non-negative (only for smaller diagrams)
+ const adjustedPaddingY = Math.max(paddingY, verticalOffset);
- const paddingX = 50, paddingY = 20;
const viewBoxWidth = dynamicWidth + paddingX * 2;
const viewBoxHeight = dynamicHeight + paddingY * 2;
@@ -83,7 +99,7 @@ export function createTidyTree(
.attr('style', 'max-width: 100%; height: auto; font: 10px sans-serif;');
const g = svg.append('g')
- .attr('transform', `translate(${offsetX}, ${paddingY})`);
+ .attr('transform', `translate(${adjustedOffsetX}, ${adjustedPaddingY})`);
// Render links
g.append('g')
@@ -122,7 +138,7 @@ export function createTidyTree(
const newAvailableDepths = calculateMaxDepth(d); // Calculate available depths for the new root
- if (newAvailableDepths <= 0) {
+ if (newAvailableDepths <= 1) {
console.log('Double-clicked node has no depth, breadcrumb unchanged.');
return; // If the node has no depth, do nothing and leave the breadcrumb unchanged
}
@@ -134,20 +150,20 @@ export function createTidyTree(
});
node.append('circle')
- .attr('filter', d => (d.depth === 0 ? null : (d.depth > 0 && calculateMaxDepth(d) > 0 ? 'url(#glow)' : null))) // No glow for root
+ .attr('filter', d => (d.depth === 0 ? null : (d.depth > 0 && calculateMaxDepth(d) > 1 ? 'url(#glow)' : null))) // No glow for root
.attr('title', d => `Name: ${d.data.name}\nDepth: ${d.depth}`)
- .attr('fill', d => (d.depth === 0 ? '#4caf50' : (d.depth > 0 && calculateMaxDepth(d) > 0 ? '#007acc' : '#555'))) // Root gets green color
- .attr('stroke', d => (d.depth === 0 ? '#2e7d32' : (d.depth > 0 && calculateMaxDepth(d) > 0 ? '#ffcc00' : null))) // Root gets dark green stroke
- .attr('r', d => (d.depth === 0 ? 8 : (d.depth > 0 && calculateMaxDepth(d) > 0 ? 5 : 2.5))); // Root has a larger radius
+ .attr('fill', d => (d.depth === 0 ? '#4caf50' : (d.depth > 0 && calculateMaxDepth(d) > 1 ? '#007acc' : '#555'))) // Root gets green color
+ .attr('stroke', d => (d.depth === 0 ? '#2e7d32' : (d.depth > 0 && calculateMaxDepth(d) > 1 ? '#ffcc00' : null))) // Root gets dark green stroke
+ .attr('r', d => (d.depth === 0 ? 8 : (d.depth > 0 && calculateMaxDepth(d) > 1 ? 5 : 2.5))); // Root has a larger radius
node.append('text')
.attr('dy', '0.31em')
.attr('x', d => (d.children ? -6 : 6))
.attr('text-anchor', d => (d.children ? 'end' : 'start'))
.text(d => d.data.name)
- .attr('stroke', d => (d.depth === 0 ? '#ffffff' : (d.depth > 0 && calculateMaxDepth(d) > 0 ? 'yellow' : 'white'))) // Root text gets white stroke
+ .attr('stroke', d => (d.depth === 0 ? '#ffffff' : (d.depth > 0 && calculateMaxDepth(d) > 1 ? 'yellow' : 'white'))) // Root text gets white stroke
.attr('paint-order', 'stroke')
- .style('font-size', d => (d.depth === 0 ? `${14}px` : (d.depth > 0 && calculateMaxDepth(d) > 0 ? `${12}px` : `${10}px`))) // Root has larger font size
+ .style('font-size', d => (d.depth === 0 ? `${14}px` : (d.depth > 0 && calculateMaxDepth(d) > 1 ? `${12}px` : `${10}px`))) // Root has larger font size
.style('font-weight', d => (d.depth === 0 ? 'bold' : 'normal')); // Bold font for root
if (svg.node() !== null) {
diff --git a/frontend/src/app/pages/data-models-page/visualization/visualization.component.css b/frontend/src/app/pages/data-models-page/visualization/visualization.component.css
index b2b1280..e2b6cca 100644
--- a/frontend/src/app/pages/data-models-page/visualization/visualization.component.css
+++ b/frontend/src/app/pages/data-models-page/visualization/visualization.component.css
@@ -7,7 +7,7 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow-x: auto;
overflow-y: auto;
- height: calc(100vh - 280px); /* Reduced height */
+ height: calc(100vh - 239px); /* Reduced height */
width: calc(87% - 30px);
display: inline-block;
vertical-align: top;
@@ -38,7 +38,6 @@
color: #555;
}
-
@media (max-width: 768px) {
#chart-container {
height: auto; /* Adjust height dynamically */
@@ -48,14 +47,3 @@
font-size: 12px;
}
}
-
-
-.disclaimer {
- margin-top: 5px; /* Reduce top margin of the disclaimer */
- padding: 8px; /* Reduce padding */
- background-color: #f9f9f9;
- border: 1px solid #ddd;
- border-radius: 5px;
- font-size: 14px;
- color: #333;
-}
diff --git a/frontend/src/app/pages/data-models-page/visualization/visualization.component.html b/frontend/src/app/pages/data-models-page/visualization/visualization.component.html
index 71aea1f..fa51321 100644
--- a/frontend/src/app/pages/data-models-page/visualization/visualization.component.html
+++ b/frontend/src/app/pages/data-models-page/visualization/visualization.component.html
@@ -1,11 +1,3 @@
-
+
+ Explore Brain Data Models
+ +
+
+
+Welcome! Here's a quick guide to using this tool:
+-
+
- + Yellow-highlighted nodes can be double-clicked to become the new root. + +
- Click any node to access detailed information about it. +
- Use the dropdowns above to select federations and data models. +
- Export data by clicking the green Export button. +
Explore and have fun!
+
- Note: All nodes can be clicked to access their information. Only nodes with the
-
- yellow effect
-
- can be double-clicked to become the new root. Additionally, the node must have a depth of at least 3 to be eligible as a root.
-
-
-
+
@if (isAdmin){
diff --git a/frontend/src/app/pages/federations-page/federation-card/federation-card.component.ts b/frontend/src/app/pages/federations-page/federation-card/federation-card.component.ts
index 1a5b824..9236e1d 100644
--- a/frontend/src/app/pages/federations-page/federation-card/federation-card.component.ts
+++ b/frontend/src/app/pages/federations-page/federation-card/federation-card.component.ts
@@ -24,6 +24,10 @@ export class FederationCardComponent {
this.visualizeDataModel.emit(this.federation.code);
}
+ navigateToFederation(url: string): void {
+ window.open(url, '_blank');
+ }
+
update() {
this.updateFederation.emit(this.federation.code);
}
diff --git a/frontend/src/app/pages/landing-page/landing-page.component.html b/frontend/src/app/pages/landing-page/landing-page.component.html
index e60ef44..7943ecf 100644
--- a/frontend/src/app/pages/landing-page/landing-page.component.html
+++ b/frontend/src/app/pages/landing-page/landing-page.component.html
@@ -2,32 +2,30 @@
-
-
-
+
- ![]()
-
+
-
- {{ federation.title }}
-- @if (federation.institutions != '0'){ - - Institutions: {{ federation.institutions }} | - - } - Data Records: - {{ federation.records | number }} -
-
+
+
+
+ ![]()
+
+
+
{{ federation.title }}
++ + Institutions: {{ federation.institutions }} | + + Data Records: {{ federation.records | number }} +
diff --git a/frontend/src/app/pages/landing-page/landing-page.component.ts b/frontend/src/app/pages/landing-page/landing-page.component.ts
index 9ae46e0..6a4d2bd 100644
--- a/frontend/src/app/pages/landing-page/landing-page.component.ts
+++ b/frontend/src/app/pages/landing-page/landing-page.component.ts
@@ -29,9 +29,11 @@ export class LandingPageComponent implements OnInit {
redirectToSignUp(): void {
window.open('https://www.ebrains.eu/page/sign-up', '_blank');
- alert('After completing registration, return to this page.');
}
+ navigateToFederation(url: string): void {
+ window.open(url, '_blank');
+ }
learnMore(): void {
this.router.navigate(['/about']);