From 58bc2c9159038692dedbf13137dc3cb71e43b3d9 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Sun, 6 Oct 2024 02:39:47 -0400
Subject: [PATCH] More style updates for tooltips and visualization page

---
 .../create-visualization-page.component.scss  |  7 +--
 ...te-visualization-page.component.theme.scss |  8 ---
 .../landing-page/landing-page.component.scss  |  4 --
 .../cde-visualization.component.html          |  1 +
 .../cde-visualization.component.scss          | 60 +++++--------------
 .../cell-types/cell-types.component.html      | 15 +++--
 .../cell-types/cell-types.component.scss      |  4 ++
 .../cell-types/cell-types.component.ts        |  2 +
 .../histogram/histogram.component.html        | 14 +++--
 .../histogram/histogram.component.scss        | 17 +-----
 .../histogram/histogram.component.ts          |  2 +
 .../metadata/metadata.component.html          | 11 +++-
 .../components/metadata/metadata.component.ts | 11 +++-
 .../node-dist-visualization.component.html    | 19 +-----
 .../node-dist-visualization.component.scss    |  5 +-
 .../node-dist-visualization.component.ts      | 19 +++++-
 .../components/violin/violin.component.html   | 11 +++-
 .../components/violin/violin.component.scss   |  3 +
 .../lib/components/violin/violin.component.ts |  2 +
 .../src/lib/tooltip-card.component.scss       |  1 +
 20 files changed, 104 insertions(+), 112 deletions(-)

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 4a63e3ecd..abf0b2177 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
@@ -1,15 +1,10 @@
 :host {
   display: block;
-  min-width: 545px;
+  min-width: 80rem;
   background: url('../../../assets/backgrounds/create-visualization-page-background.png') no-repeat;
   background-position: center;
   background-size: cover;
 
-  hra-nav-header {
-    border-bottom: 1px solid var(--sys-outline);
-    height: 5rem;
-  }
-
   .content {
     display: flex;
     flex-direction: column;
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
index fdf80d67b..a33bb019e 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
@@ -1,10 +1,6 @@
 cde-create-visualization-page {
   color: var(--sys-secondary);
 
-  hra-nav-header {
-    background-color: var(--sys-surface-container-high) !important;
-  }
-
   .card {
     background-color: var(--sys-surface-container-low);
 
@@ -42,7 +38,3 @@ cde-create-visualization-page {
     }
   }
 }
-
-.info-tooltip-panel {
-  background-color: var(--sys-on-primary);
-}
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
index 3076bf4c3..49d93ef00 100644
--- 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
@@ -6,10 +6,6 @@
   background-color: var(--sys-surface-container-low);
   min-width: 20rem;
 
-  hra-nav-header {
-    height: 5.25rem;
-  }
-
   .create-explore-content {
     padding: 3rem 1rem 5rem 1rem;
 
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
index fd9b4a7c9..60ed369e9 100644
--- a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.html
+++ b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.html
@@ -4,6 +4,7 @@
     appIcon="assets/logo/cde_logo.svg"
     appTitle="Cell Distance Explorer"
     variant="fixed"
+    appDescription="Beta"
   >
   </hra-app-logos>
 </div>
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
index 398201ba7..ded8317e0 100644
--- a/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss
+++ b/libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss
@@ -1,50 +1,7 @@
-::ng-deep {
-  .info-tooltip-panel {
-    background-color: white;
-    box-shadow: 0 0.3125rem 1rem 0 #201e3d3d;
-    border-radius: 0.5rem;
-    max-width: 21rem;
-
-    .break {
-      margin-bottom: 1rem;
-    }
-
-    div,
-    span {
-      font-family: 'Metropolis';
-      font-size: 0.875rem;
-      line-height: 1.3125rem;
-      letter-spacing: 0.005em;
-      font-weight: 500;
-      color: #4c4c58;
-    }
-
-    div {
-      margin: 1rem;
-
-      span {
-        display: block;
-      }
-    }
-  }
-}
-
-::ng-deep .download-snackbar-panel {
-  --mdc-snackbar-container-color: var(--sys-surface-container);
-  --mdc-snackbar-supporting-text-color: var(--sys-secondary);
-  translate: 0 -2rem;
-  text-align: center;
-
-  .mdc-snackbar__surface {
-    border-radius: 0.5rem !important;
-    min-width: 13rem !important;
-  }
-}
-
 :host {
   width: 100%;
   display: grid;
-  grid-template-columns: 22.75rem minmax(59rem, calc(100vw - 22.75rem));
+  grid-template-columns: 22.75rem minmax(57.25rem, calc(100vw - 22.75rem));
   grid-template-rows: 4rem minmax(calc(900px - 4rem), calc(100vh - 4rem));
   grid-template-areas:
     'header visualization'
@@ -85,12 +42,23 @@
       border-width: 0 0 2px 0;
       border-style: solid;
       height: 100%;
-      width: calc(100% - 488px);
     }
 
     cde-violin {
       height: 100%;
-      width: 488px;
+      width: 390px;
     }
   }
 }
+
+::ng-deep .download-snackbar-panel {
+  --mdc-snackbar-container-color: var(--sys-surface-container);
+  --mdc-snackbar-supporting-text-color: var(--sys-secondary);
+  translate: 0 -2rem;
+  text-align: center;
+
+  .mdc-snackbar__surface {
+    border-radius: 0.5rem !important;
+    min-width: 13rem !important;
+  }
+}
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
index 538393641..293418d34 100644
--- 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
@@ -16,11 +16,16 @@
     [cdkConnectedOverlayOpen]="cellTypesInfoOpen"
     [cdkConnectedOverlayOffsetX]="5"
   >
-    <div>
-      Show/hide specific cell types in the visualizations by clicking the checkboxes. Update individual cell type
-      visualization colors by clicking the cell type's color legend button. Download a color map CSV file of the current
-      cell types and HEX codes.
-    </div>
+    <hra-tooltip-card
+      small
+      [content]="[
+        {
+          description:
+            'Show/hide specific cell types in the visualizations by clicking the checkboxes. Update individual cell type visualization colors by clicking the cell type\'s color legend button. Download a color map CSV file of the current cell types and HEX codes.',
+        },
+      ]"
+    >
+    </hra-tooltip-card>
   </ng-template>
 </span>
 <button mat-flat-button class="mat-caption download-csv" color="primary" (click)="download.emit()">
diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
index bc06619ea..cd46226de 100644
--- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
+++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss
@@ -41,6 +41,10 @@
   }
 
   button.download-csv {
+    --mdc-filled-button-container-height: 2rem;
+    --mdc-filled-button-container-color: #d5dbe3;
+    --mdc-filled-button-label-text-color: #201e3d;
+
     grid-area: download;
     padding: 0.3438rem 0.5rem;
 
diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
index 8ab3d9a51..54f21d83a 100644
--- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
+++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts
@@ -27,6 +27,7 @@ import { CellTypeEntry } from '../../models/cell-type';
 import { Rgb } from '@hra-ui/design-system/color-picker';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
 import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-label.component';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 
 /**
  * Cell Type Component
@@ -46,6 +47,7 @@ import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-la
     OverlayModule,
     ColorPickerLabelComponent,
     ScrollingModule,
+    TooltipCardComponent,
   ],
   templateUrl: './cell-types.component.html',
   styleUrl: './cell-types.component.scss',
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.html b/libs/cde-visualization/src/lib/components/histogram/histogram.component.html
index 220768bf5..33a6f8b43 100644
--- a/libs/cde-visualization/src/lib/components/histogram/histogram.component.html
+++ b/libs/cde-visualization/src/lib/components/histogram/histogram.component.html
@@ -20,10 +20,16 @@
           [cdkConnectedOverlayOpen]="infoOpen"
           [cdkConnectedOverlayOffsetX]="5"
         >
-          <div>
-            The graph shows a histogram of cell-to-nearest-anchor cell distance distributions categorized by each cell
-            type in the dataset.
-          </div>
+          <hra-tooltip-card
+            small
+            [content]="[
+              {
+                description:
+                  'The graph shows a histogram of cell-to-nearest-anchor cell distance distributions categorized by each cell type in the dataset.',
+              },
+            ]"
+          >
+          </hra-tooltip-card>
         </ng-template>
 
         <div class="filler"></div>
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss b/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss
index 0f5bc3b32..6964ef004 100644
--- a/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss
+++ b/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss
@@ -3,8 +3,8 @@
   border-radius: 0.5rem;
   height: fit-content;
   position: sticky;
-  --mdc-filled-button-container-height: 2rem;
   max-height: 22.5rem;
+  --mat-expansion-container-shape: 0;
 
   .header {
     padding: 0 1rem;
@@ -21,6 +21,8 @@
       }
 
       button {
+        --mdc-filled-button-container-height: 2rem;
+        --mdc-filled-button-container-color: #d5dbe3;
         --mdc-filled-button-label-text-color: #201e3d;
         padding: 0.375rem 0.5rem;
         margin-left: 0.25rem;
@@ -69,16 +71,3 @@
 ::ng-deep .mat-content-hide-toggle {
   margin-right: 0 !important;
 }
-
-::ng-deep {
-  #vg-tooltip-element.vg-tooltip {
-    font-family: 'Metropolis';
-    font-weight: 500;
-    font-size: 0.75rem;
-    line-height: 1.125rem;
-    color: #201e3d;
-    padding: 0.5rem;
-    max-width: 22.5rem;
-    box-shadow: 0px 5px 16px 0px #201e3d3d;
-  }
-}
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts b/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts
index 587e6910e..d53115380 100644
--- a/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts
+++ b/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts
@@ -33,6 +33,7 @@ import { FileSaverService } from '../../services/file-saver/file-saver.service';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
 import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-label.component';
 import * as HISTOGRAM_SPEC from './histogram.vl.json';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 
 interface UpdateColorData {
   entry: CellTypeEntry;
@@ -121,6 +122,7 @@ const DYNAMIC_COLOR_RANGE = Array(DYNAMIC_COLOR_RANGE_LENGTH)
     ColorPickerLabelComponent,
     OverlayModule,
     ScrollingModule,
+    TooltipCardComponent,
   ],
   providers: [
     {
diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.html b/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
index b1373e49b..50758d273 100644
--- a/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
+++ b/libs/cde-visualization/src/lib/components/metadata/metadata.component.html
@@ -20,7 +20,16 @@
           [cdkConnectedOverlayOpen]="tooltipOpen"
           [cdkConnectedOverlayOffsetX]="5"
         >
-          <div>Visualization metadata for the sample dataset. Sample files may be viewed in Google Sheets.</div>
+          <hra-tooltip-card
+            small
+            [content]="[
+              {
+                description:
+                  'Visualization metadata for the sample dataset. Sample files may be viewed in Google Sheets.',
+              },
+            ]"
+          >
+          </hra-tooltip-card>
         </ng-template>
       </mat-panel-title>
     </mat-expansion-panel-header>
diff --git a/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts b/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
index 010f4dd98..60248b71c 100644
--- a/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
+++ b/libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
@@ -6,6 +6,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { Metadata } from '../../models/metadata';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 
 /** List of metadata fields that can be hidden */
 const HIDABLE_FIELDS: (keyof Metadata)[] = [
@@ -37,7 +38,15 @@ export class DefaultToPipe implements PipeTransform {
 @Component({
   selector: 'cde-metadata',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatExpansionModule, OverlayModule, DefaultToPipe],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatExpansionModule,
+    OverlayModule,
+    DefaultToPipe,
+    TooltipCardComponent,
+  ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html
index abcf17a06..8b377774a 100644
--- a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html
+++ b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.html
@@ -17,24 +17,7 @@
     [cdkConnectedOverlayOpen]="tooltipOpen"
     [cdkConnectedOverlayOffsetX]="5"
   >
-    <div>
-      <ul>
-        Zoom Options
-        <li>Mouse pinwheel</li>
-        <li>Trackpad Pinch</li>
-      </ul>
-      <ul>
-        Pan Options
-        <li>CTRL/CMD + mouse drag</li>
-        <li>Right click + mouse drag</li>
-        <li>Keyboard arrows</li>
-      </ul>
-      <ul>
-        Rotation Options for 3D Visualizations
-        <li>CTRL/CMD + keyboard arrows</li>
-        <li>Mouse Drag</li>
-      </ul>
-    </div>
+    <hra-tooltip-card small [content]="tooltipContent"> </hra-tooltip-card>
   </ng-template>
 </div>
 
diff --git a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss
index ad9717320..a325c5b35 100644
--- a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss
+++ b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.scss
@@ -16,9 +16,8 @@
     z-index: 1;
     align-items: center;
     gap: 0.25rem;
-    color: white;
-    font-size: 1rem;
-    line-height: 1.5rem;
+    font: var(--sys-label-medium);
+    letter-spacing: var(--sys-label-medium-tracking);
     color: #e6eaf0;
 
     mat-icon {
diff --git a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.ts b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.ts
index 0eaca1f84..711a1bb25 100644
--- a/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.ts
+++ b/libs/cde-visualization/src/lib/components/node-dist-visualization/node-dist-visualization.component.ts
@@ -24,6 +24,7 @@ import { EdgeEntry } from '../../models/edge';
 import { NodeEntry } from '../../models/node';
 import { FileSaverService } from '../../services/file-saver/file-saver.service';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
+import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
 
 /** Utility type to convert properties of an object into an object with a value wrapper */
 type Preactify<T> = {
@@ -73,7 +74,7 @@ function isNonEmptyArray<T>(array: T[]): boolean {
 @Component({
   selector: 'cde-node-dist-visualization',
   standalone: true,
-  imports: [CommonModule, OverlayModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, OverlayModule, MatButtonModule, MatIconModule, TooltipCardComponent],
   templateUrl: './node-dist-visualization.component.html',
   styleUrl: './node-dist-visualization.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -116,6 +117,22 @@ export class NodeDistVisualizationComponent {
   /** Tooltip position constant */
   readonly tooltipPosition = TOOLTIP_POSITION_RIGHT_SIDE;
 
+  /** Tooltip content */
+  readonly tooltipContent: TooltipContent[] = [
+    {
+      title: 'Zoom Options',
+      description: '• Mouse pinwheel \n• Trackpad Pinch',
+    },
+    {
+      title: 'Pan Options',
+      description: '• CTRL/CMD + mouse drag \n• Right click + mouse drag \n• Keyboard arrows',
+    },
+    {
+      title: 'Rotation Options for 3D Visualizations',
+      description: '• CTRL/CMD + keyboard arrows \n• Mouse Drag',
+    },
+  ];
+
   /** Flag to check if the tooltip is open */
   tooltipOpen = false;
 
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.html b/libs/cde-visualization/src/lib/components/violin/violin.component.html
index d9b13f4cb..549966d9c 100644
--- a/libs/cde-visualization/src/lib/components/violin/violin.component.html
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.html
@@ -16,7 +16,16 @@
     [cdkConnectedOverlayOpen]="infoOpen"
     [cdkConnectedOverlayOffsetX]="5"
   >
-    <div>Violin plot</div>
+    <hra-tooltip-card
+      small
+      [content]="[
+        {
+          description:
+            'The graph shows a histogram of cell-to-nearest-anchor cell distance distributions categorized by each cell type in the dataset.',
+        },
+      ]"
+    >
+    </hra-tooltip-card>
   </ng-template>
 </span>
 
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.scss b/libs/cde-visualization/src/lib/components/violin/violin.component.scss
index 347de52e7..1ac84ea1d 100644
--- a/libs/cde-visualization/src/lib/components/violin/violin.component.scss
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.scss
@@ -36,6 +36,9 @@
   }
 
   button {
+    --mdc-filled-button-container-height: 2rem;
+    --mdc-filled-button-container-color: #d5dbe3;
+    --mdc-filled-button-label-text-color: #201e3d;
     padding: 0.375rem 0.5rem;
     margin-left: 0.5rem;
 
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.ts b/libs/cde-visualization/src/lib/components/violin/violin.component.ts
index e076480e6..d1808ef4e 100644
--- a/libs/cde-visualization/src/lib/components/violin/violin.component.ts
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.ts
@@ -24,6 +24,7 @@ import { FileSaverService } from '../../services/file-saver/file-saver.service';
 import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
 import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-label.component';
 import * as VIOLIN_SPEC from './violin.vl.json';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 
 /** Interface for modifying the violin specification */
 interface ModifiableViolinSpec {
@@ -111,6 +112,7 @@ const DYNAMIC_COLOR_RANGE = Array(DYNAMIC_COLOR_RANGE_LENGTH)
     ColorPickerLabelComponent,
     OverlayModule,
     ScrollingModule,
+    TooltipCardComponent,
   ],
   templateUrl: './violin.component.html',
   styleUrl: './violin.component.scss',
diff --git a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss
index ff6736682..1d3742e1d 100644
--- a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss
+++ b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss
@@ -6,6 +6,7 @@
   box-shadow: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-shadow) r g b / 0.322);
   font: var(--sys-label-large);
   letter-spacing: var(--sys-label-large-tracking);
+  background: var(--sys-on-primary);
 
   .title {
     margin: 0;