@@ -6,9 +6,11 @@ import FormControl from '@mui/material/FormControl';
66import Select from '@mui/material/Select' ;
77import { Alert , Box , FormHelperText , FormLabel } from '@mui/material' ;
88import PostRequestSelect from '../form/PostRequestSelect' ;
9- import { getReferenceAssemblyId , taxonSuggest , geneSuggest , getInfoFromAssemblyId , getInfoFromSequenceAccession , getSequenceAccessionsFromAssemblyAccession } from '../../utils/ncbiRequests' ;
9+ import { getReferenceAssemblyId , taxonSuggest , geneSuggest , getInfoFromAssemblyId , getInfoFromSequenceAccession } from '../../utils/ncbiRequests' ;
1010import TextFieldValidate from '../form/TextFieldValidate' ;
1111import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI' ;
12+ import GetRequestMultiSelect from '../form/GetRequestMultiSelect' ;
13+ import useHttpClient from '../../hooks/useHttpClient' ;
1214
1315function getGeneCoordsInfo ( gene ) {
1416 const { range : geneRange , accession_version : accessionVersion } = gene . annotation . genomic_regions [ 0 ] . gene_range ;
@@ -61,29 +63,23 @@ function SpeciesPicker({ setSpecies, setAssemblyId }) {
6163 return ( < PostRequestSelect { ...speciesPostRequestSettings } fullWidth /> ) ;
6264}
6365
64- function SequenceAccessionPicker ( { assemblyAccesion, sequenceAccession, setSequenceAccession } ) {
65- const [ options , setOptions ] = React . useState ( [ ] ) ;
66- React . useEffect ( ( ) => {
67- getSequenceAccessionsFromAssemblyAccession ( assemblyAccesion ) . then ( ( opts ) => {
68- setOptions ( opts ) ;
69- } ) . catch ( ( e ) => { setOptions ( [ ] ) ; console . error ( e ) ; } ) ;
70- } , [ assemblyAccesion ] ) ;
66+ function SequenceAccessionPicker ( { assemblyAccession, setSequenceAccession } ) {
67+ const httpClient = useHttpClient ( ) ;
7168
69+ const url = `https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/${ assemblyAccession } /sequence_reports`
7270 return (
7371 < FormControl fullWidth >
74- < InputLabel id = "select-sequence-accession" > Chromosome</ InputLabel >
75- < Select
76- labelId = "select-sequence-accession"
72+ < GetRequestMultiSelect
73+ getOptionsFromResponse = { ( data ) => data . reports }
74+ httpClient = { httpClient }
75+ url = { url }
7776 label = "Chromosome"
78- value = { sequenceAccession }
79- onChange = { ( event ) => setSequenceAccession ( event . target . value ) }
80- >
81- { options . map ( ( { chr_name, refseq_accession } ) => (
82- < MenuItem key = { refseq_accession } value = { refseq_accession } >
83- { `${ chr_name } - ${ refseq_accession } ` }
84- </ MenuItem >
85- ) ) }
86- </ Select >
77+ messages = { { loadingMessage : 'Loading chromosomes...' , errorMessage : 'Could not load chromosomes' } }
78+ onChange = { ( value , options ) => { setSequenceAccession ( options . find ( ( o ) => `${ o . chr_name } - ${ o . refseq_accession } ` === value ) . refseq_accession ) } }
79+ getOptionLabel = { ( { chr_name, refseq_accession } ) => `${ chr_name } - ${ refseq_accession } ` }
80+ multiple = { false }
81+ autoComplete = { false }
82+ />
8783 </ FormControl >
8884 ) ;
8985}
@@ -187,11 +183,11 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
187183 < >
188184 < TextFieldValidate onChange = { onChange } getterFunction = { getInfoFromAssemblyId } label = "Assembly ID" defaultHelperText = "Example ID: GCA_000002945.3" />
189185 { newerAssembly && (
190- < Alert severity = "warning" >
191- { ! exactMatch ? 'Using assembly ID' : 'Newer assembly exists:' }
192- { ' ' }
193- < a href = { `https://www.ncbi.nlm.nih.gov/datasets/genome/${ newerAssembly } ` } target = "_blank" rel = "noopener noreferrer" > { newerAssembly } </ a >
194- </ Alert >
186+ < Alert severity = "warning" >
187+ { ! exactMatch ? 'Using assembly ID' : 'Newer assembly exists:' }
188+ { ' ' }
189+ < a href = { `https://www.ncbi.nlm.nih.gov/datasets/genome/${ newerAssembly } ` } target = "_blank" rel = "noopener noreferrer" > { newerAssembly } </ a >
190+ </ Alert >
195191 ) }
196192 { pairedAccessionWithAnnotation && (
197193 < Alert severity = "warning" >
@@ -321,7 +317,7 @@ function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendPostRe
321317 < AssemblyIdSelector { ...{ setAssemblyId, onAssemblyIdChange : ( ) => { setFormError ( { ...noError } ) ; setSequenceAccession ( '' ) ; } } } />
322318 ) }
323319 { assemblyId && [ 'custom_reference' , 'custom_other' ] . includes ( selectionMode ) && (
324- < SequenceAccessionPicker { ...{ assemblyAccesion : assemblyId , sequenceAccession , setSequenceAccession } } />
320+ < SequenceAccessionPicker { ...{ assemblyAccession : assemblyId , setSequenceAccession } } />
325321 ) }
326322 { sequenceAccession && (
327323 < >
@@ -412,33 +408,33 @@ function SourceGenomeRegionSelectGene({ gene, upstreamBasesRef, downstreamBasesR
412408 < PostRequestSelect { ...genePostRequestSettings } fullWidth />
413409 { error && ( < Alert severity = "error" > { error } </ Alert > ) }
414410 { gene && (
415- < >
416- < FormControl fullWidth >
417- < TextField
418- label = "Gene coordinates"
419- value = { formatGeneCoords ( gene ) }
420- disabled
421- />
422- </ FormControl >
423- < FormControl fullWidth >
424- < TextField
425- fullWidth
426- label = "Upstream bases"
427- inputRef = { upstreamBasesRef }
428- type = "number"
429- defaultValue = { 1000 }
430- />
431- </ FormControl >
432- < FormControl fullWidth >
433- < TextField
434- fullWidth
435- label = "Downstream bases"
436- inputRef = { downstreamBasesRef }
437- type = "number"
438- defaultValue = { 1000 }
439- />
440- </ FormControl >
441- </ >
411+ < >
412+ < FormControl fullWidth >
413+ < TextField
414+ label = "Gene coordinates"
415+ value = { formatGeneCoords ( gene ) }
416+ disabled
417+ />
418+ </ FormControl >
419+ < FormControl fullWidth >
420+ < TextField
421+ fullWidth
422+ label = "Upstream bases"
423+ inputRef = { upstreamBasesRef }
424+ type = "number"
425+ defaultValue = { 1000 }
426+ />
427+ </ FormControl >
428+ < FormControl fullWidth >
429+ < TextField
430+ fullWidth
431+ label = "Downstream bases"
432+ inputRef = { downstreamBasesRef }
433+ type = "number"
434+ defaultValue = { 1000 }
435+ />
436+ </ FormControl >
437+ </ >
442438 ) }
443439 </ >
444440 ) ;
@@ -476,4 +472,4 @@ function SourceGenomeRegion({ source, requestStatus, sendPostRequest }) {
476472 ) ;
477473}
478474
479- export { SourceGenomeRegion , AssemblyIdSelector } ;
475+ export { SourceGenomeRegion , AssemblyIdSelector , SpeciesPicker , SequenceAccessionPicker } ;
0 commit comments