@jbrowse/plugin-circular-view 2.18.0 → 3.0.1

package/esm/CircularView/components/ImportForm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { Button, Container, Grid } from '@mui/material';
@@ -21,20 +22,12 @@ const ImportForm = observer(function ({ model }) {
         : 'No configured assemblies';
     const regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
     const err = assemblyError || error;
-    return (React.createElement(Container, { className: classes.importFormContainer },
-        err ? (React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-            React.createElement(Grid, { item: true },
-                React.createElement(ErrorMessage, { error: err })))) : null,
-        React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-            React.createElement(Grid, { item: true },
-                React.createElement(AssemblySelector, { onChange: val => {
-                        model.setError(undefined);
-                        setSelectedAsm(val);
-                    }, session: session, selected: selectedAsm })),
-            React.createElement(Grid, { item: true },
-                React.createElement(Button, { disabled: !regions.length, onClick: () => {
-                        model.setError(undefined);
-                        model.setDisplayedRegions(regions);
-                    }, variant: "contained", color: "primary" }, regions.length || err ? 'Open' : 'Loading...')))));
+    return (_jsxs(Container, { className: classes.importFormContainer, children: [err ? (_jsx(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: _jsx(Grid, { item: true, children: _jsx(ErrorMessage, { error: err }) }) })) : null, _jsxs(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [_jsx(Grid, { item: true, children: _jsx(AssemblySelector, { onChange: val => {
+                                model.setError(undefined);
+                                setSelectedAsm(val);
+                            }, session: session, selected: selectedAsm }) }), _jsx(Grid, { item: true, children: _jsx(Button, { disabled: !regions.length, onClick: () => {
+                                model.setError(undefined);
+                                model.setDisplayedRegions(regions);
+                            }, variant: "contained", color: "primary", children: regions.length || err ? 'Open' : 'Loading...' }) })] })] }));
 });
 export default ImportForm;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 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/esm/CircularView/components/Ruler.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { assembleLocString, getFillProps, getSession, getStrokeProps, polarToCartesian, radToDeg, } from '@jbrowse/core/util';
 import { makeContrasting } from '@jbrowse/core/util/color';
 import { useTheme } from '@mui/material/styles';
@@ -44,19 +44,17 @@ const ElisionRulerArc = observer(function ({ model, slice, region, }) {
     const largeArc = endRadians - startRadians > Math.PI ? '1' : '0';
     const centerRadians = (endRadians + startRadians) / 2;
     const regionCount = `[${Number(region.regions.length).toLocaleString()}]`;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RulerLabel, { text: regionCount, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, title: `${regionCount} more regions`, color: theme.palette.text.primary }),
-        React.createElement("path", { d: [
-                'M',
-                ...startXY,
-                'A',
-                radiusPx,
-                radiusPx,
-                '0',
-                largeArc,
-                '1',
-                ...endXY,
-            ].join(' '), ...getStrokeProps(theme.palette.text.secondary), strokeWidth: 2, strokeDasharray: "2,2", fill: "none" })));
+    return (_jsxs(_Fragment, { children: [_jsx(RulerLabel, { text: regionCount, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, title: `${regionCount} more regions`, color: theme.palette.text.primary }), _jsx("path", { d: [
+                    'M',
+                    ...startXY,
+                    'A',
+                    radiusPx,
+                    radiusPx,
+                    '0',
+                    largeArc,
+                    '1',
+                    ...endXY,
+                ].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();
@@ -65,20 +63,14 @@ const RulerLabel = observer(function ({ view, text, maxWidthPx, radians, radiusP
         return null;
     }
     if (text.length * 6.5 < maxWidthPx) {
-        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)));
+        return (_jsxs("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "middle", dominantBaseline: "baseline", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 90})`, ...getFillProps(color), children: [text, _jsx("title", { children: title || text })] }));
     }
     if (maxWidthPx > 4) {
         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)})`, fill: color },
-                text,
-                React.createElement("title", null, title || text)));
+            return (_jsxs("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "start", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians)})`, fill: color, children: [text, _jsx("title", { children: title || text })] }));
         }
-        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)));
+        return (_jsxs("text", { x: 0, y: 0, className: classes.rulerLabel, textAnchor: "end", dominantBaseline: "middle", transform: `translate(${textXY}) rotate(${radToDeg(radians) + 180})`, fill: color, children: [text, _jsx("title", { children: title || text })] }));
     }
     return null;
 });
@@ -102,11 +94,9 @@ const RegionRulerArc = observer(function ({ model, slice, region, }) {
     else {
         color = theme.palette.text.primary;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }),
-        React.createElement("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })));
+    return (_jsxs(_Fragment, { children: [_jsx(RulerLabel, { text: region.refName, view: model, maxWidthPx: widthPx, radians: centerRadians, radiusPx: radiusPx, color: color }), _jsx("path", { d: sliceArcPath(slice, radiusPx + 1, region.start, region.end), stroke: color, strokeWidth: 2, fill: "none" })] }));
 });
 const Ruler = observer(function ({ model, 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 }));
+    return slice.region.elided ? (_jsx(ElisionRulerArc, { model: model, region: slice.region, slice: slice }, assembleLocString(slice.region.regions[0]))) : (_jsx(RegionRulerArc, { region: slice.region, model: model, slice: slice }, assembleLocString(slice.region)));
 });
 export default Ruler;

package/esm/CircularView/svgcomponents/SVGBackground.d.ts

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

package/esm/CircularView/svgcomponents/SVGBackground.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
+    return (_jsx("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

package/esm/CircularView/svgcomponents/SVGCircularView.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getSession, radToDeg, renderToStaticMarkup } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { when } from 'mobx';
-import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import Ruler from '../components/Ruler';
 export async function renderToSvg(model, opts) {
@@ -12,7 +12,6 @@ export async function renderToSvg(model, 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];
-    const { createRootFn } = getRoot(model);
     const { width, tracks, height } = model;
     const shift = 50;
     const displayResults = await Promise.all(tracks.map(async (track) => {
@@ -22,11 +21,5 @@ export async function renderToSvg(model, opts) {
     }));
     const { staticSlices, offsetRadians, centerXY } = model;
     const deg = radToDeg(offsetRadians);
-    return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: createJBrowseTheme(theme) },
-        React.createElement(Wrapper, null,
-            React.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width + shift * 2, height].toString() },
-                React.createElement(SVGBackground, { width: width, height: height, shift: shift }),
-                React.createElement("g", { transform: `translate(${centerXY}) rotate(${deg})` },
-                    staticSlices.map((slice, i) => (React.createElement(Ruler, { key: i, model: model, slice: slice }))),
-                    displayResults.map(({ result }, i) => (React.createElement(React.Fragment, { key: i }, result))))))), createRootFn);
+    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width + shift * 2, height].toString(), children: [_jsx(SVGBackground, { width: width, height: height, shift: shift }), _jsxs("g", { transform: `translate(${centerXY}) rotate(${deg})`, children: [staticSlices.map((slice, i) => (_jsx(Ruler, { model: model, slice: slice }, i))), displayResults.map(({ result }, i) => (_jsx(Fragment, { children: result }, i)))] })] }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "2.18.0",
+  "version": "3.0.1",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -36,25 +36,25 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
+    "@jbrowse/core": "^3.0.1",
     "@mui/icons-material": "^6.0.0",
-    "@types/file-saver": "^2.0.0",
-    "file-saver": "^2.0.0"
-  },
-  "peerDependencies": {
-    "@jbrowse/core": "^2.0.0",
     "@mui/material": "^6.0.0",
+    "@types/file-saver": "^2.0.0",
+    "file-saver": "^2.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
     "tss-react": "^4.0.0"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
+  "gitHead": "aa2f1d1a89d2361c7fd1a93fe29506fa4554f5cc"
 }