fix styling, update mode type, fix minor null text ui bug

Author: misspran

src/components/CompareResults/MannWhitneyCompareMetrics.tsx

@@ -28,7 +28,8 @@ export const MannWhitneyCompareMetrics = ({
     return {
       backgroundColor,
       marginBottom: 2,
-      width: '85%',
+      maxWidth: '85%',
+      width: '100%',
       borderRadius: '5px',
       padding: 2,
       '& .test-row-container': {
@@ -170,7 +171,7 @@ export const MannWhitneyCompareMetrics = ({
             <td>Kolmogorov-Smirnov Test</td>
             <td></td>
             <td></td>
-            <td>{`${result?.ks_test?.interpretation ?? null}`}</td>
+            <td>{`${result?.ks_test?.interpretation ?? ''}`}</td>
           </tr>
           <tr className='test-label-row' style={{ marginTop: 2 }}>
             <td>Distribution</td>

src/components/CompareResults/ModeInterpretation.tsx

@@ -34,28 +34,33 @@ export const ModeInterpretation = ({
   }
   const mode = useAppSelector((state) => state.theme.mode);
 
+  const kdeModes = result.silverman_kde.modes ?? [];
+  if (kdeModes.length === 0) return null;
+
   return (
     <Box sx={getStyles(mode)}>
       <table>
         <thead>
           <tr style={{ textAlign: 'left' }}>
-            <th style={{ padding: 2, paddingRight: 16 }}></th>
+            <th style={{ padding: 2, paddingRight: 16 }}>Mode Start </th>
+            <th style={{ padding: 2, paddingRight: 16 }}>Mode End </th>
             <th style={{ padding: 2, paddingRight: 16 }}>Median Shift</th>
             <th style={{ padding: 2 }}>Interpretation</th>
           </tr>
         </thead>
         <tbody>
-          <tr style={{ textAlign: 'left' }}>
-            <td style={{ padding: 2, paddingRight: 16 }}>
-              {result.silverman_kde.mode_summary}
-            </td>
-            <td style={{ padding: 2, paddingRight: 16 }}>
-              {result.silverman_kde.shift ?? +0}
-            </td>
-            <td style={{ padding: 2 }}>
-              {result.silverman_kde.shift_summary ?? 'No significant shift'}
-            </td>
-          </tr>
+          {kdeModes?.map(
+            ({ mode_start, mode_end, shift, shift_summary, mode_name }) => (
+              <tr style={{ textAlign: 'left' }} key={mode_name}>
+                <td style={{ padding: 2, paddingRight: 16 }}>{mode_start}</td>
+                <td style={{ padding: 2, paddingRight: 16 }}>{mode_end}</td>
+                <td style={{ padding: 2, paddingRight: 16 }}>
+                  {shift ?? 'N/A'}
+                </td>
+                <td style={{ padding: 2 }}>{shift_summary ?? 'N/A'}</td>
+              </tr>
+            ),
+          )}
         </tbody>
       </table>
     </Box>

src/components/CompareResults/ResultsTable.tsx

@@ -182,8 +182,8 @@ export default function ResultsTable() {
 
   const onTestVersionChange = (testVersion: TestVersion): void => {
     setTestVersionVal(testVersion);
-    rawSearchParams.set('test_version', testVersion);
-    updateRawSearchParams(rawSearchParams);
+    searchParams.set('test_version', testVersion);
+    setSearchParams(searchParams);
   };
 
   const rowGridTemplateColumns = columnsConfiguration

src/components/CompareResults/StatisticsWarnings.tsx

@@ -25,7 +25,7 @@ export const StatisticsWarnings = ({
     flexWrap: 'wrap',
     borderRadius: 1,
     padding: 1,
-    maxWidth: '55%',
+    width: '55%',
     '& .warning-row': {
       verticalAlign: 'bottom',
       display: 'flex',

src/components/CompareResults/SubtestsResults/SubtestsRevisionRow.tsx

@@ -116,7 +116,7 @@ function determineSign(baseMedianValue: number, newMedianValue: number) {
 
 function SubtestsRevisionRow(props: RevisionRowProps) {
   const id = useId();
-  const { result, gridTemplateColumns, replicates } = props;
+  const { result, gridTemplateColumns, replicates, testVersion } = props;
   const {
     test,
     base_avg_value: baseAvgValue,
@@ -249,7 +249,7 @@ function SubtestsRevisionRow(props: RevisionRowProps) {
         <RevisionRowExpandable
           id={id}
           result={result}
-          testVersion={props.testVersion}
+          testVersion={testVersion}
         />
       )}
     </>

src/components/CompareResults/TableContent.tsx

@@ -175,6 +175,7 @@ function TableContent({
     filteringSearchTerm,
     tableFilters,
     columnsConfiguration,
+    testVersion, // trigger refetch for new testVersion selection
   ]);
 
   const sortedResults = useMemo(() => {

src/components/CompareResults/TableRevisionContent.tsx

@@ -22,7 +22,8 @@ const styles = {
 };
 
 function TableRevisionContent(props: Props) {
-  const { results, view, rowGridTemplateColumns, replicates } = props;
+  const { results, view, rowGridTemplateColumns, replicates, testVersion } =
+    props;
 
   if (!results.length) {
     return null;
@@ -55,7 +56,7 @@ function TableRevisionContent(props: Props) {
               view={view}
               gridTemplateColumns={rowGridTemplateColumns}
               replicates={replicates}
-              testVersion={props.testVersion}
+              testVersion={testVersion}
             />
           ))}
         </div>

src/types/state.ts

@@ -156,21 +156,30 @@ export type CLESItem = {
   cles_explanation: string;
 } | null;
 
+export type ModeItem = {
+  mode_name: string;
+  mode_start: number;
+  mode_end: number;
+  ci_low: number | null;
+  ci_high: number | null;
+  shift: number | null;
+  shift_summary: string | null;
+};
+
 /*
   Results from Silverman KDE test for multimodal data.
 */
 export type SilvermanKDEItem = {
   bandwidth: string;
   base_mode_count: number;
   new_mode_count: number;
+  base_location: number;
+  new_location: number;
+  base_prominence: number;
+  new_prominence: number;
   mode_comments: string[];
   warnings: string[];
-  mode_summary: string;
-  median_shift_summary: string[] | null;
-  ci_low: number | null;
-  ci_high: number | null;
-  shift: number | null;
-  shift_summary: string | null;
+  modes: ModeItem[];
   is_regression: boolean | null;
   is_improvement: boolean | null;
   ci_warning: string | null;