Skip to content

Commit 8d34bef

Browse files
mlacadiemlacadie
authored
window.open changes (#514)
* mainsearch cleanup * bedupload cleanup * ccreautocomplete cleanup removed unused imports removed unused consts replaced deprecated inputlabelprops for slotprops.inputlabel * Update celltypeautocomplete.tsx * router to snpautocomplete and deprecation changes to other files * eslint errors * eslint errors * revert to window.open
1 parent 838e89d commit 8d34bef

File tree

10 files changed

+110
-97
lines changed

10 files changed

+110
-97
lines changed

‎screen2.0/src/app/_mainsearch/bedupload.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import React, { useCallback, useState } from "react"
44
import { Button, Typography, Stack, Container, IconButton } from "@mui/material"
55
import { useDropzone } from "react-dropzone"
6-
import { useRouter } from 'next/navigation'
76
import UploadFileIcon from '@mui/icons-material/UploadFile';
87
import { Cancel, Search } from "@mui/icons-material"
98
import { LoadingButton } from "@mui/lab"
@@ -12,7 +11,6 @@ import { useLazyQuery } from "@apollo/client"
1211
import { BED_INTERSECT_QUERY } from "./queries"
1312

1413
const BedUpload = (props: { assembly: "mm10" | "GRCh38", header?: boolean }) => {
15-
const router = useRouter()
1614

1715
const [files, setFiles] = useState<File[]>([])
1816
const [loading, setLoading] = useState(false)
@@ -49,7 +47,7 @@ const BedUpload = (props: { assembly: "mm10" | "GRCh38", header?: boolean }) =>
4947
//TODO Warn based on file size, support multiple files
5048
const submitFiles = () => {
5149
setLoading(true)
52-
let allLines = []
50+
const allLines = []
5351
let filenames: string = ''
5452
let accessions: string[] = []
5553
files.forEach((f) => {
@@ -72,7 +70,7 @@ const BedUpload = (props: { assembly: "mm10" | "GRCh38", header?: boolean }) =>
7270
}
7371
reader.onabort = () => console.log("file reading was aborted")
7472
reader.onerror = () => console.log("file reading has failed")
75-
reader.onloadend = (e) => {
73+
reader.onloadend = () => {
7674
getIntersect(
7775
allLines,
7876
(data) => {
@@ -84,7 +82,7 @@ const BedUpload = (props: { assembly: "mm10" | "GRCh38", header?: boolean }) =>
8482
} else {
8583
sessionStorage.setItem("warning", "false")
8684
}
87-
window.open(`/search?intersect=t&assembly=${props.assembly}`, "_self")
85+
window.open(`/search?intersect=t&assembly=${props.assembly}`, '_self')
8886

8987
},
9088
//Error

‎screen2.0/src/app/_mainsearch/ccreautocomplete.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import React, { useState, useCallback } from "react"
1+
import React, { useState } from "react"
22
import Box from "@mui/material/Box"
33
import TextField from "@mui/material/TextField"
44
import Autocomplete from "@mui/material/Autocomplete"
55
import Grid from "@mui/material/Grid2"
66
import Typography from "@mui/material/Typography"
7-
import { debounce } from "@mui/material/utils"
87
import { CCRE_AUTOCOMPLETE_QUERY } from "./queries"
9-
import Config from "../../config.json"
108
import { IconButton, Stack } from "@mui/material"
119
import { Search } from "@mui/icons-material"
1210
import { useQuery } from "@apollo/client"
@@ -18,7 +16,7 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
1816
const [options, setOptions] = useState([])
1917
const [ccreAccessions, setCcreAccessions] = useState([])
2018

21-
const {loading: loadingOptions, data: dataOptions, error: errorOptions} = useQuery(CCRE_AUTOCOMPLETE_QUERY,
19+
const {loading: loadingOptions} = useQuery(CCRE_AUTOCOMPLETE_QUERY,
2220
{
2321
variables: {
2422
assembly: props.assembly,
@@ -51,9 +49,9 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
5149

5250
const handleSubmit = () => {
5351
if (value) {
54-
let chrom = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.chrom
55-
let start = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.start
56-
let end = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.end
52+
const chrom = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.chrom
53+
const start = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.start
54+
const end = (ccreAccessions.find((g: { ccreaccession: string }) => g.ccreaccession === value))?.end
5755
return (`/search?assembly=${props.assembly}&chromosome=${chrom}&start=${start}&end=${end}&accessions=${value}&page=2`)
5856
}
5957
}
@@ -73,7 +71,7 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
7371
onKeyDown={(event) => {
7472
if (event.key === "Enter") {
7573
event.defaultPrevented = true
76-
window.open(handleSubmit(), "_self")
74+
window.open(handleSubmit(), '_self')
7775
}
7876
}}
7977
value={value}
@@ -89,7 +87,12 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
8987
<TextField
9088
{...params}
9189
label="Enter a cCRE accession"
92-
InputLabelProps={{ shrink: true, style: props.header ? {color: "white"} : { color: "black" } }}
90+
slotProps={{
91+
inputLabel: {
92+
shrink: true,
93+
style: props.header ? { color: "white" } : { color: "black" },
94+
},
95+
}}
9396
placeholder={props.assembly === "mm10" ? "e.g EM10E0000207" : "e.g. EH38E0001314"}
9497
fullWidth
9598
sx={{
@@ -128,7 +131,7 @@ export const CcreAutoComplete: React.FC<{ assembly: string, header?: boolean }>
128131
)
129132
}}
130133
/>
131-
<IconButton aria-label="Search" type="submit" href={handleSubmit()} sx={{ color: `${props.header ? "white" : "black"}`, maxHeight: "100%" }}>
134+
<IconButton aria-label="Search" type="submit" onClick={() => window.open(handleSubmit(), '_self')} sx={{ color: `${props.header ? "white" : "black"}`, maxHeight: "100%" }}>
132135
<Search />
133136
</IconButton>
134137
</Stack>

‎screen2.0/src/app/_mainsearch/celltypeautocomplete.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { RegistryBiosample } from "../search/types"
1212

1313
export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean }> = (props) => {
1414
const [valueCellType, setValueCellType] = useState<RegistryBiosample>(null)
15-
const [valueRegion, setValueRegion] = useState(null)
15+
const [valueRegion, setValueRegion] = useState("")
1616
const [inputValue, setInputValue] = useState("")
1717
const [options, setOptions] = useState<RegistryBiosample[]>([])
1818

@@ -64,7 +64,7 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
6464
onKeyDown={(event) => {
6565
if (event.key === "Enter" && valueCellType) {
6666
event.defaultPrevented = true
67-
window.open(handleSubmit(), "_self")
67+
window.open(handleSubmit(), '_self')
6868
}
6969
}}
7070
value={valueCellType}
@@ -82,7 +82,12 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
8282
<TextField
8383
{...params}
8484
label="Enter a celltype"
85-
InputLabelProps={{ shrink: true, style: props.header ? { color: "white" } : { color: "black" } }}
85+
slotProps={{
86+
inputLabel: {
87+
shrink: true,
88+
style: props.header ? { color: "white" } : { color: "black" },
89+
},
90+
}}
8691
placeholder={props.assembly === "mm10" ? "strain B6NCrl cortical plate tissue male adult (8 weeks)" : "e.g. LNCAP"}
8792
fullWidth
8893
sx={{
@@ -121,7 +126,13 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
121126
{/* Ideally this and the other genomic region should share the same code */}
122127
<TextField
123128
variant="outlined"
124-
InputLabelProps={{ shrink: true, style: props.header ? { color: "white" } : { color: "black" } }}
129+
slotProps={{
130+
inputLabel: {
131+
shrink: true,
132+
style: props.header ? { color: "white" } : { color: "black" },
133+
},
134+
input: props.header ? { style: { color: "white" } } : {},
135+
}}
125136
label="Enter a genomic region"
126137
placeholder={`chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`}
127138
value={valueRegion}
@@ -130,14 +141,13 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
130141
}}
131142
onKeyDown={(event) => {
132143
if (event.key === "Enter" && valueCellType) {
133-
window.open(handleSubmit(), "_self")
144+
window.open(handleSubmit(), '_self')
134145
}
135146
if (event.key === "Tab" && !valueRegion) {
136147
const defaultGenomicRegion = `chr12:${(53380176).toLocaleString()}-${(53416446).toLocaleString()}`
137148
setValueRegion(defaultGenomicRegion)
138149
}
139150
}}
140-
InputProps={props.header ? { style: { color: "white" } } : {}}
141151
sx={{
142152
//Border at rest
143153
fieldset: props.header ? { borderColor: "white" } : { borderColor: "black" },
@@ -150,7 +160,7 @@ export const CelltypeAutocomplete: React.FC<{ assembly: string, header?: boolean
150160
}}
151161
size={props.header ? "small" : "medium"}
152162
/>
153-
<IconButton aria-label="Search" type="submit" onClick={() => window.open(handleSubmit(), "_self")} sx={{ color: `${props.header ? "white" : "black"}`, maxHeight: "100%" }}>
163+
<IconButton aria-label="Search" type="submit" onClick={() => window.open(handleSubmit(), '_self')} sx={{ color: `${props.header ? "white" : "black"}`, maxHeight: "100%" }}>
154164
<Search />
155165
</IconButton>
156166
</Stack>

‎screen2.0/src/app/_mainsearch/genomicregion.tsx‎

Lines changed: 51 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,29 @@ import { parseGenomicRegion } from "./parsegenomicregion"
2020
//https://mui.com/material-ui/react-text-field/#integration-with-3rd-party-input-libraries
2121
//For formatting the start/end as it's being entered.
2222

23+
//TODO: Better catch errors in input so that invalid values are not passed to api
24+
function generateURL(
25+
value: string,
26+
inputType: string,
27+
assembly: "mm10" | "GRCh38",
28+
chromosome: string,
29+
start: string,
30+
end: string,
31+
error: boolean
32+
): string {
33+
if (inputType === "Separated") {
34+
return `/search?assembly=${assembly}&chromosome=${"chr" + chromosome}&start=${start.replace(new RegExp(",", "g"), "") ?? "53380176"}&end=${end.replace(new RegExp(",", "g"), "") ?? "53416446"}`
35+
} else {
36+
if (!value) {
37+
return `/search?assembly=${assembly}&chromosome=chr12&start=53380176&end=53416446`
38+
}
39+
if (!error) {
40+
const region = parseGenomicRegion(value)
41+
return `/search?assembly=${assembly}&chromosome=${region.chromosome}&start=${region.start}&end=${region.end}`
42+
}
43+
}
44+
}
45+
2346
const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean }) => {
2447
const [value, setValue] = useState("")
2548
const [chromosome, setChromosome] = useState("12")
@@ -162,42 +185,15 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
162185
// eslint-disable-next-line react-hooks/exhaustive-deps
163186
}, [chromosome, end, props.assembly, start, value])
164187

165-
//TODO: Better catch errors in input so that invalid values are not passed to api
166-
function generateURL(
167-
value: string,
168-
inputType: string,
169-
assembly: "mm10" | "GRCh38",
170-
chromosome: string,
171-
start: string,
172-
end: string
173-
): string {
174-
if (inputType === "Separated") {
175-
return `/search?assembly=${assembly}&chromosome=${"chr" + chromosome}&start=${start.replace(new RegExp(",", "g"), "") ?? "53380176"}&end=${end.replace(new RegExp(",", "g"), "") ?? "53416446"}`
176-
} else {
177-
if (!value) {
178-
return `/search?assembly=${assembly}&chromosome=chr12&start=53380176&end=53416446`
179-
}
180-
try {
181-
const region = parseGenomicRegion(value)
182-
// setError(false)
183-
return `/search?assembly=${assembly}&chromosome=${region.chromosome}&start=${region.start}&end=${region.end}`
184-
} catch (error) {
185-
//If function can't parse input
186-
// setError(true)
187-
}
188-
}
189-
}
190-
191188
const url = useMemo(() => {
192-
return generateURL(value, inputType, props.assembly, chromosome, start, end)
193-
}, [value, inputType, props.assembly, chromosome, start, end])
189+
return generateURL(value, inputType, props.assembly, chromosome, start, end, error)
190+
}, [value, inputType, props.assembly, chromosome, start, end, error])
194191

195192
return (
196193
<Grid container spacing={2}>
197194
{!props.header && (
198195
<Grid pt={0} size={12}>
199196
<FormControl>
200-
{/* <FormLabel id="demo-row-radio-buttons-group-label">Input Format</FormLabel> */}
201197
<RadioGroup
202198
row
203199
aria-labelledby="input-format"
@@ -259,7 +255,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
259255
</Typography>
260256
<TextField
261257
variant="outlined"
262-
slotProps={{inputLabel: { shrink: true }}}
258+
slotProps={{ inputLabel: { shrink: true } }}
263259
label="Start"
264260
placeholder="53380176"
265261
value={start}
@@ -269,7 +265,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
269265
}}
270266
onKeyDown={(event) => {
271267
if (event.key === "Enter") {
272-
window.open(url, "_self")
268+
window.open(url, '_self')
273269
}
274270
if (event.key === "Tab" && !start) {
275271
setStart("53380176")
@@ -278,25 +274,25 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
278274
sx={
279275
props.header
280276
? {
281-
mr: "0.5rem",
282-
ml: "0.5rem",
283-
fieldset: sepErrStart ? { borderColor: "red" } : { borderColor: "white" },
284-
maxWidth: "7rem",
285-
}
277+
mr: "0.5rem",
278+
ml: "0.5rem",
279+
fieldset: sepErrStart ? { borderColor: "red" } : { borderColor: "white" },
280+
maxWidth: "7rem",
281+
}
286282
: {
287-
mr: "0.5rem",
288-
ml: "0.5rem",
289-
fieldset: sepErrStart ? { borderColor: "red" } : { borderColor: "black" },
290-
maxWidth: "7rem",
291-
}
283+
mr: "0.5rem",
284+
ml: "0.5rem",
285+
fieldset: sepErrStart ? { borderColor: "red" } : { borderColor: "black" },
286+
maxWidth: "7rem",
287+
}
292288
}
293289
size={props.header ? "small" : "medium"}
294290
error={sepErrStart}
295291
/>
296292
<Typography sx={{ justifySelf: "center" }}>–</Typography>
297293
<TextField
298294
variant="outlined"
299-
slotProps={{inputLabel: {shrink: true}}}
295+
slotProps={{ inputLabel: { shrink: true } }}
300296
label="End"
301297
placeholder="53416446"
302298
value={end}
@@ -306,7 +302,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
306302
}}
307303
onKeyDown={(event) => {
308304
if (event.key === "Enter") {
309-
window.open(url, "_self")
305+
window.open(url, '_self')
310306
}
311307
if (event.key === "Tab" && !end) {
312308
setEnd("53416446")
@@ -315,17 +311,17 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
315311
sx={
316312
props.header
317313
? {
318-
mr: "1rem",
319-
ml: "0.5rem",
320-
fieldset: sepErrEnd ? { borderColor: "red" } : { borderColor: "white" },
321-
maxWidth: "7rem",
322-
}
314+
mr: "1rem",
315+
ml: "0.5rem",
316+
fieldset: sepErrEnd ? { borderColor: "red" } : { borderColor: "white" },
317+
maxWidth: "7rem",
318+
}
323319
: {
324-
mr: { xs: "0rem", sm: "1rem" },
325-
ml: "0.5rem",
326-
fieldset: sepErrEnd ? { borderColor: "red" } : { borderColor: "black" },
327-
maxWidth: "7rem",
328-
}
320+
mr: { xs: "0rem", sm: "1rem" },
321+
ml: "0.5rem",
322+
fieldset: sepErrEnd ? { borderColor: "red" } : { borderColor: "black" },
323+
maxWidth: "7rem",
324+
}
329325
}
330326
size={props.header ? "small" : "medium"}
331327
error={sepErrEnd}
@@ -351,7 +347,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
351347
onKeyDown={(event) => {
352348
if (event.key === "Enter") {
353349
if (!error) {
354-
window.open(url, "_self")
350+
window.open(url, '_self')
355351
}
356352
}
357353
if (event.key === "Tab" && !value) {
@@ -383,7 +379,7 @@ const GenomicRegion = (props: { assembly: "mm10" | "GRCh38"; header?: boolean })
383379
sx={{ color: `${props.header ? "white" : "black"}`, maxHeight: "100%" }}
384380
onClick={() => {
385381
if ((inputType !== "Separated" && !error) || (inputType === "Separated" && !sepErrStart && !sepErrEnd)) {
386-
window.open(url, "_self")
382+
window.open(url, '_self')
387383
}
388384
}}
389385
>

‎screen2.0/src/app/_mainsearch/mainsearch.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,18 @@ export const MainSearch: React.FC<MainSearchProps> = (props: MainSearchProps) =>
2727
}
2828

2929
const handleAssemblyChange = (event: SelectChangeEvent) => {
30-
((event.target.value === "GRCh38") || (event.target.value === "mm10")) && setAssembly(event.target.value)
31-
}
30+
if (event.target.value === "GRCh38" || event.target.value === "mm10") {
31+
setAssembly(event.target.value);
32+
}
33+
};
3234

3335
const handleGeneSearch = (gene: GeneInfo) => {
3436
if (gene) {
35-
let chrom = gene.coordinates.chromosome
36-
let start = gene.coordinates.start
37-
let end = gene.coordinates.end
38-
let name = gene.name
39-
window.open(`/search?assembly=${assembly}&chromosome=${chrom}&start=${start}&end=${end}&gene=${name}&tssDistance=0`, "_self")
37+
const chrom = gene.coordinates.chromosome
38+
const start = gene.coordinates.start
39+
const end = gene.coordinates.end
40+
const name = gene.name
41+
window.open(`/search?assembly=${assembly}&chromosome=${chrom}&start=${start}&end=${end}&gene=${name}&tssDistance=0`, '_self')
4042
}
4143
}
4244

0 commit comments

Comments
 (0)