From aeec33ae3040d62fa2f6522353ecfaceec3cdd2a Mon Sep 17 00:00:00 2001 From: Austen Money Date: Mon, 23 Sep 2024 16:17:24 -0400 Subject: [PATCH 01/10] add language and adjust filter --- .../MetadataSection/MetadataSection.tsx | 15 +++++++++++++-- .../EntityHeaderContent/EntityHeaderContent.tsx | 9 ++++++--- .../app/static/js/components/searchPage/config.js | 2 +- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx index 09cd0fdb72..866de7dfb0 100644 --- a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx +++ b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx @@ -7,7 +7,7 @@ import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntity import { tableToDelimitedString, createDownloadUrl } from 'js/helpers/functions'; import { useMetadataFieldDescriptions } from 'js/hooks/useUBKG'; import { getMetadata, hasMetadata } from 'js/helpers/metadata'; -import { ESEntityType, isDataset } from 'js/components/types'; +import { ESEntityType, EntityWithType, isDataset, isDonor } from 'js/components/types'; import { useProcessedDatasets } from 'js/pages/Dataset/hooks'; import { entityIconMap } from 'js/shared-styles/icons/entityIconMap'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; @@ -67,6 +67,16 @@ function useTableData(tableData: Record) { return buildTableData(tableData, fieldDescriptions); } +function isDonorOlderThan89(entity: EntityWithType) { + if (isDonor(entity)) { + return Number(entity.mapped_metadata.age_value) > 89; + } + if (isDataset(entity)) { + return Number(entity.donor.mapped_metadata.age_value) > 89; + } + return false; +} + interface TableRow { key: string; value: string; @@ -117,7 +127,8 @@ function MetadataWrapper({ allTableRows, tsvColumns = defaultTSVColumns, childre > This is the list of metadata that was provided by the data provider. - {entityIsDataset && ' Metadata from the donor or sample of this dataset may also be included in this list.'} + {entityIsDataset && ' Metadata from the donor or sample of this dataset may also be included in this list. '} + {isDonorOlderThan89(entity) && ' For donors older than 89, the metadata will indicate an age of 90.'} {children} diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx index 24248e795c..ddd98a604b 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx @@ -18,6 +18,7 @@ import { useFlaskDataContext } from 'js/components/Contexts'; import { Entity, isDataset, isDonor, isPublication, isSample } from 'js/components/types'; import EntityIcon from 'js/shared-styles/icons/EntityIcon'; import { SampleCategoryIcon } from 'js/shared-styles/icons'; +import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; import { getDonorMetadata, getOriginSampleAndMappedOrgan } from '../../utils'; import EntityHeaderItem from '../EntityHeaderItem'; @@ -71,9 +72,11 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { {sex && {sex}} {race && {race}} {age_unit && age_value && ( - - {age_value} {age_unit} - + + + {age_value} {age_unit} + + )} diff --git a/context/app/static/js/components/searchPage/config.js b/context/app/static/js/components/searchPage/config.js index 0b3cd8eb13..06d56b6efd 100644 --- a/context/app/static/js/components/searchPage/config.js +++ b/context/app/static/js/components/searchPage/config.js @@ -12,7 +12,7 @@ function makeDonorMetadataFilters(isDonor) { const labelPrefix = isDonor ? '' : 'Donor '; return [ listFilter(`${pathPrefix}mapped_metadata.sex`, `${labelPrefix}Sex`), - rangeFilter(`${pathPrefix}mapped_metadata.${ageField}`, `${labelPrefix}Age`, 0, 100), + rangeFilter(`${pathPrefix}mapped_metadata.${ageField}`, `${labelPrefix}Age`, 0, 90), listFilter(`${pathPrefix}mapped_metadata.race`, `${labelPrefix}Race`), rangeFilter(`${pathPrefix}mapped_metadata.${bmiField}`, `${labelPrefix}BMI`, 0, 50), ]; From 4705b1851dab313cdfe62dd1829036274400fa7a Mon Sep 17 00:00:00 2001 From: Austen Money Date: Tue, 24 Sep 2024 18:55:40 -0400 Subject: [PATCH 02/10] add tooltips --- .../detailPage/BulkDataTransfer/const.ts | 2 ++ .../MetadataSection/MetadataSection.tsx | 3 ++- .../EntityHeaderContent.tsx | 21 ++++++++++++++----- .../EntityTileBody/EntityTileBody.tsx | 19 +++++++++++++++-- .../entity-tile/EntityTileBody/style.ts | 6 +++++- 5 files changed, 42 insertions(+), 9 deletions(-) diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts index 401ef6a8e9..4d9ab705b5 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts @@ -20,3 +20,5 @@ export const SRA_EXPERIMENT_TEXT = { export const BULK_DATA_DESCRIPTION_TEXT = 'This section explains how to download data in bulk from raw and processed datasets. Processed datasets have separate download directories in Globus or dbGaP, distinct from the raw dataset.'; + +export const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx index 866de7dfb0..5447d63219 100644 --- a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx +++ b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx @@ -12,6 +12,7 @@ import { useProcessedDatasets } from 'js/pages/Dataset/hooks'; import { entityIconMap } from 'js/shared-styles/icons/entityIconMap'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; +import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; import { DownloadIcon, StyledWhiteBackgroundIconButton } from '../MetadataTable/style'; import MetadataTabs from '../multi-assay/MultiAssayMetadataTabs'; import { Columns, defaultTSVColumns } from './columns'; @@ -128,7 +129,7 @@ function MetadataWrapper({ allTableRows, tsvColumns = defaultTSVColumns, childre This is the list of metadata that was provided by the data provider. {entityIsDataset && ' Metadata from the donor or sample of this dataset may also be included in this list. '} - {isDonorOlderThan89(entity) && ' For donors older than 89, the metadata will indicate an age of 90.'} + {isDonorOlderThan89(entity) && ` ${DONOR_AGE_TEXT}`} {children} diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx index ddd98a604b..d2c3551ced 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx @@ -17,8 +17,10 @@ import { useVisualizationStore, type VisualizationStore } from 'js/stores/useVis import { useFlaskDataContext } from 'js/components/Contexts'; import { Entity, isDataset, isDonor, isPublication, isSample } from 'js/components/types'; import EntityIcon from 'js/shared-styles/icons/EntityIcon'; -import { SampleCategoryIcon } from 'js/shared-styles/icons'; +import { InfoIcon, SampleCategoryIcon } from 'js/shared-styles/icons'; import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; +import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; +import { StyledIconDiv } from 'js/components/entity-tile/EntityTileBody/style'; import { getDonorMetadata, getOriginSampleAndMappedOrgan } from '../../utils'; import EntityHeaderItem from '../EntityHeaderItem'; @@ -63,6 +65,8 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { const { sex, race, age_unit, age_value } = donorMetadata; + const donorIsOlderThan89 = Number(age_value) > 89; + if (Object.keys(donorMetadata).length === 0) { return null; } @@ -72,11 +76,18 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { {sex && {sex}} {race && {race}} {age_unit && age_value && ( - - + + {age_value} {age_unit} - - + {donorIsOlderThan89 && ( + + + + + + )} + + )} diff --git a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx index b0ae2fbe05..a87cf8e5e1 100644 --- a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx +++ b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx @@ -1,10 +1,14 @@ import React from 'react'; +import { Stack } from '@mui/system'; import Tile from 'js/shared-styles/tiles/Tile'; import EntityTileThumbnail from 'js/components/entity-tile/EntityTileThumbnail'; import { getOriginSamplesOrgan } from 'js/helpers/functions'; import { EntityWithType, isDataset, isDonor, isSample } from 'js/components/types'; -import { Flex, StyledDiv, BodyWrapper } from './style'; +import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; +import { InfoIcon } from 'js/shared-styles/icons'; +import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; +import { Flex, StyledDiv, BodyWrapper, StyledIconDiv } from './style'; const thumbnailDimension = 80; @@ -16,6 +20,8 @@ interface EntityTileBodyProps { } function EntityTileBody({ entity_type, id, entityData, invertColors }: EntityTileBodyProps) { + const donorIsOlderThan89 = Number(entityData.mapped_metadata?.age_value) > 89; + return ( @@ -33,7 +39,16 @@ function EntityTileBody({ entity_type, id, entityData, invertColors }: EntityTil {entityData.mapped_metadata?.sex} - {entityData.mapped_metadata?.age_value} {entityData.mapped_metadata?.age_unit} + + {entityData.mapped_metadata?.age_value} {entityData.mapped_metadata?.age_unit} + {donorIsOlderThan89 && ( + + + + + + )} + {(entityData.mapped_metadata?.race ?? []).join(', ')} diff --git a/context/app/static/js/components/entity-tile/EntityTileBody/style.ts b/context/app/static/js/components/entity-tile/EntityTileBody/style.ts index 53cc456604..fc7da61e8b 100644 --- a/context/app/static/js/components/entity-tile/EntityTileBody/style.ts +++ b/context/app/static/js/components/entity-tile/EntityTileBody/style.ts @@ -9,6 +9,10 @@ const StyledDiv = styled('div')({ minWidth: 0, }); +const StyledIconDiv = styled('div')(({ theme }) => ({ + marginLeft: theme.spacing(0.5), +})); + interface BodyWrapperProps { $thumbnailDimension: number; } @@ -20,4 +24,4 @@ const BodyWrapper = styled('div')(({ $thumbnailDimension }) => boxSizing: 'content-box', })); -export { Flex, StyledDiv, BodyWrapper }; +export { Flex, StyledDiv, StyledIconDiv, BodyWrapper }; From 2ae8ab071b5c292ca21fb103f6faf0aa1b373a44 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Wed, 25 Sep 2024 12:18:05 -0400 Subject: [PATCH 03/10] separate out tooltip --- .../detailPage/BulkDataTransfer/const.ts | 2 -- .../MetadataSection/MetadataSection.tsx | 2 +- .../EntityHeaderContent.tsx | 16 +++--------- .../EntityTileBody/EntityTileBody.tsx | 16 +++--------- .../entity-tile/EntityTileBody/style.ts | 6 +---- .../ResultsTable/{utils.js => utils.jsx} | 11 ++++++++ .../DonorAgeTooltip/DonorAgeTooltip.tsx | 25 +++++++++++++++++++ .../tooltips/DonorAgeTooltip/index.ts | 3 +++ .../tooltips/DonorAgeTooltip/style.ts | 13 ++++++++++ 9 files changed, 60 insertions(+), 34 deletions(-) rename context/app/static/js/components/searchPage/ResultsTable/{utils.js => utils.jsx} (80%) create mode 100644 context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx create mode 100644 context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/index.ts create mode 100644 context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts index 4d9ab705b5..401ef6a8e9 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts @@ -20,5 +20,3 @@ export const SRA_EXPERIMENT_TEXT = { export const BULK_DATA_DESCRIPTION_TEXT = 'This section explains how to download data in bulk from raw and processed datasets. Processed datasets have separate download directories in Globus or dbGaP, distinct from the raw dataset.'; - -export const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx index 5447d63219..c84bad2315 100644 --- a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx +++ b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx @@ -12,7 +12,7 @@ import { useProcessedDatasets } from 'js/pages/Dataset/hooks'; import { entityIconMap } from 'js/shared-styles/icons/entityIconMap'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; -import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; +import { DONOR_AGE_TEXT } from 'js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip'; import { DownloadIcon, StyledWhiteBackgroundIconButton } from '../MetadataTable/style'; import MetadataTabs from '../multi-assay/MultiAssayMetadataTabs'; import { Columns, defaultTSVColumns } from './columns'; diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx index d2c3551ced..e5126337f9 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx @@ -17,10 +17,8 @@ import { useVisualizationStore, type VisualizationStore } from 'js/stores/useVis import { useFlaskDataContext } from 'js/components/Contexts'; import { Entity, isDataset, isDonor, isPublication, isSample } from 'js/components/types'; import EntityIcon from 'js/shared-styles/icons/EntityIcon'; -import { InfoIcon, SampleCategoryIcon } from 'js/shared-styles/icons'; -import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; -import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; -import { StyledIconDiv } from 'js/components/entity-tile/EntityTileBody/style'; +import { SampleCategoryIcon } from 'js/shared-styles/icons'; +import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip'; import { getDonorMetadata, getOriginSampleAndMappedOrgan } from '../../utils'; import EntityHeaderItem from '../EntityHeaderItem'; @@ -65,8 +63,6 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { const { sex, race, age_unit, age_value } = donorMetadata; - const donorIsOlderThan89 = Number(age_value) > 89; - if (Object.keys(donorMetadata).length === 0) { return null; } @@ -79,13 +75,7 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { {age_value} {age_unit} - {donorIsOlderThan89 && ( - - - - - - )} + )} diff --git a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx index a87cf8e5e1..c6fb769c16 100644 --- a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx +++ b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx @@ -5,10 +5,8 @@ import Tile from 'js/shared-styles/tiles/Tile'; import EntityTileThumbnail from 'js/components/entity-tile/EntityTileThumbnail'; import { getOriginSamplesOrgan } from 'js/helpers/functions'; import { EntityWithType, isDataset, isDonor, isSample } from 'js/components/types'; -import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; -import { InfoIcon } from 'js/shared-styles/icons'; -import { DONOR_AGE_TEXT } from 'js/components/detailPage/BulkDataTransfer/const'; -import { Flex, StyledDiv, BodyWrapper, StyledIconDiv } from './style'; +import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip'; +import { Flex, StyledDiv, BodyWrapper } from './style'; const thumbnailDimension = 80; @@ -20,8 +18,6 @@ interface EntityTileBodyProps { } function EntityTileBody({ entity_type, id, entityData, invertColors }: EntityTileBodyProps) { - const donorIsOlderThan89 = Number(entityData.mapped_metadata?.age_value) > 89; - return ( @@ -41,13 +37,7 @@ function EntityTileBody({ entity_type, id, entityData, invertColors }: EntityTil {entityData.mapped_metadata?.age_value} {entityData.mapped_metadata?.age_unit} - {donorIsOlderThan89 && ( - - - - - - )} + diff --git a/context/app/static/js/components/entity-tile/EntityTileBody/style.ts b/context/app/static/js/components/entity-tile/EntityTileBody/style.ts index fc7da61e8b..53cc456604 100644 --- a/context/app/static/js/components/entity-tile/EntityTileBody/style.ts +++ b/context/app/static/js/components/entity-tile/EntityTileBody/style.ts @@ -9,10 +9,6 @@ const StyledDiv = styled('div')({ minWidth: 0, }); -const StyledIconDiv = styled('div')(({ theme }) => ({ - marginLeft: theme.spacing(0.5), -})); - interface BodyWrapperProps { $thumbnailDimension: number; } @@ -24,4 +20,4 @@ const BodyWrapper = styled('div')(({ $thumbnailDimension }) => boxSizing: 'content-box', })); -export { Flex, StyledDiv, StyledIconDiv, BodyWrapper }; +export { Flex, StyledDiv, BodyWrapper }; diff --git a/context/app/static/js/components/searchPage/ResultsTable/utils.js b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx similarity index 80% rename from context/app/static/js/components/searchPage/ResultsTable/utils.js rename to context/app/static/js/components/searchPage/ResultsTable/utils.jsx index a0c85b9f0b..acc23c34ff 100644 --- a/context/app/static/js/components/searchPage/ResultsTable/utils.js +++ b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx @@ -1,4 +1,7 @@ +import React from 'react'; +import Stack from '@mui/material/Stack'; import { get } from 'js/helpers/nodash'; +import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip'; const donorMetadataPath = 'mapped_metadata'; const sampleMetdataPath = 'metadata'; @@ -48,6 +51,14 @@ function getByPath(hitSource, field) { } if (Array.isArray(fieldValue)) { + if (field?.id === 'mapped_metadata.age_value') { + return ( + + {fieldValue.join(' / ')} + + + ); + } return fieldValue.join(' / '); } diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx new file mode 100644 index 0000000000..6fcefe0e09 --- /dev/null +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; +import { StyledIconDiv, StyledInfoIcon } from 'js/shared-styles/tooltips/DonorAgeTooltip/style'; + +export const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; + +interface DonorAgeTooltipProps { + donorAge?: string; +} + +function DonorAgeTooltip({ donorAge }: DonorAgeTooltipProps) { + if (!donorAge || Number(donorAge) <= 89) { + return null; + } + + return ( + + + + + + ); +} +export default DonorAgeTooltip; diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/index.ts b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/index.ts new file mode 100644 index 0000000000..9665f81c59 --- /dev/null +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/index.ts @@ -0,0 +1,3 @@ +import DonorAgeTooltip from './DonorAgeTooltip'; + +export default DonorAgeTooltip; diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts new file mode 100644 index 0000000000..40224b7e5b --- /dev/null +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts @@ -0,0 +1,13 @@ +import { styled } from '@mui/material/styles'; +import { InfoIcon } from 'js/shared-styles/icons'; + +const StyledIconDiv = styled('div')(({ theme }) => ({ + marginLeft: theme.spacing(0.25), +})); + +const StyledInfoIcon = styled(InfoIcon)(({ theme }) => ({ + color: theme.palette.primary.main, + fontSize: '0.75rem', +})); + +export { StyledIconDiv, StyledInfoIcon }; From 9abfb20b73fd0a0a5ccd0fff7bdab0f8248081eb Mon Sep 17 00:00:00 2001 From: Austen Money Date: Wed, 25 Sep 2024 12:29:26 -0400 Subject: [PATCH 04/10] add changelog --- CHANGELOG-add-donor-age-messaging.md | 1 + .../entityHeader/EntityHeaderContent/EntityHeaderContent.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 CHANGELOG-add-donor-age-messaging.md diff --git a/CHANGELOG-add-donor-age-messaging.md b/CHANGELOG-add-donor-age-messaging.md new file mode 100644 index 0000000000..dc40eb3b34 --- /dev/null +++ b/CHANGELOG-add-donor-age-messaging.md @@ -0,0 +1 @@ +- Add messaging where donors with ages > 89 are displayed on search and detail pages. \ No newline at end of file diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx index e5126337f9..91c8e14b87 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx @@ -73,7 +73,7 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) { {race && {race}} {age_unit && age_value && ( - + {age_value} {age_unit} From 975569fce641f7aafd0241c855595416ebbb2fd0 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Wed, 25 Sep 2024 13:15:38 -0400 Subject: [PATCH 05/10] make donor metadata optional --- .../components/detailPage/MetadataSection/MetadataSection.tsx | 4 ++-- context/app/static/js/components/types.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx index c84bad2315..12fd0d448e 100644 --- a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx +++ b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx @@ -70,10 +70,10 @@ function useTableData(tableData: Record) { function isDonorOlderThan89(entity: EntityWithType) { if (isDonor(entity)) { - return Number(entity.mapped_metadata.age_value) > 89; + return Number(entity.mapped_metadata?.age_value) > 89; } if (isDataset(entity)) { - return Number(entity.donor.mapped_metadata.age_value) > 89; + return Number(entity.donor.mapped_metadata?.age_value) > 89; } return false; } diff --git a/context/app/static/js/components/types.ts b/context/app/static/js/components/types.ts index 4d27af84c6..102d1f9a6c 100644 --- a/context/app/static/js/components/types.ts +++ b/context/app/static/js/components/types.ts @@ -58,7 +58,7 @@ export interface Entity { mapped_data_types?: string[]; mapped_data_access_level: 'Public' | 'Protected' | 'Consortium'; status: string; - mapped_metadata: Record; + mapped_metadata?: Record; [key: string]: unknown; } @@ -66,7 +66,7 @@ export type PartialEntity = Partial & Pick Date: Wed, 25 Sep 2024 13:25:02 -0400 Subject: [PATCH 06/10] fix icon positioning --- .../entity-tile/EntityTileBody/EntityTileBody.tsx | 2 +- .../tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx | 6 +++--- .../js/shared-styles/tooltips/DonorAgeTooltip/style.ts | 8 +++++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx index c6fb769c16..3fa0d02c65 100644 --- a/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx +++ b/context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; import Tile from 'js/shared-styles/tiles/Tile'; import EntityTileThumbnail from 'js/components/entity-tile/EntityTileThumbnail'; import { getOriginSamplesOrgan } from 'js/helpers/functions'; diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx index 6fcefe0e09..854ba00e4b 100644 --- a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; -import { StyledIconDiv, StyledInfoIcon } from 'js/shared-styles/tooltips/DonorAgeTooltip/style'; +import { StyledStack, StyledInfoIcon } from 'js/shared-styles/tooltips/DonorAgeTooltip/style'; export const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; @@ -16,9 +16,9 @@ function DonorAgeTooltip({ donorAge }: DonorAgeTooltipProps) { return ( - + - + ); } diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts index 40224b7e5b..ce7bf6c6bc 100644 --- a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts @@ -1,8 +1,10 @@ +import { Stack } from '@mui/material'; import { styled } from '@mui/material/styles'; import { InfoIcon } from 'js/shared-styles/icons'; -const StyledIconDiv = styled('div')(({ theme }) => ({ - marginLeft: theme.spacing(0.25), +const StyledStack = styled(Stack)(({ theme }) => ({ + marginLeft: theme.spacing(0.5), + justifyContent: 'center', })); const StyledInfoIcon = styled(InfoIcon)(({ theme }) => ({ @@ -10,4 +12,4 @@ const StyledInfoIcon = styled(InfoIcon)(({ theme }) => ({ fontSize: '0.75rem', })); -export { StyledIconDiv, StyledInfoIcon }; +export { StyledStack, StyledInfoIcon }; From 2d7f116e986faf7ecb54f55f1844d52382e39df8 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Thu, 26 Sep 2024 12:49:36 -0400 Subject: [PATCH 07/10] replace metadata table text with tooltip --- .../MetadataSection/MetadataSection.tsx | 16 ++-------------- .../detailPage/MetadataTable/MetadataTable.tsx | 10 +++++++++- .../tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx | 2 +- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx index 12fd0d448e..09cd0fdb72 100644 --- a/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx +++ b/context/app/static/js/components/detailPage/MetadataSection/MetadataSection.tsx @@ -7,12 +7,11 @@ import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntity import { tableToDelimitedString, createDownloadUrl } from 'js/helpers/functions'; import { useMetadataFieldDescriptions } from 'js/hooks/useUBKG'; import { getMetadata, hasMetadata } from 'js/helpers/metadata'; -import { ESEntityType, EntityWithType, isDataset, isDonor } from 'js/components/types'; +import { ESEntityType, isDataset } from 'js/components/types'; import { useProcessedDatasets } from 'js/pages/Dataset/hooks'; import { entityIconMap } from 'js/shared-styles/icons/entityIconMap'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; -import { DONOR_AGE_TEXT } from 'js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip'; import { DownloadIcon, StyledWhiteBackgroundIconButton } from '../MetadataTable/style'; import MetadataTabs from '../multi-assay/MultiAssayMetadataTabs'; import { Columns, defaultTSVColumns } from './columns'; @@ -68,16 +67,6 @@ function useTableData(tableData: Record) { return buildTableData(tableData, fieldDescriptions); } -function isDonorOlderThan89(entity: EntityWithType) { - if (isDonor(entity)) { - return Number(entity.mapped_metadata?.age_value) > 89; - } - if (isDataset(entity)) { - return Number(entity.donor.mapped_metadata?.age_value) > 89; - } - return false; -} - interface TableRow { key: string; value: string; @@ -128,8 +117,7 @@ function MetadataWrapper({ allTableRows, tsvColumns = defaultTSVColumns, childre > This is the list of metadata that was provided by the data provider. - {entityIsDataset && ' Metadata from the donor or sample of this dataset may also be included in this list. '} - {isDonorOlderThan89(entity) && ` ${DONOR_AGE_TEXT}`} + {entityIsDataset && ' Metadata from the donor or sample of this dataset may also be included in this list.'} {children} diff --git a/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx b/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx index c2885c00f9..13033c9032 100644 --- a/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx +++ b/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx @@ -5,9 +5,11 @@ import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; +import Stack from '@mui/material/Stack'; import { StyledTableContainer, HeaderCell } from 'js/shared-styles/tables'; import IconTooltipCell from 'js/shared-styles/tables/IconTooltipCell'; +import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip'; import { defaultColumns } from '../MetadataSection/columns'; interface MetadataTableRow { @@ -32,7 +34,13 @@ function MetadataTable({ tableRows = [] as MetadataTableRow[], columns = default {tableRows.map((row) => ( {row.key} - {row.value} + + + {row.value} + {row.key === 'age_value' || + (row.key === 'donor.age_value' && )} + + ))} diff --git a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx index 854ba00e4b..5b386abcb6 100644 --- a/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx +++ b/context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/DonorAgeTooltip.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; import { StyledStack, StyledInfoIcon } from 'js/shared-styles/tooltips/DonorAgeTooltip/style'; -export const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; +const DONOR_AGE_TEXT = 'For donors older than 89, the metadata will indicate an age of 90.'; interface DonorAgeTooltipProps { donorAge?: string; From 291df51a302d99c7d5baaa12c8928fb18d331781 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Tue, 1 Oct 2024 12:47:29 -0400 Subject: [PATCH 08/10] update key check --- .../js/components/detailPage/MetadataTable/MetadataTable.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx b/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx index 13033c9032..2291ff3b56 100644 --- a/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx +++ b/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx @@ -37,8 +37,7 @@ function MetadataTable({ tableRows = [] as MetadataTableRow[], columns = default {row.value} - {row.key === 'age_value' || - (row.key === 'donor.age_value' && )} + {row.key.endsWith('age_value') && } From 16791bfc3f67991fdeed687590a29df16941a655 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Wed, 2 Oct 2024 12:41:31 -0400 Subject: [PATCH 09/10] change donor age string --- .../app/static/js/components/searchPage/ResultsTable/utils.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/context/app/static/js/components/searchPage/ResultsTable/utils.jsx b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx index acc23c34ff..b95517c746 100644 --- a/context/app/static/js/components/searchPage/ResultsTable/utils.jsx +++ b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx @@ -55,7 +55,7 @@ function getByPath(hitSource, field) { return ( {fieldValue.join(' / ')} - + ); } From cec0960adb0fad039c93bdc429e1ba9677ceca02 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Wed, 2 Oct 2024 12:47:16 -0400 Subject: [PATCH 10/10] check field length --- .../app/static/js/components/searchPage/ResultsTable/utils.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/context/app/static/js/components/searchPage/ResultsTable/utils.jsx b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx index b95517c746..b7ba8105db 100644 --- a/context/app/static/js/components/searchPage/ResultsTable/utils.jsx +++ b/context/app/static/js/components/searchPage/ResultsTable/utils.jsx @@ -55,7 +55,7 @@ function getByPath(hitSource, field) { return ( {fieldValue.join(' / ')} - + {fieldValue.length > 0 && } ); }