:typo: Add cell in profile table in pt entity page

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<IParticipantOutcomes>;
+}
+
+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) => (
+            <AgeCell key={`${index}-${age}`} ageInDays={age} />
+          ))
+        : { TABLE_EMPTY_PLACE_HOLDER }}
+    </>
+  );
+};
+
+export default OutcomesAgeCells;

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
+                    }
                   }
                 }
               }

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}}',

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<IParticipantOutcomes>) => {
-      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) => (
-            <AgeCell key={`${index}-${age}`} ageInDays={age} />
-          ))
-        : TABLE_EMPTY_PLACE_HOLDER;
-    },
+    render: (outcomes: IArrangerResultsTree<IParticipantOutcomes>) => (
+      <OutcomesAgeCells outcomes={outcomes} />
+    ),
   },
 ];
 

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: (
+      <Tooltip title={intl.get('entities.participant.age_at_outcome_tooltip')}>
+        {intl.get('entities.participant.age')}
+      </Tooltip>
+    ),
+    value: <OutcomesAgeCells outcomes={participant?.outcomes} />,
+  },
 ];
 
 export default getProfileItems;