@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
128 lines (127 loc) • 6.47 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const BaseResults_1 = __importStar(require("@jbrowse/core/TextSearch/BaseResults"));
const util_1 = require("@jbrowse/core/util");
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
const util_2 = require("./util");
const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
const session = (0, util_1.getSession)(model);
const { assemblyManager } = session;
const [open, setOpen] = (0, react_1.useState)(false);
const [loaded, setLoaded] = (0, react_1.useState)(true);
const [currentSearch, setCurrentSearch] = (0, react_1.useState)('');
const [inputValue, setInputValue] = (0, react_1.useState)('');
const [searchOptions, setSearchOptions] = (0, react_1.useState)();
const debouncedSearch = (0, util_1.useDebounce)(currentSearch, 50);
const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
(0, react_1.useEffect)(() => {
const isCurrent = { cancelled: false };
(async () => {
try {
if (debouncedSearch === '' || !assemblyName) {
return;
}
setLoaded(false);
const results = await fetchResults(debouncedSearch);
if (!isCurrent.cancelled) {
setSearchOptions((0, util_2.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, fetchResults, debouncedSearch, session]);
const inputBoxVal = coarseVisibleLocStrings || value || '';
const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
const regionOptions = (0, react_1.useMemo)(() => (regions === null || regions === void 0 ? void 0 : regions.map(region => ({
result: new BaseResults_1.RefSequenceResult({
refName: region.refName,
label: region.refName,
displayString: region.refName,
matchedAttribute: 'refName',
}),
}))) || [], [regions]);
return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
...style,
width: Math.min(Math.max((0, util_1.measureText)(inputBoxVal, 14) + 100, minWidth), maxWidth),
}, 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 BaseResults_1.default({
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 }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => ((0, jsx_runtime_1.jsx)(AutocompleteTextField_1.default, { params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
});
exports.default = RefNameAutocomplete;