@jbrowse/plugin-circular-view 2.10.3 → 2.11.1

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

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

package/dist/CircularView/components/CircularView.js

@@ -38,7 +38,7 @@ const CircularView = (0, mobx_react_1.observer)(({ model }) => {
         model.initialized;
     const showImportForm = !initialized && !model.disableImportForm;
     const showFigure = initialized && !showImportForm;
-    return (react_1.default.createElement(react_1.default.Fragment, null, 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 ? (react_1.default.createElement(ImportForm_1.default, { model: model })) : showFigure ? (react_1.default.createElement(CircularViewLoaded, { model: model })) : null;
 });
 const CircularViewLoaded = (0, mobx_react_1.observer)(function ({ model, }) {
     const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;

package/dist/CircularView/components/ExportSvgDialog.js

@@ -32,6 +32,10 @@ function LoadingMessage() {
         react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
         react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
 }
+function TextField2({ children, ...rest }) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+}
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)('svg-' + key, val);
 }
@@ -46,9 +50,8 @@ function ExportSvgDialog({ model, handleClose, }) {
     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(material_1.TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            react_1.default.createElement("br", null),
-            session.allThemes ? (react_1.default.createElement(material_1.TextField, { 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 }, 
+            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"))),
@@ -68,6 +71,8 @@ function ExportSvgDialog({ model, handleClose, }) {
                     catch (e) {
                         console.error(e);
                         setError(e);
+                    }
+                    finally {
                         setLoading(false);
                     }
                 } }, "Submit"))));

package/dist/CircularView/components/Ruler.js

@@ -63,7 +63,7 @@ const ElisionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, reg
                 largeArc,
                 '1',
                 ...endXY,
-            ].join(' '), stroke: theme.palette.text.secondary, strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })));
+            ].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();
@@ -73,7 +73,7 @@ const RulerLabel = (0, mobx_react_1.observer)(function ({ view, text, maxWidthPx
     }
     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})`, style: { fill: color } },
+        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)));
     }
@@ -81,11 +81,11 @@ const RulerLabel = (0, mobx_react_1.observer)(function ({ view, text, maxWidthPx
         // 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)})`, style: { fill: color } },
+            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 (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})`, style: { fill: color } },
+        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)));
     }
@@ -121,9 +121,6 @@ const RegionRulerArc = (0, mobx_react_1.observer)(function ({ model, slice, regi
         react_1.default.createElement("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, }) {
-    if (slice.region.elided) {
-        return (react_1.default.createElement(ElisionRulerArc, { key: (0, util_1.assembleLocString)(slice.region.regions[0]), model: model, region: slice.region, slice: slice }));
-    }
-    return (react_1.default.createElement(RegionRulerArc, { key: (0, util_1.assembleLocString)(slice.region), region: slice.region, model: model, slice: 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 }));
 });
 exports.default = Ruler;

package/dist/CircularView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function CircularViewF(pluginManager: PluginManager): void;

package/dist/CircularView/index.js

@@ -29,11 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
 const model_1 = __importDefault(require("./models/model"));
-exports.default = (pluginManager) => {
+function CircularViewF(pluginManager) {
     pluginManager.addViewType(() => new ViewType_1.default({
         ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/CircularView')))),
         stateModel: (0, model_1.default)(pluginManager),
         name: 'CircularView',
         displayName: 'Circular view',
     }));
-};
+}
+exports.default = CircularViewF;

package/dist/CircularView/svgcomponents/SVGCircularView.js

@@ -15,7 +15,7 @@ const Ruler_1 = __importDefault(require("../components/Ruler"));
 async function renderToSvg(model, opts) {
     var _a;
     await (0, mobx_1.when)(() => model.initialized);
-    const { themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children) } = opts;
+    const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/LaunchCircularView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LaunchCircularViewF(pluginManager: PluginManager): void;

package/dist/LaunchCircularView/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_1 = require("mobx");
-exports.default = (pluginManager) => {
+function LaunchCircularViewF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-CircularView', 
     // @ts-expect-error
     async ({ session, assembly, tracks = [], }) => {
@@ -18,4 +18,5 @@ exports.default = (pluginManager) => {
         view.setDisplayedRegions(asm.regions || []);
         tracks.forEach(track => view.showTrack(track));
     });
-};
+}
+exports.default = LaunchCircularViewF;

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

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

package/esm/CircularView/components/CircularView.js

@@ -33,7 +33,7 @@ const CircularView = observer(({ model }) => {
         model.initialized;
     const showImportForm = !initialized && !model.disableImportForm;
     const showFigure = initialized && !showImportForm;
-    return (React.createElement(React.Fragment, null, showImportForm || model.error ? (React.createElement(ImportForm, { model: model })) : showFigure ? (React.createElement(CircularViewLoaded, { model: model })) : null));
+    return showImportForm || model.error ? (React.createElement(ImportForm, { model: model })) : showFigure ? (React.createElement(CircularViewLoaded, { model: model })) : null;
 });
 const CircularViewLoaded = observer(function ({ model, }) {
     const { width, height, id, offsetRadians, centerXY, figureWidth, figureHeight, hideVerticalResizeHandle, } = model;

package/esm/CircularView/components/ExportSvgDialog.js

@@ -7,6 +7,10 @@ function LoadingMessage() {
         React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
         React.createElement(Typography, { display: "inline" }, "Creating SVG")));
 }
+function TextField2({ children, ...rest }) {
+    return (React.createElement("div", null,
+        React.createElement(TextField, { ...rest }, children)));
+}
 function useSvgLocal(key, val) {
     return useLocalStorage('svg-' + key, val);
 }
@@ -21,9 +25,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     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(TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            React.createElement("br", null),
-            session.allThemes ? (React.createElement(TextField, { 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 }, 
+            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"))),
@@ -43,6 +46,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                     catch (e) {
                         console.error(e);
                         setError(e);
+                    }
+                    finally {
                         setLoading(false);
                     }
                 } }, "Submit"))));

package/esm/CircularView/components/Ruler.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { getSession, polarToCartesian, radToDeg, assembleLocString, } from '@jbrowse/core/util';
+import { getSession, polarToCartesian, radToDeg, assembleLocString, getStrokeProps, getFillProps, } from '@jbrowse/core/util';
 import { makeContrasting } from '@jbrowse/core/util/color';
 import { useTheme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
@@ -58,7 +58,7 @@ const ElisionRulerArc = observer(function ({ model, slice, region, }) {
                 largeArc,
                 '1',
                 ...endXY,
-            ].join(' '), stroke: theme.palette.text.secondary, strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })));
+            ].join(' '), ...getStrokeProps(theme.palette.text.secondary), strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })));
 });
 const RulerLabel = observer(function ({ view, text, maxWidthPx, radians, radiusPx, title, color, }) {
     const { classes } = useStyles();
@@ -68,7 +68,7 @@ const RulerLabel = observer(function ({ view, text, maxWidthPx, radians, radiusP
     }
     if (text.length * 6.5 < maxWidthPx) {
         // text is rotated parallel to the ruler arc
-        return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "middle", dominantBaseline: "baseline", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 90})`, style: { fill: color } },
+        return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "middle", dominantBaseline: "baseline", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 90})`, ...getFillProps(color) },
             text,
             React.createElement("title", null, title || text)));
     }
@@ -76,11 +76,11 @@ const RulerLabel = observer(function ({ view, text, maxWidthPx, radians, radiusP
         // text is rotated perpendicular to the ruler arc
         const overallRotation = radToDeg(radians + view.offsetRadians - Math.PI / 2);
         if (overallRotation >= 180) {
-            return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "start", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians)})`, style: { fill: color } },
+            return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "start", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians)})`, fill: color },
                 text,
                 React.createElement("title", null, title || text)));
         }
-        return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "end", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 180})`, style: { fill: color } },
+        return (React.createElement("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "end", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 180})`, fill: color },
             text,
             React.createElement("title", null, title || text)));
     }
@@ -116,9 +116,6 @@ const RegionRulerArc = observer(function ({ model, slice, region, }) {
         React.createElement("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })));
 });
 const Ruler = observer(function ({ model, slice, }) {
-    if (slice.region.elided) {
-        return (React.createElement(ElisionRulerArc, { key: assembleLocString(slice.region.regions[0]), model: model, region: slice.region, slice: slice }));
-    }
-    return (React.createElement(RegionRulerArc, { key: assembleLocString(slice.region), region: slice.region, model: model, slice: slice }));
+    return slice.region.elided ? (React.createElement(ElisionRulerArc, { key: assembleLocString(slice.region.regions[0]), model: model, region: slice.region, slice: slice })) : (React.createElement(RegionRulerArc, { key: assembleLocString(slice.region), region: slice.region, model: model, slice: slice }));
 });
 export default Ruler;

package/esm/CircularView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function CircularViewF(pluginManager: PluginManager): void;

package/esm/CircularView/index.js

@@ -1,11 +1,11 @@
 import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import stateModelFactory from './models/model';
-export default (pluginManager) => {
+export default function CircularViewF(pluginManager) {
     pluginManager.addViewType(() => new ViewType({
         ReactComponent: lazy(() => import('./components/CircularView')),
         stateModel: stateModelFactory(pluginManager),
         name: 'CircularView',
         displayName: 'Circular view',
     }));
-};
+}

package/esm/CircularView/svgcomponents/SVGCircularView.js

@@ -9,7 +9,7 @@ import Ruler from '../components/Ruler';
 export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
-    const { themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children) } = opts;
+    const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
     const session = getSession(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/esm/LaunchCircularView/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LaunchCircularViewF(pluginManager: PluginManager): void;

package/esm/LaunchCircularView/index.js

@@ -1,5 +1,5 @@
 import { when } from 'mobx';
-export default (pluginManager) => {
+export default function LaunchCircularViewF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-CircularView', 
     // @ts-expect-error
     async ({ session, assembly, tracks = [], }) => {
@@ -16,4 +16,4 @@ export default (pluginManager) => {
         view.setDisplayedRegions(asm.regions || []);
         tracks.forEach(track => view.showTrack(track));
     });
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
+  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
 }