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

package/esm/LinearComparativeView/model.d.ts

@@ -17,8 +17,20 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     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>>;
@@ -254,10 +266,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
      */
     width: number | undefined;
 } & {
-    /**
-     * #getter
-     */
-    readonly highResolutionScaling: number;
     /**
      * #getter
      */
@@ -288,23 +296,23 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     /**
      * #action
      */
-    setMiddleComparativeHeight(n: number): number;
+    setLevelHeight(newHeight: number, level?: number): number;
     /**
      * #action
      */
-    activateTrackSelector(): import("@jbrowse/core/util").Widget | undefined;
+    activateTrackSelector(level: number): import("@jbrowse/core/util").Widget;
     /**
      * #action
      */
-    toggleTrack(trackId: string): boolean;
+    toggleTrack(trackId: string, level?: number): void;
     /**
      * #action
      */
-    showTrack(trackId: string, initialSnapshot?: {}): void;
+    showTrack(trackId: string, level?: number, initialSnapshot?: {}): void;
     /**
      * #action
      */
-    hideTrack(trackId: string): number;
+    hideTrack(trackId: string, level?: number): void;
     /**
      * #action
      */
@@ -334,7 +342,252 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     }[];
 } & {
     afterAttach(): void;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, 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").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(): 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: MenuItem[]): void;
+        readonly trackTypeActions: Map<string, 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(): 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(): 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")._NotCustomized>;
 export type LinearComparativeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearComparativeViewModel = Instance<LinearComparativeViewStateModel>;
 export default stateModelFactory;

package/esm/LinearComparativeView/model.js

@@ -1,12 +1,11 @@
 import { lazy } from 'react';
-import { addDisposer, cast, getPath, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
-import { autorun, transaction } from 'mobx';
+import { addDisposer, cast, getPath, types, } from 'mobx-state-tree';
+import { autorun } from 'mobx';
 // jbrowse
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
 import { getSession, isSessionModelWithWidgets, avg } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 // icons
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 // lazies
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
@@ -16,6 +15,8 @@ const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImp
  * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pluginManager) {
+    var _a;
+    const LinearSyntenyViewHelper = (_a = pluginManager.getViewType('LinearSyntenyViewHelper')) === null || _a === void 0 ? void 0 : _a.stateModel;
     return types
         .compose('LinearComparativeView', BaseViewModel, types.model({
         /**
@@ -41,11 +42,7 @@ function stateModelFactory(pluginManager) {
         /**
          * #property
          */
-        middleComparativeHeight: 100,
-        /**
-         * #property
-         */
-        tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        levels: types.array(LinearSyntenyViewHelper),
         /**
          * #property
          * currently this is limited to an array of two
@@ -67,12 +64,6 @@ function stateModelFactory(pluginManager) {
         width: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
-        get highResolutionScaling() {
-            return 2;
-        },
         /**
          * #getter
          */
@@ -138,94 +129,69 @@ function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        setMiddleComparativeHeight(n) {
-            self.middleComparativeHeight = n;
-            return self.middleComparativeHeight;
+        setLevelHeight(newHeight, level = 0) {
+            const l = self.levels[level];
+            l.setHeight(newHeight);
+            return l.height;
         },
         /**
          * #action
          */
-        activateTrackSelector() {
+        activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
                 if (isSessionModelWithWidgets(session)) {
-                    const selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', { view: self });
+                    const selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', {
+                        view: self.levels[level],
+                    });
                     session.showWidget(selector);
                     return selector;
                 }
-                return undefined;
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
         /**
          * #action
          */
-        toggleTrack(trackId) {
-            const hiddenCount = this.hideTrack(trackId);
-            if (!hiddenCount) {
-                this.showTrack(trackId);
-                return true;
-            }
-            return false;
+        toggleTrack(trackId, level = 0) {
+            var _a;
+            (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.toggleTrack(trackId);
         },
         /**
          * #action
          */
-        showTrack(trackId, initialSnapshot = {}) {
-            const schema = pluginManager.pluggableConfigSchemaType('track');
-            const configuration = resolveIdentifier(schema, getRoot(self), trackId);
-            if (!configuration) {
-                throw new Error(`track not found ${trackId}`);
-            }
-            const trackType = pluginManager.getTrackType(configuration.type);
-            if (!trackType) {
-                throw new Error(`unknown track type ${configuration.type}`);
+        showTrack(trackId, level = 0, initialSnapshot = {}) {
+            if (!self.levels[level]) {
+                self.levels[level] = cast({ level });
             }
-            const viewType = pluginManager.getViewType(self.type);
-            const supportedDisplays = new Set(viewType.displayTypes.map(d => d.name));
-            const displayConf = configuration.displays.find((d) => supportedDisplays.has(d.type));
-            if (!displayConf) {
-                throw new Error(`could not find a compatible display for view type ${self.type}`);
-            }
-            self.tracks.push(trackType.stateModel.create({
-                ...initialSnapshot,
-                type: configuration.type,
-                configuration,
-                displays: [{ type: displayConf.type, configuration: displayConf }],
-            }));
+            self.levels[level].showTrack(trackId, initialSnapshot);
         },
         /**
          * #action
          */
-        hideTrack(trackId) {
-            const schema = pluginManager.pluggableConfigSchemaType('track');
-            const config = resolveIdentifier(schema, getRoot(self), trackId);
-            const shownTracks = self.tracks.filter(t => t.configuration === config);
-            transaction(() => {
-                shownTracks.forEach(t => self.tracks.remove(t));
-            });
-            return shownTracks.length;
+        hideTrack(trackId, level = 0) {
+            var _a;
+            (_a = self.levels[level]) === null || _a === void 0 ? void 0 : _a.hideTrack(trackId);
         },
         /**
          * #action
          */
         squareView() {
             const average = avg(self.views.map(v => v.bpPerPx));
-            self.views.forEach(view => {
+            for (const view of self.views) {
                 const center = view.pxToBp(view.width / 2);
                 view.setNewView(average, view.offsetPx);
-                if (!center.refName) {
-                    return;
+                if (center.refName) {
+                    view.centerAt(center.coord, center.refName, center.index);
                 }
-                view.centerAt(center.coord, center.refName, center.index);
-            });
+            }
         },
         /**
          * #action
          */
         clearView() {
             self.views = cast([]);
-            self.tracks = cast([]);
+            self.levels = cast([]);
         },
     }))
         .views(() => ({
@@ -244,24 +210,19 @@ function stateModelFactory(pluginManager) {
          */
         menuItems() {
             return [
-                ...self.views
-                    .map((view, idx) => [idx, view.menuItems()])
-                    .map(f => ({ label: `View ${f[0] + 1} Menu`, subMenu: f[1] })),
                 {
                     label: 'Return to import form',
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
                             ReturnToImportFormDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
                     icon: FolderOpenIcon,
                 },
-                {
-                    label: 'Open track selector',
-                    onClick: self.activateTrackSelector,
-                    icon: TrackSelectorIcon,
-                },
             ];
         },
         /**
@@ -272,12 +233,12 @@ function stateModelFactory(pluginManager) {
                 {
                     label: 'Zoom to region(s)',
                     onClick: () => {
-                        self.views.forEach(view => {
+                        for (const view of self.views) {
                             const { leftOffset, rightOffset } = view;
                             if (leftOffset && rightOffset) {
                                 view.moveTo(leftOffset, rightOffset);
                             }
-                        });
+                        }
                     },
                 },
             ];
@@ -287,12 +248,21 @@ function stateModelFactory(pluginManager) {
         afterAttach() {
             addDisposer(self, autorun(() => {
                 if (self.width) {
-                    self.views.forEach(v => {
-                        v.setWidth(self.width);
-                    });
+                    for (const view of self.views) {
+                        view.setWidth(self.width);
+                    }
                 }
             }));
         },
-    }));
+    }))
+        .preProcessSnapshot(snap => {
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const { tracks, levels = [{ tracks, level: 0 }], ...rest } = snap || {};
+        return {
+            ...rest,
+            levels,
+        };
+    });
 }
 export default stateModelFactory;

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -1,4 +1,4 @@
-import { addDisposer, getSnapshot } from 'mobx-state-tree';
+import { addDisposer, getParent, getSnapshot } from 'mobx-state-tree';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
@@ -16,7 +16,7 @@ export function doAfterAttach(self) {
         if (!ctx1 || !ctx3) {
             return;
         }
-        const height = view.middleComparativeHeight;
+        const height = self.height;
         const width = view.width;
         ctx1.clearRect(0, 0, width, height);
         ctx3.clearRect(0, 0, width, height);
@@ -50,6 +50,8 @@ export function doAfterAttach(self) {
         }
         const { assemblyManager } = getSession(self);
         const view = getContainingView(self);
+        // @ts-expect-error
+        const level = getParent(self, 4).level;
         const viewSnaps = view.views.map(view => ({
             ...getSnapshot(view),
             width: view.width,
@@ -75,8 +77,8 @@ export function doAfterAttach(self) {
             const r2 = mate.refName;
             const ref1 = (a1 === null || a1 === void 0 ? void 0 : a1.getCanonicalRefName(r1)) || r1;
             const ref2 = (a2 === null || a2 === void 0 ? void 0 : a2.getCanonicalRefName(r2)) || r2;
-            const v1 = viewSnaps[0];
-            const v2 = viewSnaps[1];
+            const v1 = viewSnaps[level];
+            const v2 = viewSnaps[level + 1];
             const p11 = bpToPx({ self: v1, refName: ref1, coord: f1s });
             const p12 = bpToPx({ self: v1, refName: ref1, coord: f1e });
             const p21 = bpToPx({ self: v2, refName: ref2, coord: f2s });