Fix legend visibility persistence, CATH-Gene3D splitting, and Feedback button styling

app/src/components/Header.tsx

@@ -9,6 +9,18 @@ import { getNavigation } from '../../../config/navigation';
 
 const FEEDBACK_HREF = buildMailto({ subject: 'ProtSpace feedback' });
 
+// Ghost-style Feedback CTA: transparent, on-brand blue text/icon with a faint blue
+// hover — de-emphasized vs. the app-shell primary (#3c83f6). The hue is variant-aware
+// so the label clears WCAG AA on both header backgrounds: the canonical ProtSpace blue
+// (#00a3e0, ~5.6:1) on the dark header, and a darker shade (#006d96, ~5.3:1) on the
+// light Explore header, where #00a3e0 would only reach ~2.6:1.
+// Both literals are spelled out so Tailwind's source scan can generate the arbitrary
+// color utilities (it cannot see classes built from interpolated strings).
+const FEEDBACK_BUTTON_CLASS_DEFAULT =
+  'text-[#00a3e0] hover:bg-[#00a3e0]/10 hover:text-[#00a3e0] focus-visible:ring-[#00a3e0]';
+const FEEDBACK_BUTTON_CLASS_LIGHT =
+  'text-[#006d96] hover:bg-[#006d96]/10 hover:text-[#006d96] focus-visible:ring-[#006d96]';
+
 const mode = import.meta.env.MODE === 'production' ? 'production' : 'development';
 const navItems = getNavigation(mode);
 
@@ -31,6 +43,8 @@ const Header = ({ variant = 'default', className }: HeaderProps) => {
   const textClass = variant === 'light' ? 'text-slate-900' : 'text-foreground';
   const hoverTextClass = variant === 'light' ? 'hover:text-slate-700' : 'hover:text-primary';
   const mutedTextClass = variant === 'light' ? 'text-slate-700' : 'text-foreground/80';
+  const feedbackButtonClass =
+    variant === 'light' ? FEEDBACK_BUTTON_CLASS_LIGHT : FEEDBACK_BUTTON_CLASS_DEFAULT;
 
   const headerClasses = cn(
     'fixed top-0 left-0 right-0 z-50 border-b backdrop-blur-lg',
@@ -127,7 +141,7 @@ const Header = ({ variant = 'default', className }: HeaderProps) => {
             })}
 
             {/* Feedback CTA */}
-            <Button asChild size="sm">
+            <Button asChild variant="ghost" size="sm" className={feedbackButtonClass}>
               <a href={FEEDBACK_HREF}>
                 <MessageSquareText />
                 Feedback
@@ -232,7 +246,12 @@ const Header = ({ variant = 'default', className }: HeaderProps) => {
             })}
 
             {/* Feedback CTA */}
-            <Button asChild size="sm" className="w-full mt-2">
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className={cn(feedbackButtonClass, 'w-full mt-2')}
+            >
               <a href={FEEDBACK_HREF} onClick={() => setIsMenuOpen(false)}>
                 <MessageSquareText />
                 Feedback

app/src/explore/control-bar-events.ts

@@ -1,8 +1,4 @@
-import type {
-  ProtspaceControlBar,
-  ProtspaceScatterplot,
-  SelectionDisabledNotificationDetail,
-} from '@protspace/core';
+import type { SelectionDisabledNotificationDetail } from '@protspace/core';
 import { notify } from '../lib/notify';
 import { getSelectionDisabledNotification } from './notifications';
 import type { DatasetController } from './dataset-controller';
@@ -15,26 +11,21 @@ interface ControlBarEventsOptions {
     listener: EventListenerOrEventListenerObject,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  controlBar: ProtspaceControlBar;
   datasetController: DatasetController;
   handleExport(event: Event): Promise<void>;
   interactionController: InteractionController;
-  plotElement: ProtspaceScatterplot;
   viewController: ViewController;
 }
 
 export function bindControlBarEvents({
   addControlBarListener,
-  controlBar,
   datasetController,
   handleExport,
   interactionController,
-  plotElement,
   viewController,
 }: ControlBarEventsOptions): void {
   addControlBarListener('annotation-change', () => {
-    const nextAnnotation = controlBar.selectedAnnotation || plotElement.selectedAnnotation || '';
-    interactionController.handleAnnotationChange(nextAnnotation);
+    interactionController.handleAnnotationChange();
     viewController.handleUserAnnotationChange();
   });
 

app/src/explore/dataset-controller.ts

@@ -108,7 +108,7 @@
       loadSequence = loadMeta.sequence;
 
       if (runningLoadMeta && loadMeta.sequence !== runningLoadMeta.sequence) {
         console.log('Ignoring stale data load result:', {
           source,
           fileName: file?.name ?? null,
           loadKind: loadMeta.kind,
@@ -138,11 +138,7 @@
       legendElement.clearForNewDataset(datasetHash, shouldClearPersistedState);
       controlBar.clearForNewDataset(datasetHash, shouldClearPersistedState);
 
-      const initialViewFallback = Object.keys(data.annotations)[0] ?? '';
-      interactionController.setLastKnownAnnotation(initialViewFallback);
-
-      const initialView = await loadData(data);
-      interactionController.setLastKnownAnnotation(initialView?.annotation ?? initialViewFallback);
+      await loadData(data);
 
       const shouldApplyEmbeddedFileSettings = settings && loadMeta.kind !== 'opfs';
       if (shouldApplyEmbeddedFileSettings) {
@@ -254,7 +250,7 @@
     const loadSequence = runningLoadMeta?.sequence ?? null;
 
     if (customEvent.detail.originalError?.name === 'AbortError') {
       console.log('Data load cancelled by user');
       if (loadSequence !== null) {
         loadQueue.resolvePendingLoadFinalization(loadSequence);
       }
@@ -299,7 +295,7 @@
     loadPersistedOrDefaultDataset: persistedDatasetController.loadPersistedOrDefaultDataset,
     tryLoadPersistedAgain: persistedDatasetController.tryLoadPersistedAgain,
     handleLoadingStart() {
       console.log('Data loading started');
       overlayController.update(true, 5, 'Analyzing file structure...', 'Starting upload...');
     },
     handleLoadingProgress(event: Event) {

app/src/explore/interaction-controller.ts

@@ -6,7 +6,6 @@
   StructureErrorEventDetail,
   StructureLoadEvent,
 } from '@protspace/core';
-import type { VisualizationData } from '@protspace/utils';
 import { getProteinAnnotationIndices } from '@protspace/utils';
 import { notify } from '../lib/notify';
 import { getLegendErrorNotification } from './notifications';
@@ -16,34 +15,28 @@
   plotElement: ProtspaceScatterplot;
   selectedProteinElement: HTMLElement | null;
   structureViewer: ProtspaceStructureViewer;
-  clearPersistedLegendHiddenValues: (annotation: string, dataOverride?: VisualizationData) => void;
 }
 
 export interface InteractionController {
   updateLegend(): void;
   updateSelectedProteinDisplay(proteinId: string | null): void;
   getSelectedProteins(): string[];
-  setLastKnownAnnotation(annotation: string): void;
   handleSelectionChange(event: Event): void;
   handlePlotDataChange(): void;
-  handleLegendItemClick(event: Event): void;
   handleLegendError(event: Event): void;
   handleStructureLoad(event: Event): void;
   handleStructureError(event: Event): void;
   handleStructureClose(event: Event): void;
-  handleAnnotationChange(nextAnnotation: string): void;
+  handleAnnotationChange(): void;
 }
 
 export function createInteractionController({
   legendElement,
   plotElement,
   selectedProteinElement,
   structureViewer,
-  clearPersistedLegendHiddenValues,
 }: InteractionControllerOptions): InteractionController {
-  let hiddenValues: string[] = [];
   let selectedProteins: string[] = [];
-  let lastKnownAnnotation = '';
 
   const updateSelectedProteinDisplay = (proteinId: string | null) => {
     if (!selectedProteinElement) {
@@ -96,9 +89,6 @@
     getSelectedProteins() {
       return selectedProteins;
     },
-    setLastKnownAnnotation(annotation) {
-      lastKnownAnnotation = annotation;
-    },
     handleSelectionChange(event) {
       const customEvent = event as CustomEvent<{ proteinIds?: string[] }>;
       selectedProteins = Array.isArray(customEvent.detail.proteinIds)
@@ -118,17 +108,6 @@
       selectedProteins = plotElement.selectedProteinIds || [];
       updateLegend();
     },
-    handleLegendItemClick(event) {
-      const customEvent = event as CustomEvent<{ value: string | null }>;
-      const valueKey = customEvent.detail.value === null ? 'null' : customEvent.detail.value;
-
-      if (hiddenValues.includes(valueKey)) {
-        hiddenValues = hiddenValues.filter((value) => value !== valueKey);
-        return;
-      }
-
-      hiddenValues = [...hiddenValues, valueKey];
-    },
     handleLegendError(event) {
       const customEvent = event as CustomEvent<LegendErrorEventDetail>;
       console.error('Legend error:', customEvent.detail);
@@ -137,7 +116,7 @@
     handleStructureLoad(event) {
       const customEvent = event as StructureLoadEvent;
       if (customEvent.detail.status === 'loaded') {
         console.log(`✅ Structure loaded: ${customEvent.detail.proteinId}`);
       }
     },
     handleStructureError(event) {
@@ -152,15 +131,16 @@
       console.log('Structure viewer should now be hidden');
       updateSelectedProteinDisplay(null);
     },
-    handleAnnotationChange(nextAnnotation) {
-      if (lastKnownAnnotation && lastKnownAnnotation !== nextAnnotation) {
-        clearPersistedLegendHiddenValues(lastKnownAnnotation);
-      }
-
-      hiddenValues = [];
-      plotElement.hiddenAnnotationValues = hiddenValues;
+    handleAnnotationChange() {
+      // Synchronously clear the plot's hidden set for the newly selected
+      // annotation. The core legend owns per-annotation visibility: it persists
+      // hidden categories (saveSettings/loadSettings, keyed by datasetHash +
+      // annotation) and restores them on its own (async, Lit-driven) update
+      // cycle, which runs after this synchronous handler — so this reset is
+      // intentionally overwritten and switching away and back restores the
+      // previously hidden categories.
+      plotElement.hiddenAnnotationValues = [];
       updateLegend();
-      lastKnownAnnotation = nextAnnotation;
     },
   };
 }

app/src/explore/runtime.ts

@@ -21,7 +21,6 @@ import {
 } from './fasta-prep-limits';
 import { createLoadQueue } from './load-queue';
 import { createLoadingOverlayController } from './loading-overlay';
-import { createPersistedLegendController } from './persisted-legend';
 import { startInitialExploreLoad } from './startup';
 import { NOOP_CONTROLLER, type ExploreController } from './types';
 import { createViewController } from './view-controller';
@@ -217,16 +216,11 @@ export async function initializeExploreRuntime(): Promise<ExploreController> {
   });
   lifecycle.addCleanup(() => viewController.dispose());
 
-  const persistedLegendController = createPersistedLegendController({
-    plotElement,
-  });
-
   const interactionController = createInteractionController({
     legendElement,
     plotElement,
     selectedProteinElement,
     structureViewer,
-    clearPersistedLegendHiddenValues: persistedLegendController.clearPersistedLegendHiddenValues,
   });
 
   const datasetController = createDatasetController({
@@ -275,12 +269,6 @@ export async function initializeExploreRuntime(): Promise<ExploreController> {
     'data-isolation-reset',
     interactionController.updateLegend,
   );
-  addTrackedEventListener(
-    lifecycle,
-    legendElement,
-    'legend-item-click',
-    interactionController.handleLegendItemClick,
-  );
   addTrackedEventListener(
     lifecycle,
     legendElement,
@@ -321,11 +309,9 @@ export async function initializeExploreRuntime(): Promise<ExploreController> {
     addControlBarListener(type, listener, options) {
       addTrackedEventListener(lifecycle, controlBar, type, listener, options);
     },
-    controlBar,
     datasetController,
     handleExport,
     interactionController,
-    plotElement,
     viewController,
   });
 

app/tests/url-view-state.spec.ts

@@ -813,7 +813,7 @@ test.describe('URL-backed explore view state', () => {
     await expect(page).toHaveURL(/foo=1/);
   });
 
-  test('resets hidden legend state when back navigation changes annotation via URL', async ({
+  test('restores hidden legend state when back navigation returns to a previous annotation via URL', async ({
     page,
   }) => {
     await page.goto(
@@ -838,6 +838,37 @@ test.describe('URL-backed explore view state', () => {
 
     await page.goBack();
     await waitForView(page, { annotation: targetAnnotation, projection: targetProjection });
-    await expect.poll(() => isLegendItemHidden(page, firstLegendValue)).toBe(false);
+    // Per-annotation legend visibility is persisted (datasetHash + annotation), so
+    // returning to the original annotation restores the previously hidden category.
+    await expect.poll(() => isLegendItemHidden(page, firstLegendValue)).toBe(true);
+  });
+
+  test('keeps hidden legend categories when switching annotation away and back via the control bar', async ({
+    page,
+  }) => {
+    await page.goto(
+      `/explore?annotation=${encodeURIComponent(targetAnnotation)}&projection=${encodeURIComponent(targetProjection)}`,
+    );
+    await dismissTourIfPresent(page);
+    await waitForExploreDataLoad(page);
+    await waitForView(page, { annotation: targetAnnotation, projection: targetProjection });
+
+    const currentView = await getCurrentView(page);
+    const nextAnnotation = currentView.annotations.find(
+      (annotation) => annotation !== targetAnnotation,
+    );
+    expect(nextAnnotation).toBeTruthy();
+
+    const firstLegendValue = await getFirstLegendItemValue(page);
+    await clickLegendItem(page, firstLegendValue);
+    await expect.poll(() => isLegendItemHidden(page, firstLegendValue)).toBe(true);
+
+    // Switch to another annotation and back, both via the control bar (no URL navigation).
+    await selectAnnotation(page, nextAnnotation!);
+    await waitForView(page, { annotation: nextAnnotation! });
+    await selectAnnotation(page, targetAnnotation);
+    await waitForView(page, { annotation: targetAnnotation });
+
+    await expect.poll(() => isLegendItemHidden(page, firstLegendValue)).toBe(true);
   });
 });