feat(model-ad): add caching for pinned items in CT (MG-471) (Sage-Bionetworks#3687)

Author: sagely1

libs/explorers/services/src/lib/comparison-tool.service.spec.ts

@@ -1,6 +1,6 @@
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ComparisonToolColumn } from '@sagebionetworks/explorers/models';
+import { ComparisonToolColumn, ComparisonToolConfig } from '@sagebionetworks/explorers/models';
 import { mockComparisonToolDataConfig } from '@sagebionetworks/explorers/testing';
 import { FilterService, MessageService } from 'primeng/api';
 import { BehaviorSubject } from 'rxjs';
@@ -70,6 +70,113 @@ describe('ComparisonToolService', () => {
     expect(cachedColumns?.every((column) => column.selected)).toBe(true);
   });
 
+  describe('pinned items cache', () => {
+    const mockConfigs: ComparisonToolConfig[] = [
+      {
+        ...mockComparisonToolDataConfig[0],
+        dropdowns: ['category1', 'option1'],
+      },
+      {
+        ...mockComparisonToolDataConfig[0],
+        dropdowns: ['category1', 'option2'],
+      },
+      {
+        ...mockComparisonToolDataConfig[0],
+        dropdowns: ['category2', 'option1'],
+      },
+    ];
+
+    beforeEach(() => {
+      injectService().initialize(mockConfigs, ['category1', 'option1']);
+    });
+
+    it('should persist pinned items when switching between dropdown selections', () => {
+      // Pin items for first selection
+      service.pinItem('item1');
+      service.pinItem('item2');
+      expect(service.pinnedItems().size).toBe(2);
+      expect(service.isPinned('item1')).toBe(true);
+      expect(service.isPinned('item2')).toBe(true);
+
+      // Switch to second selection
+      service.setDropdownSelection(['category1', 'option2']);
+      // Should start with no pinned items for new selection
+      expect(service.pinnedItems().size).toBe(0);
+      expect(service.isPinned('item1')).toBe(false);
+
+      // Pin different items
+      service.pinItem('item3');
+      expect(service.pinnedItems().size).toBe(1);
+      expect(service.isPinned('item3')).toBe(true);
+
+      // Switch back to first selection
+      service.setDropdownSelection(['category1', 'option1']);
+      // Should restore originally pinned items
+      expect(service.pinnedItems().size).toBe(2);
+      expect(service.isPinned('item1')).toBe(true);
+      expect(service.isPinned('item2')).toBe(true);
+      expect(service.isPinned('item3')).toBe(false);
+
+      // Switch to second selection again
+      service.setDropdownSelection(['category1', 'option2']);
+      // Should restore pinned items from second selection
+      expect(service.pinnedItems().size).toBe(1);
+      expect(service.isPinned('item3')).toBe(true);
+      expect(service.isPinned('item1')).toBe(false);
+    });
+
+    it('should handle unpinning items and persist changes', () => {
+      // Pin and unpin items
+      service.pinItem('item1');
+      service.pinItem('item2');
+      service.unpinItem('item1');
+      expect(service.pinnedItems().size).toBe(1);
+      expect(service.isPinned('item2')).toBe(true);
+
+      // Switch and come back
+      service.setDropdownSelection(['category1', 'option2']);
+      service.setDropdownSelection(['category1', 'option1']);
+
+      // Should remember that item1 was unpinned
+      expect(service.pinnedItems().size).toBe(1);
+      expect(service.isPinned('item1')).toBe(false);
+      expect(service.isPinned('item2')).toBe(true);
+    });
+
+    it('should handle toggling pins correctly', () => {
+      service.togglePin('item1');
+      expect(service.isPinned('item1')).toBe(true);
+
+      service.togglePin('item1');
+      expect(service.isPinned('item1')).toBe(false);
+
+      // Pin again and switch selections
+      service.togglePin('item1');
+      expect(service.isPinned('item1')).toBe(true);
+
+      service.setDropdownSelection(['category1', 'option2']);
+      service.setDropdownSelection(['category1', 'option1']);
+
+      // Should still be pinned after switching back
+      expect(service.isPinned('item1')).toBe(true);
+    });
+
+    it('should handle pinning multiple items at once', () => {
+      service.pinList(['item1', 'item2', 'item3']);
+      expect(service.pinnedItems().size).toBe(3);
+
+      // Switch and return
+      service.setDropdownSelection(['category2', 'option1']);
+      service.setDropdownSelection(['category1', 'option1']);
+
+      // Should restore all pinned items
+      expect(service.pinnedItems().size).toBe(3);
+      expect(service.isPinned('item1')).toBe(true);
+      expect(service.isPinned('item2')).toBe(true);
+      expect(service.isPinned('item3')).toBe(true);
+    });
+  });
+
   describe('pin/unpin functionality', () => {
     it('should track pinned items correctly', () => {
       injectService().initialize(mockComparisonToolDataConfig);

libs/explorers/services/src/lib/comparison-tool.service.ts

@@ -61,6 +61,7 @@ export class ComparisonToolService<T> {
   private readonly columnsForDropdownsSignal = signal<Map<string, ComparisonToolColumn[]>>(
     new Map(),
   );
+  private readonly pinnedItemsForDropdownsSignal = signal<Map<string, Set<string>>>(new Map());
   private readonly unpinnedDataSignal = signal<T[]>([]);
   private readonly pinnedDataSignal = signal<T[]>([]);
 
@@ -148,6 +149,11 @@ export class ComparisonToolService<T> {
   }
 
   initialize(configs: ComparisonToolConfig[], selection?: string[]) {
+    // if it is already initialized, do not re-initialize
+    if (this.configs().length > 0) {
+      return;
+    }
+
     this.configsSignal.set(configs ?? []);
     this.totalResultsCount.set(0);
     if (this.hasInitializedConfig) {
@@ -157,14 +163,8 @@ export class ComparisonToolService<T> {
     this.setUnpinnedData([]);
     this.setPinnedData([]);
 
-    if (!configs?.length) {
-      this.updateDropdownSelectionIfChanged([]);
-      this.columnsForDropdownsSignal.set(new Map());
-      return;
-    }
-
     const normalizedSelection = this.normalizeSelection(selection ?? [], configs);
-    this.updateDropdownSelectionIfChanged(normalizedSelection);
+    this.dropdownSelectionSignal.set(normalizedSelection);
 
     const columnsMap = new Map<string, ComparisonToolColumn[]>();
     for (const config of configs) {
@@ -175,14 +175,14 @@ export class ComparisonToolService<T> {
     }
 
     this.columnsForDropdownsSignal.set(columnsMap);
+    this.pinnedItemsForDropdownsSignal.set(new Map());
     this.hasInitializedConfig = true;
   }
 
   setDropdownSelection(selection: string[]) {
     const configs = this.configsSignal();
     if (!configs.length) {
-      const normalizedSelection = selection ?? [];
-      this.updateDropdownSelectionIfChanged(normalizedSelection);
+      this.updateDropdownSelectionIfChanged(selection ?? []);
       return;
     }
 
@@ -339,9 +339,28 @@ export class ComparisonToolService<T> {
       return;
     }
 
+    // Save current pinned items before switching
+    const previousSelection = this.dropdownSelectionSignal();
+    const previousKey = this.dropdownKey(previousSelection);
+    const currentPinnedItems = this.pinnedItemsSignal();
+
+    this.pinnedItemsForDropdownsSignal.update((cache) => {
+      const next = new Map(cache);
+      next.set(previousKey, new Set(currentPinnedItems));
+      return next;
+    });
+
+    // Switch to new selection
     this.dropdownSelectionSignal.set(selection);
-    if (this.hasInitializedConfig) {
-      this.resetPinnedItems();
+
+    // Restore pinned items for new selection
+    const newKey = this.dropdownKey(selection);
+    const cachedPinnedItems = this.pinnedItemsForDropdownsSignal().get(newKey);
+
+    if (cachedPinnedItems) {
+      this.pinnedItemsSignal.set(new Set(cachedPinnedItems));
+    } else {
+      this.pinnedItemsSignal.set(new Set());
     }
   }
 

libs/model-ad/disease-correlation-comparison-tool/src/lib/disease-correlation-comparison-tool.component.ts

@@ -115,11 +115,6 @@ export class DiseaseCorrelationComparisonToolComponent implements OnInit {
   }
 
   getConfigs() {
-    // Skip if already initialized (service persists at route level)
-    if (this.comparisonToolService.configs().length > 0) {
-      return;
-    }
-
     this.comparisonToolConfigService
       .getComparisonToolConfig(ComparisonToolPage.DiseaseCorrelation)
       .pipe(shareReplay(1), takeUntilDestroyed(this.destroyRef))

libs/model-ad/gene-expression-comparison-tool/src/lib/gene-expression-comparison-tool.component.ts

@@ -97,11 +97,6 @@ export class GeneExpressionComparisonToolComponent implements OnInit {
   }
 
   getConfigs() {
-    // Skip if already initialized (service persists at route level)
-    if (this.comparisonToolService.configs().length > 0) {
-      return;
-    }
-
     this.comparisonToolConfigService
       .getComparisonToolConfig(ComparisonToolPage.GeneExpression)
       .pipe(shareReplay(1), takeUntilDestroyed(this.destroyRef))

libs/model-ad/model-overview-comparison-tool/src/lib/model-overview-comparison-tool.component.ts

@@ -92,11 +92,6 @@ export class ModelOverviewComparisonToolComponent implements OnInit {
   }
 
   getConfigs() {
-    // Skip if already initialized (service persists at route level)
-    if (this.comparisonToolService.configs().length > 0) {
-      return;
-    }
-
     this.comparisonToolConfigService
       .getComparisonToolConfig(ComparisonToolPage.ModelOverview)
       .pipe(shareReplay(1), takeUntilDestroyed(this.destroyRef))