feat(model-ad): add visualization overview functionality (Sage-Bionetworks#3678)

Author: sagely1

apps/model-ad/app/e2e/helpers/comparison-tool.ts

@@ -0,0 +1,12 @@
+import { Page, expect, test } from '@playwright/test';
+
+export const closeVisualizationOverviewDialog = async (page: Page) => {
+  await test.step('close visualization overview dialog', async () => {
+    const dialog = page.getByRole('dialog');
+
+    const closeBtn = dialog.getByRole('button').first();
+    await closeBtn.click();
+
+    await expect(dialog).toBeHidden();
+  });
+};

apps/model-ad/app/e2e/home.spec.ts

@@ -11,7 +11,7 @@ test.describe('home', () => {
 
     await modelOverviewCard.click();
 
-    await expect(page).toHaveURL('/comparison/model');
+    await page.waitForURL('/comparison/model');
     await expect(page.getByRole('heading', { level: 1, name: 'Model Overview' })).toBeVisible();
   });
 
@@ -25,7 +25,7 @@ test.describe('home', () => {
 
     await geneExpressionCard.click();
 
-    await expect(page).toHaveURL('/comparison/expression');
+    await page.waitForURL('/comparison/expression');
     await expect(page.getByRole('heading', { level: 1, name: 'Gene Expression' })).toBeVisible();
   });
 
@@ -39,7 +39,7 @@ test.describe('home', () => {
 
     await diseaseCorrelationCard.click();
 
-    await expect(page).toHaveURL('/comparison/correlation');
+    await page.waitForURL('/comparison/correlation');
     await expect(
       page.getByRole('heading', { level: 1, name: 'Disease Correlation' }),
     ).toBeVisible();

apps/model-ad/app/e2e/model-overview-comparison-tool.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { baseURL } from '../playwright.config';
+import { closeVisualizationOverviewDialog } from './helpers/comparison-tool';
 
 test.describe('model overview', () => {
   test('share URL button copies URL to clipboard', async ({ page, context }) => {
@@ -14,6 +15,9 @@ test.describe('model overview', () => {
 
     await page.waitForURL(path);
 
+    // close the visualization overview dialog
+    await closeVisualizationOverviewDialog(page);
+
     await shareUrlButton.click();
 
     const clipboardContent = await page.evaluate(() => navigator.clipboard.readText());

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

@@ -13,7 +13,6 @@
           <explorers-comparison-tool-table />
           <ng-content></ng-content>
           <explorers-help-links />
-          <explorers-legend-panel />
           <explorers-comparison-tool-filter-panel
             [filterConfigs]="currentConfig()?.filters || []"
             [(isOpen)]="isFilterPanelOpen"

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

@@ -7,7 +7,6 @@ import { ComparisonToolFilterPanelComponent } from './comparison-tool-filter-pan
 import { ComparisonToolHeaderComponent } from './comparison-tool-header/comparison-tool-header.component';
 import { ComparisonToolTableComponent } from './comparison-tool-table/comparison-tool-table.component';
 import { HelpLinksComponent } from './help-links/help-links.component';
-import { LegendPanelComponent } from './legend-panel/legend-panel.component';
 
 @Component({
   selector: 'explorers-comparison-tool',
@@ -18,7 +17,6 @@ import { LegendPanelComponent } from './legend-panel/legend-panel.component';
     ComparisonToolControlsComponent,
     ComparisonToolFilterListComponent,
     ComparisonToolTableComponent,
-    LegendPanelComponent,
     HelpLinksComponent,
   ],
   templateUrl: './comparison-tool.component.html',

libs/explorers/comparison-tool/src/lib/help-links/help-links.component.html

@@ -12,3 +12,6 @@
     </div>
   </div>
 </div>
+
+<explorers-legend-panel />
+<explorers-visualization-overview-panel />

libs/explorers/comparison-tool/src/lib/help-links/help-links.component.ts

@@ -1,8 +1,11 @@
 import { Component, computed, inject } from '@angular/core';
 import { ComparisonToolService } from '@sagebionetworks/explorers/services';
+import { LegendPanelComponent } from './legend-panel/legend-panel.component';
+import { VisualizationOverviewPanelComponent } from './visualization-overview-panel/visualization-overview-panel.component';
 
 @Component({
   selector: 'explorers-help-links',
+  imports: [LegendPanelComponent, VisualizationOverviewPanelComponent],
   templateUrl: './help-links.component.html',
   styleUrls: ['./help-links.component.scss'],
 })

libs/explorers/comparison-tool/src/lib/legend-panel/legend-panel.component.html renamed to libs/explorers/comparison-tool/src/lib/help-links/legend-panel/legend-panel.component.html

@@ -17,6 +17,6 @@
     [sizeChartText]="viewConfig().legendPanelConfig.sizeChartText"
   ></explorers-legend>
   <ng-template #footer>
-    <a (click)="onHowToClick()">Visualization Overview</a>
+    <a (click)="openVisualizationOverviewDialog()">Visualization Overview</a>
   </ng-template>
 </p-dialog>

libs/explorers/comparison-tool/src/lib/legend-panel/legend-panel.component.scss renamed to libs/explorers/comparison-tool/src/lib/help-links/legend-panel/legend-panel.component.scss

@@ -15,7 +15,9 @@ export class LegendPanelComponent {
 
   viewConfig = this.comparisonToolService.viewConfig;
 
-  onHowToClick() {
-    //TODO implement
+  openVisualizationOverviewDialog() {
+    // close the legend panel and open the visualization overview
+    this.comparisonToolService.setLegendVisibility(false);
+    this.comparisonToolService.setVisualizationOverviewVisibility(true);
   }
 }