@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/LinearAlignmentsDisplay/model.d.ts

@@ -1,45 +1,45 @@
-import type { FilterBy } from '../shared/types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter';
 import type { MenuItem } from '@jbrowse/core/ui';
-import type { Instance } from 'mobx-state-tree';
-declare function stateModelFactory(pluginManager: PluginManager, configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    type: import("mobx-state-tree").ISimpleType<string>;
-    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+import type { Instance } from '@jbrowse/mobx-state-tree';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+declare function stateModelFactory(pluginManager: PluginManager, configSchema: AnyConfigurationSchemaType): import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
 } & {
-    PileupDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyType>;
-    SNPCoverageDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyModelType>;
-    snpCovHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
-    type: import("mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
+    PileupDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyType>;
+    SNPCoverageDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyModelType>;
+    snpCovHeight: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
     configuration: AnyConfigurationSchemaType;
-    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    userFeatureScreenDensity: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    lowerPanelType: import("mobx-state-tree").IType<string | undefined, string, string>;
+    heightPreConfig: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    userFeatureScreenDensity: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    lowerPanelType: import("@jbrowse/mobx-state-tree").IType<string | undefined, string, string>;
 }, {
     rendererTypeName: string;
     error: unknown;
-    message: string | undefined;
+    statusMessage: string | undefined;
 } & {
     readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
             rpcDriverName: string | undefined;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            statusMessage: string | undefined;
+        } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+            id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+            statusMessage: string | undefined;
+        }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
@@ -48,30 +48,142 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             id: string;
             type: string;
             rpcDriverName: string | undefined;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            statusMessage: string | undefined;
+        } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+            id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+            statusMessage: string | undefined;
+        }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
-    readonly parentTrack: any;
+    readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+    readonly parentDisplay: any;
+    readonly effectiveRpcDriverName: any;
+} & {
     renderProps(): any;
+    renderingProps(): {
+        displayModel: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            statusMessage: string | undefined;
+        } & {
+            readonly RenderingComponent: React.FC<{
+                model: {
+                    id: string;
+                    type: string;
+                    rpcDriverName: string | undefined;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+                    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+                    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+                    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+                onHorizontalScroll?: () => void;
+                blockState?: Record<string, any>;
+            }>;
+            readonly DisplayBlurb: React.FC<{
+                model: {
+                    id: string;
+                    type: string;
+                    rpcDriverName: string | undefined;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+                    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+                    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+                    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+            }> | null;
+            readonly adapterConfig: any;
+            readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly parentDisplay: any;
+            readonly effectiveRpcDriverName: any;
+        } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+            id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            statusMessage: string | undefined;
+        } & {
+            readonly RenderingComponent: React.FC<{
+                model: {
+                    id: string;
+                    type: string;
+                    rpcDriverName: string | undefined;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+                    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+                    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+                    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+                onHorizontalScroll?: () => void;
+                blockState?: Record<string, any>;
+            }>;
+            readonly DisplayBlurb: React.FC<{
+                model: {
+                    id: string;
+                    type: string;
+                    rpcDriverName: string | undefined;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
+                    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+                    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+                    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string;
+                    error: unknown;
+                    statusMessage: string | undefined;
+                }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+            }> | null;
+            readonly adapterConfig: any;
+            readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly parentDisplay: any;
+            readonly effectiveRpcDriverName: any;
+        }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
+    };
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): MenuItem[];
     readonly viewMenuActions: MenuItem[];
     regionCannotBeRendered(): null;
 } & {
-    setMessage(arg?: string): void;
+    setStatusMessage(arg?: string): void;
     setError(error?: unknown): void;
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
@@ -80,9 +192,12 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
 } & {
     setScrollTop(scrollTop: number): void;
     setSNPCoverageHeight(n: number): void;
+    setShowLegend(s: boolean): void;
 } & {
     readonly height: any;
     readonly featureIdUnderMouse: any;
+    readonly showLegend: any;
+    svgLegendWidth(theme?: unknown): number;
 } & {
     readonly pileupConf: any;
     getFeatureByID(blockKey: string, id: string): any;
@@ -97,30 +212,40 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     setFeatureDensityStatsLimit(stats?: FeatureDensityStats): void;
     setPileupDisplay(configuration: AnyConfigurationModel): void;
     setHeight(n: number): number;
-    setFilterBy(filter: FilterBy): void;
     setLowerPanelType(type: string): void;
     resizeHeight(distance: number): number;
 } & {
     afterAttach(): void;
-    renderSvg(opts: {
-        rasterizeLayers?: boolean;
-    }): Promise<import("react/jsx-runtime").JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
 } & {
     trackMenuItems(): MenuItem[];
-}, 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]>;
-    type: import("mobx-state-tree").ISimpleType<string>;
-    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+}, import("@jbrowse/mobx-state-tree").ModelCreationType<import("@jbrowse/mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
+} & {
+    PileupDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyType>;
+    SNPCoverageDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyModelType>;
+    snpCovHeight: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
+    configuration: AnyConfigurationSchemaType;
+    heightPreConfig: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    userFeatureScreenDensity: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    lowerPanelType: import("@jbrowse/mobx-state-tree").IType<string | undefined, string, string>;
+}>>, import("@jbrowse/mobx-state-tree").ModelSnapshotType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
 } & {
-    PileupDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyType>;
-    SNPCoverageDisplay: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IAnyModelType>;
-    snpCovHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
-    type: import("mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
+    PileupDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyType>;
+    SNPCoverageDisplay: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IAnyModelType>;
+    snpCovHeight: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<"LinearAlignmentsDisplay">;
     configuration: AnyConfigurationSchemaType;
-    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    userFeatureScreenDensity: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    lowerPanelType: import("mobx-state-tree").IType<string | undefined, string, string>;
-}>>, import("mobx-state-tree")._NotCustomized>;
+    heightPreConfig: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    userFeatureScreenDensity: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    lowerPanelType: import("@jbrowse/mobx-state-tree").IType<string | undefined, string, string>;
+}>>;
 export default stateModelFactory;
 export type LinearAlignmentsDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearAlignmentsDisplayModel = Instance<LinearAlignmentsDisplayStateModel>;

package/esm/LinearAlignmentsDisplay/model.js

@@ -1,41 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
+import { addDisposer, getSnapshot, types } from '@jbrowse/mobx-state-tree';
 import deepEqual from 'fast-deep-equal';
-import { autorun, when } from 'mobx';
-import { addDisposer, getSnapshot, isAlive, types } from 'mobx-state-tree';
-import { LinearAlignmentsDisplayMixin } from './alignmentsModel';
-import { getLowerPanelDisplays } from './util';
+import { autorun } from 'mobx';
+import { LinearAlignmentsDisplayMixin } from "./alignmentsModel.js";
+import { getLowerPanelDisplays } from "./util.js";
 const minDisplayHeight = 20;
-function preCheck(self) {
-    const { PileupDisplay, SNPCoverageDisplay } = self;
-    return (PileupDisplay ||
-        isAlive(PileupDisplay) ||
-        SNPCoverageDisplay ||
-        isAlive(SNPCoverageDisplay));
-}
-function propagateColorBy(self) {
-    const { PileupDisplay, SNPCoverageDisplay } = self;
-    if (!preCheck(self) || !PileupDisplay.colorBy) {
-        return;
-    }
-    if (!deepEqual(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-        SNPCoverageDisplay.setColorScheme({
-            ...PileupDisplay.colorBy,
-        });
-    }
-}
-function propagateFilterBy(self) {
-    const { PileupDisplay, SNPCoverageDisplay } = self;
-    if (!preCheck(self) || !PileupDisplay.filterBy) {
-        return;
-    }
-    if (!deepEqual(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-        SNPCoverageDisplay.setFilterBy({
-            ...PileupDisplay.filterBy,
-        });
-    }
-}
+const defaultDisplayHeight = 250;
+const defaultSnpCovHeight = 45;
 function stateModelFactory(pluginManager, configSchema) {
     return types
         .compose('LinearAlignmentsDisplay', BaseDisplay, LinearAlignmentsDisplayMixin(pluginManager, configSchema))
@@ -49,16 +21,26 @@ function stateModelFactory(pluginManager, configSchema) {
         setSNPCoverageHeight(n) {
             self.snpCovHeight = n;
         },
+        setShowLegend(s) {
+            self.PileupDisplay?.setShowLegend(s);
+        },
     }))
         .views(self => ({
         get height() {
-            var _a;
-            return (_a = self.heightPreConfig) !== null && _a !== void 0 ? _a : getConf(self, 'height');
+            return self.heightPreConfig ?? getConf(self, 'height');
         },
         get featureIdUnderMouse() {
             return (self.PileupDisplay.featureIdUnderMouse ||
                 self.SNPCoverageDisplay.featureIdUnderMouse);
         },
+        get showLegend() {
+            return self.PileupDisplay?.showLegend;
+        },
+        svgLegendWidth(theme) {
+            const pileupWidth = self.PileupDisplay?.svgLegendWidth?.(theme) ?? 0;
+            const snpCovWidth = self.SNPCoverageDisplay?.svgLegendWidth?.(theme) ?? 0;
+            return Math.max(pileupWidth, snpCovWidth);
+        },
     }))
         .views(self => ({
         get pileupConf() {
@@ -73,15 +55,13 @@ function stateModelFactory(pluginManager, configSchema) {
             return self.PileupDisplay.getFeatureByID(blockKey, id);
         },
         searchFeatureByID(id) {
-            var _a, _b;
-            return (_b = (_a = self.PileupDisplay).searchFeatureByID) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+            return self.PileupDisplay.searchFeatureByID?.(id);
         },
         get features() {
             return self.PileupDisplay.features;
         },
         get DisplayBlurb() {
-            var _a;
-            return (_a = self.PileupDisplay) === null || _a === void 0 ? void 0 : _a.DisplayBlurb;
+            return self.PileupDisplay?.DisplayBlurb;
         },
         get sortedBy() {
             return self.PileupDisplay.sortedBy;
@@ -94,9 +74,8 @@ function stateModelFactory(pluginManager, configSchema) {
             };
         },
         notReady() {
-            var _a, _b;
-            return (((_a = self.PileupDisplay) === null || _a === void 0 ? void 0 : _a.renderProps().notReady) ||
-                ((_b = self.SNPCoverageDisplay) === null || _b === void 0 ? void 0 : _b.renderProps().notReady));
+            return (self.PileupDisplay?.renderProps().notReady ||
+                self.SNPCoverageDisplay?.renderProps().notReady);
         },
     }))
         .actions(self => ({
@@ -121,10 +100,6 @@ function stateModelFactory(pluginManager, configSchema) {
             self.heightPreConfig = Math.max(n, minDisplayHeight);
             return self.heightPreConfig;
         },
-        setFilterBy(filter) {
-            self.PileupDisplay.setFilterBy(filter);
-            self.SNPCoverageDisplay.setFilterBy(filter);
-        },
         setLowerPanelType(type) {
             self.lowerPanelType = type;
         },
@@ -136,7 +111,7 @@ function stateModelFactory(pluginManager, configSchema) {
     }))
         .actions(self => ({
         afterAttach() {
-            addDisposer(self, autorun(() => {
+            addDisposer(self, autorun(function alignmentsDisplayConfigAutorun() {
                 const { SNPCoverageDisplay, PileupDisplay, coverageConf, pileupConf, } = self;
                 if (!SNPCoverageDisplay) {
                     self.setSNPCoverageDisplay(coverageConf);
@@ -145,29 +120,37 @@ function stateModelFactory(pluginManager, configSchema) {
                     SNPCoverageDisplay.setHeight(self.snpCovHeight);
                     SNPCoverageDisplay.setConfig(self.coverageConf);
                 }
-                if (!PileupDisplay || self.lowerPanelType !== PileupDisplay.type) {
+                if (self.lowerPanelType !== PileupDisplay?.type) {
                     self.setPileupDisplay(pileupConf);
                 }
                 else if (!deepEqual(pileupConf, getSnapshot(PileupDisplay.configuration))) {
                     PileupDisplay.setConfig(self.pileupConf);
                 }
-                propagateColorBy(self);
-                propagateFilterBy(self);
-            }));
-            addDisposer(self, autorun(() => {
+            }, { name: 'AlignmentsDisplayConfig' }));
+            addDisposer(self, autorun(function snpCoverageHeightAutorun() {
                 self.setSNPCoverageHeight(self.SNPCoverageDisplay.height);
-            }));
-            addDisposer(self, autorun(() => {
+            }, { name: 'SNPCoverageHeight' }));
+            addDisposer(self, autorun(function pileupHeightAutorun() {
                 self.PileupDisplay.setHeight(self.height - self.SNPCoverageDisplay.height);
-            }));
+            }, { name: 'PileupHeight' }));
+            addDisposer(self, autorun(function syncColorByAutorun() {
+                const colorBy = self.PileupDisplay.colorBy;
+                if (colorBy?.type === 'modifications' ||
+                    colorBy?.type === 'methylation') {
+                    self.SNPCoverageDisplay.setColorScheme(colorBy);
+                }
+                else if (self.SNPCoverageDisplay.colorBy) {
+                    self.SNPCoverageDisplay.setColorScheme(undefined);
+                }
+            }, { name: 'SyncColorBy' }));
+            addDisposer(self, autorun(function syncFilterByAutorun() {
+                const filterBy = self.PileupDisplay.filterBy;
+                self.SNPCoverageDisplay.setFilterBy(filterBy);
+            }, { name: 'SyncFilterBy' }));
         },
         async renderSvg(opts) {
-            const pileupHeight = self.height - self.SNPCoverageDisplay.height;
-            await when(() => !self.notReady());
-            return (_jsxs(_Fragment, { children: [_jsx("g", { children: await self.SNPCoverageDisplay.renderSvg(opts) }), _jsx("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})`, children: await self.PileupDisplay.renderSvg({
-                            ...opts,
-                            overrideHeight: pileupHeight,
-                        }) })] }));
+            const { renderSvg } = await import("./renderSvg.js");
+            return renderSvg(self, opts);
         },
     }))
         .views(self => {
@@ -212,6 +195,21 @@ function stateModelFactory(pluginManager, configSchema) {
         }
         const { height, ...rest } = snap;
         return { heightPreConfig: height, ...rest };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { heightPreConfig, lowerPanelType, snpCovHeight, ...rest } = snap;
+        return {
+            ...rest,
+            ...(heightPreConfig !== undefined &&
+                heightPreConfig !== defaultDisplayHeight
+                ? { height: heightPreConfig }
+                : {}),
+            ...(lowerPanelType !== 'LinearPileupDisplay' ? { lowerPanelType } : {}),
+            ...(snpCovHeight !== defaultSnpCovHeight ? { snpCovHeight } : {}),
+        };
     });
 }
 export default stateModelFactory;

package/esm/LinearAlignmentsDisplay/renderSvg.d.ts

@@ -0,0 +1,14 @@
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+interface SubDisplay {
+    height: number;
+    error?: unknown;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<React.ReactNode>;
+}
+interface MinimalLinearAlignmentsDisplay {
+    height: number;
+    SNPCoverageDisplay: SubDisplay;
+    PileupDisplay: SubDisplay;
+    notReady(): boolean;
+}
+export declare function renderSvg(self: MinimalLinearAlignmentsDisplay, opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/esm/LinearAlignmentsDisplay/renderSvg.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { when } from 'mobx';
+import { hasAnySubDisplayError } from "../svgExportUtil.js";
+export async function renderSvg(self, opts) {
+    const pileupHeight = self.height - self.SNPCoverageDisplay.height;
+    const subDisplays = [self.SNPCoverageDisplay, self.PileupDisplay];
+    await when(() => !self.notReady() || hasAnySubDisplayError(subDisplays));
+    return (_jsxs(_Fragment, { children: [_jsx("g", { children: await self.SNPCoverageDisplay.renderSvg(opts) }), _jsx("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})`, children: await self.PileupDisplay.renderSvg({
+                    ...opts,
+                    overrideHeight: pileupHeight,
+                }) })] }));
+}

package/esm/LinearAlignmentsDisplay/util.js

@@ -1,6 +1,6 @@
 export function getLowerPanelDisplays(pluginManager) {
     return pluginManager
         .getDisplayElements()
-        .filter(f => { var _a; return ((_a = f.subDisplay) === null || _a === void 0 ? void 0 : _a.type) === 'LinearAlignmentsDisplay'; })
-        .filter(f => { var _a; return (_a = f.subDisplay) === null || _a === void 0 ? void 0 : _a.lowerPanel; });
+        .filter(f => f.subDisplay?.type === 'LinearAlignmentsDisplay')
+        .filter(f => f.subDisplay?.lowerPanel);
 }