[15] feat: phenopacket v2 frontend integration

src/components/explorer/ExplorerIndividualContent.js

@@ -9,7 +9,7 @@ import { fetchIndividualIfNecessary } from "../../modules/metadata/actions";
 import { LAYOUT_CONTENT_STYLE } from "../../styles/layoutContent";
 import { matchingMenuKeys, renderMenuItem } from "../../utils/menu";
 import { urlPath } from "../../utils/url";
-import { useIndividualResources } from "./utils";
+import { useIsDataEmpty, useDeduplicatedIndividualBiosamples, useIndividualResources } from "./utils";
 
 import SitePageHeader from "../SitePageHeader";
 import IndividualOverview from "./IndividualOverview";
@@ -18,10 +18,12 @@ import IndividualBiosamples from "./IndividualBiosamples";
 import IndividualExperiments from "./IndividualExperiments";
 import IndividualDiseases from "./IndividualDiseases";
 import IndividualOntologies from "./IndividualOntologies";
-import IndividualVariants from "./IndividualVariants";
-import IndividualGenes from "./IndividualGenes";
 import IndividualTracks from "./IndividualTracks";
 import IndividualPhenopackets from "./IndividualPhenopackets";
+import IndividualInterpretations from "./IndividualInterpretations";
+import { setIndividualId, setIndividualResourcesTuple } from "../../modules/explorer/actions";
+import IndividualMedicalActions from "./IndividualMedicalActions";
+import IndividualMeasurements from "./IndividualMeasurements";
 
 const MENU_STYLE = {
     marginLeft: "-24px",
@@ -55,6 +57,12 @@ const ExplorerIndividualContent = () => {
         }
     }, [location]);
 
+    useEffect(() => {
+        if (individualID) {
+            dispatch(setIndividualId(individualID));
+        }
+    }, [dispatch, individualID]);
+
     const metadataService = useSelector((state) => state.services.metadataService);
     const individuals = useSelector((state) => state.individuals.itemsByID);
 
@@ -68,33 +76,75 @@ const ExplorerIndividualContent = () => {
 
     const { isFetching: individualIsFetching, data: individual } = individuals[individualID] ?? {};
 
-    // Trigger resource loading
-    useIndividualResources(individual);
+    const resources = useIndividualResources(individual);
+    useEffect(() => {
+        // Set individual resources in the store for OntologyTerm rendering with no prop drilling
+        if (resources) {
+            dispatch(setIndividualResourcesTuple(resources));
+        }
+    }, [dispatch, resources]);
 
     const overviewUrl = `${individualUrl}/overview`;
     const phenotypicFeaturesUrl = `${individualUrl}/phenotypic-features`;
     const biosamplesUrl = `${individualUrl}/biosamples`;
     const experimentsUrl = `${individualUrl}/experiments`;
-    const variantsUrl = `${individualUrl}/variants`;
-    const genesUrl = `${individualUrl}/genes`;
     const diseasesUrl = `${individualUrl}/diseases`;
     const ontologiesUrl = `${individualUrl}/ontologies`;
     const tracksUrl = `${individualUrl}/tracks`;
     const phenopacketsUrl = `${individualUrl}/phenopackets`;
+    const interpretationsUrl = `${individualUrl}/interpretations`;
+    const medicalActionsUrl = `${individualUrl}/medical-actions`;
+    const measurementsUrl = `${individualUrl}/measurements`;
 
+    const individualPhenopackets = individual?.phenopackets ?? [];
     const individualMenu = [
+        // Overview
         {url: overviewUrl, style: {marginLeft: "4px"}, text: "Overview"},
-        {url: phenotypicFeaturesUrl, text: "Phenotypic Features"},
-        {url: biosamplesUrl, text: "Biosamples"},
-        {url: experimentsUrl, text: "Experiments"},
+        // Biosamples related menu items
+        {
+            url: biosamplesUrl,
+            text: "Biosamples",
+            disabled: useIsDataEmpty(individualPhenopackets, "biosamples"),
+        },
+        {
+            url: measurementsUrl,
+            text: "Measurements",
+            disabled: useIsDataEmpty(individualPhenopackets, "measurements"),
+        },
+        {
+            url: phenotypicFeaturesUrl,
+            text: "Phenotypic Features",
+            disabled: useIsDataEmpty(individualPhenopackets, "phenotypic_features"),
+        },
+        {
+            url: diseasesUrl,
+            text: "Diseases",
+            disabled: useIsDataEmpty(individualPhenopackets, "diseases"),
+        },
+        {
+            url: interpretationsUrl,
+            text: "Interpretations",
+            disabled: useIsDataEmpty(individualPhenopackets, "interpretations"),
+        },
+        {
+            url: medicalActionsUrl,
+            text: "Medical Actions",
+            disabled: useIsDataEmpty(individualPhenopackets, "medical_actions"),
+        },
+        // Experiments related menu items
+        {
+            url: experimentsUrl,
+            text: "Experiments",
+            disabled: useIsDataEmpty(
+                useDeduplicatedIndividualBiosamples(individual),
+                "experiments",
+            ),
+        },
         {url: tracksUrl, text: "Tracks"},
-        {url: variantsUrl, text: "Variants"},
-        {url: genesUrl, text: "Genes"},
-        {url: diseasesUrl, text: "Diseases"},
+        // Extra
         {url: ontologiesUrl, text: "Ontologies"},
         {url: phenopacketsUrl, text: "Phenopackets JSON"},
     ];
-
     const selectedKeys = matchingMenuKeys(individualMenu, urlPath(BENTO_URL));
 
     return <>
@@ -114,30 +164,37 @@ const ExplorerIndividualContent = () => {
         <Layout>
             <Layout.Content style={LAYOUT_CONTENT_STYLE}>
                 {(individual && !individualIsFetching) ? <Switch>
+                    {/* OVERVIEW */}
                     <Route path={overviewUrl.replace(":", "\\:")}>
                         <IndividualOverview individual={individual} />
                     </Route>
+                    {/* BIOSAMPLES RELATED */}
+                    <Route path={biosamplesUrl.replace(":", "\\:")}>
+                        <IndividualBiosamples individual={individual} experimentsUrl={experimentsUrl}/>
+                    </Route>
+                    <Route path={measurementsUrl.replace(":", "\\:")}>
+                        <IndividualMeasurements individual={individual} />
+                    </Route>
                     <Route path={phenotypicFeaturesUrl.replace(":", "\\:")}>
                         <IndividualPhenotypicFeatures individual={individual} />
                     </Route>
-                    <Route path={biosamplesUrl.replace(":", "\\:")}>
-                        <IndividualBiosamples individual={individual} experimentsUrl={experimentsUrl} />
+                    <Route path={diseasesUrl.replace(":", "\\:")}>
+                        <IndividualDiseases individual={individual} />
+                    </Route>
+                    <Route path={interpretationsUrl.replace(":", "\\:")}>
+                        <IndividualInterpretations individual={individual} />
                     </Route>
+                    <Route path={medicalActionsUrl.replace(":", "\\:")}>
+                        <IndividualMedicalActions individual={individual}/>
+                    </Route>
+                    {/* EXPERIMENTS RELATED*/}
                     <Route path={experimentsUrl.replace(":", "\\:")}>
                         <IndividualExperiments individual={individual} />
                     </Route>
                     <Route path={tracksUrl.replace(":", "\\:")}>
                         <IndividualTracks individual={individual} />
                     </Route>
-                    <Route path={variantsUrl.replace(":", "\\:")}>
-                        <IndividualVariants individual={individual} tracksUrl={tracksUrl}/>
-                    </Route>
-                    <Route path={genesUrl.replace(":", "\\:")}>
-                        <IndividualGenes individual={individual} tracksUrl={tracksUrl} />
-                    </Route>
-                    <Route path={diseasesUrl.replace(":", "\\:")}>
-                        <IndividualDiseases individual={individual} />
-                    </Route>
+                    {/* EXTRA */}
                     <Route path={ontologiesUrl.replace(":", "\\:")}>
                         <IndividualOntologies individual={individual} />
                     </Route>

src/components/explorer/IndividualBiosamples.js

@@ -5,7 +5,7 @@ import { Route, Switch, useHistory, useRouteMatch, useParams } from "react-route
 import { Button, Descriptions, Table } from "antd";
 
 import { EM_DASH } from "../../constants";
-import { useDeduplicatedIndividualBiosamples, useIndividualResources } from "./utils";
+import { useDeduplicatedIndividualBiosamples } from "./utils";
 import {
     biosamplePropTypesShape,
     experimentPropTypesShape,
@@ -15,28 +15,37 @@ import {
 
 import JsonView from "./JsonView";
 import OntologyTerm from "./OntologyTerm";
+import TimeElement from "./TimeElement";
 
 import "./explorer.css";
+import BiosampleIDCell from "./searchResultsTables/BiosampleIDCell";
+import { MeasurementsTable } from "./IndividualMeasurements";
 
 // TODO: Only show biosamples from the relevant dataset, if specified;
 //  highlight those found in search results, if specified
 
-const BiosampleProcedure = ({ resourcesTuple, procedure }) => (
+const BiosampleProcedure = ({ procedure }) => (
     <div>
-        <strong>Code:</strong>{" "}<OntologyTerm resourcesTuple={resourcesTuple} term={procedure.code} />
+        <strong>Code:</strong>{" "}<OntologyTerm term={procedure.code} />
         {procedure.body_site ? (
             <div>
                 <strong>Body Site:</strong>{" "}
-                <OntologyTerm resourcesTuple={resourcesTuple} term={procedure.body_site} />
+                <OntologyTerm term={procedure.body_site} />
+            </div>
+        ) : null}
+        {procedure.performed ? (
+            <div>
+                <strong>Performed:</strong>{" "}
+                <TimeElement timeElement={procedure.performed} />
             </div>
         ) : null}
     </div>
 );
 BiosampleProcedure.propTypes = {
-    resourcesTuple: PropTypes.array,
     procedure: PropTypes.shape({
         code: ontologyShape.isRequired,
         body_site: ontologyShape,
+        performed: PropTypes.object,
     }).isRequired,
 };
 
@@ -60,28 +69,40 @@ ExperimentsClickList.propTypes = {
     handleExperimentClick: PropTypes.func,
 };
 
-const BiosampleDetail = ({ individual, biosample, handleExperimentClick }) => {
-    const resourcesTuple = useIndividualResources(individual);
+const BiosampleDetail = ({ biosample, handleExperimentClick }) => {
     return (
-        <Descriptions bordered={true} column={1} size="small" style={{maxWidth: 800}}>
+        <Descriptions bordered={true} column={1} size="small">
             <Descriptions.Item label="ID">
                 {biosample.id}
             </Descriptions.Item>
+            <Descriptions.Item label="Derived from ID">
+                {biosample.derived_from_id ? <BiosampleIDCell biosample={biosample.derived_from_id} /> : EM_DASH}
+            </Descriptions.Item>
             <Descriptions.Item label="Sampled Tissue">
-                <OntologyTerm resourcesTuple={resourcesTuple} term={biosample.sampled_tissue} />
+                <OntologyTerm term={biosample.sampled_tissue} />
+            </Descriptions.Item>
+            <Descriptions.Item label="Sample Type">
+                <OntologyTerm term={biosample.sample_type} />
             </Descriptions.Item>
             <Descriptions.Item label="Procedure">
-                <BiosampleProcedure resourcesTuple={resourcesTuple} procedure={biosample.procedure} />
+                <BiosampleProcedure procedure={biosample.procedure} />
             </Descriptions.Item>
             <Descriptions.Item label="Histological Diagnosis">
-                <OntologyTerm resourcesTuple={resourcesTuple} term={biosample.histological_diagnosis} />
+                <OntologyTerm term={biosample.histological_diagnosis} />
+            </Descriptions.Item>
+            <Descriptions.Item label="Pathological Stage">
+                <OntologyTerm term={biosample.pathological_stage} />
             </Descriptions.Item>
-            <Descriptions.Item label="Ind. Age At Collection">
-                {biosample.individual_age_at_collection
-                    ? biosample.individual_age_at_collection.age ??
-                    `Between ${biosample.individual_age_at_collection.start.age}` +
-                    `and ${biosample.individual_age_at_collection.end.age}`
-                    : EM_DASH}
+            <Descriptions.Item label="Time of Collection">
+                <TimeElement timeElement={biosample.time_of_collection}/>
+            </Descriptions.Item>
+            <Descriptions.Item label="Measurements">
+                {biosample.hasOwnProperty("measurements") &&
+                    Object.keys(biosample.measurements).length ? (
+                        <MeasurementsTable measurements={biosample.measurements}/>
+                    ) : (
+                        EM_DASH
+                    )}
             </Descriptions.Item>
             <Descriptions.Item label="Extra Properties">
                 {biosample.hasOwnProperty("extra_properties") &&
@@ -101,7 +122,6 @@ const BiosampleDetail = ({ individual, biosample, handleExperimentClick }) => {
     );
 };
 BiosampleDetail.propTypes = {
-    individual: individualPropTypesShape,
     biosample: biosamplePropTypesShape,
     handleExperimentClick: PropTypes.func,
 };
@@ -127,7 +147,6 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
     }, []);
 
     const biosamples = useDeduplicatedIndividualBiosamples(individual);
-    const resourcesTuple = useIndividualResources(individual);
 
     const columns = useMemo(
         () => [
@@ -139,7 +158,7 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
             {
                 title: "Sampled Tissue",
                 dataIndex: "sampled_tissue",
-                render: tissue => <OntologyTerm resourcesTuple={resourcesTuple} term={tissue} />,
+                render: tissue => <OntologyTerm term={tissue} />,
             },
             {
                 title: "Experiments",
@@ -149,7 +168,7 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
                 ),
             },
         ],
-        [resourcesTuple, handleExperimentClick],
+        [handleExperimentClick],
     );
 
     const onExpand = useCallback(
@@ -162,7 +181,6 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
     const expandedRowRender = useCallback(
         (biosample) => (
             <BiosampleDetail
-                individual={individual}
                 biosample={biosample}
                 handleExperimentClick={handleExperimentClick}
             />