@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
74 lines (73 loc) • 4.19 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
import { getSession, measureText, useDebounce } from '@jbrowse/core/util';
import { Autocomplete } from '@mui/material';
import { observer } from 'mobx-react';
import AutocompleteTextField from './AutocompleteTextField';
import { getDeduplicatedResult, getFiltered } from './util';
const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
const session = getSession(model);
const { assemblyManager } = session;
const [open, setOpen] = useState(false);
const [loaded, setLoaded] = useState(true);
const [currentSearch, setCurrentSearch] = useState('');
const [inputValue, setInputValue] = useState('');
const [searchOptions, setSearchOptions] = useState();
const debouncedSearch = useDebounce(currentSearch, 300);
const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
useEffect(() => {
;
(async () => {
try {
if (debouncedSearch === '' || !assemblyName) {
return;
}
setLoaded(false);
const results = await fetchResults(debouncedSearch);
setLoaded(true);
setSearchOptions(getDeduplicatedResult(results));
}
catch (e) {
console.error(e);
session.notifyError(`${e}`, e);
}
})();
}, [assemblyName, fetchResults, debouncedSearch, session]);
const inputBoxVal = coarseVisibleLocStrings || value || '';
const width = Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth);
const refNames = assembly === null || assembly === void 0 ? void 0 : assembly.refNames;
const regionOptions = (refNames === null || refNames === void 0 ? void 0 : refNames.map(refName => ({
result: new RefSequenceResult({
refName,
label: refName,
matchedAttribute: 'refName',
}),
}))) || [];
return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
setInputValue(newInputValue);
onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
}, loadingText: "loading results", open: open, onOpen: () => {
setOpen(true);
}, onClose: () => {
setOpen(false);
setLoaded(true);
if (hasDisplayedRegions) {
setCurrentSearch('');
setSearchOptions(undefined);
}
}, onChange: (_event, selectedOption) => {
if (!selectedOption || !assemblyName) {
return;
}
if (typeof selectedOption === 'string') {
onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
}
else {
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
}
setInputValue(inputBoxVal);
}, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (_jsx(AutocompleteTextField, { params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
});
export default RefNameAutocomplete;