fixed review comments

weng-lab · Sep 6, 2023 · e70797d · e70797d
1 parent f3c3007
commit e70797d
Show file tree

Hide file tree

Showing 17 changed files with 155 additions and 291 deletions.
diff --git a/screen2.0/package.json b/screen2.0/package.json
@@ -41,8 +41,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.3",
     "@mui/lab": "^5.0.0-alpha.137",
-    "@mui/material": "^5.14.2",
-    "@mui/styles": "^5.14.5",
+    "@mui/material": "^5.14.2",    
     "@types/node": "^20.4.9",
     "@types/react": "^18.2.19",
     "@types/react-dom": "18.2.7",

diff --git a/screen2.0/src/app/applets/gene-expression/gene-autocomplete.tsx b/screen2.0/src/app/applets/gene-expression/gene-autocomplete.tsx
@@ -8,7 +8,7 @@ import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import { gene } from "./types"
 import { QueryResponse } from "../../../../types/types"
 import { Dispatch, SetStateAction } from "react"
-
+import Config from "../../../config.json"
 const GENE_AUTOCOMPLETE_QUERY = `
   query ($assembly: String!, $name_prefix: [String!], $limit: Int) {
     gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit) {
@@ -66,7 +66,7 @@ export default function GeneAutoComplete(props: {
   // gene list
   const onSearchChange = async (value: string) => {
     setOptions([])
-    const response = await fetch("https://ga.staging.wenglab.org/graphql", {
+    const response = await fetch(Config.API.GraphqlAPI, {
       method: "POST",
       body: JSON.stringify({
         query: GENE_AUTOCOMPLETE_QUERY,

diff --git a/screen2.0/src/app/search/ccredetails/client.ts b/screen2.0/src/app/search/ccredetails/client.ts
@@ -1,5 +1,6 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client"
+import Config from "../../../config.json"
 export const client = new ApolloClient({
-  uri: "https://factorbook.api.wenglab.org/graphql",
+  uri: Config.API.CcreAPI,
   cache: new InMemoryCache(),
 })
diff --git a/screen2.0/src/app/search/gbview/biosampletracks.tsx b/screen2.0/src/app/search/gbview/biosampletracks.tsx
@@ -1,18 +1,13 @@
-import { gql, useQuery } from "@apollo/client"
+import { useQuery } from "@apollo/client"
 import { associateBy } from "queryz"
-import { BigWigData, BigBedData, BigZoomData } from "bigwig-reader"
+
 import React, { RefObject, useEffect, useMemo, useState } from "react"
 import { EmptyTrack } from "umms-gb"
-import { RequestError } from "umms-gb/dist/components/tracks/trackset/types"
-import { ValuedPoint } from "umms-gb/dist/utils/types"
 import { client } from "../ccredetails/client"
 import { TitledTrack } from "./defaulttracks"
+import { BIOSAMPLE_QUERY, BIG_QUERY } from "./queries"
+import { GenomicRange, BigQueryResponse } from "./types"
 
-type GenomicRange = {
-  chromosome?: string
-  start: number
-  end: number
-}
 
 type BiosampleTracksProps = {
   tracks: [string, string, string][]
@@ -29,52 +24,13 @@ type BiosampleTracksProps = {
   onSettingsClick?: () => void
 }
 
-export type BigResponseData = BigWigData[] | BigBedData[] | BigZoomData[] | ValuedPoint[]
-
-export type BigResponse = {
-  data: BigResponseData
-  error: RequestError
-}
-
-export type BigQueryResponse = {
-  bigRequests: BigResponse[]
-}
-export const BIG_QUERY = gql`
-  query BigRequests($bigRequests: [BigRequest!]!) {
-    bigRequests(requests: $bigRequests) {
-      data
-      error {
-        errortype
-        message
-      }
-    }
-  }
-`
-
 export const COLOR_MAP: Map<string, string> = new Map([
   ["DNase", "#06da93"],
   ["H3K4me3", "#ff0000"],
   ["H3K27ac", "#ffcd00"],
   ["CTCF", "#00b0d0"],
 ])
 
-export const BIOSAMPLE_QUERY = gql`
-  query q($assembly: String!) {
-    ccREBiosampleQuery(assembly: $assembly) {
-      biosamples {
-        name
-        dnase: experimentAccession(assay: "DNase")
-        h3k4me3: experimentAccession(assay: "H3K4me3")
-        h3k27ac: experimentAccession(assay: "H3K27ac")
-        ctcf: experimentAccession(assay: "CTCF")
-        dnase_signal: fileAccession(assay: "DNase")
-        h3k4me3_signal: fileAccession(assay: "H3K4me3")
-        h3k27ac_signal: fileAccession(assay: "H3K27ac")
-        ctcf_signal: fileAccession(assay: "CTCF")
-      }
-    }
-  }
-`
 export const BiosampleTracks: React.FC<BiosampleTracksProps> = (props) => {
   const [cTracks, setTracks] = useState<[string, string, string][]>(props.tracks)
 

diff --git a/screen2.0/src/app/search/gbview/defaulttracks.tsx b/screen2.0/src/app/search/gbview/defaulttracks.tsx
@@ -1,24 +1,13 @@
-import { gql, useQuery } from "@apollo/client"
+import {  useQuery } from "@apollo/client"
 import { associateBy } from "queryz"
-import { BigWigData, BigBedData, BigZoomData } from "bigwig-reader"
+import { BigWigData, BigBedData } from "bigwig-reader"
 import React, { RefObject, useEffect, useMemo, useState } from "react"
 import { DenseBigBed, EmptyTrack, FullBigWig } from "umms-gb"
-import { RequestError } from "umms-gb/dist/components/tracks/trackset/types"
-import { ValuedPoint } from "umms-gb/dist/utils/types"
 import { client } from "../ccredetails/client"
 import CCRETooltip from "./ccretooltip"
+import { BIG_QUERY } from "./queries"
+import { GenomicRange, BigQueryResponse, BigResponseData } from "./types"
 
-export const BIG_QUERY = gql`
-  query BigRequests($bigRequests: [BigRequest!]!) {
-    bigRequests(requests: $bigRequests) {
-      data
-      error {
-        errortype
-        message
-      }
-    }
-  }
-`
 
 export const COLOR_MAP: Map<string, string> = new Map([
   ["Aggregated DNase-seq signal, all Registry biosamples", "#06da93"],
@@ -27,23 +16,6 @@ export const COLOR_MAP: Map<string, string> = new Map([
   ["Aggregated CTCF ChIP-seq signal, all Registry biosamples", "#00b0d0"],
 ])
 
-type GenomicRange = {
-  chromosome?: string
-  start: number
-  end: number
-}
-
-export type BigResponseData = BigWigData[] | BigBedData[] | BigZoomData[] | ValuedPoint[]
-
-export type BigResponse = {
-  data: BigResponseData
-  error: RequestError
-}
-
-export type BigQueryResponse = {
-  bigRequests: BigResponse[]
-}
-
 type DefaultTracksProps = {
   domain: GenomicRange
   onHeightChanged?: (i: number) => void

diff --git a/screen2.0/src/app/search/gbview/queries.ts b/screen2.0/src/app/search/gbview/queries.ts
@@ -0,0 +1,30 @@
+import { gql } from "@apollo/client"
+export const BIG_QUERY = gql`
+  query BigRequests($bigRequests: [BigRequest!]!) {
+    bigRequests(requests: $bigRequests) {
+      data
+      error {
+        errortype
+        message
+      }
+    }
+  }
+`
+
+export const BIOSAMPLE_QUERY = gql`
+  query q($assembly: String!) {
+    ccREBiosampleQuery(assembly: $assembly) {
+      biosamples {
+        name
+        dnase: experimentAccession(assay: "DNase")
+        h3k4me3: experimentAccession(assay: "H3K4me3")
+        h3k27ac: experimentAccession(assay: "H3K27ac")
+        ctcf: experimentAccession(assay: "CTCF")
+        dnase_signal: fileAccession(assay: "DNase")
+        h3k4me3_signal: fileAccession(assay: "H3K4me3")
+        h3k27ac_signal: fileAccession(assay: "H3K27ac")
+        ctcf_signal: fileAccession(assay: "CTCF")
+      }
+    }
+  }
+`
diff --git a/screen2.0/src/app/search/gbview/types.ts b/screen2.0/src/app/search/gbview/types.ts
@@ -0,0 +1,21 @@
+import { BigWigData, BigBedData, BigZoomData } from "bigwig-reader"
+import { RequestError } from "umms-gb/dist/components/tracks/trackset/types"
+import { ValuedPoint } from "umms-gb/dist/utils/types"
+
+
+export type BigResponseData = BigWigData[] | BigBedData[] | BigZoomData[] | ValuedPoint[]
+
+export type BigResponse = {
+  data: BigResponseData
+  error: RequestError
+}
+
+export type BigQueryResponse = {
+  bigRequests: BigResponse[]
+}
+
+export type GenomicRange = {
+    chromosome?: string
+    start: number
+    end: number
+  }
diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx
@@ -4,7 +4,6 @@ import { MainQuery, getGlobals, linkedGenesQuery } from "../../common/lib/querie
 import { ApolloQueryResult } from "@apollo/client"
 import { cCREData, CellTypeData, MainQueryParams, MainResultTableRow, MainResultTableRows } from "./types"
 import { checkTrueFalse, passesCriteria } from "../../common/lib/filter-helpers"
-import { LinkedGenes } from "./ccredetails/linkedgenes"
 
 export default async function Search({
   // Object from URL, see https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional

diff --git a/screen2.0/src/common/components/mainsearch/CcreAutocomplete.tsx b/screen2.0/src/common/components/mainsearch/CcreAutocomplete.tsx
@@ -7,22 +7,10 @@ import Grid from "@mui/material/Grid"
 import Typography from "@mui/material/Typography"
 import { debounce } from "@mui/material/utils"
 import { useRouter } from "next/navigation"
+import { CCRE_AUTOCOMPLETE_QUERY } from "./queries"
+import Config from "../../../config.json"
 
-///search?assembly=GRCh38&chromosome=chr11&start=5205263&end=5381894&accession=EH38E1516972
-
-const CCRE_AUTOCOMPLETE_QUERY = `
-query cCREQuery($accession_prefix: [String!], $limit: Int, $assembly: String!) {
-    cCREQuery(accession_prefix: $accession_prefix, assembly: $assembly, limit: $limit) {
-        accession
-      coordinates {
-        start
-        end
-        chromosome
-      }
-    }
-}
-`
-export const CcreAutoComplete = (props) => {
+export const CcreAutoComplete: React.FC<{assembly: string, textColor: string }>  = (props) => {
   const [value, setValue] = useState(null)
   const [inputValue, setInputValue] = useState("")
   const [options, setOptions] = useState([])
@@ -31,14 +19,14 @@ export const CcreAutoComplete = (props) => {
   const router = useRouter()
   const onSearchChange = async (value: string) => {
     setOptions([])
-    const response = await fetch("https://factorbook.api.wenglab.org/graphql", {
+    const response = await fetch(Config.API.CcreAPI, {
       method: "POST",
       body: JSON.stringify({
         query: CCRE_AUTOCOMPLETE_QUERY,
         variables: {
           assembly: props.assembly,
           accession_prefix: [value],
-          limit: 100,
+          limit: 100
         },
       }),
       headers: { "Content-Type": "application/json" },
@@ -100,7 +88,7 @@ export const CcreAutoComplete = (props) => {
 
             setInputValue(newInputValue)
           }}
-          noOptionsText="e.g. EH38E0001314"
+          noOptionsText={props.assembly==="mm10"? "e.g EM10E0000207": "e.g. EH38E0001314"}
           renderInput={(params) => (
             <TextField
               {...params}

diff --git a/screen2.0/src/common/components/mainsearch/CelltypeAutocomplete.tsx b/screen2.0/src/common/components/mainsearch/CelltypeAutocomplete.tsx
@@ -4,25 +4,23 @@ import TextField from "@mui/material/TextField"
 import Autocomplete from "@mui/material/Autocomplete"
 import Grid from "@mui/material/Grid"
 import Typography from "@mui/material/Typography"
-import { debounce } from "@mui/material/utils"
 import { useRouter } from "next/navigation"
-import { gql, useQuery } from "@apollo/client"
+import Config from "../../../config.json"
 
-export const CelltypeAutocomplete = (props) => {
+export const CelltypeAutocomplete: React.FC<{assembly: string, textColor: string }> = (props) => {
   const [value, setValue] = useState(null)
   const [inputValue, setInputValue] = useState("")
   const [options, setOptions] = useState([])
   const [cellTypes, setCelltypes] = useState([])
-  const [loading, setLoading] = useState(false)
+
   const router = useRouter()
-
+  
   useEffect(() => {
-    fetch("https://downloads.wenglab.org/databyct.json")
+    fetch(props.assembly.toLowerCase()==="grch38" ? Config.API.HumanGlobals : Config.API.MouseGlobals)
       .then((response) => {
         return response.json()
       })
-      .then((data) => {
-
+      .then((data) => {        
         let byCt = Object.keys(data.byCellType).map((ct) => {
           return {
             value: ct,
@@ -31,19 +29,19 @@ export const CelltypeAutocomplete = (props) => {
           }
         })
         setOptions(byCt.map((ct) => ct.biosample_summary))
-        setCelltypes(byCt)
-        setLoading(false)
+        setCelltypes(byCt)        
       })
       .catch((error: Error) => {
         console.log(error)
       })
-    setLoading(true)
+
   }, [props.assembly])
 
   return (
     <Grid container sx={{ mr: "1em", ml: "1em" }}>
       <Grid item sm={5.5} md={5.5} lg={5.5} xl={5.5}>
         <Autocomplete
+          freeSolo
           id="celltype-autocomplete"
           sx={{ width: 300, paper: { height: 200 } }}
           options={options}
@@ -56,6 +54,7 @@ export const CelltypeAutocomplete = (props) => {
             if (event.key === "Enter") {
               event.defaultPrevented = true
               if (value) {
+                console.log(value,"ct")
                 let tissue = cellTypes.find((g) => g.biosample_summary === value)?.tissue
                 let biosample = cellTypes.find((g) => g.biosample_summary === value)?.value
                 let biosample_summary = value.split(":")[0]
@@ -76,16 +75,17 @@ export const CelltypeAutocomplete = (props) => {
             setValue(newValue)
           }}
           inputValue={inputValue}
-          onInputChange={(event, newInputValue) => {
+          onInputChange={(_, newInputValue) => {
+            setValue(newInputValue)
             setInputValue(newInputValue)
           }}
-          noOptionsText="e.g. LNCAP"
+          noOptionsText={props.assembly==="mm10" ? "strain B6NCrl cortical plate tissue male adult (8 weeks)" :"e.g. LNCAP"}
           renderInput={(params) => (
             <TextField
               {...params}
               label="Enter a celltype"
               InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}             
-              placeholder="e.g. LNCAP"
+              placeholder={props.assembly==="mm10" ? "strain B6NCrl cortical plate tissue male adult (8 weeks)" :"e.g. LNCAP"}
               fullWidth
               sx={{ fieldset: { borderColor: props.textColor || "black"}, '& .MuiInput-underline:after': {
                 borderBottomColor: props.textColor || "black",