use custom expansion panel in the histogram

hubmapconsortium · Oct 23, 2024 · cd9f014 · cd9f014
1 parent 2649d64
commit cd9f014
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 4 deletions.
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.html b/libs/cde-visualization/src/lib/components/histogram/histogram.component.html
@@ -1,4 +1,4 @@
-<mat-accordion displayMode="flat">
+<!-- <mat-accordion displayMode="flat">
   <mat-expansion-panel expanded [style.overflow]="panel.expanded && overflowVisible() ? 'visible' : null" #panel>
     <mat-expansion-panel-header class="header">
       <mat-panel-title class="title">
@@ -82,4 +82,80 @@
       <div *hraFullscreen class="histogram" data-testid="histogram" #histogram></div>
     </div>
   </mat-expansion-panel>
-</mat-accordion>
+</mat-accordion> -->
+
+<hra-expansion-panel [title]="'Histogram'">
+  <hra-expansion-panel-actions>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      [hraIconButtonSize]="'large'"
+      aria-label="Icon to open nested menu"
+      hraMicroTooltip="More"
+      (click)="$event.stopPropagation()"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" [class]="'histogram-overlay'">
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="infoSubMenu"
+        matRipple
+        matRippleColor="#201E3D14"
+        (click)="$event.stopImmediatePropagation()"
+      >
+        <mat-icon>info</mat-icon>
+        <span>Info</span>
+        <mat-icon class="expand-arrow">arrow_right</mat-icon>
+      </button>
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="downloadSubMenu"
+        matRipple
+        matRippleColor="#201E3D14"
+        (click)="$event.stopImmediatePropagation()"
+      >
+        <mat-icon>download</mat-icon>
+        <span>Downloads</span>
+        <mat-icon class="expand-arrow">arrow_right</mat-icon>
+      </button>
+      <button mat-menu-item (click)="histogramEl().open()">
+        <mat-icon>fullscreen</mat-icon>
+        Full Screen
+      </button>
+      <a
+        mat-menu-item
+        href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <mat-icon>code</mat-icon>
+        Embed App
+      </a>
+      <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
+        This histogram plot shows the cell-to-nearest-anchor cell distance distributions categorized by each cell type
+        in the dataset.
+      </mat-menu>
+      <mat-menu #downloadSubMenu="matMenu" [class]="'download-sub-menu'">
+        <button mat-menu-item (click)="$event.stopPropagation(); download('png')">
+          <mat-icon>download</mat-icon>
+          PNG
+        </button>
+        <button mat-menu-item (click)="$event.stopPropagation(); download('svg')">
+          <mat-icon>download</mat-icon>
+          SVG
+        </button>
+      </mat-menu>
+    </mat-menu>
+  </hra-expansion-panel-actions>
+  <hra-expansion-panel-header-content>
+    <cde-color-picker-label
+      [label]="totalCellTypeLabel"
+      [(color)]="totalCellTypeColor"
+      (colorPickerOpen)="colorPicker.set($event)"
+      (click)="$event.stopPropagation()"
+    >
+    </cde-color-picker-label>
+  </hra-expansion-panel-header-content>
+  <div *hraFullscreen class="histogram" data-testid="histogram" #histogram></div>
+</hra-expansion-panel>
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss b/libs/cde-visualization/src/lib/components/histogram/histogram.component.scss
@@ -45,8 +45,8 @@
   }
 
   ::ng-deep {
-    .mat-expansion-panel {
-      .mat-expansion-panel-header {
+    hra-expansion-panel {
+      hra-expansion-panel-header-content {
         cde-color-picker-label {
           .label {
             font: var(--sys-label-small);

diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts b/libs/cde-visualization/src/lib/components/histogram/histogram.component.ts
@@ -36,6 +36,11 @@ 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 {
+  ExpansionPanelActionsComponent,
+  ExpansionPanelComponent,
+  ExpansionPanelHeaderContentComponent,
+} from '@hra-ui/design-system/expansion-panel';
 
 interface UpdateColorData {
   entry: CellTypeEntry;
@@ -128,6 +133,9 @@ const DYNAMIC_COLOR_RANGE = Array(DYNAMIC_COLOR_RANGE_LENGTH)
     IconButtonSizeDirective,
     MicroTooltipDirective,
     FullscreenDirective,
+    ExpansionPanelComponent,
+    ExpansionPanelActionsComponent,
+    ExpansionPanelHeaderContentComponent,
   ],
   providers: [
     {