Challenge portal column matching, style matching

Sage-Bionetworks · Jan 7, 2025 · 25739d7 · 25739d7
1 parent 818ab7f
commit 25739d7
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 20 deletions.
diff --git a/packages/synapse-react-client/src/components/ChallengeDataDownload/ChallengeDataDownload.tsx b/packages/synapse-react-client/src/components/ChallengeDataDownload/ChallengeDataDownload.tsx
@@ -6,6 +6,7 @@ import { useAddFileBatchToDownloadList } from '../../synapse-queries'
 import { useSynapseContext } from '../../utils'
 import { EntityChildrenDetails } from '../EntityFinder/details/configurations/EntityChildrenDetails'
 import { EntityDetailsListSharedProps } from '../EntityFinder/details/EntityDetailsList'
+import { DetailsViewColumn } from '../EntityFinder/details/view/DetailsView'
 import { EntityFinderHeader } from '../EntityFinder/EntityFinderHeader'
 import { useEntitySelection } from '../EntityFinder/useEntitySelection'
 import { VersionSelectionType } from '../EntityFinder/VersionSelectionType'
@@ -70,8 +71,13 @@ export function ChallengeDataDownload({
     isIdSelected,
     isSelectable: () => true,
     toggleSelection,
-    showDirectDownloadColumn: true,
-    hideAddToDownloadListColumn: true,
+    hiddenColumns: [
+      DetailsViewColumn.BADGES,
+      DetailsViewColumn.ADD_TO_DOWNLOAD_CART,
+      DetailsViewColumn.CREATED_ON,
+      DetailsViewColumn.VERSION,
+      DetailsViewColumn.MODIFIED_BY,
+    ],
   }
   return (
     <>

diff --git a/packages/synapse-react-client/src/components/EntityFinder/details/EntityDetailsList.tsx b/packages/synapse-react-client/src/components/EntityFinder/details/EntityDetailsList.tsx
@@ -17,7 +17,7 @@ import { FavoritesDetails } from './configurations/FavoritesDetails'
 import { ProjectListDetails } from './configurations/ProjectListDetails'
 import { ReferenceDetails } from './configurations/ReferenceDetails'
 import { SearchDetails } from './configurations/SearchDetails'
-import { DetailsView } from './view/DetailsView'
+import { DetailsView, DetailsViewColumn } from './view/DetailsView'
 
 export enum EntityDetailsListDataConfigurationType {
   REFERENCE_LIST, // Provide references to show in the DetailsList. Incompatible with pagination
@@ -58,10 +58,8 @@ export type EntityDetailsListSharedProps = {
   isSelectable: (header: EntityFinderHeader) => boolean
   toggleSelection: (entity: Reference | Reference[]) => void
   setCurrentContainer?: Dispatch<SetStateAction<EntityTreeContainer>>
-  /** Show the column with a button to immediately download a FileEntity. */
-  showDirectDownloadColumn?: boolean
-  /** Hide the column to add a file to the download list. Hidden by default if no FileEntities can be shown */
-  hideAddToDownloadListColumn?: boolean
+  /** Chosen columns to hide. Defaults to just the DirectDownload column. */
+  hiddenColumns?: DetailsViewColumn[]
 }
 
 export type EntityDetailsListProps = EntityDetailsListSharedProps & {

diff --git a/packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.tsx b/packages/synapse-react-client/src/components/EntityFinder/details/view/DetailsView.tsx
@@ -302,17 +302,17 @@ function getColumns(opts: {
     columnHelper.display({
       id: DetailsViewColumn.ADD_TO_DOWNLOAD_CART,
       header: () => null,
-      size: 40,
-      minSize: 40,
+      size: 45,
+      minSize: 45,
       enableSorting: false,
       enableResizing: false,
       cell: AddFileToDownloadListRenderer,
     }),
     columnHelper.display({
       id: DetailsViewColumn.DIRECT_DOWNLOAD,
-      header: () => null,
-      size: 40,
-      minSize: 40,
+      header: props => <ColumnHeader {...props} title={'Actions'} />,
+      size: 75,
+      minSize: 75,
       enableSorting: false,
       enableResizing: false,
       cell: DirectDownloadRenderer,
@@ -340,6 +340,8 @@ const determineRowAppearance = (args: {
   }
 }
 
+const DEFAULT_HIDDEN_COLUMNS = [DetailsViewColumn.DIRECT_DOWNLOAD]
+
 /**
  * Displays a list of entities in a table.
  *
@@ -371,8 +373,7 @@ export function DetailsView(props: DetailsViewProps) {
     getChildrenInfiniteRequestObject,
     totalEntities,
     setCurrentContainer,
-    hideAddToDownloadListColumn = false,
-    showDirectDownloadColumn = false,
+    hiddenColumns = DEFAULT_HIDDEN_COLUMNS,
   } = props
   const queryClient = useQueryClient()
 
@@ -588,6 +589,16 @@ export function DetailsView(props: DetailsViewProps) {
     ],
   )
 
+  const hideColumnOverrides = useMemo(() => {
+    return hiddenColumns.reduce(
+      (acc: Partial<Record<DetailsViewColumn, boolean>>, column) => {
+        acc[column] = false
+        return acc
+      },
+      {},
+    )
+  }, [hiddenColumns])
+
   const table: Table<EntityFinderTableViewRowData> =
     useReactTable<EntityFinderTableViewRowData>({
       data: tableData,
@@ -606,11 +617,13 @@ export function DetailsView(props: DetailsViewProps) {
             versionSelection !== VersionSelectionType.DISALLOWED,
           [DetailsViewColumn.SIZE]: visibleTypes.includes(EntityType.FILE),
           [DetailsViewColumn.MD5]: visibleTypes.includes(EntityType.FILE),
-          [DetailsViewColumn.ADD_TO_DOWNLOAD_CART]:
-            !hideAddToDownloadListColumn &&
-            visibleTypes.includes(EntityType.FILE),
-          [DetailsViewColumn.DIRECT_DOWNLOAD]:
-            showDirectDownloadColumn && visibleTypes.includes(EntityType.FILE),
+          [DetailsViewColumn.ADD_TO_DOWNLOAD_CART]: visibleTypes.includes(
+            EntityType.FILE,
+          ),
+          [DetailsViewColumn.DIRECT_DOWNLOAD]: visibleTypes.includes(
+            EntityType.FILE,
+          ),
+          ...hideColumnOverrides,
         },
       },
     })

diff --git a/packages/synapse-react-client/src/components/SynapseTable/datasets/DatasetItemsEditor.tsx b/packages/synapse-react-client/src/components/SynapseTable/datasets/DatasetItemsEditor.tsx
@@ -756,7 +756,6 @@ export function DatasetItemsEditor(props: DatasetItemsEditorProps) {
               Tr: {
                 className: `DatasetEditorRow`,
                 style: {
-                  alignItems: 'center',
                   height: `${ROW_HEIGHT}px`,
                   maxHeight: `${ROW_HEIGHT}px`,
                 },

diff --git a/packages/synapse-react-client/src/components/TanStackTable/StyledVirtualTanStackTable.tsx b/packages/synapse-react-client/src/components/TanStackTable/StyledVirtualTanStackTable.tsx
@@ -40,6 +40,7 @@ export function VirtualizedTr<TData = unknown>(
         position: 'absolute',
         transform: `translateY(${virtualItem.start}px)`, //this should always be a `style` as it changes on scroll
         width: '100%',
+        alignItems: 'center',
       }}
     />
   )

diff --git a/packages/synapse-react-client/src/components/styled/StyledTableContainer.tsx b/packages/synapse-react-client/src/components/styled/StyledTableContainer.tsx
@@ -23,6 +23,9 @@ export const StyledTableContainer: StyledComponent<StyledTableContainerProps> =
     ({ theme, density = 'default', noStripedRows = false }) => ({
       overflow: 'auto',
       paddingLeft: '2px',
+      ['thead > tr']: {
+        backgroundColor: theme.palette.grey[200],
+      },
       th: {
         height: '38px',
         backgroundColor: theme.palette.grey[200],

diff --git a/packages/synapse-react-client/src/style/components/_dataset-editor.scss b/packages/synapse-react-client/src/style/components/_dataset-editor.scss
@@ -27,6 +27,9 @@
     overflow-x: auto;
 
     .DatasetEditorTable {
+      tr {
+        border-bottom: 1px solid map.get(SRC.$colors, 'gray-300');
+      }
       td > * {
         max-width: 100%;
         text-overflow: ellipsis;

diff --git a/packages/synapse-react-client/src/style/components/entity_finder/_details-view.scss b/packages/synapse-react-client/src/style/components/entity_finder/_details-view.scss
@@ -75,6 +75,7 @@
     @include SrcMixins.normalLink();
     // Add cursor: pointer in case the link is in a disabled (unselectable) row
     cursor: pointer;
+    width: fit-content;
   }
 
   .EntityFinderTableCellEntityIcon svg {