@jbrowse/plugin-linear-genome-view 2.8.0 → 2.10.0

package/esm/LinearGenomeView/components/Cytobands.js

@@ -66,10 +66,16 @@ const Cytobands = observer(function ({ overview, block, assembly, }) {
         const c = colorMap[type];
         if (type === 'acen' && !centromereSeen) {
             centromereSeen = true; // the next acen entry is drawn with different right triangle
-            return React.createElement("polygon", { key: k, points: leftTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? rightTriangle(s - w, 0, w, h)
+                : leftTriangle(s, 0, w, h);
+            return React.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (type === 'acen' && centromereSeen) {
-            return React.createElement("polygon", { key: k, points: rightTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? leftTriangle(s - w, 0, w, h)
+                : rightTriangle(s, 0, w, h);
+            return React.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (lcap === index) {
             return React.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });

package/esm/LinearGenomeView/components/ImportForm.js

@@ -6,9 +6,8 @@ import { Button, FormControl, Container, Grid, CircularProgress, } from '@mui/ma
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui';
 // icons
 import CloseIcon from '@mui/icons-material/Close';
-// locals
-import RefNameAutocomplete from './RefNameAutocomplete';
-import { fetchResults, splitLast } from './util';
+import { handleSelectedRegion, navToOption } from '../../searchUtils';
+import ImportFormRefNameAutocomplete from './ImportFormRefNameAutocomplete';
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(2),
@@ -24,11 +23,10 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
     var _a;
     const { classes } = useStyles();
     const session = getSession(model);
-    const { assemblyNames, assemblyManager, textSearchManager } = session;
-    const { rankSearchResults, error } = model;
+    const { assemblyNames, assemblyManager } = session;
+    const { error } = model;
     const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
     const [option, setOption] = useState();
-    const searchScope = model.searchScope(selectedAsm);
     const assembly = assemblyManager.get(selectedAsm);
     const assemblyError = assemblyNames.length
         ? assembly === null || assembly === void 0 ? void 0 : assembly.error
@@ -46,74 +44,37 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
     useEffect(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
-    async function navToOption(option) {
-        const location = option.getLocation();
-        const trackId = option.getTrackId();
-        if (location) {
-            await model.navToLocString(location, selectedAsm);
-            if (trackId) {
-                model.showTrack(trackId);
-            }
-        }
-    }
-    // gets a string as input, or use stored option results from previous query,
-    // then re-query and
-    // 1) if it has multiple results: pop a dialog
-    // 2) if it's a single result navigate to it
-    // 3) else assume it's a locstring and navigate to it
-    async function handleSelectedRegion(input) {
-        var _a;
-        try {
-            if ((option === null || option === void 0 ? void 0 : option.getDisplayString()) === input && option.hasLocation()) {
-                await navToOption(option);
-            }
-            else if ((_a = option === null || option === void 0 ? void 0 : option.results) === null || _a === void 0 ? void 0 : _a.length) {
-                model.setSearchResults(option.results, option.getLabel(), selectedAsm);
-            }
-            else {
-                const [ref, rest] = splitLast(input, ':');
-                const allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNamesWithLowerCase) || [];
-                if (allRefs.includes(input) ||
-                    (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))) {
-                    await model.navToLocString(input, selectedAsm);
-                }
-                else {
-                    const results = await fetchResults({
-                        queryString: input,
-                        searchType: 'exact',
-                        searchScope,
-                        rankSearchResults,
-                        textSearchManager,
-                        assembly,
-                    });
-                    if (results.length > 1) {
-                        model.setSearchResults(results, input.toLowerCase(), selectedAsm);
-                    }
-                    else if (results.length === 1) {
-                        await navToOption(results[0]);
-                    }
-                    else {
-                        await model.navToLocString(input, selectedAsm);
-                    }
-                }
-            }
-        }
-        catch (e) {
-            console.error(e);
-            session.notify(`${e}`, 'warning');
-        }
-    }
     // implementation notes:
     // having this wrapped in a form allows intuitive use of enter key to submit
     return (React.createElement("div", { className: classes.container },
         displayError ? React.createElement(ErrorMessage, { error: displayError }) : null,
         React.createElement(Container, { className: classes.importFormContainer },
             React.createElement("form", { onSubmit: async (event) => {
+                    var _a;
                     event.preventDefault();
                     model.setError(undefined);
                     if (value) {
                         // has it's own error handling
-                        await handleSelectedRegion(value);
+                        try {
+                            if ((option === null || option === void 0 ? void 0 : option.getDisplayString()) === value &&
+                                option.hasLocation()) {
+                                await navToOption({
+                                    option,
+                                    model,
+                                    assemblyName: selectedAsm,
+                                });
+                            }
+                            else if ((_a = option === null || option === void 0 ? void 0 : option.results) === null || _a === void 0 ? void 0 : _a.length) {
+                                model.setSearchResults(option.results, option.getLabel(), selectedAsm);
+                            }
+                            else if (assembly) {
+                                await handleSelectedRegion({ input: value, assembly, model });
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notify(`${e}`, 'warning');
+                        }
                     }
                 } },
                 React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
@@ -121,16 +82,7 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
                         React.createElement(FormControl, null,
                             React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), localStorageKey: "lgv", session: session, selected: selectedAsm }))),
                     React.createElement(Grid, { item: true }, selectedAsm ? (assemblyError ? (React.createElement(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (React.createElement(FormControl, null,
-                        React.createElement(RefNameAutocomplete, { fetchResults: queryString => fetchResults({
-                                queryString,
-                                assembly,
-                                textSearchManager,
-                                rankSearchResults,
-                                searchScope,
-                            }), model: model, assemblyName: selectedAsm, value: value, minWidth: 270, onChange: str => setValue(str), onSelect: val => setOption(val), TextFieldProps: {
-                                variant: 'outlined',
-                                helperText: 'Enter sequence name, feature name, or location',
-                            } }))) : (React.createElement(CircularProgress, { size: 20, disableShrink: true }))) : null),
+                        React.createElement(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }))) : (React.createElement(CircularProgress, { size: 20, disableShrink: true }))) : null),
                     React.createElement(Grid, { item: true },
                         React.createElement(FormControl, null,
                             React.createElement(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary" }, "Open")),

package/esm/LinearGenomeView/components/ImportFormRefNameAutocomplete.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+import { LinearGenomeViewModel } from '..';
+type LGV = LinearGenomeViewModel;
+declare const ImportFormRefNameAutocomplete: ({ model, selectedAsm, value, setValue, setOption, }: {
+    value: string;
+    setValue: (arg: string) => void;
+    model: LGV;
+    selectedAsm: string;
+    setOption: (arg: BaseResult) => void;
+}) => React.JSX.Element;
+export default ImportFormRefNameAutocomplete;

package/esm/LinearGenomeView/components/ImportFormRefNameAutocomplete.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { getSession } from '@jbrowse/core/util';
+// locals
+import RefNameAutocomplete from './RefNameAutocomplete';
+import { fetchResults } from './util';
+const ImportFormRefNameAutocomplete = observer(function ({ model, selectedAsm, value, setValue, setOption, }) {
+    const session = getSession(model);
+    const { assemblyManager, textSearchManager } = session;
+    const { rankSearchResults } = model;
+    const searchScope = model.searchScope(selectedAsm);
+    const assembly = assemblyManager.get(selectedAsm);
+    return (React.createElement(RefNameAutocomplete, { fetchResults: queryString => fetchResults({
+            queryString,
+            assembly,
+            textSearchManager,
+            rankSearchResults,
+            searchScope,
+        }), model: model, assemblyName: selectedAsm, value: value, minWidth: 270, onChange: str => setValue(str), onSelect: val => setOption(val), TextFieldProps: {
+            variant: 'outlined',
+            helperText: 'Enter sequence name, feature name, or location',
+        } }));
+});
+export default ImportFormRefNameAutocomplete;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -195,7 +195,7 @@ const OverviewScalebar = observer(function ({ model, children, }) {
         overview.showAllRegions();
         return overview;
     }, [
-        JSON.stringify(displayedRegions),
+        JSON.stringify(displayedRegions), // eslint-disable-line react-hooks/exhaustive-deps
         model.minimumBlockWidth,
         modWidth,
         displayedRegions,

package/esm/LinearGenomeView/components/SearchBox.js

@@ -5,18 +5,14 @@ import { makeStyles } from 'tss-react/mui';
 import { getSession } from '@jbrowse/core/util';
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete';
-import { fetchResults, splitLast } from './util';
+import { fetchResults } from './util';
 import { SPACING, WIDGET_HEIGHT } from '..';
+import { handleSelectedRegion, navToOption } from '../../searchUtils';
 const useStyles = makeStyles()(() => ({
     headerRefName: {
         minWidth: 100,
     },
 }));
-function checkRef(str, allRefs) {
-    const [ref, rest] = splitLast(str, ':');
-    return (allRefs.includes(str) ||
-        (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10))));
-}
 const SearchBox = observer(function ({ model, showHelp, }) {
     const { classes } = useStyles();
     const theme = useTheme();
@@ -26,61 +22,28 @@ const SearchBox = observer(function ({ model, showHelp, }) {
     const assemblyName = assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const searchScope = model.searchScope(assemblyName);
-    async function navToOption(option) {
-        const location = option.getLocation();
-        const trackId = option.getTrackId();
-        if (location) {
-            await model.navToLocString(location, assemblyName);
-            if (trackId) {
-                model.showTrack(trackId);
-            }
-        }
-    }
-    // gets a string as input, or use stored option results from previous query,
-    // then re-query and
-    // 1) if it has multiple results: pop a dialog
-    // 2) if it's a single result navigate to it
-    // 3) else assume it's a locstring and navigate to it
-    async function handleSelectedRegion(option) {
-        var _a;
-        try {
-            const input = option.getLabel();
-            const allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNamesWithLowerCase) || [];
-            if (option.hasLocation()) {
-                await navToOption(option);
-            }
-            else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
-                model.setSearchResults(option.results, option.getLabel());
-            }
-            else if (input.split(' ').every(entry => checkRef(entry, allRefs))) {
-                await model.navToLocString(input, assemblyName);
-            }
-            else {
-                const results = await fetchResults({
-                    queryString: input,
-                    searchType: 'exact',
-                    searchScope,
-                    rankSearchResults,
-                    textSearchManager,
-                    assembly,
-                });
-                if (results.length > 1) {
-                    model.setSearchResults(results, input.toLowerCase());
+    return (React.createElement(RefNameAutocomplete, { showHelp: showHelp, onSelect: async (option) => {
+            var _a;
+            try {
+                if (option.hasLocation()) {
+                    await navToOption({ option, model, assemblyName });
                 }
-                else if (results.length === 1) {
-                    await navToOption(results[0]);
+                else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
+                    model.setSearchResults(option.results, option.getLabel());
                 }
-                else {
-                    await model.navToLocString(input, assemblyName);
+                else if (assembly) {
+                    await handleSelectedRegion({
+                        input: option.getLabel(),
+                        assembly,
+                        model,
+                    });
                 }
             }
-        }
-        catch (e) {
-            console.error(e);
-            session.notify(`${e}`, 'warning');
-        }
-    }
-    return (React.createElement(RefNameAutocomplete, { showHelp: showHelp, onSelect: handleSelectedRegion, assemblyName: assemblyName, fetchResults: queryString => fetchResults({
+            catch (e) {
+                console.error(e);
+                getSession(model).notify(`${e}`, 'warning');
+            }
+        }, assemblyName: assemblyName, fetchResults: queryString => fetchResults({
             queryString,
             searchScope,
             rankSearchResults,

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { Menu } from '@jbrowse/core/ui';
+import { getEnv } from '@jbrowse/core/util';
 // local utils
 import { SCALE_BAR_HEIGHT } from '..';
 import { useSideScroll, useRangeSelect, useWheelScroll } from './hooks';
@@ -12,7 +13,6 @@ import Gridlines from './Gridlines';
 import CenterLine from './CenterLine';
 import VerticalGuide from './VerticalGuide';
 import RubberbandSpan from './RubberbandSpan';
-import { getEnv } from '@jbrowse/core/util';
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',

package/esm/LinearGenomeView/model.d.ts

@@ -6,6 +6,7 @@ import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes';
 import { Instance } from 'mobx-state-tree';
 import PluginManager from '@jbrowse/core/PluginManager';
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 export interface BpOffset {
     refName?: string;
     index: number;
@@ -20,7 +21,9 @@ export interface BpOffset {
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
-    Wrapper?: React.FC<any>;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
     fontSize?: number;
     rulerHeight?: number;
     textHeight?: number;
@@ -46,6 +49,9 @@ export declare const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
  * #category view
+ *
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -292,7 +298,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    toggleTrack(trackId: string): void;
+    toggleTrack(trackId: string): boolean;
     /**
      * #action
      */
@@ -463,6 +469,16 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      * navigating to the locstring
      */
     navToLocString(input: string, optAssemblyName?: string): Promise<void>;
+    /**
+     * #action
+     * Performs a text index search, and navigates to it immediately if a
+     * single result is returned. Will pop up a search dialog if multiple
+     * results are returned
+     */
+    navToSearchString({ input, assembly, }: {
+        input: string;
+        assembly: Assembly;
+    }): Promise<void>;
     /**
      * #action
      * Similar to `navToLocString`, but accepts parsed location objects

package/esm/LinearGenomeView/model.js

@@ -24,6 +24,7 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import MiniControls from './components/MiniControls';
 import Header from './components/Header';
 import { generateLocations, parseLocStrings } from './util';
+import { handleSelectedRegion } from '../searchUtils';
 // lazies
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 const SequenceSearchDialog = lazy(() => import('./components/SequenceSearchDialog'));
@@ -53,6 +54,9 @@ export const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
  * #category view
+ *
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export function stateModelFactory(pluginManager) {
     return types
@@ -595,7 +599,9 @@ export function stateModelFactory(pluginManager) {
             // if none had that configuration, turn one on
             if (!hiddenCount) {
                 self.showTrack(trackId);
+                return true;
             }
+            return false;
         },
         /**
          * #action
@@ -1077,6 +1083,19 @@ export function stateModelFactory(pluginManager) {
             }
             return this.navToLocations(parseLocStrings(input, assemblyName, isValidRefName), assemblyName);
         },
+        /**
+         * #action
+         * Performs a text index search, and navigates to it immediately if a
+         * single result is returned. Will pop up a search dialog if multiple
+         * results are returned
+         */
+        async navToSearchString({ input, assembly, }) {
+            await handleSelectedRegion({
+                input,
+                assembly,
+                model: self,
+            });
+        },
         /**
          * #action
          * Similar to `navToLocString`, but accepts parsed location objects

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.d.ts

@@ -1,12 +1,5 @@
 import { LinearGenomeViewModel, ExportSvgOptions } from '..';
 type LGV = LinearGenomeViewModel;
-interface Display {
-    height: number;
-}
-interface Track {
-    displays: Display[];
-}
-export declare function totalHeight(tracks: Track[], textHeight: number, trackLabels: string): number;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
 export { default as SVGRuler } from './SVGRuler';
 export { default as SVGTracks } from './SVGTracks';

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -1,25 +1,24 @@
 /* eslint-disable react-refresh/only-export-components */
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { when } from 'mobx';
-import { getSession, max, measureText, sum } from '@jbrowse/core/util';
+import { getSession, max, measureText, renderToStaticMarkup, } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import SVGTracks from './SVGTracks';
 import SVGHeader from './SVGHeader';
-import { getTrackName } from '@jbrowse/core/util/tracks';
-export function totalHeight(tracks, textHeight, trackLabels) {
-    return sum(tracks.map(t => t.displays[0].height +
-        (['none', 'left'].includes(trackLabels) ? 0 : textHeight)));
-}
+import { totalHeight } from './util';
 // render LGV to SVG
 export async function renderToSvg(model, opts) {
-    var _a;
     await when(() => model.initialized);
     const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children), } = opts;
     const session = getSession(model);
-    const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
+    const { allThemes } = session;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { createRootFn } = getRoot(model);
+    const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
     const { width, tracks, showCytobands } = model;
     const shift = 50;
     const c = +showCytobands * cytobandHeight;
@@ -41,7 +40,7 @@ export async function renderToSvg(model, opts) {
                 React.createElement("g", { transform: `translate(${shift} 0)` },
                     React.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         React.createElement(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, offset: offset, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }))))));
+                    React.createElement(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, offset: offset, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }))))), createRootFn);
 }
 export { default as SVGRuler } from './SVGRuler';
 export { default as SVGTracks } from './SVGTracks';

package/esm/LinearGenomeView/svgcomponents/util.d.ts

@@ -0,0 +1,8 @@
+interface Display {
+    height: number;
+}
+interface Track {
+    displays: Display[];
+}
+export declare function totalHeight(tracks: Track[], textHeight: number, trackLabels: string): number;
+export {};

package/esm/LinearGenomeView/svgcomponents/util.js

@@ -0,0 +1,5 @@
+import { sum } from '@jbrowse/core/util';
+export function totalHeight(tracks, textHeight, trackLabels) {
+    return sum(tracks.map(t => t.displays[0].height +
+        (['none', 'left'].includes(trackLabels) ? 0 : textHeight)));
+}