Austenem/CAT-873 add donor age messaging

CHANGELOG-add-donor-age-messaging.md

@@ -0,0 +1 @@
+- Add messaging where donors with ages > 89 are displayed on search and detail pages.

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) => (
               <TableRow key={row.key}>
                 <IconTooltipCell tooltipTitle={row?.description}>{row.key}</IconTooltipCell>
-                <TableCell>{row.value}</TableCell>
+                <TableCell>
+                  <Stack direction="row">
+                    {row.value}
+                    {row.key === 'age_value' ||
+                      (row.key === 'donor.age_value' && <DonorAgeTooltip donorAge={row.value} />)}
+                  </Stack>
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>

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 DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip';
 import { getDonorMetadata, getOriginSampleAndMappedOrgan } from '../../utils';
 import EntityHeaderItem from '../EntityHeaderItem';
 
@@ -72,7 +73,10 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) {
       {race && <Typography>{race}</Typography>}
       {age_unit && age_value && (
         <Typography>
-          {age_value} {age_unit}
+          <Stack direction="row" justifyContent="center">
+            {age_value} {age_unit}
+            <DonorAgeTooltip donorAge={age_value} />
+          </Stack>
         </Typography>
       )}
       <Divider orientation="vertical" flexItem />

context/app/static/js/components/entity-tile/EntityTileBody/EntityTileBody.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
+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';
 import { EntityWithType, isDataset, isDonor, isSample } from 'js/components/types';
+import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip';
 import { Flex, StyledDiv, BodyWrapper } from './style';
 
 const thumbnailDimension = 80;
@@ -33,7 +35,10 @@ function EntityTileBody({ entity_type, id, entityData, invertColors }: EntityTil
               <Tile.Text>{entityData.mapped_metadata?.sex}</Tile.Text>
               <Tile.Divider invertColors={invertColors} />
               <Tile.Text>
-                {entityData.mapped_metadata?.age_value} {entityData.mapped_metadata?.age_unit}
+                <Stack direction="row">
+                  {entityData.mapped_metadata?.age_value} {entityData.mapped_metadata?.age_unit}
+                  <DonorAgeTooltip donorAge={entityData.mapped_metadata?.age_value} />
+                </Stack>
               </Tile.Text>
             </Flex>
             <Tile.Text>{(entityData.mapped_metadata?.race ?? []).join(', ')}</Tile.Text>

context/app/static/js/components/searchPage/ResultsTable/utils.js → 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 (
+        <Stack direction="row">
+          {fieldValue.join(' / ')}
+          <DonorAgeTooltip donorAge={fieldValue.join(' / ')} />
+        </Stack>
+      );
+    }
     return fieldValue.join(' / ');
   }
 

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),
   ];

context/app/static/js/components/types.ts

@@ -58,15 +58,15 @@ export interface Entity {
   mapped_data_types?: string[];
   mapped_data_access_level: 'Public' | 'Protected' | 'Consortium';
   status: string;
-  mapped_metadata: Record<string, unknown>;
+  mapped_metadata?: Record<string, unknown>;
   [key: string]: unknown;
 }
 
 export type PartialEntity = Partial<Entity> & Pick<Entity, 'entity_type' | 'uuid' | 'hubmap_id'>;
 
 export interface Donor extends Entity {
   entity_type: 'Donor';
-  mapped_metadata: Partial<{
+  mapped_metadata?: Partial<{
     sex: string;
     age_unit: string;
     age_value: string;

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 { StyledStack, StyledInfoIcon } from 'js/shared-styles/tooltips/DonorAgeTooltip/style';
+
+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 (
+    <SecondaryBackgroundTooltip title={DONOR_AGE_TEXT}>
+      <StyledStack>
+        <StyledInfoIcon />
+      </StyledStack>
+    </SecondaryBackgroundTooltip>
+  );
+}
+export default DonorAgeTooltip;

context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/index.ts

@@ -0,0 +1,3 @@
+import DonorAgeTooltip from './DonorAgeTooltip';
+
+export default DonorAgeTooltip;

context/app/static/js/shared-styles/tooltips/DonorAgeTooltip/style.ts

@@ -0,0 +1,15 @@
+import { Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { InfoIcon } from 'js/shared-styles/icons';
+
+const StyledStack = styled(Stack)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  justifyContent: 'center',
+}));
+
+const StyledInfoIcon = styled(InfoIcon)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  fontSize: '0.75rem',
+}));
+
+export { StyledStack, StyledInfoIcon };