add toggle links column functionality

libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html

@@ -14,7 +14,7 @@
       <span>Download</span>
       <mat-icon class="expand-arrow">arrow_right</mat-icon>
     </button>
-    <button mat-menu-item (click)="hideCellLinkData = !hideCellLinkData">
+    <button mat-menu-item (click)="toggleLinksColumn()">
       <mat-icon>{{ hideCellLinkData ? 'visibility' : 'visibility_off' }}visibility</mat-icon>
       {{ hideCellLinkData ? 'Show' : 'Hide' }} Cell Link Data
     </button>
@@ -58,6 +58,10 @@
   <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>
 
 <ng-scrollbar
   class="table-overflow-container"
@@ -100,8 +104,8 @@
       </ng-container>
 
       <ng-container matColumnDef="cellType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc" class="mat-caption">Cell Type</th>
-        <td mat-cell *matCellDef="let element" class="mat-caption name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Cell Type</th>
+        <td mat-cell *matCellDef="let element" class="name">
           <cde-color-picker-label
             [label]="element.name"
             [color]="element.color"
@@ -113,7 +117,7 @@
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef start="desc">#Cells</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">#Cells</th>
         <td mat-cell *matCellDef="let element">{{ element.count.toLocaleString() }}</td>
       </ng-container>
 

libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss

@@ -24,7 +24,7 @@ $blue-theme: mat.m2-define-light-theme(
   display: grid;
   grid:
     'cell-types . download'
-    'total-cell-types . total-cells'
+    'total-cell-types total-cells total-cell-links'
     'table table table' 1fr
     / auto 1fr auto;
   align-items: start;
@@ -72,7 +72,8 @@ $blue-theme: mat.m2-define-light-theme(
   }
 
   .total-ct-label,
-  .total-cells {
+  .total-cells,
+  .total-cell-links {
     font: var(--sys-label-small);
     letter-spacing: var(--sys-label-medium-tracking);
 
@@ -90,6 +91,11 @@ $blue-theme: mat.m2-define-light-theme(
 
   .total-cells {
     grid-area: total-cells;
+    justify-self: center;
+  }
+
+  .total-cell-links {
+    grid-area: total-cell-links;
   }
 
   .table-overflow-container {
@@ -133,9 +139,9 @@ $blue-theme: mat.m2-define-light-theme(
           }
         }
 
-        tbody tr td.mdc-data-table__cell:last-child {
+        tbody tr td.mdc-data-table__cell:nth-last-child(-n + 2) {
           text-align: end;
-          padding-right: 1.65rem;
+          padding-right: 1.5rem;
           color: var(--sys-primary);
           font: var(--sys-label-small);
         }

libs/cde-visualization/src/lib/components/cell-types/cell-types.component.ts

@@ -80,8 +80,11 @@ 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 readonly columns = ['select', 'cellType', 'count', 'links'];
+  protected columns = [...this.baseColumns, 'links'];
 
   /** Tooltip position configuration */
   protected readonly tooltipPosition = TOOLTIP_POSITION_RIGHT_SIDE;
@@ -98,7 +101,7 @@ export class CellTypesComponent {
   ];
 
   /** Flag to toggle cell links row visibility */
-  hideCellLinkData = false;
+  protected hideCellLinkData = false;
 
   /** Bind sort state to data source */
   protected readonly sortBindRef = effect(() => (this.dataSource.sort = this.sort()));
@@ -112,7 +115,6 @@ export class CellTypesComponent {
   /** Bind data source to cell types */
   protected readonly dataSourceBindRef = effect(() => {
     this.dataSource.data = this.cellTypes();
-    console.log(this.cellTypes());
     this.cdr.markForCheck();
   });
 
@@ -147,17 +149,25 @@ export class CellTypesComponent {
     }
   });
 
+  /** Helper function to calculate the number of nodes or edges */
+  protected readonly sumCounts = (count: number, entry: CellTypeEntry, key: 'count' | 'outgoingEdgeCount') => {
+    const value = this.isSelected(entry) ? entry[key] : 0;
+    return count + value;
+  };
+
   /** Computed total cell count based on selection */
   protected totalCellCount = computed(() => {
-    const sumCounts = (count: number, entry: CellTypeEntry) => {
-      const value = this.isSelected(entry) ? entry.count : 0;
-      return count + value;
-    };
+    // Grab dependency on current selection since selectionModel is used indirectly
+    this.selection();
+
+    return this.cellTypes().reduce((count, entry) => this.sumCounts(count, entry, 'count'), 0);
+  });
 
+  protected totalCellLinksCount = computed(() => {
     // Grab dependency on current selection since selectionModel is used indirectly
     this.selection();
 
-    return this.cellTypes().reduce(sumCounts, 0);
+    return this.cellTypes().reduce((count, entry) => this.sumCounts(count, entry, 'outgoingEdgeCount'), 0);
   });
 
   /** Toggle state for cell types info */
@@ -212,4 +222,17 @@ export class CellTypesComponent {
       } while (sorter.direction !== 'desc');
     }
   }
+
+  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();
+  }
 }

libs/cde-visualization/src/lib/components/color-picker-label/color-picker-label.component.scss

@@ -34,7 +34,7 @@
     cursor: pointer;
     display: block;
     white-space: nowrap;
-    max-width: 8.25rem;
+    max-width: calc(100% - 3.5rem);
     text-overflow: ellipsis;
     overflow: hidden;
     flex-grow: 0;