From 59af634766a5ace5017283494225a3414122c27e Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 02:48:16 -0500 Subject: [PATCH 1/8] use correct theme hook --- .../submission/program/[shortName]/clinical-data/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/page.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/page.tsx index 92620b4c..bdba3b87 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/page.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/page.tsx @@ -28,8 +28,7 @@ import useUrlParamState from '@/app/hooks/useUrlParamState'; import { notNull } from '@/global/utils'; import { css } from '@/lib/emotion'; import { useQuery } from '@apollo/client'; -import { useTheme } from '@emotion/react'; -import { Loader, Typography, VerticalTabs } from '@icgc-argo/uikit'; +import { Loader, Typography, VerticalTabs, useTheme } from '@icgc-argo/uikit'; import { useState } from 'react'; import { setConfiguration } from 'react-grid-system'; import ClinicalEntityDataTable from './ClinicalEntityDataTable'; From afeece3eb77c3cee3805d08404b4d8351403ba28 Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 02:48:43 -0500 Subject: [PATCH 2/8] custom TDs and THs --- .../clinical-data/ClinicalEntityDataTable.tsx | 149 +++++++++++++----- 1 file changed, 112 insertions(+), 37 deletions(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index 8acb0227..c5e5efe3 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -475,10 +475,12 @@ const ClinicalEntityDataTable = ({ .sort(sortEntityData); } + const styleThickBorderString = `3px solid ${theme.colors.grey}`; const getHeaderBorder = (key) => (showCompletionStats && key === completionColumnHeaders.followUps) || - (!showCompletionStats && key === 'donor_id') - ? `3px solid ${theme.colors.grey}` + (!showCompletionStats && key === 'donor_id') || + key === 'FO' + ? styleThickBorderString : ''; const [stickyDonorIDColumnsWidth, setStickyDonorIDColumnsWidth] = useState(74); @@ -636,51 +638,94 @@ const ClinicalEntityDataTable = ({ borderBottom: `1px solid ${theme.colors.grey_2}`, }; + const headerStyle = css` + background-color: ${theme.colors.grey_4}; + border-bottom: 1px solid ${theme.colors.grey_2}; + border-right: 1px solid ${theme.colors.grey_2}; + padding: 5px; + font-size: 13px; + text-align: left; + `; + columns = [ { id: 'clinical_core_completion_header', - header: ( -
- CLINICAL CORE COMPLETION - - For clinical completeness, each donor requires:
- DO: at least one Donor record
- PD: at least one Primary Diagnosis record
- NS: all the registered Normal DNA Specimen record
- TS: all the registered Tumour DNA Specimen record
- TR: at least one Treatment record
- FO: at least one Follow Up record
-

- } + meta: { customHeader: true }, + header: (props) => { + return ( + - - -
- ), +
+ CLINICAL CORE COMPLETION + + For clinical completeness, each donor requires:
+ DO: at least one Donor record
+ PD: at least one Primary Diagnosis record
+ NS: all the registered Normal DNA Specimen record
+ TS: all the registered Tumour DNA Specimen record
+ TR: at least one Treatment record
+ FO: at least one Follow Up record
+

+ } + > + + +
+ + ); + }, headerStyle: completionHeaderStyle, columns: columns.slice(0, 7).map((column) => ({ ...column, + header: (props) => { + console.log('props', props); + const val = props.header.id; + const colIdForBorder = 'FO'; + return ( + + {val} + + ); + }, maxWidth: noTableData ? 50 : 250, style: noTableData ? noDataCellStyle : {}, + meta: { customCell: true, customHeader: true }, cell: (context) => { const value = context.getValue(); - const { isCompletionCell, errorState } = getCellStyles( + const { isCompletionCell, errorState, style } = getCellStyles( undefined, context.row, context.column, @@ -688,17 +733,44 @@ const ClinicalEntityDataTable = ({ const showSuccessSvg = isCompletionCell && !errorState; - return showSuccessSvg ? ( + const content = showSuccessSvg ? ( ) : ( value ); + + return ( + +
+ {content} +
+ + ); }, })), }, { id: 'submitted_donor_data_header', - header:
SUBMITTED DONOR DATA
, + meta: { customHeader: true }, + header: (props) => ( + +
SUBMITTED DONOR DATA
+ + ), headerStyle: dataHeaderStyle, columns: columns.slice(7).map((column, i) => column), }, @@ -757,6 +829,7 @@ const ClinicalEntityDataTable = ({ /> )} + ); From 45558cbee15b6e2d10a88da91ba996b77fb80dd4 Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 03:06:41 -0500 Subject: [PATCH 3/8] cleanup --- .../clinical-data/ClinicalEntityDataTable.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index c5e5efe3..6aa967c3 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -698,22 +698,18 @@ const ClinicalEntityDataTable = ({ columns: columns.slice(0, 7).map((column) => ({ ...column, header: (props) => { - console.log('props', props); const val = props.header.id; - const colIdForBorder = 'FO'; + const isThickBorder = val === 'FO'; return ( {val} From c3f93b308530ac4f0f69e11c55189523c7edffea Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 03:40:50 -0500 Subject: [PATCH 4/8] some sorting working --- .../[shortName]/clinical-data/ClinicalEntityDataTable.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index 6aa967c3..62b0c9a7 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -651,6 +651,7 @@ const ClinicalEntityDataTable = ({ { id: 'clinical_core_completion_header', meta: { customHeader: true }, + sortingFn: sortEntityData, header: (props) => { return ( ({ ...column, + sortingFn: sortEntityData, header: (props) => { const val = props.header.id; const isThickBorder = val === 'FO'; @@ -705,6 +707,9 @@ const ClinicalEntityDataTable = ({ css={css` padding: 2px 6px; font-size: 12px; + :hover { + cursor: pointer; + } border-bottom: 1px solid ${theme.colors.grey_2}; border-right: ${isThickBorder ? styleThickBorderString @@ -768,7 +773,7 @@ const ClinicalEntityDataTable = ({ ), headerStyle: dataHeaderStyle, - columns: columns.slice(7).map((column, i) => column), + columns: columns.slice(7), }, ]; } @@ -847,6 +852,7 @@ const ClinicalEntityDataTable = ({ showPageSizeOptions withStripes enableColumnResizing={false} + enableSorting /> ); From fbe5a8d00b5f248f858e742f99bf06445c220949 Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 03:51:13 -0500 Subject: [PATCH 5/8] sticky cell --- .../clinical-data/ClinicalEntityDataTable.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index 62b0c9a7..9e132c24 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -647,6 +647,14 @@ const ClinicalEntityDataTable = ({ text-align: left; `; + const stickyCSS = css` + position: sticky !important; + left: 0; + top: 0; + z-index: 1; + background-color: white; + `; + columns = [ { id: 'clinical_core_completion_header', @@ -702,6 +710,7 @@ const ClinicalEntityDataTable = ({ header: (props) => { const val = props.header.id; const isThickBorder = val === 'FO'; + const isSticky = val === 'donor_id'; return ( {val} @@ -725,6 +735,7 @@ const ClinicalEntityDataTable = ({ meta: { customCell: true, customHeader: true }, cell: (context) => { const value = context.getValue(); + const isSticky = context.column.id === 'donor_id'; const { isCompletionCell, errorState, style } = getCellStyles( undefined, @@ -744,6 +755,7 @@ const ClinicalEntityDataTable = ({ Date: Tue, 16 Jan 2024 04:23:18 -0500 Subject: [PATCH 6/8] sorting with style --- .../[shortName]/clinical-data/ClinicalEntityDataTable.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index 9e132c24..cb19ea5a 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -711,8 +711,11 @@ const ClinicalEntityDataTable = ({ const val = props.header.id; const isThickBorder = val === 'FO'; const isSticky = val === 'donor_id'; + const isSorted = props.sorted; + return ( {val} From 978ccec4a9497a93de8232ec941d5c8b4b017735 Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 14:17:15 -0500 Subject: [PATCH 7/8] rename var --- .../[shortName]/clinical-data/ClinicalEntityDataTable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index cb19ea5a..af10b913 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -708,9 +708,9 @@ const ClinicalEntityDataTable = ({ ...column, sortingFn: sortEntityData, header: (props) => { - const val = props.header.id; - const isThickBorder = val === 'FO'; - const isSticky = val === 'donor_id'; + const value = props.header.id; + const isThickBorder = value === 'FO'; + const isSticky = value === 'donor_id'; const isSorted = props.sorted; return ( @@ -731,7 +731,7 @@ const ClinicalEntityDataTable = ({ `box-shadow: inset 0 ${isSorted === 'asc' ? '' : '-'}3px 0 0 rgb(7 116 211)`}; `} > - {val} + {value} ); }, From 804d6242e351e0fb5ce73686527ae068b4d3f806 Mon Sep 17 00:00:00 2001 From: Ciaran Schutte Date: Tue, 16 Jan 2024 15:15:24 -0500 Subject: [PATCH 8/8] last index style --- .../clinical-data/ClinicalEntityDataTable.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx index af10b913..b5521a27 100644 --- a/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx +++ b/src/app/(post-login)/submission/program/[shortName]/clinical-data/ClinicalEntityDataTable.tsx @@ -642,17 +642,17 @@ const ClinicalEntityDataTable = ({ background-color: ${theme.colors.grey_4}; border-bottom: 1px solid ${theme.colors.grey_2}; border-right: 1px solid ${theme.colors.grey_2}; - padding: 5px; font-size: 13px; + padding: 5px; text-align: left; `; const stickyCSS = css` - position: sticky !important; + background-color: white; left: 0; + position: sticky !important; top: 0; z-index: 1; - background-color: white; `; columns = [ @@ -704,12 +704,13 @@ const ClinicalEntityDataTable = ({ ); }, headerStyle: completionHeaderStyle, - columns: columns.slice(0, 7).map((column) => ({ + columns: columns.slice(0, 7).map((column, index) => ({ ...column, sortingFn: sortEntityData, header: (props) => { const value = props.header.id; - const isThickBorder = value === 'FO'; + const coreCompletionColumnsCount = 7; + const isLastElement = index === coreCompletionColumnsCount - 1; const isSticky = value === 'donor_id'; const isSorted = props.sorted; @@ -723,7 +724,7 @@ const ClinicalEntityDataTable = ({ cursor: pointer; } border-bottom: 1px solid ${theme.colors.grey_2}; - border-right: ${isThickBorder + border-right: ${isLastElement ? styleThickBorderString : `1px solid ${theme.colors.grey_2}`}; ${isSticky && stickyCSS}