[Platform] Add variant page

apps/platform/src/App.tsx

@@ -13,7 +13,7 @@ import DownloadsPage from "./pages/DownloadsPage";
 import DrugPage from "./pages/DrugPage";
 import TargetPage from "./pages/TargetPage";
 import EvidencePage from "./pages/EvidencePage";
-import VariantsPage from "./pages/VariantsPage";
+import VariantPage from "./pages/VariantPage";
 import APIPage from "./pages/APIPage";
 import NotFoundPage from "./pages/NotFoundPage";
 import ProjectsPage from "./pages/ProjectsPage";
@@ -53,8 +53,8 @@ function App() {
                 <Route path="/evidence/:ensgId/:efoId">
                   <EvidencePage />
                 </Route>
-                <Route path="/variants">
-                  <VariantsPage />
+                <Route path="/variant/:varId">
+                  <VariantPage />
                 </Route>
                 <Route path="/api">
                   <APIPage />

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

@@ -0,0 +1,49 @@
+import { faMapPin } from "@fortawesome/free-solid-svg-icons";
+import { Header as HeaderBase, ExternalLink } from "ui";
+import { MetadataType } from "./types";
+
+type HeaderProps = {
+  loading: boolean;
+  metadata: MetadataType;
+}
+
+function Header({ loading, metadata }: HeaderProps) {
+  const {
+    variantId,
+    rsIds,
+    chromosome,
+    position,
+    referenceAllele,
+    alternateAllele,
+  } = metadata;
+  const rsId = rsIds[0];
+  const gnomadId = `${
+    chromosome}-${
+    position}-${
+    referenceAllele}-${
+    alternateAllele}`;
+
+  return (
+    <HeaderBase
+      loading={loading}
+      title={variantId}
+      Icon={faMapPin}
+      externalLinks={
+        <>
+          <ExternalLink
+            title="Ensembl"
+            url={`https://identifiers.org/ensembl:${rsId}`}
+            id={rsId}
+          />
+          <ExternalLink
+            title="gnomAD"
+            url={`https://gnomad.broadinstitute.org/variant/${gnomadId}?dataset=gnomad_r4`}
+            id={gnomadId}
+          />
+        </>
+      }
+    />
+  );
+}
+
+export default Header;

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

@@ -0,0 +1,46 @@
+
+import { useState, useEffect } from "react";
+import { useLocation, useParams } from "react-router-dom";
+import { BasePage } from "ui";
+import Header from "./Header";
+import NotFoundPage from "../NotFoundPage";
+import { MetadataType } from "./types";
+
+// const Profile = lazy(() => import("./Profile"));
+
+function VariantPage() {
+  const location = useLocation();
+  const { varId } = useParams() as { varId: string };
+  const [metadata, setMetadata] =
+    useState<MetadataType | 'waiting' | undefined>('waiting');
+
+  // temp: loading is set by useQuery, set to false for now
+  const loading = false;
+
+  // temp: data will come from gql, fetch local json file for now
+  useEffect(() => {
+    fetch('../data/variant-data-2.json')
+      .then(response => response.json())
+      .then((allData: MetadataType[]) =>
+        setMetadata(allData.find(v => v.variantId === varId)));
+  }, []);
+
+  // temp: revisit this (use same as other pages) once using gql to get data
+  if (!metadata) {
+    return <NotFoundPage />;
+  } else if (metadata === 'waiting') {
+    return <b>Waiting</b>;
+  }
+
+  return (
+    <BasePage
+      title={`${varId} profile page`}
+      description={`Annotation information for ${varId}`}
+      location={location}
+    >
+      <Header loading={loading} metadata={metadata} />
+    </BasePage>
+  );
+}
+
+export default VariantPage;

apps/platform/src/pages/VariantPage/index.js

@@ -0,0 +1,2 @@
+// export { default } from "./VariantPage";
+export {default} from "./VariantPage"

apps/platform/src/pages/VariantPage/types.ts

@@ -0,0 +1,39 @@
+type AlleleFrequencyType = {
+  populationName: string;
+  alleleFrequency: number;
+};
+
+type VepType = {
+  mostSevereConsequence: string;
+  transcriptConsequences: {
+    aminoAcids: string;
+    consequenceTerms: string[];
+    geneId: string;
+  }[];
+};
+
+export type MetadataType = {
+  variantId: string,
+  chromosome: string,
+  position: number;
+  chromosomeB37?: string,
+  positionB37?: number;
+  referenceAllele: string,
+  alternateAllele: string,
+  rsIds: string[];
+  alleleType: string;
+  alleleFrequencies: AlleleFrequencyType[];
+  vep: VepType;
+  inSilicoPredictors: {
+    cadd?: {
+      phred: number;
+      raw: number;
+    };
+    revelMax?: number;
+    spliceaiDsMax?: number;
+    pangolinLargestDs?: number;
+    phylop?: number;
+    siftMax?: number;
+    polyphenMax?: number;
+  };
+};