PORTALS-2651 - Download Cart #1536

nickgros · 2025-01-30T20:04:43Z

Remove react-bootstrap from DownloadCart
Add column pinning styles to shared TanStack table UI components
Fix some stale query / query key issues related to the download cart queries

- Remove react-bootstrap from DownloadCart - Add column pinning styles to shared TanStack table UI components - Fix some stale query / query key issues related to the download cart queries

nickgros · 2025-01-30T20:05:46Z

packages/synapse-react-client/src/components/DownloadCart/DownloadCartPage.tsx

@@ -306,10 +306,7 @@ export function DownloadCartPage(props: DownloadListActionsRequiredProps) {
                  }
                  numFiles={data.numberOfFilesAvailableForDownload}
                />
-                <AvailableForDownloadTable
-                  filesStatistics={data}
-                  refetchStatistics={refetch}


Removed refetchStatistics and properly linked up the react-query hooks to invalidate the cache when statistics should be re-fetched

nickgros · 2025-01-30T20:06:32Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.test.tsx

@@ -89,16 +83,14 @@ describe('DownloadListTable tests', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })
-  it('loads more available download files when inView', async () => {
+  it('loads more available download files when "show more" is clicked', async () => {


This had an infinite scroll, which was inappropriate for a non-height constrained table that could be very long. So I changed to a "Show More" pattern

- Update SynapseClient

nickgros · 2025-01-30T22:06:12Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx


-function InteractiveSortIcon(props: {


Removed this component, sort UI is now handled by common TanStack table components

nickgros · 2025-01-30T22:06:52Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

-  columnSortBy: SortField
-  sort: Sort | undefined
-  setSort: React.Dispatch<React.SetStateAction<Sort | undefined>>
+function RemoveFromDownloadListButton(props: {


Encapsulate RemoveFromDownloadListButton component to use useRemoveFilesFromDownloadList hook (using useMutation under-the-hood)

nickgros · 2025-01-30T22:07:22Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

+const columnHelper = createColumnHelper<DownloadListItemResult>()
+const getColumns = (args: {
+  removeItem: (item: DownloadListItem, fileName: string, title: string) => void
+  onCopySynIds: () => void
+}) => {


Create TanStack Table columns

nickgros · 2025-01-30T22:07:56Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

-  // Load the next page when this ref comes into view.
-  const { ref, inView } = useInView()


Remove useInView and replace infinite scroll with "Show More" button

nickgros · 2025-01-30T22:09:21Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

+      columnPinning: {
+        right: ['actions'],
+      },


TanStack table has built-in support for columnPinning, which is basically the same thing as our static "Actions" column. The "pinned" column(s) will not change for this table, so this state value is constant.

nickgros · 2025-01-30T22:10:13Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

+      getRowClassNames(row: Row<DownloadListItemResult>) {
+        if (!row.original.isEligibleForPackaging) {
+          return 'ineligibleForPackaging'
+        }
+        return ''
+      },


To properly set the background color the table cell, I am applying a class to the tr element--the table cell itself has padding so I cannot simply apply the color to the cell contents.

nickgros · 2025-01-30T22:11:20Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

+        <Select native fullWidth value={getFilterDisplayText(filter)}>
+          {availableFiltersArray.map(availableFilter => (
+            <option
+              key={`${getFilterDisplayText(availableFilter)}-filter-option`}
+              onClick={() => {
+                setFilter(availableFilter)
+              }}
+            >
+              {getFilterDisplayText(availableFilter)}
+            </option>
+          ))}
+        </Select>


Replace Bootstrap Dropdown with MUI Select

nickgros · 2025-01-30T22:11:46Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

+          {/* TODO: This table can be very large, so it should be refactored to use row virtualization or discrete pagination */}
+          <StyledTanStackTable table={table} fullWidth={false} />


Use common TanStack table UI. Left a note for future improvements

nickgros · 2025-01-30T22:12:11Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

-            </tbody>
-          </Table>
-        </>
+                {isFetchingNextPage ? 'Loading...' : 'Show More'}


Added Show More button

nickgros · 2025-01-30T22:12:34Z

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

@@ -106,6 +107,7 @@ export default function StyledTanStackTable<
                      width: `calc(var(${getHeaderSizeCssVariable(
                        header.id,
                      )}) * 1px)`,
+                      ...getCommonPinningStyles(header.column),


Add general support for column pinning

nickgros · 2025-01-30T22:12:50Z

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

+        let mergedClassNames = trSlotProps.className ?? ''
+        if (table.options.meta?.getRowClassNames) {
+          mergedClassNames =
+            `${mergedClassNames} ${table.options.meta.getRowClassNames(
+              row,
+            )}`.trim()
+        }


Add general support for dynamically setting row class names based on row data

nickgros · 2025-01-30T22:13:16Z

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

+      ['tr']: {
+        backgroundColor: theme.palette.background.default,
+      },
+      ['tr:nth-of-type(even)']: noStripedRows
+        ? undefined
+        : {
+            backgroundColor: theme.palette.grey[100],
+          },


Explicitly set the background of the table rows, or else the pinned columns have transparent backgrounds

We don't want to see the column content behind the pinned column? :D

The opacity applies to the entire column including this background (at least on Firefox), so you can still see through it!

lakikowolfe · 2025-01-31T01:36:15Z

Just wanted to note that there will be merge conflicts with #1538

- Remove unused SCSS mixins

…b-monorepo into PORTALS-2651-download-table

nickgros · 2025-02-04T18:39:28Z

packages/synapse-react-client/src/components/DownloadCart/DownloadCartPage.tsx

-                <AvailableForDownloadTable
-                  filesStatistics={data}
-                  refetchStatistics={refetch}
-                  numBytes={data.sumOfFileSizesAvailableForDownload}
-                  numPackagableFiles={
-                    data.numberOfFilesAvailableForDownloadAndEligibleForPackaging
-                  }
-                  numFiles={data.numberOfFilesAvailableForDownload}
-                />


Remove props, get this data directly from the query hook

nickgros · 2025-02-04T18:40:18Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx

-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
+            <Select native fullWidth value={getFilterDisplayText(filter)}>


Replace bootstrap dropdown with MUI Select

jay-hodgson · 2025-02-04T21:12:06Z

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx


  const availableFiltersArray: AvailableFilter[] = [
    undefined,
    'eligibleForPackaging',
    'ineligibleForPackaging',
  ]
  return (
-    <div className="bootstrap-4-backport">


This is one of my favorite lines from this PR ;)

PORTALS-2651

25f7586

- Remove react-bootstrap from DownloadCart - Add column pinning styles to shared TanStack table UI components - Fix some stale query / query key issues related to the download cart queries

nickgros commented Jan 30, 2025

View reviewed changes

PORTALS-2651

360b55e

- Update SynapseClient

nickgros changed the title ~~PORTALS-2651~~ PORTALS-2651 - Download Cart Jan 30, 2025

nickgros commented Jan 30, 2025

View reviewed changes

PORTALS-2651

3125941

- Remove unused SCSS mixins

nickgros marked this pull request as draft January 31, 2025 15:59

nickgros added 2 commits February 4, 2025 13:16

Merge branch 'main' of https://github.com/Sage-Bionetworks/synapse-we…

b4264ea

…b-monorepo into PORTALS-2651-download-table

Remove unnecessary props, fix overflow style

c7c9045

nickgros commented Feb 4, 2025

View reviewed changes

nickgros marked this pull request as ready for review February 4, 2025 18:41

jay-hodgson reviewed Feb 4, 2025

View reviewed changes

jay-hodgson approved these changes Feb 4, 2025

View reviewed changes

nickgros merged commit 6579c35 into Sage-Bionetworks:main Feb 4, 2025
24 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PORTALS-2651 - Download Cart #1536

PORTALS-2651 - Download Cart #1536

nickgros commented Jan 30, 2025

nickgros Jan 30, 2025

nickgros Jan 30, 2025

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025

nickgros Jan 30, 2025

nickgros Jan 30, 2025 •

edited

Loading

jay-hodgson Feb 4, 2025

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025

jay-hodgson Feb 4, 2025

nickgros Feb 4, 2025

lakikowolfe commented Jan 31, 2025

nickgros Feb 4, 2025

nickgros Feb 4, 2025

jay-hodgson Feb 4, 2025

		// Load the next page when this ref comes into view.
		const { ref, inView } = useInView()

		{/* TODO: This table can be very large, so it should be refactored to use row virtualization or discrete pagination */}
		<StyledTanStackTable table={table} fullWidth={false} />

PORTALS-2651 - Download Cart #1536

PORTALS-2651 - Download Cart #1536

Conversation

nickgros commented Jan 30, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

nickgros Jan 30, 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 30, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

nickgros Jan 30, 2025 • edited Loading

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

lakikowolfe commented Jan 31, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading

nickgros Jan 30, 2025 •

edited

Loading