feat(model-ad): add ability to download all pinned data from a CT table (MG-451) (Sage-Bionetworks#3660)

Author: hallieswan

apps/model-ad/api/src/models/disease-correlation-comparison-tool.ts

@@ -3,7 +3,7 @@ import { Schema, model } from 'mongoose';
 
 const CorrelationResultSchema = new Schema<CorrelationResult>({
   correlation: { type: Number, required: true },
-  adj_p_value: { type: Number, required: true },
+  adj_p_val: { type: Number, required: true },
 });
 
 const DiseaseCorrelationSchema = new Schema<DiseaseCorrelation>(

libs/explorers/comparison-tool/src/lib/comparison-tool-controls/comparison-tool-column-selector/comparison-tool-column-selector.component.html

@@ -25,7 +25,7 @@
     tooltipPosition="top"
     tooltipStyleClass="tooltip-xs"
   >
-    <p-overlaybadge severity="warn" [badgeDisabled]="!hasHiddenColumns()">
+    <p-overlaybadge severity="warn" [badgeDisabled]="!hasUnselectedColumns()">
       <explorers-svg-icon
         imagePath="/explorers-assets/icons/column.svg"
         [width]="20"

libs/explorers/comparison-tool/src/lib/comparison-tool-controls/comparison-tool-column-selector/comparison-tool-column-selector.component.spec.ts

@@ -58,10 +58,10 @@ describe('ComparisonToolColumnSelectorComponent', () => {
     expect(icon).toBeInTheDocument();
   });
 
-  it('should show overlay badge when there are hidden columns', async () => {
+  it('should show overlay badge when there are unselected columns', async () => {
     const { service } = await setup();
 
-    // Toggle a column to hide it
+    // Toggle a column to unselect it
     const columns = service.columns();
     if (columns.length > 0) {
       service.toggleColumn(columns[0]);
@@ -70,20 +70,20 @@ describe('ComparisonToolColumnSelectorComponent', () => {
     // Wait for re-render
     await screen.findByRole('button');
 
-    expect(service.hasHiddenColumns()).toBe(true);
+    expect(service.hasUnselectedColumns()).toBe(true);
   });
-  it('should not show overlay badge when all columns are visible', async () => {
+  it('should not show overlay badge when all columns are selected', async () => {
     const { service } = await setup();
 
-    // Ensure all columns are visible
+    // Ensure all columns are selected
     const columns = service.columns();
     columns.forEach((col) => {
       if (!col.selected) {
         service.toggleColumn(col);
       }
     });
 
-    expect(service.hasHiddenColumns()).toBe(false);
+    expect(service.hasUnselectedColumns()).toBe(false);
   });
 
   it('should open popover when button is clicked', async () => {
@@ -331,8 +331,8 @@ describe('ComparisonToolColumnSelectorComponent', () => {
     // Test that getter returns service columns
     expect(instance.columns).toBe(service.columns());
 
-    // Test that hasHiddenColumns returns correct value
-    expect(instance.hasHiddenColumns()).toBe(service.hasHiddenColumns());
+    // Test that hasUnselectedColumns returns correct value
+    expect(instance.hasUnselectedColumns()).toBe(service.hasUnselectedColumns());
   });
 
   it('should update UI when columns change in service', async () => {

libs/explorers/comparison-tool/src/lib/comparison-tool-controls/comparison-tool-column-selector/comparison-tool-column-selector.component.ts

@@ -24,7 +24,7 @@ export class ComparisonToolColumnSelectorComponent {
     this.comparisonToolService.toggleColumn(column);
   }
 
-  hasHiddenColumns() {
-    return this.comparisonToolService.hasHiddenColumns();
+  hasUnselectedColumns() {
+    return this.comparisonToolService.hasUnselectedColumns();
   }
 }

libs/explorers/comparison-tool/src/lib/comparison-tool-table/base-table/base-table.component.spec.ts

@@ -44,9 +44,6 @@ describe('BaseTableComponent', () => {
   it('should render table rows with text content', async () => {
     await setup();
 
-    const modelTypes = screen.getAllByText('Familial AD');
-    expect(modelTypes.length).toBeGreaterThan(0);
-
     const ageCells = screen.getAllByText('12 months');
     expect(ageCells.length).toBeGreaterThan(0);
 

libs/explorers/comparison-tool/src/lib/comparison-tool-table/comparison-tool-table.component.html

@@ -1,32 +1,34 @@
 <div class="comparison-tool-table" #table>
-  <explorers-comparison-tool-columns [columnWidth]="columnWidth" />
+  <div class="table-header-and-pinned" #tableHeaderAndPinned>
+    <explorers-comparison-tool-columns [columnWidth]="columnWidth" />
 
-  @if (pinnedResultsCount() > 0) {
-    <div class="table-divider table-divider-1">
-      <div class="table-divider-inner">
-        <div id="pinned-genes-header">
-          <span> Pinned Items ({{ pinnedResultsCount() }}/{{ maxPinnedItems() }}) </span>
-        </div>
-        <div class="pinned-items-controls">
-          <button (click)="downloadPinned()" class="csv-download-button">
-            <explorers-svg-icon
-              imagePath="/explorers-assets/icons/download.svg"
-              altText="download"
-              [enableHoverEffects]="true"
+    @if (pinnedResultsCount() > 0) {
+      <div class="table-divider table-divider-1">
+        <div class="table-divider-inner">
+          <div id="pinned-genes-header">
+            <span> Pinned Items ({{ pinnedResultsCount() }}/{{ maxPinnedItems() }}) </span>
+          </div>
+          <div class="pinned-items-controls">
+            <explorers-download-dom-image
+              [target]="tableHeaderAndPinned"
+              [filename]="getPinnedDataFilename()"
+              [hasCsvDownload]="true"
+              [data]="getPinnedDataForCsv()"
+              [buttonLabel]="'Download'"
+              [heading]="'Download all results as:'"
             />
-            Download
-          </button>
-          <button (click)="clearAllPinned()" class="clear-all-button">Clear All</button>
+            <button (click)="clearAllPinned()" class="clear-all-button">Clear All</button>
+          </div>
         </div>
       </div>
-    </div>
-  }
-  <explorers-base-table
-    [data]="pinnedData()"
-    [shouldPaginate]="false"
-    [shouldShowNoDataMessage]="false"
-    [columnWidth]="columnWidth"
-  />
+    }
+    <explorers-base-table
+      [data]="pinnedData()"
+      [shouldPaginate]="false"
+      [shouldShowNoDataMessage]="false"
+      [columnWidth]="columnWidth"
+    />
+  </div>
 
   @if (searchTerm() || hasSelectedFilters()) {
     <div class="table-divider">

libs/explorers/comparison-tool/src/lib/comparison-tool-table/comparison-tool-table.component.scss

@@ -2,10 +2,6 @@
 @use 'explorers/styles/src/lib/mixins';
 
 .comparison-tool-table {
-  button {
-    @include mixins.reset-button;
-  }
-
   .table-divider {
     background-color: var(--color-gray-300);
     margin-left: -44px;
@@ -46,6 +42,19 @@
       }
     }
 
+    .pin-all-button,
+    .clear-all-button {
+      @include mixins.reset-button;
+    }
+
+    .base-download-dom-image-action-button {
+      button:hover {
+        @include mixins.link-hover;
+
+        background: none;
+      }
+    }
+
     .pin-all-button,
     .csv-download-button {
       display: flex;

libs/explorers/comparison-tool/src/lib/comparison-tool-table/comparison-tool-table.component.ts

@@ -10,25 +10,34 @@ import {
 } from '@angular/core';
 import {
   ComparisonToolFilterService,
+  ComparisonToolHelperService,
   ComparisonToolService,
   HelperService,
   PlatformService,
 } from '@sagebionetworks/explorers/services';
+import { DownloadDomImageComponent } from '@sagebionetworks/explorers/ui';
 import { SvgIconComponent } from '@sagebionetworks/explorers/util';
 import { TooltipModule } from 'primeng/tooltip';
 import { BaseTableComponent } from './base-table/base-table.component';
 import { ComparisonToolColumnsComponent } from './comparison-tool-columns/comparison-tool-columns.component';
 
 @Component({
   selector: 'explorers-comparison-tool-table',
-  imports: [TooltipModule, ComparisonToolColumnsComponent, SvgIconComponent, BaseTableComponent],
+  imports: [
+    TooltipModule,
+    ComparisonToolColumnsComponent,
+    SvgIconComponent,
+    BaseTableComponent,
+    DownloadDomImageComponent,
+  ],
   templateUrl: './comparison-tool-table.component.html',
   styleUrls: ['./comparison-tool-table.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class ComparisonToolTableComponent implements AfterViewInit {
   comparisonToolService = inject(ComparisonToolService);
   comparisonToolFilterService = inject(ComparisonToolFilterService);
+  comparisonToolHelperService = inject(ComparisonToolHelperService);
   helperService = inject(HelperService);
   platformService = inject(PlatformService);
 
@@ -74,7 +83,7 @@ export class ComparisonToolTableComponent implements AfterViewInit {
     }, 100);
   }
 
-  @HostListener('window:resize', ['$event'])
+  @HostListener('window:resize')
   onWindowResize() {
     if (this.platformService.isBrowser) {
       const tableElementWidth = this.tableElement()?.nativeElement?.offsetWidth || 0;
@@ -85,8 +94,19 @@ export class ComparisonToolTableComponent implements AfterViewInit {
     }
   }
 
-  downloadPinned() {
-    // TODO: MG-451
+  getPinnedDataFilename(): string {
+    const config = this.comparisonToolService.currentConfig();
+    if (!config) return '';
+    return this.comparisonToolHelperService.getComparisonToolDataFilename(config);
+  }
+
+  getPinnedDataForCsv(): string[][] {
+    const config = this.comparisonToolService.currentConfig();
+    if (!config) return [];
+
+    const data = this.pinnedData();
+    const siteUrl = window.location.origin;
+    return this.comparisonToolHelperService.buildComparisonToolCsvRows(data, config, siteUrl);
   }
 
   pinAll() {

libs/explorers/models/src/lib/comparison-tool.ts

@@ -87,3 +87,8 @@ export type HeatmapCircleColorKey<T extends HeatmapCircleData> = Extract<
   Exclude<keyof T, 'adj_p_val'>,
   string
 >;
+
+export type ComparisonToolLink = {
+  link_text?: string;
+  link_url?: string;
+};

libs/explorers/services/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/breakpoint-config.service';
 export * from './lib/comparison-tool-filter.service';
 export * from './lib/comparison-tool-filter.service.providers';
+export * from './lib/comparison-tool-helper.service';
 export * from './lib/comparison-tool.service';
 export * from './lib/comparison-tool.service.providers';
 export * from './lib/github.service';