From 53d4e36946a325cd3ac5bcfb40de2bf16e791663 Mon Sep 17 00:00:00 2001 From: Kiana McCullough Date: Wed, 18 Dec 2024 11:45:51 -0800 Subject: [PATCH 1/5] option to show access column header --- .../src/config/synapseConfigs/cohortbuilder.ts | 1 + .../QueryWrapperPlotNav/QueryWrapperPlotNav.tsx | 4 ++++ .../src/components/QueryWrapperPlotNav/RowSetView.tsx | 10 +++++++++- .../src/components/SynapseTable/SynapseTable.tsx | 9 ++++++++- 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts b/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts index faa8bc432a..38b518697b 100644 --- a/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts +++ b/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts @@ -117,6 +117,7 @@ export const individualsViewQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = export const filesViewQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { rgbIndex, name: 'Data', + showAccessColumnHeader: true, showExportToCavatica: true, fileIdColumnName: 'id', fileNameColumnName: 'name', diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx index 87b9d15f91..942e2c400d 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx @@ -55,6 +55,7 @@ type QueryWrapperPlotNavOwnProps = { /** Whether the displayed results should be paginated or infinite. Default for cards is true, default for table is false */ isInfinite?: boolean sql: string + showAccessColumnHeader?: boolean limit?: number shouldDeepLink?: boolean /** If onQueryChange is set, the callback will be invoked when the Query changes */ @@ -140,6 +141,7 @@ type QueryWrapperPlotNavContentsProps = Pick< | 'fileNameColumnName' | 'fileVersionColumnName' | 'initialLimit' + | 'showAccessColumnHeader' > & { isFullTextSearchEnabled: boolean remount: () => void @@ -148,6 +150,7 @@ type QueryWrapperPlotNavContentsProps = Pick< function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { const { tableConfiguration, + showAccessColumnHeader, name, cardConfiguration, facetsToPlot, @@ -258,6 +261,7 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { hideDownload={hideDownload} cardConfiguration={cardConfiguration} initialLimit={initialLimit} + showAccessColumnHeader={showAccessColumnHeader} /> {showExportMetadata && ( )} {cardConfiguration && ( diff --git a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx index e71c07224c..fbb7d96108 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx @@ -41,6 +41,7 @@ import { useGetEntity } from '../../synapse-queries' export type SynapseTableConfiguration = Pick< SynapseTableProps, | 'showAccessColumn' + | 'showAccessColumnHeader' | 'showDownloadColumn' | 'hideDownload' | 'showDirectDownloadColumn' @@ -56,6 +57,7 @@ export type SynapseTableProps = { /** If true and entity is a view or dataset, renders a column that represents if the caller has permission to download the entity represented by the row */ showAccessColumn?: boolean + showAccessColumnHeader?: boolean /** @deprecated use showDirectDownloadColumn */ showDownloadColumn?: boolean /** @deprecated use hideAddToDownloadListColumn */ @@ -76,6 +78,7 @@ export function SynapseTable(props: SynapseTableProps) { rowSet, isLoadingNewPage, showAccessColumn, + showAccessColumnHeader, showDirectDownloadColumn = showDownloadColumn, hideAddToDownloadListColumn = hideDownload, columnLinks, @@ -141,7 +144,11 @@ export function SynapseTable(props: SynapseTableProps) { rowSelectionColumn, addToDownloadListColumn, directDownloadColumn, - accessColumn, + { + ...accessColumn, + header: + showAccessColumn && showAccessColumnHeader ? 'Access' : undefined, + }, ...(selectColumns.map((selectColumn, index) => { return columnHelper.accessor(row => row.values[index], { id: selectColumn.name, From 1965f6dcbb3a70a7a55573dd7f4494570c3c48a4 Mon Sep 17 00:00:00 2001 From: Kiana McCullough Date: Thu, 19 Dec 2024 12:46:38 -0800 Subject: [PATCH 2/5] empty string rather than undefined --- .../src/components/SynapseTable/SynapseTable.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx index fbb7d96108..c9e7c00a6c 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx @@ -146,8 +146,7 @@ export function SynapseTable(props: SynapseTableProps) { directDownloadColumn, { ...accessColumn, - header: - showAccessColumn && showAccessColumnHeader ? 'Access' : undefined, + header: showAccessColumn && showAccessColumnHeader ? 'Access' : '', }, ...(selectColumns.map((selectColumn, index) => { return columnHelper.accessor(row => row.values[index], { From 24d9fe91a9448b895d7a1d7908db14b5b844e238 Mon Sep 17 00:00:00 2001 From: Kiana McCullough Date: Thu, 19 Dec 2024 12:51:05 -0800 Subject: [PATCH 3/5] testing --- .../src/components/SynapseTable/SynapseTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx index c9e7c00a6c..beccf6adab 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx @@ -146,7 +146,7 @@ export function SynapseTable(props: SynapseTableProps) { directDownloadColumn, { ...accessColumn, - header: showAccessColumn && showAccessColumnHeader ? 'Access' : '', + header: showAccessColumn && showAccessColumnHeader ? 'Access' : null, }, ...(selectColumns.map((selectColumn, index) => { return columnHelper.accessor(row => row.values[index], { From 24d496a52ddda3625e3766e8280b127aac4b6b88 Mon Sep 17 00:00:00 2001 From: Kiana McCullough Date: Thu, 19 Dec 2024 17:04:26 -0800 Subject: [PATCH 4/5] use tableconfiguration --- .../src/config/synapseConfigs/cohortbuilder.ts | 2 +- .../QueryWrapperPlotNav/QueryWrapperPlotNav.tsx | 4 ---- .../src/components/QueryWrapperPlotNav/RowSetView.tsx | 10 +--------- .../src/components/SynapseTable/SynapseTable.tsx | 2 +- 4 files changed, 3 insertions(+), 15 deletions(-) diff --git a/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts b/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts index 38b518697b..e907915fe7 100644 --- a/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts +++ b/apps/portals/elportal/src/config/synapseConfigs/cohortbuilder.ts @@ -117,7 +117,6 @@ export const individualsViewQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = export const filesViewQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { rgbIndex, name: 'Data', - showAccessColumnHeader: true, showExportToCavatica: true, fileIdColumnName: 'id', fileNameColumnName: 'name', @@ -130,6 +129,7 @@ export const filesViewQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = { additionalFiltersSessionStorageKey: 'cohort-builder-files-perspective', tableConfiguration: { showAccessColumn: true, + showAccessColumnHeader: true, showDownloadColumn: true, columnLinks: [ { diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx index 942e2c400d..87b9d15f91 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx @@ -55,7 +55,6 @@ type QueryWrapperPlotNavOwnProps = { /** Whether the displayed results should be paginated or infinite. Default for cards is true, default for table is false */ isInfinite?: boolean sql: string - showAccessColumnHeader?: boolean limit?: number shouldDeepLink?: boolean /** If onQueryChange is set, the callback will be invoked when the Query changes */ @@ -141,7 +140,6 @@ type QueryWrapperPlotNavContentsProps = Pick< | 'fileNameColumnName' | 'fileVersionColumnName' | 'initialLimit' - | 'showAccessColumnHeader' > & { isFullTextSearchEnabled: boolean remount: () => void @@ -150,7 +148,6 @@ type QueryWrapperPlotNavContentsProps = Pick< function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { const { tableConfiguration, - showAccessColumnHeader, name, cardConfiguration, facetsToPlot, @@ -261,7 +258,6 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { hideDownload={hideDownload} cardConfiguration={cardConfiguration} initialLimit={initialLimit} - showAccessColumnHeader={showAccessColumnHeader} /> {showExportMetadata && ( )} {cardConfiguration && ( diff --git a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx index beccf6adab..c9e7c00a6c 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx @@ -146,7 +146,7 @@ export function SynapseTable(props: SynapseTableProps) { directDownloadColumn, { ...accessColumn, - header: showAccessColumn && showAccessColumnHeader ? 'Access' : null, + header: showAccessColumn && showAccessColumnHeader ? 'Access' : '', }, ...(selectColumns.map((selectColumn, index) => { return columnHelper.accessor(row => row.values[index], { From 17fe066dfc3d42863857f6f4707d1d38c165528e Mon Sep 17 00:00:00 2001 From: Kiana McCullough Date: Fri, 20 Dec 2024 10:19:48 -0800 Subject: [PATCH 5/5] added dependency, elite portal table config update --- apps/portals/elportal/src/pages/StudyDetailsPage.tsx | 2 ++ .../src/components/SynapseTable/SynapseTable.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/portals/elportal/src/pages/StudyDetailsPage.tsx b/apps/portals/elportal/src/pages/StudyDetailsPage.tsx index 9939c953cb..5ccff1f07b 100644 --- a/apps/portals/elportal/src/pages/StudyDetailsPage.tsx +++ b/apps/portals/elportal/src/pages/StudyDetailsPage.tsx @@ -144,6 +144,7 @@ export const studyDetailsPageRoutes: RouteObject[] = [ isRowSelectionUIFloating={false} tableConfiguration={{ showAccessColumn: true, + showAccessColumnHeader: true, showDownloadColumn: true, }} availableFacets={['metadataType', 'dataType', 'assay']} @@ -179,6 +180,7 @@ export const studyDetailsPageRoutes: RouteObject[] = [ isRowSelectionUIFloating={false} tableConfiguration={{ showAccessColumn: true, + showAccessColumnHeader: true, showDownloadColumn: true, columnLinks: [ { diff --git a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx index c9e7c00a6c..1ba9573c5a 100644 --- a/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx +++ b/packages/synapse-react-client/src/components/SynapseTable/SynapseTable.tsx @@ -158,7 +158,7 @@ export function SynapseTable(props: SynapseTableProps) { }) }) ?? []), ], - [selectColumns], + [selectColumns, showAccessColumn], ) const prependColumnVisibility: VisibilityState = useMemo(