From 4662194769cf93ea136c816d80c92b4d5c0e057c Mon Sep 17 00:00:00 2001 From: Bill Nguyen Date: Wed, 20 Mar 2024 16:21:05 -0700 Subject: [PATCH 1/4] - DEVSU-2244 - Add percentile visibility checkbox --- app/common.d.ts | 1 + app/components/TumourSummaryEdit/index.tsx | 30 ++++++++++++++++++- .../components/GenomicSummary/index.tsx | 2 +- .../components/RapidSummary/index.tsx | 4 +-- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/app/common.d.ts b/app/common.d.ts index 5aa867af0..63dfd2160 100644 --- a/app/common.d.ts +++ b/app/common.d.ts @@ -314,6 +314,7 @@ type ImmuneType = { kbCategory: string | null; percentile: number | null; score: number | null; + percentileHidden: boolean; } & RecordDefaults; type MicrobialType = { diff --git a/app/components/TumourSummaryEdit/index.tsx b/app/components/TumourSummaryEdit/index.tsx index f4e20629f..53a72588a 100644 --- a/app/components/TumourSummaryEdit/index.tsx +++ b/app/components/TumourSummaryEdit/index.tsx @@ -87,6 +87,7 @@ const TumourSummaryEdit = ({ setNewTCellCd8Data({ score: tCellCd8.score, percentile: tCellCd8.percentile, + percentileHidden: tCellCd8.percentileHidden, }); } }, [tCellCd8]); @@ -126,6 +127,14 @@ const TumourSummaryEdit = ({ setTCellCd8Dirty(true); }, []); + const handleTCellCd8PercentileVisibleChange = useCallback(({ target: { checked, name } }) => { + setNewTCellCd8Data((prevVal) => ({ + ...prevVal, + [name]: checked, + })); + setTCellCd8Dirty(true); + }, []); + const handleMutationBurdenChange = useCallback((event: React.ChangeEvent) => { const { target: { value, name } } = event; setNewMutationBurdenData((prevVal) => ({ ...prevVal, [name]: value })); @@ -430,8 +439,27 @@ const TumourSummaryEdit = ({ fullWidth type="number" /> + } + checkedIcon={} + checked={newTCellCd8Data?.percentileHidden} + name="percentileHidden" + onChange={handleTCellCd8PercentileVisibleChange} + sx={{ + color: 'default', + '&.Mui-checked': { + color: pink[800], + }, + }} + /> + )} + label="Show/Hide CD8+ T Cell Percentile" + /> - ), [newTCellCd8Data, handleTCellCd8Change]); + ), [newTCellCd8Data?.score, newTCellCd8Data?.percentile, newTCellCd8Data?.percentileHidden, handleTCellCd8Change, handleTCellCd8PercentileVisibleChange]); const mutBurDataSection = useMemo(() => ( <> diff --git a/app/views/ReportView/components/GenomicSummary/index.tsx b/app/views/ReportView/components/GenomicSummary/index.tsx index a856eb6d6..524353e2a 100644 --- a/app/views/ReportView/components/GenomicSummary/index.tsx +++ b/app/views/ReportView/components/GenomicSummary/index.tsx @@ -264,7 +264,7 @@ const GenomicSummary = ({ let tCell: null | string; if (tCellCd8 && typeof tCellCd8.score === 'number') { - tCell = `${tCellCd8.score} ${tCellCd8.percentile ? `(${tCellCd8.percentile}%)` : ''}`; + tCell = `${tCellCd8.score} ${tCellCd8.percentile && !tCellCd8.percentileHidden ? `(${tCellCd8.percentile}%)` : ''}`; } else { tCell = null; } diff --git a/app/views/ReportView/components/RapidSummary/index.tsx b/app/views/ReportView/components/RapidSummary/index.tsx index 4646b7923..3942a03dd 100644 --- a/app/views/ReportView/components/RapidSummary/index.tsx +++ b/app/views/ReportView/components/RapidSummary/index.tsx @@ -343,7 +343,7 @@ const RapidSummary = ({ { term: 'CD8+ T Cell Score', value: typeof tCellCd8?.score === 'number' - ? `${tCellCd8.score} ${tCellCd8.percentile ? `(${tCellCd8.percentile}%)` : ''}` + ? `${tCellCd8.score} ${tCellCd8.percentile && !tCellCd8.percentileHidden ? `(${tCellCd8.percentile}%)` : ''}` : null, }, { @@ -370,7 +370,7 @@ const RapidSummary = ({ value: msiStatus, }, ]); - }, [microbial, primaryBurden, tmburMutBur, report.m1m2Score, report.sampleInfo, report.tumourContent, tCellCd8?.percentile, tCellCd8?.score, report.captiv8Score]); + }, [microbial, primaryBurden, tmburMutBur, report.m1m2Score, report.sampleInfo, report.tumourContent, tCellCd8.percentile, tCellCd8.score, report.captiv8Score, tCellCd8.percentileHidden]); const handlePatientEditClose = useCallback(( newPatientData: PatientInformationType, From a8d81edab7ebaa47f52519424f84837cbc19971e Mon Sep 17 00:00:00 2001 From: Bill Nguyen Date: Fri, 22 Mar 2024 10:22:32 -0700 Subject: [PATCH 2/4] - DEVSU-2244 - Add visibility toggle for cd8+ percentile in tumour summary edit - Enforce visibility rule for CD8+ percentile on genomic and rapid summaries - Adjust size and margin of visibility toggles for both CD8+ percentile and TMB information --- app/components/TumourSummaryEdit/index.scss | 7 ++++++- app/components/TumourSummaryEdit/index.tsx | 10 +++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/app/components/TumourSummaryEdit/index.scss b/app/components/TumourSummaryEdit/index.scss index c5ee952d5..a1cab2765 100644 --- a/app/components/TumourSummaryEdit/index.scss +++ b/app/components/TumourSummaryEdit/index.scss @@ -9,6 +9,11 @@ &__check-box { color: gray; - padding-top: 2px; + margin-top: -12px; + font-size: 2; } +} + +.checkbox-label { + font-size: 10pt; } \ No newline at end of file diff --git a/app/components/TumourSummaryEdit/index.tsx b/app/components/TumourSummaryEdit/index.tsx index 53a72588a..7f8677baa 100644 --- a/app/components/TumourSummaryEdit/index.tsx +++ b/app/components/TumourSummaryEdit/index.tsx @@ -167,7 +167,7 @@ const TumourSummaryEdit = ({ const handleClose = useCallback(async (isSaved) => { let callSet = null; - if (!!newTmburMutData.adjustedTmb && !newTmburMutData.adjustedTmbComment) { + if (!!newTmburMutData?.adjustedTmb && !newTmburMutData?.adjustedTmbComment) { snackbar.warning('Please add a comment on the adjusted TMB'); isSaved = false; onClose(false); @@ -443,6 +443,7 @@ const TumourSummaryEdit = ({ className="tumour-dialog__check-box" control={( } checkedIcon={} checked={newTCellCd8Data?.percentileHidden} @@ -453,10 +454,11 @@ const TumourSummaryEdit = ({ '&.Mui-checked': { color: pink[800], }, + marginLeft: 1, }} /> )} - label="Show/Hide CD8+ T Cell Percentile" + label={
Show/Hide CD8+ Percentile
} /> ), [newTCellCd8Data?.score, newTCellCd8Data?.percentile, newTCellCd8Data?.percentileHidden, handleTCellCd8Change, handleTCellCd8PercentileVisibleChange]); @@ -544,6 +546,7 @@ const TumourSummaryEdit = ({ className="tumour-dialog__check-box" control={( } checkedIcon={} checked={newTmburMutData?.tmbHidden} @@ -554,10 +557,11 @@ const TumourSummaryEdit = ({ '&.Mui-checked': { color: pink[800], }, + marginLeft: 1, }} /> )} - label="Show/Hide TMB Score" + label={
Show/Hide TMB Information
} /> ), [newTmburMutData?.genomeSnvTmb, newTmburMutData?.genomeIndelTmb, newTmburMutData?.adjustedTmb, newTmburMutData?.adjustedTmbComment, newTmburMutData?.tmbHidden, handleTmburChange, handleAdjustedTmbCommentChange, handleAdjustedTmbVisibleChange]); From 8bff4786e1b868da7a7f4c5f1226572f9b00d786 Mon Sep 17 00:00:00 2001 From: Bill Nguyen Date: Fri, 22 Mar 2024 12:33:13 -0700 Subject: [PATCH 3/4] - DEVSU-2244 - Fix merge conflict errors --- app/components/TumourSummaryEdit/index.tsx | 41 +------------------ .../components/GenomicSummary/index.tsx | 2 +- 2 files changed, 2 insertions(+), 41 deletions(-) diff --git a/app/components/TumourSummaryEdit/index.tsx b/app/components/TumourSummaryEdit/index.tsx index 1667c66af..441e9459e 100644 --- a/app/components/TumourSummaryEdit/index.tsx +++ b/app/components/TumourSummaryEdit/index.tsx @@ -130,7 +130,7 @@ const TumourSummaryEdit = ({ setTCellCd8Dirty(true); }, []); -const handleTCellCd8PercentileVisibleChange = useCallback(({ target: { checked, name } }) => { + const handleTCellCd8PercentileVisibleChange = useCallback(({ target: { checked, name } }) => { setNewTCellCd8Data((prevVal) => ({ ...prevVal, [name]: checked, @@ -521,45 +521,6 @@ const handleTCellCd8PercentileVisibleChange = useCallback(({ target: { checked, ), [newTCellCd8Data?.score, newTCellCd8Data?.percentile, newTCellCd8Data?.percentileHidden, newTCellCd8Data?.pedsScore, newTCellCd8Data?.pedsPercentile, newTCellCd8Data?.pedsScoreComment, handleTCellCd8Change, handleTCellCd8PercentileVisibleChange, report.patientInformation.caseType, handlePedsCd8tChange, handlePedsCd8tCommentChange]); - const mutBurDataSection = useMemo(() => ( - <> - - - - - ), [newTCellCd8Data?.score, newTCellCd8Data?.percentile, newTCellCd8Data?.pedsScore, newTCellCd8Data?.pedsPercentile, newTCellCd8Data?.pedsScoreComment, handleTCellCd8Change, report.patientInformation.caseType, handlePedsCd8tChange, handlePedsCd8tCommentChange]); - const mutBurDataSection = useMemo(() => ( <> Date: Wed, 27 Mar 2024 09:33:11 -0700 Subject: [PATCH 4/4] - DEVSU-2244 - Add missing dependencies in Rapid Summary --- app/views/ReportView/components/RapidSummary/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/ReportView/components/RapidSummary/index.tsx b/app/views/ReportView/components/RapidSummary/index.tsx index b3b326ea6..fe8546507 100644 --- a/app/views/ReportView/components/RapidSummary/index.tsx +++ b/app/views/ReportView/components/RapidSummary/index.tsx @@ -386,7 +386,8 @@ const RapidSummary = ({ value: msiStatus, }, ]); - }, [microbial, primaryBurden, tmburMutBur, report.m1m2Score, report.sampleInfo, report.tumourContent, tCellCd8.percentile, tCellCd8.score, report.captiv8Score, tCellCd8.percentileHidden, tCellCd8]); + }, [microbial, primaryBurden, tmburMutBur, report.m1m2Score, report.sampleInfo, report.tumourContent, tCellCd8.percentile, tCellCd8.score, report.captiv8Score, + tCellCd8.percentileHidden, tCellCd8, tCellCd8.pedsScoreComment, tmburMutBur.adjustedTmb, tmburMutBur.tmbHidden, tCellCd8.pedsScore, tCellCd8.pedsPercentile]); const handlePatientEditClose = useCallback(( newPatientData: PatientInformationType,