@jbrowse/plugin-linear-genome-view 2.10.3 → 2.11.0

package/dist/LinearGenomeView/components/SearchResultsTable.js

@@ -74,7 +74,7 @@ function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, mode
                             }
                             catch (e) {
                                 console.error(e);
-                                session.notify(`${e}`, 'error');
+                                session.notifyError(`${e}`, e);
                             }
                             handleClose();
                         }, color: "primary", variant: "contained" }, "Go")))))))));

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -33,7 +33,6 @@ const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const react_error_boundary_1 = require("react-error-boundary");
 const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
 const TrackLabelContainer_1 = __importDefault(require("./TrackLabelContainer"));
 const TrackRenderingContainer_1 = __importDefault(require("./TrackRenderingContainer"));
 const useStyles = (0, mui_1.makeStyles)()({
@@ -46,40 +45,28 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'relative',
         zIndex: 2,
     },
-    overlay: {
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        zIndex: 3,
-    },
 });
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
-    const ref2 = (0, react_1.useRef)(null);
-    const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-    const debouncedOnDragEnter = (0, util_1.useDebouncedCallback)(() => {
-        if ((0, mobx_state_tree_1.isAlive)(display) && dimmed) {
-            model.moveTrack(draggingTrackId, track.id);
-        }
-    }, 100);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref2, className: classes.root, variant: "outlined", onClick: event => {
+    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-                const left = ((_a = ref2.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
+                const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
         } },
         react_1.default.createElement(TrackLabelContainer_1.default, { track: track, view: model }),
         react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: e => react_1.default.createElement(ui_1.ErrorMessage, { error: e.error }) },
-            react_1.default.createElement(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: debouncedOnDragEnter })),
-        react_1.default.createElement("div", { className: classes.overlay, style: {
-                height: display.height,
-                background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
-            }, onDragEnter: debouncedOnDragEnter }),
+            react_1.default.createElement(TrackRenderingContainer_1.default, { model: model, track: track, onDragEnter: () => {
+                    if ((0, mobx_state_tree_1.isAlive)(display) &&
+                        draggingTrackId !== undefined &&
+                        draggingTrackId !== display.id) {
+                        model.moveTrack(draggingTrackId, track.id);
+                    }
+                } })),
         react_1.default.createElement(ui_1.ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 });
 exports.default = TrackContainer;

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -17,6 +17,10 @@ const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
+const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
 const TrackLabelDragHandle_1 = __importDefault(require("./TrackLabelDragHandle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
@@ -24,9 +28,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         '&:hover': {
             background: theme.palette.background.paper,
         },
-        transition: theme.transitions.create(['background'], {
-            duration: theme.transitions.duration.shortest,
-        }),
     },
     trackName: {
         margin: '0 auto',
@@ -49,9 +50,35 @@ const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(functio
     const trackName = (0, tracks_1.getTrackName)(trackConf, session);
     const items = [
         {
-            label: minimized ? 'Restore track' : 'Minimize track',
-            icon: minimized ? Add_1.default : Minimize_1.default,
-            onClick: () => track.setMinimized(!minimized),
+            label: 'Track order',
+            type: 'subMenu',
+            subMenu: [
+                {
+                    label: minimized ? 'Restore track' : 'Minimize track',
+                    icon: minimized ? Add_1.default : Minimize_1.default,
+                    onClick: () => track.setMinimized(!minimized),
+                },
+                {
+                    label: 'Move track to top',
+                    icon: KeyboardDoubleArrowUp_1.default,
+                    onClick: () => view.moveTrackToTop(track.id),
+                },
+                {
+                    label: 'Move track up',
+                    icon: KeyboardArrowUp_1.default,
+                    onClick: () => view.moveTrackUp(track.id),
+                },
+                {
+                    label: 'Move track down',
+                    icon: KeyboardArrowDown_1.default,
+                    onClick: () => view.moveTrackDown(track.id),
+                },
+                {
+                    label: 'Move track to bottom',
+                    icon: KeyboardDoubleArrowDown_1.default,
+                    onClick: () => view.moveTrackToBottom(track.id),
+                },
+            ],
         },
         ...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
         ...track.trackMenuItems(),

package/dist/LinearGenomeView/components/ZoomControls.js

@@ -45,16 +45,16 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 const ZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model;
+    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
     (0, react_1.useEffect)(() => {
         setValue(-Math.log2(bpPerPx) * 100);
     }, [setValue, bpPerPx]);
     return (react_1.default.createElement("div", { className: classes.container },
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, size: "large" },
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
             react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), disabled: scaleFactor !== 1 }),
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
+        react_1.default.createElement(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)) }),
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
             react_1.default.createElement(ZoomIn_1.default, null))));
 });
 exports.default = ZoomControls;

package/dist/LinearGenomeView/model.d.ts

@@ -81,7 +81,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    highlight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>;
+    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, {
     width: number;
 } & {
@@ -224,6 +225,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly trackTypeActions: Map<string, MenuItem[]>;
 } & {
+    /**
+     * #action
+     */
+    setColorByCDS(flag: boolean): void;
     /**
      * #action
      */
@@ -255,7 +260,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setHighlight(highlight: Required<ParsedLocString> | undefined): void;
+    addToHighlights(highlight: Required<ParsedLocString>): void;
+    /**
+     * #action
+     */
+    setHighlight(highlight: Required<ParsedLocString>[] | undefined): void;
+    /**
+     * #action
+     */
+    removeHighlight(highlight: Required<ParsedLocString>): void;
     /**
      * #action
      */
@@ -292,6 +305,22 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     hideTrack(trackId: string): number;
 } & {
+    /**
+     * #action
+     */
+    moveTrackDown(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackUp(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackToTop(id: string): void;
+    /**
+     * #action
+     */
+    moveTrackToBottom(id: string): void;
     /**
      * #action
      */
@@ -528,20 +557,21 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
-        regionNumber?: number | undefined;
+        regionNumber?: number;
     }): {
         index: number;
         offsetPx: number;
     } | undefined;
     /**
      * #method
-     * scrolls the view to center on the given bp. if that is not in any
-     * of the displayed regions, does nothing
+     * scrolls the view to center on the given bp. if that is not in any of
+     * the displayed regions, does nothing
+     *
      * @param coord - basepair at which you want to center the view
      * @param refName - refName of the displayedRegion you are centering at
      * @param regionNumber - index of the displayedRegion
      */
-    centerAt(coord: number, refName: string, regionNumber: number): void;
+    centerAt(coord: number, refName: string, regionNumber?: number): void;
     /**
      * #method
      */
@@ -572,7 +602,37 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     } | undefined;
 } & {
     afterCreate(): void;
-}, import("mobx-state-tree")._NotCustomized, 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]>;
+    displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    displayedRegions: import("mobx-state-tree").IArrayType<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>>;
+    tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
+    hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+}>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
 export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';

package/dist/LinearGenomeView/model.js

@@ -50,6 +50,8 @@ const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
 const MiniControls_1 = __importDefault(require("./components/MiniControls"));
 const Header_1 = __importDefault(require("./components/Header"));
 const util_2 = require("./util");
@@ -126,7 +128,6 @@ function stateModelFactory(pluginManager) {
         tracks: mobx_state_tree_1.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
         /**
          * #property
-         * array of currently displayed tracks state model's
          */
         hideHeader: false,
         /**
@@ -169,7 +170,12 @@ function stateModelFactory(pluginManager) {
          * #property
          * highlights on the LGV from the URL parameters
          */
-        highlight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.frozen()),
+        highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
+        /**
+         * #property
+         * color by CDS
+         */
+        colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-colorByCDS') || 'false'))),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -360,7 +366,7 @@ function stateModelFactory(pluginManager) {
             return {
                 ...(0, tracks_1.getParentRenderProps)(self),
                 bpPerPx: self.bpPerPx,
-                highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling'),
+                colorByCDS: self.colorByCDS,
             };
         },
         /**
@@ -431,6 +437,12 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setColorByCDS(flag) {
+            self.colorByCDS = flag;
+        },
         /**
          * #action
          */
@@ -473,11 +485,24 @@ function stateModelFactory(pluginManager) {
         setShowGridlines(b) {
             self.showGridlines = b;
         },
+        /**
+         * #action
+         */
+        addToHighlights(highlight) {
+            var _a;
+            (_a = self.highlight) === null || _a === void 0 ? void 0 : _a.push(highlight);
+        },
         /**
          * #action
          */
         setHighlight(highlight) {
-            self.highlight = highlight;
+            self.highlight = (0, mobx_state_tree_1.cast)(highlight);
+        },
+        /**
+         * #action
+         */
+        removeHighlight(highlight) {
+            self.highlight.remove(highlight);
         },
         /**
          * #action
@@ -598,6 +623,47 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        moveTrackDown(id) {
+            const idx = self.tracks.findIndex(v => v.id === id);
+            if (idx === -1) {
+                return;
+            }
+            if (idx !== -1 && idx < self.tracks.length - 1) {
+                self.tracks.splice(idx, 2, self.tracks[idx + 1], self.tracks[idx]);
+            }
+        },
+        /**
+         * #action
+         */
+        moveTrackUp(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            if (idx > 0) {
+                self.tracks.splice(idx - 1, 2, self.tracks[idx], self.tracks[idx - 1]);
+            }
+        },
+        /**
+         * #action
+         */
+        moveTrackToTop(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            self.tracks = (0, mobx_state_tree_1.cast)([
+                self.tracks[idx],
+                ...self.tracks.filter(track => track.id !== id),
+            ]);
+        },
+        /**
+         * #action
+         */
+        moveTrackToBottom(id) {
+            const idx = self.tracks.findIndex(track => track.id === id);
+            self.tracks = (0, mobx_state_tree_1.cast)([
+                ...self.tracks.filter(track => track.id !== id),
+                self.tracks[idx],
+            ]);
+        },
         /**
          * #action
          */
@@ -610,9 +676,9 @@ function stateModelFactory(pluginManager) {
             if (newIndex === -1) {
                 throw new Error(`Track ID ${targetId} not found`);
             }
-            const track = (0, mobx_state_tree_1.getSnapshot)(self.tracks[oldIndex]);
-            self.tracks.splice(oldIndex, 1);
-            self.tracks.splice(newIndex, 0, track);
+            const tracks = self.tracks.filter((_, idx) => idx !== oldIndex);
+            tracks.splice(newIndex, 0, self.tracks[oldIndex]);
+            self.tracks = (0, mobx_state_tree_1.cast)(tracks);
         },
         /**
          * #action
@@ -803,7 +869,7 @@ function stateModelFactory(pluginManager) {
          * perform animated slide
          */
         function slide(viewWidths) {
-            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo);
+            const [animate, cancelAnimation] = (0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo, undefined, undefined, 200);
             cancelLastAnimation();
             cancelLastAnimation = cancelAnimation;
             animate();
@@ -890,6 +956,7 @@ function stateModelFactory(pluginManager) {
                     ? [
                         {
                             label: 'Sequence search',
+                            icon: Search_1.default,
                             onClick: () => {
                                 (0, util_1.getSession)(self).queueDialog(handleClose => [
                                     SequenceSearchDialog,
@@ -919,6 +986,13 @@ function stateModelFactory(pluginManager) {
                     icon: SyncAlt_1.default,
                     onClick: self.horizontallyFlip,
                 },
+                {
+                    label: 'Color by CDS',
+                    type: 'checkbox',
+                    checked: self.colorByCDS,
+                    icon: Palette_1.default,
+                    onClick: () => self.setColorByCDS(!self.colorByCDS),
+                },
                 {
                     label: 'Show...',
                     icon: Visibility_1.default,
@@ -1083,11 +1157,10 @@ function stateModelFactory(pluginManager) {
             }, { delay: 150 }));
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 const s = (s) => JSON.stringify(s);
-                const { showCytobandsSetting, showCenterLine } = self;
-                if (typeof localStorage !== 'undefined') {
-                    localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting));
-                    localStorage.setItem('lgv-showCenterLine', s(showCenterLine));
-                }
+                const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
+                (0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
+                (0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
+                (0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
             }));
         },
     }))
@@ -1271,8 +1344,9 @@ function stateModelFactory(pluginManager) {
         },
         /**
          * #method
-         * scrolls the view to center on the given bp. if that is not in any
-         * of the displayed regions, does nothing
+         * scrolls the view to center on the given bp. if that is not in any of
+         * the displayed regions, does nothing
+         *
          * @param coord - basepair at which you want to center the view
          * @param refName - refName of the displayedRegion you are centering at
          * @param regionNumber - index of the displayedRegion
@@ -1330,7 +1404,19 @@ function stateModelFactory(pluginManager) {
                 document.removeEventListener('keydown', handler);
             });
         },
-    }));
+    }))
+        .preProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { highlight, ...rest } = snap;
+        return {
+            highlight: Array.isArray(highlight) || highlight === undefined
+                ? highlight
+                : [highlight],
+            ...rest,
+        };
+    });
 }
 exports.stateModelFactory = stateModelFactory;
 var LinearGenomeView_1 = require("./components/LinearGenomeView");

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -19,7 +19,7 @@ const util_2 = require("./util");
 // render LGV to SVG
 async function renderToSvg(model, opts) {
     await (0, mobx_1.when)(() => model.initialized);
-    const { textHeight = 18, headerHeight = 40, rulerHeight = 50, fontSize = 13, cytobandHeight = 100, trackLabels = 'offset', themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children), } = 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;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any