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

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;

package/esm/LinearSyntenyView/svgcomponents/SVGLinearGenomeView.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useTheme } from '@mui/material';
+import { getFillProps } from '@jbrowse/core/util';
+import { SVGTracks, SVGRuler, } from '@jbrowse/plugin-linear-genome-view';
+export default function SVGLinearGenomeView({ trackLabelOffset, fontSize, textHeight, trackLabels, view, displayResults, rulerHeight, shift, }) {
+    const theme = useTheme();
+    return (React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
+        React.createElement("g", { transform: `translate(${trackLabelOffset})` },
+            React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, view.assemblyNames.join(', ')),
+            React.createElement(SVGRuler, { model: displayResults.view, fontSize: fontSize })),
+        React.createElement("g", { transform: `translate(0 ${rulerHeight + fontSize})` },
+            React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults.view, displayResults: displayResults.data, trackLabelOffset: trackLabelOffset }))));
+}

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

@@ -1,4 +1,2 @@
 import { ExportSvgOptions, LinearSyntenyViewModel } from '../model';
-type LSV = LinearSyntenyViewModel;
-export declare function renderToSvg(model: LSV, opts: ExportSvgOptions): Promise<string>;
-export {};
+export declare function renderToSvg(model: LinearSyntenyViewModel, opts: ExportSvgOptions): Promise<string>;

package/esm/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js

@@ -2,26 +2,27 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material';
 import { getRoot } from 'mobx-state-tree';
 import { when } from 'mobx';
-import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, getFillProps, } from '@jbrowse/core/util';
+import { getSession, getSerializedSvg, max, measureText, ReactRendering, renderToAbstractCanvas, renderToStaticMarkup, sum, } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { SVGTracks, SVGRuler, totalHeight, } from '@jbrowse/plugin-linear-genome-view';
+import { totalHeight } from '@jbrowse/plugin-linear-genome-view';
 // locals
 import SVGBackground from './SVGBackground';
+import SVGLinearGenomeView from './SVGLinearGenomeView';
 import { drawRef } from '../../LinearSyntenyDisplay/drawSynteny';
 // render LGV to SVG
 export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
-    const { textHeight = 18, headerHeight = 30, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
+    const { textHeight = 18, rulerHeight = 30, fontSize = 13, trackLabels = 'offset', Wrapper = ({ children }) => children, themeName = 'default', } = opts;
     const session = getSession(model);
     const themeVar = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
-    const { width, views, middleComparativeHeight: synH, tracks } = model;
+    const { width, views, levels } = model;
     const shift = 50;
-    const offset = headerHeight + rulerHeight;
+    const offset = rulerHeight;
     const { createRootFn } = getRoot(model);
     const heights = views.map(v => totalHeight(v.tracks, textHeight, trackLabels) + offset);
-    const totalHeightSvg = sum(heights) + synH + 100;
+    const totalHeightSvg = sum(heights) + sum(levels.map(l => l.height)) + 100;
     const displayResults = await Promise.all(views.map(async (view) => ({
         view,
         data: await Promise.all(view.tracks.map(async (track) => {
@@ -33,50 +34,58 @@ export async function renderToSvg(model, opts) {
             };
         })),
     })));
-    const renderings = await Promise.all(tracks.map(async (track) => {
+    const renderings = await Promise.all(levels.map(async (level) => await Promise.all(level.tracks.map(async (track) => {
         const d = track.displays[0];
         await when(() => (d.ready !== undefined ? d.ready : true));
-        const r = await renderToAbstractCanvas(width, synH, { exportSVG: opts }, ctx => {
+        const r = await renderToAbstractCanvas(width, level.height, { exportSVG: opts }, ctx => {
             drawRef(d, ctx);
             return undefined;
         });
         if ('imageData' in r) {
             throw new Error('found a canvas in svg export, probably a bug');
         }
-        if ('canvasRecordedData' in r) {
+        else if ('canvasRecordedData' in r) {
             return {
                 html: await getSerializedSvg({
                     ...r,
                     width,
-                    height: synH,
+                    height: level.height,
                 }),
             };
         }
-        return r;
-    }));
-    const trackLabelMaxLen = max(views.flatMap(view => view.tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize))), 0) + 40;
+        else {
+            return r;
+        }
+    }))));
+    const trackLabelMaxLen = max(views.flatMap(view => view.tracks.map(track => measureText(getTrackName(track.configuration, session), fontSize))), 0) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
     const w = width + trackLabelOffset;
     const theme = createJBrowseTheme(themeVar);
+    const RenderList = [
+        React.createElement(SVGLinearGenomeView, { rulerHeight: rulerHeight, trackLabelOffset: trackLabelOffset, shift: shift, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[0], key: views[0].id, view: views[0], fontSize: fontSize }),
+    ];
+    let currOffset = heights[0] + fontSize + rulerHeight;
+    for (let i = 1; i < views.length; i++) {
+        const view = views[i];
+        const level = levels[i - 1];
+        const rendering = renderings[i - 1];
+        const height = heights[i];
+        const levelHeight = level.height || 0;
+        RenderList.push(React.createElement("g", { key: view.id, transform: `translate(0 ${currOffset})` },
+            levelHeight ? (React.createElement("defs", null,
+                React.createElement("clipPath", { id: `synclip-${i}` },
+                    React.createElement("rect", { x: 0, y: 0, width: width, height: levelHeight })))) : null,
+            React.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})` }, rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => (
+            /* biome-ignore lint/suspicious/noArrayIndexKey: */
+            React.createElement(ReactRendering, { key: i, rendering: r })))),
+            React.createElement("g", { transform: `translate(0 ${levelHeight})` },
+                React.createElement(SVGLinearGenomeView, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], key: view.id, view: view, fontSize: fontSize }))));
+        currOffset += height + fontSize + rulerHeight + levelHeight;
+    }
     // the xlink namespace is used for rendering <image> tag
     return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Wrapper, null,
             React.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
                 React.createElement(SVGBackground, { width: w, height: totalHeightSvg, shift: shift }),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize})` },
-                    React.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[0].assemblyNames.join(', ')),
-                        React.createElement(SVGRuler, { model: displayResults[0].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[0].view, displayResults: displayResults[0].data, offset: offset, trackLabelOffset: trackLabelOffset })),
-                React.createElement("defs", null,
-                    React.createElement("clipPath", { id: 'synclip' },
-                        React.createElement("rect", { x: 0, y: 0, width: width, height: synH }))),
-                React.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize + heights[0]})`, clipPath: 'url(#synclip)' }, renderings.map((r, i) => (
-                /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                React.createElement(ReactRendering, { key: i, rendering: r })))),
-                React.createElement("g", { transform: `translate(${shift} ${fontSize + heights[0] + synH})` },
-                    React.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        React.createElement("text", { x: 0, fontSize: fontSize, ...getFillProps(theme.palette.text.primary) }, views[1].assemblyNames.join(', ')),
-                        React.createElement(SVGRuler, { model: displayResults[1].view, fontSize: fontSize })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, trackLabels: trackLabels, fontSize: fontSize, model: displayResults[1].view, displayResults: displayResults[1].data, offset: offset, trackLabelOffset: trackLabelOffset }))))), createRootFn);
+                RenderList))), createRootFn);
 }

package/esm/LinearSyntenyViewHelper/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function LinearSyntenyViewF(pluginManager: PluginManager): void;

package/esm/LinearSyntenyViewHelper/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import { linearSyntenyViewHelperModelFactory } from './stateModelFactory';
+function UnusedComponent() {
+    return React.createElement("div", null);
+}
+export default function LinearSyntenyViewF(pluginManager) {
+    pluginManager.addViewType(() => {
+        return new ViewType({
+            name: 'LinearSyntenyViewHelper',
+            displayName: 'Linear synteny view (helper)',
+            viewMetadata: {
+                hiddenFromGUI: true,
+            },
+            stateModel: linearSyntenyViewHelperModelFactory(pluginManager),
+            ReactComponent: UnusedComponent,
+        });
+    });
+}

package/esm/LinearSyntenyViewHelper/stateModelFactory.d.ts

@@ -0,0 +1,30 @@
+import { Instance } from 'mobx-state-tree';
+import PluginManager from '@jbrowse/core/PluginManager';
+export declare function linearSyntenyViewHelperModelFactory(pluginManager: PluginManager): 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>;
+}, {
+    /**
+     * #action
+     */
+    setHeight(n: number): number;
+    /**
+     * #action
+     */
+    showTrack(trackId: string, initialSnapshot?: {}): void;
+    /**
+     * #action
+     */
+    hideTrack(trackId: string): number;
+    /**
+     * #action
+     */
+    toggleTrack(trackId: string): boolean;
+} & {
+    readonly assemblyNames: (string | undefined)[];
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type LinearSyntenyViewHelperStateModel = ReturnType<typeof linearSyntenyViewHelperModelFactory>;
+export type LinearSyntenyViewHelperModel = Instance<LinearSyntenyViewHelperStateModel>;

package/esm/LinearSyntenyViewHelper/stateModelFactory.js

@@ -0,0 +1,102 @@
+import { getRoot, resolveIdentifier, types, getParent, } from 'mobx-state-tree';
+import { transaction } from 'mobx';
+import { ElementId } from '@jbrowse/core/util/types/mst';
+export function linearSyntenyViewHelperModelFactory(pluginManager) {
+    return types
+        .model('LinearSyntenyViewHelper', {
+        /**
+         * #property
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        type: 'LinearSyntenyViewHelper',
+        /**
+         * #property
+         */
+        tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        /**
+         * #property
+         */
+        height: 100,
+        /**
+         * #property
+         */
+        level: types.number,
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setHeight(n) {
+            self.height = n;
+            return self.height;
+        },
+        /**
+         * #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}`);
+            }
+            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,
+                    },
+                ],
+            }));
+        },
+        /**
+         * #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;
+        },
+        /**
+         * #action
+         */
+        toggleTrack(trackId) {
+            const hiddenCount = this.hideTrack(trackId);
+            if (!hiddenCount) {
+                this.showTrack(trackId);
+                return true;
+            }
+            return false;
+        },
+    }))
+        .views(self => ({
+        get assemblyNames() {
+            const p = getParent(self, 2);
+            return [
+                p.views[self.level].assemblyNames[0],
+                p.views[self.level + 1].assemblyNames[0],
+            ];
+        },
+    }));
+}

package/esm/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+interface SyntenyFeatureDetailModel {
+    trackId: string;
+    featureData: SimpleFeatureSerialized;
+    level?: number;
+    view: {
+        type: string;
+    };
+}
+declare const SyntenyFeatureDetail: ({ model, }: {
+    model: SyntenyFeatureDetailModel;
+}) => React.JSX.Element;
+export default SyntenyFeatureDetail;