Merge branch 'cde-mvp2' of https://github.com/hubmapconsortium/hra-ui …

…into cde-design-system
hubmapconsortium · Oct 24, 2024 · 02116c6 · 02116c6
2 parents 0fa64bd + f24b335
commit 02116c6
Show file tree

Hide file tree

Showing 108 changed files with 2,080 additions and 500 deletions.
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html b/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">
   <div class="page-nav">

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
@@ -4,34 +4,18 @@
   background: url('../../../assets/backgrounds/create-visualization-page-background.png') no-repeat;
   background-position: center;
   background-size: cover;
+  position: relative;
+  top: 4.5rem;
 
-  color: var(--sys-secondary);
-
-  .card {
-    background-color: var(--sys-surface-container-low);
-
-    .header {
-      --mat-icon-color: var(--sys-secondary);
-    }
-  }
-
-  td {
-    color: var(--sys-primary);
+  hra-nav-header {
+    border-bottom: 1px solid var(--sys-outline);
   }
 
-  .color-config {
-    mat-button-toggle-group {
-      border-color: var(--sys-primary);
-      --mat-standard-button-toggle-text-color: var(--sys-secondary);
-      --mat-standard-button-toggle-selected-state-text-color: var(--sys-secondary);
-      --mat-standard-button-toggle-selected-state-background-color: rgb(from var(--sys-tertiary) r g b / 0.2);
-    }
-
-    mat-button-toggle {
-      &:first-child {
-        border-color: var(--sys-primary);
-      }
-    }
+  ::ng-deep .app-logo .app-description {
+    border-radius: 0.125rem;
+    width: fit-content;
+    padding: 0 0.25rem;
+    font: 500 0.625rem/1rem Metropolis !important;
   }
 
   .content {

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
@@ -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';
@@ -39,6 +39,101 @@ import { validateInteger } from '../../shared/form-validators/is-integer';
 import { OrganEntry } from '../../shared/resolvers/organs/organs.resolver';
 import { ErrorIndicatorComponent } from '@hra-ui/design-system/error-indicator';
 
+/** 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 */
@@ -95,6 +190,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 */

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
@@ -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>
 <section class="create-and-explore">
   <div class="create-explore-content">

diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss
@@ -3,10 +3,9 @@
     margin: 0 auto;
   }
   display: block;
-  background-color: var(--sys-surface-container-low);
-  min-width: 20rem;
-
-  color: var(--sys-secondary);
+  background-color: rgba(252, 252, 252, 1);
+  position: relative;
+  top: 4.5rem;
 
   h4 {
     color: var(--sys-primary);

diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts b/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()];
 

diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts
@@ -8,6 +8,7 @@ import { FooterComponent } from '@hra-ui/design-system/footer';
 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
@@ -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;
 }
diff --git a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.html b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.html
@@ -1,12 +1,11 @@
 <div class="header">
-  <hra-app-logos
-    appLink="https://apps.humanatlas.io/cde/"
-    appIcon="assets/logo/cde_logo.svg"
+  <hra-nav-header-buttons
+    app="cde"
     appTitle="Cell Distance Explorer"
-    variant="fixed"
-    appDescription="Beta"
-  >
-  </hra-app-logos>
+    appLink="https://apps.humanatlas.io/cde/"
+    variant="basic"
+    appStatus="Beta"
+  ></hra-nav-header-buttons>
 </div>
 
 <div class="metadata">

diff --git a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss
@@ -15,8 +15,8 @@
     border-style: solid;
     height: 4rem;
 
-    hra-app-logos {
-      margin: 0.5rem 0 0.5rem 0.75rem;
+    hra-nav-header-buttons {
+      margin: 0.75rem;
     }
   }
 

diff --git a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.ts b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.ts
@@ -12,7 +12,6 @@ import {
   signal,
   ViewContainerRef,
 } from '@angular/core';
-import { AppLogosComponent } from '@hra-ui/design-system/app-logos';
 import { Rgb, rgbToHex } from '@hra-ui/design-system/color-picker';
 
 import { CellTypesComponent } from '../components/cell-types/cell-types.component';
@@ -41,6 +40,7 @@ import { brandAttribute, numberAttribute } from '../shared/attribute-transform';
 import { createColorGenerator } from '../shared/color-generator';
 import { emptyArrayEquals } from '../shared/empty-array-equals';
 import { mergeObjects } from '../shared/merge';
+import { NavHeaderButtonsComponent } from '@hra-ui/design-system/nav-header-buttons';
 
 /** Interface for representing the distance entry */
 export interface DistanceEntry {
@@ -63,7 +63,7 @@ export interface DistanceEntry {
     NodeDistVisualizationComponent,
     HistogramComponent,
     ViolinComponent,
-    AppLogosComponent,
+    NavHeaderButtonsComponent,
   ],
   templateUrl: './cde-visualization.component.html',
   styleUrl: './cde-visualization.component.scss',

diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
@@ -4,7 +4,7 @@
     mat-icon-button
     [matMenuTriggerFor]="menu"
     hraMicroTooltip="More"
-    hraIconButtonSize="medium"
+    hraIconButtonSize="large"
     data-testid="trigger"
   >
     <mat-icon>more_vert</mat-icon>

diff --git a/libs/design-system/app-logos/src/index.ts b/libs/design-system/app-logos/src/index.ts
diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.html b/libs/design-system/app-logos/src/lib/app-logos.component.html