PORTALS-2795 - Replace react-base-table usage with TanStack table #1486

nickgros · 2025-01-07T14:32:17Z

Update EntityFinder's DetailsView to use StyledVirtualTanStackTable
Update ChallengeDataDownload component to use EntityFinder components, remove custom components with slightly modified code
- Updated DetailsView to support showing/hiding Add to Download Cart & Direct Download columns
Update DatasetItemsEditor to use StyledVirtualTanStackTable
- Fixed memoization issue in useSet
- Fixed broken test by explicitly refetching the dataset on successful update

Visual Changes

Component	Old	New
Entity Finder
Dataset Editor
ChallengeDataDownload

- Update EntityFinder's DetailsView to use StyledVirtualTanStackTable - Update ChallengeDataDownload component to use EntityFinder components, remove custom components with slightly modified code - Updated DetailsView to support showing/hiding Add to Download Cart & Direct Download columns - Update DatasetItemsEditor to use StyledVirtualTanStackTable - Fixed memoization issue in useSet - Fixed broken test by explicitly refetching the dataset on successful update

nickgros · 2025-01-07T14:36:37Z

...se-react-client/src/components/EntityFinder/details/configurations/EntityChildrenDetails.tsx

+  const [sortingState, setSortingState] = useState<SortingState>([
+    {
+      id: DetailsViewColumn.NAME,
+      desc: false,
+    },
+  ])


Use the TanStack table sorting API in the state variable to make it easy to pass along

...se-react-client/src/components/EntityFinder/details/configurations/EntityChildrenDetails.tsx

nickgros · 2025-01-07T14:38:57Z

packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.test.tsx

+        expect(rows[FILE_INDEX + 1]).not.toBeDisabled()
+        expect(rows[PROJECT_INDEX + 1]).not.toBeDisabled()


The table headers are now resolved as a row, so in this test suite, we need to increment all data indices by 1 to get the corresponding rendered row

nickgros · 2025-01-07T14:40:19Z

packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.tsx

+  enableSorting?: boolean
+  enableMultiSort?: boolean


Use TanStack table sorting API so we don't need to do any additional transforms

nickgros · 2025-01-07T14:41:38Z

packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.tsx

-  noResultsPlaceholder?: ReactElement
+  enableSorting?: boolean
+  enableMultiSort?: boolean
+  sortableColumns?: DetailsViewColumn[]


This table may get its data from different APIs, which may vary by which columns you can ask the server to sort results. If columns are sortable, the wrapping component must indicate which columns can be sorted.

nickgros · 2025-01-07T14:59:19Z

packages/synapse-react-client/src/components/TanStackTable/StyledVirtualTanStackTable.tsx

@@ -72,6 +72,7 @@ export default function StyledVirtualTanStackTable<T = unknown>(
        rowTransform={row => table.getRowModel().rows[row.index]}
        fullWidth={fullWidth}
        styledTableContainerProps={{
+          noStripedRows: true,


Virtualized tables should not be striped

nickgros · 2025-01-07T14:59:36Z

packages/synapse-react-client/src/style/components/_dataset-editor.scss

-$table-prefix: DatasetEditorTable;
-$table-font-size: 14px;
-$header-background-color: map.get(SRC.$colors, 'gray-200');
-$row-hovered-background-color: unset;
-$table-padding-left: 5px;
-@import '@sage-bionetworks/react-base-table/es/BaseTable';


All for react-base-table, removed

nickgros · 2025-01-07T15:00:02Z

packages/synapse-react-client/src/style/components/_dataset-editor.scss

+      td > * {
+        max-width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        display: block;
+      }


Do not let text overflow in table cells (needed, probably because we are now using CSS grid)

nickgros · 2025-01-07T15:02:00Z

packages/synapse-react-client/src/style/components/entity_finder/_details-view.scss

+  // Select odd rows (data-index ends in an odd number)
+  // Don't use nth child because the virtual rows can switch indicies, causing style to flip for the same cell
+  &[data-index$='1'],
+  &[data-index$='3'],
+  &[data-index$='5'],
+  &[data-index$='7'],
+  &[data-index$='9'] {
    background: SRC.$background-color-gray;
  }


The entity finder table is striped. Instead of trying to add a classname to every other tr, we can add the virtual row index to every tr, and change the background color if the attribute is odd (selector matches if the attribute string ends with '1','3','5','7','9')

nickgros · 2025-01-07T15:03:08Z

packages/synapse-react-client/src/utils/hooks/useSet.ts

-    }
-    setSet(newSet)
-  }
+  const add = useCallback(


Caused memoization issues with TanStack Table in the dataset editor

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

…load/ChallengeDataDownload.tsx

nickgros · 2025-01-07T18:02:01Z

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

+    hiddenColumns: [
+      DetailsViewColumn.BADGES,
+      DetailsViewColumn.ADD_TO_DOWNLOAD_CART,
+      DetailsViewColumn.CREATED_ON,
+      DetailsViewColumn.VERSION,
+      DetailsViewColumn.MODIFIED_BY,
+    ],


For the challenge portal version of this component, hide these columns (instead of maintaining tons of duplicate code!).

- Typechecking for EntityBadgeIcons tests - Move table cell components to individual files

nickgros · 2025-01-07T19:48:16Z

packages/synapse-react-client/src/components/EntityFinder/details/EntityDetailsList.tsx

+  /** Chosen columns to hide. Defaults to just the DirectDownload column. */
+  hiddenColumns?: DetailsViewColumn[]


Exposed for challenge portal customization

nickgros · 2025-01-07T19:50:10Z

packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.tsx

+          [DetailsViewColumn.DIRECT_DOWNLOAD]: visibleTypes.includes(
+            EntityType.FILE,
+          ),
+          ...hideColumnOverrides,


Columns passed via hiddenColumns prop will pass along show/hide state to useReactTable here

nickgros · 2025-01-07T19:51:55Z

packages/synapse-react-client/src/components/EntityBadgeIcons/EntityBadgeIcons.test.tsx

@@ -1,43 +1,40 @@
-import { act, render, screen, waitFor } from '@testing-library/react'


No logical changes to these tests. An unused prop was removed from the component under test. I moved this test file to the src folder and fixed type errors.

nickgros · 2025-01-07T19:52:22Z

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

-  /** Whether this component should render a ReactTooltip or if an external component is managing it */
-  renderTooltipComponent: boolean


Unused prop that dates back to when we used the react-tooltip library.

nickgros · 2025-01-07T19:53:33Z

.../synapse-react-client/src/components/EntityFinder/details/view/DetailsViewTableRenderers.tsx

Moved all of these components to their own files, and modified them to use the TanStack table API. Minimal changes to rendered content (e.g. removed a wrapper div in a few places)

nickgros · 2025-01-07T19:54:47Z

...ynapse-react-client/src/components/EntityFinder/details/view/table/AddToDownloadListCell.tsx

+import { displayToast } from '../../../../ToastMessage/index'
+import { EntityFinderTableViewRowData } from '../DetailsView'
+
+export function AddFileToDownloadListCell(


All of these table cell data components were moved into their own files to keep them simple & optimized for HMR.

They were changed to use the TanStack table API (which TypeScript will catch), but otherwise should not have many changes, so I don't think they need to be closely reviewed.

nickgros · 2025-01-07T19:56:58Z

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

+  const user = userEvent.setup()
+
+  const mockOnUnsavedChangesFn = jest.fn()
+  const mockOnSaveFn = jest.fn()
+  const mockOnCloseFn = jest.fn()


Fixed some flaky test issues by creating new mocks/userEvent instance each render. I think I had an issue where some actions in tests would fire after the test had ended and next test started, which made mock invocation counts incorrect.

nickgros · 2025-01-07T19:59:58Z

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

+        <Tooltip title={!hasChangedSinceLastSave && NO_CHANGES_MADE}>
+          <div>
+            <Button
+              disabled={!datasetToUpdate || !hasChangedSinceLastSave}
+              variant="contained"
+              color="primary"
+              onClick={() => mutate(datasetToUpdate!)}
+            >
+              Save
+            </Button>
+          </div>
+        </Tooltip>


Update 'Save' button to only enable when changes are pending. Add tooltip + div wrapper to tell the user why it's disabled.

nickgros · 2025-01-07T20:01:19Z

packages/synapse-react-client/src/components/styled/StyledTableContainer.tsx

+      ['thead > tr']: {
+        backgroundColor: theme.palette.grey[200],
+      },


In addition to the th cells, add a background color to the entire header row. This prevents a visual regression where the full table width is wider than the sum of all columns.

react-base-table auto-sized the columns to take up at least the full width of the table container, so this wasn't an issue before.

nickgros added the chromatic Deploys the latest commit on this PR to Chromatic and runs snapshot tests label Jan 7, 2025

nickgros commented Jan 7, 2025

View reviewed changes

nickgros added 3 commits January 7, 2025 10:04

Add/remove comments

8f3c2e2

Stabilize test

818ab7f

Challenge portal column matching, style matching

25739d7

nickgros force-pushed the PORTALS-2795a branch from 2ebbb45 to 25739d7 Compare January 7, 2025 17:01

nickgros commented Jan 7, 2025

View reviewed changes

packages/synapse-react-client/src/components/ChallengeDataDownload/ChallengeDataDownload.tsx Outdated Show resolved Hide resolved

Update packages/synapse-react-client/src/components/ChallengeDataDown…

63266f6

…load/ChallengeDataDownload.tsx

nickgros commented Jan 7, 2025

View reviewed changes

nickgros added 2 commits January 7, 2025 13:39

Fix style when resizing the dialog

9b02791

- Remove unused prop from EntityBadgeIcons.tsx

f35303a

- Typechecking for EntityBadgeIcons tests - Move table cell components to individual files

nickgros commented Jan 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PORTALS-2795 - Replace react-base-table usage with TanStack table #1486

PORTALS-2795 - Replace react-base-table usage with TanStack table #1486

nickgros commented Jan 7, 2025 •

edited

Loading

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025 •

edited

Loading

nickgros Jan 7, 2025

nickgros Jan 7, 2025

nickgros Jan 7, 2025 •

edited

Loading

		expect(rows[FILE_INDEX + 1]).not.toBeDisabled()
		expect(rows[PROJECT_INDEX + 1]).not.toBeDisabled()

		/** Chosen columns to hide. Defaults to just the DirectDownload column. */
		hiddenColumns?: DetailsViewColumn[]

		@@ -1,43 +1,40 @@
		import { act, render, screen, waitFor } from '@testing-library/react'

		/** Whether this component should render a ReactTooltip or if an external component is managing it */
		renderTooltipComponent: boolean

PORTALS-2795 - Replace react-base-table usage with TanStack table #1486

Are you sure you want to change the base?

PORTALS-2795 - Replace react-base-table usage with TanStack table #1486

Conversation

nickgros commented Jan 7, 2025 • edited Loading

Visual Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

nickgros commented Jan 7, 2025 •

edited

Loading

nickgros Jan 7, 2025 •

edited

Loading

nickgros Jan 7, 2025 •

edited

Loading