@jbrowse/plugin-arc 2.18.0 → 3.0.1

package/dist/ArcRenderer/ArcRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature, Region } from '@jbrowse/core/util';
 declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
@@ -12,5 +11,5 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
     };
     onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
     exportSVG: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ArcRendering;

package/dist/ArcRenderer/ArcRendering.js

@@ -15,15 +15,26 @@ 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;
+    };
+})();
 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 configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
@@ -39,22 +50,17 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight
     const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
     const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
     const height = Math.min((0, configuration_1.readConfObject)(config, 'height', { feature }) || 100, displayHeight);
-    const ref = react_1.default.createRef();
+    const ref = (0, react_1.useRef)(null);
     const t = 0.5;
     const t1 = 1 - t;
     const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
-    return (react_1.default.createElement("g", null,
-        react_1.default.createElement("path", { ref: ref, ...(0, util_1.getStrokeProps)(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
-                onFeatureClick(e, featureId);
-            }, onMouseOver: () => {
-                setIsMouseOvered(true);
-            }, onMouseLeave: () => {
-                setIsMouseOvered(false);
-            }, pointerEvents: "stroke" }),
-        isMouseOvered ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-            react_1.default.createElement(ArcTooltip, { contents: caption }))) : null,
-        react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
-        react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { ref: ref, ...(0, util_1.getStrokeProps)(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
+                    onFeatureClick(e, featureId);
+                }, onMouseOver: () => {
+                    setIsMouseOvered(true);
+                }, onMouseLeave: () => {
+                    setIsMouseOvered(false);
+                }, pointerEvents: "stroke" }), isMouseOvered ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ArcTooltip, { contents: caption }) })) : null, (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
 }
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
@@ -91,28 +97,24 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const label = (0, configuration_1.readConfObject)(config, 'label', { feature });
     const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
     const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 2;
-    const ref = react_1.default.createRef();
+    const ref = (0, react_1.useRef)(null);
     const textYCoord = (right - left) / 2;
-    return (react_1.default.createElement("g", null,
-        react_1.default.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...(0, util_1.getStrokeProps)(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
-                onFeatureClick(e, featureId);
-            }, onMouseOver: () => {
-                setIsMouseOvered(true);
-            }, onMouseLeave: () => {
-                setIsMouseOvered(false);
-            }, ref: ref, pointerEvents: "stroke" }),
-        isMouseOvered ? react_1.default.createElement(ArcTooltip, { contents: caption }) : null,
-        react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
-        react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...(0, util_1.getStrokeProps)(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
+                    onFeatureClick(e, featureId);
+                }, onMouseOver: () => {
+                    setIsMouseOvered(true);
+                }, onMouseLeave: () => {
+                    setIsMouseOvered(false);
+                }, ref: ref, pointerEvents: "stroke" }), isMouseOvered ? (0, jsx_runtime_1.jsx)(ArcTooltip, { contents: caption }) : null, (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), (0, jsx_runtime_1.jsx)("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
 }
 const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
     const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
     const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
     const { selectedFeatureId } = displayModel || {};
-    return (react_1.default.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (react_1.default.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (react_1.default.createElement(Arc, { key: f.id(), height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { exportSVG: exportSVG, width: width, height: height, children: [...features.values()].map(f => semicircles ? ((0, jsx_runtime_1.jsx)(SemiCircles, { config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id())) : ((0, jsx_runtime_1.jsx)(Arc, { height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id()))) }));
 });
 function Wrapper({ exportSVG, width, height, children, }) {
-    return exportSVG ? (children) : (react_1.default.createElement("svg", { width: width, height: height }, children));
+    return exportSVG ? (children) : ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, children: children }));
 }
 exports.default = ArcRendering;

package/dist/ArcTooltip.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const ArcTooltip: ({ contents }: {
     contents?: string;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ArcTooltip;

package/dist/ArcTooltip.js

@@ -1,41 +1,17 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
 const mobx_react_1 = require("mobx-react");
-const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ message }, ref) {
-    return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
+const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2({ message }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, react_1.isValidElement)(message) ? (message) : message ? ((0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: String(message) })) : null }));
 });
 const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
-    return contents ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-        react_1.default.createElement(BaseTooltip_1.default, null,
-            react_1.default.createElement(TooltipContents, { message: contents })))) : null;
+    return contents ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(BaseTooltip_1.default, { children: (0, jsx_runtime_1.jsx)(TooltipContents, { message: contents }) }) })) : null;
 });
 exports.default = ArcTooltip;

package/dist/LinearArcDisplay/model.d.ts

@@ -34,7 +34,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -170,13 +170,13 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -203,7 +203,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     readonly blockType: string;
@@ -274,7 +274,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

package/dist/LinearPairedArcDisplay/components/Arcs.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const Arcs: ({ model, exportSVG, }: {
     model: LinearArcDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Arcs;

package/dist/LinearPairedArcDisplay/components/Arcs.js

@@ -15,15 +15,26 @@ 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;
+    };
+})();
 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 configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
@@ -52,30 +63,25 @@ const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly
         const right = p2;
         const col = mouseOvered ? 'black' : c;
         const sw = 3;
-        return absrad > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, fill: "none", pointerEvents: "stroke" }),
-            k1.mateDirection ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
-            k2.mateDirection ? (react_1.default.createElement("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
-            mouseOvered ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-                react_1.default.createElement(ArcTooltip, { contents: (0, util_2.makeSummary)(feature, alt) }))) : null)) : null;
+        return absrad > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, fill: "none", pointerEvents: "stroke" }), k1.mateDirection ? ((0, jsx_runtime_1.jsx)("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null, k2.mateDirection ? ((0, jsx_runtime_1.jsx)("line", { ...(0, util_1.getStrokeProps)(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null, mouseOvered ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ArcTooltip, { contents: (0, util_2.makeSummary)(feature, alt) }) })) : null] })) : null;
     }
     return null;
 });
@@ -83,7 +89,7 @@ const Wrapper = (0, mobx_react_1.observer)(function ({ model, exportSVG, childre
     const { height } = model;
     const view = (0, util_1.getContainingView)(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
-    return exportSVG ? (children) : (react_1.default.createElement("svg", { width: width, height: height }, children));
+    return exportSVG ? (children) : ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, children: children }));
 });
 const Arcs = (0, mobx_react_1.observer)(function ({ model, exportSVG, }) {
     const view = (0, util_1.getContainingView)(model);
@@ -91,10 +97,10 @@ const Arcs = (0, mobx_react_1.observer)(function ({ model, exportSVG, }) {
     const { assemblyManager } = session;
     const { features } = model;
     const assembly = assemblyManager.get(view.assemblyNames[0]);
-    return assembly ? (react_1.default.createElement(Wrapper, { model: model, exportSVG: exportSVG }, features === null || features === void 0 ? void 0 : features.map(f => {
-        var _a;
-        const alts = f.get('ALT');
-        return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (react_1.default.createElement(Arc, { key: `${f.id()}-${a}`, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (react_1.default.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
-    }))) : null;
+    return assembly ? ((0, jsx_runtime_1.jsx)(Wrapper, { model: model, exportSVG: exportSVG, children: features === null || features === void 0 ? void 0 : features.map(f => {
+            var _a;
+            const alts = f.get('ALT');
+            return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => ((0, jsx_runtime_1.jsx)(Arc, { session: session, feature: f, alt: a, view: view, model: model, assembly: assembly }, `${f.id()}-${a}`)))) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(Arc, { session: session, feature: f, view: view, model: model, assembly: assembly }, f.id())));
+        }) })) : null;
 });
 exports.default = Arcs;

package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const BaseDisplayComponent: ({ model, children, }: {
     model: LinearArcDisplayModel;
     children?: React.ReactNode;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default BaseDisplayComponent;

package/dist/LinearPairedArcDisplay/components/BaseDisplayComponent.js

@@ -15,18 +15,29 @@ 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 };
 };
 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 plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
@@ -51,31 +62,22 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 const BaseDisplayComponent = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
-    return error ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", action: react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.Tooltip, { title: "Reload" },
-                react_1.default.createElement(material_1.IconButton, { "data-testid": "reload_button", onClick: () => {
-                        model.reload();
-                    } },
-                    react_1.default.createElement(Refresh_1.default, null))),
-            react_1.default.createElement(material_1.Tooltip, { title: "Show stack trace" },
-                react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                        (0, util_1.getSession)(model).queueDialog(onClose => [
-                            ErrorMessageStackTraceDialog,
-                            { onClose, error: model.error },
-                        ]);
-                    } },
-                    react_1.default.createElement(Report_1.default, null)))) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (react_1.default.createElement(DataDisplay, { model: model }, children));
+    return error ? ((0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", action: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reload", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "reload_button", onClick: () => {
+                            model.reload();
+                        }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Show stack trace", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                ErrorMessageStackTraceDialog,
+                                { onClose, error: model.error },
+                            ]);
+                        }, children: (0, jsx_runtime_1.jsx)(Report_1.default, {}) }) })] }) })) : regionTooLarge ? (model.regionCannotBeRendered()) : ((0, jsx_runtime_1.jsx)(DataDisplay, { model: model, children: children }));
 });
 const DataDisplay = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { loading } = model;
-    return (react_1.default.createElement("div", null,
-        children,
-        loading ? react_1.default.createElement(LoadingBar, { model: model }) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [children, loading ? (0, jsx_runtime_1.jsx)(LoadingBar, { model: model }) : null] }));
 });
 const LoadingBar = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { message } = model;
-    return (react_1.default.createElement("div", { className: classes.loading },
-        react_1.default.createElement(ui_1.LoadingEllipses, { message: message })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: message }) }));
 });
 exports.default = BaseDisplayComponent;

package/dist/LinearPairedArcDisplay/components/ReactComponent.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const LinearArcReactComponent: ({ model, exportSVG, }: {
     model: LinearArcDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearArcReactComponent;

package/dist/LinearPairedArcDisplay/components/ReactComponent.js

@@ -3,12 +3,11 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const Arcs_1 = __importDefault(require("./Arcs"));
 const BaseDisplayComponent_1 = __importDefault(require("./BaseDisplayComponent"));
 const LinearArcReactComponent = (0, mobx_react_1.observer)(function ({ model, exportSVG, }) {
-    return (react_1.default.createElement(BaseDisplayComponent_1.default, { model: model },
-        react_1.default.createElement(Arcs_1.default, { model: model, exportSVG: exportSVG })));
+    return ((0, jsx_runtime_1.jsx)(BaseDisplayComponent_1.default, { model: model, children: (0, jsx_runtime_1.jsx)(Arcs_1.default, { model: model, exportSVG: exportSVG }) }));
 });
 exports.default = LinearArcReactComponent;

package/dist/LinearPairedArcDisplay/components/util.js

@@ -62,5 +62,5 @@ function makeSummary(feature, alt) {
         alt,
     ]
         .filter(f => !!f)
-        .join(' - ');
+        .join('<br/>');
 }

package/dist/LinearPairedArcDisplay/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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LinearPairedArcDisplayF;
 const react_1 = require("react");

package/dist/LinearPairedArcDisplay/model.d.ts

@@ -106,7 +106,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     lastDrawnOffsetPx: number;
     features: Feature[] | undefined;

package/dist/LinearPairedArcDisplay/model.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stateModelFactory = stateModelFactory;
 const configuration_1 = require("@jbrowse/core/configuration");

package/dist/LinearPairedArcDisplay/renderSvg.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from './model';
 export declare function renderArcSvg(model: LinearArcDisplayModel, _opts: {
     rasterizeLayers?: boolean;
-}): Promise<React.JSX.Element>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/LinearPairedArcDisplay/renderSvg.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderArcSvg = renderArcSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const Arcs_1 = __importDefault(require("./components/Arcs"));
 async function renderArcSvg(model, _opts) {
@@ -13,10 +13,5 @@ async function renderArcSvg(model, _opts) {
     const width = view.dynamicBlocks.totalWidthPx;
     const height = model.height;
     const clipid = `arc-${model.id}`;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("defs", null,
-            react_1.default.createElement("clipPath", { id: clipid },
-                react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-        react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
-            react_1.default.createElement(Arcs_1.default, { model: model, exportSVG: true }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height }) }) }), (0, jsx_runtime_1.jsx)("g", { clipPath: `url(#${clipid})`, children: (0, jsx_runtime_1.jsx)(Arcs_1.default, { model: model, exportSVG: true }) })] }));
 }

package/esm/ArcRenderer/ArcRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature, Region } from '@jbrowse/core/util';
 declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }: {
@@ -12,5 +11,5 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
     };
     onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
     exportSVG: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ArcRendering;

package/esm/ArcRenderer/ArcRendering.js

@@ -1,4 +1,5 @@
-import React, { Suspense, lazy, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useRef, useState } from 'react';
 import { readConfObject } from '@jbrowse/core/configuration';
 import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
@@ -14,22 +15,17 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight
     const caption = readConfObject(config, 'caption', { feature });
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
     const height = Math.min(readConfObject(config, 'height', { feature }) || 100, displayHeight);
-    const ref = React.createRef();
+    const ref = useRef(null);
     const t = 0.5;
     const t1 = 1 - t;
     const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
-    return (React.createElement("g", null,
-        React.createElement("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
-                onFeatureClick(e, featureId);
-            }, onMouseOver: () => {
-                setIsMouseOvered(true);
-            }, onMouseLeave: () => {
-                setIsMouseOvered(false);
-            }, pointerEvents: "stroke" }),
-        isMouseOvered ? (React.createElement(Suspense, { fallback: null },
-            React.createElement(ArcTooltip, { contents: caption }))) : null,
-        React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
-        React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
+    return (_jsxs("g", { children: [_jsx("path", { ref: ref, ...getStrokeProps(stroke), d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
+                    onFeatureClick(e, featureId);
+                }, onMouseOver: () => {
+                    setIsMouseOvered(true);
+                }, onMouseLeave: () => {
+                    setIsMouseOvered(false);
+                }, pointerEvents: "stroke" }), isMouseOvered ? (_jsx(Suspense, { fallback: null, children: _jsx(ArcTooltip, { contents: caption }) })) : null, _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
 }
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
@@ -66,28 +62,24 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const label = readConfObject(config, 'label', { feature });
     const caption = readConfObject(config, 'caption', { feature });
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
-    const ref = React.createRef();
+    const ref = useRef(null);
     const textYCoord = (right - left) / 2;
-    return (React.createElement("g", null,
-        React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
-                onFeatureClick(e, featureId);
-            }, onMouseOver: () => {
-                setIsMouseOvered(true);
-            }, onMouseLeave: () => {
-                setIsMouseOvered(false);
-            }, ref: ref, pointerEvents: "stroke" }),
-        isMouseOvered ? React.createElement(ArcTooltip, { contents: caption }) : null,
-        React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em" }, label),
-        React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke }, label)));
+    return (_jsxs("g", { children: [_jsx("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(stroke), strokeWidth: strokeWidth, fill: "transparent", onClick: e => {
+                    onFeatureClick(e, featureId);
+                }, onMouseOver: () => {
+                    setIsMouseOvered(true);
+                }, onMouseLeave: () => {
+                    setIsMouseOvered(false);
+                }, ref: ref, pointerEvents: "stroke" }), isMouseOvered ? _jsx(ArcTooltip, { contents: caption }) : null, _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), _jsx("text", { x: left + (right - left) / 2, y: textYCoord + 3, stroke: textStroke, children: label })] }));
 }
 const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
     const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
     const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
     const { selectedFeatureId } = displayModel || {};
-    return (React.createElement(Wrapper, { exportSVG: exportSVG, width: width, height: height }, [...features.values()].map(f => semicircles ? (React.createElement(SemiCircles, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })) : (React.createElement(Arc, { key: f.id(), height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
+    return (_jsx(Wrapper, { exportSVG: exportSVG, width: width, height: height, children: [...features.values()].map(f => semicircles ? (_jsx(SemiCircles, { config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id())) : (_jsx(Arc, { height: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f }, f.id()))) }));
 });
 function Wrapper({ exportSVG, width, height, children, }) {
-    return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));
+    return exportSVG ? (children) : (_jsx("svg", { width: width, height: height, children: children }));
 }
 export default ArcRendering;

package/esm/ArcTooltip.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const ArcTooltip: ({ contents }: {
     contents?: string;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ArcTooltip;

package/esm/ArcTooltip.js

@@ -1,13 +1,12 @@
-import React, { Suspense } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, forwardRef, isValidElement } from 'react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-const TooltipContents = React.forwardRef(function TooltipContents2({ message }, ref) {
-    return (React.createElement("div", { ref: ref }, React.isValidElement(message) ? (message) : message ? (React.createElement(SanitizedHTML, { html: String(message) })) : null));
+const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
+    return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
 });
 const ArcTooltip = observer(function ({ contents }) {
-    return contents ? (React.createElement(Suspense, { fallback: null },
-        React.createElement(BaseTooltip, null,
-            React.createElement(TooltipContents, { message: contents })))) : null;
+    return contents ? (_jsx(Suspense, { fallback: null, children: _jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) }) })) : null;
 });
 export default ArcTooltip;

package/esm/LinearArcDisplay/model.d.ts

@@ -34,7 +34,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -170,13 +170,13 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -203,7 +203,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     readonly blockType: string;
@@ -274,7 +274,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;

package/esm/LinearPairedArcDisplay/components/Arcs.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const Arcs: ({ model, exportSVG, }: {
     model: LinearArcDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Arcs;

package/esm/LinearPairedArcDisplay/components/Arcs.js

@@ -1,4 +1,5 @@
-import React, { Suspense, lazy, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useRef, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
@@ -27,30 +28,25 @@ const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
         const right = p2;
         const col = mouseOvered ? 'black' : c;
         const sw = 3;
-        return absrad > 1 ? (React.createElement(React.Fragment, null,
-            React.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, fill: "none", pointerEvents: "stroke" }),
-            k1.mateDirection ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
-            k2.mateDirection ? (React.createElement("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
-                    setMouseOvered(false);
-                }, onMouseOver: () => {
-                    setMouseOvered(true);
-                }, onClick: () => {
-                    model.selectFeature(feature);
-                }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null,
-            mouseOvered ? (React.createElement(Suspense, { fallback: null },
-                React.createElement(ArcTooltip, { contents: makeSummary(feature, alt) }))) : null)) : null;
+        return absrad > 1 ? (_jsxs(_Fragment, { children: [_jsx("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, fill: "none", pointerEvents: "stroke" }), k1.mateDirection ? (_jsx("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, x1: left, x2: left + k1.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null, k2.mateDirection ? (_jsx("line", { ...getStrokeProps(col), strokeWidth: sw, onMouseOut: () => {
+                        setMouseOvered(false);
+                    }, onMouseOver: () => {
+                        setMouseOvered(true);
+                    }, onClick: () => {
+                        model.selectFeature(feature);
+                    }, x1: right, x2: right + k2.mateDirection * 20, y1: 1.5, y2: 1.5 })) : null, mouseOvered ? (_jsx(Suspense, { fallback: null, children: _jsx(ArcTooltip, { contents: makeSummary(feature, alt) }) })) : null] })) : null;
     }
     return null;
 });
@@ -58,7 +54,7 @@ const Wrapper = observer(function ({ model, exportSVG, children, }) {
     const { height } = model;
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
-    return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));
+    return exportSVG ? (children) : (_jsx("svg", { width: width, height: height, children: children }));
 });
 const Arcs = observer(function ({ model, exportSVG, }) {
     const view = getContainingView(model);
@@ -66,10 +62,10 @@ const Arcs = observer(function ({ model, exportSVG, }) {
     const { assemblyManager } = session;
     const { features } = model;
     const assembly = assemblyManager.get(view.assemblyNames[0]);
-    return assembly ? (React.createElement(Wrapper, { model: model, exportSVG: exportSVG }, features === null || features === void 0 ? void 0 : features.map(f => {
-        var _a;
-        const alts = f.get('ALT');
-        return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (React.createElement(Arc, { key: `${f.id()}-${a}`, session: session, feature: f, alt: a, view: view, model: model, assembly: assembly })))) !== null && _a !== void 0 ? _a : (React.createElement(Arc, { key: f.id(), session: session, feature: f, view: view, model: model, assembly: assembly })));
-    }))) : null;
+    return assembly ? (_jsx(Wrapper, { model: model, exportSVG: exportSVG, children: features === null || features === void 0 ? void 0 : features.map(f => {
+            var _a;
+            const alts = f.get('ALT');
+            return ((_a = alts === null || alts === void 0 ? void 0 : alts.map(a => (_jsx(Arc, { session: session, feature: f, alt: a, view: view, model: model, assembly: assembly }, `${f.id()}-${a}`)))) !== null && _a !== void 0 ? _a : (_jsx(Arc, { session: session, feature: f, view: view, model: model, assembly: assembly }, f.id())));
+        }) })) : null;
 });
 export default Arcs;

package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const BaseDisplayComponent: ({ model, children, }: {
     model: LinearArcDisplayModel;
     children?: React.ReactNode;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default BaseDisplayComponent;

package/esm/LinearPairedArcDisplay/components/BaseDisplayComponent.js

@@ -1,4 +1,5 @@
-import React, { lazy } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { BlockMsg } from '@jbrowse/plugin-linear-genome-view';
@@ -23,31 +24,22 @@ const useStyles = makeStyles()(theme => ({
 }));
 const BaseDisplayComponent = observer(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
-    return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(React.Fragment, null,
-            React.createElement(Tooltip, { title: "Reload" },
-                React.createElement(IconButton, { "data-testid": "reload_button", onClick: () => {
-                        model.reload();
-                    } },
-                    React.createElement(RefreshIcon, null))),
-            React.createElement(Tooltip, { title: "Show stack trace" },
-                React.createElement(IconButton, { onClick: () => {
-                        getSession(model).queueDialog(onClose => [
-                            ErrorMessageStackTraceDialog,
-                            { onClose, error: model.error },
-                        ]);
-                    } },
-                    React.createElement(ReportIcon, null)))) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
+    return error ? (_jsx(BlockMsg, { message: `${error}`, severity: "error", action: _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Reload", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
+                            model.reload();
+                        }, children: _jsx(RefreshIcon, {}) }) }), _jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { onClick: () => {
+                            getSession(model).queueDialog(onClose => [
+                                ErrorMessageStackTraceDialog,
+                                { onClose, error: model.error },
+                            ]);
+                        }, children: _jsx(ReportIcon, {}) }) })] }) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
 });
 const DataDisplay = observer(function ({ model, children, }) {
     const { loading } = model;
-    return (React.createElement("div", null,
-        children,
-        loading ? React.createElement(LoadingBar, { model: model }) : null));
+    return (_jsxs("div", { children: [children, loading ? _jsx(LoadingBar, { model: model }) : null] }));
 });
 const LoadingBar = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { message } = model;
-    return (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, { message: message })));
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: message }) }));
 });
 export default BaseDisplayComponent;

package/esm/LinearPairedArcDisplay/components/ReactComponent.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from '../model';
 declare const LinearArcReactComponent: ({ model, exportSVG, }: {
     model: LinearArcDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearArcReactComponent;

package/esm/LinearPairedArcDisplay/components/ReactComponent.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 import Arcs from './Arcs';
 import BaseDisplayComponent from './BaseDisplayComponent';
 const LinearArcReactComponent = observer(function ({ model, exportSVG, }) {
-    return (React.createElement(BaseDisplayComponent, { model: model },
-        React.createElement(Arcs, { model: model, exportSVG: exportSVG })));
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Arcs, { model: model, exportSVG: exportSVG }) }));
 });
 export default LinearArcReactComponent;

package/esm/LinearPairedArcDisplay/components/util.js

@@ -58,5 +58,5 @@ export function makeSummary(feature, alt) {
         alt,
     ]
         .filter(f => !!f)
-        .join(' - ');
+        .join('<br/>');
 }

package/esm/LinearPairedArcDisplay/model.d.ts

@@ -106,7 +106,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     lastDrawnOffsetPx: number;
     features: Feature[] | undefined;

package/esm/LinearPairedArcDisplay/renderSvg.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import type { LinearArcDisplayModel } from './model';
 export declare function renderArcSvg(model: LinearArcDisplayModel, _opts: {
     rasterizeLayers?: boolean;
-}): Promise<React.JSX.Element>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/LinearPairedArcDisplay/renderSvg.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView, when } from '@jbrowse/core/util';
 import Arcs from './components/Arcs';
 export async function renderArcSvg(model, _opts) {
@@ -7,10 +7,5 @@ export async function renderArcSvg(model, _opts) {
     const width = view.dynamicBlocks.totalWidthPx;
     const height = model.height;
     const clipid = `arc-${model.id}`;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipid },
-                React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-        React.createElement("g", { clipPath: `url(#${clipid})` },
-            React.createElement(Arcs, { model: model, exportSVG: true }))));
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: width, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipid})`, children: _jsx(Arcs, { model: model, exportSVG: true }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-arc",
-  "version": "2.18.0",
+  "version": "3.0.1",
   "description": "JBrowse 2 arc adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,23 +35,25 @@
     "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
-  "peerDependencies": {
-    "@jbrowse/core": "^2.0.0",
-    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
-    "@jbrowse/plugin-wiggle": "^2.0.0",
+  "dependencies": {
+    "@jbrowse/core": "^3.0.1",
+    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
+    "@jbrowse/plugin-wiggle": "^3.0.1",
     "@mui/material": "^6.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",
     "rxjs": "^7.0.0"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
+  "gitHead": "aa2f1d1a89d2361c7fd1a93fe29506fa4554f5cc"
 }