@jbrowse/plugin-linear-genome-view 2.4.2 → 2.6.1

package/dist/LinearGenomeView/model.js

@@ -31,7 +31,6 @@ const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const mst_1 = require("@jbrowse/core/util/types/mst");
-const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateDynamicBlocks"));
 const calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
@@ -51,13 +50,15 @@ const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
-// locals
-const SVGLinearGenomeView_1 = require("./svgcomponents/SVGLinearGenomeView");
-const ExportSvgDialog_1 = __importDefault(require("./components/ExportSvgDialog"));
 const MiniControls_1 = __importDefault(require("./components/MiniControls"));
 const Header_1 = __importDefault(require("./components/Header"));
+const util_2 = require("./util");
 // lazies
+const ReturnToImportFormDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ReturnToImportFormDialog'))));
 const SequenceSearchDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SequenceSearchDialog'))));
+const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
+const GetSequenceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/GetSequenceDialog'))));
+const SearchResultsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SearchResultsDialog'))));
 function calculateVisibleLocStrings(contentBlocks) {
     if (!contentBlocks.length) {
         return '';
@@ -80,6 +81,7 @@ exports.SPACING = 7;
 exports.WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
+ * #category view
  */
 function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
@@ -137,7 +139,8 @@ function stateModelFactory(pluginManager) {
         trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
         /**
          * #property
-         * how to display the track labels, can be "overlapping", "offset", or "hidden"
+         * how to display the track labels, can be "overlapping", "offset", or
+         * "hidden"
          */
         trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || 'overlapping'),
         /**
@@ -165,15 +168,11 @@ function stateModelFactory(pluginManager) {
         // which is basically like an onLoad
         afterDisplayedRegionsSetCallbacks: [],
         scaleFactor: 1,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         trackRefs: {},
         coarseDynamicBlocks: [],
         coarseTotalBp: 0,
         leftOffset: undefined,
         rightOffset: undefined,
-        searchResults: undefined,
-        searchQuery: undefined,
-        seqDialogDisplayed: false,
     }))
         .views(self => ({
         /**
@@ -246,12 +245,6 @@ function stateModelFactory(pluginManager) {
         get hasDisplayedRegions() {
             return self.displayedRegions.length > 0;
         },
-        /**
-         * #getter
-         */
-        get isSearchDialogDisplayed() {
-            return self.searchResults !== undefined;
-        },
         /**
          * #getter
          */
@@ -486,7 +479,9 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #action
-         * sets offsets used in the get sequence dialog
+         * sets offsets of rubberband, used in the get sequence dialog can call
+         * view.getSelectedRegions(view.leftOffset,view.rightOffset) to compute
+         * the selected regions from the offsets
          */
         setOffsets(left, right) {
             self.leftOffset = left;
@@ -495,15 +490,17 @@ function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        setSearchResults(results, query) {
-            self.searchResults = results;
-            self.searchQuery = query;
-        },
-        /**
-         * #action
-         */
-        setGetSequenceDialogOpen(open) {
-            self.seqDialogDisplayed = open;
+        setSearchResults(searchResults, searchQuery, assemblyName) {
+            (0, util_1.getSession)(self).queueDialog(handleClose => [
+                SearchResultsDialog,
+                {
+                    model: self,
+                    searchResults,
+                    searchQuery,
+                    handleClose,
+                    assemblyName,
+                },
+            ]);
         },
         /**
          * #action
@@ -650,10 +647,13 @@ function stateModelFactory(pluginManager) {
         /**
          * #method
          * Helper method for the fetchSequence.
-         * Retrieves the corresponding regions that were selected by the rubberband
+         * Retrieves the corresponding regions that were selected by the
+         * rubberband
          *
-         * @param leftOffset - `object as {start, end, index, offset}`, offset = start of user drag
-         * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
+         * @param leftOffset - `object as {start, end, index, offset}`, offset = start
+         * of user drag
+         * @param rightOffset - `object as {start, end, index, offset}`,
+         * offset = end of user drag
          * @returns array of Region[]
          */
         getSelectedRegions(leftOffset, rightOffset) {
@@ -672,7 +672,8 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #action
-         * schedule something to be run after the next time displayedRegions is set
+         * schedule something to be run after the next time displayedRegions is
+         * set
          */
         afterDisplayedRegionsSet(cb) {
             self.afterDisplayedRegionsSetCallbacks.push(cb);
@@ -756,8 +757,8 @@ function stateModelFactory(pluginManager) {
          * creates an svg export and save using FileSaver
          */
         async exportSvg(opts = {}) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const html = await (0, SVGLinearGenomeView_1.renderToSvg)(self, opts);
+            const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGLinearGenomeView')));
+            const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             (0, file_saver_1.saveAs)(blob, opts.filename || 'image.svg');
         },
@@ -824,8 +825,8 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #getter
-         * the cytoband is displayed to the right of the chromosome name,
-         * and that offset is calculated manually with this method
+         * the cytoband is displayed to the right of the chromosome name, and
+         * that offset is calculated manually with this method
          */
         get cytobandOffset() {
             return this.showCytobands
@@ -846,7 +847,7 @@ function stateModelFactory(pluginManager) {
                     label: 'Return to import form',
                     onClick: () => {
                         (0, util_1.getSession)(self).queueDialog(handleClose => [
-                            ui_1.ReturnToImportFormDialog,
+                            ReturnToImportFormDialog,
                             { model: self, handleClose },
                         ]);
                     },
@@ -870,7 +871,7 @@ function stateModelFactory(pluginManager) {
                     icon: PhotoCamera_1.default,
                     onClick: () => {
                         (0, util_1.getSession)(self).queueDialog(handleClose => [
-                            ExportSvgDialog_1.default,
+                            ExportSvgDialog,
                             { model: self, handleClose },
                         ]);
                     },
@@ -982,10 +983,9 @@ function stateModelFactory(pluginManager) {
              * #getter
              * static blocks are an important concept jbrowse uses to avoid
              * re-rendering when you scroll to the side. when you horizontally
-             * scroll to the right, old blocks to the left may be removed, and
-             * new blocks may be instantiated on the right. tracks may use the
-             * static blocks to render their data for the region represented by
-             * the block
+             * scroll to the right, old blocks to the left may be removed, and new
+             * blocks may be instantiated on the right. tracks may use the static
+             * blocks to render their data for the region represented by the block
              */
             get staticBlocks() {
                 const ret = (0, calculateStaticBlocks_1.default)(self);
@@ -1000,7 +1000,7 @@ function stateModelFactory(pluginManager) {
              * #getter
              * dynamic blocks represent the exact coordinates of the currently
              * visible genome regions on the screen. they are similar to static
-             * blocks, but statcic blocks can go offscreen while dynamic blocks
+             * blocks, but static blocks can go offscreen while dynamic blocks
              * represent exactly what is on screen
              */
             get dynamicBlocks() {
@@ -1019,8 +1019,8 @@ function stateModelFactory(pluginManager) {
             },
             /**
              * #getter
-             * a single "combo-locstring" representing all the regions visible
-             * on the screen
+             * a single "combo-locstring" representing all the regions visible on
+             * the screen
              */
             get visibleLocStrings() {
                 return calculateVisibleLocStrings(this.dynamicBlocks.contentBlocks);
@@ -1062,8 +1062,8 @@ function stateModelFactory(pluginManager) {
         .actions(self => ({
         /**
          * #action
-         * offset is the base-pair-offset in the displayed region, index is the index of the
-         * displayed region in the linear genome view
+         * offset is the base-pair-offset in the displayed region, index is the
+         * index of the displayed region in the linear genome view
          *
          * @param start - object as `{start, end, offset, index}`
          * @param end - object as `{start, end, offset, index}`
@@ -1073,76 +1073,38 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #action
-         * navigate to the given locstring
+         * Navigate to the given locstring, will change displayed regions if
+         * needed, and wait for assemblies to be initialized
          *
-         * @param locString - e.g. "chr1:1-100"
-         * @param optAssemblyName - (optional) the assembly name to use when navigating to the locstring
+         * @param input - e.g. "chr1:1-100", "chr1:1-100 chr2:1-100", "chr 1 100"
+         * @param optAssemblyName - (optional) the assembly name to use when
+         * navigating to the locstring
          */
-        async navToLocString(locString, optAssemblyName) {
+        async navToLocString(input, optAssemblyName) {
             const { assemblyNames } = self;
             const { assemblyManager } = (0, util_1.getSession)(self);
             const { isValidRefName } = assemblyManager;
-            await (0, mobx_1.when)(() => self.volatileWidth !== undefined);
             const assemblyName = optAssemblyName || assemblyNames[0];
-            let parsedLocStrings;
-            const inputs = locString
-                .split(/(\s+)/)
-                .map(f => f.trim())
-                .filter(f => !!f);
             if (assemblyName) {
+                // wait before isValidRefName can be called
                 await assemblyManager.waitForAssembly(assemblyName);
             }
-            // first try interpreting as a whitespace-separated sequence of
-            // multiple locstrings
-            try {
-                parsedLocStrings = inputs.map(loc => (0, util_1.parseLocString)(loc, ref => isValidRefName(ref, assemblyName)));
-            }
-            catch (e) {
-                // if this fails, try interpreting as a whitespace-separated refname,
-                // start, end if start and end are integer inputs
-                const [refName, start, end] = inputs;
-                if (`${e}`.match(/Unknown reference sequence/) &&
-                    Number.isInteger(+start) &&
-                    Number.isInteger(+end)) {
-                    parsedLocStrings = [
-                        (0, util_1.parseLocString)(refName + ':' + start + '..' + end, ref => isValidRefName(ref, assemblyName)),
-                    ];
-                }
-                else {
-                    throw e;
-                }
-            }
-            const locations = await Promise.all(parsedLocStrings === null || parsedLocStrings === void 0 ? void 0 : parsedLocStrings.map(async (region) => {
-                const asmName = region.assemblyName || assemblyName;
-                const asm = await assemblyManager.waitForAssembly(asmName);
-                const { refName } = region;
-                if (!asm) {
-                    throw new Error(`assembly ${asmName} not found`);
-                }
-                const { regions } = asm;
-                if (!regions) {
-                    throw new Error(`regions not loaded yet for ${asmName}`);
-                }
-                const canonicalRefName = asm.getCanonicalRefName(region.refName);
-                if (!canonicalRefName) {
-                    throw new Error(`Could not find refName ${refName} in ${asm.name}`);
-                }
-                const parentRegion = regions.find(r => r.refName === canonicalRefName);
-                if (!parentRegion) {
-                    throw new Error(`Could not find refName ${refName} in ${asmName}`);
-                }
-                return {
-                    ...region,
-                    assemblyName: asmName,
-                    parentRegion,
-                };
-            }));
+            return this.navToLocations((0, util_2.parseLocStrings)(input, assemblyName, isValidRefName), assemblyName);
+        },
+        /**
+         * #action
+         * Similar to `navToLocString`, but accepts parsed location objects
+         * instead of strings. Will try to perform `setDisplayedRegions` if
+         * changing regions
+         */
+        async navToLocations(parsedLocStrings, assemblyName) {
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            await (0, mobx_1.when)(() => self.volatileWidth !== undefined);
+            const locations = await (0, util_2.generateLocations)(parsedLocStrings, assemblyManager, assemblyName);
             if (locations.length === 1) {
                 const loc = locations[0];
-                self.setDisplayedRegions([
-                    { reversed: loc.reversed, ...loc.parentRegion },
-                ]);
-                const { start, end, parentRegion } = loc;
+                const { reversed, parentRegion, start, end } = loc;
+                self.setDisplayedRegions([{ reversed, ...parentRegion }]);
                 this.navTo({
                     ...loc,
                     start: (0, util_1.clamp)(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
@@ -1159,10 +1121,10 @@ function stateModelFactory(pluginManager) {
         /**
          * #action
          * Navigate to a location based on its refName and optionally start, end,
-         * and assemblyName. Can handle if there are multiple displayedRegions
-         * from same refName. Only navigates to a location if it is entirely
-         * within a displayedRegion. Navigates to the first matching location
-         * encountered.
+         * and assemblyName. Will not try to change displayed regions, use
+         * `navToLocations` instead. Only navigates to a location if it is
+         * entirely within a displayedRegion. Navigates to the first matching
+         * location encountered.
          *
          * Throws an error if navigation was unsuccessful
          *
@@ -1173,105 +1135,65 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #action
+         * Navigate to a location based on its refName and optionally start, end,
+         * and assemblyName. Will not try to change displayed regions, use
+         * navToLocations instead. Only navigates to a location if it is entirely
+         * within a displayedRegion. Navigates to the first matching location
+         * encountered.
+         *
+         * Throws an error if navigation was unsuccessful
+         *
+         * @param locations - proposed location to navigate to
          */
         navToMultiple(locations) {
-            const firstLocation = locations[0];
-            let { refName } = firstLocation;
-            const { start, end, assemblyName = self.assemblyNames[0], } = firstLocation;
-            if (start !== undefined && end !== undefined && start > end) {
-                throw new Error(`start "${start + 1}" is greater than end "${end}"`);
+            if (locations.some(l => l.start !== undefined && l.end !== undefined && l.start > l.end)) {
+                throw new Error('found start greater than end');
             }
-            const session = (0, util_1.getSession)(self);
-            const { assemblyManager } = session;
-            const assembly = assemblyManager.get(assemblyName);
-            if (assembly) {
-                const canonicalRefName = assembly.getCanonicalRefName(refName);
-                if (canonicalRefName) {
-                    refName = canonicalRefName;
-                }
+            const f1 = locations.at(0);
+            const f2 = locations.at(-1);
+            if (!f1 || !f2) {
+                return;
             }
-            let s = start;
-            let e = end;
-            let refNameMatched = false;
-            const predicate = (r) => {
-                if (refName === r.refName) {
-                    refNameMatched = true;
-                    if (s === undefined) {
-                        s = r.start;
-                    }
-                    if (e === undefined) {
-                        e = r.end;
-                    }
-                    if (s >= r.start && s <= r.end && e <= r.end && e >= r.start) {
-                        return true;
-                    }
-                    s = start;
-                    e = end;
-                }
-                return false;
-            };
-            const lastIndex = (0, util_1.findLastIndex)(self.displayedRegions, predicate);
-            let index;
-            while (index !== lastIndex) {
-                try {
-                    const previousIndex = index;
-                    index = self.displayedRegions
-                        .slice(previousIndex === undefined ? 0 : previousIndex + 1)
-                        .findIndex(predicate);
-                    if (previousIndex !== undefined) {
-                        index += previousIndex + 1;
-                    }
-                    if (!refNameMatched) {
-                        throw new Error(`could not find a region with refName "${refName}"`);
-                    }
-                    if (s === undefined) {
-                        throw new Error(`could not find a region with refName "${refName}" that contained an end position ${e}`);
-                    }
-                    if (e === undefined) {
-                        throw new Error(`could not find a region with refName "${refName}" that contained a start position ${s + 1}`);
-                    }
-                    if (index === -1) {
-                        throw new Error(`could not find a region that completely contained "${(0, util_1.assembleLocString)(firstLocation)}"`);
-                    }
-                    if (locations.length === 1) {
-                        const f = self.displayedRegions[index];
-                        this.moveTo({ index, offset: f.reversed ? f.end - e : s - f.start }, { index, offset: f.reversed ? f.end - s : e - f.start });
-                        return;
-                    }
-                    let idx = 0;
-                    let start = 0;
-                    let end = 0;
-                    for (idx; idx < locations.length; idx++) {
-                        const location = locations[idx];
-                        const region = self.displayedRegions[index + idx];
-                        start = location.start || region.start;
-                        end = location.end || region.end;
-                        if (location.refName !== region.refName) {
-                            throw new Error(`Entered location ${(0, util_1.assembleLocString)(location)} does not match with displayed regions`);
-                        }
-                    }
-                    idx -= 1;
-                    const startDisplayedRegion = self.displayedRegions[index];
-                    const endDisplayedRegion = self.displayedRegions[index + idx];
-                    this.moveTo({
-                        index,
-                        offset: startDisplayedRegion.reversed
-                            ? startDisplayedRegion.end - e
-                            : s - startDisplayedRegion.start,
-                    }, {
-                        index: index + idx,
-                        offset: endDisplayedRegion.reversed
-                            ? endDisplayedRegion.end - start
-                            : end - endDisplayedRegion.start,
-                    });
-                    return;
-                }
-                catch (error) {
-                    if (index === lastIndex) {
-                        throw error;
-                    }
-                }
+            const a = self.assemblyNames[0];
+            const { assemblyManager } = (0, util_1.getSession)(self);
+            const assembly1 = assemblyManager.get(f1.assemblyName || a);
+            const assembly2 = assemblyManager.get(f2.assemblyName || a);
+            const ref1 = (assembly1 === null || assembly1 === void 0 ? void 0 : assembly1.getCanonicalRefName(f1.refName)) || f1.refName;
+            const ref2 = (assembly2 === null || assembly2 === void 0 ? void 0 : assembly2.getCanonicalRefName(f2.refName)) || f2.refName;
+            const r1 = self.displayedRegions.find(r => r.refName === ref1);
+            const r2 = (0, util_1.findLast)(self.displayedRegions, r => r.refName === ref2);
+            if (!r1) {
+                throw new Error(`could not find a region with refName "${ref1}"`);
+            }
+            if (!r2) {
+                throw new Error(`could not find a region with refName "${ref2}"`);
+            }
+            const s1 = f1.start === undefined ? r1.start : f1.start;
+            const e1 = f1.end === undefined ? r1.end : f1.end;
+            const s2 = f2.start === undefined ? r2.start : f2.start;
+            const e2 = f2.end === undefined ? r2.end : f2.end;
+            const index = self.displayedRegions.findIndex(r => ref1 === r.refName &&
+                s1 >= r.start &&
+                s1 <= r.end &&
+                e1 <= r.end &&
+                e1 >= r.start);
+            const index2 = self.displayedRegions.findIndex(r => ref2 === r.refName &&
+                s2 >= r.start &&
+                s2 <= r.end &&
+                e2 <= r.end &&
+                e2 >= r.start);
+            if (index === -1 || index2 === -1) {
+                throw new Error(`could not find a region that contained "${locations.map(l => (0, util_1.assembleLocString)(l))}"`);
             }
+            const sd = self.displayedRegions[index];
+            const ed = self.displayedRegions[index2];
+            this.moveTo({
+                index,
+                offset: sd.reversed ? sd.end - e1 : s1 - sd.start,
+            }, {
+                index: index2,
+                offset: ed.reversed ? ed.end - s2 : e2 - ed.start,
+            });
         },
     }))
         .views(self => ({
@@ -1283,15 +1205,16 @@ function stateModelFactory(pluginManager) {
                 {
                     label: 'Zoom to region',
                     icon: ZoomIn_1.default,
-                    onClick: () => {
-                        const { leftOffset, rightOffset } = self;
-                        self.moveTo(leftOffset, rightOffset);
-                    },
+                    onClick: () => self.moveTo(self.leftOffset, self.rightOffset),
                 },
                 {
                     label: 'Get sequence',
                     icon: MenuOpen_1.default,
-                    onClick: () => self.setGetSequenceDialogOpen(true),
+                    onClick: () => (0, util_1.getSession)(self).queueDialog(handleClose => [
+                        GetSequenceDialog,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        { model: self, handleClose },
+                    ]),
                 },
             ];
         },
@@ -1315,7 +1238,7 @@ function stateModelFactory(pluginManager) {
                 coord,
                 regionNumber,
             });
-            if (centerPx) {
+            if (centerPx !== undefined) {
                 self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
             }
         },
@@ -1345,6 +1268,6 @@ var SearchBox_1 = require("./components/SearchBox");
 Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return __importDefault(SearchBox_1).default; } });
 var ZoomControls_1 = require("./components/ZoomControls");
 Object.defineProperty(exports, "ZoomControls", { enumerable: true, get: function () { return __importDefault(ZoomControls_1).default; } });
-var SVGLinearGenomeView_2 = require("./svgcomponents/SVGLinearGenomeView");
-Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return SVGLinearGenomeView_2.renderToSvg; } });
+var SVGLinearGenomeView_1 = require("./svgcomponents/SVGLinearGenomeView");
+Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return SVGLinearGenomeView_1.renderToSvg; } });
 //# sourceMappingURL=model.js.map