temp

apps/synapse-oauth-signin/package.json

@@ -9,7 +9,6 @@
     "@mui/icons-material": "^5.15.13",
     "@mui/material": "^5.15.13",
     "@react-hookz/web": "^23.1.0",
-    "@sage-bionetworks/react-base-table": "^1.13.4",
     "@tanstack/react-query": "5.22.2",
     "katex": "^0.16.10",
     "lodash-es": "^4.17.21",

packages/synapse-react-client/.storybook/main.mts

@@ -25,27 +25,27 @@ const config: StorybookConfig = {
     },
   },
 
-  typescript: {
-    // These options are from https://storybook.js.org/blog/material-ui-in-storybook/
-    check: false,
-    checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      // @ts-ignore - speeds up storybook build time
-      allowSyntheticDefaultImports: false,
-      // speeds up storybook build time
-      esModuleInterop: false,
-      // makes union prop types like variant and size appear as select controls
-      shouldExtractLiteralValuesFromEnum: true,
-      // makes string and boolean types that can be undefined appear as inputs and switches
-      shouldRemoveUndefinedFromOptional: true,
-      // Filter out third-party props from node_modules except @mui packages
-      propFilter: prop =>
-        prop.parent
-          ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
-          : true,
-    },
-  },
+  // typescript: {
+  //   // These options are from https://storybook.js.org/blog/material-ui-in-storybook/
+  //   check: false,
+  //   checkOptions: {},
+  //   reactDocgen: 'react-docgen-typescript',
+  //   reactDocgenTypescriptOptions: {
+  //     // @ts-ignore - speeds up storybook build time
+  //     allowSyntheticDefaultImports: false,
+  //     // speeds up storybook build time
+  //     esModuleInterop: false,
+  //     // makes union prop types like variant and size appear as select controls
+  //     shouldExtractLiteralValuesFromEnum: true,
+  //     // makes string and boolean types that can be undefined appear as inputs and switches
+  //     shouldRemoveUndefinedFromOptional: true,
+  //     // Filter out third-party props from node_modules except @mui packages
+  //     propFilter: prop =>
+  //       prop.parent
+  //         ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
+  //         : true,
+  //   },
+  // },
 
   staticDirs: ['../public'],
 

packages/synapse-react-client/.storybook/preview.tsx

@@ -46,9 +46,9 @@ if (process.env.NODE_ENV === 'development') {
   // whyDidYouRender is a dev/debugging tool that logs to the console with information about why a component rendered
   // It won't track most components by default. Follow these instructions to track a component
   // https://github.com/welldone-software/why-did-you-render#tracking-components
-  whyDidYouRender(React, {
-    trackAllPureComponents: true,
-  })
+  // whyDidYouRender(React, {
+  //   trackAllPureComponents: true,
+  // })
 }
 
 export const parameters = {

packages/synapse-react-client/package.json

@@ -53,13 +53,13 @@
     "@rjsf/utils": "5.17.1",
     "@rjsf/validator-ajv8": "5.17.1",
     "@sage-bionetworks/markdown-it-container": "workspace:*",
-    "@sage-bionetworks/react-base-table": "^1.13.4",
     "@sage-bionetworks/synapse-client": "workspace:*",
     "@sage-bionetworks/synapse-types": "workspace:*",
     "@tanstack/query-core": "5.22.2",
     "@tanstack/react-query": "5.22.2",
     "@tanstack/react-query-devtools": "5.24.0",
     "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.11.1",
     "@upsetjs/react": "^1.11.0",
     "animate.css": "^4.1.1",
     "bootstrap": "^4.6.2",
@@ -147,18 +147,18 @@
     "@jest/reporters": "^29.7.0",
     "@juggle/resize-observer": "^3.4.0",
     "@open-draft/deferred-promise": "^2.2.0",
-    "@storybook/addon-actions": "^8.2.4",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-themes": "^8.2.4",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
-    "@storybook/test": "^8.2.4",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.4",
+    "@storybook/theming": "^8.4.7",
     "@svgr/plugin-jsx": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -225,7 +225,7 @@
     "react-dom": "^18.2.0",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^8.2.4",
+    "storybook": "^8.4.7",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",

packages/synapse-react-client/src/assets/icons/Sort.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import { SortOrder } from '@sage-bionetworks/react-base-table'
 import { Direction } from '@sage-bionetworks/synapse-types'
 
 type SortIconProps = {
-  direction: Direction | SortOrder | 'ASC' | 'DESC'
+  direction: Direction | 'ASC' | 'DESC'
   active: boolean
 }
 

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

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react'
 import AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'
 import { EntityType } from '@sage-bionetworks/synapse-types'
+import { EntityChildrenDetails } from '../EntityFinder/details/configurations/EntityChildrenDetails'
 import { EntityDetailsListSharedProps } from '../EntityFinder/details/EntityDetailsList'
 import { VersionSelectionType } from '../EntityFinder/VersionSelectionType'
 import { EntityFinderHeader } from '../EntityFinder/EntityFinderHeader'
 import { useEntitySelection } from '../EntityFinder/useEntitySelection'
-import { ChallengeEntityChildrenDetails } from './ChallengeEntityChildrenDetails'
 import { Box, Button } from '@mui/material'
 import { useAddFileBatchToDownloadList } from '../../synapse-queries'
 import { displayToast } from '../ToastMessage'
@@ -70,13 +70,16 @@ export function ChallengeDataDownload({
     isIdSelected,
     isSelectable: () => true,
     toggleSelection,
+    showDirectDownloadColumn: true,
+    hideAddToDownloadListColumn: true,
   }
   return (
     <>
       <Box>
-        <ChallengeEntityChildrenDetails
+        <EntityChildrenDetails
           parentContainerId={parentContainerId}
           {...sharedProps}
+          // TODO: replace the AddToDownloadList column with direct download column
         />
       </Box>
       <Box mt={4}>