@jbrowse/plugin-linear-genome-view 2.3.3 → 2.4.0

package/esm/index.d.ts

@@ -3,7 +3,8 @@ import Plugin from '@jbrowse/core/Plugin';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { BaseLinearDisplay, BaseLinearDisplayComponent, BlockModel, BlockMsg, baseLinearDisplayConfigSchema } from './BaseLinearDisplay';
 import { configSchemaFactory as linearBareDisplayConfigSchemaFactory } from './LinearBareDisplay';
-import { renderToSvg, LinearGenomeViewModel, LinearGenomeViewStateModel, RefNameAutocomplete, SearchBox } from './LinearGenomeView';
+import { LinearGenomeViewModel, LinearGenomeViewStateModel, RefNameAutocomplete, SearchBox } from './LinearGenomeView';
+import { renderToSvg, totalHeight, SVGTracks, SVGRuler } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView';
 import { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory } from './LinearBasicDisplay';
 export default class LinearGenomeViewPlugin extends Plugin {
     name: string;
@@ -13,7 +14,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 id: string;
                 type: string;
                 rpcDriverName: string | undefined;
-                height: number;
+                heightPreConfig: number | undefined;
                 blockState: import("mobx-state-tree").IMSTMap<import("mobx-state-tree").IModelType<{
                     key: import("mobx-state-tree").ISimpleType<string>;
                     region: import("mobx-state-tree").IModelType<{
@@ -168,6 +169,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
                 estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
             } & {
+                readonly height: any;
                 readonly blockType: "dynamicBlocks" | "staticBlocks";
                 readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
             } & {
@@ -197,7 +199,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setRegionStatsP(p?: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined): void;
                 setRegionStats(estimatedRegionStats?: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined): void;
                 clearRegionStats(): void;
-                setHeight(displayHeight: number): number;
+                setHeight(displayHeight: number): any;
                 resizeHeight(distance: number): number;
                 setScrollTop(scrollTop: number): void;
                 updateStatsLimit(stats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats): void;
@@ -230,13 +232,14 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 renderSvg(opts: import("./LinearGenomeView").ExportSvgOptions & {
                     overrideHeight: number;
+                    theme: import("@mui/material").ThemeOptions;
                 }): Promise<JSX.Element>;
             } & 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>>;
             } & {
-                height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+                heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
                 blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
                     key: import("mobx-state-tree").ISimpleType<string>;
                     region: import("mobx-state-tree").IModelType<{
@@ -346,6 +349,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
                 estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
             } & {
+                readonly height: any;
                 readonly blockType: "dynamicBlocks" | "staticBlocks";
                 readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
             } & {
@@ -375,7 +379,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setRegionStatsP(p?: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined): void;
                 setRegionStats(estimatedRegionStats?: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined): void;
                 clearRegionStats(): void;
-                setHeight(displayHeight: number): number;
+                setHeight(displayHeight: number): any;
                 resizeHeight(distance: number): number;
                 setScrollTop(scrollTop: number): void;
                 updateStatsLimit(stats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats): void;
@@ -408,12 +412,67 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 renderSvg(opts: import("./LinearGenomeView").ExportSvgOptions & {
                     overrideHeight: number;
+                    theme: import("@mui/material").ThemeOptions;
                 }): Promise<JSX.Element>;
-            }, 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]>;
+                type: import("mobx-state-tree").ISimpleType<string>;
+                rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            } & {
+                heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+                    key: import("mobx-state-tree").ISimpleType<string>;
+                    region: import("mobx-state-tree").IModelType<{
+                        refName: import("mobx-state-tree").ISimpleType<string>;
+                        start: import("mobx-state-tree").ISimpleType<number>;
+                        end: import("mobx-state-tree").ISimpleType<number>;
+                        reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                    } & {
+                        assemblyName: import("mobx-state-tree").ISimpleType<string>;
+                    }, {
+                        setRefName(newRefName: string): void;
+                    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+                    reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+                    isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                    isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                }, {
+                    renderInProgress: AbortController | undefined;
+                    filled: boolean;
+                    reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                    features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+                    layout: any;
+                    status: string;
+                    error: unknown;
+                    message: string | undefined;
+                    maxHeightReached: boolean;
+                    ReactComponent: ({ model, }: {
+                        model: any;
+                    }) => any;
+                    renderProps: any;
+                } & {
+                    doReload(): void;
+                    afterAttach(): void;
+                    setStatus(message: string): void;
+                    setLoading(abortController: AbortController): void;
+                    setMessage(messageText: string): void;
+                    setRendered(props: {
+                        reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                        features: Map<string, import("@jbrowse/core/util").Feature>;
+                        layout: any;
+                        maxHeightReached: boolean;
+                        renderProps: any;
+                    } | undefined): void;
+                    setError(error: unknown): void;
+                    reload(): void;
+                    beforeDestroy(): void;
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+                userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+                userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            }>>, {
                 type: string;
-                height: number;
                 id: string;
                 rpcDriverName: string | undefined;
+                heightPreConfig: number | undefined;
                 userBpPerPxLimit: number | undefined;
                 userByteSizeLimit: number | undefined;
             }>>;
@@ -424,7 +483,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         } & {
-            height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+            heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
             blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
                 key: import("mobx-state-tree").ISimpleType<string>;
                 region: import("mobx-state-tree").IModelType<{
@@ -534,6 +593,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
             estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
         } & {
+            readonly height: any;
             readonly blockType: "dynamicBlocks" | "staticBlocks";
             readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
         } & {
@@ -563,7 +623,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             setRegionStatsP(p?: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined): void;
             setRegionStats(estimatedRegionStats?: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined): void;
             clearRegionStats(): void;
-            setHeight(displayHeight: number): number;
+            setHeight(displayHeight: number): any;
             resizeHeight(distance: number): number;
             setScrollTop(scrollTop: number): void;
             updateStatsLimit(stats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats): void;
@@ -596,12 +656,67 @@ export default class LinearGenomeViewPlugin extends Plugin {
         } & {
             renderSvg(opts: import("./LinearGenomeView").ExportSvgOptions & {
                 overrideHeight: number;
+                theme: import("@mui/material").ThemeOptions;
             }): Promise<JSX.Element>;
-        }, 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]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        } & {
+            heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+                key: import("mobx-state-tree").ISimpleType<string>;
+                region: import("mobx-state-tree").IModelType<{
+                    refName: import("mobx-state-tree").ISimpleType<string>;
+                    start: import("mobx-state-tree").ISimpleType<number>;
+                    end: import("mobx-state-tree").ISimpleType<number>;
+                    reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                } & {
+                    assemblyName: import("mobx-state-tree").ISimpleType<string>;
+                }, {
+                    setRefName(newRefName: string): void;
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+                reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+                isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+                isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+            }, {
+                renderInProgress: AbortController | undefined;
+                filled: boolean;
+                reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+                features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+                layout: any;
+                status: string;
+                error: unknown;
+                message: string | undefined;
+                maxHeightReached: boolean;
+                ReactComponent: ({ model, }: {
+                    model: any;
+                }) => any;
+                renderProps: any;
+            } & {
+                doReload(): void;
+                afterAttach(): void;
+                setStatus(message: string): void;
+                setLoading(abortController: AbortController): void;
+                setMessage(messageText: string): void;
+                setRendered(props: {
+                    reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                    features: Map<string, import("@jbrowse/core/util").Feature>;
+                    layout: any;
+                    maxHeightReached: boolean;
+                    renderProps: any;
+                } | undefined): void;
+                setError(error: unknown): void;
+                reload(): void;
+                beforeDestroy(): void;
+            }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+            userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+            userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+        }>>, {
             type: string;
-            height: number;
             id: string;
             rpcDriverName: string | undefined;
+            heightPreConfig: number | undefined;
             userBpPerPxLimit: number | undefined;
             userByteSizeLimit: number | undefined;
         }>;
@@ -723,7 +838,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -915,7 +1030,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -1117,7 +1232,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -1309,7 +1424,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -1511,7 +1626,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -1703,7 +1818,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 moveTrack(movingId: string, targetId: string): void;
                 closeView(): void;
                 toggleTrack(trackId: string): void;
-                setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+                setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
                 toggleCenterLine(): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -1793,6 +1908,6 @@ export default class LinearGenomeViewPlugin extends Plugin {
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;
 }
-export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, BlockMsg, };
+export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, totalHeight, SVGTracks, SVGRuler, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, BlockMsg, };
 export type { LinearGenomeViewModel, LinearGenomeViewStateModel, BlockModel };
 export type { BaseLinearDisplayModel } from './BaseLinearDisplay';

package/esm/index.js

@@ -5,7 +5,8 @@ import LineStyleIcon from '@mui/icons-material/LineStyle';
 // locals
 import { BaseLinearDisplay, BaseLinearDisplayComponent, BlockMsg, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
 import LinearBareDisplayF, { configSchemaFactory as linearBareDisplayConfigSchemaFactory, } from './LinearBareDisplay';
-import LinearGenomeViewF, { renderToSvg, RefNameAutocomplete, SearchBox, ZoomControls, LinearGenomeView, } from './LinearGenomeView';
+import LinearGenomeViewF, { RefNameAutocomplete, SearchBox, ZoomControls, LinearGenomeView, } from './LinearGenomeView';
+import { renderToSvg, totalHeight, SVGTracks, SVGRuler, } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView';
 import LinearBasicDisplayF, { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
 import FeatureTrackF from './FeatureTrack';
 import BasicTrackF from './BasicTrack';
@@ -43,5 +44,5 @@ export default class LinearGenomeViewPlugin extends Plugin {
         }
     }
 }
-export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, BlockMsg, };
+export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, totalHeight, SVGTracks, SVGRuler, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, BlockMsg, };
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAE1B,QAAQ,EACR,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,EAAE,EACzB,mBAAmB,IAAI,oCAAoC,GAC5D,MAAM,qBAAqB,CAAA;AAC5B,OAAO,iBAAiB,EAAE,EACxB,WAAW,EAGX,mBAAmB,EACnB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,EAAE,EAC1B,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA;AAE7B,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,6BAA6B,EAC7B,oCAAoC,EACpC,qCAAqC,EACrC,8BAA8B,EAC9B,WAAW,EACX,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,QAAQ,GACT,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAE1B,QAAQ,EACR,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,EAAE,EACzB,mBAAmB,IAAI,oCAAoC,GAC5D,MAAM,qBAAqB,CAAA;AAC5B,OAAO,iBAAiB,EAAE,EAGxB,mBAAmB,EACnB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,sDAAsD,CAAA;AAC7D,OAAO,mBAAmB,EAAE,EAC1B,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA;AAE7B,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,6BAA6B,EAC7B,oCAAoC,EACpC,qCAAqC,EACrC,8BAA8B,EAC9B,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,QAAQ,GACT,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -47,7 +47,7 @@
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
-    "material-ui-popup-state": "^3.0.0",
+    "material-ui-popup-state": "^5.0.0",
     "normalize-wheel": "^1.0.1",
     "react-error-boundary": "^3.0.0",
     "react-popper": "^2.0.0"
@@ -66,5 +66,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "283e0387ccd5acc9f092cf00804d1fcac212e68d"
+  "gitHead": "78707a2bc3ba8489f26a590ef83f62ede945d048"
 }

package/src/BaseLinearDisplay/components/Block.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
   },
   interRegionPaddingBlock: {
     minHeight: '100%',
-    backgroundColor: theme.palette.text.primary,
+    backgroundColor: theme.palette.text.disabled,
   },
   boundaryPaddingBlock: {
     minHeight: '100%',

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -10,18 +10,17 @@ import RefreshIcon from '@mui/icons-material/Refresh'
 // locals
 import BlockMsg from './BlockMsg'
 
-const useStyles = makeStyles()(theme => ({
-  loading: {
-    paddingLeft: '0.6em',
-    backgroundColor: theme.palette.action.disabledBackground,
-    backgroundImage:
-      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-}))
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      textAlign: 'center',
+    },
+  }
+})
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const LoadingMessage = observer(({ model }: { model: any }) => {

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -13,6 +13,7 @@ import {
   isSessionModelWithWidgets,
   isFeature,
   Feature,
+  ReactRendering,
 } from '@jbrowse/core/util'
 import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -33,6 +34,7 @@ import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
 import TooLargeMessage from '../components/TooLargeMessage'
 import BlockState, { renderBlockData } from './serverSideRenderedBlock'
+import { ThemeOptions } from '@mui/material'
 
 type LGV = LinearGenomeViewModel
 
@@ -65,7 +67,6 @@ function getDisplayStr(totalBytes: number) {
 }
 
 const minDisplayHeight = 20
-const defaultDisplayHeight = 100
 
 /**
  * #stateModel BaseLinearDisplay
@@ -80,13 +81,12 @@ function stateModelFactory() {
         /**
          * #property
          */
-        height: types.optional(
+        heightPreConfig: types.maybe(
           types.refinement(
             'displayHeight',
             types.number,
             n => n >= minDisplayHeight,
           ),
-          defaultDisplayHeight,
         ),
         /**
          * #property
@@ -113,6 +113,9 @@ function stateModelFactory() {
       estimatedRegionStats: undefined as undefined | Stats,
     }))
     .views(self => ({
+      get height() {
+        return self.heightPreConfig ?? getConf(self, 'height')
+      },
       /**
        * #getter
        */
@@ -365,9 +368,9 @@ function stateModelFactory() {
        */
       setHeight(displayHeight: number) {
         if (displayHeight > minDisplayHeight) {
-          self.height = displayHeight
+          self.heightPreConfig = displayHeight
         } else {
-          self.height = minDisplayHeight
+          self.heightPreConfig = minDisplayHeight
         }
         return self.height
       },
@@ -657,7 +660,7 @@ function stateModelFactory() {
       renderProps() {
         const view = getContainingView(self) as LGV
         return {
-          ...(getParentRenderProps(self) as any),
+          ...getParentRenderProps(self),
           notReady:
             self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
           rpcDriverName: self.rpcDriverName,
@@ -706,14 +709,19 @@ function stateModelFactory() {
       /**
        * #method
        */
-      async renderSvg(opts: ExportSvgOptions & { overrideHeight: number }) {
+      async renderSvg(
+        opts: ExportSvgOptions & {
+          overrideHeight: number
+          theme: ThemeOptions
+        },
+      ) {
         const { height, id } = self
         const { overrideHeight } = opts
         const view = getContainingView(self) as LGV
         const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view
 
         const renderings = await Promise.all(
-          roundedDynamicBlocks.map(block => {
+          roundedDynamicBlocks.map(async block => {
             const blockState = BlockState.create({
               key: block.key,
               region: block,
@@ -726,34 +734,41 @@ function stateModelFactory() {
               self.regionCannotBeRendered(block)
 
             if (cannotBeRenderedReason) {
-              return {
-                reactElement: (
-                  <>
-                    <rect x={0} y={0} width={width} height={20} fill="#aaa" />
-                    <text x={0} y={15}>
-                      {cannotBeRenderedReason}
-                    </text>
-                  </>
-                ),
-              }
+              return [
+                block,
+                {
+                  reactElement: (
+                    <>
+                      <rect x={0} y={0} width={width} height={20} fill="#aaa" />
+                      <text x={0} y={15}>
+                        {cannotBeRenderedReason}
+                      </text>
+                    </>
+                  ),
+                },
+              ] as const
             }
 
             const { rpcManager, renderArgs, renderProps, rendererType } =
               renderBlockData(blockState, self)
 
-            return rendererType.renderInClient(rpcManager, {
-              ...renderArgs,
-              ...renderProps,
-              viewParams: getViewParams(self, true),
-              exportSVG: opts,
-            })
+            return [
+              block,
+              await rendererType.renderInClient(rpcManager, {
+                ...renderArgs,
+                ...renderProps,
+                viewParams: getViewParams(self, true),
+                exportSVG: opts,
+                theme: opts.theme || renderProps.theme,
+              }),
+            ] as const
           }),
         )
 
         return (
           <>
-            {renderings.map((rendering, index) => {
-              const { offsetPx } = roundedDynamicBlocks[index]
+            {renderings.map(([block, rendering], index) => {
+              const { offsetPx, widthPx } = block
               const offset = offsetPx - viewOffsetPx
               const clipid = getId(id, index)
 
@@ -764,21 +779,14 @@ function stateModelFactory() {
                       <rect
                         x={0}
                         y={0}
-                        width={width}
+                        width={widthPx}
                         height={overrideHeight || height}
                       />
                     </clipPath>
                   </defs>
                   <g transform={`translate(${offset} 0)`}>
                     <g clipPath={`url(#${clipid})`}>
-                      {React.isValidElement(rendering.reactElement) ? (
-                        rendering.reactElement
-                      ) : (
-                        <g
-                          /* eslint-disable-next-line react/no-danger */
-                          dangerouslySetInnerHTML={{ __html: rendering.html }}
-                        />
-                      )}
+                      <ReactRendering rendering={rendering} />
                     </g>
                   </g>
                 </React.Fragment>
@@ -788,6 +796,16 @@ function stateModelFactory() {
         )
       },
     }))
+    .preProcessSnapshot(snap => {
+      if (!snap) {
+        return snap
+      }
+      // rewrite "height" from older snapshots to "heightPreConfig", this allows
+      // us to maintain a height "getter" going forward
+      // @ts-ignore
+      const { height, ...rest } = snap
+      return { heightPreConfig: height, ...rest }
+    })
     .postProcessSnapshot(self => {
       // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
       const r = self as Omit<typeof self, symbol>

package/src/BaseLinearDisplay/models/configSchema.ts

@@ -29,6 +29,14 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema(
       description:
         "maximum data to attempt to download for a given track, used if adapter doesn't specify one",
     },
+    /**
+     * #slot
+     */
+    height: {
+      type: 'number',
+      defaultValue: 100,
+      description: 'default height for the track',
+    },
   },
   {
     /**