update rendering for ai reviewers

Author: vas3a

src/apps/review/src/lib/components/TableCheckpointSubmissions/TableCheckpointSubmissions.tsx

@@ -165,12 +165,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
     )
 
     const aiReviewsColumn = useMemo<TableColumn<Screening> | undefined>(
-        () => {
-            if (!props.aiReviewers?.length) {
-                return undefined
-            }
-
-            return {
+        () => ({
                 columnId: 'ai-reviews-table',
                 isExpand: true,
                 label: '',
@@ -187,15 +182,14 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
                     return (
                         <CollapsibleAiReviewsRow
                             className={styles.aiReviews}
-                            aiReviewers={props.aiReviewers!}
+                            aiReviewers={props.aiReviewers ?? []}
                             submission={submissionPayload}
                             defaultOpen={allRows ? !allRows.indexOf(data) : false}
                         />
                     )
                 },
                 type: 'element',
-            } as TableColumn<Screening>
-        },
+            } as TableColumn<Screening>),
         [props.aiReviewers],
     )
 
@@ -733,7 +727,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
     const columnsMobile = useMemo<MobileTableColumn<Screening>[][]>(
         () => columns.map(
             column => [
-                {
+                column.label && {
                     ...column,
                     className: '',
                     label: `${column.label as string} label`,
@@ -748,9 +742,10 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
                 },
                 {
                     ...column,
+                    colSpan: column.label ? 1 : 2,
                     mobileType: 'last-value',
                 },
-            ] as MobileTableColumn<Screening>[],
+            ].filter(Boolean) as MobileTableColumn<Screening>[],
         ),
         [columns],
     )

src/apps/review/src/lib/components/TableIterativeReview/TableIterativeReview.tsx

@@ -1337,24 +1337,20 @@ export const TableIterativeReview: FC<Props> = (props: Props) => {
             baseColumns.push(reviewerColumn)
         }
 
-        if (props.aiReviewers) {
-            baseColumns.push({
-                columnId: 'ai-reviews-table',
-                isExpand: true,
-                label: '',
-                renderer: (submission: SubmissionInfo, allRows: SubmissionInfo[]) => (
-                    props.aiReviewers && (
-                        <CollapsibleAiReviewsRow
-                            className={styles.aiReviews}
-                            aiReviewers={props.aiReviewers}
-                            submission={submission as any}
-                            defaultOpen={allRows ? !allRows.indexOf(submission) : false}
-                        />
-                    )
-                ),
-                type: 'element',
-            })
-        }
+        baseColumns.push({
+            columnId: 'ai-reviews-table',
+            isExpand: true,
+            label: '',
+            renderer: (submission: SubmissionInfo, allRows: SubmissionInfo[]) => (
+                <CollapsibleAiReviewsRow
+                    className={styles.aiReviews}
+                    aiReviewers={props.aiReviewers ?? []}
+                    submission={submission as any}
+                    defaultOpen={allRows ? !allRows.indexOf(submission) : false}
+                />
+            ),
+            type: 'element',
+        })
 
         return baseColumns
     }, [
@@ -1375,7 +1371,7 @@ export const TableIterativeReview: FC<Props> = (props: Props) => {
 
     const columnsMobile = useMemo<MobileTableColumn<SubmissionInfo>[][]>(() => (
         (actionColumn ? [...columns, actionColumn] : columns).map(column => ([
-            {
+            column.label && {
                 ...column,
                 className: '',
                 label: `${column.label as string} label`,
@@ -1390,9 +1386,10 @@ export const TableIterativeReview: FC<Props> = (props: Props) => {
             },
             {
                 ...column,
+                colSpan: column.label ? 1 : 2,
                 mobileType: 'last-value',
             },
-        ] as MobileTableColumn<SubmissionInfo>[]))
+        ].filter(Boolean) as MobileTableColumn<SubmissionInfo>[]))
     ), [actionColumn, columns])
 
     return (

src/apps/review/src/lib/components/TableSubmissionScreening/TableSubmissionScreening.tsx

@@ -789,12 +789,7 @@ export const TableSubmissionScreening: FC<Props> = (props: Props) => {
     }, [filteredChallengeSubmissions, props.screenings])
 
     const aiReviewersColumn = useMemo<TableColumn<Screening> | undefined>(
-        () => {
-            if (!props.aiReviewers?.length) {
-                return undefined
-            }
-
-            return {
+        () => ({
                 columnId: 'ai-reviews-table',
                 isExpand: true,
                 label: '',
@@ -821,8 +816,7 @@ export const TableSubmissionScreening: FC<Props> = (props: Props) => {
                     )
                 },
                 type: 'element',
-            } as TableColumn<Screening>
-        },
+            } as TableColumn<Screening>),
         [props.aiReviewers, submissionMetaById],
     )
 
@@ -1191,7 +1185,7 @@ export const TableSubmissionScreening: FC<Props> = (props: Props) => {
     const columnsMobile = useMemo<MobileTableColumn<Screening>[][]>(
         () => columns.map(
             column => [
-                {
+                column.label && {
                     ...column,
                     className: '',
                     label: `${column.label as string} label`,
@@ -1206,9 +1200,10 @@ export const TableSubmissionScreening: FC<Props> = (props: Props) => {
                 },
                 {
                     ...column,
+                    colSpan: column.label ? 1 : 2,
                     mobileType: 'last-value',
                 },
-            ] as MobileTableColumn<Screening>[],
+            ].filter(Boolean) as MobileTableColumn<Screening>[],
         ),
         [columns],
     )