From ae8c0869b7e15958b2263e20cb7db6727900b7e4 Mon Sep 17 00:00:00 2001 From: evans-g-crsj Date: Tue, 24 Oct 2023 18:38:55 -0400 Subject: [PATCH] :typo: Add cell in profile table in pt entity page --- src/components/OutcomesAgeCells/index.tsx | 28 +++++++++++++++++++ src/graphql/participants/queries.ts | 4 +++ src/locales/en.ts | 1 + .../PageContent/tabs/Participants/index.tsx | 17 ++++------- .../utils/getProfileItems.tsx | 24 +++++++++++++++- 5 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 src/components/OutcomesAgeCells/index.tsx diff --git a/src/components/OutcomesAgeCells/index.tsx b/src/components/OutcomesAgeCells/index.tsx new file mode 100644 index 000000000..30485e6fa --- /dev/null +++ b/src/components/OutcomesAgeCells/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IArrangerResultsTree } from '@ferlab/ui/core/graphql/types'; +import { IParticipantOutcomes } from 'graphql/participants/models'; + +import { TABLE_EMPTY_PLACE_HOLDER } from 'common/constants'; +import AgeCell from 'components/AgeCell'; +import { isNumber } from 'utils/helper'; + +interface OwnProps { + outcomes?: IArrangerResultsTree; +} + +const OutcomesAgeCells = ({ outcomes }: OwnProps) => { + const outcomeAges: number[] = + outcomes?.hits?.edges.map((x) => x.node?.age_at_event_days?.value).filter((x) => isNumber(x)) || + []; + return ( + <> + {outcomeAges.length > 0 + ? outcomeAges.map((age: number, index: number) => ( + + )) + : { TABLE_EMPTY_PLACE_HOLDER }} + + ); +}; + +export default OutcomesAgeCells; diff --git a/src/graphql/participants/queries.ts b/src/graphql/participants/queries.ts index a0e7d8ad1..1aba315fc 100644 --- a/src/graphql/participants/queries.ts +++ b/src/graphql/participants/queries.ts @@ -196,6 +196,10 @@ export const GET_PARTICIPANT_ENTITY = gql` edges { node { vital_status + age_at_event_days { + value + units + } } } } diff --git a/src/locales/en.ts b/src/locales/en.ts index db00e37b9..a8828415a 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -1519,6 +1519,7 @@ const en = { trio: 'Trio', trio_plus: ' Trio+', trisomy: 'T21: "Trisomy 21"', + age_at_outcome_tooltip: 'Age at Vital Status', }, study: { count: '{count, plural, =0 {Study} =1 {Study} other {Studies}}', diff --git a/src/views/DataExploration/components/PageContent/tabs/Participants/index.tsx b/src/views/DataExploration/components/PageContent/tabs/Participants/index.tsx index 4be9f2dc5..c6f39b3e2 100644 --- a/src/views/DataExploration/components/PageContent/tabs/Participants/index.tsx +++ b/src/views/DataExploration/components/PageContent/tabs/Participants/index.tsx @@ -49,13 +49,13 @@ import { import { mapStudyToPedcBioportal } from 'views/Studies/utils/helper'; import { TABLE_EMPTY_PLACE_HOLDER } from 'common/constants'; -import AgeCell from 'components/AgeCell'; +import OutcomesAgeCells from 'components/OutcomesAgeCells'; import { ReportType } from 'services/api/reports/models'; import { SetType } from 'services/api/savedSet/models'; import { fetchReport, fetchTsvReport } from 'store/report/thunks'; import { useUser } from 'store/user'; import { updateUserConfig } from 'store/user/thunks'; -import { formatQuerySortList, isNumber, scrollToTop } from 'utils/helper'; +import { formatQuerySortList, scrollToTop } from 'utils/helper'; import { goToParticipantEntityPage, STATIC_ROUTES } from 'utils/routes'; import { getProTableDictionary } from 'utils/translation'; @@ -423,16 +423,9 @@ const defaultColumns: ProColumnType[] = [ sorter: { multiple: 1, }, - render: (outcomes: IArrangerResultsTree) => { - const outcomeAges = outcomes?.hits?.edges - .map((x) => x.node?.age_at_event_days?.value) - .filter((x) => isNumber(x)); - return outcomeAges.length > 0 - ? outcomeAges.map((age: number, index: number) => ( - - )) - : TABLE_EMPTY_PLACE_HOLDER; - }, + render: (outcomes: IArrangerResultsTree) => ( + + ), }, ]; diff --git a/src/views/ParticipantEntity/utils/getProfileItems.tsx b/src/views/ParticipantEntity/utils/getProfileItems.tsx index 8e5d28550..6aeec88d3 100644 --- a/src/views/ParticipantEntity/utils/getProfileItems.tsx +++ b/src/views/ParticipantEntity/utils/getProfileItems.tsx @@ -1,10 +1,12 @@ +import React from 'react'; import intl from 'react-intl-universal'; import { IEntityDescriptionsItem } from '@ferlab/ui/core/pages/EntityPage'; -import { Tag } from 'antd'; +import { Tag, Tooltip } from 'antd'; import { IParticipantEntity, Sex } from 'graphql/participants/models'; import { capitalize } from 'lodash'; import { TABLE_EMPTY_PLACE_HOLDER } from 'common/constants'; +import OutcomesAgeCells from 'components/OutcomesAgeCells'; const getVitalStatus = (participant?: IParticipantEntity) => { const vitalStatuses = new Set(); @@ -18,6 +20,18 @@ const getVitalStatus = (participant?: IParticipantEntity) => { return vitalStatuses.size ? vitalStatuses : TABLE_EMPTY_PLACE_HOLDER; }; +const getAgeAtVitalStatus = (participant?: IParticipantEntity) => { + const vitalStatuses = new Set(); + participant?.outcomes?.hits?.edges?.forEach((o) => { + const vitalStatus = o.node.age_at_event_days.value; + if (vitalStatus) { + vitalStatuses.add(vitalStatus); + } + }); + + return vitalStatuses.size ? vitalStatuses : TABLE_EMPTY_PLACE_HOLDER; +}; + const getProfileItems = (participant?: IParticipantEntity): IEntityDescriptionsItem[] => [ { label: intl.get('entities.participant.race'), @@ -47,6 +61,14 @@ const getProfileItems = (participant?: IParticipantEntity): IEntityDescriptionsI label: intl.get('entities.participant.vital_status'), value: getVitalStatus(participant), }, + { + label: ( + + {intl.get('entities.participant.age')} + + ), + value: , + }, ]; export default getProfileItems;