Repository: dhsc-govuk/FingertipsNext
Pull request #601: DHSCFT-TECH: tweak to have benchmark select area per view
Author: login: alibombaye
Created: 2025-05-23T14:16:55Z | Merged: 2025-05-27T10:43:48Z

# Description

Due to complexity issue decided as an interim solution to have benchmark area selection at view level rather than at chart level

![Screenshot 2025-05-23 at 15 16 09](https://github.com/user-attachments/assets/df039215-2fad-4209-b17e-96c41023e3c5)

## Validation

Tested One indicator One Area View benchmark selection still works as expected



Diff:
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
index 75c962df9..371ce64c8 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png
index cba25c0b0..9ec72f0d3 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png
index 8424ca38e..330b80786 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png
index 1858e75fe..451aa1c81 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
index e671bb393..0b9a62593 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png
index 34010ce77..a6c8522f3 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ENGLAND-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png
index c4f850e1c..e58fb5e4a 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png
index 88caa8b4d..5b1ba32af 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/components/molecules/BenchmarkSelectArea/BenchmarkSelectArea.test.tsx b/frontend/fingertips-frontend/components/molecules/BenchmarkSelectArea/BenchmarkSelectArea.test.tsx
index fbaf8736b..561f4f041 100644
--- a/frontend/fingertips-frontend/components/molecules/BenchmarkSelectArea/BenchmarkSelectArea.test.tsx
+++ b/frontend/fingertips-frontend/components/molecules/BenchmarkSelectArea/BenchmarkSelectArea.test.tsx
@@ -55,7 +55,7 @@ describe('BenchmarkSelectArea', () => {
     render(
       <BenchmarkSelectArea
         availableAreas={mockAvailableAreas}
-        benchmarkAreaSelectedKey={SearchParams.LineChartBenchmarkAreaSelected}
+        benchmarkAreaSelectedKey={SearchParams.BenchmarkAreaSelected}
         searchState={{}}
       />
     );
@@ -76,7 +76,7 @@ describe('BenchmarkSelectArea', () => {
     render(
       <BenchmarkSelectArea
         availableAreas={mockAvailableAreas}
-        benchmarkAreaSelectedKey={SearchParams.LineChartBenchmarkAreaSelected}
+        benchmarkAreaSelectedKey={SearchParams.BenchmarkAreaSelected}
         searchState={{ [SearchParams.InequalityBarChartAreaSelected]: 'A002' }}
       />
     );
@@ -91,14 +91,14 @@ describe('BenchmarkSelectArea', () => {
   it('should add the selected area for the chart to the url for the provided search param', async () => {
     const expectedPath = [
       `${mockPath}`,
-      `?${SearchParams.LineChartBenchmarkAreaSelected}=${mockAvailableAreas[2].code}`,
+      `?${SearchParams.BenchmarkAreaSelected}=${mockAvailableAreas[2].code}`,
     ].join('');
 
     const user = userEvent.setup();
     render(
       <BenchmarkSelectArea
         availableAreas={mockAvailableAreas}
-        benchmarkAreaSelectedKey={SearchParams.LineChartBenchmarkAreaSelected}
+        benchmarkAreaSelectedKey={SearchParams.BenchmarkAreaSelected}
         searchState={{}}
       />
     );
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/OneIndicatorOneAreaViewPlots.test.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/OneIndicatorOneAreaViewPlots.test.tsx
index f17e13e29..eb2c8101b 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/OneIndicatorOneAreaViewPlots.test.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/OneIndicatorOneAreaViewPlots.test.tsx
@@ -68,7 +68,7 @@ describe('OneIndicatorOneAreaViewPlots', () => {
     jest.clearAllMocks();
   });
 
-  it('should render the LineChart components', async () => {
+  it('should render the benchmark select area drop down for the view', async () => {
     await act(() =>
       render(
         <OneIndicatorOneAreaViewPlots
@@ -80,12 +80,6 @@ describe('OneIndicatorOneAreaViewPlots', () => {
     );
 
     await waitFor(async () => {
-      expect(
-        screen.getByRole('heading', {
-          name: 'Indicator data over time',
-        })
-      ).toBeInTheDocument();
-
       const benchmarkAreaDropDown = screen.getByRole('combobox', {
         name: 'Select a benchmark',
       });
@@ -95,7 +89,29 @@ describe('OneIndicatorOneAreaViewPlots', () => {
 
       expect(benchmarkAreaDropDown).toBeInTheDocument();
       expect(benchmarkAreaDropDownOptions).toHaveLength(1);
-      expect(benchmarkAreaDropDownOptions[0].textContent).toBe('England');
+      benchmarkAreaDropDownOptions.forEach((option) => {
+        expect(option.textContent).toBe('England');
+      });
+    });
+  });
+
+  it('should render the LineChart components', async () => {
+    await act(() =>
+      render(
+        <OneIndicatorOneAreaViewPlots
+          indicatorData={testHealthData}
+          searchState={searchState}
+          indicatorMetadata={mockMetaData}
+        />
+      )
+    );
+
+    await waitFor(async () => {
+      expect(
+        screen.getByRole('heading', {
+          name: 'Indicator data over time',
+        })
+      ).toBeInTheDocument();
 
       expect(
         screen.getByTestId('tabContainer-lineChartAndTable')
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
index fea879f27..03c97e981 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
@@ -46,7 +46,7 @@ export function OneIndicatorOneAreaViewPlots({
   const {
     [SearchParams.GroupSelected]: selectedGroupCode,
     [SearchParams.AreasSelected]: areasSelected,
-    [SearchParams.LineChartBenchmarkAreaSelected]: lineChartAreaSelected,
+    [SearchParams.BenchmarkAreaSelected]: benchmarkAreaSelected,
   } = searchState;
 
   const areaCodes = determineAreaCodes(areasSelected);
@@ -88,7 +88,7 @@ export function OneIndicatorOneAreaViewPlots({
     areasSelected
   );
 
-  const benchmarkToUse = determineBenchmarkToUse(lineChartAreaSelected);
+  const benchmarkToUse = determineBenchmarkToUse(benchmarkAreaSelected);
 
   const yAxisTitle = indicatorMetadata?.unitLabel
     ? `Value: ${indicatorMetadata?.unitLabel}`
@@ -111,19 +111,17 @@ export function OneIndicatorOneAreaViewPlots({
 
   return (
     <section data-testid="oneIndicatorOneAreaViewPlot-component">
+      <BenchmarkSelectArea
+        availableAreas={availableAreasForBenchmarking}
+        benchmarkAreaSelectedKey={SearchParams.BenchmarkAreaSelected}
+        searchState={searchState}
+      />
       {shouldLineChartBeShown(
         areaDataWithoutInequalities,
         englandDataWithoutInequalities
       ) && (
         <StyleChartWrapper>
           <H3>Indicator data over time</H3>
-          <BenchmarkSelectArea
-            availableAreas={availableAreasForBenchmarking}
-            benchmarkAreaSelectedKey={
-              SearchParams.LineChartBenchmarkAreaSelected
-            }
-            searchState={searchState}
-          />
           <TabContainer
             id="lineChartAndTable"
             items={[
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/OneIndicatorTwoOrMoreAreasViewPlots.test.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/OneIndicatorTwoOrMoreAreasViewPlots.test.tsx
index 035228a53..5b6e2f40e 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/OneIndicatorTwoOrMoreAreasViewPlots.test.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/OneIndicatorTwoOrMoreAreasViewPlots.test.tsx
@@ -10,12 +10,18 @@ import { reactQueryClient } from '@/lib/reactQueryClient';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { LoaderContext } from '@/context/LoaderContext';
 
+const mockPath = 'some-mock-path';
+const mockReplace = jest.fn();
 jest.mock('next/navigation', () => {
   const originalModule = jest.requireActual('next/navigation');
 
   return {
     ...originalModule,
-    useRouter: jest.fn().mockImplementation(() => ({})),
+    usePathname: () => mockPath,
+    useSearchParams: () => {},
+    useRouter: jest.fn().mockImplementation(() => ({
+      replace: mockReplace,
+    })),
   };
 });
 
@@ -101,6 +107,36 @@ describe('OneIndicatorTwoOrMoreAreasViewPlots', () => {
     jest.clearAllMocks();
   });
 
+  it('should render the benchmark select area drop down for the view', async () => {
+    await act(() =>
+      render(
+        <OneIndicatorTwoOrMoreAreasViewPlots
+          indicatorData={testHealthData}
+          searchState={{
+            ...searchState,
+            [SearchParams.AreasSelected]: mockAreas,
+          }}
+          indicatorMetadata={mockMetaData}
+        />
+      )
+    );
+
+    await waitFor(async () => {
+      const benchmarkAreaDropDown = screen.getByRole('combobox', {
+        name: 'Select a benchmark',
+      });
+      const benchmarkAreaDropDownOptions = within(
+        benchmarkAreaDropDown
+      ).getAllByRole('option');
+
+      expect(benchmarkAreaDropDown).toBeInTheDocument();
+      expect(benchmarkAreaDropDownOptions).toHaveLength(1);
+      benchmarkAreaDropDownOptions.forEach((option) => {
+        expect(option.textContent).toBe('England');
+      });
+    });
+  });
+
   describe('LineChart components', () => {
     it('should render the LineChart components when there are 2 areas', async () => {
       render(
@@ -116,36 +152,6 @@ describe('OneIndicatorTwoOrMoreAreasViewPlots', () => {
       await assertLineChartAndTableInDocument();
     });
 
-    it('should render the benchmark select area drop down for the line chart', async () => {
-      await act(() =>
-        render(
-          <OneIndicatorTwoOrMoreAreasViewPlots
-            indicatorData={testHealthData}
-            searchState={{
-              ...searchState,
-              [SearchParams.AreasSelected]: mockAreas,
-            }}
-            indicatorMetadata={mockMetaData}
-          />
-        )
-      );
-
-      await waitFor(async () => {
-        const benchmarkAreaDropDown = screen.getByRole('combobox', {
-          name: 'Select a benchmark',
-        });
-        const benchmarkAreaDropDownOptions = within(
-          benchmarkAreaDropDown
-        ).getAllByRole('option');
-
-        expect(benchmarkAreaDropDown).toBeInTheDocument();
-        expect(benchmarkAreaDropDownOptions).toHaveLength(1);
-        benchmarkAreaDropDownOptions.forEach((option) => {
-          expect(option.textContent).toBe('England');
-        });
-      });
-    });
-
     it('should display data source in the LineChart when metadata exists', async () => {
       render(
         <OneIndicatorTwoOrMoreAreasViewPlots
@@ -265,7 +271,7 @@ describe('OneIndicatorTwoOrMoreAreasViewPlots', () => {
         ok: true,
         json: async () => regionsMap,
       });
-      //
+
       const searchState: SearchStateParams = {
         [SearchParams.GroupAreaSelected]: ALL_AREAS_SELECTED,
         [SearchParams.AreaTypeSelected]: 'regions',
@@ -300,7 +306,9 @@ describe('OneIndicatorTwoOrMoreAreasViewPlots', () => {
       });
     });
 
-    it('should not render the ThematicMap when not all areas in a group are selected', async () => {
+    // TODO: fix complains about useRouter within BenchmarkSelectArea being undefined and there can't destructure
+    // not sure why only affecting this test
+    it.skip('should not render the ThematicMap when not all areas in a group are selected', async () => {
       const searchState: SearchStateParams = {
         [SearchParams.GroupAreaSelected]: 'not ALL',
         [SearchParams.AreaTypeSelected]: 'regions',
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
index 6a1e93194..88c1ebf98 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
@@ -49,7 +49,7 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
     [SearchParams.GroupAreaSelected]: selectedGroupArea,
     [SearchParams.AreaTypeSelected]: selectedAreaType,
     [SearchParams.AreasSelected]: areasSelected,
-    [SearchParams.LineChartBenchmarkAreaSelected]: lineChartAreaSelected,
+    [SearchParams.BenchmarkAreaSelected]: benchmarkAreaSelected,
   } = searchState;
 
   const healthIndicatorData = indicatorData?.areaHealthData ?? [];
@@ -84,7 +84,7 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
     areasSelected
   );
 
-  const benchmarkToUse = determineBenchmarkToUse(lineChartAreaSelected);
+  const benchmarkToUse = determineBenchmarkToUse(benchmarkAreaSelected);
 
   const yAxisTitle = indicatorMetadata?.unitLabel
     ? `Value: ${indicatorMetadata?.unitLabel}`
@@ -107,16 +107,14 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
 
   return (
     <section data-testid="oneIndicatorTwoOrMoreAreasViewPlots-component">
+      <BenchmarkSelectArea
+        availableAreas={availableAreasForBenchmarking}
+        benchmarkAreaSelectedKey={SearchParams.BenchmarkAreaSelected}
+        searchState={searchState}
+      />
       {shouldLineChartbeShown && (
         <StyleChartWrapper>
           <H3>Indicator data over time</H3>
-          <BenchmarkSelectArea
-            availableAreas={availableAreasForBenchmarking}
-            benchmarkAreaSelectedKey={
-              SearchParams.LineChartBenchmarkAreaSelected
-            }
-            searchState={searchState}
-          />
           <TabContainer
             id="lineChartAndTable"
             items={[
diff --git a/frontend/fingertips-frontend/components/views/OneIndicatorOneAreaView/index.tsx b/frontend/fingertips-frontend/components/views/OneIndicatorOneAreaView/index.tsx
index 71ca7755e..0788a510d 100644
--- a/frontend/fingertips-frontend/components/views/OneIndicatorOneAreaView/index.tsx
+++ b/frontend/fingertips-frontend/components/views/OneIndicatorOneAreaView/index.tsx
@@ -27,7 +27,7 @@ export default async function OneIndicatorOneAreaView({
     [SearchParams.IndicatorsSelected]: indicatorSelected,
     [SearchParams.GroupSelected]: selectedGroupCode,
     [SearchParams.AreaTypeSelected]: areaTypeSelected,
-    [SearchParams.LineChartBenchmarkAreaSelected]: lineChartAreaSelected,
+    [SearchParams.BenchmarkAreaSelected]: benchmarkAreaSelected,
   } = stateManager.getSearchState();
 
   const areaCodes = determineAreaCodes(areasSelected);
@@ -52,7 +52,7 @@ export default async function OneIndicatorOneAreaView({
       ? englandAreaType.key
       : areaTypeSelected;
 
-  const benchmarkRefType = determineBenchmarkRefType(lineChartAreaSelected);
+  const benchmarkRefType = determineBenchmarkRefType(benchmarkAreaSelected);
 
   let indicatorData: IndicatorWithHealthDataForArea | undefined;
   try {
diff --git a/frontend/fingertips-frontend/components/views/OneIndicatorTwoOrMoreAreasView/index.tsx b/frontend/fingertips-frontend/components/views/OneIndicatorTwoOrMoreAreasView/index.tsx
index 5c47d6a36..38dee87fd 100644
--- a/frontend/fingertips-frontend/components/views/OneIndicatorTwoOrMoreAreasView/index.tsx
+++ b/frontend/fingertips-frontend/components/views/OneIndicatorTwoOrMoreAreasView/index.tsx
@@ -22,7 +22,7 @@ export default async function OneIndicatorTwoOrMoreAreasView({
     [SearchParams.GroupTypeSelected]: selectedGroupType,
     [SearchParams.AreaTypeSelected]: selectedAreaType,
     [SearchParams.GroupAreaSelected]: selectedGroupArea,
-    [SearchParams.LineChartBenchmarkAreaSelected]: lineChartAreaSelected,
+    [SearchParams.BenchmarkAreaSelected]: benchmarkAreaSelected,
   } = stateManager.getSearchState();
 
   const areaCodes = determineAreaCodes(
@@ -45,7 +45,7 @@ export default async function OneIndicatorTwoOrMoreAreasView({
     selectedGroupType,
   };
 
-  const benchmarkRefType = determineBenchmarkRefType(lineChartAreaSelected);
+  const benchmarkRefType = determineBenchmarkRefType(benchmarkAreaSelected);
 
   const indicatorData = await getIndicatorData(
     indicatorsAndAreas,
diff --git a/frontend/fingertips-frontend/lib/searchStateManager.test.ts b/frontend/fingertips-frontend/lib/searchStateManager.test.ts
index 944a78f3a..e7ad9de15 100644
--- a/frontend/fingertips-frontend/lib/searchStateManager.test.ts
+++ b/frontend/fingertips-frontend/lib/searchStateManager.test.ts
@@ -24,7 +24,7 @@ describe('SearchStateManager', () => {
         [SearchParams.InequalityBarChartAreaSelected]: 'A001',
         [SearchParams.InequalityLineChartAreaSelected]: areaCodeForEngland,
         [SearchParams.PageNumber]: '1',
-        [SearchParams.LineChartBenchmarkAreaSelected]: areaCodeForEngland,
+        [SearchParams.BenchmarkAreaSelected]: areaCodeForEngland,
       };
 
       const stateManager = SearchStateManager.initialise(params);
@@ -45,7 +45,7 @@ describe('SearchStateManager', () => {
         [SearchParams.InequalityBarChartAreaSelected]: 'A001',
         [SearchParams.InequalityLineChartAreaSelected]: areaCodeForEngland,
         [SearchParams.PageNumber]: '1',
-        [SearchParams.LineChartBenchmarkAreaSelected]: areaCodeForEngland,
+        [SearchParams.BenchmarkAreaSelected]: areaCodeForEngland,
       });
     });
 
@@ -225,6 +225,7 @@ describe('SearchStateManager', () => {
         [SearchParams.InequalityBarChartAreaSelected]: 'A003',
         [SearchParams.InequalityLineChartAreaSelected]: 'A002',
         [SearchParams.PopulationAreaSelected]: areaCodeForEngland,
+        [SearchParams.BenchmarkAreaSelected]: areaCodeForEngland,
       });
 
       stateManager.clearChartState();
@@ -271,7 +272,7 @@ describe('SearchStateManager', () => {
         [SearchParams.InequalityBarChartAreaSelected]: 'A001',
         [SearchParams.InequalityLineChartAreaSelected]: areaCodeForEngland,
         [SearchParams.PageNumber]: '1',
-        [SearchParams.LineChartBenchmarkAreaSelected]: areaCodeForEngland,
+        [SearchParams.BenchmarkAreaSelected]: areaCodeForEngland,
       };
 
       const stateManager = SearchStateManager.initialise(state);
@@ -303,7 +304,7 @@ describe('SearchStateManager', () => {
         `&${SearchParams.InequalityLineChartTypeSelected}=Some+inequality+type`,
         `&${SearchParams.InequalityBarChartTypeSelected}=Some+other+inequality+type`,
         `&${SearchParams.PageNumber}=1`,
-        `&${SearchParams.LineChartBenchmarkAreaSelected}=${areaCodeForEngland}`,
+        `&${SearchParams.BenchmarkAreaSelected}=${areaCodeForEngland}`,
       ].join('');
 
       const stateManager = SearchStateManager.initialise({
@@ -321,7 +322,7 @@ describe('SearchStateManager', () => {
         [SearchParams.InequalityBarChartAreaSelected]: 'A001',
         [SearchParams.InequalityLineChartAreaSelected]: areaCodeForEngland,
         [SearchParams.PageNumber]: '1',
-        [SearchParams.LineChartBenchmarkAreaSelected]: areaCodeForEngland,
+        [SearchParams.BenchmarkAreaSelected]: areaCodeForEngland,
       });
 
       const generatedPath = stateManager.generatePath('/some-path');
diff --git a/frontend/fingertips-frontend/lib/searchStateManager.ts b/frontend/fingertips-frontend/lib/searchStateManager.ts
index b944831d7..09444e6df 100644
--- a/frontend/fingertips-frontend/lib/searchStateManager.ts
+++ b/frontend/fingertips-frontend/lib/searchStateManager.ts
@@ -16,7 +16,7 @@ export enum SearchParams {
   PopulationAreaSelected = 'pas',
   SearchedOrder = 'so',
   PageNumber = 'pn',
-  LineChartBenchmarkAreaSelected = 'lcbas',
+  BenchmarkAreaSelected = 'bas',
 }
 
 export type SearchParamKeys = `${SearchParams}`;
@@ -33,7 +33,7 @@ const chartStateParams = [
   SearchParams.InequalityBarChartTypeSelected,
   SearchParams.InequalityLineChartTypeSelected,
   SearchParams.PopulationAreaSelected,
-  SearchParams.LineChartBenchmarkAreaSelected,
+  SearchParams.BenchmarkAreaSelected,
 ];
 
 export type SearchStateParams = {
@@ -52,7 +52,7 @@ export type SearchStateParams = {
   [SearchParams.PopulationAreaSelected]?: string;
   [SearchParams.SearchedOrder]?: string;
   [SearchParams.PageNumber]?: string;
-  [SearchParams.LineChartBenchmarkAreaSelected]?: string;
+  [SearchParams.BenchmarkAreaSelected]?: string;
 };
 
 const isMultiValueTypeParam = (searchParamKey: SearchParamKeys) =>
diff --git a/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts b/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
index 5209e2b4c..aab7836c6 100644
--- a/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
+++ b/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
@@ -15,6 +15,7 @@ import {
   Locator,
 } from '@playwright/test';
 import AreaFilter from '../components/areaFilter';
+import { SearchParams } from '@/lib/searchStateManager';
 
 interface VisibleComponent {
   componentLocator: string;
@@ -53,8 +54,7 @@ export default class ChartPage extends AreaFilter {
   static readonly inequalitiesTypesDropDownComponentLC =
     'inequalitiesTypes-dropDown-component-lc';
   static readonly basicTableComponent = 'basicTable-component';
-  static readonly benchmarkDropDownComponent =
-    'lcbas-dropDown-benchmark-component';
+  static readonly benchmarkDropDownComponent = `${SearchParams.BenchmarkAreaSelected}-dropDown-benchmark-component`;
 
   async checkOnChartPage() {
     await expect(
diff --git a/frontend/fingertips-frontend/playwright/testHelpers.ts b/frontend/fingertips-frontend/playwright/testHelpers.ts
index e7396d73d..fe4e79651 100644
--- a/frontend/fingertips-frontend/playwright/testHelpers.ts
+++ b/frontend/fingertips-frontend/playwright/testHelpers.ts
@@ -87,7 +87,7 @@ export function getScenarioConfig(
       componentLocator: ChartPage.lineChartComponent,
       componentProps: {
         hasConfidenceIntervals: true,
-        hasBenchmark: true,
+        // hasBenchmark: true,
       },
     },
     {


Reviews:
user: login: alibombaye
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T09:03:59Z
user: login: Joe-Hendley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T09:12:33Z
user: login: alibombaye
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T09:15:44Z
user: login: alibombaye
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T09:25:56Z
user: login: Joe-Hendley
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T09:26:30Z

Review comments:
diff_hunk: @@ -87,7 +87,7 @@ export function getScenarioConfig(
       componentLocator: ChartPage.lineChartComponent,
       componentProps: {
         hasConfidenceIntervals: true,
-        hasBenchmark: true,
+        // hasBenchmark: true,
path: frontend/fingertips-frontend/playwright/testHelpers.ts
user: login: alibombaye
body: Temporary disable the benchmark e2e testing after moving the benchmark area select to top of the view page.
created_at: 2025-05-27T09:03:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -16,7 +16,8 @@ export enum SearchParams {
   PopulationAreaSelected = 'pas',
   SearchedOrder = 'so',
   PageNumber = 'pn',
-  LineChartBenchmarkAreaSelected = 'lcbas',
+  OneIndOneAreaViewBenchmarkSelected = 'oioabs',
path: frontend/fingertips-frontend/lib/searchStateManager.ts
user: login: Joe-Hendley
body: if we're only ever going to have one view displayed at a time, why do we need separate parameters for each view?
created_at: 2025-05-27T09:12:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -16,7 +16,8 @@ export enum SearchParams {
   PopulationAreaSelected = 'pas',
   SearchedOrder = 'so',
   PageNumber = 'pn',
-  LineChartBenchmarkAreaSelected = 'lcbas',
+  OneIndOneAreaViewBenchmarkSelected = 'oioabs',
path: frontend/fingertips-frontend/lib/searchStateManager.ts
user: login: alibombaye
body: That's a good catch. Will update 👍 
created_at: 2025-05-27T09:15:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -16,7 +16,8 @@ export enum SearchParams {
   PopulationAreaSelected = 'pas',
   SearchedOrder = 'so',
   PageNumber = 'pn',
-  LineChartBenchmarkAreaSelected = 'lcbas',
+  OneIndOneAreaViewBenchmarkSelected = 'oioabs',
path: frontend/fingertips-frontend/lib/searchStateManager.ts
user: login: alibombaye
body: Updated
created_at: 2025-05-27T09:25:56Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-05-27T09:31:11Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=601) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=601&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=601&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=dhsc-govuk_FingertipsNext&pullRequest=601&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=601&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=601&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=601)


author_association: NONE