[Platform]: Update genetics branch

apps/platform/src/client.js

@@ -22,6 +22,9 @@ const client = new ApolloClient({
       AlleleFrequency: {
         keyFields: ["populationName"],
       },
+      InSilicoPredictor: {
+        keyFields: ["method"],
+      },
     },
   }),
   headers: { "OT-Platform": true },

apps/platform/src/pages/VariantPage/Profile.tsx

@@ -8,7 +8,8 @@ import {
   summaryUtils,
 } from "ui";
 
-// import InSilicoPredictorsSummary from "sections/src/variant/InSilicoPredictors/Summary";
+import InSilicoPredictorsSummary from "sections/src/variant/InSilicoPredictors/Summary";
+import VariantEffectPredictorSummary from "sections/src/variant/VariantEffectPredictor/Summary";
 // import EVASummary from "sections/src/variant/EVA/Summary";
 // import UniProtVariantsSummary from "sections/src/variant/UniProtVariants/Summary";
 // import QTLCredibleSetsSummary from "sections/src/variant/QTLCredibleSets/Summary";
@@ -18,78 +19,77 @@ import {
 import client from "../../client";
 import ProfileHeader from "./ProfileHeader";
 
-// const InSilicoPredictorsSection = lazy(() => import("sections/src/variant/InSilicoPredictors/Body"));
+const InSilicoPredictorsSection = lazy(
+  () => import("sections/src/variant/InSilicoPredictors/Body")
+);
+const VariantEffectPredictorSection = lazy(
+  () => import("sections/src/variant/VariantEffectPredictor/Body")
+);
 // const EVASection = lazy(() => import("sections/src/variant/EVA/Body"));
 // const UniProtVariantsSection = lazy(() => import("sections/src/variant/UniProtVariants/Body"));
 // const QTLCredibleSetsSection = lazy(() => import("sections/src/variant/QTLCredibleSets/Body"));
 // const GWASCredibleSetsSection = lazy(() => import("sections/src/variant/GWASCredibleSets/Body"));
 // const PharmacogenomicsSection = lazy(() => import("sections/src/variant/Pharmacogenomics/Body"));
 
 const summaries = [
-  // InSilicoPredictorsSummary,
+  InSilicoPredictorsSummary,
+  VariantEffectPredictorSummary,
   // EVASummary,
   // UniProtVariantsSummary,
   // QTLCredibleSetsSummary,
   // GWASCredibleSetsSummary,
   // PharmacogenomicsSummary,
 ];
 
-// const VARIANT = "variant";
-// const VARIANT_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(summaries, "Variant");
-// const VARIANT_PROFILE_QUERY = gql`
-//   query VariantProfileQuery($variantId: String!) {
-//     variant(variantId: $variantId) {
-//       variantId
-//       ...VariantProfileHeaderFragment
-//       ...VariantProfileSummaryFragment
-//     }
-//   }
-//   ${ProfileHeader.fragments.profileHeader}
-//   ${VARIANT_PROFILE_SUMMARY_FRAGMENT}
-// `;
-
 const VARIANT = "variant";
+const VARIANT_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
+  summaries,
+  "VariantIndex"
+);
 const VARIANT_PROFILE_QUERY = gql`
   query VariantProfileQuery($variantId: String!) {
     variant(variantId: $variantId) {
       variantId
       ...VariantProfileHeaderFragment
+      ...VariantIndexProfileSummaryFragment
     }
   }
   ${ProfileHeader.fragments.profileHeader}
+  ${VARIANT_PROFILE_SUMMARY_FRAGMENT}
 `;
 
 type ProfileProps = {
   varId: string;
 };
 
 function Profile({ varId }: ProfileProps) {
-
   return (
-
     <PlatformApiProvider
       entity={VARIANT}
       query={VARIANT_PROFILE_QUERY}
       variables={{ variantId: varId }}
       client={client}
     >
-
       <ProfileHeader />
 
-      {/* <SummaryContainer>
+      <SummaryContainer>
         <InSilicoPredictorsSummary />
-        <EVASummary />
+        <VariantEffectPredictorSummary />
+        {/* <EVASummary />
         <UniProtVariantsSummary />
         <QTLCredibleSetsSummary />
         <GWASCredibleSetsSummary />
-        <PharmacogenomicsSummary />
+        <PharmacogenomicsSummary /> */}
       </SummaryContainer>
 
       <SectionContainer>
         <Suspense fallback={<SectionLoader />}>
-          <InSilicoPredictorsSection id={varId} label='NO-LABEL!' entity={VARIANT} />
+          <InSilicoPredictorsSection id={varId} entity={VARIANT} />
         </Suspense>
         <Suspense fallback={<SectionLoader />}>
+          <VariantEffectPredictorSection id={varId} entity={VARIANT} />
+        </Suspense>
+        {/* <Suspense fallback={<SectionLoader />}>
           <EVASection id={varId} label='NO-LABEL!' entity={VARIANT} />
         </Suspense>
         <Suspense fallback={<SectionLoader />}>
@@ -103,13 +103,10 @@ function Profile({ varId }: ProfileProps) {
         </Suspense>
         <Suspense fallback={<SectionLoader />}>
           <PharmacogenomicsSection id={varId} label='NO-LABEL!' entity={VARIANT} />
-        </Suspense>
-      </SectionContainer> */}
-
+        </Suspense> */}
+      </SectionContainer>
     </PlatformApiProvider>
-
   );
-
 }
 
-export default Profile;
+export default Profile;

packages/sections/src/variant/InSilicoPredictors/Body.tsx

@@ -1,92 +1,76 @@
-// import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import { Typography } from "@mui/material";
-import { Link, SectionItem, Tooltip, PublicationsDrawer, DataTable } from "ui";
+import { SectionItem, Tooltip, DataTable } from "ui";
 import { definition } from "../InSilicoPredictors";
 import Description from "../InSilicoPredictors/Description";
-import { epmcUrl } from "../../utils/urls";
-import { identifiersOrgLink } from "../../utils/global";
-import { defaultRowsPerPageOptions, naLabel, sectionsBaseSizeQuery,
-} from "../../constants";
-// import UNIPROT_VARIANTS_QUERY from "./UniprotVariantsQuery.gql";
+import { defaultRowsPerPageOptions, naLabel } from "../../constants";
+import IN_SILICO_PREDICTORS_QUERY from "./InSilicoPredictorsQuery.gql";
 
-function getColumns(label: string) {
-  return [
-    {
-      id: "method",
-      label: "Method",
-    },
-    {
-      id: "assessment",
-      label: "Prediction",
-      renderCell: ({ assessment, flag }) => (
-        flag
-          ? (
-            <Tooltip
-              title={
-                <>
-                  <Typography variant="subtitle2" display="block" align="center">
-                    Flag: {flag}
-                  </Typography>
-                </>
-              }
-              showHelpIcon
-            >
-              {assessment ?? naLabel}
-            </Tooltip>
-          ) : (
-            assessment ?? naLabel
-          )
-      )
-    },
-    {
-      id: "score",
-      label: "Score",
-    },
-  ];
-}
+const columns = [
+  {
+    id: "method",
+    label: "Method",
+  },
+  {
+    id: "assessment",
+    label: "Prediction",
+    renderCell: ({ assessment, assessmentFlag }) =>
+      assessmentFlag ? (
+        <Tooltip
+          title={
+            <>
+              <Typography variant="subtitle2" display="block" align="center">
+                Flag: {assessmentFlag}
+              </Typography>
+            </>
+          }
+          showHelpIcon
+        >
+          {assessment ?? naLabel}
+        </Tooltip>
+      ) : (
+        assessment ?? naLabel
+      ),
+  },
+  {
+    id: "score",
+    label: "Score",
+    renderCell: ({ score }) => score ?? naLabel,
+  },
+];
 
 type BodyProps = {
-  id: string,
-  label: string,
-  entity: string,
+  id: string;
+  entity: string;
 };
 
+export function Body({ id, entity }: BodyProps) {
+  const variables = {
+    variantId: id,
+  };
 
-export function Body({ id, label, entity }) {
-
-  // const variables = {
-  //   ensemblId: ensgId,
-  //   efoId,
-  //   size: sectionsBaseSizeQuery,
-  // };
-
-  const columns = getColumns(label);
-
-  // const request = useQuery(UNIPROT_VARIANTS_QUERY, {
-  //   variables,
-  // });
-  const request = mockQuery();
+  const request = useQuery(IN_SILICO_PREDICTORS_QUERY, {
+    variables,
+  });
 
   return (
     <SectionItem
       definition={definition}
       request={request}
       entity={entity}
       renderDescription={() => <Description variantId={id} />}
-      renderBody={() => {
-        // const rows = request.data.variant.inSilicoPredictors;
-        const rows =
-          [...request.data.variant.inSilicoPredictors].sort((row1, row2) => {
-            return row1.method.localeCompare(row2.method);
-          }); 
+      renderBody={({ variant }) => {
+        const rows = [...variant.inSilicoPredictors].sort((row1, row2) => {
+          return row1.method.localeCompare(row2.method);
+        });
         return (
           <DataTable
             columns={columns}
             rows={rows}
             dataDownloader
             rowsPerPageOptions={defaultRowsPerPageOptions}
-            // query={UNIPROT_VARIANTS_QUERY.loc.source.body}
-            // variables={variables}
+            query={IN_SILICO_PREDICTORS_QUERY.loc.source.body}
+            variables={variables}
           />
         );
       }}
@@ -95,41 +79,3 @@ export function Body({ id, label, entity }) {
 }
 
 export default Body;
-
-function mockQuery() {
-  return {
-    loading: false,
-    error: undefined,
-    data: JSON.parse(`
-{ 
-  "variant": {
-    "inSilicoPredictors": [
-      {
-        "method": "alphaMissense",
-        "score": 0.077,
-        "assessment": "likely_benign"
-      },
-      {
-        "method": "phred scaled CADD",
-        "score": 7.293
-      },
-      {
-        "method": "sift max",
-        "score": 0.2,
-        "assessment": "MODERATE"
-      },
-      {
-        "method": "polyphen max",
-        "score": 0.069,
-        "assessment": "tolerated"
-      },
-      {
-        "method": "loftee",
-        "assessment": "high-confidence LoF variant",
-        "flag": "PHYLOCSF_WEAK"
-      }
-    ]
-  }
-}`),
-  };
-}

packages/sections/src/variant/InSilicoPredictors/Description.tsx

@@ -7,12 +7,16 @@ type DescriptionProps = {
 function Description({ variantId }: DescriptionProps) {
   return (
     <>
-      Predicted functional effect of <strong>{variantId}</strong>. {" "}Source:{" "}
+      Predicted functional effect of <strong>{variantId}</strong>. Source:{" "}
       <Link to="https://www.ensembl.org/info/docs/tools/vep/index.html" external>
         VEP
       </Link>
+      ,{" "}
+      <Link to="https://gnomad.broadinstitute.org/" external>
+        gnomAD
+      </Link>
     </>
   );
 }
 
-export default Description;
+export default Description;

packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsQuery.gql

@@ -0,0 +1,11 @@
+query InSilicoPredictorsQuery($variantId: String!) {
+  variant(variantId: $variantId) {
+    variantId
+    inSilicoPredictors {
+      method
+      assessment
+      score
+      assessmentFlag
+    }
+  }
+}

packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsSummaryFragment.gql

@@ -0,0 +1,5 @@
+fragment InSilicoPredictorsSummaryFragment on VariantIndex {
+  inSilicoPredictors {
+    method
+  }
+}