Fixes (#8)

* fix umap plots to use visx lib * fix umap plots to use visx lib * refactor umap plots * more fixes * umap plot fixes
weng-lab · Apr 18, 2024 · 5d22ac7 · 5d22ac7
1 parent 5458e21
commit 5d22ac7
Show file tree

Hide file tree

Showing 19 changed files with 883 additions and 733 deletions.
diff --git a/immuscreen/package.json b/immuscreen/package.json
@@ -47,6 +47,7 @@
     "@types/react": "^18.2.19",
     "@types/react-dom": "18.2.7",
     "@visx/axis": "^3.8.0",
+    "@visx/glyph": "latest",
     "@visx/event": "latest",
     "@visx/gradient": "^3.3.0",
     "@visx/grid": "^3.5.0",

diff --git a/immuscreen/src/app/about/page.tsx b/immuscreen/src/app/about/page.tsx
@@ -13,11 +13,9 @@ export default function About() {
     <main>
       <Grid2 container spacing={4} sx={{ maxWidth: "70%", mr: "auto", ml: "auto", mt: "3rem" }}>
         <Grid2 xs={12} lg={6}>
-          <Typography variant="h3">About immuSCREEN</Typography>
-          <Typography variant="h5">Search immune Candidate cis-Regulatory Elements by ENCODE</Typography>
-
-        </Grid2>       
-
+          <Typography variant="h3">About igSCREEN</Typography>
+          <Typography variant="h5">Search immune Candidate cis-Regulatory Elements by ENCODE</Typography>         
+        </Grid2>              
       </Grid2>
     </main>
   )

diff --git a/immuscreen/src/app/gene/page.tsx b/immuscreen/src/app/gene/page.tsx
@@ -1,47 +1,37 @@
 "use client"
 import React, { useState} from "react"
-import { Tabs, Tab, Typography } from "@mui/material"
+import { Tabs, Tab, Typography, colors } from "@mui/material"
 import { client } from "../../common/utils"
 import { StyledTab } from "../../common/utils"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import { useQuery } from "@apollo/client"
-import { gql } from "@apollo/client"
 import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"
-
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import { GenomeBrowserView } from "../../common/gbview/genomebrowserview"
 import { GeneAutoComplete } from "../../common/components/mainsearch/GeneAutocomplete"
-import { RNAUMAP } from "./rnaumap"
-
+import { UmapPlot } from "../../common/components/umapplot"
+import { RNA_UMAP_QUERY, EQTL_QUERY } from "./queries"
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 
-
-const EQTL_QUERY = gql`
-  query iCREeQTLQuery($study: String!, $geneid: String) 
-    {
-        icreeQTLQuery(study:$study, geneid:$geneid) {
-          variant_id
-          pvalue
-          qvalue
-          geneid
-          pval_nominal
-          phenotype_id
-          celltype
-          study
-          rsid
-          pval_beta
-        
-        }
-    }
-  
-`
 const Gene = () =>{
   const searchParams: ReadonlyURLSearchParams = useSearchParams()!
   const [value, setValue] = useState(0)
 
   const handleChange = (_, newValue: number) => {
     setValue(newValue)
   }
+
+  const { loading: rnaumaploading, data: rnumapdata } = useQuery(RNA_UMAP_QUERY, {
+    variables: {
+      gene_id: searchParams.get('gene')
+    },
+    skip: !searchParams.get('gene'),
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    client,
+  })
   const { loading: loading, data: data } = useQuery(EQTL_QUERY, {
     variables: {
       study: "GTEX",
@@ -76,8 +66,13 @@ const Gene = () =>{
   })
 
 
-
-
+  const [colorScheme, setcolorScheme] = useState('genexp');
+  const handleColorSchemeChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newScheme: string,
+  ) => {
+    setcolorScheme(newScheme);
+  };
 
   return  !searchParams.get('gene') ? <main>
 
@@ -97,8 +92,6 @@ const Gene = () =>{
   </main>: (
     <main>
       <Grid2 container  sx={{ maxWidth: "80%", mr: "auto", ml: "auto", mt: "3rem" }}>
-
-
             <Grid2 container spacing={3} sx={{ mt: "2rem", mb: "1rem" }}>
                   <Grid2 xs={12} lg={12}>
                       {searchParams.get("gene") && <Typography variant="h4">Gene Details: {searchParams.get("gene")}</Typography>}
@@ -107,7 +100,7 @@ const Gene = () =>{
                     <Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
                     <StyledTab label="Genome Browser" />
                               <StyledTab label="eQTLs" />
-                        <StyledTab label="Calderon RNA UMAP" />
+                        <StyledTab label="Gene Expression UMAP" />
                     </Tabs>
                   </Grid2>
             </Grid2>
@@ -215,9 +208,23 @@ const Gene = () =>{
                 coordinates={{ start: +searchParams.get("start")-20000, end: +searchParams.get("end")+20000, 
                 chromosome:searchParams.get("chromosome") }}
               />}
-            {value===2 && 
-            <Grid2 xs={6} lg={6}>
-            <RNAUMAP gene={searchParams.get('gene')}/>
+            {value===2 && rnumapdata && !rnaumaploading && rnumapdata.calderonRnaUmapQuery.length>0 &&
+            <Grid2 xs={12} lg={12}>
+              Color Scheme:
+              <br/><br/>
+              <ToggleButtonGroup
+              color="primary"
+              value={colorScheme}
+              exclusive
+              onChange={handleColorSchemeChange}
+              aria-label="Platform"
+              >
+            <ToggleButton value="geneexp">Gene Expression</ToggleButton>
+            <ToggleButton value="celltype">CellType Cluster</ToggleButton>      
+            </ToggleButtonGroup>
+            <br/>
+            <br/>
+              <UmapPlot colorScheme={colorScheme} data={rnumapdata.calderonRnaUmapQuery.map(d=>{return {...d, value: Math.log(d.value+0.01)} })} plottitle={"log10 TPM"}/>
             </Grid2>
             }
         </Grid2>

diff --git a/immuscreen/src/app/gene/queries.ts b/immuscreen/src/app/gene/queries.ts
@@ -0,0 +1,37 @@
+
+import { gql } from "@apollo/client"
+export const RNA_UMAP_QUERY = gql`
+query rnaUmapQuery($gene_id: String!) 
+{
+    calderonRnaUmapQuery(gene_id: $gene_id){
+      name
+      donor
+      stimulation      
+      celltype
+      class
+      umap_1
+      umap_2
+      value
+    }
+  }
+
+`
+export const EQTL_QUERY = gql`
+  query iCREeQTLQuery($study: String!, $geneid: String) 
+    {
+        icreeQTLQuery(study:$study, geneid:$geneid) {
+          variant_id
+          pvalue
+          qvalue
+          geneid
+          pval_nominal
+          phenotype_id
+          celltype
+          study
+          rsid
+          pval_beta
+        
+        }
+    }
+  
+`