Cde nav header updates (#778)

* Update app logos component

* Add sidenav to nav header and update landing page

* Add product logos to design system

* Update nav header with product logo DS component

* Rename App Logos to Nav Header Buttons

* Add software status indicator

* Updates to nav header components

* Small changes to nav header styles

* Adjust header styling

* Remove duplication

* Software status indicator updates

* Updates to sidenav demo

* Sidenav updates

* Tweaks

* Testing and documentation

* Fix testing

apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html

@@ -1,8 +1,9 @@
 <hra-nav-header
   title="Cell Distance Explorer"
-  icon="assets/logo/cde_logo.svg"
+  app="cde"
   link="https://apps.humanatlas.io/cde/"
-  description="Beta"
+  variant="basic"
+  [navigationCategories]="sideNavData"
 ></hra-nav-header>
 <form class="content" [formGroup]="visualizationForm" (ngSubmit)="submit()">
   <div class="page-nav">

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 {

apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts

@@ -26,19 +26,113 @@ 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';
 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>(): T | null {
     ButtonModule,
     FileUploadComponent,
     FooterComponent,
-    HeaderComponent,
     MarkEmptyFormControlDirective,
     NavHeaderComponent,
     OverlayModule,
@@ -95,6 +188,9 @@ export class CreateVisualizationPageComponent {
   /** Organ entries */
   readonly organs = input.required<OrganEntry[]>();
 
+  /** Data for sidenav cards */
+  readonly sideNavData = HUBMAP_CARDS_DATA;
+
   /** Node data upload component */
   private readonly nodesFileUpload = viewChild.required<AnyFileUploadComponent>('nodesFileUpload');
   /** Color map upload component */

apps/cde-ui/src/app/pages/landing-page/landing-page.component.html

@@ -1,4 +1,10 @@
-<cde-header></cde-header>
+<hra-nav-header
+  title="Cell Distance Explorer"
+  app="cde"
+  link="https://apps.humanatlas.io/cde/"
+  variant="basic"
+  [navigationCategories]="sideNavData"
+></hra-nav-header>
 <section class="create-and-explore">
   <div class="create-explore-content">
     <div class="header">

apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss

@@ -4,6 +4,8 @@
   }
   display: block;
   background-color: rgba(252, 252, 252, 1);
+  position: relative;
+  top: 4.5rem;
 
   .create-and-explore {
     max-width: 18rem;

apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts

@@ -4,6 +4,8 @@ import { provideIcons } from '@hra-ui/cdk/icons';
 import { render, screen } from '@testing-library/angular';
 import { LandingPageComponent } from './landing-page.component';
 
+jest.mock('vega-embed', () => ({ default: jest.fn() }));
+
 describe('LandingPageComponent', () => {
   const providers = [provideHttpClient(), provideHttpClientTesting(), provideIcons()];
 

apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts

@@ -3,11 +3,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { YouTubePlayerModule } from '@angular/youtube-player';
-
 import { AssetUrlPipe } from '@hra-ui/cdk/app-href';
 import { FooterComponent } from '@hra-ui/design-system/footer';
-import { HeaderComponent } from '../../components/header/header.component';
+import { NavHeaderComponent } from '@hra-ui/design-system/nav-header';
+
 import { VisualCard, VisualCardComponent } from '../../components/visual-card/visual-card.component';
+import { HUBMAP_CARDS_DATA } from '../create-visualization-page/create-visualization-page.component';
 
 /**
  * Landing Page Component
@@ -21,9 +22,9 @@ import { VisualCard, VisualCardComponent } from '../../components/visual-card/vi
     MatIconModule,
     MatButtonModule,
     YouTubePlayerModule,
-    HeaderComponent,
     FooterComponent,
     AssetUrlPipe,
+    NavHeaderComponent,
   ],
   templateUrl: './landing-page.component.html',
   styleUrl: './landing-page.component.scss',
@@ -32,4 +33,7 @@ import { VisualCard, VisualCardComponent } from '../../components/visual-card/vi
 export class LandingPageComponent {
   /** Visual cards to display on the landing page */
   readonly cards = input<VisualCard[]>([]);
+
+  /** Data for sidenav cards */
+  readonly sideNavData = HUBMAP_CARDS_DATA;
 }