weng-lab · mlacadie · Oct 21, 2024 · Oct 21, 2024 · Oct 21, 2024
diff --git a/screen2.0/package.json b/screen2.0/package.json
@@ -9,8 +9,8 @@
     "lint": "next lint",
     "prettier": "prettier --write src",
     "export": "next export",
-    "generate-types": "graphql-codegen",
-    "generate-types -w": "graphql-codegen -w"
+    "gen-types": "graphql-codegen",
+    "gen-types -w": "graphql-codegen -w"
   },
   "lint-staged": {
     "linters": {

diff --git a/screen2.0/src/app/_mainsearch/celltypeautocomplete.tsx b/screen2.0/src/app/_mainsearch/celltypeautocomplete.tsx
@@ -43,7 +43,7 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
           setValueRegion("")
         }
       } else {
-        region = { chromosome: 'chr11', start: "5205263", end: "5381894" }
+        region = { chromosome: 'chr12', start: "53380176", end: "53416446" }
         return (
           `/search?assembly=${props.assembly}&chromosome=${region.chromosome}&start=${Math.max(0, Number(region.start))}&end=${region.end}&BiosampleTissue=${tissue}&BiosampleSummary=${biosample_summary}&Biosample=${biosample}`
         )
@@ -120,7 +120,7 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
         variant="outlined"
         InputLabelProps={{ shrink: true, style: props.header ? { color: "white" } : { color: "black" } }}
         label="Enter a genomic region"
-        placeholder={`chr11:${(5205263).toLocaleString()}-${(5381894).toLocaleString()}`}
+        placeholder={`chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`}
         value={valueRegion}
         onChange={(event: { target: { value: SetStateAction<string> } }) => {
           setValueRegion(event.target.value)
@@ -130,7 +130,7 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
             window.open(handleSubmit(), "_self")
           }
           if (event.key === "Tab" && !valueRegion) {
-            const defaultGenomicRegion = `chr11:${(5205263).toLocaleString()}-${(5381894).toLocaleString()}`
+            const defaultGenomicRegion = `chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`
             setValueRegion(defaultGenomicRegion)
           }
         }}

diff --git a/screen2.0/src/app/_mainsearch/genomicregion.tsx b/screen2.0/src/app/_mainsearch/genomicregion.tsx
@@ -22,7 +22,7 @@ import { parseGenomicRegion } from "./parsegenomicregion"
 
 const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean }) => {
   const [value, setValue] = useState("")
-  const [chromosome, setChromosome] = useState("11")
+  const [chromosome, setChromosome] = useState("12")
   const [start, setStart] = useState("")
   const [end, setEnd] = useState("")
   const [inputType, setInputType] = useState("UCSC")
@@ -172,10 +172,10 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
     end: string
   ): string {
     if (inputType === "Separated") {
-      return `/search?assembly=${assembly}&chromosome=${"chr" + chromosome}&start=${start.replace(new RegExp(",", "g"), "") ?? "5205263"}&end=${end.replace(new RegExp(",", "g"), "") ?? "5381894"}`
+      return `/search?assembly=${assembly}&chromosome=${"chr" + chromosome}&start=${start.replace(new RegExp(",", "g"), "") ?? "53380176"}&end=${end.replace(new RegExp(",", "g"), "") ?? "53416446"}`
     } else {
       if (!value) {
-        return `/search?assembly=${assembly}&chromosome=chr11&start=5205263&end=5381894`
+        return `/search?assembly=${assembly}&chromosome=chr12&start=53380176&end=53416446`
       }
       try {
         const region = parseGenomicRegion(value)
@@ -259,9 +259,9 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
               </Typography>
               <TextField
                 variant="outlined"
-                InputLabelProps={{ shrink: true }}
+                slotProps={{inputLabel: { shrink: true }}}
                 label="Start"
-                placeholder="5205263"
+                placeholder="53380176"
                 value={start}
                 onChange={(event: { target: { value: SetStateAction<string> } }) => {
                   setStart(event.target.value)
@@ -272,7 +272,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
                     window.open(url, "_self")
                   }
                   if (event.key === "Tab" && !start) {
-                    setStart("5205263")
+                    setStart("53380176")
                   }
                 }}
                 sx={
@@ -296,9 +296,9 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
               <Typography sx={{ justifySelf: "center" }}>–</Typography>
               <TextField
                 variant="outlined"
-                InputLabelProps={{ shrink: true }}
+                slotProps={{inputLabel: {shrink: true}}}
                 label="End"
-                placeholder="5381894"
+                placeholder="53416446"
                 value={end}
                 onChange={(event: { target: { value: SetStateAction<string> } }) => {
                   setEnd(event.target.value)
@@ -309,7 +309,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
                     window.open(url, "_self")
                   }
                   if (event.key === "Tab" && !end) {
-                    setEnd("5381894")
+                    setEnd("53416446")
                   }
                 }}
                 sx={
@@ -335,14 +335,17 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
             //UCSC Input
             (<TextField
               variant="outlined"
-              InputLabelProps={{
-                shrink: true,
-                htmlFor: "region-input",
-                style: error ? null : props.header ? { color: "white" } : { color: "black" },
+              slotProps={{
+                inputLabel: {
+                  shrink: true,
+                  htmlFor: "region-input",
+                  style: error ? null : props.header ? { color: "white" } : { color: "black" },
+                },
+                input: props.header ? { style: { color: "white" } } : {}
               }}
               id="region-input"
               label="Enter a genomic region"
-              placeholder={`chr11:${(5205263).toLocaleString()}-${(5381894).toLocaleString()}`}
+              placeholder={`chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`}
               value={value}
               onChange={handleChange}
               onKeyDown={(event) => {
@@ -352,11 +355,10 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
                   }
                 }
                 if (event.key === "Tab" && !value) {
-                  const defaultGenomicRegion = `chr11:${(5205263).toLocaleString()}-${(5381894).toLocaleString()}`
+                  const defaultGenomicRegion = `chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`
                   setValue(defaultGenomicRegion)
                 }
               }}
-              InputProps={props.header ? { style: { color: "white" } } : {}}
               sx={{
                 mr: "1rem",
                 minWidth: "16rem",

diff --git a/screen2.0/src/app/_mainsearch/queries.ts b/screen2.0/src/app/_mainsearch/queries.ts
@@ -15,7 +15,7 @@ query cCREQuery($accession_prefix: [String!], $limit: Int, $assembly: String!) {
 
 
 export const GENE_AUTOCOMPLETE_QUERY = `
-query ($assembly: String!, $name_prefix: [String!], $limit: Int, $version: Int) {
+query geneAutocomplete($assembly: String!, $name_prefix: [String!], $limit: Int, $version: Int) {
     gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit, version: $version) {
       name
       id

diff --git a/screen2.0/src/app/applets/gene-expression/queries.ts b/screen2.0/src/app/applets/gene-expression/queries.ts
@@ -21,7 +21,7 @@ query geneexpression($assembly: String!, $accessions: [String], $gene_id: [Strin
 }
  `
 export const GENE_QUERY = gql`
- query ($assembly: String!, $name: [String!], $limit: Int, $version: Int) {
+ query geneAutocomplete($assembly: String!, $name: [String!], $limit: Int, $version: Int) {
    gene(assembly: $assembly, name: $name, limit: $limit, version: $version) {
      name
      id

diff --git a/screen2.0/src/app/downloads/downloadrange.tsx b/screen2.0/src/app/downloads/downloadrange.tsx
@@ -44,7 +44,7 @@ function CircularProgressWithLabel(
  */
 export const DownloadRange: React.FC = () => {
   const [assembly, setAssembly] = useState<"GRCh38" | "mm10">("GRCh38")
-  const [inputValue, setInputValue] = useState<string>('chr11:5205263-5381894')
+  const [inputValue, setInputValue] = useState<string>('chr12:53380176-53416446')
   const [selectedBiosample, setSelectedBiosample] = useState<RegistryBiosample>(null)
   const [bedLoadingPercent, setBedLoadingPercent] = useState<number>(null)
   //Used to disable assay checkboxes
@@ -141,9 +141,9 @@ export const DownloadRange: React.FC = () => {
         </FormControl>
         <TextField
           variant="outlined"
-          InputLabelProps={{ shrink: true }}
+          slotProps={{inputLabel: {shrink: true}}}
           label="Enter a genomic region"
-          placeholder={`chr11:${(5205263).toLocaleString()}-${(5381894).toLocaleString()}`}
+          placeholder={`chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`}
           value={inputValue}
           fullWidth
           onChange={handleChange}

diff --git a/screen2.0/src/app/search/_ccredetails/configuregb.tsx b/screen2.0/src/app/search/_ccredetails/configuregb.tsx
@@ -11,7 +11,7 @@ import BiosampleTables from "../../_biosampleTables/BiosampleTables";
 
 
 const CREATE_TRACKHUB_QUERY = `
-  query ($assembly: String!,$uuid: String!,$celltypes: [CellTypeInput]!) {
+  query createTrackhub($assembly: String!,$uuid: String!,$celltypes: [CellTypeInput]!) {
     createTrackhubQuery(uuid: $uuid, celltypes: $celltypes, assembly:$assembly)
   }  
 `

diff --git a/screen2.0/src/app/search/_ccredetails/linkedccres.tsx b/screen2.0/src/app/search/_ccredetails/linkedccres.tsx
@@ -15,7 +15,12 @@ type orthologRow = {
   stop: number
 }
 
-export const Ortholog = ({ accession, assembly }) => {
+type OrthologTabProps = {
+  accession: string,
+  assembly: "GRCh38" | "mm10"
+}
+
+export const Ortholog = ({ accession, assembly }: OrthologTabProps) => {
   const { loading, error, data } = useQuery(ORTHOLOG_QUERY, {
     variables: {
       assembly: assembly === "GRCh38" ? "grch38" : "mm10",
@@ -28,7 +33,7 @@ export const Ortholog = ({ accession, assembly }) => {
 
   let ortholog: orthologRow[] = []
   if (data) {
-    for (let ccre of data.orthologQuery.ortholog) {
+    for (let ccre of data.orthologQuery[0].ortholog) {
       ortholog.push({
         accession: ccre.accession,
         chrom: ccre.chromosome,

diff --git a/screen2.0/src/app/search/_ccredetails/nearbygenomicfeatures.tsx b/screen2.0/src/app/search/_ccredetails/nearbygenomicfeatures.tsx
@@ -10,6 +10,19 @@ import { LoadingMessage } from "../../../common/lib/utility"
 import { calcDistRegionToPosition, calcDistRegionToRegion } from "./utils"
 import { calcDistToTSS } from "./utils"
 import GeneLink from "../../_utility/GeneLink"
+import { NearbyGenomicFeaturesQuery, NearbyGenomicFeaturesNoSnPsQuery } from "../../../graphql/__generated__/graphql"
+
+type SNP = {
+  assembly: "mm10" | "GRCh38";
+  accession: string;
+  chrom: string;
+  cre_start: number;
+  cre_end: number;
+  distance: number;
+  name: string;
+  snp_start: number;
+  snp_end: number;
+};
 
 export const NearByGenomicFeatures: React.FC<{
   assembly: "mm10" | "GRCh38"
@@ -18,12 +31,12 @@ export const NearByGenomicFeatures: React.FC<{
   handleOpencCRE: (row: any) => void
 }> = ({ assembly, accession, coordinates, handleOpencCRE }) => {
 
-  const { loading, data } = useQuery(
-    assembly.toLowerCase() === "mm10" ? NEARBY_GENOMIC_FEATURES_NOSNPS_QUERY : NEARBY_GENOMIC_FEATURES_QUERY,
+  const { loading: loadingHuman, data: dataHuman } = useQuery(
+    NEARBY_GENOMIC_FEATURES_QUERY,
     {
       variables:
-        assembly.toLowerCase() === "mm10"
-          ? {
+         {
+            a: "hg38",
             b: assembly.toLowerCase(),
             c: assembly.toLowerCase(),
             coordinates: {
@@ -34,10 +47,19 @@ export const NearByGenomicFeatures: React.FC<{
             chromosome: coordinates.chromosome,
             start: coordinates.start - 1000000,
             end: coordinates.end + 1000000,
-            version: 25
-          }
-          : {
-            a: "hg38",
+            version: 40
+          },
+      skip: assembly !== "GRCh38",
+      fetchPolicy: "cache-and-network",
+      nextFetchPolicy: "cache-first",
+      client,
+    }
+  )
+
+  const { loading: loadingMouse, data: dataMouse } = useQuery(
+    NEARBY_GENOMIC_FEATURES_NOSNPS_QUERY,
+    {
+      variables:{
             b: assembly.toLowerCase(),
             c: assembly.toLowerCase(),
             coordinates: {
@@ -48,14 +70,18 @@ export const NearByGenomicFeatures: React.FC<{
             chromosome: coordinates.chromosome,
             start: coordinates.start - 1000000,
             end: coordinates.end + 1000000,
-            version: 40
+            version: 25
           },
+      skip: assembly !== "mm10",
       fetchPolicy: "cache-and-network",
       nextFetchPolicy: "cache-first",
       client,
     }
   )
 
+  const data = (assembly === "GRCh38") ? dataHuman : dataMouse
+  const loading = (assembly === "GRCh38") ? loadingHuman : loadingMouse
+
   let genes =
     data &&
     data.gene &&
@@ -66,7 +92,7 @@ export const NearByGenomicFeatures: React.FC<{
         chrom: g.coordinates.chromosome,
         start: g.coordinates.start,
         stop: g.coordinates.end,
-        distance: calcDistToTSS({...coordinates, chrom: coordinates.chromosome}, g.transcripts, g.strand)
+        distance: calcDistToTSS({...coordinates, chrom: coordinates.chromosome}, g.transcripts, g.strand as "+" | "-")
       }
     })
   let ccres =
@@ -81,10 +107,11 @@ export const NearByGenomicFeatures: React.FC<{
         end: c.coordinates.end
       }
     })
-  let snps =
-    data &&
-    data.snpQuery &&
-    data.snpQuery.map((s) => {
+
+  let snps: SNP[] | undefined;
+
+  if (assembly === "GRCh38" && data && (data as NearbyGenomicFeaturesQuery).snpQuery) {
+    snps = (data as NearbyGenomicFeaturesQuery).snpQuery.map((s) => {
       return {
         assembly,
         accession: accession,
@@ -95,20 +122,28 @@ export const NearByGenomicFeatures: React.FC<{
         name: s.id,
         snp_start: s.coordinates.start,
         snp_end: s.coordinates.end,
-      }
-    })
+      };
+    });
+  }
+
   return (<>
     {loading || !data ? (
       <LoadingMessage />
     ) : (
       <>
         <Grid container spacing={5}>
           <Grid
-            size={{
-              xs: 12,
-              md: 6,
-              xl: 4
-            }}>
+            size={
+              assembly === "GRCh38" ? {
+                xs: 12,
+                md: 6,
+                xl: 4
+              } : {
+                xs: 12,
+                md: 6,
+              }
+            }
+          >
             {
               <DataTable
                 columns={[
@@ -134,11 +169,17 @@ export const NearByGenomicFeatures: React.FC<{
             }
           </Grid>
           <Grid
-            size={{
-              xs: 12,
-              md: 6,
-              xl: 4
-            }}>
+            size={
+              assembly === "GRCh38" ? {
+                xs: 12,
+                md: 6,
+                xl: 4
+              } : {
+                xs: 12,
+                md: 6,
+              }
+            }
+          >
             {
               <DataTable
                 columns={[
@@ -173,6 +214,7 @@ export const NearByGenomicFeatures: React.FC<{
               />
             }
           </Grid>
+          {assembly === "GRCh38" && 
           <Grid
             size={{
               xs: 12,
@@ -211,7 +253,7 @@ export const NearByGenomicFeatures: React.FC<{
                 sortDescending={true}
               />
             }
-          </Grid>
+          </Grid>}
         </Grid>
       </>
     )}