Skip to content

Commit cb717bf

Browse files
JaiiR320JaiiR320
committed
Added iCRE flag on cCRE query
1 parent 8b4540e commit cb717bf

File tree

5 files changed

+136
-102
lines changed

5 files changed

+136
-102
lines changed

‎src/components/Autocomplete/Autocomplete.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
const Search: React.FC<GenomeSearchProps> = ({
3636
queries,
3737
assembly,
38+
showiCREFlag,
3839
geneLimit,
3940
snpLimit,
4041
icreLimit,
@@ -77,7 +78,7 @@ const Search: React.FC<GenomeSearchProps> = ({
7778
isFetching: ccreFetching,
7879
} = useQuery({
7980
queryKey: ["ccres", inputValue],
80-
queryFn: () => getCCREs(inputValue, assembly, ccreLimit || 3),
81+
queryFn: () => getCCREs(inputValue, assembly, ccreLimit || 3, showiCREFlag || false),
8182
enabled: false,
8283
});
8384

@@ -142,8 +143,9 @@ const Search: React.FC<GenomeSearchProps> = ({
142143
);
143144
}
144145
if (ccreData && searchCCRE && inputValue.toLowerCase().startsWith("eh")) {
146+
console.log(ccreData.data.cCREAutocompleteQuery)
145147
resultsList.push(
146-
...ccreResultList(ccreData.data.cCREQuery, ccreLimit || 3)
148+
...ccreResultList(ccreData.data.cCREAutocompleteQuery, ccreLimit || 3)
147149
);
148150
}
149151
if (snpData && searchSnp && inputValue.toLowerCase().startsWith("rs")) {

‎src/components/Autocomplete/queries.ts

+113-86
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,110 @@
11
export const SNP_AUTOCOMPLETE_QUERY = `
2-
query suggestions($assembly: String!, $snpid: String!) {
3-
snpAutocompleteQuery(assembly: $assembly, snpid: $snpid) {
4-
id
5-
coordinates {
6-
chromosome
7-
start
8-
end
9-
}
10-
}
11-
}`;
2+
query suggestions($assembly: String!, $snpid: String!) {
3+
snpAutocompleteQuery(assembly: $assembly, snpid: $snpid) {
4+
id
5+
coordinates {
6+
chromosome
7+
start
8+
end
9+
}
10+
}
11+
}
12+
`;
1213

1314
export const GENE_AUTOCOMPLETE_QUERY = `
14-
query Genes(
15-
$id: [String]
16-
$name: [String]
17-
$strand: String
18-
$chromosome: String
19-
$start: Int
20-
$end: Int
21-
$gene_type: String
22-
$havana_id: String
23-
$name_prefix: [String!]
24-
$limit: Int
25-
$assembly: String!
26-
) {
27-
gene(
28-
id: $id
29-
name: $name
30-
strand: $strand
31-
chromosome: $chromosome
32-
start: $start
33-
end: $end
34-
gene_type: $gene_type
35-
havana_id: $havana_id
36-
name_prefix: $name_prefix
37-
limit: $limit
38-
assembly: $assembly
39-
orderby: "name"
40-
) {
41-
id
42-
name
43-
coordinates {
44-
chromosome
45-
start
46-
end
47-
}
48-
}
49-
}
15+
query Genes(
16+
$id: [String]
17+
$name: [String]
18+
$strand: String
19+
$chromosome: String
20+
$start: Int
21+
$end: Int
22+
$gene_type: String
23+
$havana_id: String
24+
$name_prefix: [String!]
25+
$limit: Int
26+
$assembly: String!
27+
) {
28+
gene(
29+
id: $id
30+
name: $name
31+
strand: $strand
32+
chromosome: $chromosome
33+
start: $start
34+
end: $end
35+
gene_type: $gene_type
36+
havana_id: $havana_id
37+
name_prefix: $name_prefix
38+
limit: $limit
39+
assembly: $assembly
40+
orderby: "name"
41+
) {
42+
id
43+
name
44+
coordinates {
45+
chromosome
46+
start
47+
end
48+
}
49+
}
50+
}
5051
`;
5152

5253
export const RESOLVE_QUERY = `
53-
query q(
54-
$id: String!
55-
$assembly: String!
56-
) {
57-
resolve(
58-
id: $id
59-
assembly: $assembly
60-
) {
61-
coordinates {
62-
chromosome
63-
start
64-
end
65-
}
66-
}
67-
}`;
54+
query q(
55+
$id: String!
56+
$assembly: String!
57+
) {
58+
resolve(
59+
id: $id
60+
assembly: $assembly
61+
) {
62+
coordinates {
63+
chromosome
64+
start
65+
end
66+
}
67+
}
68+
}
69+
`;
6870

6971
export const ICRE_AUTOCOMPLETE_QUERY = `
70-
query iCREQuery($accession_prefix: [String!], $limit: Int) {
71-
iCREQuery(accession_prefix: $accession_prefix, limit: $limit) {
72-
rdhs
73-
accession
74-
celltypes
75-
coordinates {
76-
start
77-
end
78-
chromosome
79-
}
80-
}
81-
}
72+
query iCREQuery($accession_prefix: [String!], $limit: Int) {
73+
iCREQuery(accession_prefix: $accession_prefix, limit: $limit) {
74+
rdhs
75+
accession
76+
celltypes
77+
coordinates {
78+
start
79+
end
80+
chromosome
81+
}
82+
}
83+
}
8284
`;
8385

8486
export const CCRE_AUTOCOMPLETE_QUERY = `
85-
query cCREQuery($accession_prefix: [String!], $limit: Int, $assembly: String!) {
86-
cCREQuery(accession_prefix: $accession_prefix, assembly: $assembly, limit: $limit) {
87-
accession
88-
coordinates {
89-
start
90-
end
91-
chromosome
92-
}
93-
}
87+
query cCREAutocompleteQuery(
88+
$accession_prefix: [String!]
89+
$assembly: String!
90+
$includeiCREs: Boolean
91+
$limit: Int
92+
) {
93+
cCREAutocompleteQuery(
94+
includeiCREs: $includeiCREs
95+
assembly: $assembly
96+
limit: $limit
97+
accession_prefix: $accession_prefix
98+
) {
99+
accession
100+
isiCRE
101+
coordinates {
102+
chromosome
103+
start
104+
end
105+
}
94106
}
107+
}
95108
`;
96109

97110
export const getICREs = async (value: string, limit: number) => {
@@ -109,23 +122,33 @@ export const getICREs = async (value: string, limit: number) => {
109122
return response.json();
110123
};
111124

112-
export const getCCREs = async (value: string, assembly: string, limit: number) => {
125+
export const getCCREs = async (
126+
value: string,
127+
assembly: string,
128+
limit: number,
129+
showiCREFlag: boolean
130+
) => {
113131
const response = await fetch("https://screen.api.wenglab.org/graphql", {
114132
method: "POST",
115133
body: JSON.stringify({
116-
query: CCRE_AUTOCOMPLETE_QUERY,
134+
query: CCRE_AUTOCOMPLETE_QUERY,
117135
variables: {
118136
accession_prefix: [value],
119137
assembly: assembly.toLowerCase(),
120138
limit: limit,
139+
includeiCREs: showiCREFlag
121140
},
122141
}),
123142
headers: { "Content-Type": "application/json" },
124143
});
125144
return response.json();
126145
};
127146

128-
export const getGenes = async (value: string, assembly: string, limit: number) => {
147+
export const getGenes = async (
148+
value: string,
149+
assembly: string,
150+
limit: number
151+
) => {
129152
const response = await fetch("https://screen.api.wenglab.org/graphql", {
130153
method: "POST",
131154
body: JSON.stringify({
@@ -142,7 +165,11 @@ export const getGenes = async (value: string, assembly: string, limit: number) =
142165
return response.json();
143166
};
144167

145-
export const getSNPs = async (value: string, assembly: string, limit: number) => {
168+
export const getSNPs = async (
169+
value: string,
170+
assembly: string,
171+
limit: number
172+
) => {
146173
const response = await fetch("https://screen.api.wenglab.org/graphql", {
147174
method: "POST",
148175
body: JSON.stringify({

‎src/components/Autocomplete/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export type GenomeSearchProps = Partial<AutocompleteProps<Result, false, true, f
55
assembly: "GRCh38" | "mm10";
66
onSearchSubmit: (result: Result) => void;
77
defaultResults?: Result[];
8-
8+
showiCREFlag?: boolean;
99
// queries
1010
queries: ResultType[];
1111
geneLimit?: number;
@@ -81,4 +81,5 @@ export interface CCREResponse {
8181
accession: string;
8282
coordinates: Domain
8383
celltypes: string[]
84+
isiCRE: boolean
8485
}

‎src/components/Autocomplete/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export function ccreResultList(
131131
return formatResults(results, limit, {
132132
getTitle: (result) => result.accession,
133133
getDescription: (result) =>
134-
`${result.coordinates.chromosome}:${result.coordinates.start}-${result.coordinates.end}`,
134+
`${result.coordinates.chromosome}:${result.coordinates.start}-${result.coordinates.end}${result.isiCRE ? ", iCRE" : ""}`,
135135
type: "cCRE",
136136
});
137137
}

‎src/test.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
import { createRoot } from "react-dom/client";
22
import { Box, Typography } from "@mui/material";
3-
import { GenomeSearch, ResultType } from "./components/Autocomplete";
4-
import { useEffect, useState } from "react";
3+
import { GenomeSearch, Result, ResultType } from "./components/Autocomplete";
4+
import { useState } from "react";
55

66
function App() {
7-
const [query, setQuery] = useState<ResultType[]>(["Gene"]);
8-
useEffect(() => {
9-
const timer = setTimeout(() => {
10-
setQuery(["SNP"]);
11-
}, 5000);
12-
return () => clearTimeout(timer);
13-
}, []);
7+
const query: ResultType[] = ["cCRE"]
8+
const [result, setResult] = useState<Result>()
149
return (
15-
<Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" height="50vh" width="100%">
16-
<Typography variant="h1">{query.join(", ")}</Typography>
10+
<Box display="flex" flexDirection="column" justifyContent="start" alignItems="center" height="100vh" width="100%">
11+
<Typography variant="h2">{query.join(", ")}</Typography>
1712
<GenomeSearch
1813
assembly="GRCh38"
1914
queries={query}
15+
showiCREFlag
2016
onSearchSubmit={(result) => {
21-
console.log(result);
17+
setResult(result)
2218
}}
2319
sx={{ width: "400px" }}
2420
/>
21+
{result && (
22+
<>
23+
<Typography variant="h3">{result.type}</Typography>
24+
<Typography variant="h3">{result?.title}</Typography>
25+
<Typography variant="h4">{result?.description}</Typography>
26+
<Typography variant="h5">{result?.domain.chromosome}:{result?.domain.start}-{result?.domain.end}</Typography>
27+
</>
28+
)}
2529
</Box>
2630
);
2731
}

0 commit comments

Comments
 (0)