ChromHMM tab

screen2.0/src/app/search/ccredetails/ccredetails.tsx

@@ -10,6 +10,7 @@ import { LinkedGenes } from "./linkedgenes"
 import { Ortholog } from "./linkedccres"
 import { TfIntersection } from "./tfintersection"
 import Rampage from "./rampage"
+import { ChromHMM } from "./chromhmm"
 
 import MenuIcon from "@mui/icons-material/Menu"
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
@@ -99,6 +100,7 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
                       <StyledTab label="Linked cCREs in other Assemblies" sx={{ alignSelf: "start" }} />
                       <StyledTab label="Associated RAMPAGE Signal" sx={{ alignSelf: "start" }} />
                       <StyledTab label="Associated Gene Expression" sx={{ alignSelf: "start" }} />
+                      <StyledTab label="ChromHMM" sx={{ alignSelf: "start" }} />
                     </Tabs>
                   </Box>
                 </Box>
@@ -145,33 +147,38 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
               </Toolbar>
             </AppBar>
           </ThemeProvider>
-          <Grid2 container xs={12} sx={{ mt: 4, ml: 2, mr: 2, mb: 4 }}>
-            {value === 0 && <InSpecificBiosamples accession={accession} globals={globals} assembly={assembly} />}
-            {value === 1 && <LinkedGenes accession={accession} assembly={assembly} />}
-            {value === 2 && (
-              <NearByGenomicFeatures
-                accession={accession}
-                assembly={assembly}
-                coordinates={{
-                  chromosome: region.chrom,
-                  start: +region.start.toString().replace(/\D/g, ""),
-                  end: +region.end.toString().replace(/\D/g, ""),
-                }}
-              />
-            )}
-            {value === 3 && (
-              <TfIntersection
-                assembly={assembly}
-                coordinates={{
-                  chromosome: region.chrom,
-                  start: +region.start.toString().replace(/\D/g, ""),
-                  end: +region.end.toString().replace(/\D/g, ""),
-                }}
-              />
-            )}
-            {value === 5 && <Ortholog accession={accession} assembly={assembly} />}
-            {value === 6 && <Rampage accession={accession} assembly={assembly} chromosome={region.chrom} />}
-            {value === 7 && <GeneExpression accession={accession} assembly={assembly} genes={genes} hamburger={open} />}
+          <Grid2 xs={12} lg={12}>
+            <Grid2 container spacing={3} ml="1rem">
+              <Grid2 xs={12} lg={12} md={12}>
+                {value === 0 && <InSpecificBiosamples accession={accession} globals={globals} assembly={assembly} />}
+                {value === 1 && <LinkedGenes accession={accession} assembly={assembly} />}
+                {value === 2 && (
+                  <NearByGenomicFeatures
+                    accession={accession}
+                    assembly={assembly}
+                    coordinates={{
+                      chromosome: region.chrom,
+                      start: +region.start.toString().replace(/\D/g, ""),
+                      end: +region.end.toString().replace(/\D/g, ""),
+                    }}
+                  />
+                )}
+                {value === 3 && (
+                  <TfIntersection
+                    assembly={assembly}
+                    coordinates={{
+                      chromosome: region.chrom,
+                      start: +region.start.toString().replace(/\D/g, ""),
+                      end: +region.end.toString().replace(/\D/g, ""),
+                    }}
+                  />
+                )}
+                {value === 5 && <Ortholog accession={accession} assembly={assembly} />}
+                {value === 6 && <Rampage accession={accession} assembly={assembly} chromosome={region.chrom} />}
+                {value === 7 && <GeneExpression accession={accession} assembly={assembly} genes={genes} hamburger={open} />}
+                {value === 8 && <ChromHMM accession={accession} assembly={assembly} chromosome={region.chrom} />}
+              </Grid2>
+            </Grid2>
           </Grid2>
         </Grid2>
       </Paper>

screen2.0/src/app/search/ccredetails/chromhmm.tsx

@@ -0,0 +1,111 @@
+"use client"
+import React, { useState, useEffect, cache, Fragment, useCallback } from "react"
+
+import { DataTable } from "@weng-lab/ts-ztable"
+import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import {
+  Autocomplete,
+  Box,
+  Button,
+  FormControlLabel,
+  FormGroup,
+  Slider,
+  Switch,
+  TextField,
+  Typography,
+  debounce,
+  Popover,
+  Alert,
+  AlertTitle,
+} from "@mui/material"
+import { gql, useQuery } from "@apollo/client"
+import { client } from "./client"
+import { ErrorMessage, LoadingMessage } from "../../../common/lib/utility"
+
+const CYTOBANDS_QUERY = gql`
+  query cytobands($assembly: String!, $chromosome: String) {
+    cytoband(assembly: $assembly, chromosome: $chromosome) {
+      stain
+      coordinates {
+        chromosome
+        start
+        end
+        __typename
+      }
+      __typename
+    }
+  }
+`
+
+const GENE_QUERY = gql`
+  query Gene($chromosome: String, $assembly: String!, $start: Int, $end: Int) {
+    gene(assembly: $assembly, chromosome: $chromosome, start: $start, end: $end) {
+        strand
+        name
+        id
+        transcripts {
+            coordinates {
+                start
+                end
+            }
+            name
+            id
+            exons {
+                coordinates {
+                    start
+                    end
+                }
+                UTRs {
+                    coordinates {
+                        start
+                        end
+                    }
+                }
+            }
+        }
+    }
+  }
+`
+
+export const ChromHMM = (props: {assembly: string, accession: string, chromosome: string}) => {
+  const { loading, error, data } = useQuery(GENE_QUERY, {
+    variables: {
+      assembly: props.assembly === "GRCh38",
+      accession: props.accession,
+    },
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    client,
+  })
+
+  const { loading: loading_cyto, error: error_cyto, data: data_cyto } = useQuery(CYTOBANDS_QUERY, {
+    variables: {
+      assembly: props.assembly === "GRCh38" ? "hg38" : "mm10",
+      chromosome: props.chromosome
+    }
+  })
+
+
+
+  return props.assembly === "GRCh38" ? <></> : loading ? <LoadingMessage /> : error ? <ErrorMessage error={error}/> : (
+    <Box>
+      <DataTable
+        tableTitle={`Linked cCREs in ${props.assembly == "GRCh38" ? "mm10" : "GRCh38"}`}
+        rows={data}
+        columns={[
+          {
+            header: "Tissue",
+            value: (row: any) => row.accession
+          },
+          {
+            header: "State",
+            value: (row: any) => row.chrom
+          },
+          {
+            header: "Start",
+            value: (row: any) => row.end
+          }
+        ]}></DataTable>
+    </Box>
+  )
+}