@jbrowse/plugin-linear-genome-view/esm/LinearGenomeView/components/RefNameAutocomplete/index.js

JBrowse 2 linear genome view

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, 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.js";
import { getDeduplicatedResult, getFiltered } from "./util.js";
const RefNameAutocomplete = observer(function RefNameAutocomplete({ 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 [inputValue, setInputValue] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
    const [searchOptions, setSearchOptions] = useState();
    const debouncedSearch = useDebounce(searchQuery, 50);
    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
    const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
    const fetchResultsRef = useRef(fetchResults);
    fetchResultsRef.current = fetchResults;
    useEffect(() => {
        const isCurrent = { cancelled: false };
        (async () => {
            try {
                if (debouncedSearch === '' || !assemblyName) {
                    return;
                }
                setLoaded(false);
                const results = await fetchResultsRef.current(debouncedSearch);
                if (!isCurrent.cancelled) {
                    setSearchOptions(getDeduplicatedResult(results));
                }
            }
            catch (e) {
                console.error(e);
                if (!isCurrent.cancelled) {
                    session.notifyError(`${e}`, e);
                }
            }
            finally {
                if (!isCurrent.cancelled) {
                    setLoaded(true);
                }
            }
        })();
        return () => {
            isCurrent.cancelled = true;
        };
    }, [assemblyName, debouncedSearch, session]);
    const inputBoxVal = coarseVisibleLocStrings || value || '';
    const regions = assembly?.regions;
    const regionOptions = useMemo(() => regions?.map(region => ({
        result: new RefSequenceResult({
            refName: region.refName,
            label: region.refName,
            displayString: region.refName,
            matchedAttribute: 'refName',
        }),
    })) || [], [regions]);
    return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
            ...style,
            width: Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth),
        }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue, reason) => {
            setInputValue(newInputValue);
            if (reason === 'input') {
                setSearchQuery(newInputValue);
                onChange?.(newInputValue);
            }
            else if (reason === 'selectOption' || reason === 'clear') {
                onChange?.(newInputValue);
                setSearchQuery('');
            }
            else if (reason === 'blur') {
                setSearchQuery('');
            }
        }, loadingText: "loading results", open: open, onOpen: () => {
            setOpen(true);
        }, onClose: () => {
            setOpen(false);
            setLoaded(true);
            if (hasDisplayedRegions) {
                setSearchQuery('');
                setSearchOptions(undefined);
            }
        }, onChange: (_event, selectedOption) => {
            if (!selectedOption || !assemblyName) {
                return;
            }
            if (typeof selectedOption === 'string') {
                onSelect?.(new BaseResult({
                    label: selectedOption,
                }));
            }
            else {
                onSelect?.(selectedOption.result);
            }
            setInputValue(inputBoxVal);
        }, options: searchOptions?.length ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: opts => getFiltered(opts, searchQuery), renderInput: params => (_jsx(AutocompleteTextField, { params: params, TextFieldProps: TextFieldProps })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
});
export default RefNameAutocomplete;