feat(model-ad): sync pinned items with URL (MG-439) (Sage-Bionetworks#3686)

Author: hallieswan

apps/model-ad/app/e2e/constants.ts

@@ -0,0 +1,5 @@
+export const COMPARISON_TOOL_PATHS: Record<string, string> = {
+  'Model Overview': '/comparison/model',
+  'Gene Expression': '/comparison/expression',
+  'Disease Correlation': '/comparison/correlation',
+};

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

@@ -1,4 +1,6 @@
 import { Page, expect, test } from '@playwright/test';
+import { getUnpinnedTable } from '@sagebionetworks/explorers/testing/e2e';
+import { COMPARISON_TOOL_PATHS } from '../constants';
 
 export const closeVisualizationOverviewDialog = async (page: Page) => {
   await test.step('close visualization overview dialog', async () => {
@@ -10,3 +12,22 @@ export const closeVisualizationOverviewDialog = async (page: Page) => {
     await expect(dialog).toBeHidden();
   });
 };
+
+export const navigateToComparison = async (
+  page: Page,
+  name: string,
+  shouldCloseVisualizationOverviewDialog = false,
+  queryParameters?: string,
+) => {
+  const path = COMPARISON_TOOL_PATHS[name];
+  const url = queryParameters ? `${path}?${queryParameters}` : path;
+  await page.goto(url);
+
+  if (shouldCloseVisualizationOverviewDialog) {
+    await closeVisualizationOverviewDialog(page);
+  }
+
+  await expect(page.getByRole('heading', { level: 1, name })).toBeVisible();
+  await expect(page.locator('explorers-base-table')).toHaveCount(2);
+  await expect(getUnpinnedTable(page).locator('tbody tr').first()).toBeVisible();
+};

apps/model-ad/app/e2e/helpers.ts renamed to apps/model-ad/app/e2e/helpers/search.ts

@@ -1,6 +1,6 @@
 import { expect, Page, test } from '@playwright/test';
 import { baseURL } from '../playwright.config';
-import { searchAndGetSearchListItems } from './helpers';
+import { searchAndGetSearchListItems } from './helpers/search';
 
 async function isPageAtTop(page: Page) {
   return await page.evaluate(() => window.pageYOffset === 0);

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

@@ -1,26 +1,82 @@
-import { expect, test } from '@playwright/test';
+import { expect, test, type Page } from '@playwright/test';
+import {
+  expectPinnedParams,
+  getPinnedTable,
+  getRowByName,
+  getUnpinnedTable,
+  pinByName,
+  unPinByName,
+} from '@sagebionetworks/explorers/testing/e2e';
+import { ModelOverview } from '@sagebionetworks/model-ad/api-client';
 import { baseURL } from '../playwright.config';
-import { closeVisualizationOverviewDialog } from './helpers/comparison-tool';
+import { COMPARISON_TOOL_PATHS } from './constants';
+import { navigateToComparison } from './helpers/comparison-tool';
+
+const MODEL_OVERVIEW_PATH = COMPARISON_TOOL_PATHS['Model Overview'];
+const MODEL_OVERVIEW_API_PATH = '/comparison-tools/model-overview';
+
+const fetchModelOverviews = async (page: Page): Promise<ModelOverview[]> => {
+  const response = await page.request.get(`${baseURL}/api/v1/${MODEL_OVERVIEW_API_PATH}`, {
+    params: { itemFilterType: 'exclude' },
+  });
+  expect(response.ok()).toBeTruthy();
+  const data = (await response.json()) as ModelOverview[];
+  return data;
+};
 
 test.describe('model overview', () => {
   test('share URL button copies URL to clipboard', async ({ page, context }) => {
-    const path = '/comparison/model';
     await context.grantPermissions(['clipboard-read']);
 
-    await page.goto(path);
-    await expect(page.getByRole('heading', { level: 1, name: 'Model Overview' })).toBeVisible();
+    await navigateToComparison(page, 'Model Overview', true);
 
     const shareUrlButton = page.getByRole('button', { name: 'Share URL' });
     await expect(shareUrlButton).toBeVisible();
 
-    await page.waitForURL(path);
-
-    // close the visualization overview dialog
-    await closeVisualizationOverviewDialog(page);
+    await page.waitForURL(MODEL_OVERVIEW_PATH);
 
     await shareUrlButton.click();
 
     const clipboardContent = await page.evaluate(() => navigator.clipboard.readText());
-    expect(clipboardContent).toEqual(`${baseURL}${path}`);
+    expect(clipboardContent).toEqual(`${baseURL}${MODEL_OVERVIEW_PATH}`);
+  });
+
+  test('pinning and unpinning items updates the pinned query param', async ({ page }) => {
+    const models = await fetchModelOverviews(page);
+    expect(models.length).toBeGreaterThan(1);
+
+    const [firstModel, secondModel] = models;
+
+    await navigateToComparison(page, 'Model Overview', true);
+
+    const pinnedTable = getPinnedTable(page);
+    const unpinnedTable = getUnpinnedTable(page);
+
+    await pinByName(unpinnedTable, page, firstModel.name);
+    await expect(getRowByName(pinnedTable, page, firstModel.name)).toHaveCount(1);
+    await expectPinnedParams(page, [firstModel._id]);
+
+    await pinByName(unpinnedTable, page, secondModel.name);
+    await expect(getRowByName(pinnedTable, page, secondModel.name)).toHaveCount(1);
+    await expectPinnedParams(page, [firstModel._id, secondModel._id]);
+
+    const firstPinnedRow = await unPinByName(pinnedTable, page, firstModel.name);
+    await expect(firstPinnedRow).toHaveCount(0);
+    await expectPinnedParams(page, [secondModel._id]);
+
+    const secondPinnedRow = await unPinByName(pinnedTable, page, secondModel.name);
+    await expect(secondPinnedRow).toHaveCount(0);
+    await expectPinnedParams(page, []);
+  });
+
+  test('pinned items in the URL are restored in the UI', async ({ page }) => {
+    const [firstModel] = await fetchModelOverviews(page);
+    expect(firstModel).toBeDefined();
+
+    await navigateToComparison(page, 'Model Overview', true, `pinned=${firstModel._id}`);
+
+    await expect(page.locator('explorers-base-table')).toHaveCount(2);
+    await expect(getRowByName(getPinnedTable(page), page, firstModel.name)).toHaveCount(1);
+    await expectPinnedParams(page, [firstModel._id]);
   });
 });

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

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { headerSearchPlaceholder, searchAndGetSearchListItems } from './helpers';
+import { headerSearchPlaceholder, searchAndGetSearchListItems } from './helpers/search';
 
 test.describe('search', () => {
   test('can search for model and aliases then navigate to model details from search result', async ({

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

@@ -5,6 +5,7 @@
 
   <div class="primary-control-icons">
     <button
+      type="button"
       (click)="viewDetailsWasClicked()"
       [pTooltip]="viewConfig().viewDetailsTooltip"
       tooltipPosition="top"
@@ -19,6 +20,7 @@
     </button>
 
     <button
+      type="button"
       (click)="pinToggle()"
       [pTooltip]="pinTooltip()"
       tooltipPosition="top"

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

@@ -17,7 +17,18 @@
   font-weight: 700;
 
   .primary-control-icons {
-    display: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    opacity: 0;
+    max-width: 0;
+    overflow: hidden;
+    margin-left: 0;
+    transition:
+      opacity vars.$transition-duration ease,
+      max-width vars.$transition-duration ease,
+      margin-left vars.$transition-duration ease;
   }
 
   > div:first-child {
@@ -26,19 +37,15 @@
     align-items: center;
   }
 
-  &:not(:hover) {
-    > div:not(:first-child) {
-      display: none;
-    }
-  }
-
-  &:hover {
+  &:hover,
+  &:focus-within {
     background-color: var(--color-action-primary);
     color: #fff;
 
     .primary-control-icons {
       margin-left: 14px;
-      display: flex;
+      opacity: 1;
+      max-width: 120px;
     }
 
     > div:first-child {
@@ -56,6 +63,12 @@
     justify-content: center;
     cursor: pointer;
 
+    &:focus-visible {
+      outline: none;
+      background-color: rgb(255 255 255 / 20%);
+      border-radius: 4px;
+    }
+
     &:disabled {
       opacity: 0.5;
       cursor: default;

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

@@ -149,4 +149,29 @@ describe('PrimaryIdentifierControlsComponent', () => {
       'You have already pinned the maximum number of items (2). You must unpin some items before you can pin more.',
     );
   });
+
+  it('should call viewDetailsClick when activated with the keyboard', async () => {
+    const { user, viewDetailsButton, viewDetailsClickSpy } = await setup();
+
+    await user.tab();
+    expect(viewDetailsButton).toHaveFocus();
+
+    await user.keyboard('[Enter]');
+    expect(viewDetailsClickSpy).toHaveBeenCalledWith('68fff1aaeb12b9674515fd58', '3xTg-AD');
+  });
+
+  it('should toggle pin state when activated with the keyboard', async () => {
+    const { user, pinButton, service } = await setup();
+
+    await user.tab();
+    await user.tab();
+    expect(pinButton).toHaveFocus();
+    expect(service.isPinned('68fff1aaeb12b9674515fd58')).toBe(false);
+
+    await user.keyboard('[Space]');
+    expect(service.isPinned('68fff1aaeb12b9674515fd58')).toBe(true);
+
+    await user.keyboard('[Space]');
+    expect(service.isPinned('68fff1aaeb12b9674515fd58')).toBe(false);
+  });
 });

libs/explorers/comparison-tool/src/lib/comparison-tool-table/primary-identifier-controls/primary-identifier-controls.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, input } from '@angular/core';
+import { Component, HostBinding, computed, inject, input } from '@angular/core';
 import { ComparisonToolService } from '@sagebionetworks/explorers/services';
 import { SvgIconComponent } from '@sagebionetworks/explorers/util';
 import { TooltipModule } from 'primeng/tooltip';
@@ -15,6 +15,14 @@ export class PrimaryIdentifierControlsComponent {
   id = input.required<string>();
   label = input.required<string>();
 
+  @HostBinding('attr.role')
+  protected readonly hostRole = 'group';
+
+  @HostBinding('attr.aria-label')
+  protected get hostAriaLabel(): string {
+    return this.label();
+  }
+
   maxPinnedItems = this.comparisonToolService.maxPinnedItems;
   hasMaxPinnedItems = this.comparisonToolService.hasMaxPinnedItems;
   viewConfig = this.comparisonToolService.viewConfig;