@jbrowse/plugin-linear-genome-view 4.0.4 → 4.1.3

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import RenderedBlocks from "./RenderedBlocks.js";
@@ -14,8 +15,9 @@ const useStyles = makeStyles()({
 const LinearBlocks = observer(function LinearBlocks({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions } = model;
+    const viewModel = getContainingView(model);
     return (_jsx("div", { className: classes.linearBlocks, style: {
-            left: `calc(${blockDefinitions.offsetPx}px - var(--offset-px))`,
+            left: blockDefinitions.offsetPx - viewModel.offsetPx,
         }, children: _jsx(RenderedBlocks, { model: model }) }));
 });
 export default LinearBlocks;

package/esm/BaseLinearDisplay/components/NonBlockCanvasDisplayComponent.d.ts

@@ -8,6 +8,7 @@ export interface NonBlockCanvasDisplayModel {
     drawn: boolean;
     loading: boolean;
     lastDrawnOffsetPx?: number;
+    lastDrawnBpPerPx?: number;
     statusMessage?: string;
     showLegend?: boolean;
     legendItems?: () => LegendItem[];

package/esm/BaseLinearDisplay/components/NonBlockCanvasDisplayComponent.js

@@ -31,14 +31,18 @@ const NonBlockCanvasDisplayComponent = observer(function NonBlockCanvasDisplayCo
     return error ? (_jsx(BlockErrorMessage, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
 });
 const DataDisplay = observer(function DataDisplay({ model, children, }) {
-    const { drawn, loading, showLegend, legendItems } = model;
+    const { drawn, loading, showLegend, legendItems, lastDrawnBpPerPx } = model;
     const view = getContainingView(model);
     const items = legendItems?.() ?? [];
-    const calculatedLeft = (model.lastDrawnOffsetPx ?? 0) - view.offsetPx;
+    const hasZoomed = lastDrawnBpPerPx !== undefined && lastDrawnBpPerPx !== view.bpPerPx;
+    const calculatedLeft = hasZoomed
+        ? 0
+        : (model.lastDrawnOffsetPx ?? 0) - view.offsetPx;
     return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [_jsx("div", { style: {
                     position: 'absolute',
                     left: calculatedLeft,
-                }, children: children }), showLegend && items.length > 0 ? _jsx(FloatingLegend, { items: items }) : null, calculatedLeft !== 0 || loading ? _jsx(LoadingBar, { model: model }) : null] }));
+                    visibility: hasZoomed ? 'hidden' : undefined,
+                }, children: children }), showLegend && items.length > 0 ? _jsx(FloatingLegend, { items: items }) : null, hasZoomed || calculatedLeft !== 0 || loading ? (_jsx(LoadingBar, { model: model })) : null] }));
 });
 const LoadingBar = observer(function LoadingBar({ model, }) {
     const { classes } = useStyles();

package/esm/BaseLinearDisplay/model.d.ts

@@ -1171,8 +1171,8 @@ export declare const BaseLinearDisplay: import("@jbrowse/mobx-state-tree").IMode
     showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
     showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
 }>>, {
-    id: string;
     type: string;
+    id: string;
     configuration: import("@jbrowse/mobx-state-tree").ModelSnapshotType<Record<string, any>>;
     rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;

package/esm/BaseLinearDisplay/model.js

@@ -10,8 +10,8 @@ import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import { autorun } from 'mobx';
+import { calculateSvgLegendWidth } from "./calculateSvgLegendWidth.js";
 import { deduplicateFeatureLabels } from "./components/util.js";
-import { calculateSvgLegendWidth } from "./index.js";
 import FeatureDensityMixin from "./models/FeatureDensityMixin.js";
 import TrackHeightMixin from "./models/TrackHeightMixin.js";
 import configSchema from "./models/configSchema.js";

package/esm/BaseLinearDisplay/models/NonBlockCanvasDisplayMixin.d.ts

@@ -2,19 +2,24 @@ import type { StopToken } from '@jbrowse/core/util/stopToken';
 export default function NonBlockCanvasDisplayMixin(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
     loading: boolean;
     lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number | undefined;
     ref: HTMLCanvasElement | null;
     renderingImageData: ImageBitmap | undefined;
     renderingStopToken: StopToken | undefined;
     statusMessage: string | undefined;
+    canvasDrawn: boolean;
 } & {
     readonly drawn: boolean;
+    readonly fullyDrawn: boolean;
 } & {
     setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setRenderingImageData(imageData: ImageBitmap | undefined): void;
     setRenderingStopToken(token?: StopToken): void;
     setStatusMessage(msg?: string): void;
+    setCanvasDrawn(drawn: boolean): void;
 } & {
     beforeDestroy(): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;

package/esm/BaseLinearDisplay/models/NonBlockCanvasDisplayMixin.js

@@ -6,20 +6,28 @@ export default function NonBlockCanvasDisplayMixin() {
         .volatile(() => ({
         loading: false,
         lastDrawnOffsetPx: undefined,
+        lastDrawnBpPerPx: undefined,
         ref: null,
         renderingImageData: undefined,
         renderingStopToken: undefined,
         statusMessage: undefined,
+        canvasDrawn: false,
     }))
         .views(self => ({
         get drawn() {
             return self.lastDrawnOffsetPx !== undefined;
         },
+        get fullyDrawn() {
+            return this.drawn && !self.loading && self.canvasDrawn;
+        },
     }))
         .actions(self => ({
         setLastDrawnOffsetPx(n) {
             self.lastDrawnOffsetPx = n;
         },
+        setLastDrawnBpPerPx(n) {
+            self.lastDrawnBpPerPx = n;
+        },
         setLoading(f) {
             self.loading = f;
         },
@@ -35,6 +43,9 @@ export default function NonBlockCanvasDisplayMixin() {
         setStatusMessage(msg) {
             self.statusMessage = msg;
         },
+        setCanvasDrawn(drawn) {
+            self.canvasDrawn = drawn;
+        },
     }))
         .actions(self => ({
         beforeDestroy() {

package/esm/LinearBareDisplay/model.d.ts

@@ -1173,8 +1173,8 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
     showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
 }>> & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & import("@jbrowse/mobx-state-tree")._NotCustomized, {
-    id: string;
     type: string;
+    id: string;
     configuration: import("@jbrowse/mobx-state-tree").ModelSnapshotType<Record<string, any>>;
     rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;

package/esm/LinearBasicDisplay/model.d.ts

@@ -1,5 +1,5 @@
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import type { MenuItem } from '@jbrowse/core/ui';
+import type { MenuItem, SubMenuItem } from '@jbrowse/core/ui';
 import type { Instance } from '@jbrowse/mobx-state-tree';
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("@jbrowse/mobx-state-tree").IModelType<{
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -93,7 +93,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     trackDisplayMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     trackMaxHeight: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
     configuration: AnyConfigurationSchemaType;
-    jexlFilters: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
+    jexlFiltersSetting: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
 } & {
     type: import("@jbrowse/mobx-state-tree").ISimpleType<"LinearBasicDisplay">;
     trackGeneGlyphMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
@@ -1096,7 +1096,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     featureUnderMouseVolatile: import("@jbrowse/core/util").Feature | undefined;
 } & {
-    readonly activeFilters: string[];
+    activeFilters(): string[];
     readonly rendererTypeName: any;
     readonly sequenceAdapter: any;
     readonly showLabels: any;
@@ -1243,6 +1243,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
     };
+    filterMenuItems(): MenuItem[];
+} & {
     trackMenuItems(): MenuItem[];
 } & {
     afterAttach(): void;
@@ -1264,6 +1266,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setGeneGlyphMode(val: string): void;
     setSubfeatureLabels(val: string): void;
     toggleDisplayDirectionalChevrons(): void;
+} & {
+    filterMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | SubMenuItem | {
+        label: string;
+        type: string;
+        checked: boolean;
+        onClick: () => void;
+    })[];
 } & {
     trackMenuItems(): MenuItem[];
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree").ModelSnapshotType<{
@@ -1358,7 +1367,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     trackDisplayMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     trackMaxHeight: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
     configuration: AnyConfigurationSchemaType;
-    jexlFilters: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
+    jexlFiltersSetting: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
 } & {
     type: import("@jbrowse/mobx-state-tree").ISimpleType<"LinearBasicDisplay">;
     trackGeneGlyphMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;

package/esm/LinearBasicDisplay/model.js

@@ -55,6 +55,31 @@ function stateModelFactory(configSchema) {
             self.trackDisplayDirectionalChevrons = !self.displayDirectionalChevrons;
         },
     }))
+        .views(self => {
+        const { filterMenuItems: superFilterMenuItems } = self;
+        return {
+            filterMenuItems() {
+                const filters = self.activeFilters();
+                return [
+                    {
+                        label: 'Show only genes',
+                        type: 'checkbox',
+                        checked: filters.includes("jexl:get(feature,'type')=='gene'"),
+                        onClick: () => {
+                            const geneFilter = "jexl:get(feature,'type')=='gene'";
+                            if (filters.includes(geneFilter)) {
+                                self.setJexlFilters(filters.filter(f => f !== geneFilter));
+                            }
+                            else {
+                                self.setJexlFilters([...filters, geneFilter]);
+                            }
+                        },
+                    },
+                    ...superFilterMenuItems(),
+                ];
+            },
+        };
+    })
         .views(self => {
         const { trackMenuItems: superTrackMenuItems } = self;
         return {
@@ -109,27 +134,6 @@ function stateModelFactory(configSchema) {
                         },
                     ];
                 }
-                const filtersMenu = findSubMenu(items, 'Filters');
-                if (filtersMenu) {
-                    filtersMenu.subMenu = [
-                        {
-                            label: 'Show only genes',
-                            type: 'checkbox',
-                            checked: self.activeFilters.includes("jexl:get(feature,'type')=='gene'"),
-                            onClick: () => {
-                                const geneFilter = "jexl:get(feature,'type')=='gene'";
-                                const currentFilters = self.activeFilters;
-                                if (currentFilters.includes(geneFilter)) {
-                                    self.setJexlFilters(currentFilters.filter((f) => f !== geneFilter));
-                                }
-                                else {
-                                    self.setJexlFilters([...currentFilters, geneFilter]);
-                                }
-                            },
-                        },
-                        ...filtersMenu.subMenu,
-                    ];
-                }
                 return items;
             },
         };

package/esm/LinearFeatureDisplay/components/AddFiltersDialog.d.ts

@@ -1,7 +1,7 @@
 declare const AddFiltersDialog: ({ model, handleClose, }: {
     model: {
         jexlFilters?: string[];
-        activeFilters: string[];
+        activeFilters: () => string[];
         setJexlFilters: (arg?: string[]) => void;
     };
     handleClose: () => void;

package/esm/LinearFeatureDisplay/components/AddFiltersDialog.js

@@ -23,17 +23,16 @@ function checkJexl(code) {
 const AddFiltersDialog = observer(function AddFiltersDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const { activeFilters } = model;
-    const [data, setData] = useState(activeFilters.join('\n'));
+    const [data, setData] = useState(activeFilters().join('\n'));
     const [error, setError] = useState();
     useEffect(() => {
         try {
-            data
+            for (const line of data
                 .split('\n')
                 .map(line => line.trim())
-                .filter(line => !!line)
-                .map(line => {
-                checkJexl(line.trim());
-            });
+                .filter(line => !!line)) {
+                checkJexl(line);
+            }
             setError(undefined);
         }
         catch (e) {
@@ -41,7 +40,7 @@ const AddFiltersDialog = observer(function AddFiltersDialog({ model, handleClose
             setError(e);
         }
     }, [data]);
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:startsWith(get(feature,'name'),'PREFIX')" }), " - show only feature where the string 'PREFIX' is the prefix of feature name. endsWith also works"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:includes(get(feature,'name'),'PREFIX')" }), " - show only feature where the string 'PREFIX' is the prefix of feature name"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] }), _jsxs("p", { children: ["Please see", ' ', _jsx("a", { href: "https://jbrowse.org/jb2/docs/config_guides/jexl/", children: "Jexl" }), ' ', "documentation for more information"] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
                             setData(event.target.value);
                         }, slotProps: {
                             input: {

package/esm/LinearFeatureDisplay/model.d.ts

@@ -95,7 +95,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     trackDisplayMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     trackMaxHeight: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
     configuration: AnyConfigurationSchemaType;
-    jexlFilters: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
+    jexlFiltersSetting: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -1092,7 +1092,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     featureUnderMouseVolatile: Feature | undefined;
 } & {
-    readonly activeFilters: string[];
+    activeFilters(): string[];
     readonly rendererTypeName: any;
     readonly sequenceAdapter: any;
     readonly showLabels: any;
@@ -1239,6 +1239,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
     };
+    filterMenuItems(): MenuItem[];
+} & {
     trackMenuItems(): MenuItem[];
 } & {
     afterAttach(): void;
@@ -1421,7 +1423,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     trackDisplayMode: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     trackMaxHeight: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
     configuration: AnyConfigurationSchemaType;
-    jexlFilters: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
+    jexlFiltersSetting: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>;
 }>>;
 export type LinearFeatureDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearFeatureDisplayModel = Instance<LinearFeatureDisplayStateModel>;

package/esm/LinearFeatureDisplay/model.js

@@ -4,8 +4,9 @@ import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/rendere
 import { SimpleFeature, getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { addDisposer, cast, getParent, isAlive, types, } from '@jbrowse/mobx-state-tree';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { reaction } from 'mobx';
+import { reaction, toJS } from 'mobx';
 import { BaseLinearDisplay } from "../BaseLinearDisplay/index.js";
 const SetMaxHeightDialog = lazy(() => import("./components/SetMaxHeightDialog.js"));
 const AddFiltersDialog = lazy(() => import("./components/AddFiltersDialog.js"));
@@ -18,14 +19,14 @@ function stateModelFactory(configSchema) {
         trackDisplayMode: types.maybe(types.string),
         trackMaxHeight: types.maybe(types.number),
         configuration: ConfigurationReference(configSchema),
-        jexlFilters: types.maybe(types.array(types.string)),
+        jexlFiltersSetting: types.maybe(types.array(types.string)),
     }))
         .volatile(() => ({
         featureUnderMouseVolatile: undefined,
     }))
         .views(self => ({
-        get activeFilters() {
-            return (self.jexlFilters ??
+        activeFilters() {
+            return (toJS(self.jexlFiltersSetting) ??
                 getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
         },
         get rendererTypeName() {
@@ -67,7 +68,7 @@ function stateModelFactory(configSchema) {
     }))
         .actions(self => ({
         setJexlFilters(f) {
-            self.jexlFilters = cast(f);
+            self.jexlFiltersSetting = cast(f);
         },
         setFeatureUnderMouse(feat) {
             self.featureUnderMouseVolatile = feat;
@@ -91,7 +92,7 @@ function stateModelFactory(configSchema) {
         },
     }))
         .views(self => {
-        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, renderingProps: superRenderingProps, } = self;
+        const { renderProps: superRenderProps, renderingProps: superRenderingProps, } = self;
         return {
             renderProps() {
                 const superProps = superRenderProps();
@@ -99,7 +100,7 @@ function stateModelFactory(configSchema) {
                     ...superProps,
                     config: self.rendererConfig,
                     filters: new SerializableFilterChain({
-                        filters: self.activeFilters,
+                        filters: self.activeFilters(),
                     }),
                     sequenceAdapter: self.sequenceAdapter,
                 };
@@ -163,6 +164,27 @@ function stateModelFactory(configSchema) {
                     },
                 };
             },
+            filterMenuItems() {
+                return [
+                    {
+                        label: 'Edit filters...',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                AddFiltersDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -226,21 +248,9 @@ function stateModelFactory(configSchema) {
                         },
                     },
                     {
-                        label: 'Filters',
-                        subMenu: [
-                            {
-                                label: 'Edit filters...',
-                                onClick: () => {
-                                    getSession(self).queueDialog(handleClose => [
-                                        AddFiltersDialog,
-                                        {
-                                            model: self,
-                                            handleClose,
-                                        },
-                                    ]);
-                                },
-                            },
-                        ],
+                        label: 'Filter by...',
+                        icon: ClearAllIcon,
+                        subMenu: self.filterMenuItems(),
                     },
                 ];
             },
@@ -279,7 +289,7 @@ function stateModelFactory(configSchema) {
         if (!snap) {
             return snap;
         }
-        const { trackShowLabels, trackShowDescriptions, trackDisplayMode, trackMaxHeight, jexlFilters, ...rest } = snap;
+        const { trackShowLabels, trackShowDescriptions, trackDisplayMode, trackMaxHeight, jexlFiltersSetting, ...rest } = snap;
         return {
             ...rest,
             ...(trackShowLabels !== undefined ? { trackShowLabels } : {}),
@@ -288,7 +298,7 @@ function stateModelFactory(configSchema) {
                 : {}),
             ...(trackDisplayMode !== undefined ? { trackDisplayMode } : {}),
             ...(trackMaxHeight !== undefined ? { trackMaxHeight } : {}),
-            ...(jexlFilters?.length ? { jexlFilters } : {}),
+            ...(jexlFiltersSetting?.length ? { jexlFiltersSetting } : {}),
         };
     });
 }

package/esm/LinearGenomeView/afterAttach.js

@@ -34,11 +34,17 @@ export function setupInitAutorun(self) {
                 const idsNotFound = [];
                 for (const t of init.tracks) {
                     try {
-                        self.showTrack(t);
+                        if (typeof t === 'string') {
+                            self.showTrack(t);
+                        }
+                        else {
+                            self.showTrack(t.trackId, t.trackSnapshot ?? {}, t.displaySnapshot ?? {});
+                        }
                     }
                     catch (e) {
+                        const trackId = typeof t === 'string' ? t : t.trackId;
                         if (/Could not resolve identifier/.exec(`${e}`)) {
-                            idsNotFound.push(t);
+                            idsNotFound.push(trackId);
                         }
                         else {
                             throw e;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const CenterLine: ({ model }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const Gridlines: ({ model, offset, }: {
     model: LGV;

package/esm/LinearGenomeView/components/Gridlines.js

@@ -60,11 +60,12 @@ const RenderedVerticalGuides = observer(function RenderedVerticalGuides({ model,
 });
 const Gridlines = observer(function Gridlines({ model, offset = 0, }) {
     const { classes } = useStyles();
-    const { staticBlocks, scaleFactor } = model;
+    const { staticBlocks, scaleFactor, offsetPx } = model;
+    const offsetLeft = staticBlocks.offsetPx - offsetPx;
     return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
             transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
         }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
-                left: `calc(${staticBlocks.offsetPx}px - var(--offset-px) - ${offset}px)`,
+                left: offsetLeft - offset,
                 width: staticBlocks.totalWidthPx,
             }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
 });

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const LinearGenomeViewHeader: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 export default function HeaderPanControls({ model }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const HeaderRegionWidth: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const HeaderTrackSelectorButton: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const HeaderZoomControls: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const LinearGenomeViewImportForm: ({ model }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 type LGV = LinearGenomeViewModel;
 declare const ImportFormRefNameAutocomplete: ({ model, selectedAsm, value, setValue, setOption, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const LinearGenomeView: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const LinearGenomeViewContainer: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const MiniControls: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 declare const NoTracksActiveButton: ({ model, }: {
     model: LinearGenomeViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
 declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
 declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
     model: LinearGenomeViewModel;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
 declare const OverviewScalebarTickLabels: ({ block, scale, overview, model, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const Rubberband: ({ model, ControlComponent, }: {
     model: LGV;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 interface ScalebarProps {
     model: LGV;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -22,10 +22,11 @@ const useStyles = makeStyles()({
 const Scalebar = observer(function Scalebar({ model, style, className, ...other }) {
     const { classes } = useStyles();
     const { scaleFactor, staticBlocks, offsetPx } = model;
-    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", style: { ...style, '--offset-px': `${offsetPx}px` }, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
+    const offsetLeft = Math.round(staticBlocks.offsetPx - offsetPx);
+    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", style: style, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
                     transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
                 }, children: _jsx("div", { className: classes.scalebar, style: {
-                        transform: `translateX(calc(${staticBlocks.offsetPx}px - var(--offset-px) - 1px))`,
+                        transform: `translateX(${offsetLeft - 1}px)`,
                         width: staticBlocks.totalWidthPx,
                     }, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 });

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const ScalebarCoordinateLabels: ({ model, }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const ScalebarRefNameLabels: ({ model, }: {
     model: LGV;

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -65,8 +65,8 @@ const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }
                     (isLeftEndOfDisplayedRegion || last) &&
                     hasEnoughSpace ? (_jsxs("span", { style: {
                         left: last
-                            ? 'max(0px, calc(-1 * var(--offset-px)))'
-                            : `calc(${blockOffsetPx}px - var(--offset-px) - 1px)`,
+                            ? Math.max(0, -offsetPx)
+                            : blockOffsetPx - offsetPx - 1,
                         paddingLeft: last ? 0 : 1,
                         maxWidth: maxWidth !== undefined && maxWidth > 0 ? maxWidth : undefined,
                     }, className: classes.refLabel, "data-testid": `refLabel-${refName}`, onMouseDown: () => {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
 declare const TrackContainer: ({ model, track, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
 declare const TrackLabelContainer: ({ track, view, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 declare function TrackLabelDragHandle({ trackId, view, track, }: {
     trackId: string;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 type LGV = LinearGenomeViewModel;
 declare const TrackRenderingContainer: ({ model, track, }: {

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const TracksContainer: ({ children, model, }: {
     children: React.ReactNode;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -30,10 +30,10 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, style: { '--offset-px': `${model.offsetPx}px` }, onMouseDown: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
                 }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 interface AnchorPosition {
     offsetX: number;
     clientX: number;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 export declare function useSideScroll(model: LinearGenomeViewModel): {
     mouseDown: (event: React.MouseEvent) => void;
     mouseUp: (event: React.MouseEvent) => void;

package/esm/LinearGenomeView/index.d.ts

@@ -1,3 +1,4 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export * from './model.ts';
+export * from './types.ts';

package/esm/LinearGenomeView/index.js

@@ -12,3 +12,4 @@ export default function LinearGenomeViewF(pluginManager) {
     });
 }
 export * from "./model.js";
+export * from "./types.js";

package/esm/LinearGenomeView/model.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation } from './types.ts';
+import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation, VolatileGuide } from './types.ts';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
@@ -54,6 +54,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     rightOffset: undefined | BpOffset;
     isScalebarRefNameMenuOpen: boolean;
     scalebarRefNameClickPending: boolean;
+    volatileGuides: VolatileGuide[];
 } & {
     readonly pinnedTracks: any[];
     readonly unpinnedTracks: any[];
@@ -116,6 +117,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     addToHighlights(highlight: HighlightType): void;
     setHighlight(highlight?: HighlightType[]): void;
     removeHighlight(highlight: HighlightType): void;
+    setVolatileGuides(guides: VolatileGuide[]): void;
     scrollTo(offsetPx: number): number;
     zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
     setOffsets(left?: BpOffset, right?: BpOffset): void;

package/esm/LinearGenomeView/model.js

@@ -58,6 +58,7 @@ export function stateModelFactory(pluginManager) {
         rightOffset: undefined,
         isScalebarRefNameMenuOpen: false,
         scalebarRefNameClickPending: false,
+        volatileGuides: [],
     }))
         .views(self => ({
         get pinnedTracks() {
@@ -322,6 +323,9 @@ export function stateModelFactory(pluginManager) {
         removeHighlight(highlight) {
             self.highlight.remove(highlight);
         },
+        setVolatileGuides(guides) {
+            self.volatileGuides = guides;
+        },
         scrollTo(offsetPx) {
             const newOffsetPx = clamp(offsetPx, self.minOffset, self.maxOffset);
             self.offsetPx = newOffsetPx;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 export default function SVGGridlines({ model, height, }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }: {
     model: LinearGenomeViewModel;
     rulerHeight: number;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { ExportSvgOptions } from '../types.ts';
 type LGV = LinearGenomeViewModel;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 export default function SVGRegionSeparators({ model, height, }: {
     height: number;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 export default function SVGRuler({ model, fontSize, }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 export default function SVGScalebar({ model, fontSize, }: {
     model: LGV;

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '../index.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 type LGV = LinearGenomeViewModel;
 interface DisplayResult {

package/esm/LinearGenomeView/types.d.ts

@@ -37,10 +37,18 @@ export interface NavLocation {
     end?: number;
     assemblyName?: string;
 }
+export interface VolatileGuide {
+    xPos: number;
+}
+export type TrackInit = string | {
+    trackId: string;
+    displaySnapshot?: Record<string, unknown>;
+    trackSnapshot?: Record<string, unknown>;
+};
 export interface InitState {
     loc?: string;
     assembly: string;
-    tracks?: string[];
+    tracks?: TrackInit[];
     tracklist?: boolean;
     nav?: boolean;
     highlight?: string[];

package/esm/index.d.ts

@@ -1171,8 +1171,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
             showLegend: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
             showTooltips: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>>;
         }>>, {
-            id: string;
             type: string;
+            id: string;
             configuration: import("@jbrowse/mobx-state-tree").ModelSnapshotType<Record<string, any>>;
             rpcDriverName: string | undefined;
             heightPreConfig: number | undefined;
@@ -1235,6 +1235,7 @@ export { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModel
 export { BaseLinearDisplay, BaseLinearDisplayComponent, BlockMsg, FeatureDensityMixin, FloatingLegend, NonBlockCanvasDisplayComponent, NonBlockCanvasDisplayMixin, SVGLegend, TooLargeMessage, TrackHeightMixin, baseLinearDisplayConfigSchema, calculateSvgLegendWidth, createSubfeatureLabelMetadata, drawCanvasImageData, } from './BaseLinearDisplay/index.ts';
 export type { NonBlockCanvasDisplayMixinType, NonBlockCanvasDisplayModel, } from './BaseLinearDisplay/index.ts';
 export { type LinearGenomeViewModel, type LinearGenomeViewStateModel, RefNameAutocomplete, SearchBox, } from './LinearGenomeView/index.ts';
+export type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation, VolatileGuide, } from './LinearGenomeView/types.ts';
 export { SVGGridlines, SVGRuler, SVGTracks, renderToSvg, } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView.tsx';
 export { totalHeight } from './LinearGenomeView/svgcomponents/util.ts';
 export { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay/index.ts';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "4.0.4",
+  "version": "4.1.3",
+  "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -21,15 +22,15 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
     "@types/file-saver-es": "^2.0.3",
     "copy-to-clipboard": "^3.3.3",
     "file-saver-es": "^2.0.5",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.0.4",
-    "@jbrowse/product-core": "^4.0.4"
+    "@jbrowse/product-core": "^4.1.3",
+    "@jbrowse/core": "^4.1.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",