@jbrowse/plugin-linear-genome-view 2.9.0 → 2.10.1

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -15,7 +15,14 @@ import FeatureDensityMixin from './FeatureDensityMixin';
 /**
  * #stateModel BaseLinearDisplay
  * #category display
- * extends `BaseDisplay`
+ *
+ * BaseLinearDisplay is used as the basis for many linear genome view tracks.
+ * It is block based, and can use 'static blocks' or 'dynamic blocks'
+ *
+ * extends
+ * - [BaseDisplay](../basedisplay)
+ * - [TrackHeightMixin](../trackheightmixin)
+ * - [FeatureDensityMixin](../featuredensitymixin)
  */
 function stateModelFactory() {
     return types

package/esm/LinearBareDisplay/model.d.ts

@@ -3,7 +3,8 @@ import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 /**
  * #stateModel LinearBareDisplay
  * #category display
- * extends `BaseLinearDisplay`
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -76,9 +77,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #getter
-         */
+        };
         mouseover: {
             type: string;
             description: string;
@@ -98,9 +97,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 }, {
     rendererTypeName: string;
     error: unknown;
-    message: string | undefined; /**
-     * #property
-     */
+    message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
         model: {
@@ -160,7 +157,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly height: number;
 } & {
-    setScrollTop(scrollTop: number): void;
+    setScrollTop(scrollTop: number): void; /**
+     * #method
+     */
     setHeight(displayHeight: number): number;
     resizeHeight(distance: number): number;
 } & {
@@ -303,9 +302,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #getter
-         */
+        };
         mouseover: {
             type: string;
             description: string;

package/esm/LinearBareDisplay/model.js

@@ -5,7 +5,8 @@ import { BaseLinearDisplay } from '../BaseLinearDisplay';
 /**
  * #stateModel LinearBareDisplay
  * #category display
- * extends `BaseLinearDisplay`
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 export function stateModelFactory(configSchema) {
     return types

package/esm/LinearBasicDisplay/model.d.ts

@@ -7,6 +7,9 @@ import { Instance } from 'mobx-state-tree';
  * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
+ *
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -34,7 +37,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined;
+        renderInProgress: AbortController | undefined; /**
+         * #property
+         */
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -52,9 +57,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #method
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             features: Map<string, import("@jbrowse/core/util").Feature>;
@@ -81,15 +84,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #property
-         */
+        };
         mouseover: {
             type: string;
             description: string;
-            defaultValue: string; /**
-             * #property
-             */
+            defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
@@ -127,9 +126,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         model: {
             id: string;
             type: string;
-            rpcDriverName: string | undefined; /**
-             * #property
-             */
+            rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
@@ -160,13 +157,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
-            rendererTypeName: string; /**
-             * #action
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
+    /**
+     * #action
+     */
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
@@ -195,10 +193,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
-    readonly maxFeatureScreenDensity: any;
-    readonly featureDensityStatsReady: boolean; /**
+    /**
      * #getter
      */
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
 } & {
     afterAttach(): void;
@@ -219,9 +218,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
 } & {
-    readonly blockType: "dynamicBlocks" | "staticBlocks"; /**
-     * #getter
-     */
+    readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -278,7 +275,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: unknown): any; /**
+         * #property
+         */
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     /**
@@ -305,7 +304,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         config: {
             [x: string]: any;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: unknown): any;
+            setSubschema(slotName: string, data: unknown): any; /**
+             * #property
+             */
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
     };
     /**
@@ -340,7 +341,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined;
+        renderInProgress: AbortController | undefined; /**
+         * #property
+         */
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -358,9 +361,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #method
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             features: Map<string, import("@jbrowse/core/util").Feature>;
@@ -387,15 +388,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #property
-         */
+        };
         mouseover: {
             type: string;
             description: string;
-            defaultValue: string; /**
-             * #property
-             */
+            defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;

package/esm/LinearBasicDisplay/model.js

@@ -12,6 +12,9 @@ const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'));
  * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
+ *
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 function stateModelFactory(configSchema) {
     return types

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

@@ -53,11 +53,17 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         load(): Promise<void>;
         loadPre(): Promise<void>;
     } & {
-        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getAdapterMapEntry(adapterConf: {
+            [x: string]: unknown;
+        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
+        getRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
-        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getReverseRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
     } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -109,11 +115,17 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         load(): Promise<void>;
         loadPre(): Promise<void>;
     } & {
-        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getAdapterMapEntry(adapterConf: {
+            [x: string]: unknown;
+        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
+        getRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
-        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getReverseRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;

package/esm/LinearGenomeView/components/Cytobands.js

@@ -66,10 +66,16 @@ const Cytobands = observer(function ({ overview, block, assembly, }) {
         const c = colorMap[type];
         if (type === 'acen' && !centromereSeen) {
             centromereSeen = true; // the next acen entry is drawn with different right triangle
-            return React.createElement("polygon", { key: k, points: leftTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? rightTriangle(s - w, 0, w, h)
+                : leftTriangle(s, 0, w, h);
+            return React.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (type === 'acen' && centromereSeen) {
-            return React.createElement("polygon", { key: k, points: rightTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? leftTriangle(s - w, 0, w, h)
+                : rightTriangle(s, 0, w, h);
+            return React.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (lcap === index) {
             return React.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });

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

@@ -1,16 +1,8 @@
 import React from 'react';
-import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import { LinearGenomeViewModel } from '..';
-declare const Polygon: ({ model, overview, useOffset, }: {
-    model: LGV;
-    overview: Base1DViewModel;
-    useOffset?: boolean | undefined;
-}) => React.JSX.Element | null;
 type LGV = LinearGenomeViewModel;
 declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export { Polygon };
-export { default as Cytobands } from './Cytobands';
 export default OverviewScalebar;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -9,9 +9,10 @@ import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 // locals
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
 import { chooseGridPitch } from '../util';
+import { getCytobands } from './util';
 import OverviewRubberband from './OverviewRubberband';
 import Cytobands from './Cytobands';
-import { getCytobands } from './util';
+import OverviewScalebarPolygon from './OverviewScalebarPolygon';
 const wholeSeqSpacer = 2;
 const useStyles = makeStyles()(theme => ({
     scalebar: {
@@ -65,55 +66,14 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
     },
 }));
-const Polygon = observer(function ({ model, overview, useOffset = true, }) {
-    const theme = useTheme();
-    const multiplier = Number(useOffset);
-    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
-    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
-    const { tertiary, primary } = theme.palette;
-    const polygonColor = tertiary ? tertiary.light : primary.light;
-    // catches possible null from at's below
-    if (!contentBlocks.length) {
-        return null;
-    }
-    const first = contentBlocks.at(0);
-    const last = contentBlocks.at(-1);
-    const topLeft = (overview.bpToPx({
-        ...first,
-        coord: first.reversed ? first.end : first.start,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const topRight = (overview.bpToPx({
-        ...last,
-        coord: last.reversed ? last.start : last.end,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const startPx = Math.max(0, -offsetPx);
-    const endPx = startPx +
-        totalWidthPxWithoutBorders +
-        (contentBlocks.length * interRegionPaddingWidth) / 2;
-    const points = [
-        [startPx, HEADER_BAR_HEIGHT],
-        [endPx, HEADER_BAR_HEIGHT],
-        [topRight, 0],
-        [topLeft, 0],
-    ];
-    return (React.createElement("polygon", { points: points.toString(), fill: alpha(polygonColor, 0.3), stroke: alpha(polygonColor, 0.8) }));
-});
 const OverviewBox = observer(function ({ scale, model, block, overview, }) {
     const { classes, cx } = useStyles();
     const theme = useTheme();
     const { cytobandOffset, showCytobands } = model;
-    const { start, end, reversed, refName, assemblyName } = block;
-    const { majorPitch } = chooseGridPitch(scale, 120, 15);
+    const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = getSession(model);
     const assembly = assemblyManager.get(assemblyName);
     const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
-    const tickLabels = [];
-    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
-        const offsetLabel = (i + 1) * majorPitch;
-        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
-    }
     const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
     return (React.createElement("div", null,
         React.createElement(Typography, { style: {
@@ -131,16 +91,28 @@ const OverviewBox = observer(function ({ scale, model, block, overview, }) {
                 width: block.widthPx,
                 borderColor: refNameColor,
             } },
-            !canDisplayCytobands
-                ? tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
-                        left: ((labelIdx + 1) * majorPitch) / scale,
-                        pointerEvents: 'none',
-                        color: refNameColor,
-                    } }, getTickDisplayStr(tickLabel, overview.bpPerPx))))
-                : null,
+            !canDisplayCytobands ? (React.createElement(TickLabels, { model: model, overview: overview, scale: scale, block: block })) : null,
             canDisplayCytobands ? (React.createElement("svg", { style: { width: '100%' } },
                 React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }))) : null)));
 });
+const TickLabels = observer(function ({ block, scale, overview, model, }) {
+    const { classes } = useStyles();
+    const { start, end, reversed, refName, assemblyName } = block;
+    const { majorPitch } = chooseGridPitch(scale, 120, 15);
+    const { assemblyManager } = getSession(model);
+    const assembly = assemblyManager.get(assemblyName);
+    const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
+    const tickLabels = [];
+    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
+        const offsetLabel = (i + 1) * majorPitch;
+        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
+    }
+    return tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
+            left: ((labelIdx + 1) * majorPitch) / scale,
+            pointerEvents: 'none',
+            color: refNameColor,
+        } }, getTickDisplayStr(tickLabel, overview.bpPerPx))));
+});
 const Scalebar = observer(function ({ model, scale, overview, }) {
     const { classes } = useStyles();
     const theme = useTheme();
@@ -205,9 +177,7 @@ const OverviewScalebar = observer(function ({ model, children, }) {
         React.createElement(OverviewRubberband, { model: model, overview: overview, ControlComponent: React.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
         React.createElement("div", { className: classes.overview },
             React.createElement("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg },
-                React.createElement(Polygon, { model: model, overview: overview })),
+                React.createElement(OverviewScalebarPolygon, { model: model, overview: overview })),
             children)));
 });
-export { Polygon };
-export { default as Cytobands } from './Cytobands';
 export default OverviewScalebar;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import { LinearGenomeViewModel } from '..';
+declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
+    model: LinearGenomeViewModel;
+    overview: Base1DViewModel;
+    useOffset?: boolean | undefined;
+}) => React.JSX.Element | null;
+export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTheme, alpha } from '@mui/material';
+import { observer } from 'mobx-react';
+// locals
+import { HEADER_BAR_HEIGHT } from '..';
+const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset = true, }) {
+    const theme = useTheme();
+    const multiplier = Number(useOffset);
+    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
+    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
+    const { tertiary, primary } = theme.palette;
+    const polygonColor = tertiary ? tertiary.light : primary.light;
+    // catches possible null from at's below
+    if (!contentBlocks.length) {
+        return null;
+    }
+    const first = contentBlocks.at(0);
+    const last = contentBlocks.at(-1);
+    const topLeft = (overview.bpToPx({
+        ...first,
+        coord: first.reversed ? first.end : first.start,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const topRight = (overview.bpToPx({
+        ...last,
+        coord: last.reversed ? last.start : last.end,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const startPx = Math.max(0, -offsetPx);
+    const endPx = startPx +
+        totalWidthPxWithoutBorders +
+        (contentBlocks.length * interRegionPaddingWidth) / 2;
+    const points = [
+        [startPx, HEADER_BAR_HEIGHT],
+        [endPx, HEADER_BAR_HEIGHT],
+        [topRight, 0],
+        [topLeft, 0],
+    ];
+    return (React.createElement("polygon", { points: points.toString(), fill: alpha(polygonColor, 0.3), stroke: alpha(polygonColor, 0.8) }));
+});
+export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { Menu } from '@jbrowse/core/ui';
+import { getEnv } from '@jbrowse/core/util';
 // local utils
 import { SCALE_BAR_HEIGHT } from '..';
 import { useSideScroll, useRangeSelect, useWheelScroll } from './hooks';
@@ -12,7 +13,6 @@ import Gridlines from './Gridlines';
 import CenterLine from './CenterLine';
 import VerticalGuide from './VerticalGuide';
 import RubberbandSpan from './RubberbandSpan';
-import { getEnv } from '@jbrowse/core/util';
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',

package/esm/LinearGenomeView/model.d.ts

@@ -21,7 +21,9 @@ export interface BpOffset {
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
-    Wrapper?: React.FC<any>;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
     fontSize?: number;
     rulerHeight?: number;
     textHeight?: number;
@@ -47,6 +49,9 @@ export declare const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
  * #category view
+ *
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;

package/esm/LinearGenomeView/model.js

@@ -54,6 +54,9 @@ export const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
  * #category view
+ *
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export function stateModelFactory(pluginManager) {
     return types

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -5,9 +5,9 @@ import { useTheme } from '@mui/material';
 // locals
 import { HEADER_OVERVIEW_HEIGHT } from '..';
 import Cytobands from '../components/Cytobands';
-import { Polygon } from '../components/OverviewScalebar';
 import SVGRuler from './SVGRuler';
 import SVGScalebar from './SVGScalebar';
+import OverviewScalebarPolygon from '../components/OverviewScalebarPolygon';
 export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     const { width, assemblyNames, showCytobands, displayedRegions } = model;
     const { assemblyManager } = getSession(model);
@@ -44,7 +44,7 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
             React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }),
             React.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             React.createElement("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})` },
-                React.createElement(Polygon, { overview: overview, model: model, useOffset: false })))) : null,
+                React.createElement(OverviewScalebarPolygon, { overview: overview, model: model, useOffset: false })))) : null,
         React.createElement("g", { transform: `translate(0 ${fontSize + y})` },
             React.createElement(SVGScalebar, { model: model, fontSize: fontSize })),
         React.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },

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

@@ -1,12 +1,5 @@
 import { LinearGenomeViewModel, ExportSvgOptions } from '..';
 type LGV = LinearGenomeViewModel;
-interface Display {
-    height: number;
-}
-interface Track {
-    displays: Display[];
-}
-export declare function totalHeight(tracks: Track[], textHeight: number, trackLabels: string): number;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
 export { default as SVGRuler } from './SVGRuler';
 export { default as SVGTracks } from './SVGTracks';

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -1,25 +1,24 @@
 /* eslint-disable react-refresh/only-export-components */
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { when } from 'mobx';
-import { getSession, max, measureText, sum } from '@jbrowse/core/util';
+import { getSession, max, measureText, renderToStaticMarkup, } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import SVGTracks from './SVGTracks';
 import SVGHeader from './SVGHeader';
-import { getTrackName } from '@jbrowse/core/util/tracks';
-export function totalHeight(tracks, textHeight, trackLabels) {
-    return sum(tracks.map(t => t.displays[0].height +
-        (['none', 'left'].includes(trackLabels) ? 0 : textHeight)));
-}
+import { totalHeight } from './util';
 // render LGV to SVG
 export async function renderToSvg(model, opts) {
-    var _a;
     await when(() => model.initialized);
     const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children), } = opts;
     const session = getSession(model);
-    const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
+    const { allThemes } = session;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { createRootFn } = getRoot(model);
+    const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
     const { width, tracks, showCytobands } = model;
     const shift = 50;
     const c = +showCytobands * cytobandHeight;
@@ -41,7 +40,7 @@ export async function renderToSvg(model, opts) {
                 React.createElement("g", { transform: `translate(${shift} 0)` },
                     React.createElement("g", { transform: `translate(${trackLabelOffset})` },
                         React.createElement(SVGHeader, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight })),
-                    React.createElement(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, offset: offset, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }))))));
+                    React.createElement(SVGTracks, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, offset: offset, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }))))), createRootFn);
 }
 export { default as SVGRuler } from './SVGRuler';
 export { default as SVGTracks } from './SVGTracks';

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

@@ -0,0 +1,8 @@
+interface Display {
+    height: number;
+}
+interface Track {
+    displays: Display[];
+}
+export declare function totalHeight(tracks: Track[], textHeight: number, trackLabels: string): number;
+export {};

package/esm/LinearGenomeView/svgcomponents/util.js

@@ -0,0 +1,5 @@
+import { sum } from '@jbrowse/core/util';
+export function totalHeight(tracks, textHeight, trackLabels) {
+    return sum(tracks.map(t => t.displays[0].height +
+        (['none', 'left'].includes(trackLabels) ? 0 : textHeight)));
+}