compute columns based on the links visibility signal

hubmapconsortium · Oct 2, 2024 · 1b6778a · 1b6778a
1 parent 9447f60
commit 1b6778a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 37 deletions.
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
@@ -15,8 +15,8 @@
       <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
     <button mat-menu-item (click)="toggleLinksColumn()">
-      <mat-icon>{{ hideCellLinkData ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
-      {{ hideCellLinkData ? 'Show' : 'Hide' }} Cell Link Data
+      <mat-icon>{{ hideCellLinkData() ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
+      {{ hideCellLinkData() ? 'Show' : 'Hide' }} Cell Link Data
     </button>
     <button mat-menu-item (click)="resetAllColors.emit()">
       <mat-icon>restart_alt</mat-icon>
@@ -31,8 +31,8 @@
       Embed App
     </a>
   </mat-menu>
-  <mat-menu #infoSubMenu="matMenu">
-    <hra-tooltip-card [content]="infoToolTip" [small]="true"></hra-tooltip-card>
+  <mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
+    {{ infoToolTipDescription }}
   </mat-menu>
   <mat-menu #downloadSubMenu="matMenu">
     <button mat-menu-item (click)="downloadNodes.emit()">
@@ -58,10 +58,12 @@
   <span data-testid="total-cell-count">{{ totalCellCount() | number }}</span>
   Total Cells
 </div>
-<div class="total-cell-links">
-  <span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
-  Total Cell Links
-</div>
+@if (!hideCellLinkData) {
+  <div class="total-cell-links">
+    <span data-testid="total-cell-link-count">{{ totalCellLinksCount() | number }}</span>
+    Total Cell Links
+  </div>
+}
 
 <ng-scrollbar
   class="table-overflow-container"
@@ -104,7 +106,7 @@
       </ng-container>
 
       <ng-container matColumnDef="cellType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Cell Type</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name" start="desc">Cell Type</th>
         <td mat-cell *matCellDef="let element" class="name">
           <cde-color-picker-label
             [label]="element.name"
@@ -117,17 +119,17 @@
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">#Cells</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="count" start="desc">#Cells</th>
         <td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
       </ng-container>
 
       <ng-container matColumnDef="links">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">#Links</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="outgoingEdgeCount" start="desc">#Links</th>
         <td mat-cell *matCellDef="let element">{{ element.outgoingEdgeCount.toLocaleString() }}</td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: columns"></tr>
+      <tr mat-header-row *matHeaderRowDef="columns(); sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: columns()"></tr>
     </table>
   </div>
 </ng-scrollbar>
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
@@ -48,6 +48,14 @@ $blue-theme: mat.m2-define-light-theme(
   --mat-table-header-container-height: 2rem;
   --mat-menu-item-label-text-color: var(--sys-primary);
 
+  &:not(:has(.total-cell-links)) {
+    grid:
+      'cell-types . download'
+      'total-cell-types . total-cells'
+      'table table table' 1fr
+      / auto 1fr auto;
+  }
+
   span.cell-types-label {
     font: var(--sys-label-medium);
     letter-spacing: var(--sys-label-medium-tracking);
@@ -219,6 +227,16 @@ $blue-theme: mat.m2-define-light-theme(
   }
 }
 
-::ng-deep .mat-mdc-menu-content button {
-  color: var(--sys-primary);
+::ng-deep {
+  .mat-mdc-menu-content button {
+    color: var(--sys-primary);
+  }
+
+  div.mat-mdc-menu-panel {
+    max-width: 308px;
+    &.info-sub-menu .mat-mdc-menu-content {
+      padding: 1rem 1rem;
+      color: var(--sys-primary);
+    }
+  }
 }
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
@@ -11,6 +11,7 @@ import {
   input,
   model,
   output,
+  signal,
   viewChild,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -25,7 +26,7 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Rgb } from '@hra-ui/design-system/color-picker';
 import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 import { ScrollingModule } from '@hra-ui/design-system/scrolling';
-import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card';
+import { TooltipCardComponent } from '@hra-ui/design-system/tooltip-card';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { map } from 'rxjs';
 import { CellTypeEntry } from '../../models/cell-type';
@@ -80,11 +81,14 @@ export class CellTypesComponent {
   /** Output event for reset color */
   readonly resetAllColors = output();
 
-  /** Base columns to be displayed in the table */
-  private readonly baseColumns = ['select', 'cellType', 'count'];
-
   /** Columns to be displayed in the table */
-  protected columns = [...this.baseColumns, 'links'];
+  protected readonly columns = computed(() => {
+    if (this.hideCellLinkData()) {
+      return ['select', 'cellType', 'count'];
+    } else {
+      return ['select', 'cellType', 'count', 'links'];
+    }
+  });
 
   /** Tooltip position configuration */
   protected readonly tooltipPosition = TOOLTIP_POSITION_RIGHT_SIDE;
@@ -93,15 +97,11 @@ export class CellTypesComponent {
   protected readonly sort = viewChild.required(MatSort);
 
   /** Content for Info Tooltip card */
-  protected readonly infoToolTip: TooltipContent[] = [
-    {
-      description:
-        'Show/hide cell types in the visualization and plots. Hide cell links from this table view. Update colors for individual cell types. Download CSVs for the current configurations of cell types, cell links, and cell type color map formatting.',
-    },
-  ];
+  protected readonly infoToolTipDescription: string =
+    'Show/hide cell types in the visualization and plots. Hide cell links from this table view. Update colors for individual cell types. Download CSVs for the current configurations of cell types, cell links, and cell type color map formatting.';
 
   /** Flag to toggle cell links row visibility */
-  protected hideCellLinkData = false;
+  protected hideCellLinkData = signal(false);
 
   /** Bind sort state to data source */
   protected readonly sortBindRef = effect(() => (this.dataSource.sort = this.sort()));
@@ -223,16 +223,7 @@ export class CellTypesComponent {
     }
   }
 
-  private updateColumns() {
-    if (this.hideCellLinkData) {
-      this.columns = this.columns.filter((column) => column !== 'links');
-    } else if (!this.columns.includes('links')) {
-      this.columns = [...this.baseColumns, 'links'];
-    }
-  }
-
   toggleLinksColumn(): void {
-    this.hideCellLinkData = !this.hideCellLinkData;
-    this.updateColumns();
+    this.hideCellLinkData.set(!this.hideCellLinkData);
   }
 }