Persist advanced-column selection in the URL

Author: kala-moz

src/__tests__/CompareResults/ResultsTable.test.tsx

@@ -1330,4 +1330,42 @@ describe('Advanced-columns toggle for mann-whitney-u testVersion', () => {
     expect(header().querySelector('.delta-header')).toBeFalsy();
     expect(header().querySelector('.effects-header')).toBeTruthy();
   });
+
+  it('shows the advanced columns named in the advanced_columns URL param', async () => {
+    const { testCompareMannWhitneyData } = getTestData();
+    setupAndRender(
+      testCompareMannWhitneyData,
+      'test_version=mann-whitney-u&advanced_columns=cliffs_delta',
+    );
+    await screen.findByText('a11yr');
+
+    const header = screen.getByTestId('table-header');
+    expect(header.querySelector('.delta-header')).toBeTruthy();
+    expect(header.querySelector('.effects-header')).toBeFalsy();
+  });
+
+  it('persists the advanced-column selection to the advanced_columns URL param', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    const { testCompareMannWhitneyData } = getTestData();
+    setupAndRender(testCompareMannWhitneyData, 'test_version=mann-whitney-u');
+    await screen.findByText('a11yr');
+
+    const advancedParam = () =>
+      new URLSearchParams(window.location.search).get('advanced_columns');
+    expect(advancedParam()).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: /Advanced columns/ }));
+    await user.click(screen.getByRole('checkbox', { name: "Cliff's Delta" }));
+    expect(advancedParam()).toBe('cliffs_delta');
+
+    await user.click(screen.getByRole('checkbox', { name: 'CLES' }));
+    expect(advancedParam()).toBe('cliffs_delta,cles');
+
+    // Turning a column off updates the param; turning the last one off removes it.
+    await user.click(screen.getByRole('checkbox', { name: "Cliff's Delta" }));
+    expect(advancedParam()).toBe('cles');
+
+    await user.click(screen.getByRole('checkbox', { name: 'CLES' }));
+    expect(advancedParam()).toBeNull();
+  });
 });

src/components/CompareResults/AdvancedColumnsMenu.tsx

@@ -4,7 +4,6 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import type { PayloadAction } from '@reduxjs/toolkit';
 import {
   usePopupState,
   bindTrigger,
@@ -13,42 +12,57 @@ import {
 
 import { useAppDispatch } from '../../hooks/app';
 import useAdvancedColumns from '../../hooks/useAdvancedColumns';
+import useRawSearchParams from '../../hooks/useRawSearchParams';
 import {
   updateShowCliffsDelta,
   updateShowCles,
 } from '../../reducers/ColumnPrefsSlice';
+import type { AdvancedColumns } from '../../types/types';
+import {
+  ADVANCED_COLUMNS_PARAM,
+  serializeAdvancedColumns,
+} from '../../utils/advancedColumnsUrl';
 
 // Dropdown that reveals a checkbox for each advanced statistics column
 // (Cliff's Delta, CLES). Each is toggled independently — either, both, or
-// neither can be shown. Self-contained: reads/writes the columnPrefs Redux
-// slice and mirrors each choice to localStorage so it persists across reloads.
-// Shared by the main results controls and the subtests controls.
+// neither can be shown. The selection is stored in the URL so a shared link
+// reproduces it (via history.replaceState — no data refetch) and mirrored to
+// Redux for reactive rendering. Shared by the main and subtests controls.
 function AdvancedColumnsMenu() {
   const popupState = usePopupState({
     variant: 'popover',
     popupId: 'advanced-columns-menu',
   });
   const dispatch = useAppDispatch();
   const { cliffsDelta, cles } = useAdvancedColumns();
+  const [, updateRawSearchParams] = useRawSearchParams();
+
+  const applyAdvancedColumns = (next: AdvancedColumns) => {
+    dispatch(updateShowCliffsDelta(next.cliffsDelta));
+    dispatch(updateShowCles(next.cles));
 
-  // Dispatch the toggle and mirror the choice to localStorage under its key.
-  const toggle =
-    (action: (value: boolean) => PayloadAction<boolean>, storageKey: string) =>
-    (checked: boolean) => {
-      dispatch(action(checked));
-      localStorage.setItem(storageKey, String(checked));
-    };
+    const params = new URLSearchParams(window.location.search);
+    const value = serializeAdvancedColumns(next);
+    if (value) {
+      params.set(ADVANCED_COLUMNS_PARAM, value);
+    } else {
+      params.delete(ADVANCED_COLUMNS_PARAM);
+    }
+    updateRawSearchParams(params);
+  };
 
   const columns = [
     {
       label: "Cliff's Delta",
       checked: cliffsDelta,
-      onChange: toggle(updateShowCliffsDelta, 'showCliffsDelta'),
+      onChange: (checked: boolean) =>
+        applyAdvancedColumns({ cliffsDelta: checked, cles }),
     },
     {
       label: 'CLES',
       checked: cles,
-      onChange: toggle(updateShowCles, 'showCles'),
+      onChange: (checked: boolean) =>
+        applyAdvancedColumns({ cliffsDelta, cles: checked }),
     },
   ];
 

src/components/CompareResults/ResultsTable.tsx

@@ -12,6 +12,7 @@ import TableHeader from './TableHeader';
 import { MANN_WHITNEY_U } from '../../common/constants';
 import useAdvancedColumns from '../../hooks/useAdvancedColumns';
 import useRawSearchParams from '../../hooks/useRawSearchParams';
+import useSeedAdvancedColumnsFromUrl from '../../hooks/useSeedAdvancedColumnsFromUrl';
 import useTableFilters from '../../hooks/useTableFilters';
 import useTableSort from '../../hooks/useTableSort';
 import { Framework, TestVersion } from '../../types/types';
@@ -36,6 +37,7 @@ export default function ResultsTable() {
   // This is our custom hook that updates the search params without a rerender.
   const [rawSearchParams, updateRawSearchParams] = useRawSearchParams();
 
+  useSeedAdvancedColumnsFromUrl();
   const advancedColumns = useAdvancedColumns();
 
   const columnsConfig = useMemo(

src/components/CompareResults/SubtestsResults/SubtestsResultsTable.tsx

@@ -9,6 +9,7 @@ import NoResultsFound from '.././NoResultsFound';
 import TableHeader from '.././TableHeader';
 import { STUDENT_T } from '../../../common/constants';
 import useAdvancedColumns from '../../../hooks/useAdvancedColumns';
+import useSeedAdvancedColumnsFromUrl from '../../../hooks/useSeedAdvancedColumnsFromUrl';
 import useTableFilters, { filterResults } from '../../../hooks/useTableFilters';
 import useTableSort, { sortResults } from '../../../hooks/useTableSort';
 import type { CombinedResultsItemType } from '../../../types/state';
@@ -80,6 +81,7 @@ function SubtestsResultsTable({
   replicates,
   testVersion,
 }: ResultsTableProps) {
+  useSeedAdvancedColumnsFromUrl();
   const advancedColumns = useAdvancedColumns();
   const columnsConfiguration = useMemo(
     () =>

src/hooks/useSeedAdvancedColumnsFromUrl.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useAppDispatch } from './app';
+import {
+  updateShowCliffsDelta,
+  updateShowCles,
+} from '../reducers/ColumnPrefsSlice';
+import {
+  ADVANCED_COLUMNS_PARAM,
+  parseAdvancedColumns,
+} from '../utils/advancedColumnsUrl';
+
+// On mount, seed the advanced-column visibility from the URL so a shared link
+// reproduces the selected columns. Toggling updates both the URL (for sharing)
+// and Redux (for reactive rendering); this only handles the initial
+// URL → Redux direction. Call once per results view.
+function useSeedAdvancedColumnsFromUrl() {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has(ADVANCED_COLUMNS_PARAM)) {
+      return;
+    }
+    const { cliffsDelta, cles } = parseAdvancedColumns(params);
+    dispatch(updateShowCliffsDelta(cliffsDelta));
+    dispatch(updateShowCles(cles));
+  }, []);
+}
+
+export default useSeedAdvancedColumnsFromUrl;

src/reducers/ColumnPrefsSlice.ts

@@ -1,20 +1,19 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-// Results-view display preferences, persisted to localStorage so choices
-// survive reloads:
+// Results-view display preferences:
 //   - showCliffsDelta / showCles: the two advanced statistics columns, toggled
-//     independently from the "Advanced columns" dropdown. Either, both, or
-//     neither can be shown.
+//     independently from the "Advanced columns" dropdown. Persisted in the URL
+//     (see utils/advancedColumnsUrl) so shared links reproduce the selection;
+//     seeded into this slice on mount. Default off (the simplified view).
 //   - showHowToRead: when true the "How to read the results" helper panel is
-//     shown above the table. Defaults on so new contributors get the guidance;
-//     dismissing it (once) is remembered.
+//     shown above the table. Persisted to localStorage.
 const initialState: {
   showCliffsDelta: boolean;
   showCles: boolean;
   showHowToRead: boolean;
 } = {
-  showCliffsDelta: localStorage.getItem('showCliffsDelta') === 'true',
-  showCles: localStorage.getItem('showCles') === 'true',
+  showCliffsDelta: false,
+  showCles: false,
   showHowToRead: localStorage.getItem('showHowToRead') !== 'false',
 };
 

src/utils/advancedColumnsUrl.ts

@@ -0,0 +1,37 @@
+import type { AdvancedColumns } from '../types/types';
+
+// The advanced (power-user) columns are persisted in the URL so a shared link
+// reproduces the selected columns. Encoded as a comma-separated list of the
+// enabled column keys, e.g. `?advanced_columns=cliffs_delta,cles`. An absent
+// param means neither is shown (the simplified view).
+export const ADVANCED_COLUMNS_PARAM = 'advanced_columns';
+
+const CLIFFS_DELTA = 'cliffs_delta';
+const CLES = 'cles';
+
+// Parse advanced-column visibility from a URL search string or params.
+export function parseAdvancedColumns(
+  search: string | URLSearchParams,
+): AdvancedColumns {
+  const params =
+    typeof search === 'string' ? new URLSearchParams(search) : search;
+  const enabled = (params.get(ADVANCED_COLUMNS_PARAM) ?? '')
+    .split(',')
+    .filter(Boolean);
+  return {
+    cliffsDelta: enabled.includes(CLIFFS_DELTA),
+    cles: enabled.includes(CLES),
+  };
+}
+
+// Serialize to the comma-list value, or null when no advanced column is on so
+// the caller can delete the param and keep shared URLs clean.
+export function serializeAdvancedColumns(
+  advanced: AdvancedColumns,
+): string | null {
+  const enabled = [
+    advanced.cliffsDelta ? CLIFFS_DELTA : null,
+    advanced.cles ? CLES : null,
+  ].filter(Boolean);
+  return enabled.length ? enabled.join(',') : null;
+}