@jbrowse/plugin-linear-comparative-view 2.15.4 → 2.16.0

package/esm/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Button, Container, IconButton } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getSession, isSessionWithAddTracks, notEmpty, } from '@jbrowse/core/util';
+import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import TrackSelector from './TrackSelectorUtil';
+import Spacer from './Spacer';
+const useStyles = makeStyles()(theme => ({
+    importFormContainer: {
+        padding: theme.spacing(4),
+    },
+    button: {
+        margin: theme.spacing(2),
+    },
+    rel: {
+        position: 'relative',
+    },
+    synbutton: {
+        position: 'absolute',
+        top: 30,
+    },
+    flex: {
+        display: 'flex',
+    },
+    mb: {
+        marginBottom: 10,
+    },
+    bg: {
+        background: theme.palette.divider,
+    },
+    fixedWidth: {
+        width: 700,
+    },
+}));
+const LinearSyntenyViewImportForm = observer(function ({ model, }) {
+    const { classes, cx } = useStyles();
+    const session = getSession(model);
+    const { assemblyNames } = session;
+    const defaultAssemblyName = assemblyNames[0] || '';
+    const [selectedRow, setSelectedRow] = useState(0);
+    const [selectedAssemblyNames, setSelectedAssemblyNames] = useState([
+        defaultAssemblyName,
+        defaultAssemblyName,
+    ]);
+    const [error, setError] = useState();
+    const [userOpenedSyntenyTracksToShow, setUserOpenedSyntenyTracksToShow] = useState([]);
+    const [preConfiguredSyntenyTracksToShow, setPreConfiguredSyntenyTracksToShow,] = useState([]);
+    return (React.createElement(Container, { className: classes.importFormContainer },
+        error ? React.createElement(ErrorMessage, { error: error }) : null,
+        React.createElement("div", { className: classes.flex },
+            React.createElement(Spacer, null),
+            React.createElement("div", null,
+                React.createElement("div", { className: classes.mb }, "Select assemblies for linear synteny view"),
+                selectedAssemblyNames.map((assemblyName, idx) => (React.createElement("div", { key: `${assemblyName}-${idx}`, className: classes.rel },
+                    React.createElement("span", null,
+                        "Row ",
+                        idx + 1,
+                        ": "),
+                    React.createElement(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
+                            setSelectedAssemblyNames(selectedAssemblyNames
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            setPreConfiguredSyntenyTracksToShow(preConfiguredSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            setUserOpenedSyntenyTracksToShow(userOpenedSyntenyTracksToShow
+                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                                .filter(notEmpty));
+                            if (selectedRow >= selectedAssemblyNames.length - 2) {
+                                setSelectedRow(0);
+                            }
+                        } },
+                        React.createElement(CloseIcon, null)),
+                    React.createElement(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
+                            setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
+                        }, session: session }),
+                    idx !== selectedAssemblyNames.length - 1 ? (React.createElement(IconButton, { className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
+                            setSelectedRow(idx);
+                        } },
+                        React.createElement(ArrowForwardIosIcon, null))) : null))),
+                React.createElement("div", null,
+                    React.createElement(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
+                            setSelectedAssemblyNames([
+                                ...selectedAssemblyNames,
+                                defaultAssemblyName,
+                            ]);
+                        } }, "Add row"),
+                    React.createElement(Button, { className: classes.button, onClick: () => {
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            ;
+                            (async () => {
+                                try {
+                                    setError(undefined);
+                                    await doSubmit({
+                                        userOpenedSyntenyTracksToShow,
+                                        preConfiguredSyntenyTracksToShow,
+                                        selectedAssemblyNames,
+                                        model,
+                                    });
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            })();
+                        }, variant: "contained", color: "primary" }, "Launch"))),
+            React.createElement(Spacer, null),
+            React.createElement("div", { className: classes.fixedWidth },
+                React.createElement("div", null,
+                    "Synteny dataset to display between row ",
+                    selectedRow + 1,
+                    " and",
+                    ' ',
+                    selectedRow + 2),
+                React.createElement(TrackSelector, { model: model, preConfiguredSyntenyTrack: preConfiguredSyntenyTracksToShow[selectedRow], assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1], setPreConfiguredSyntenyTrack: arg => {
+                        const clone = [...preConfiguredSyntenyTracksToShow];
+                        clone[selectedRow] = arg;
+                        setPreConfiguredSyntenyTracksToShow(clone);
+                    }, setUserOpenedSyntenyTrack: arg => {
+                        const clone = [...userOpenedSyntenyTracksToShow];
+                        clone[selectedRow] = arg;
+                        setUserOpenedSyntenyTracksToShow(clone);
+                    } }))),
+        React.createElement(Spacer, null)));
+});
+async function doSubmit({ selectedAssemblyNames, model, preConfiguredSyntenyTracksToShow, userOpenedSyntenyTracksToShow, }) {
+    const session = getSession(model);
+    const { assemblyManager } = session;
+    model.setViews(await Promise.all(selectedAssemblyNames.map(async (assemblyName) => {
+        const asm = await assemblyManager.waitForAssembly(assemblyName);
+        if (!asm) {
+            throw new Error(`Assembly "${assemblyName}" failed to load`);
+        }
+        return {
+            type: 'LinearGenomeView',
+            bpPerPx: 1,
+            offsetPx: 0,
+            hideHeader: true,
+            displayedRegions: asm.regions,
+        };
+    })));
+    for (const view of model.views) {
+        view.setWidth(model.width);
+        view.showAllRegions();
+    }
+    if (!isSessionWithAddTracks(session)) {
+        session.notify("Can't add tracks", 'warning');
+    }
+    else {
+        userOpenedSyntenyTracksToShow.map((f, idx) => {
+            if (f) {
+                session.addTrackConf(f);
+                model.toggleTrack(f.trackId, idx);
+            }
+        });
+    }
+    preConfiguredSyntenyTracksToShow.map((f, idx) => {
+        if (f) {
+            model.showTrack(f, idx);
+        }
+    });
+}
+export default LinearSyntenyViewImportForm;

package/esm/LinearSyntenyView/components/ImportForm/Spacer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Spacer(): React.JSX.Element;

package/esm/LinearSyntenyView/components/ImportForm/Spacer.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function Spacer() {
+    return React.createElement("div", { style: { flexGrow: 1 } });
+}

package/esm/LinearSyntenyView/components/ImportForm/TrackSelector.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LinearSyntenyViewModel } from '../../model';
+declare const ImportSyntenyTrackSelector: ({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, }: {
+    model: LinearSyntenyViewModel;
+    assembly1: string;
+    assembly2: string;
+    preConfiguredSyntenyTrack: string | undefined;
+    setPreConfiguredSyntenyTrack: (arg: string) => void;
+}) => React.JSX.Element;
+export default ImportSyntenyTrackSelector;

package/esm/LinearSyntenyView/components/ImportForm/{ImportSyntenyTrackSelector.js → TrackSelector.js}

@@ -5,35 +5,30 @@ import { getTrackName } from '@jbrowse/core/util/tracks';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { readConfObject, } from '@jbrowse/core/configuration';
 import { observer } from 'mobx-react';
-function f(track, assembly1, assembly2) {
-    const assemblyNames = readConfObject(track, 'assemblyNames');
-    return (assemblyNames.includes(assembly1) &&
-        assemblyNames.includes(assembly2) &&
-        track.type.includes('Synteny'));
-}
-const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) => {
+const ImportSyntenyTrackSelector = observer(function ({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, }) {
     var _a;
     const session = getSession(model);
     const { tracks = [], sessionTracks = [] } = session;
     const allTracks = [...tracks, ...sessionTracks];
-    const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1));
+    const filteredTracks = allTracks.filter(track => {
+        const assemblyNames = readConfObject(track, 'assemblyNames');
+        return (assemblyNames.includes(assembly1) &&
+            assemblyNames.includes(assembly2) &&
+            track.type.includes('Synteny'));
+    });
     const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
     const [value, setValue] = useState(resetTrack);
     useEffect(() => {
-        // if assembly1/assembly2 changes, then we will want to use this effect to
-        // change the state of the useState because it otherwise gets locked to a
-        // stale value
-        setValue(resetTrack);
-    }, [resetTrack]);
-    useEffect(() => {
-        // sets track data in a useEffect because the initial load is needed as well
-        // as onChange's to the select box
-        setShowTrackId(value);
-    }, [value, setShowTrackId]);
+        // sets track data in a useEffect because the initial load is needed as
+        // well as onChange's to the select box
+        if (value !== preConfiguredSyntenyTrack) {
+            setPreConfiguredSyntenyTrack(value);
+        }
+    }, [value, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack]);
     return (React.createElement(Paper, { style: { padding: 12 } },
-        React.createElement(Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
+        React.createElement(Typography, null, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
         filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => {
                 setValue(event.target.value);
             } }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
 });
-export default Selector;
+export default ImportSyntenyTrackSelector;

package/esm/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SnapshotIn } from 'mobx-state-tree';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { LinearSyntenyViewModel } from '../../model';
+type Conf = SnapshotIn<AnyConfigurationModel>;
+export default function TrackSelector({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack, }: {
+    model: LinearSyntenyViewModel;
+    assembly1: string;
+    assembly2: string;
+    preConfiguredSyntenyTrack: string | undefined;
+    setUserOpenedSyntenyTrack: (arg: Conf) => void;
+    setPreConfiguredSyntenyTrack: (arg?: string) => void;
+}): React.JSX.Element;
+export {};

package/esm/LinearSyntenyView/components/ImportForm/TrackSelectorUtil.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import ImportCustomTrack from './AddCustomTrack';
+import ImportSyntenyTrackSelector from './TrackSelector';
+export default function TrackSelector({ model, assembly1, assembly2, preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack, }) {
+    const [choice, setChoice] = useState('tracklist');
+    useEffect(() => {
+        if (choice === 'none') {
+            setPreConfiguredSyntenyTrack(undefined);
+            setUserOpenedSyntenyTrack(undefined);
+        }
+    }, [choice, setPreConfiguredSyntenyTrack, setUserOpenedSyntenyTrack]);
+    return (React.createElement("div", null,
+        React.createElement(FormControl, null,
+            React.createElement(RadioGroup, { row: true, value: choice, onChange: event => {
+                    setChoice(event.target.value);
+                }, "aria-labelledby": "group-label" },
+                React.createElement(FormControlLabel, { value: "none", control: React.createElement(Radio, null), label: "None" }),
+                React.createElement(FormControlLabel, { value: "tracklist", control: React.createElement(Radio, null), label: "Existing track" }),
+                React.createElement(FormControlLabel, { value: "custom", control: React.createElement(Radio, null), label: "New track" }))),
+        choice === 'custom' ? (React.createElement(ImportCustomTrack, { setUserOpenedSyntenyTrack: setUserOpenedSyntenyTrack, assembly2: assembly2, assembly1: assembly1 })) : null,
+        choice === 'tracklist' ? (React.createElement(ImportSyntenyTrackSelector, { key: `${assembly1}-${assembly2}`, model: model, assembly1: assembly1, assembly2: assembly2, preConfiguredSyntenyTrack: preConfiguredSyntenyTrack, setPreConfiguredSyntenyTrack: setPreConfiguredSyntenyTrack })) : null));
+}

package/esm/LinearSyntenyView/components/LinearSyntenyView.js

@@ -2,8 +2,8 @@ import React, { lazy } from 'react';
 import { observer } from 'mobx-react';
 // locals
 import LinearComparativeViewComponent from '../../LinearComparativeView/components/LinearComparativeView';
-const ImportForm = lazy(() => import('./ImportForm'));
-const LinearSyntenyView = observer(({ model }) => {
-    return !model.initialized ? (React.createElement(ImportForm, { model: model })) : (React.createElement(LinearComparativeViewComponent, { model: model }));
+const LinearSyntenyImportForm = lazy(() => import('./ImportForm/LinearSyntenyImportForm'));
+const LinearSyntenyView = observer(function ({ model }) {
+    return !model.initialized ? (React.createElement(LinearSyntenyImportForm, { model: model })) : (React.createElement(LinearComparativeViewComponent, { model: model }));
 });
 export default LinearSyntenyView;

package/esm/LinearSyntenyView/index.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
-import modelFactory from './model';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import modelFactory from './model';
 export default function LinearSyntenyViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({

package/esm/LinearSyntenyView/model.d.ts

@@ -33,8 +33,20 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     trackSelectorType: import("mobx-state-tree").IType<string | undefined, string, string>;
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactToggled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    middleComparativeHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
-    tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+    levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+        height: import("mobx-state-tree").IType<number | undefined, number, number>;
+        level: import("mobx-state-tree").ISimpleType<number>;
+    }, {
+        setHeight(n: number): number;
+        showTrack(trackId: string, initialSnapshot?: {}): void;
+        hideTrack(trackId: string): number;
+        toggleTrack(trackId: string): boolean;
+    } & {
+        readonly assemblyNames: (string | undefined)[];
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     views: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -271,7 +283,6 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     width: number | undefined;
 } & {
-    readonly highResolutionScaling: number;
     readonly initialized: boolean;
     readonly refNames: string[][];
     readonly assemblyNames: string[];
@@ -281,11 +292,11 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     setWidth(newWidth: number): void;
     setViews(views: import("mobx-state-tree").SnapshotIn<import("@jbrowse/plugin-linear-genome-view").LinearGenomeViewModel>[]): void;
     removeView(view: import("@jbrowse/plugin-linear-genome-view").LinearGenomeViewModel): void;
-    setMiddleComparativeHeight(n: number): number;
-    activateTrackSelector(): import("@jbrowse/core/util").Widget | undefined;
-    toggleTrack(trackId: string): boolean;
-    showTrack(trackId: string, initialSnapshot?: {}): void;
-    hideTrack(trackId: string): number;
+    setLevelHeight(newHeight: number, level?: number): number;
+    activateTrackSelector(level: number): import("@jbrowse/core/util").Widget;
+    toggleTrack(trackId: string, level?: number): void;
+    showTrack(trackId: string, level?: number, initialSnapshot?: {}): void;
+    hideTrack(trackId: string, level?: number): void;
     squareView(): void;
     clearView(): void;
 } & {
@@ -365,6 +376,253 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         };
         onClick: () => void;
     })[];
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, {
+    type: "LinearComparativeView";
+} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<"LinearComparativeView">;
+    trackSelectorType: import("mobx-state-tree").IType<string | undefined, string, string>;
+    showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    interactToggled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+        height: import("mobx-state-tree").IType<number | undefined, number, number>;
+        level: import("mobx-state-tree").ISimpleType<number>;
+    }, {
+        setHeight(n: number): number;
+        showTrack(trackId: string, initialSnapshot?: {}): void;
+        hideTrack(trackId: string): number;
+        toggleTrack(trackId: string): boolean;
+    } & {
+        readonly assemblyNames: (string | undefined)[];
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    views: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    } & {
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+        bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+        displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+        tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+        hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType>>, [undefined]>;
+        colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    }, {
+        width: number;
+    } & {
+        menuItems(): import("@jbrowse/core/ui").MenuItem[];
+    } & {
+        setDisplayName(name: string): void;
+        setWidth(newWidth: number): void;
+        setMinimized(flag: boolean): void;
+    } & {
+        volatileWidth: number | undefined;
+        minimumBlockWidth: number;
+        draggingTrackId: undefined | string;
+        volatileError: unknown;
+        afterDisplayedRegionsSetCallbacks: (() => void)[];
+        scaleFactor: number;
+        trackRefs: Record<string, HTMLDivElement>;
+        coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
+        coarseTotalBp: number;
+        leftOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset;
+        rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset;
+    } & {
+        readonly trackLabelsSetting: any;
+        readonly width: number;
+        readonly interRegionPaddingWidth: number;
+        readonly assemblyNames: string[];
+    } & {
+        scaleBarDisplayPrefix(): string | undefined;
+        MiniControlsComponent(): React.FC<any>;
+        HeaderComponent(): React.FC<any>;
+        readonly assemblyErrors: string;
+        readonly assembliesInitialized: boolean;
+        readonly initialized: boolean;
+        readonly hasDisplayedRegions: boolean;
+        readonly scaleBarHeight: number;
+        readonly headerHeight: number;
+        readonly trackHeights: number;
+        readonly trackHeightsWithResizeHandles: number;
+        readonly height: number;
+        readonly totalBp: number;
+        readonly maxBpPerPx: number;
+        readonly minBpPerPx: number;
+        readonly error: unknown;
+        readonly maxOffset: number;
+        readonly minOffset: number;
+        readonly displayedRegionsTotalPx: number;
+        renderProps(): any;
+        searchScope(assemblyName: string): {
+            assemblyName: string;
+            includeAggregateIndexes: boolean;
+            tracks: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IAnyType> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>>;
+        };
+        getTrack(id: string): any;
+        rankSearchResults(results: import("@jbrowse/core/TextSearch/BaseResults").default[]): import("@jbrowse/core/TextSearch/BaseResults").default[];
+        rewriteOnClicks(trackType: string, viewMenuActions: import("@jbrowse/core/ui").MenuItem[]): void;
+        readonly trackTypeActions: Map<string, import("@jbrowse/core/ui").MenuItem[]>;
+    } & {
+        setShowTrackOutlines(arg: boolean): void;
+        setColorByCDS(flag: boolean): void;
+        setShowCytobands(flag: boolean): void;
+        setWidth(newWidth: number): void;
+        setError(error: unknown): void;
+        setHideHeader(b: boolean): void;
+        setHideHeaderOverview(b: boolean): void;
+        setHideNoTracksActive(b: boolean): void;
+        setShowGridlines(b: boolean): void;
+        addToHighlights(highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType): void;
+        setHighlight(highlight?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType[]): void;
+        removeHighlight(highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType): void;
+        scrollTo(offsetPx: number): number;
+        zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
+        setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): void;
+        setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string): void;
+        setNewView(bpPerPx: number, offsetPx: number): void;
+        horizontallyFlip(): void;
+        showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
+        hideTrack(trackId: string): number;
+    } & {
+        moveTrackDown(id: string): void;
+        moveTrackUp(id: string): void;
+        moveTrackToTop(id: string): void;
+        moveTrackToBottom(id: string): void;
+        moveTrack(movingId: string, targetId: string): void;
+        toggleTrack(trackId: string): boolean;
+        setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
+        setShowCenterLine(b: boolean): void;
+        setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
+        activateTrackSelector(): import("@jbrowse/core/util").Widget;
+        getSelectedRegions(leftOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, rightOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): {
+            start: number;
+            end: number;
+            type: string;
+            regionNumber?: number;
+            reversed?: boolean;
+            refName: string;
+            assemblyName: string;
+            key: string;
+            offsetPx: number;
+            widthPx: number;
+            variant?: string;
+            isLeftEndOfDisplayedRegion?: boolean;
+        }[];
+        afterDisplayedRegionsSet(cb: () => void): void;
+        horizontalScroll(distance: number): number;
+        center(): void;
+        showAllRegions(): void;
+        showAllRegionsInAssembly(assemblyName?: string): void;
+        setDraggingTrackId(idx?: string): void;
+        setScaleFactor(factor: number): void;
+        clearView(): void;
+        exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions): Promise<void>;
+    } & {
+        slide: (viewWidths: number) => void;
+    } & {
+        zoom: (targetBpPerPx: number) => void;
+    } & {
+        readonly canShowCytobands: boolean;
+        readonly showCytobands: boolean;
+        readonly anyCytobandsExist: boolean;
+        readonly cytobandOffset: number;
+    } & {
+        menuItems(): import("@jbrowse/core/ui").MenuItem[];
+    } & {
+        readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
+        readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
+        readonly roundedDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
+        readonly visibleLocStrings: string;
+        readonly coarseVisibleLocStrings: string;
+    } & {
+        setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
+        afterAttach(): void;
+    } & {
+        moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): void;
+        navToLocString(input: string, optAssemblyName?: string): Promise<void>;
+        navToSearchString({ input, assembly, }: {
+            input: string;
+            assembly: import("@jbrowse/core/assemblyManager/assembly").Assembly;
+        }): Promise<void>;
+        navToLocations(parsedLocStrings: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string): Promise<void>;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").NavLocation): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").NavLocation[]): void;
+    } & {
+        rubberBandMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+        bpToPx({ refName, coord, regionNumber, }: {
+            refName: string;
+            coord: number;
+            regionNumber?: number;
+        }): {
+            index: number;
+            offsetPx: number;
+        } | undefined;
+        centerAt(coord: number, refName: string, regionNumber?: number): void;
+        pxToBp(px: number): {
+            coord: number;
+            index: number;
+            refName: string;
+            oob: boolean;
+            assemblyName: string;
+            offset: number;
+            start: number;
+            end: number;
+            reversed?: boolean;
+        };
+        readonly centerLineInfo: {
+            coord: number;
+            index: number;
+            refName: string;
+            oob: boolean;
+            assemblyName: string;
+            offset: number;
+            start: number;
+            end: number;
+            reversed?: boolean;
+        } | undefined;
+    } & {
+        afterCreate(): void;
+    }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    } & {
+        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+        bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+        displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+        tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+        hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType>>, [undefined]>;
+        colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    }>>, import("mobx-state-tree")._NotCustomized>>;
+    viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
+}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearSyntenyViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearSyntenyViewModel = Instance<LinearSyntenyViewStateModel>;

package/esm/LinearSyntenyView/model.js

@@ -51,9 +51,9 @@ export default function stateModelFactory(pluginManager) {
          */
         showAllRegions() {
             transaction(() => {
-                self.views.forEach(view => {
+                for (const view of self.views) {
                     view.showAllRegionsInAssembly();
-                });
+                }
             });
         },
     }))

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+export default function SVGLinearGenomeView({ trackLabelOffset, fontSize, textHeight, trackLabels, view, displayResults, rulerHeight, shift, }: {
+    textHeight: number;
+    trackLabels: string;
+    trackLabelOffset: number;
+    fontSize: number;
+    view: LinearGenomeViewModel;
+    displayResults: any;
+    rulerHeight: number;
+    shift: number;
+}): React.JSX.Element;