@jbrowse/plugin-arc 2.10.0 → 2.10.1

package/dist/ArcRenderer/ArcRendering.js

@@ -1,14 +1,39 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-const react_svg_tooltip_1 = require("react-svg-tooltip");
+// locals
+const ArcTooltip_1 = __importDefault(require("../ArcTooltip"));
 function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
     const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
     const featureId = feature.id();
     let stroke = (0, configuration_1.readConfObject)(config, 'color', { feature });
@@ -21,7 +46,6 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
     const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 1;
     const height = (0, configuration_1.readConfObject)(config, 'height', { feature }) || 100;
     const ref = react_1.default.createRef();
-    const tooltipWidth = 20 + (0, util_1.measureText)(caption === null || caption === void 0 ? void 0 : caption.toString());
     const t = 0.5;
     // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
     const textYCoord = (1 - t) * (1 - t) * (1 - t) * 0 +
@@ -29,10 +53,8 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
         3 * (1 - t) * (t * t) * height +
         t * t * t * 0;
     return (react_1.default.createElement("g", null,
-        react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), ref: ref, pointerEvents: "stroke" }),
-        react_1.default.createElement(react_svg_tooltip_1.Tooltip, { triggerRef: ref },
-            react_1.default.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-            react_1.default.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption)),
+        react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
+        isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
         react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: 'white', strokeWidth: '0.6em' } }, label),
         react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: textStroke } }, label)));
 }
@@ -62,6 +84,7 @@ function describeArc(x, y, radius, startAngle, endAngle) {
     ].join(' ');
 }
 function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [isMouseOvered, setIsMouseOvered] = (0, react_1.useState)(false);
     const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
     const featureId = feature.id();
     let stroke = (0, configuration_1.readConfObject)(config, 'color', { feature });
@@ -73,13 +96,10 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const caption = (0, configuration_1.readConfObject)(config, 'caption', { feature });
     const strokeWidth = (0, configuration_1.readConfObject)(config, 'thickness', { feature }) || 1;
     const ref = react_1.default.createRef();
-    const tooltipWidth = 20 + (0, util_1.measureText)(caption === null || caption === void 0 ? void 0 : caption.toString());
     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), stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), ref: ref, pointerEvents: "stroke" }),
-        react_1.default.createElement(react_svg_tooltip_1.Tooltip, { triggerRef: ref },
-            react_1.default.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-            react_1.default.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption)),
+        react_1.default.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
+        isMouseOvered ? react_1.default.createElement(ArcTooltip_1.default, { contents: caption }) : null,
         react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: 'white', strokeWidth: '0.6em' } }, label),
         react_1.default.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: textStroke } }, label)));
 }

package/dist/ArcTooltip.d.ts

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

package/dist/ArcTooltip.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ui_1 = require("@jbrowse/core/ui");
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const react_2 = require("@floating-ui/react");
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+        pointerEvents: 'none',
+        backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.pxToRem(12),
+        lineHeight: `${round(14 / 10)}em`,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+    },
+}));
+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 ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
+    var _a, _b;
+    const { theme, classes } = useStyles();
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        placement: 'right',
+    });
+    const clientPoint = (0, react_2.useClientPoint)(context);
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return contents ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
+            react_1.default.createElement(TooltipContents, { message: contents })))) : null;
+});
+exports.default = ArcTooltip;

package/dist/LinearArcDisplay/model.d.ts

@@ -375,8 +375,8 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
-    type: string;
     id: string;
+    type: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
     rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;

package/dist/LinearPairedArcDisplay/components/Arcs.js

@@ -22,79 +22,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
 const configuration_1 = require("@jbrowse/core/configuration");
-const vcf_1 = require("@gmod/vcf");
-const react_svg_tooltip_1 = require("react-svg-tooltip");
-function f(feature, alt) {
-    var _a, _b, _c, _d, _e;
-    const bnd = alt ? (0, vcf_1.parseBreakend)(alt) : undefined;
-    let start = feature.get('start');
-    let end = feature.get('end');
-    const strand = feature.get('strand');
-    const mate = feature.get('mate');
-    const refName = feature.get('refName');
-    let mateRefName;
-    let mateEnd = 0;
-    let mateStart = 0;
-    // one sided bracket used, because there could be <INS:ME> and we just check
-    // startswith below
-    const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV'];
-    if (symbolicAlleles.some(a => alt === null || alt === void 0 ? void 0 : alt.startsWith(a))) {
-        // END is defined to be a single value, not an array. CHR2 not defined in
-        // VCF spec, but should be similar
-        const e = ((_b = (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.END) === null || _b === void 0 ? void 0 : _b[0]) || feature.get('end');
-        mateEnd = e;
-        mateStart = e - 1;
-        mateRefName = (_e = (_d = (_c = feature.get('INFO')) === null || _c === void 0 ? void 0 : _c.CHR2) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : refName;
-        // re-adjust the arc to be from start to end of feature by re-assigning end
-        // to the 'mate'
-        start = feature.get('start');
-        end = feature.get('start') + 1;
-    }
-    else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
-        const matePosition = bnd.MatePosition.split(':');
-        mateEnd = +matePosition[1];
-        mateStart = +matePosition[1] - 1;
-        mateRefName = matePosition[0];
-    }
-    return {
-        k1: { refName, start, end, strand },
-        k2: mate !== null && mate !== void 0 ? mate : { refName: mateRefName, end: mateEnd, start: mateStart },
-    };
-}
-function makeSummary(feature, alt) {
-    var _a;
-    const { k1, k2 } = f(feature, alt);
-    return [
-        feature.get('name'),
-        feature.get('id'),
-        (0, util_1.assembleLocString)(k1),
-        (0, util_1.assembleLocString)(k2),
-        (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.SVTYPE,
-        alt,
-    ]
-        .filter(f => !!f)
-        .join(' - ');
-}
-// conditionally rendered tooltip only on mouseover, speeds up
-const SvgTooltip = react_1.default.forwardRef(function SvgTooltip2({ feature, alt }, ref) {
-    const caption = makeSummary(feature, alt);
-    const tooltipWidth = 20 + (0, util_1.measureText)(caption);
-    return ref !== null ? (
-    // @ts-expect-error
-    react_1.default.createElement(react_svg_tooltip_1.Tooltip, { triggerRef: ref },
-        react_1.default.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-        react_1.default.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption))) : null;
-});
+const ArcTooltip_1 = __importDefault(require("../../ArcTooltip"));
+const util_2 = require("./util");
 const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly, view, }) {
     var _a, _b;
     const [mouseOvered, setMouseOvered] = (0, react_1.useState)(false);
     const { height } = model;
-    const { k1, k2 } = f(feature, alt);
+    const { k1, k2 } = (0, util_2.makeFeaturePair)(feature, alt);
     const ref = (0, react_1.useRef)(null);
     const c = (0, configuration_1.getConf)(model, 'color', { feature, alt });
     const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName;
@@ -111,9 +53,13 @@ const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly
         const p2 = r2 - view.offsetPx;
         const left = p1;
         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, stroke: mouseOvered ? 'black' : c, strokeWidth: 3, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
-            mouseOvered ? (react_1.default.createElement(SvgTooltip, { feature: feature, alt: alt, ref: ref })) : null)) : null;
+            react_1.default.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, stroke: col, strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
+            k1.mateDirection !== undefined ? (react_1.default.createElement("line", { stroke: 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 !== undefined ? (react_1.default.createElement("line", { stroke: 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(ArcTooltip_1.default, { contents: (0, util_2.makeSummary)(feature, alt) })) : null)) : null;
     }
     return null;
 });

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

@@ -0,0 +1,17 @@
+import { Feature } from '@jbrowse/core/util';
+export declare function makeFeaturePair(feature: Feature, alt?: string): {
+    k1: {
+        refName: string;
+        start: number;
+        end: number;
+        strand: any;
+        mateDirection: number;
+    };
+    k2: {
+        refName: string;
+        start: number;
+        end: number;
+        mateDirection?: number | undefined;
+    };
+};
+export declare function makeSummary(feature: Feature, alt?: string): string;

package/dist/LinearPairedArcDisplay/components/util.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSummary = exports.makeFeaturePair = void 0;
+const vcf_1 = require("@gmod/vcf");
+const util_1 = require("@jbrowse/core/util");
+function makeFeaturePair(feature, alt) {
+    var _a, _b, _c, _d;
+    const bnd = alt ? (0, vcf_1.parseBreakend)(alt) : undefined;
+    let start = feature.get('start');
+    let end = feature.get('end');
+    const strand = feature.get('strand');
+    const mate = feature.get('mate');
+    const refName = feature.get('refName');
+    let mateRefName;
+    let mateEnd = 0;
+    let mateStart = 0;
+    let joinDirection = 0;
+    let mateDirection = 0;
+    // one sided bracket used, because there could be <INS:ME> and we just check
+    // startswith below
+    const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV'];
+    if (symbolicAlleles.some(a => alt === null || alt === void 0 ? void 0 : alt.startsWith(a))) {
+        // END is defined to be a single value, not an array. CHR2 not defined in
+        // VCF spec, but should be similar
+        const info = feature.get('INFO');
+        const e = (_b = (_a = info === null || info === void 0 ? void 0 : info.END) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : end;
+        mateRefName = (_d = (_c = info === null || info === void 0 ? void 0 : info.CHR2) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : refName;
+        mateEnd = e;
+        mateStart = e - 1;
+        // re-adjust the arc to be from start to end of feature by re-assigning end
+        // to the 'mate'
+        start = start;
+        end = start + 1;
+    }
+    else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
+        const matePosition = bnd.MatePosition.split(':');
+        mateDirection = bnd.MateDirection === 'left' ? 1 : -1;
+        joinDirection = bnd.Join === 'left' ? -1 : 1;
+        mateEnd = +matePosition[1];
+        mateStart = +matePosition[1] - 1;
+        mateRefName = matePosition[0];
+    }
+    return {
+        k1: {
+            refName,
+            start,
+            end,
+            strand,
+            mateDirection,
+        },
+        k2: mate !== null && mate !== void 0 ? mate : {
+            refName: mateRefName,
+            end: mateEnd,
+            start: mateStart,
+            mateDirection: joinDirection,
+        },
+    };
+}
+exports.makeFeaturePair = makeFeaturePair;
+function makeSummary(feature, alt) {
+    var _a;
+    const { k1, k2 } = makeFeaturePair(feature, alt);
+    return [
+        feature.get('name'),
+        feature.get('id'),
+        (0, util_1.assembleLocString)(k1),
+        (0, util_1.assembleLocString)(k2),
+        (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.SVTYPE,
+        alt,
+    ]
+        .filter(f => !!f)
+        .join(' - ');
+}
+exports.makeSummary = makeSummary;

package/esm/ArcRenderer/ArcRendering.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { readConfObject, } from '@jbrowse/core/configuration';
-import { bpSpanPx, measureText } from '@jbrowse/core/util';
+import { bpSpanPx } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import { Tooltip } from 'react-svg-tooltip';
+// locals
+import ArcTooltip from '../ArcTooltip';
 function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [isMouseOvered, setIsMouseOvered] = useState(false);
     const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
     const featureId = feature.id();
     let stroke = readConfObject(config, 'color', { feature });
@@ -16,7 +18,6 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1;
     const height = readConfObject(config, 'height', { feature }) || 100;
     const ref = React.createRef();
-    const tooltipWidth = 20 + measureText(caption === null || caption === void 0 ? void 0 : caption.toString());
     const t = 0.5;
     // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
     const textYCoord = (1 - t) * (1 - t) * (1 - t) * 0 +
@@ -24,10 +25,8 @@ function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, featu
         3 * (1 - t) * (t * t) * height +
         t * t * t * 0;
     return (React.createElement("g", null,
-        React.createElement("path", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), ref: ref, pointerEvents: "stroke" }),
-        React.createElement(Tooltip, { triggerRef: ref },
-            React.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-            React.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption)),
+        React.createElement("path", { d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : 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, style: { stroke: 'white', strokeWidth: '0.6em' } }, label),
         React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: textStroke } }, label)));
 }
@@ -57,6 +56,7 @@ function describeArc(x, y, radius, startAngle, endAngle) {
     ].join(' ');
 }
 function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [isMouseOvered, setIsMouseOvered] = useState(false);
     const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
     const featureId = feature.id();
     let stroke = readConfObject(config, 'color', { feature });
@@ -68,13 +68,10 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const caption = readConfObject(config, 'caption', { feature });
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 1;
     const ref = React.createRef();
-    const tooltipWidth = 20 + measureText(caption === null || caption === void 0 ? void 0 : caption.toString());
     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), stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), ref: ref, pointerEvents: "stroke" }),
-        React.createElement(Tooltip, { triggerRef: ref },
-            React.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-            React.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption)),
+        React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onFeatureClick === null || onFeatureClick === void 0 ? void 0 : 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, style: { stroke: 'white', strokeWidth: '0.6em' } }, label),
         React.createElement("text", { x: left + (right - left) / 2, y: textYCoord + 3, style: { stroke: textStroke } }, label)));
 }

package/esm/ArcTooltip.d.ts

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

package/esm/ArcTooltip.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+import { Portal, alpha } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+const useStyles = makeStyles()(theme => ({
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+        pointerEvents: 'none',
+        backgroundColor: alpha(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.pxToRem(12),
+        lineHeight: `${round(14 / 10)}em`,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+    },
+}));
+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 ArcTooltip = observer(function ({ contents }) {
+    var _a, _b;
+    const { theme, classes } = useStyles();
+    const { refs, floatingStyles, context } = useFloating({
+        placement: 'right',
+    });
+    const clientPoint = useClientPoint(context);
+    const { getFloatingProps } = useInteractions([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return contents ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
+            React.createElement(TooltipContents, { message: contents })))) : null;
+});
+export default ArcTooltip;

package/esm/LinearArcDisplay/model.d.ts

@@ -375,8 +375,8 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
-    type: string;
     id: string;
+    type: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
     rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;

package/esm/LinearPairedArcDisplay/components/Arcs.js

@@ -1,75 +1,14 @@
 import React, { useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-import { assembleLocString, getContainingView, getSession, measureText, } from '@jbrowse/core/util';
+import { getContainingView, getSession, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
-import { parseBreakend } from '@gmod/vcf';
-import { Tooltip } from 'react-svg-tooltip';
-function f(feature, alt) {
-    var _a, _b, _c, _d, _e;
-    const bnd = alt ? parseBreakend(alt) : undefined;
-    let start = feature.get('start');
-    let end = feature.get('end');
-    const strand = feature.get('strand');
-    const mate = feature.get('mate');
-    const refName = feature.get('refName');
-    let mateRefName;
-    let mateEnd = 0;
-    let mateStart = 0;
-    // one sided bracket used, because there could be <INS:ME> and we just check
-    // startswith below
-    const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV'];
-    if (symbolicAlleles.some(a => alt === null || alt === void 0 ? void 0 : alt.startsWith(a))) {
-        // END is defined to be a single value, not an array. CHR2 not defined in
-        // VCF spec, but should be similar
-        const e = ((_b = (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.END) === null || _b === void 0 ? void 0 : _b[0]) || feature.get('end');
-        mateEnd = e;
-        mateStart = e - 1;
-        mateRefName = (_e = (_d = (_c = feature.get('INFO')) === null || _c === void 0 ? void 0 : _c.CHR2) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : refName;
-        // re-adjust the arc to be from start to end of feature by re-assigning end
-        // to the 'mate'
-        start = feature.get('start');
-        end = feature.get('start') + 1;
-    }
-    else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
-        const matePosition = bnd.MatePosition.split(':');
-        mateEnd = +matePosition[1];
-        mateStart = +matePosition[1] - 1;
-        mateRefName = matePosition[0];
-    }
-    return {
-        k1: { refName, start, end, strand },
-        k2: mate !== null && mate !== void 0 ? mate : { refName: mateRefName, end: mateEnd, start: mateStart },
-    };
-}
-function makeSummary(feature, alt) {
-    var _a;
-    const { k1, k2 } = f(feature, alt);
-    return [
-        feature.get('name'),
-        feature.get('id'),
-        assembleLocString(k1),
-        assembleLocString(k2),
-        (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.SVTYPE,
-        alt,
-    ]
-        .filter(f => !!f)
-        .join(' - ');
-}
-// conditionally rendered tooltip only on mouseover, speeds up
-const SvgTooltip = React.forwardRef(function SvgTooltip2({ feature, alt }, ref) {
-    const caption = makeSummary(feature, alt);
-    const tooltipWidth = 20 + measureText(caption);
-    return ref !== null ? (
-    // @ts-expect-error
-    React.createElement(Tooltip, { triggerRef: ref },
-        React.createElement("rect", { x: 12, y: 0, width: tooltipWidth, height: 20, rx: 5, ry: 5, fill: "black", fillOpacity: "50%" }),
-        React.createElement("text", { x: 22, y: 14, fontSize: 10, fill: "white", textLength: tooltipWidth - 20 }, caption))) : null;
-});
+import ArcTooltip from '../../ArcTooltip';
+import { makeFeaturePair, makeSummary } from './util';
 const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
     var _a, _b;
     const [mouseOvered, setMouseOvered] = useState(false);
     const { height } = model;
-    const { k1, k2 } = f(feature, alt);
+    const { k1, k2 } = makeFeaturePair(feature, alt);
     const ref = useRef(null);
     const c = getConf(model, 'color', { feature, alt });
     const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName;
@@ -86,9 +25,13 @@ const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
         const p2 = r2 - view.offsetPx;
         const left = p1;
         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, stroke: mouseOvered ? 'black' : c, strokeWidth: 3, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
-            mouseOvered ? (React.createElement(SvgTooltip, { feature: feature, alt: alt, ref: ref })) : null)) : null;
+            React.createElement("path", { d: `M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`, ref: ref, stroke: col, strokeWidth: sw, onMouseOut: () => setMouseOvered(false), onMouseOver: () => setMouseOvered(true), onClick: () => model.selectFeature(feature), fill: "none", pointerEvents: "stroke" }),
+            k1.mateDirection !== undefined ? (React.createElement("line", { stroke: 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 !== undefined ? (React.createElement("line", { stroke: 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(ArcTooltip, { contents: makeSummary(feature, alt) })) : null)) : null;
     }
     return null;
 });

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

@@ -0,0 +1,17 @@
+import { Feature } from '@jbrowse/core/util';
+export declare function makeFeaturePair(feature: Feature, alt?: string): {
+    k1: {
+        refName: string;
+        start: number;
+        end: number;
+        strand: any;
+        mateDirection: number;
+    };
+    k2: {
+        refName: string;
+        start: number;
+        end: number;
+        mateDirection?: number | undefined;
+    };
+};
+export declare function makeSummary(feature: Feature, alt?: string): string;

package/esm/LinearPairedArcDisplay/components/util.js

@@ -0,0 +1,69 @@
+import { parseBreakend } from '@gmod/vcf';
+import { assembleLocString } from '@jbrowse/core/util';
+export function makeFeaturePair(feature, alt) {
+    var _a, _b, _c, _d;
+    const bnd = alt ? parseBreakend(alt) : undefined;
+    let start = feature.get('start');
+    let end = feature.get('end');
+    const strand = feature.get('strand');
+    const mate = feature.get('mate');
+    const refName = feature.get('refName');
+    let mateRefName;
+    let mateEnd = 0;
+    let mateStart = 0;
+    let joinDirection = 0;
+    let mateDirection = 0;
+    // one sided bracket used, because there could be <INS:ME> and we just check
+    // startswith below
+    const symbolicAlleles = ['<TRA', '<DEL', '<INV', '<INS', '<DUP', '<CNV'];
+    if (symbolicAlleles.some(a => alt === null || alt === void 0 ? void 0 : alt.startsWith(a))) {
+        // END is defined to be a single value, not an array. CHR2 not defined in
+        // VCF spec, but should be similar
+        const info = feature.get('INFO');
+        const e = (_b = (_a = info === null || info === void 0 ? void 0 : info.END) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : end;
+        mateRefName = (_d = (_c = info === null || info === void 0 ? void 0 : info.CHR2) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : refName;
+        mateEnd = e;
+        mateStart = e - 1;
+        // re-adjust the arc to be from start to end of feature by re-assigning end
+        // to the 'mate'
+        start = start;
+        end = start + 1;
+    }
+    else if (bnd === null || bnd === void 0 ? void 0 : bnd.MatePosition) {
+        const matePosition = bnd.MatePosition.split(':');
+        mateDirection = bnd.MateDirection === 'left' ? 1 : -1;
+        joinDirection = bnd.Join === 'left' ? -1 : 1;
+        mateEnd = +matePosition[1];
+        mateStart = +matePosition[1] - 1;
+        mateRefName = matePosition[0];
+    }
+    return {
+        k1: {
+            refName,
+            start,
+            end,
+            strand,
+            mateDirection,
+        },
+        k2: mate !== null && mate !== void 0 ? mate : {
+            refName: mateRefName,
+            end: mateEnd,
+            start: mateStart,
+            mateDirection: joinDirection,
+        },
+    };
+}
+export function makeSummary(feature, alt) {
+    var _a;
+    const { k1, k2 } = makeFeaturePair(feature, alt);
+    return [
+        feature.get('name'),
+        feature.get('id'),
+        assembleLocString(k1),
+        assembleLocString(k2),
+        (_a = feature.get('INFO')) === null || _a === void 0 ? void 0 : _a.SVTYPE,
+        alt,
+    ]
+        .filter(f => !!f)
+        .join(' - ');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-arc",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "JBrowse 2 arc adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,9 +35,6 @@
     "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
-  "dependencies": {
-    "react-svg-tooltip": "^0.0.11"
-  },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
@@ -56,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "223d8bfb68fd1bacaf22852639ad5920f1b7f43b"
+  "gitHead": "442b5f87efddfdf4ccf520b4d9dd01ddd370cb07"
 }