Merge pull request #446 from nickgros/SWC-6540

packages/synapse-react-client/src/components/SynapseTable/SynapseTable.integration.test.tsx

@@ -1,5 +1,5 @@
 /* eslint jest/no-conditional-expect: 0 */
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { cloneDeep } from 'lodash-es'
 import React from 'react'
@@ -19,6 +19,7 @@ import {
   FileEntity,
   PaginatedResults,
   QueryBundleRequest,
+  QueryResultBundle,
   Reference,
   ReferenceList,
   Table,
@@ -36,7 +37,10 @@ import {
   QueryWrapperProps,
 } from '../../index'
 import { getHandlersForTableQuery } from '../../mocks/msw/handlers/tableQueryHandlers'
-import { mockTableEntity } from '../../mocks/entity/mockTableEntity'
+import {
+  MOCK_TABLE_ENTITY_ID,
+  mockTableEntity,
+} from '../../mocks/entity/mockTableEntity'
 import { mockProjectIds } from '../../mocks/entity/mockProject'
 import { mockFileHandle } from '../../mocks/mock_file_handle'
 import { mockFileViewEntity } from '../../mocks/entity/mockFileView'
@@ -447,4 +451,47 @@ describe('SynapseTable tests', () => {
       screen.queryByTestId('AddToDownloadListCell'),
     ).not.toBeInTheDocument()
   })
+
+  it('handles case where selectColumns do not match column models (SWC-6540)', async () => {
+    const queryResultBundleWithRenamedColumn: QueryResultBundle = {
+      concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',
+      queryCount: 1,
+      selectColumns: [{ name: 'Number of Studies', columnType: 'INTEGER' }],
+      columnModels: [
+        { name: 'studyName', columnType: 'LARGETEXT', id: '82659' },
+        { name: 'studyId', columnType: 'ENTITYID', id: '82658' },
+      ],
+      facets: [],
+      lastUpdatedOn: '2023-08-28T07:27:00.667Z',
+      queryResult: {
+        concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',
+        queryResults: {
+          concreteType: 'org.sagebionetworks.repo.model.table.RowSet',
+          tableId: MOCK_TABLE_ENTITY_ID,
+          etag: '53e1e27a-dbf3-4db3-acd1-dafca30b894c',
+          headers: [{ name: 'Number of Studies', columnType: 'INTEGER' }],
+          rows: [{ values: ['123'] }],
+        },
+      },
+    }
+
+    server.use(
+      rest.get(
+        `${getEndpoint(
+          BackendDestinationEnum.REPO_ENDPOINT,
+        )}/repo/v1/entity/${synapseTableEntityId}`,
+        (req, res, ctx) => {
+          return res(ctx.status(200), ctx.json(mockFileViewEntity))
+        },
+      ),
+      ...getHandlersForTableQuery(queryResultBundleWithRenamedColumn),
+    )
+
+    renderTable({ showDirectDownloadColumn: true })
+    mockAllIsIntersecting(true)
+
+    const column = await screen.findByRole('columnheader')
+    within(column).getByText('Number of Studies')
+    screen.getByText('123')
+  })
 })

packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx

@@ -78,7 +78,7 @@ export function SynapseTable(props: SynapseTableProps) {
     useQueryVisualizationContext()
   const synapseTableContext = useMemo(() => ({ columnLinks }), [columnLinks])
 
-  const { columnModels = [] } = data ?? {}
+  const { selectColumns = [] } = data ?? {}
 
   const isLoggedIn = !!useSynapseContext().accessToken
 
@@ -114,17 +114,17 @@ export function SynapseTable(props: SynapseTableProps) {
       addToDownloadListColumn,
       directDownloadColumn,
       accessColumn,
-      ...(data?.columnModels?.map((columnModel, index) => {
+      ...(data?.selectColumns?.map((selectColumn, index) => {
         return columnHelper.accessor(row => row.values[index], {
-          id: columnModel.name,
-          enableSorting: isSortableColumn(columnModel.columnType),
+          id: selectColumn.name,
+          enableSorting: isSortableColumn(selectColumn.columnType),
           enableResizing: true,
           header: TableDataColumnHeader,
           cell: TableDataCell,
         })
       }) ?? []),
     ],
-    [data?.columnModels],
+    [data?.selectColumns],
   )
 
   const prependColumnVisibility: VisibilityState = useMemo(
@@ -146,13 +146,13 @@ export function SynapseTable(props: SynapseTableProps) {
   // Transform our `columnsToShowInTable` to @tanstack/react-table's `VisibilityState`
   const columnVisibility: VisibilityState = useMemo(
     () =>
-      (data?.columnModels ?? []).reduce((prev: VisibilityState, curr) => {
+      (data?.selectColumns ?? []).reduce((prev: VisibilityState, curr) => {
         return {
           ...prev,
           [curr.name]: columnsToShowInTable.includes(curr.name),
         }
       }, prependColumnVisibility),
-    [columnsToShowInTable, data?.columnModels, prependColumnVisibility],
+    [columnsToShowInTable, data?.selectColumns, prependColumnVisibility],
   )
 
   const table = useReactTable({
@@ -238,13 +238,13 @@ export function SynapseTable(props: SynapseTableProps) {
               {table.getRowModel().rows.map(row => (
                 <tr key={row.id}>
                   {row.getVisibleCells().map(cell => {
-                    const columnModel = columnModels.find(
+                    const selectColumn = selectColumns.find(
                       cm => cm.name === cell.column.id,
                     )
 
                     const shouldWrapInExpandable =
-                      columnModel &&
-                      columnModel.columnType !==
+                      selectColumn &&
+                      selectColumn.columnType !==
                         ColumnTypeEnum.JSON /* JSON handles its own overflow*/
                     const TableDataCellElement = shouldWrapInExpandable
                       ? ExpandableTableDataCell

packages/synapse-react-client/src/components/SynapseTable/SynapseTableRenderers.tsx

@@ -150,31 +150,33 @@ export function TableDataColumnHeader(
   const lockedColumn = useAtomValue(lockedColumnAtom)
   const data = useAtomValue(tableQueryDataAtom)
   const columnModels = data?.columnModels ?? []
+  const selectColumns = data?.selectColumns ?? []
+  const selectColumn = selectColumns.find(sc => sc.name === column.id)
   const columnModel = columnModels.find(cm => cm.name === column.id)
   const facets = data?.facets ?? []
   const { getColumnDisplayName } = useQueryVisualizationContext()
 
-  if (!columnModel) {
+  if (!selectColumn) {
     return <>{column.id}</>
   }
 
-  const displayColumnName = getColumnDisplayName(columnModel.name)
+  const displayColumnName = getColumnDisplayName(selectColumn!.name)
   // we have to figure out if the current column is a facet selection
   const facetIndex: number = facets.findIndex(
     (facetColumnResult: FacetColumnResult) => {
-      return facetColumnResult.columnName === columnModel.name
+      return facetColumnResult.columnName === columnModel?.name
     },
   )
   // the header must be included in the facets and it has to be enumerable for current rendering capabilities
   const isFacetSelection: boolean =
     facetIndex !== -1 && facets[facetIndex].facetType === 'enumeration'
   const facet = facets[facetIndex] as FacetColumnResultValues
   const isLockedColumn =
-    columnModel.name.toLowerCase() === lockedColumn?.columnName?.toLowerCase() // used in details page to disable filter the column
+    selectColumn.name.toLowerCase() === lockedColumn?.columnName?.toLowerCase() // used in details page to disable filter the column
   const isEntityIDColumn =
-    columnModel &&
-    columnModel.name == 'id' &&
-    columnModel.columnType == ColumnTypeEnum.ENTITYID
+    selectColumn &&
+    selectColumn.name == 'id' &&
+    selectColumn.columnType == ColumnTypeEnum.ENTITYID
   return (
     <div className="SRC-split">
       <div className="SRC-centerContent">
@@ -187,7 +189,7 @@ export function TableDataColumnHeader(
         </span>
       </div>
       <div className="SRC-centerContent" style={{ height: '22px' }}>
-        {isFacetSelection && !isLockedColumn && (
+        {isFacetSelection && !isLockedColumn && columnModel && (
           <span>
             <EnumFacetFilter
               containerAs="Dropdown"
@@ -198,7 +200,7 @@ export function TableDataColumnHeader(
         )}
         {column.getCanSort() && (
           <Tooltip
-            title={`Sort ${getColumnDisplayName(columnModel.name)}`}
+            title={`Sort ${getColumnDisplayName(selectColumn.name)}`}
             placement={'top'}
           >
             <IconButton
@@ -231,14 +233,14 @@ export function TableDataCell(props: CellContext<Row, string | null>) {
   const data = useAtomValue(tableQueryDataAtom)
 
   const selectColumns = data?.selectColumns ?? []
+  const selectColumn = selectColumns.find(cm => cm.name === cell.column.id)
   const columnModels = data?.columnModels ?? []
-  const columnModel = columnModels.find(cm => cm.name === cell.column.id)
   const { columnLinks } = useSynapseTableContext()
-  if (columnModel) {
+  if (selectColumn) {
     const columnLinkConfig = (columnLinks ?? []).find(el => {
-      return el.matchColumnName === columnModel.name
+      return el.matchColumnName === selectColumn.name
     })
-    const columnType = columnModel.columnType
+    const columnType = selectColumn.columnType
     const isBold = cell.column.getIsSorted() ? 'SRC-boldText' : ''
     return (
       <SynapseTableCell
@@ -247,7 +249,7 @@ export function TableDataCell(props: CellContext<Row, string | null>) {
         columnValue={cell.getValue()}
         isBold={isBold}
         columnLinkConfig={columnLinkConfig}
-        columnName={columnModel.name}
+        columnName={selectColumn.name}
         rowData={cell.row.original.values}
         selectColumns={selectColumns}
         columnModels={columnModels}