@jbrowse/plugin-circular-view 2.17.0 → 3.0.0

package/dist/CircularView/components/CircularView.js

@@ -3,15 +3,14 @@ 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 mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 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");
-// locals
-const Ruler_1 = __importDefault(require("./Ruler"));
 const Controls_1 = __importDefault(require("./Controls"));
 const ImportForm_1 = __importDefault(require("./ImportForm"));
+const Ruler_1 = __importDefault(require("./Ruler"));
 const dragHandleHeight = 3;
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
@@ -24,12 +23,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 const Slices = (0, mobx_react_1.observer)(({ model }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        model.staticSlices.map(slice => (react_1.default.createElement(Ruler_1.default, { key: (0, util_1.assembleLocString)(slice.region.elided ? slice.region.regions[0] : slice.region), model: model, slice: slice }))),
-        model.tracks.map(track => {
-            const display = track.displays[0];
-            return (react_1.default.createElement(display.RenderingComponent, { key: display.id, display: display, view: model }));
-        })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [model.staticSlices.map(slice => ((0, jsx_runtime_1.jsx)(Ruler_1.default, { model: model, slice: slice }, (0, util_1.assembleLocString)(slice.region.elided ? slice.region.regions[0] : slice.region)))), model.tracks.map(track => {
+                const display = track.displays[0];
+                return ((0, jsx_runtime_1.jsx)(display.RenderingComponent, { display: display, view: model }, display.id));
+            })] }));
 });
 const CircularView = (0, mobx_react_1.observer)(({ model }) => {
     const initialized = !!model.displayedRegions.length &&
@@ -38,32 +35,26 @@ const CircularView = (0, mobx_react_1.observer)(({ model }) => {
         model.initialized;
     const showImportForm = !initialized && !model.disableImportForm;
     const showFigure = initialized && !showImportForm;
-    return showImportForm || model.error ? (react_1.default.createElement(ImportForm_1.default, { model: model })) : showFigure ? (react_1.default.createElement(CircularViewLoaded, { model: model })) : null;
+    return showImportForm || model.error ? ((0, jsx_runtime_1.jsx)(ImportForm_1.default, { model: model })) : showFigure ? ((0, jsx_runtime_1.jsx)(CircularViewLoaded, { model: model })) : null;
 });
 const CircularViewLoaded = (0, mobx_react_1.observer)(function ({ model, }) {
     const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.root, style: { width, height }, "data-testid": id },
-        react_1.default.createElement("div", { className: classes.scroller, style: { width, height } },
-            react_1.default.createElement("svg", { style: {
-                    transform: `rotate(${offsetRadians}rad)`,
-                    transition: 'transform 0.5s',
-                    transformOrigin: centerXY.map(x => `${x}px`).join(' '),
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.root, style: { width, height }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.scroller, style: { width, height }, children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                        transform: `rotate(${offsetRadians}rad)`,
+                        transition: 'transform 0.5s',
+                        transformOrigin: centerXY.map(x => `${x}px`).join(' '),
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                    }, width: figureWidth, height: figureHeight, children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(${centerXY})`, children: (0, jsx_runtime_1.jsx)(Slices, { model: model }) }) }) }), (0, jsx_runtime_1.jsx)(Controls_1.default, { model: model }), hideVerticalResizeHandle ? null : ((0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: model.resizeHeight, style: {
+                    height: dragHandleHeight,
                     position: 'absolute',
+                    bottom: 0,
                     left: 0,
-                    top: 0,
-                }, width: figureWidth, height: figureHeight },
-                react_1.default.createElement("g", { transform: `translate(${centerXY})` },
-                    react_1.default.createElement(Slices, { model: model })))),
-        react_1.default.createElement(Controls_1.default, { model: model }),
-        hideVerticalResizeHandle ? null : (react_1.default.createElement(ui_1.ResizeHandle, { onDrag: model.resizeHeight, style: {
-                height: dragHandleHeight,
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                background: '#ccc',
-                boxSizing: 'border-box',
-                borderTop: '1px solid #fafafa',
-            } }))));
+                    background: '#ccc',
+                    boxSizing: 'border-box',
+                    borderTop: '1px solid #fafafa',
+                } }))] }));
 });
 exports.default = CircularView;

package/dist/CircularView/components/Controls.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { CircularViewModel } from '../models/model';
+import type { CircularViewModel } from '../model';
 declare const Controls: ({ model }: {
     model: CircularViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Controls;

package/dist/CircularView/components/Controls.js

@@ -1,47 +1,24 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __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 mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("@jbrowse/core/ui/Icons");
 const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
-// icons
-const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
-const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
-const RotateLeft_1 = __importDefault(require("@mui/icons-material/RotateLeft"));
-const RotateRight_1 = __importDefault(require("@mui/icons-material/RotateRight"));
-const LockOpen_1 = __importDefault(require("@mui/icons-material/LockOpen"));
+const util_1 = require("@jbrowse/core/util");
 const Lock_1 = __importDefault(require("@mui/icons-material/Lock"));
-const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+const LockOpen_1 = __importDefault(require("@mui/icons-material/LockOpen"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const Icons_1 = require("@jbrowse/core/ui/Icons");
-const util_1 = require("@jbrowse/core/util");
+const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+const RotateLeft_1 = __importDefault(require("@mui/icons-material/RotateLeft"));
+const RotateRight_1 = __importDefault(require("@mui/icons-material/RotateRight"));
+const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const ExportSvgDialog_1 = __importDefault(require("./ExportSvgDialog"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     controls: {
@@ -55,40 +32,26 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const Controls = (0, mobx_react_1.observer)(function ({ model }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    return (react_1.default.createElement("div", { className: classes.controls },
-        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomOutButton, title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out', disabled: model.atMaxBpPerPx || model.lockedFitToWindow },
-            react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomInButton, disabled: model.atMinBpPerPx, title: "zoom in" },
-            react_1.default.createElement(ZoomIn_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: model.rotateCounterClockwiseButton, title: "rotate counter-clockwise" },
-            react_1.default.createElement(RotateLeft_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: model.rotateClockwiseButton, title: "rotate clockwise" },
-            react_1.default.createElement(RotateRight_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: model.toggleFitToWindowLock, title: model.lockedFitToWindow
-                ? 'locked model to window size'
-                : 'unlocked model to zoom further', disabled: model.tooSmallToLock }, model.lockedFitToWindow ? react_1.default.createElement(Lock_1.default, null) : react_1.default.createElement(LockOpen_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } },
-            react_1.default.createElement(MoreVert_1.default, null)),
-        model.hideTrackSelectorButton ? null : (react_1.default.createElement(material_1.IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select" },
-            react_1.default.createElement(Icons_1.TrackSelector, null))),
-        anchorEl ? (react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl, menuItems: [
-                {
-                    label: 'Export SVG',
-                    icon: PhotoCamera_1.default,
-                    onClick: () => {
-                        (0, util_1.getSession)(model).queueDialog(handleClose => [
-                            ExportSvgDialog_1.default,
-                            { model, handleClose },
-                        ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.controls, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.zoomOutButton, title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out', disabled: model.atMaxBpPerPx || model.lockedFitToWindow, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.zoomInButton, disabled: model.atMinBpPerPx, title: "zoom in", children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.rotateCounterClockwiseButton, title: "rotate counter-clockwise", children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.rotateClockwiseButton, title: "rotate clockwise", children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.toggleFitToWindowLock, title: model.lockedFitToWindow
+                    ? 'locked model to window size'
+                    : 'unlocked model to zoom further', disabled: model.tooSmallToLock, children: model.lockedFitToWindow ? (0, jsx_runtime_1.jsx)(Lock_1.default, {}) : (0, jsx_runtime_1.jsx)(LockOpen_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), model.hideTrackSelectorButton ? null : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) })), anchorEl ? ((0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl, menuItems: [
+                    {
+                        label: 'Export SVG',
+                        icon: PhotoCamera_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(handleClose => [
+                                ExportSvgDialog_1.default,
+                                { model, handleClose },
+                            ]);
+                        },
                     },
-                },
-            ], onMenuItemClick: (_event, callback) => {
-                callback();
-                setAnchorEl(null);
-            }, open: Boolean(anchorEl), onClose: () => {
-                setAnchorEl(null);
-            } })) : null));
+                ], onMenuItemClick: (_event, callback) => {
+                    callback();
+                    setAnchorEl(null);
+                }, open: Boolean(anchorEl), onClose: () => {
+                    setAnchorEl(null);
+                } })) : null] }));
 });
 exports.default = Controls;

package/dist/CircularView/components/ExportSvgDialog.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { ExportSvgOptions } from '../models/model';
+import type { ExportSvgOptions } from '../model';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/CircularView/components/ExportSvgDialog.js

@@ -1,41 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ExportSvgDialog;
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
+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 material_1 = require("@mui/material");
 function LoadingMessage() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)(`svg-${key}`, val);
@@ -48,41 +23,31 @@ function ExportSvgDialog({ model, handleClose, }) {
     const [error, setError] = (0, react_1.useState)();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                    setLoading(true);
-                    setError(undefined);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

package/dist/CircularView/components/ImportForm.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { CircularViewModel } from '../models/model';
+import type { CircularViewModel } from '../model';
 declare const ImportForm: ({ model }: {
     model: CircularViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ImportForm;

package/dist/CircularView/components/ImportForm.js

@@ -1,34 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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;
-};
 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 material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     importFormContainer: {
         padding: theme.spacing(6),
@@ -46,20 +24,12 @@ const ImportForm = (0, mobx_react_1.observer)(function ({ model }) {
         : 'No configured assemblies';
     const regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
     const err = assemblyError || error;
-    return (react_1.default.createElement(material_1.Container, { className: classes.importFormContainer },
-        err ? (react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(ui_1.ErrorMessage, { error: err })))) : null,
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(ui_1.AssemblySelector, { onChange: val => {
-                        model.setError(undefined);
-                        setSelectedAsm(val);
-                    }, session: session, selected: selectedAsm })),
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.Button, { disabled: !regions.length, onClick: () => {
-                        model.setError(undefined);
-                        model.setDisplayedRegions(regions);
-                    }, variant: "contained", color: "primary" }, regions.length || err ? 'Open' : 'Loading...')))));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { className: classes.importFormContainer, children: [err ? ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: err }) }) })) : null, (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { onChange: val => {
+                                model.setError(undefined);
+                                setSelectedAsm(val);
+                            }, session: session, selected: selectedAsm }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !regions.length, onClick: () => {
+                                model.setError(undefined);
+                                model.setDisplayedRegions(regions);
+                            }, variant: "contained", color: "primary", children: regions.length || err ? 'Open' : 'Loading...' }) })] })] }));
 });
 exports.default = ImportForm;

package/dist/CircularView/components/Ruler.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Slice } from '../models/slices';
-import { CircularViewModel } from '../models/model';
+import type { CircularViewModel } from '../model';
+import type { Slice } from '../slices';
 declare const Ruler: ({ model, slice, }: {
     model: CircularViewModel;
     slice: Slice;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Ruler;

package/dist/CircularView/components/Ruler.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 });
-const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const color_1 = require("@jbrowse/core/util/color");
 const styles_1 = require("@mui/material/styles");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     rulerLabel: {
@@ -18,7 +15,6 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 function sliceArcPath(slice, radiusPx, startBase, endBase) {
-    // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
     if (slice.flipped) {
         ;
         [startBase, endBase] = [endBase, startBase];
@@ -48,22 +44,19 @@ const ElisionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, reg
     const endXY = (0, util_1.polarToCartesian)(radiusPx, endRadians);
     const widthPx = (endRadians - startRadians) * radiusPx;
     const largeArc = endRadians - startRadians > Math.PI ? '1' : '0';
-    // TODO: draw the elision
     const centerRadians = (endRadians + startRadians) / 2;
     const regionCount = `[${Number(region.regions.length).toLocaleString()}]`;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(RulerLabel, { text: regionCount, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, title: `${regionCount} more regions`, color: theme.palette.text.primary }),
-        react_1.default.createElement("path", { d: [
-                'M',
-                ...startXY,
-                'A',
-                radiusPx,
-                radiusPx,
-                '0',
-                largeArc,
-                '1',
-                ...endXY,
-            ].join(' '), ...(0, util_1.getStrokeProps)(theme.palette.text.secondary), strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RulerLabel, { text: regionCount, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, title: `${regionCount} more regions`, color: theme.palette.text.primary }), (0, jsx_runtime_1.jsx)("path", { d: [
+                    'M',
+                    ...startXY,
+                    'A',
+                    radiusPx,
+                    radiusPx,
+                    '0',
+                    largeArc,
+                    '1',
+                    ...endXY,
+                ].join(' '), ...(0, util_1.getStrokeProps)(theme.palette.text.secondary), strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })] }));
 });
 const RulerLabel = (0, mobx_react_1.observer)(function ({ view, text, maxWidthPx, radians, radiusPx, title, color, }) {
     const { classes } = useStyles();
@@ -72,24 +65,15 @@ const RulerLabel = (0, mobx_react_1.observer)(function ({ view, text, maxWidthPx
         return null;
     }
     if (text.length * 6.5 < maxWidthPx) {
-        // text is rotated parallel to the ruler arc
-        return (react_1.default.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "middle", dominantBaseline: "baseline", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians) + 90})`, ...(0, util_1.getFillProps)(color) },
-            text,
-            react_1.default.createElement("title", null, title || text)));
+        return ((0, jsx_runtime_1.jsxs)("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "middle", dominantBaseline: "baseline", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians) + 90})`, ...(0, util_1.getFillProps)(color), children: [text, (0, jsx_runtime_1.jsx)("title", { children: title || text })] }));
     }
     if (maxWidthPx > 4) {
-        // text is rotated perpendicular to the ruler arc
         const overallRotation = (0, util_1.radToDeg)(radians + view.offsetRadians - Math.PI / 2);
         if (overallRotation >= 180) {
-            return (react_1.default.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "start", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians)})`, fill: color },
-                text,
-                react_1.default.createElement("title", null, title || text)));
+            return ((0, jsx_runtime_1.jsxs)("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "start", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians)})`, fill: color, children: [text, (0, jsx_runtime_1.jsx)("title", { children: title || text })] }));
         }
-        return (react_1.default.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "end", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians) + 180})`, fill: color },
-            text,
-            react_1.default.createElement("title", null, title || text)));
+        return ((0, jsx_runtime_1.jsxs)("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "end", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${(0, util_1.radToDeg)(radians) + 180})`, fill: color, children: [text, (0, jsx_runtime_1.jsx)("title", { children: title || text })] }));
     }
-    // if you get here there is no room for the text at all
     return null;
 });
 const RegionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, region, }) {
@@ -112,12 +96,9 @@ const RegionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, regi
     else {
         color = theme.palette.text.primary;
     }
-    // TODO: slice flipping
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }),
-        react_1.default.createElement("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }), (0, jsx_runtime_1.jsx)("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })] }));
 });
 const Ruler = (0, mobx_react_1.observer)(function ({ model, slice, }) {
-    return slice.region.elided ? (react_1.default.createElement(ElisionRulerArc, { key: (0, util_1.assembleLocString)(slice.region.regions[0]), model: model, region: slice.region, slice: slice })) : (react_1.default.createElement(RegionRulerArc, { key: (0, util_1.assembleLocString)(slice.region), region: slice.region, model: model, slice: slice }));
+    return slice.region.elided ? ((0, jsx_runtime_1.jsx)(ElisionRulerArc, { model: model, region: slice.region, slice: slice }, (0, util_1.assembleLocString)(slice.region.regions[0]))) : ((0, jsx_runtime_1.jsx)(RegionRulerArc, { region: slice.region, model: model, slice: slice }, (0, util_1.assembleLocString)(slice.region)));
 });
 exports.default = Ruler;

package/dist/CircularView/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function CircularViewF(pluginManager: PluginManager): void;

package/dist/CircularView/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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CircularViewF;
 const react_1 = require("react");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
-const model_1 = __importDefault(require("./models/model"));
+const model_1 = __importDefault(require("./model"));
 function CircularViewF(pluginManager) {
     pluginManager.addViewType(() => new ViewType_1.default({
         ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/CircularView')))),