@jbrowse/plugin-circular-view 2.17.0 → 3.0.0

package/esm/BaseChordDisplay/{models/model.js → model.js}

@@ -1,39 +1,19 @@
-import React from 'react';
-import clone from 'clone';
-import { getParent, isAlive, types } from 'mobx-state-tree';
-// jbrowse
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType';
-import { getContainingView, getSession, getEnv, isFeature, makeAbortableReaction, ReactRendering, } from '@jbrowse/core/util';
+import { ReactRendering, getContainingView, getEnv, getSession, isFeature, makeAbortableReaction, } from '@jbrowse/core/util';
 import { getParentRenderProps, getRpcSessionId, getTrackAssemblyNames, } from '@jbrowse/core/util/tracks';
-// locals
-import { renderReactionData, renderReactionEffect } from './renderReaction';
+import { getParent, isAlive, types } from 'mobx-state-tree';
 import { baseChordDisplayConfig } from './configSchema';
-/**
- * #stateModel BaseChordDisplay
- * extends
- * - [BaseDisplay](../basedisplay)
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { renderReactionData, renderReactionEffect } from './renderReaction';
+function x() { }
 export const BaseChordDisplayModel = types
     .compose('BaseChordDisplay', BaseDisplay, types.model({
-    /**
-     * #property
-     */
     bezierRadiusRatio: 0.1,
-    /**
-     * #property
-     */
     assemblyName: types.maybe(types.string),
-    /**
-     * #property
-     */
     configuration: ConfigurationReference(baseChordDisplayConfig),
 }))
     .volatile(() => ({
-    // NOTE: all this volatile stuff has to be filled in at once
-    // so that it stays consistent
     filled: false,
     reactElement: undefined,
     data: undefined,
@@ -46,42 +26,32 @@ export const BaseChordDisplayModel = types
     const { pluginManager } = getEnv(self);
     const track = self;
     return {
-        /**
-         * #action
-         */
         onChordClick(feature) {
             getConf(self, 'onChordClick', { feature, track, pluginManager });
         },
     };
 })
     .views(self => ({
-    /**
-     * #getter
-     */
     get blockDefinitions() {
         const view = getContainingView(self);
         const origSlices = view.staticSlices;
         if (!self.refNameMap) {
             return origSlices;
         }
-        const slices = clone(origSlices);
-        slices.forEach(slice => {
+        const slices = structuredClone(origSlices);
+        for (const slice of slices) {
             const regions = slice.region.elided
                 ? slice.region.regions
                 : [slice.region];
-            regions.forEach(region => {
-                var _a;
-                const renamed = (_a = self.refNameMap) === null || _a === void 0 ? void 0 : _a[region.refName];
+            for (const region of regions) {
+                const renamed = self.refNameMap[region.refName];
                 if (renamed && region.refName !== renamed) {
                     region.refName = renamed;
                 }
-            });
-        });
+            }
+        }
         return slices;
     },
-    /**
-     * #method
-     */
     renderProps() {
         const view = getContainingView(self);
         return {
@@ -93,41 +63,18 @@ export const BaseChordDisplayModel = types
             onChordClick: self.onChordClick,
         };
     },
-    /**
-     * #getter
-     * the pluggable element type object for this display's renderer
-     */
     get rendererType() {
         return getEnv(self).pluginManager.getRendererType(self.rendererTypeName);
     },
-    /**
-     * #method
-     */
-    isCompatibleWithRenderer(renderer) {
-        return !!(renderer instanceof CircularChordRendererType);
-    },
-    /**
-     * #getter
-     * returns a string feature ID if the globally-selected object
-     * is probably a feature
-     */
     get selectedFeatureId() {
         if (!isAlive(self)) {
             return undefined;
         }
-        const session = getSession(self);
-        const { selection } = session;
-        // does it quack like a feature?
-        if (isFeature(selection)) {
-            return selection.id();
-        }
-        return undefined;
+        const { selection } = getSession(self);
+        return isFeature(selection) ? selection.id() : undefined;
     },
 }))
     .actions(self => ({
-    /**
-     * #action
-     */
     renderStarted() {
         self.filled = false;
         self.message = '';
@@ -137,9 +84,6 @@ export const BaseChordDisplayModel = types
         self.error = undefined;
         self.renderingComponent = undefined;
     },
-    /**
-     * #action
-     */
     renderSuccess({ message, data, reactElement, html, renderingComponent, }) {
         if (message) {
             self.filled = false;
@@ -160,12 +104,8 @@ export const BaseChordDisplayModel = types
             self.renderingComponent = renderingComponent;
         }
     },
-    /**
-     * #action
-     */
     renderError(error) {
         console.error(error);
-        // the rendering failed for some reason
         self.filled = false;
         self.message = '';
         self.reactElement = undefined;
@@ -174,33 +114,36 @@ export const BaseChordDisplayModel = types
         self.error = error;
         self.renderingComponent = undefined;
     },
-    /**
-     * #action
-     */
     setRefNameMap(refNameMap) {
         self.refNameMap = refNameMap;
     },
 }))
     .actions(self => ({
     afterAttach() {
-        makeAbortableReaction(self, renderReactionData, 
-        // @ts-expect-error
-        renderReactionEffect, {
+        makeAbortableReaction(self, renderReactionData, renderReactionEffect, {
             name: `${self.type} ${self.id} rendering`,
-            // delay: self.renderDelay || 300,
             fireImmediately: true,
         }, self.renderStarted, self.renderSuccess, self.renderError);
-        makeAbortableReaction(self, () => ({
-            assemblyNames: getTrackAssemblyNames(self.parentTrack),
-            adapter: getConf(getParent(self, 2), 'adapter'),
-            assemblyManager: getSession(self).assemblyManager,
-        }), async ({ assemblyNames, adapter, assemblyManager }, signal) => {
-            return assemblyManager.getRefNameMapForAdapter(adapter, assemblyNames[0], { signal, sessionId: getRpcSessionId(self) });
+        makeAbortableReaction(self, () => {
+            return {
+                assemblyNames: getTrackAssemblyNames(self.parentTrack),
+                adapter: getConf(getParent(self, 2), 'adapter'),
+                assemblyManager: getSession(self).assemblyManager,
+            };
+        }, async (args, stopToken) => {
+            return args
+                ? args.assemblyManager.getRefNameMapForAdapter(args.adapter, args.assemblyNames[0], {
+                    stopToken,
+                    sessionId: getRpcSessionId(self),
+                })
+                : undefined;
         }, {
             name: `${self.type} ${self.id} getting refNames`,
             fireImmediately: true,
         }, () => { }, refNameMap => {
-            self.setRefNameMap(refNameMap);
+            if (refNameMap) {
+                self.setRefNameMap(refNameMap);
+            }
         }, error => {
             console.error(error);
             self.setError(error);
@@ -208,16 +151,13 @@ export const BaseChordDisplayModel = types
     },
 }))
     .views(self => ({
-    /**
-     * #method
-     */
     async renderSvg(opts) {
         const data = renderReactionData(self);
         const rendering = await renderReactionEffect({
             ...data,
             exportSVG: opts,
             theme: opts.theme || data.renderProps.theme,
-        }, undefined, self);
-        return React.createElement(ReactRendering, { rendering: rendering });
+        });
+        return _jsx(ReactRendering, { rendering: rendering });
     },
 }));

package/esm/BaseChordDisplay/renderReaction.d.ts

@@ -0,0 +1,27 @@
+export declare function renderReactionData(self: any): {
+    rendererType: any;
+    rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
+    renderProps: any;
+    renderArgs: {
+        assemblyName: string;
+        adapterConfig: any;
+        rendererType: any;
+        regions: import("@jbrowse/core/util").Region[] & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>>;
+        blockDefinitions: any;
+        sessionId: string;
+        timeout: number;
+    };
+};
+export declare function renderReactionEffect(props?: any, stopToken?: string): Promise<{
+    message: any;
+    html?: undefined;
+    data?: undefined;
+    reactElement?: undefined;
+    renderingComponent?: undefined;
+} | {
+    html: any;
+    data: any;
+    reactElement: any;
+    renderingComponent: any;
+    message?: undefined;
+}>;

package/esm/BaseChordDisplay/{models/renderReaction.js → renderReaction.js}

@@ -1,6 +1,5 @@
-import clone from 'clone';
+import { getContainingView, getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { getSession, getContainingView } from '@jbrowse/core/util';
 export function renderReactionData(self) {
     const view = getContainingView(self);
     const { rendererType } = self;
@@ -11,16 +10,16 @@ export function renderReactionData(self) {
         renderProps: self.renderProps(),
         renderArgs: {
             assemblyName: view.displayedRegions[0].assemblyName,
-            adapterConfig: clone(self.adapterConfig),
+            adapterConfig: structuredClone(self.adapterConfig),
             rendererType: rendererType.name,
-            regions: clone(view.displayedRegions),
+            regions: structuredClone(view.displayedRegions),
             blockDefinitions: self.blockDefinitions,
             sessionId: getRpcSessionId(self),
             timeout: 1000000,
         },
     };
 }
-export async function renderReactionEffect(props, signal, self) {
+export async function renderReactionEffect(props, stopToken) {
     var _a;
     if (!props) {
         throw new Error('cannot render with no props');
@@ -29,18 +28,14 @@ export async function renderReactionEffect(props, signal, self) {
     if (cannotBeRenderedReason) {
         return { message: cannotBeRenderedReason };
     }
-    // don't try to render 0 or NaN radius or no regions
     if (!renderProps.radius || !((_a = renderArgs.regions) === null || _a === void 0 ? void 0 : _a.length)) {
         return { message: 'Skipping render' };
     }
-    // check renderertype compatibility
-    if (!self.isCompatibleWithRenderer(rendererType)) {
-        throw new Error(`renderer ${rendererType.name} is not compatible with this display type`);
-    }
     const { html, ...data } = await rendererType.renderInClient(rpcManager, {
         ...renderArgs,
         ...renderProps,
         exportSVG,
+        stopToken,
     });
     return {
         html,

package/esm/CircularView/components/CircularView.d.ts

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

package/esm/CircularView/components/CircularView.js

@@ -1,12 +1,11 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResizeHandle } from '@jbrowse/core/ui';
 import { assembleLocString } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// locals
-import Ruler from './Ruler';
 import Controls from './Controls';
 import ImportForm from './ImportForm';
+import Ruler from './Ruler';
 const dragHandleHeight = 3;
 const useStyles = makeStyles()(theme => ({
     root: {
@@ -19,12 +18,10 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const Slices = observer(({ model }) => {
-    return (React.createElement(React.Fragment, null,
-        model.staticSlices.map(slice => (React.createElement(Ruler, { key: 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.createElement(display.RenderingComponent, { key: display.id, display: display, view: model }));
-        })));
+    return (_jsxs(_Fragment, { children: [model.staticSlices.map(slice => (_jsx(Ruler, { model: model, slice: slice }, assembleLocString(slice.region.elided ? slice.region.regions[0] : slice.region)))), model.tracks.map(track => {
+                const display = track.displays[0];
+                return (_jsx(display.RenderingComponent, { display: display, view: model }, display.id));
+            })] }));
 });
 const CircularView = observer(({ model }) => {
     const initialized = !!model.displayedRegions.length &&
@@ -33,32 +30,26 @@ const CircularView = observer(({ model }) => {
         model.initialized;
     const showImportForm = !initialized && !model.disableImportForm;
     const showFigure = initialized && !showImportForm;
-    return showImportForm || model.error ? (React.createElement(ImportForm, { model: model })) : showFigure ? (React.createElement(CircularViewLoaded, { model: model })) : null;
+    return showImportForm || model.error ? (_jsx(ImportForm, { model: model })) : showFigure ? (_jsx(CircularViewLoaded, { model: model })) : null;
 });
 const CircularViewLoaded = observer(function ({ model, }) {
     const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.root, style: { width, height }, "data-testid": id },
-        React.createElement("div", { className: classes.scroller, style: { width, height } },
-            React.createElement("svg", { style: {
-                    transform: `rotate(${offsetRadians}rad)`,
-                    transition: 'transform 0.5s',
-                    transformOrigin: centerXY.map(x => `${x}px`).join(' '),
+    return (_jsxs("div", { className: classes.root, style: { width, height }, "data-testid": id, children: [_jsx("div", { className: classes.scroller, style: { width, height }, children: _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: _jsx("g", { transform: `translate(${centerXY})`, children: _jsx(Slices, { model: model }) }) }) }), _jsx(Controls, { model: model }), hideVerticalResizeHandle ? null : (_jsx(ResizeHandle, { onDrag: model.resizeHeight, style: {
+                    height: dragHandleHeight,
                     position: 'absolute',
+                    bottom: 0,
                     left: 0,
-                    top: 0,
-                }, width: figureWidth, height: figureHeight },
-                React.createElement("g", { transform: `translate(${centerXY})` },
-                    React.createElement(Slices, { model: model })))),
-        React.createElement(Controls, { model: model }),
-        hideVerticalResizeHandle ? null : (React.createElement(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',
+                } }))] }));
 });
 export default CircularView;

package/esm/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/esm/CircularView/components/Controls.js

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { IconButton } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import JBrowseMenu from '@jbrowse/core/ui/Menu';
-// icons
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
+import { getSession } from '@jbrowse/core/util';
 import LockIcon from '@mui/icons-material/Lock';
-import PhotoCamera from '@mui/icons-material/PhotoCamera';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
 import MoreVert from '@mui/icons-material/MoreVert';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import { getSession } from '@jbrowse/core/util';
+import PhotoCamera from '@mui/icons-material/PhotoCamera';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 import ExportSvgDialog from './ExportSvgDialog';
 const useStyles = makeStyles()(theme => ({
     controls: {
@@ -27,40 +27,26 @@ const useStyles = makeStyles()(theme => ({
 const Controls = observer(function ({ model }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = useState(null);
-    return (React.createElement("div", { className: classes.controls },
-        React.createElement(IconButton, { onClick: model.zoomOutButton, title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out', disabled: model.atMaxBpPerPx || model.lockedFitToWindow },
-            React.createElement(ZoomOutIcon, null)),
-        React.createElement(IconButton, { onClick: model.zoomInButton, disabled: model.atMinBpPerPx, title: "zoom in" },
-            React.createElement(ZoomInIcon, null)),
-        React.createElement(IconButton, { onClick: model.rotateCounterClockwiseButton, title: "rotate counter-clockwise" },
-            React.createElement(RotateLeftIcon, null)),
-        React.createElement(IconButton, { onClick: model.rotateClockwiseButton, title: "rotate clockwise" },
-            React.createElement(RotateRightIcon, null)),
-        React.createElement(IconButton, { onClick: model.toggleFitToWindowLock, title: model.lockedFitToWindow
-                ? 'locked model to window size'
-                : 'unlocked model to zoom further', disabled: model.tooSmallToLock }, model.lockedFitToWindow ? React.createElement(LockIcon, null) : React.createElement(LockOpenIcon, null)),
-        React.createElement(IconButton, { onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } },
-            React.createElement(MoreVert, null)),
-        model.hideTrackSelectorButton ? null : (React.createElement(IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select" },
-            React.createElement(TrackSelectorIcon, null))),
-        anchorEl ? (React.createElement(JBrowseMenu, { anchorEl: anchorEl, menuItems: [
-                {
-                    label: 'Export SVG',
-                    icon: PhotoCamera,
-                    onClick: () => {
-                        getSession(model).queueDialog(handleClose => [
-                            ExportSvgDialog,
-                            { model, handleClose },
-                        ]);
+    return (_jsxs("div", { className: classes.controls, children: [_jsx(IconButton, { onClick: model.zoomOutButton, title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out', disabled: model.atMaxBpPerPx || model.lockedFitToWindow, children: _jsx(ZoomOutIcon, {}) }), _jsx(IconButton, { onClick: model.zoomInButton, disabled: model.atMinBpPerPx, title: "zoom in", children: _jsx(ZoomInIcon, {}) }), _jsx(IconButton, { onClick: model.rotateCounterClockwiseButton, title: "rotate counter-clockwise", children: _jsx(RotateLeftIcon, {}) }), _jsx(IconButton, { onClick: model.rotateClockwiseButton, title: "rotate clockwise", children: _jsx(RotateRightIcon, {}) }), _jsx(IconButton, { onClick: model.toggleFitToWindowLock, title: model.lockedFitToWindow
+                    ? 'locked model to window size'
+                    : 'unlocked model to zoom further', disabled: model.tooSmallToLock, children: model.lockedFitToWindow ? _jsx(LockIcon, {}) : _jsx(LockOpenIcon, {}) }), _jsx(IconButton, { onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: _jsx(MoreVert, {}) }), model.hideTrackSelectorButton ? null : (_jsx(IconButton, { onClick: model.activateTrackSelector, title: "Open track selector", "data-testid": "circular_track_select", children: _jsx(TrackSelectorIcon, {}) })), anchorEl ? (_jsx(JBrowseMenu, { anchorEl: anchorEl, menuItems: [
+                    {
+                        label: 'Export SVG',
+                        icon: PhotoCamera,
+                        onClick: () => {
+                            getSession(model).queueDialog(handleClose => [
+                                ExportSvgDialog,
+                                { 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] }));
 });
 export default Controls;

package/esm/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/esm/CircularView/components/ExportSvgDialog.js

@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
+import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 function LoadingMessage() {
-    return (React.createElement("div", null,
-        React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        React.createElement(Typography, { display: "inline" }, "Creating SVG")));
+    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsx(Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (React.createElement("div", null,
-        React.createElement(TextField, { ...rest }, children)));
+    return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return useLocalStorage(`svg-${key}`, val);
@@ -22,41 +20,31 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const [error, setError] = useState();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        React.createElement(DialogContent, null,
-            error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            React.createElement(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 (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, {})) : null, _jsx(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), _jsx(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/esm/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;