Homepage (#14)

Homepage + GB + ATAC Bar Plot
weng-lab · Apr 30, 2024 · d362c20 · d362c20
1 parent 6d9be70
commit d362c20
Show file tree

Hide file tree

Showing 21 changed files with 534 additions and 857 deletions.
diff --git a/immuscreen/public/assets/disease-trait.png b/immuscreen/public/assets/disease-trait.png
diff --git a/immuscreen/public/assets/gene-bcre.png b/immuscreen/public/assets/gene-bcre.png
diff --git a/immuscreen/public/assets/single-cell.png b/immuscreen/public/assets/single-cell.png
diff --git a/immuscreen/public/assets/snp-qtl.png b/immuscreen/public/assets/snp-qtl.png
diff --git a/immuscreen/src/app/gene/page.tsx b/immuscreen/src/app/gene/page.tsx
@@ -1,5 +1,5 @@
 "use client"
-import React, { useState} from "react"
+import React, { useState } from "react"
 import { Tabs, Tab, Typography, colors } from "@mui/material"
 import { client } from "../../common/utils"
 import { StyledTab } from "../../common/utils"
@@ -15,10 +15,19 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 
-const Gene = () =>{
+const Gene = () => {
   const searchParams: ReadonlyURLSearchParams = useSearchParams()!
+
   const [value, setValue] = useState(0)
-
+  const [colorScheme, setcolorScheme] = useState('geneexp');
+
+  const handleColorSchemeChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newScheme: string,
+  ) => {
+    setcolorScheme(newScheme);
+  };
+
   const handleChange = (_, newValue: number) => {
     setValue(newValue)
   }
@@ -65,172 +74,142 @@ const Gene = () =>{
     client,
   })
 
-
-  const [colorScheme, setcolorScheme] = useState('genexp');
-  const handleColorSchemeChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newScheme: string,
-  ) => {
-    setcolorScheme(newScheme);
-  };
-
-  return  !searchParams.get('gene') ? <main>
-
-<Grid2 container spacing={6} sx={{ mr: "auto", ml: "auto", mt: "3rem" }}>
-        <Grid2 xs={6} sx={{ mt: "5em", ml:"2em"}}>
-          <Typography variant="h3">Gene Portal</Typography>
-
-          <br/>
-
-          <br/>
-          <br/>
-          {<GeneAutoComplete textColor={"black"} assembly={"GRCh38"} /> }
+  return (
+    searchParams.get('gene') ?
+      // Gene Selected View
+      <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>}
+          </Grid2>
+          <Grid2 xs={12} lg={12}>
+            <Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
+              <StyledTab label="Genome Browser" />
+              <StyledTab label="eQTLs" />
+              <StyledTab label="Gene Expression UMAP" />
+            </Tabs>
+          </Grid2>
         </Grid2>
-
-      </Grid2>
-
-  </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>}
-                  </Grid2>
-                  <Grid2 xs={12} lg={12}>
-                    <Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
-                    <StyledTab label="Genome Browser" />
-                              <StyledTab label="eQTLs" />
-                        <StyledTab label="Gene Expression UMAP" />
-                    </Tabs>
-                  </Grid2>
+        {value === 0 &&
+          <Grid2 xs={12}>
+            <GenomeBrowserView
+              gene={searchParams.get('gene')}
+              assembly={"GRCh38"}
+              coordinates={{
+                start: +searchParams.get("start") - 20000, end: +searchParams.get("end") + 20000,
+                chromosome: searchParams.get("chromosome")
+              }}
+            />
+          </Grid2>
+        }
+        {value === 1 && !loading && !soskicLoading && !yazarLoading &&
+          <Grid2 container spacing={3}>
+            <Grid2 xs={6} lg={6}>
+              <DataTable
+                columns={[
+                  {
+                    header: "Variant Id",
+                    value: (row) => row.variant_id || "",
+                  },
+                  {
+                    header: "Nominal P-Value",
+                    value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
+                  },
+                  {
+                    header: "Beta P-Value",
+                    value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
+                  }
+                ]}
+                tableTitle={`GTEX whole-blood eQTLs for ${searchParams.get('gene')}:`}
+                rows={data?.icreeQTLQuery || []}
+                itemsPerPage={10}
+              />
             </Grid2>
-
-            {value===1 && !loading && !soskicLoading && !yazarLoading  &&
-                <Grid2 container>
-                    <Grid2 xs={6} lg={6}>
-                            <DataTable
-                              columns={[
-
-                                {
-                                header: "Variant Id",
-                                value: (row) => row.variant_id || "",
-
-                              },
-                              {
-                                header: "Nominal P-Value",
-                                value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
-                              },
-                              {
-                                header: "Beta P-Value",
-                                value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
-                              }
-
-                              ]}
-                        tableTitle={`GTEX whole-blood eQTLs for ${searchParams.get('gene')}:`}
-                        rows={data?.icreeQTLQuery || []}
-
-
-                        itemsPerPage={10}
-                      />
-                      </Grid2>
-                      <Grid2 xs={0.5} lg={0.5}></Grid2>
-                      <Grid2 xs={5.5} lg={5.5}>
-                            <DataTable
-                              columns={[
-
-                                {
-                                header: "SNP",
-                                value: (row) => row.rsid || "",
-
-                              },
-
-                              {
-                                header: "P-Value",
-                                value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0 ,
-                              },
-                              {
-                                header: "Q-Value",
-                                value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
-                              },
-                              {
-                                header: "Celltype",
-                                value: (row) => row.celltype || "",
-
-                              }
-                              ]}
-                        tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('gene')}:`}
-                        rows={(yazarData.icreeQTLQuery) || []}
-
-                        sortColumn={3}
-                        itemsPerPage={10}
-                      />
-                      </Grid2>
-
-                      <Grid2 xs={6} lg={6}>
-                            <DataTable
-                              columns={[
-
-                                {
-                                  header: "Variant Id",
-                                  value: (row) => row.variant_id || "",
-
-                                },
-                                {
-                                  header: "Nominal P-Value",
-                                  value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
-                                },
-                                {
-                                  header: "Beta P-Value",
-                                  value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
-                                },
-                              {
-                                header: "Celltype",
-                                value: (row) => row.celltype || "",
-
-                              }
-                              ]}
-                        tableTitle={`Soskic.Trynka  eQTLs have been identified for ${searchParams.get('gene')}:`}
-                        rows={(soskicData.icreeQTLQuery) || []}
-
-                        sortColumn={3}
-                        itemsPerPage={10}
-                      />
-
-                      </Grid2>
-
-
-                </Grid2>    
-            }
-            {value===0 && <GenomeBrowserView
-                gene={searchParams.get('gene')}
-
-                assembly={"GRCh38"}
-                coordinates={{ start: +searchParams.get("start")-20000, end: +searchParams.get("end")+20000, 
-                chromosome:searchParams.get("chromosome") }}
-              />}
-            {value===2 && rnumapdata && !rnaumaploading && rnumapdata.calderonRnaUmapQuery.length>0 &&
-            <Grid2 xs={12} lg={12}>
-              Color Scheme:
-              <br/><br/>
-              <ToggleButtonGroup
+            <Grid2 xs={6} lg={6}>
+              <DataTable
+                columns={[
+                  {
+                    header: "SNP",
+                    value: (row) => row.rsid || "",
+                  },
+                  {
+                    header: "P-Value",
+                    value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0,
+                  },
+                  {
+                    header: "Q-Value",
+                    value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
+                  },
+                  {
+                    header: "Celltype",
+                    value: (row) => row.celltype || "",
+                  }
+                ]}
+                tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('gene')}:`}
+                rows={(yazarData.icreeQTLQuery) || []}
+                sortColumn={3}
+                itemsPerPage={10}
+              />
+            </Grid2>
+            <Grid2 xs={6} lg={6}>
+              <DataTable
+                columns={[
+                  {
+                    header: "Variant Id",
+                    value: (row) => row.variant_id || "",
+                  },
+                  {
+                    header: "Nominal P-Value",
+                    value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
+                  },
+                  {
+                    header: "Beta P-Value",
+                    value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
+                  },
+                  {
+                    header: "Celltype",
+                    value: (row) => row.celltype || "",
+                  }
+                ]}
+                tableTitle={`Soskic.Trynka eQTLs for ${searchParams.get('gene')}:`}
+                rows={(soskicData.icreeQTLQuery) || []}
+                sortColumn={3}
+                itemsPerPage={10}
+              />
+            </Grid2>
+          </Grid2>
+        }
+        {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>      
+            >
+              <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>
-            }
+            <br />
+            <br />
+            <UmapPlot colorScheme={colorScheme} data={rnumapdata.calderonRnaUmapQuery.map(d => { return { ...d, value: Math.log(d.value + 0.01) } })} plottitle={"log10 TPM"} />
+          </Grid2>
+        }
+      </Grid2>
+      :
+      //Gene Not Selected View
+      <Grid2 container spacing={6} sx={{ mr: "auto", ml: "auto", mt: "3rem" }}>
+        <Grid2 xs={6} sx={{ mt: "5em", ml: "2em" }}>
+          <Typography variant="h3">Gene Portal</Typography>
+          <br />
+          <br />
+          <br />
+          {<GeneAutoComplete textColor={"black"} assembly={"GRCh38"} />}
         </Grid2>
-
-
-    </main>
+      </Grid2>
   )
 }
 

diff --git a/immuscreen/src/app/globals.css b/immuscreen/src/app/globals.css
@@ -397,7 +397,6 @@ template {
 
 /* Limit the amount of space the content can take up so it doesn't run into edge */
 #body-wrapper {
-  max-width: 95%;
   margin-left: auto;
   margin-right: auto;
 }

diff --git a/immuscreen/src/app/icres/atacbarplot.tsx b/immuscreen/src/app/icres/atacbarplot.tsx
@@ -76,7 +76,7 @@ const CellTypesLegends = ({ title, plottitle, children }: { title: string; plott
 
 
 export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study: string, barplotdata: { color: string, ct_description?: string, celltype: string, class: string, subclass: string, description: string, order: number, value: number, name: string, study: string, group: string, grouping: string, stimulation: string }[] }> = (props) => {
-  const width = 800
+  const width = 1000
   const height = 700
   const margin = { top: 40, right: 8, bottom: 40, left: 60 };
   const xMax = width - margin.left - margin.right;
@@ -202,7 +202,16 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
             x2={xMax}
             stroke="#000000"
           />
-
+          {yScale.domain()[1] > 1.64 &&
+            <line
+              y1={yScale(1.64)}
+              y2={yScale(1.64)}
+              x1={0}
+              x2={xMax}
+              stroke="#000000"
+              strokeDasharray={'5 7'}
+            />
+          }
         </Group>
         <AxisBottom
           left={margin.left}
@@ -235,6 +244,7 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
           }}
           tickFormat={yScaleTickFormat}
           tickValues={ticks}
+          label="ATAC Signal Z-Score"
         />
         <Group top={margin.top} left={margin.left}>
           {/* Axis Break */}