@jbrowse/plugin-linear-genome-view 2.18.0 → 3.0.0

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -15,33 +15,44 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const CenterLine_1 = __importDefault(require("./CenterLine"));
 const Gridlines_1 = __importDefault(require("./Gridlines"));
-const Highlight_1 = __importDefault(require("./Highlight"));
 const Rubberband_1 = __importDefault(require("./Rubberband"));
-const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
 const Scalebar_1 = __importDefault(require("./Scalebar"));
 const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
 const consts_1 = require("../consts");
 const useRangeSelect_1 = require("./useRangeSelect");
 const useSideScroll_1 = require("./useSideScroll");
 const useWheelScroll_1 = require("./useWheelScroll");
+const CenterLine = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CenterLine'))));
+const Highlight = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./Highlight'))));
+const RubberbandSpan = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./RubberbandSpan'))));
 const useStyles = (0, mui_1.makeStyles)()({
     tracksContainer: {
         position: 'relative',
@@ -57,23 +68,18 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
     (0, useWheelScroll_1.useWheelScroll)(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (react_1.default.createElement("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp },
-        showGridlines ? react_1.default.createElement(Gridlines_1.default, { model: model }) : null,
-        showCenterLine ? react_1.default.createElement(CenterLine_1.default, { model: model }) : null,
-        guideX !== undefined ? (react_1.default.createElement(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? (react_1.default.createElement(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left })) : null,
-        anchorPosition ? (react_1.default.createElement(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                left: anchorPosition.clientX,
-                top: anchorPosition.clientY,
-            }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
-        react_1.default.createElement(Rubberband_1.default, { model: model, ControlComponent: react_1.default.createElement(Scalebar_1.default, { model: model, style: {
-                    height: consts_1.SCALE_BAR_HEIGHT,
-                    boxSizing: 'border-box',
-                } }) }),
-        react_1.default.createElement(Highlight_1.default, { model: model }),
-        additional,
-        children));
+        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                    left: anchorPosition.clientX,
+                    top: anchorPosition.clientY,
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {
+                        height: consts_1.SCALE_BAR_HEIGHT,
+                        boxSizing: 'border-box',
+                    } }) }), (0, jsx_runtime_1.jsx)(HighlightGroup, { model: model }), additional, children] }));
+});
+const HighlightGroup = (0, mobx_react_1.observer)(function HighlightGroup({ model, }) {
+    return model.highlight.length ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => ((0, jsx_runtime_1.jsx)(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
 });
 exports.default = TracksContainer;

package/dist/LinearGenomeView/components/VerticalGuide.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;
     coordX: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default VerticalGuide;

package/dist/LinearGenomeView/components/VerticalGuide.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -19,10 +16,9 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true },
-        react_1.default.createElement("div", { className: classes.guide, style: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: {
                 left: coordX,
                 background: 'red',
-            } })));
+            } }) }));
 });
 exports.default = VerticalGuide;

package/dist/LinearGenomeView/components/useRangeSelect.d.ts

@@ -5,7 +5,7 @@ interface AnchorPosition {
     clientX: number;
     clientY: number;
 }
-export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, model: LinearGenomeViewModel, shiftOnly?: boolean): {
+export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: LinearGenomeViewModel, shiftOnly?: boolean): {
     open: boolean;
     guideX: number | undefined;
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;

package/dist/LinearGenomeView/components/useWheelScroll.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-export declare function useWheelScroll(ref: React.RefObject<HTMLDivElement>, model: {
+export declare function useWheelScroll(ref: React.RefObject<HTMLDivElement | null>, model: {
     bpPerPx: number;
     zoomTo: (arg: number, arg2?: number) => void;
     setScaleFactor: (arg: number) => void;

package/dist/LinearGenomeView/components/useWheelScroll.js

@@ -4,7 +4,7 @@ exports.useWheelScroll = useWheelScroll;
 const react_1 = require("react");
 function useWheelScroll(ref, model) {
     const delta = (0, react_1.useRef)(0);
-    const timeout = (0, react_1.useRef)();
+    const timeout = (0, react_1.useRef)(null);
     const scheduled = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         const curr = ref.current;

package/dist/LinearGenomeView/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/dist/LinearGenomeView/model.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { BpOffset, ExportSvgOptions, HighlightType, NavLocation } from './types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
@@ -7,44 +8,6 @@ import type { ParsedLocString } from '@jbrowse/core/util';
 import type { BaseBlock, BlockSet } from '@jbrowse/core/util/blockTypes';
 import type { Region } from '@jbrowse/core/util/types';
 import type { Instance } from 'mobx-state-tree';
-export interface BpOffset {
-    refName?: string;
-    index: number;
-    offset: number;
-    start?: number;
-    end?: number;
-    coord?: number;
-    reversed?: boolean;
-    assemblyName?: string;
-    oob?: boolean;
-}
-export interface ExportSvgOptions {
-    rasterizeLayers?: boolean;
-    filename?: string;
-    Wrapper?: React.FC<{
-        children: React.ReactNode;
-    }>;
-    fontSize?: number;
-    rulerHeight?: number;
-    textHeight?: number;
-    paddingHeight?: number;
-    headerHeight?: number;
-    cytobandHeight?: number;
-    trackLabels?: string;
-    themeName?: string;
-}
-export interface HighlightType {
-    start: number;
-    end: number;
-    assemblyName: string;
-    refName: string;
-}
-export interface NavLocation {
-    refName: string;
-    start?: number;
-    end?: number;
-    assemblyName?: string;
-}
 export declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -271,5 +234,4 @@ export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
 export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';
 export { default as RefNameAutocomplete } from './components/RefNameAutocomplete';
 export { default as SearchBox } from './components/SearchBox';
-export { default as ZoomControls } from './components/ZoomControls';
 export { renderToSvg } from './svgcomponents/SVGLinearGenomeView';

package/dist/LinearGenomeView/model.js

@@ -15,18 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToSvg = exports.ZoomControls = exports.SearchBox = exports.RefNameAutocomplete = exports.ReactComponent = exports.LinearGenomeView = void 0;
+exports.renderToSvg = exports.SearchBox = exports.RefNameAutocomplete = exports.ReactComponent = exports.LinearGenomeView = void 0;
 exports.stateModelFactory = stateModelFactory;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
@@ -61,19 +71,6 @@ const SequenceSearchDialog = (0, react_1.lazy)(() => Promise.resolve().then(() =
 const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
 const GetSequenceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/GetSequenceDialog'))));
 const SearchResultsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SearchResultsDialog'))));
-function calculateVisibleLocStrings(contentBlocks) {
-    if (!contentBlocks.length) {
-        return '';
-    }
-    const isSingleAssemblyName = contentBlocks.every(b => b.assemblyName === contentBlocks[0].assemblyName);
-    const locs = contentBlocks.map(block => (0, util_1.assembleLocString)({
-        ...block,
-        start: Math.round(block.start),
-        end: Math.round(block.end),
-        assemblyName: isSingleAssemblyName ? undefined : block.assemblyName,
-    }));
-    return locs.join(' ');
-}
 function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
         .compose('LinearGenomeView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
@@ -87,13 +84,13 @@ function stateModelFactory(pluginManager) {
         hideHeaderOverview: false,
         hideNoTracksActive: false,
         trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
-        showCenterLine: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showCenterLine') || 'false'))),
-        showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showCytobands') || 'true'))),
+        showCenterLine: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showCenterLine', false)),
+        showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showCytobands', true)),
         trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || ''),
         showGridlines: true,
         highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
-        colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-colorByCDS') || 'false'))),
-        showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showTrackOutlines') || 'true'))),
+        colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-colorByCDS', false)),
+        showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showTrackOutlines', true)),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -175,10 +172,12 @@ function stateModelFactory(pluginManager) {
             if (self.hideHeader) {
                 return 0;
             }
-            if (self.hideHeaderOverview) {
+            else if (self.hideHeaderOverview) {
                 return consts_1.HEADER_BAR_HEIGHT;
             }
-            return consts_1.HEADER_BAR_HEIGHT + consts_1.HEADER_OVERVIEW_HEIGHT;
+            else {
+                return consts_1.HEADER_BAR_HEIGHT + consts_1.HEADER_OVERVIEW_HEIGHT;
+            }
         },
         get trackHeights() {
             return (0, util_1.sum)(self.tracks.map(t => t.displays[0].height));
@@ -786,10 +785,10 @@ function stateModelFactory(pluginManager) {
                 }));
             },
             get visibleLocStrings() {
-                return calculateVisibleLocStrings(this.dynamicBlocks.contentBlocks);
+                return (0, util_2.calculateVisibleLocStrings)(this.dynamicBlocks.contentBlocks);
             },
             get coarseVisibleLocStrings() {
-                return calculateVisibleLocStrings(self.coarseDynamicBlocks);
+                return (0, util_2.calculateVisibleLocStrings)(self.coarseDynamicBlocks);
             },
         };
     })
@@ -999,7 +998,5 @@ var RefNameAutocomplete_1 = require("./components/RefNameAutocomplete");
 Object.defineProperty(exports, "RefNameAutocomplete", { enumerable: true, get: function () { return __importDefault(RefNameAutocomplete_1).default; } });
 var SearchBox_1 = require("./components/SearchBox");
 Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return __importDefault(SearchBox_1).default; } });
-var ZoomControls_1 = require("./components/ZoomControls");
-Object.defineProperty(exports, "ZoomControls", { enumerable: true, get: function () { return __importDefault(ZoomControls_1).default; } });
 var SVGLinearGenomeView_1 = require("./svgcomponents/SVGLinearGenomeView");
 Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return SVGLinearGenomeView_1.renderToSvg; } });

package/dist/LinearGenomeView/svgcomponents/SVGBackground.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export default function SVGBackground({ width, height, shift, }: {
     width: number;
     height: number;
     shift: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGBackground;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
+    return ((0, jsx_runtime_1.jsx)("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
 }

package/dist/LinearGenomeView/svgcomponents/SVGHeader.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }: {
     model: LinearGenomeViewModel;
     rulerHeight: number;
     fontSize: number;
     cytobandHeight: number;
-}): React.JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGHeader;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
 const material_1 = require("@mui/material");
@@ -43,15 +43,5 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
         coord: last.reversed ? last.start : last.end,
     }) || 0;
     const y = +showCytobands * cytobandHeight;
-    return (react_1.default.createElement("g", { id: "header" },
-        react_1.default.createElement("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c }, assemblyName),
-        showCytobands ? (react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight})` },
-            react_1.default.createElement(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }),
-            react_1.default.createElement("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: consts_1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
-            react_1.default.createElement("g", { transform: `translate(0,${consts_1.HEADER_OVERVIEW_HEIGHT})` },
-                react_1.default.createElement(OverviewScalebarPolygon_1.default, { overview: overview, model: model, useOffset: false })))) : null,
-        react_1.default.createElement("g", { transform: `translate(0 ${fontSize + y})` },
-            react_1.default.createElement(SVGScalebar_1.default, { model: model, fontSize: fontSize })),
-        react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },
-            react_1.default.createElement(SVGRuler_1.default, { model: model, fontSize: fontSize }))));
+    return ((0, jsx_runtime_1.jsxs)("g", { id: "header", children: [(0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c, children: assemblyName }), showCytobands ? ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0 ${rulerHeight})`, children: [(0, jsx_runtime_1.jsx)(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }), (0, jsx_runtime_1.jsx)("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: consts_1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0,${consts_1.HEADER_OVERVIEW_HEIGHT})`, children: (0, jsx_runtime_1.jsx)(OverviewScalebarPolygon_1.default, { overview: overview, model: model, useOffset: false }) })] })) : null, (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${fontSize + y})`, children: (0, jsx_runtime_1.jsx)(SVGScalebar_1.default, { model: model, fontSize: fontSize }) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${rulerHeight + y})`, children: (0, jsx_runtime_1.jsx)(SVGRuler_1.default, { model: model, fontSize: fontSize }) })] }));
 }

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

@@ -1,4 +1,5 @@
-import type { ExportSvgOptions, LinearGenomeViewModel } from '..';
+import type { LinearGenomeViewModel } from '..';
+import type { ExportSvgOptions } from '../types';
 type LGV = LinearGenomeViewModel;
 export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
 export { default as SVGRuler } from './SVGRuler';

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -5,13 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGTracks = exports.SVGRuler = void 0;
 exports.renderToSvg = renderToSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const material_1 = require("@mui/material");
 const mobx_1 = require("mobx");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 const SVGHeader_1 = __importDefault(require("./SVGHeader"));
 const SVGTracks_1 = __importDefault(require("./SVGTracks"));
@@ -21,7 +20,6 @@ async function renderToSvg(model, opts) {
     const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => children, } = opts;
     const session = (0, util_1.getSession)(model);
     const { allThemes } = session;
-    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const theme = allThemes === null || allThemes === void 0 ? void 0 : allThemes()[themeName];
     const { width, tracks, showCytobands } = model;
     const shift = 50;
@@ -36,15 +34,7 @@ async function renderToSvg(model, opts) {
     const trackLabelMaxLen = (0, util_1.max)(tracks.map(t => (0, util_1.measureText)((0, tracks_1.getTrackName)(t.configuration, session), fontSize)), 0) + 40;
     const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0;
     const w = width + trackLabelOffset;
-    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement("svg", { width: w, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, height].toString() },
-                react_1.default.createElement(SVGBackground_1.default, { width: w, height: height, shift: shift }),
-                react_1.default.createElement("g", { transform: `translate(${shift} 0)` },
-                    react_1.default.createElement("g", { transform: `translate(${trackLabelOffset})` },
-                        react_1.default.createElement(SVGHeader_1.default, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight })),
-                    react_1.default.createElement("g", { transform: `translate(0 ${offset})` },
-                        react_1.default.createElement(SVGTracks_1.default, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset })))))), createRootFn);
+    return (0, util_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme), children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)("svg", { width: w, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, height].toString(), children: [(0, jsx_runtime_1.jsx)(SVGBackground_1.default, { width: w, height: height, shift: shift }), (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${shift} 0)`, children: [(0, jsx_runtime_1.jsx)("g", { transform: `translate(${trackLabelOffset})`, children: (0, jsx_runtime_1.jsx)(SVGHeader_1.default, { model: model, fontSize: fontSize, rulerHeight: rulerHeight, cytobandHeight: cytobandHeight }) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${offset})`, children: (0, jsx_runtime_1.jsx)(SVGTracks_1.default, { textHeight: textHeight, fontSize: fontSize, model: model, displayResults: displayResults, trackLabels: trackLabels, trackLabelOffset: trackLabelOffset }) })] })] }) }) }));
 }
 var SVGRuler_1 = require("./SVGRuler");
 Object.defineProperty(exports, "SVGRuler", { enumerable: true, get: function () { return __importDefault(SVGRuler_1).default; } });

package/dist/LinearGenomeView/svgcomponents/SVGRegionSeparators.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 export default function SVGRegionSeparators({ model, height, }: {
     height: number;
     model: LGV;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/LinearGenomeView/svgcomponents/SVGRegionSeparators.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGRegionSeparators;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 function SVGRegionSeparators({ model, height, }) {
     const { dynamicBlocks, offsetPx, interRegionPaddingWidth } = model;
-    return (react_1.default.createElement(react_1.default.Fragment, null, dynamicBlocks.contentBlocks.slice(1).map(block => (react_1.default.createElement("rect", { key: block.key, x: block.offsetPx - offsetPx - interRegionPaddingWidth, width: interRegionPaddingWidth, y: 0, height: height, fill: "grey" })))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dynamicBlocks.contentBlocks.slice(1).map(block => ((0, jsx_runtime_1.jsx)("rect", { x: block.offsetPx - offsetPx - interRegionPaddingWidth, width: interRegionPaddingWidth, y: 0, height: height, fill: "grey" }, block.key))) }));
 }

package/dist/LinearGenomeView/svgcomponents/SVGRuler.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 export default function SVGRuler({ model, fontSize, }: {
     model: LGV;
     fontSize: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGRuler;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const util_2 = require("../util");
@@ -13,39 +13,27 @@ function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = tr
     const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, major, minor);
     const theme = (0, material_1.useTheme)();
     const c = (0, util_1.stripAlpha)(theme.palette.text.secondary);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        ticks.map(tick => {
-            const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (react_1.default.createElement("line", { key: `tick-${tick.base}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }));
-        }),
-        !hideText
-            ? ticks
-                .filter(tick => tick.type === 'major')
-                .map(tick => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [ticks.map(tick => {
                 const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (react_1.default.createElement("text", { key: `label-${tick.base}`, x: x - 3, y: 7 + 11, fontSize: 11, fill: c }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx)));
-            })
-            : null));
+                return ((0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }, `tick-${tick.base}`));
+            }), !hideText
+                ? ticks
+                    .filter(tick => tick.type === 'major')
+                    .map(tick => {
+                    const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+                    return ((0, jsx_runtime_1.jsx)("text", { x: x - 3, y: 7 + 11, fontSize: 11, fill: c, children: (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx) }, `label-${tick.base}`));
+                })
+                : null] }));
 }
 function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = (0, material_1.useTheme)();
     const c = (0, util_1.stripAlpha)(theme.palette.text.primary);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SVGRegionSeparators_1.default, { model: model, height: 30 }),
-        contentBlocks.map(block => {
-            const { start, end, key, reversed, offsetPx, refName, widthPx } = block;
-            const offset = offsetPx - viewOffsetPx;
-            const clipid = `clip-${key}`;
-            return (react_1.default.createElement("g", { key: key },
-                react_1.default.createElement("defs", null,
-                    react_1.default.createElement("clipPath", { id: clipid },
-                        react_1.default.createElement("rect", { x: 0, y: 0, width: widthPx, height: 100 }))),
-                react_1.default.createElement("g", { transform: `translate(${offset} 0)` },
-                    react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
-                        react_1.default.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c }, refName),
-                        react_1.default.createElement("g", { transform: "translate(0 20)" },
-                            react_1.default.createElement(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }))))));
-        })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SVGRegionSeparators_1.default, { model: model, height: 30 }), contentBlocks.map(block => {
+                const { start, end, key, reversed, offsetPx, refName, widthPx } = block;
+                const offset = offsetPx - viewOffsetPx;
+                const clipid = `clip-${key}`;
+                return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: widthPx, height: 100 }) }) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${offset} 0)`, children: (0, jsx_runtime_1.jsxs)("g", { clipPath: `url(#${clipid})`, children: [(0, jsx_runtime_1.jsx)("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c, children: refName }), (0, jsx_runtime_1.jsx)("g", { transform: "translate(0 20)", children: (0, jsx_runtime_1.jsx)(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }) })] }) })] }, key));
+            })] }));
 }

package/dist/LinearGenomeView/svgcomponents/SVGScalebar.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 export default function SVGScalebar({ model, fontSize, }: {
     model: LGV;
     fontSize: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGScalebar;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 function SVGScalebar({ model, fontSize, }) {
@@ -16,9 +13,5 @@ function SVGScalebar({ model, fontSize, }) {
     const c = (0, util_1.stripAlpha)(theme.palette.text.secondary);
     const x = x0 + (x1 - x0) / 2;
     const y = fontSize;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: c }),
-        react_1.default.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: c }),
-        react_1.default.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: c }),
-        react_1.default.createElement("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "hanging", fontSize: fontSize, fill: c }, displayBp)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: c }), (0, jsx_runtime_1.jsx)("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: c }), (0, jsx_runtime_1.jsx)("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: c }), (0, jsx_runtime_1.jsx)("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "hanging", fontSize: fontSize, fill: c, children: displayBp })] }));
 }