diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
index ccd079f51..55f8c81dc 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
@@ -4,10 +4,11 @@
background: url('../../../assets/backgrounds/create-visualization-page-background.png') no-repeat;
background-position: center;
background-size: cover;
+ position: relative;
+ top: 4.5rem;
hra-nav-header {
border-bottom: 1px solid var(--sys-outline);
- height: 5rem;
}
::ng-deep .app-logo .app-description {
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
index 77f2a3974..258d18603 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
@@ -26,7 +26,7 @@ import { BreadcrumbsComponent } from '@hra-ui/design-system/breadcrumbs';
import { ButtonModule } from '@hra-ui/design-system/button';
import { ToggleButtonSizeDirective } from '@hra-ui/design-system/button-toggle';
import { FooterComponent } from '@hra-ui/design-system/footer';
-import { NavHeaderComponent } from '@hra-ui/design-system/nav-header';
+import { CardData, NavHeaderComponent } from '@hra-ui/design-system/nav-header';
import { SelectSizeDirective } from '@hra-ui/design-system/select';
import { StepIndicatorComponent } from '@hra-ui/design-system/step-indicator';
import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
@@ -34,11 +34,105 @@ import { ParseError } from 'papaparse';
import { MarkEmptyFormControlDirective } from '../../components/empty-form-control/empty-form-control.directive';
import { FileLoadError, FileUploadComponent } from '../../components/file-upload/file-upload.component';
-import { HeaderComponent } from '../../components/header/header.component';
import { VisualizationDataService } from '../../services/visualization-data-service/visualization-data.service';
import { validateInteger } from '../../shared/form-validators/is-integer';
import { OrganEntry } from '../../shared/resolvers/organs/organs.resolver';
+/** HuBMAP cards data */
+export const HUBMAP_CARDS_DATA: CardData[] = [
+ {
+ category: 'About',
+ cards: [
+ {
+ name: 'HuBMAP Consortium',
+ icon: 'assets/logo/hubmap.svg',
+ title: 'HuBMAP Consortium',
+ description:
+ 'HuBMAP all access: Learn about us, our policies, data, and tools. Explore our publications and how to work with us.',
+ link: 'https://hubmapconsortium.org/',
+ },
+ ],
+ },
+ {
+ category: 'Data',
+ cards: [
+ {
+ name: 'HubMAP Data Portal',
+ icon: 'assets/logo/data_portal.svg',
+ title: 'HuBMAP Data Portal',
+ description:
+ 'Explore, visualize and download consortium-generated spatial and single cell data for the human body.',
+ link: 'https://portal.hubmapconsortium.org/',
+ },
+ {
+ name: 'Data Portal Workspaces',
+ icon: 'assets/logo/data_portal.svg',
+ title: 'Data Portal Workspaces',
+ description:
+ 'Access HuBMAP data in a lightweight exploration platform and perform analyses directly within the portal.',
+ link: 'https://portal.hubmapconsortium.org/workspaces',
+ },
+ ],
+ },
+ {
+ category: 'Atlas',
+ cards: [
+ {
+ name: 'Human Reference Atlas',
+ icon: 'assets/logo/hra_small.svg',
+ title: 'Human Reference Atlas',
+ description:
+ 'Use the HRA Portal to access atlas data, explore atlas functionality, and contribute to the Human Reference Atlas.',
+ link: 'https://humanatlas.io/',
+ },
+ {
+ name: 'Exploration User Interface',
+ icon: 'assets/logo/eui.svg',
+ title: 'Exploration User Interface',
+ description:
+ 'Explore and validate spatially registered single-cell datasets in three-dimensions across organs.',
+ link: 'https://apps.humanatlas.io/eui/',
+ },
+ {
+ name: 'ASCT+B Reporter',
+ icon: 'assets/logo/asctb-reporter.svg',
+ title: 'ASCT+B Reporter',
+ description:
+ 'Explore and compare ASCT+B tables and construct validated panels for multiplexed antibody-based imaging (OMAPs) tables.',
+ link: 'https://hubmapconsortium.github.io/ccf-asct-reporter/',
+ },
+ ],
+ },
+ {
+ category: 'Analytics Tools',
+ cards: [
+ {
+ name: 'Azimuth',
+ icon: 'assets/logo/azimuth.svg',
+ title: 'Azimuth',
+ description:
+ 'Azimuth uses a reference dataset to process, analyze, and interpret single-cell RNA-seq or ATAC-seq experiments.',
+ link: 'https://azimuth.hubmapconsortium.org/',
+ },
+ {
+ name: 'FUSION',
+ icon: 'assets/logo/fusion.svg',
+ title: 'FUSION',
+ description: 'Functional Unit State Identification and Navigation with WSI.',
+ link: 'http://fusion.hubmapconsortium.org/?utm_source=hubmap',
+ },
+ {
+ name: 'Antibody Validation Reports',
+ icon: 'assets/logo/antibody-validation-reports.svg',
+ title: 'Antibody Validation Reports',
+ description:
+ 'Provide antibody details for multiplex imaging assays and capture data requested by journals for manuscript submission.',
+ link: 'https://avr.hubmapconsortium.org/',
+ },
+ ],
+ },
+];
+
/** Error when missing required columns in uploaded csv */
export interface MissingKeyError {
/** Error type */
@@ -78,7 +172,6 @@ function optionalValue
(): T | null {
ButtonModule,
FileUploadComponent,
FooterComponent,
- HeaderComponent,
MarkEmptyFormControlDirective,
NavHeaderComponent,
OverlayModule,
@@ -95,6 +188,9 @@ export class CreateVisualizationPageComponent {
/** Organ entries */
readonly organs = input.required();
+ /** Data for sidenav cards */
+ readonly sideNavData = HUBMAP_CARDS_DATA;
+
/** Node data upload component */
private readonly nodesFileUpload = viewChild.required('nodesFileUpload');
/** Color map upload component */
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
index ce6403f67..c69ed5ca9 100644
--- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
+++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
@@ -1,4 +1,10 @@
-
+