section added with query data

opentargets · Nov 2, 2023 · 7159dee · 7159dee
1 parent bb52a40
commit 7159dee
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 171 deletions.
diff --git a/apps/platform/src/pages/DrugPage/Profile.jsx b/apps/platform/src/pages/DrugPage/Profile.jsx
@@ -1,41 +1,36 @@
-import { gql } from '@apollo/client';
-import {
-  PlatformApiProvider,
-  SectionContainer,
-  SummaryContainer,
-  summaryUtils,
-} from 'ui';
-import MechanismsOfActionSummary from 'sections/src/drug/MechanismsOfAction/Summary';
-import IndicationsSummary from 'sections/src/drug/Indications/Summary';
-import KnownDrugsSummary from 'sections/src/drug/KnownDrugs/Summary';
-import DrugWarningsSummary from 'sections/src/drug/DrugWarnings/Summary';
-import AdverseEventsSummary from 'sections/src/drug/AdverseEvents/Summary';
-import BibliographySummary from 'sections/src/drug/Bibliography/Summary';
+import { gql } from "@apollo/client";
+import { PlatformApiProvider, SectionContainer, SummaryContainer, summaryUtils } from "ui";
+import MechanismsOfActionSummary from "sections/src/drug/MechanismsOfAction/Summary";
+import IndicationsSummary from "sections/src/drug/Indications/Summary";
+import KnownDrugsSummary from "sections/src/drug/KnownDrugs/Summary";
+import DrugWarningsSummary from "sections/src/drug/DrugWarnings/Summary";
+import PharmacogenomicsSummary from "sections/src/drug/Pharmacogenomics/Summary";
+import AdverseEventsSummary from "sections/src/drug/AdverseEvents/Summary";
+import BibliographySummary from "sections/src/drug/Bibliography/Summary";
 
-import MechanismsOfActionSection from 'sections/src/drug/MechanismsOfAction/Body';
-import IndicationsSection from 'sections/src/drug/Indications/Body';
-import KnownDrugsSection from 'sections/src/drug/KnownDrugs/Body';
-import DrugWarningsSection from 'sections/src/drug/DrugWarnings/Body';
-import AdverseEventsSection from 'sections/src/drug/AdverseEvents/Body';
-import BibliographySection from 'sections/src/drug/Bibliography/Body';
+import MechanismsOfActionSection from "sections/src/drug/MechanismsOfAction/Body";
+import IndicationsSection from "sections/src/drug/Indications/Body";
+import KnownDrugsSection from "sections/src/drug/KnownDrugs/Body";
+import DrugWarningsSection from "sections/src/drug/DrugWarnings/Body";
+import PharmacogenomicsSection from "sections/src/drug/Pharmacogenomics/Body";
+import AdverseEventsSection from "sections/src/drug/AdverseEvents/Body";
+import BibliographySection from "sections/src/drug/Bibliography/Body";
 
-import client from '../../client';
-import ProfileHeader from './ProfileHeader';
+import client from "../../client";
+import ProfileHeader from "./ProfileHeader";
 
 const summaries = [
   MechanismsOfActionSummary,
   IndicationsSummary,
   KnownDrugsSummary,
   DrugWarningsSummary,
+  PharmacogenomicsSummary,
   AdverseEventsSummary,
   BibliographySummary,
 ];
 
-const DRUG = 'drug';
-const DRUG_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
-  summaries,
-  'Drug'
-);
+const DRUG = "drug";
+const DRUG_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(summaries, "Drug");
 const DRUG_PROFILE_QUERY = gql`
   query DrugProfileQuery($chemblId: String!) {
     drug(chemblId: $chemblId) {
@@ -63,6 +58,7 @@ function Profile({ chemblId, name }) {
         <IndicationsSummary />
         <KnownDrugsSummary />
         <DrugWarningsSummary />
+        <PharmacogenomicsSummary />
         <AdverseEventsSummary />
         <BibliographySummary />
       </SummaryContainer>
@@ -72,6 +68,7 @@ function Profile({ chemblId, name }) {
         <IndicationsSection id={chemblId} label={name} entity={DRUG} />
         <KnownDrugsSection id={chemblId} label={name} entity={DRUG} />
         <DrugWarningsSection id={chemblId} label={name} entity={DRUG} />
+        <PharmacogenomicsSection id={chemblId} label={name} entity={DRUG} />
         <AdverseEventsSection id={chemblId} label={name} entity={DRUG} />
         <BibliographySection id={chemblId} label={name} entity={DRUG} />
       </SectionContainer>

diff --git a/apps/platform/src/pages/TargetPage/Profile.jsx b/apps/platform/src/pages/TargetPage/Profile.jsx
@@ -11,6 +11,7 @@ import {
 import KnownDrugsSummary from 'sections/src/target/KnownDrugs/Summary';
 import TractabilitySummary from 'sections/src/target/Tractability/Summary';
 import SafetySummary from 'sections/src/target/Safety/Summary';
+import PharmacogenomicsSummary from 'sections/src/target/Pharmacogenomics/Summary';
 import ChemicalProbesSummary from 'sections/src/target/ChemicalProbes/Summary';
 import BaselineExpressionSummary from 'sections/src/target/Expression/Summary';
 import DepMapSummary from 'sections/src/target/DepMap/Summary';
@@ -35,6 +36,7 @@ const TractabilitySection = lazy(() =>
   import('sections/src/target/Tractability/Body')
 );
 const SafetySection = lazy(() => import('sections/src/target/Safety/Body'));
+const PharmacogenomicsSection = lazy(() => import('sections/src/target/Pharmacogenomics/Body'));
 const ChemicalProbesSection = lazy(() =>
   import('sections/src/target/ChemicalProbes/Body')
 );
@@ -75,6 +77,7 @@ const summaries = [
   KnownDrugsSummary,
   TractabilitySummary,
   SafetySummary,
+  PharmacogenomicsSummary,
   ChemicalProbesSummary,
   BaselineExpressionSummary,
   DepMapSummary,
@@ -120,6 +123,7 @@ function Profile({ ensgId, symbol }) {
         <KnownDrugsSummary />
         <TractabilitySummary />
         <SafetySummary />
+        <PharmacogenomicsSummary/>
         <ChemicalProbesSummary />
         <BaselineExpressionSummary />
         <DepMapSummary />
@@ -145,6 +149,9 @@ function Profile({ ensgId, symbol }) {
         <Suspense fallback={<SectionLoader />}>
           <SafetySection id={ensgId} label={symbol} entity={TARGET} />
         </Suspense>
+        <Suspense fallback={<SectionLoader />}>
+          <PharmacogenomicsSection id={ensgId} label={symbol} entity={TARGET}/>
+        </Suspense>
         <Suspense fallback={<SectionLoader />}>
           <ChemicalProbesSection id={ensgId} label={symbol} entity={TARGET} />
         </Suspense>

diff --git a/packages/sections/src/drug/Pharmacogenomics/Body.jsx b/packages/sections/src/drug/Pharmacogenomics/Body.jsx
@@ -1,28 +1,149 @@
 import { useQuery } from "@apollo/client";
-import { SectionItem } from "ui";
+import { Link, SectionItem, Tooltip, DataTable, TableDrawer, LabelChip } from "ui";
 
 import { definition } from ".";
 import Description from "./Description";
-import PharmacogenomicsTable from "./PharmacogenomicsTable";
-
 import PHARMACOGENOMICS_QUERY from "./Pharmacogenomics.gql";
+import { naLabel, defaultRowsPerPageOptions } from "../../constants";
+
+const replaceSemicolonWithUnderscore = id => id.replace(":", "_");
+
+const columns = [
+  {
+    id: "gene",
+    label: "Gene",
+    renderCell: ({ targetFromSourceId }) =>
+      targetFromSourceId ? (
+        <Tooltip title={`This gene may not be direct target of the drug.`}>
+          <>
+            <Link to={`https://platform.opentargets.org/target/${targetFromSourceId}`}>
+              {targetFromSourceId}
+            </Link>
+          </>
+        </Tooltip>
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    id: "rsId",
+    label: "RsID",
+    renderCell: ({ variantRsId }) => variantRsId || naLabel,
+  },
+  {
+    id: "genotypeId",
+    label: "Genotype ID",
+    renderCell: ({ genotypeId }) =>
+      genotypeId ? (
+        <Tooltip
+          title={
+            <>
+              VCF-style(chr_pos_ref_allele1,allele2). See
+              <Link external to="google.com">
+                here
+              </Link>
+              for more details
+            </>
+          }
+        >
+          <>{genotypeId}</>
+        </Tooltip>
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    // todo: check the value of label and value
+    id: "variantFunctionalConsequenceId",
+    label: "Variant Consequence",
+    renderCell: ({ variantFunctionalConsequenceId }) =>
+      variantFunctionalConsequenceId ? (
+        <LabelChip
+          label={variantFunctionalConsequenceId}
+          value={variantFunctionalConsequenceId}
+          tooltip={"Ensembl variant effect predictor"}
+        />
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    id: "adverseOutcome",
+    label: "Adverse Outcome",
+    renderCell: ({ phenotypeText }) =>
+      phenotypeText ? (
+        <Tooltip title={`Genotypennotationtext`}>
+          <>
+            <Link>{phenotypeText}</Link>
+          </>
+        </Tooltip>
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    id: "adverseOutcomeCategory",
+    label: "Adverse Outcome Category",
+    renderCell: ({ pgxCategory }) => pgxCategory || naLabel,
+  },
+  {
+    id: "confidenceLevel",
+    label: "Confidence (Level)",
+    renderCell: ({ evidenceLevel }) =>
+      evidenceLevel ? (
+        <Tooltip
+          title={
+            <>
+              As defined by
+              <Link to={`https://www.pharmgkb.org/page/clinAnnLevels`}>
+                {" "}
+                PharmGKB ClinAnn Levels
+              </Link>
+            </>
+          }
+        >
+          <>{evidenceLevel}</>
+        </Tooltip>
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    id: "source",
+    label: "Source",
+    renderCell: ({ studyId }) =>
+      studyId ? (
+        <Link to={`https://www.pharmgkb.org/clinicalAnnotations/${studyId}`}> {studyId}</Link>
+      ) : (
+        naLabel
+      ),
+  },
+  {
+    id: "literature",
+    label: "Literature",
+    renderCell: ({ literature }) => <Link> {literature}</Link>,
+  },
+];
 
-function Body({ id: ensemblId, label: symbol, entity }) {
-  const variables = { ensemblId };
+function Body({ id: chemblId, label: name, entity }) {
+  const variables = { chemblId };
   const request = useQuery(PHARMACOGENOMICS_QUERY, {
     variables,
   });
 
   return (
     <SectionItem
       definition={definition}
-      entity={entity}
       request={request}
-      renderDescription={() => <Description symbol={symbol} />}
-      renderBody={({ target }) => (
-        <PharmacogenomicsTable
-          symbol={target.approvedSymbol}
-          pathways={target.pathways}
+      entity={entity}
+      renderDescription={() => <Description name={name} />}
+      renderBody={({ drug }) => (
+        <DataTable
+          showGlobalFilter
+          dataDownloader
+          columns={columns}
+          rows={drug.pharmacogenomics}
+          rowsPerPageOptions={defaultRowsPerPageOptions}
           query={PHARMACOGENOMICS_QUERY.loc.source.body}
           variables={variables}
         />

diff --git a/packages/sections/src/drug/Pharmacogenomics/Pharmacogenomics.gql b/packages/sections/src/drug/Pharmacogenomics/Pharmacogenomics.gql
@@ -1,11 +1,11 @@
-query PharmacogenomicsQuery($ensemblId: String!) {
-  target(ensemblId: $ensemblId) {
+query PharmacogenomicsQuery($chemblId: String!) {
+  drug(chemblId: $chemblId) {
     id
     pharmacogenomics {
+      targetFromSourceId
       variantRsId
       genotypeId
       variantFunctionalConsequenceId
-      drugId
       phenotypeText
       pgxCategory
       evidenceLevel

diff --git a/packages/sections/src/drug/Pharmacogenomics/PharmacogenomicsSummary.gql b/packages/sections/src/drug/Pharmacogenomics/PharmacogenomicsSummary.gql
@@ -1,4 +1,4 @@
-fragment PathwaysSummaryFragment on Target {
+fragment PharmacogenomicsSummaryFragment on Drug {
   pharmacogenomics {
     targetFromSourceId
   }