Fix manual review pie legend toggling

client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsChart.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+
+import { getPieChartData } from './ManualReviewDashboardInsightsChart';
+
+describe('getPieChartData', () => {
+  it('zeros a hidden category and restores its value without changing legend order', () => {
+    const sums = { foo: 6, bar: 4 };
+
+    expect(getPieChartData(sums, ['foo'])).toEqual([
+      { name: 'foo', value: 0 },
+      { name: 'bar', value: 4 },
+    ]);
+    expect(getPieChartData(sums, [])).toEqual([
+      { name: 'foo', value: 6 },
+      { name: 'bar', value: 4 },
+    ]);
+  });
+});

client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsChart.tsx

@@ -179,6 +179,16 @@ gql`
 export type ManualReviewDashboardInsightsChartMetric =
   'DECISIONS' | 'JOBS' | 'REVIEWED_JOBS' | 'SKIPPED_JOBS';
 
+export function getPieChartData(
+  chartDataSums: Record<string, number>,
+  hiddenLines: string[],
+) {
+  return Object.entries(chartDataSums).map(([name, value]) => ({
+    name,
+    value: hiddenLines.includes(name) ? 0 : value,
+  }));
+}
+
 export function getEmptyFilterState(
   metric: ManualReviewDashboardInsightsChartMetric,
   timeWindow: TimeWindow,
@@ -1113,23 +1123,22 @@ export default function ManualReviewDashboardInsightsChart(props: {
     />
   ));
 
+  const pieChartData = getPieChartData(chartDataSums, hiddenLines);
+
   const pieChart = (
     <PieChart width={400} height={400}>
       <Pie
         dataKey="value"
         nameKey="name"
         isAnimationActive={false}
-        data={Object.entries(chartDataSums).map(([key, value]) => ({
-          name: key,
-          value,
-        }))}
+        data={pieChartData}
         cx="50%"
         cy="50%"
         outerRadius={80}
         fill={PRIMARY_COLOR}
         label
       >
-        {Object.entries(chartDataSums).map((_, index) => (
+        {pieChartData.map((_, index) => (
           <Cell
             key={`cell-${index}`}
             fill={chartColors[index % chartColors.length]}