Bug 2022720 Test Version Refactor: Refactor how the expanded row's components are rendered

src/__tests__/CompareResults/RevisionRowExpandable.test.tsx

@@ -21,6 +21,46 @@ function renderWithRoute(component: ReactElement) {
   });
 }
 
+describe('RevisionRowExpandable for student-t testVersion', () => {
+  it('should display median difference and percentage when both median values are present', async () => {
+    const { testCompareData } = getTestData();
+    // testCompareData[0]: base_median_value=704.84, new_median_value=712.44, unit='ms'
+    // expected difference: 7.6, percentage: 1.08
+    renderWithRoute(
+      <RevisionRowExpandable
+        result={testCompareData[0]}
+        testVersion='student-t'
+        id='test-1'
+      />,
+    );
+
+    const header = await screen.findByText(/Difference of medians/);
+    const medianBox = header.closest('div');
+    expect(medianBox).toHaveTextContent('1.08%');
+    expect(medianBox).toHaveTextContent('7.6 ms');
+  });
+
+  it('should not display median difference when median values are absent', async () => {
+    const { testCompareData } = getTestData();
+    const noMedians = {
+      ...testCompareData[0],
+      base_median_value: 0,
+      new_median_value: 0,
+    };
+
+    renderWithRoute(
+      <RevisionRowExpandable
+        result={noMedians}
+        testVersion='student-t'
+        id='test-2'
+      />,
+    );
+
+    await screen.findByText(/Difference of means/);
+    expect(screen.queryByText(/Difference of medians/)).not.toBeInTheDocument();
+  });
+});
+
 describe('RevisionRowExpandable for mann-whitney-u testVersion', () => {
   it('should display ModeInterpretation for mann-whitney-u', async () => {
     const { mockMannWhitneyResultData } = getTestData();

src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap

@@ -67,8 +67,7 @@ exports[`Results View Should display Base, New and Common graphs with replicates
             <b>
               Comparison result
             </b>
-            :
-
+            : 
 
             (
             lower
@@ -460,8 +459,7 @@ exports[`Results View Should display Base, New and Common graphs with tooltips 1
             <b>
               Comparison result
             </b>
-            :
-
+            : 
 
             (
             lower

src/common/testVersions/index.ts

@@ -12,6 +12,10 @@ export interface TestVersionStrategy {
     newAvg: number | null;
   };
   renderColumns(result: CombinedResultsItemType): ReactNode;
+  renderExpandedLeft(result: CombinedResultsItemType): ReactNode;
+  getComparisonResult(result: CombinedResultsItemType): string;
+  renderExpandedRight(result: CombinedResultsItemType): ReactNode;
+  renderExpandedBottom(result: CombinedResultsItemType): ReactNode;
 }
 
 // Registry mapping each TestVersion to its concrete strategy.

src/common/testVersions/mannWhitney.tsx

@@ -2,6 +2,10 @@ import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import Box from '@mui/material/Box';
 
+import { MannWhitneyCompareMetrics } from '../../components/CompareResults/MannWhitneyCompareMetrics';
+import { ModeInterpretation } from '../../components/CompareResults/ModeInterpretation';
+import PValCliffsDeltaComp from '../../components/CompareResults/PValCliffsDeltaComp';
+import { StatisticsWarnings } from '../../components/CompareResults/StatisticsWarnings';
 import {
   CombinedResultsItemType,
   MannWhitneyResultsItem,
@@ -202,6 +206,53 @@ export const mannWhitneyStrategy = {
     };
   },
 
+  renderExpandedLeft() {
+    return null;
+  },
+
+  getComparisonResult(result: CombinedResultsItemType) {
+    return capitalize(
+      (result as MannWhitneyResultsItem).direction_of_change ?? '',
+    );
+  },
+
+  renderExpandedRight(result: CombinedResultsItemType) {
+    const mwResult = result as MannWhitneyResultsItem;
+    const { cles, cles_direction } = mwResult.cles ?? {
+      cles: '',
+      cles_direction: '',
+    };
+    const { cliffs_delta, cliffs_interpretation } = mwResult;
+    const pValue = mwResult.mann_whitney_test?.pvalue;
+    const p_value_cles = mwResult.mann_whitney_test?.interpretation
+      ? capitalize(mwResult.mann_whitney_test.interpretation)
+      : '';
+
+    return (
+      <>
+        <PValCliffsDeltaComp
+          cliffs_delta={cliffs_delta}
+          cliffs_interpretation={cliffs_interpretation}
+          pValue={pValue}
+          p_value_cles={p_value_cles}
+          cles={cles}
+          cles_direction={cles_direction}
+        />
+        <ModeInterpretation result={mwResult} />
+      </>
+    );
+  },
+
+  renderExpandedBottom(result: CombinedResultsItemType) {
+    const mwResult = result as MannWhitneyResultsItem;
+    return (
+      <div style={{ display: 'flex' }}>
+        <MannWhitneyCompareMetrics result={mwResult} />
+        <StatisticsWarnings result={mwResult} />
+      </div>
+    );
+  },
+
   renderColumns(result: CombinedResultsItemType) {
     const { cliffs_delta, direction_of_change, mann_whitney_test, cles } =
       result as MannWhitneyResultsItem;

src/common/testVersions/studentT.tsx

@@ -5,8 +5,11 @@ import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import Box from '@mui/material/Box';
 
+import Distribution from '../../components/CompareResults/Distribution';
+import { Strings } from '../../resources/Strings';
 import { CombinedResultsItemType, CompareResultsItem } from '../../types/state';
 import { TableConfig } from '../../types/types';
+import { formatNumber } from '../../utils/format';
 import { getPlatformShortName } from '../../utils/platform';
 import {
   determineStatus,
@@ -154,6 +157,82 @@ export const studentTStrategy = {
     };
   },
 
+  renderExpandedLeft(result: CombinedResultsItemType) {
+    return <Distribution result={result as CompareResultsItem} />;
+  },
+
+  getComparisonResult(result: CombinedResultsItemType) {
+    return (result as CompareResultsItem).new_is_better ? 'better' : 'worse';
+  },
+
+  renderExpandedRight(result: CombinedResultsItemType) {
+    const {
+      delta_percentage: deltaPercent,
+      delta_value: delta,
+      confidence_text: confidenceText,
+      confidence: confidenceValue,
+      base_median_value: baseMedian,
+      new_median_value: newMedian,
+      base_measurement_unit: baseUnit,
+      new_measurement_unit: newUnit,
+    } = result as CompareResultsItem;
+
+    const deltaUnit = baseUnit || newUnit || '';
+    const formatTwoDigits = new Intl.NumberFormat('en-US', {
+      maximumFractionDigits: 2,
+    });
+    const medianDifference =
+      baseMedian && newMedian
+        ? formatTwoDigits.format(newMedian - baseMedian)
+        : '';
+    const medianPercentage =
+      baseMedian && newMedian
+        ? formatTwoDigits.format(((newMedian - baseMedian) / baseMedian) * 100)
+        : '';
+
+    const { confidenceNote } = Strings.components.expandableRow;
+
+    return (
+      <>
+        <Box sx={{ whiteSpace: 'nowrap' }}>
+          <b>Difference of means</b>: {deltaPercent}% ({formatNumber(delta)}
+          {deltaUnit ? ' ' + deltaUnit : null})
+        </Box>
+        {newMedian && baseMedian ? (
+          <Box sx={{ whiteSpace: 'nowrap' }}>
+            <b>Difference of medians</b>: {medianPercentage}% (
+            {medianDifference}
+            {deltaUnit ? ' ' + deltaUnit : null})
+          </Box>
+        ) : null}
+        {confidenceText ? (
+          <div>
+            <Box sx={{ whiteSpace: 'nowrap' }}>
+              <b>Confidence</b>: {confidenceText}
+              {confidenceValue ? ' ' + `(${confidenceValue})` : null}
+            </Box>
+            <Box
+              sx={{
+                fontSize: '10px',
+                textTransform: 'uppercase',
+              }}
+            >
+              <b>**Note</b>: {confidenceNote}{' '}
+            </Box>
+          </div>
+        ) : (
+          <Box sx={{ whiteSpace: 'nowrap' }}>
+            <b>Confidence</b>: Not available{' '}
+          </Box>
+        )}
+      </>
+    );
+  },
+
+  renderExpandedBottom() {
+    return null;
+  },
+
   renderColumns(result: CombinedResultsItemType) {
     const {
       is_improvement: improvement,

src/components/CompareResults/MannWhitneyCompareMetrics.tsx

@@ -1,22 +1,16 @@
 import { Box } from '@mui/material';
 
-import { MANN_WHITNEY_U } from '../../common/constants';
 import { MannWhitneyResultsItem } from '../../types/state';
-import { TestVersion } from '../../types/types';
 import { getModeInterpretation } from '../../utils/helpers';
 
 const METRIC_HEADERS = ['Metric', 'Base', 'New', 'Interpretation'];
 
-interface MannWhitneyCompareMetricsProps {
-  result: MannWhitneyResultsItem;
-  testVersion: TestVersion;
-}
-
 export const MannWhitneyCompareMetrics = ({
   result,
-  testVersion,
-}: MannWhitneyCompareMetricsProps) => {
-  if (!result || testVersion !== MANN_WHITNEY_U) {
+}: {
+  result: MannWhitneyResultsItem;
+}) => {
+  if (!result) {
     return null;
   }
 

src/components/CompareResults/ModeInterpretation.tsx

@@ -1,17 +1,13 @@
 import { Box } from '@mui/material';
 
-import { MANN_WHITNEY_U } from '../../common/constants';
 import { MannWhitneyResultsItem } from '../../types/state';
-import { TestVersion } from '../../types/types';
 
 export const ModeInterpretation = ({
   result,
-  testVersion,
 }: {
   result: MannWhitneyResultsItem;
-  testVersion: TestVersion;
 }) => {
-  if (!result || !result.silverman_kde || testVersion !== MANN_WHITNEY_U) {
+  if (!result || !result.silverman_kde) {
     return null;
   }