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

package/esm/LinearGenomeView/model.js

@@ -2,8 +2,7 @@ import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst';
-import { ReturnToImportFormDialog } from '@jbrowse/core/ui';
-import { assembleLocString, clamp, findLastIndex, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, measureText, parseLocString, springAnimate, sum, } from '@jbrowse/core/util';
+import { assembleLocString, clamp, findLast, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
@@ -22,13 +21,15 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-// locals
-import { renderToSvg } from './svgcomponents/SVGLinearGenomeView';
-import ExportSvgDlg from './components/ExportSvgDialog';
 import MiniControls from './components/MiniControls';
 import Header from './components/Header';
+import { generateLocations, parseLocStrings } from './util';
 // lazies
+const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 const SequenceSearchDialog = lazy(() => import('./components/SequenceSearchDialog'));
+const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
+const GetSequenceDialog = lazy(() => import('./components/GetSequenceDialog'));
+const SearchResultsDialog = lazy(() => import('./components/SearchResultsDialog'));
 function calculateVisibleLocStrings(contentBlocks) {
     if (!contentBlocks.length) {
         return '';
@@ -51,6 +52,7 @@ export const SPACING = 7;
 export const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
+ * #category view
  */
 export function stateModelFactory(pluginManager) {
     return types
@@ -108,7 +110,8 @@ export function stateModelFactory(pluginManager) {
         trackSelectorType: types.optional(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: types.optional(types.string, () => localStorageGetItem('lgv-trackLabels') || 'overlapping'),
         /**
@@ -136,15 +139,11 @@ export 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 => ({
         /**
@@ -217,12 +216,6 @@ export function stateModelFactory(pluginManager) {
         get hasDisplayedRegions() {
             return self.displayedRegions.length > 0;
         },
-        /**
-         * #getter
-         */
-        get isSearchDialogDisplayed() {
-            return self.searchResults !== undefined;
-        },
         /**
          * #getter
          */
@@ -457,7 +450,9 @@ export 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;
@@ -466,15 +461,17 @@ export function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        setSearchResults(results, query) {
-            self.searchResults = results;
-            self.searchQuery = query;
-        },
-        /**
-         * #action
-         */
-        setGetSequenceDialogOpen(open) {
-            self.seqDialogDisplayed = open;
+        setSearchResults(searchResults, searchQuery, assemblyName) {
+            getSession(self).queueDialog(handleClose => [
+                SearchResultsDialog,
+                {
+                    model: self,
+                    searchResults,
+                    searchQuery,
+                    handleClose,
+                    assemblyName,
+                },
+            ]);
         },
         /**
          * #action
@@ -621,10 +618,13 @@ export 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) {
@@ -643,7 +643,8 @@ export 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);
@@ -727,7 +728,7 @@ export function stateModelFactory(pluginManager) {
          * creates an svg export and save using FileSaver
          */
         async exportSvg(opts = {}) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const { renderToSvg } = await import('./svgcomponents/SVGLinearGenomeView');
             const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             saveAs(blob, opts.filename || 'image.svg');
@@ -795,8 +796,8 @@ export 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
@@ -841,7 +842,7 @@ export function stateModelFactory(pluginManager) {
                     icon: PhotoCameraIcon,
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
-                            ExportSvgDlg,
+                            ExportSvgDialog,
                             { model: self, handleClose },
                         ]);
                     },
@@ -953,10 +954,9 @@ export 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 = calculateStaticBlocks(self);
@@ -971,7 +971,7 @@ export 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() {
@@ -990,8 +990,8 @@ export 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);
@@ -1033,8 +1033,8 @@ export 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}`
@@ -1044,76 +1044,38 @@ export 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 } = getSession(self);
             const { isValidRefName } = assemblyManager;
-            await 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 => 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 = [
-                        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(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 } = getSession(self);
+            await when(() => self.volatileWidth !== undefined);
+            const locations = await 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: clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
@@ -1130,10 +1092,10 @@ export 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
          *
@@ -1144,105 +1106,65 @@ export 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 = 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 = 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 "${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 ${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 } = 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 = 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 => 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 => ({
@@ -1254,15 +1176,16 @@ export function stateModelFactory(pluginManager) {
                 {
                     label: 'Zoom to region',
                     icon: ZoomInIcon,
-                    onClick: () => {
-                        const { leftOffset, rightOffset } = self;
-                        self.moveTo(leftOffset, rightOffset);
-                    },
+                    onClick: () => self.moveTo(self.leftOffset, self.rightOffset),
                 },
                 {
                     label: 'Get sequence',
                     icon: MenuOpenIcon,
-                    onClick: () => self.setGetSequenceDialogOpen(true),
+                    onClick: () => getSession(self).queueDialog(handleClose => [
+                        GetSequenceDialog,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        { model: self, handleClose },
+                    ]),
                 },
             ];
         },
@@ -1286,7 +1209,7 @@ export function stateModelFactory(pluginManager) {
                 coord,
                 regionNumber,
             });
-            if (centerPx) {
+            if (centerPx !== undefined) {
                 self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
             }
         },