Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@NishiPhalke
NishiPhalke committed Sep 6, 2023
1 parent f73ee4a commit fc313f3
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 41 deletions.
24 changes: 12 additions & 12 deletions screen2.0/src/common/components/mainsearch/CcreAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const CcreAutoComplete = (props) => {
const [ccreAccessions, setCcreAccessions] = React.useState([])

const router = useRouter()
const onSearchChange = async (value: any) => {
const onSearchChange = async (value: string) => {
setOptions([])
const response = await fetch("https://factorbook.api.wenglab.org/graphql", {
method: "POST",
Expand All @@ -45,8 +45,8 @@ export const CcreAutoComplete = (props) => {
})
const ccreSuggestion = (await response.json()).data?.cCREQuery
if (ccreSuggestion && ccreSuggestion.length > 0) {
const r = ccreSuggestion.map((g: any) => g.accession)
const ccres = ccreSuggestion.map((g: any) => {
const r = ccreSuggestion.map((g: { accession: string}) => g.accession)
const ccres = ccreSuggestion.map((g: { accession: string, coordinates: { start: number, end: number, chromosome: string }}) => {
return {
chrom: g.coordinates.chromosome,
start: g.coordinates.start,
Expand Down Expand Up @@ -81,15 +81,15 @@ export const CcreAutoComplete = (props) => {
event.defaultPrevented = true

if (value) {
let chrom = (ccreAccessions.find((g: any) => g.ccreaccession === value) as any)?.chrom
let start = (ccreAccessions.find((g: any) => g.ccreaccession === value) as any)?.start
let end = (ccreAccessions.find((g: any) => g.ccreaccession === value) as any)?.end
let chrom = (ccreAccessions.find((g: {ccreaccession: string}) => g.ccreaccession === value))?.chrom
let start = (ccreAccessions.find((g: {ccreaccession: string}) => g.ccreaccession === value))?.start
let end = (ccreAccessions.find((g: {ccreaccession: string}) => g.ccreaccession === value))?.end
router.push(`search?assembly=${props.assembly}&chromosome=${chrom}&start=${start}&end=${end}&accession=${value}`)
}
}
}}
value={value}
onChange={(_: any, newValue: any) => {
onChange={(_, newValue: string | null) => {
setValue(newValue)
}}
inputValue={inputValue}
Expand All @@ -106,7 +106,7 @@ export const CcreAutoComplete = (props) => {
{...params}
label="Enter a cCRE accession"
InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}
// InputProps={{ style: { color: props.textColor || "black" } }}

placeholder="e.g. EH38E0001314"
fullWidth
sx={{ fieldset: { borderColor: props.textColor || "black"}, '& .MuiInput-underline:after': {
Expand Down Expand Up @@ -134,11 +134,11 @@ export const CcreAutoComplete = (props) => {
<Box component="span" sx={{ fontWeight: "regular" }}>
{option}
</Box>
{ccreAccessions && ccreAccessions.find((g: any) => g.ccreaccession === option) && (
{ccreAccessions && ccreAccessions.find((g: {ccreaccession: string }) => g.ccreaccession === option) && (
<Typography variant="body2" color="text.secondary">
{`${(ccreAccessions.find((g: any) => g.ccreaccession === option) as any)?.chrom}:${
(ccreAccessions.find((g: any) => g.ccreaccession === option) as any)?.start
}:${(ccreAccessions.find((g: any) => g.ccreaccession === option) as any)?.end}`}
{`${(ccreAccessions.find((g: {ccreaccession: string }) => g.ccreaccession === option))?.chrom}:${
(ccreAccessions.find((g: {ccreaccession: string }) => g.ccreaccession === option))?.start
}:${(ccreAccessions.find((g: {ccreaccession: string }) => g.ccreaccession === option))?.end}`}
</Typography>
)}
</Grid>
Expand Down
21 changes: 7 additions & 14 deletions screen2.0/src/common/components/mainsearch/CelltypeAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { useRouter } from "next/navigation"
import { gql, useQuery } from "@apollo/client"

export const CelltypeAutocomplete = (props) => {
const [value, setValue] = useState<any>(null)
const [value, setValue] = useState(null)
const [inputValue, setInputValue] = useState("")
const [options, setOptions] = useState<any[]>([])
const [cellTypes, setCelltypes] = useState<any[]>([])
const [options, setOptions] = useState([])
const [cellTypes, setCelltypes] = useState([])
const [loading, setLoading] = useState(false)
const router = useRouter()

Expand All @@ -22,7 +22,7 @@ export const CelltypeAutocomplete = (props) => {
return response.json()
})
.then((data) => {
//setCellTypes(data)

let byCt = Object.keys(data.byCellType).map((ct) => {
return {
value: ct,
Expand All @@ -35,8 +35,7 @@ export const CelltypeAutocomplete = (props) => {
setLoading(false)
})
.catch((error: Error) => {
// logging
// throw error
console.log(error)
})
setLoading(true)
}, [props.assembly])
Expand All @@ -56,7 +55,6 @@ export const CelltypeAutocomplete = (props) => {
onKeyDown={(event) => {
if (event.key === "Enter") {
event.defaultPrevented = true

if (value) {
let tissue = cellTypes.find((g) => g.biosample_summary === value)?.tissue
let biosample = cellTypes.find((g) => g.biosample_summary === value)?.value
Expand All @@ -74,24 +72,19 @@ export const CelltypeAutocomplete = (props) => {
}
}}
value={value}
onChange={(_: any, newValue: string | null) => {
onChange={(_, newValue: string | null) => {
setValue(newValue)
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
if (newInputValue != "") {
//debounceFn(newInputValue);
}

setInputValue(newInputValue)
}}
noOptionsText="e.g. LNCAP"
renderInput={(params) => (
<TextField
{...params}
label="Enter a celltype"
InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}
// InputProps={{ style: { color: props.textColor || "black" } }}
InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}
placeholder="e.g. LNCAP"
fullWidth
sx={{ fieldset: { borderColor: props.textColor || "black"}, '& .MuiInput-underline:after': {
Expand Down
6 changes: 2 additions & 4 deletions screen2.0/src/common/components/mainsearch/GeneAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import Grid from "@mui/material/Grid"
import Typography from "@mui/material/Typography"
import { debounce } from "@mui/material/utils"
import { useRouter } from "next/navigation"
import SearchIcon from "@mui/icons-material/Search"
import { IconButton, InputAdornment, InputBaseProps, createTheme } from "@mui/material"
export type QueryResponse = [number, string[], any, [string, string, string, string, string, string][], string[]]

const GENE_AUTOCOMPLETE_QUERY = `
Expand All @@ -25,7 +23,7 @@ query ($assembly: String!, $name_prefix: [String!], $limit: Int) {
`

export const GeneAutoComplete = (props) => {
const [value, setValue] = React.useState<any>(null)
const [value, setValue] = React.useState(null)
const [inputValue, setInputValue] = React.useState("")
const [options, setOptions] = React.useState<string[]>([])
const [geneids, setGeneIds] = React.useState<{ chrom: string; start: number; end: number; id: string; name: string }[]>([])
Expand Down Expand Up @@ -132,7 +130,7 @@ export const GeneAutoComplete = (props) => {
}
}}
value={value}
onChange={(_: any, newValue: string | null) => {
onChange={(_, newValue: string | null) => {
setValue(newValue)
}}
inputValue={inputValue}
Expand Down
21 changes: 10 additions & 11 deletions screen2.0/src/common/components/mainsearch/SnpAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ query snpAutocompleteQuery($snpid: String!, $assembly: String!) {
}
`
export const SnpAutoComplete = (props) => {
const [value, setValue] = React.useState<any>(null)
const [value, setValue] = React.useState(null)
const [inputValue, setInputValue] = React.useState("")
const [options, setOptions] = React.useState<any[]>([])
const [snpids, setSnpIds] = React.useState<any[]>([])
const [options, setOptions] = React.useState([])
const [snpids, setSnpIds] = React.useState([])
const router = useRouter()

const onSearchChange = async (value: any) => {
const onSearchChange = async (value: string) => {
setOptions([])
const response = await fetch("https://ga.staging.wenglab.org/graphql", {
method: "POST",
Expand All @@ -41,8 +41,8 @@ export const SnpAutoComplete = (props) => {
})
const snpSuggestion = (await response.json()).data?.snpAutocompleteQuery
if (snpSuggestion && snpSuggestion.length > 0) {
const r = snpSuggestion.map((g: any) => g.id)
const snp = snpSuggestion.map((g: any) => {
const r = snpSuggestion.map((g: {id: string}) => g.id)
const snp = snpSuggestion.map((g: {id: string, coordinates: {chromosome:string, start: number, end: number} }) => {
return {
chrom: g.coordinates.chromosome,
start: g.coordinates.start,
Expand All @@ -56,7 +56,7 @@ export const SnpAutoComplete = (props) => {
setOptions([])
setSnpIds([])
}
//setgeneCards([]);

}

const debounceFn = React.useCallback(debounce(onSearchChange, 500), [])
Expand Down Expand Up @@ -88,11 +88,11 @@ export const SnpAutoComplete = (props) => {
}
}}
value={value}
onChange={(_: any, newValue: string | null) => {
onChange={(_, newValue: string | null) => {
setValue(newValue)
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
onInputChange={(_, newInputValue) => {
if (newInputValue != "") {
debounceFn(newInputValue)
}
Expand All @@ -104,8 +104,7 @@ export const SnpAutoComplete = (props) => {
<TextField
{...params}
label="Enter a snp rsId"
InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}
// InputProps={{ style: { color: props.textColor || "black" } }}
InputLabelProps={{ shrink: true, style: { color: props.textColor || "black" } }}
placeholder="e.g. rs11669173"
fullWidth
sx={{ fieldset: { borderColor: props.textColor || "black"}, '& .MuiInput-underline:after': {
Expand Down

0 comments on commit fc313f3

Please sign in to comment.