@jbrowse/plugin-arc 2.11.0 → 2.11.1

package/dist/ArcRenderer/ArcRenderer.d.ts

@@ -1,3 +1,3 @@
 import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-export default class extends FeatureRendererType {
+export default class ArcRenderer extends FeatureRendererType {
 }

package/dist/ArcRenderer/ArcRenderer.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const FeatureRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType"));
-class default_1 extends FeatureRendererType_1.default {
+class ArcRenderer extends FeatureRendererType_1.default {
 }
-exports.default = default_1;
+exports.default = ArcRenderer;

package/dist/ArcRenderer/ArcRendering.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { Feature, Region } from '@jbrowse/core/util';
-declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }: {
+declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
     features: Map<string, Feature>;
     config: AnyConfigurationModel;
     regions: Region[];
@@ -10,6 +10,7 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
     displayModel: {
         selectedFeatureId: string;
     };
+    onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
     exportSVG: boolean;
 }) => React.JSX.Element;
 export default ArcRendering;

package/dist/ArcRenderer/ArcRendering.js

@@ -46,15 +46,15 @@ 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 t = 0.5;
     // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
+    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", { 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" }),
+        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 === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), 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)));
+        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)));
 }
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
@@ -96,16 +96,16 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const ref = react_1.default.createRef();
     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), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
+        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 === 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)));
+        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)));
 }
-const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
+const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
     const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
     const semicircles = (0, configuration_1.readConfObject)(config, 'displayMode') === 'semicircles';
-    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, feature: f })) : (react_1.default.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, feature: f })))));
+    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(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
 });
 function Wrapper({ exportSVG, width, height, children, }) {
     return exportSVG ? (children) : (react_1.default.createElement("svg", { width: width, height: height }, children));

package/dist/ArcRenderer/index.d.ts

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

package/dist/ArcRenderer/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ArcRendering_1 = __importDefault(require("./ArcRendering"));
 const configSchema_1 = __importDefault(require("./configSchema"));
 const ArcRenderer_1 = __importDefault(require("./ArcRenderer"));
-exports.default = (pluginManager) => {
+function ArcRendererF(pluginManager) {
     pluginManager.addRendererType(() => new ArcRenderer_1.default({
         name: 'ArcRenderer',
         ReactComponent: ArcRendering_1.default,
         configSchema: configSchema_1.default,
         pluginManager,
     }));
-};
+}
+exports.default = ArcRendererF;

package/dist/ArcTooltip.js

@@ -36,6 +36,7 @@ const ArcTooltip = (0, mobx_react_1.observer)(function ({ contents }) {
     const { theme, classes } = useStyles();
     const { refs, floatingStyles, context } = (0, react_2.useFloating)({
         placement: 'right',
+        strategy: 'fixed',
     });
     const clientPoint = (0, react_2.useClientPoint)(context);
     const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);

package/dist/LinearArcDisplay/index.d.ts

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

package/dist/LinearArcDisplay/index.js

@@ -4,7 +4,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const configSchema_1 = require("./configSchema");
 const model_1 = require("./model");
-exports.default = (pluginManager) => {
+function LinearArcDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.configSchemaFactory)(pluginManager);
         return new pluggableElementTypes_1.DisplayType({
@@ -17,4 +17,5 @@ exports.default = (pluginManager) => {
             ReactComponent: plugin_linear_genome_view_1.BaseLinearDisplayComponent,
         });
     });
-};
+}
+exports.default = LinearArcDisplayF;

package/dist/LinearPairedArcDisplay/components/Arcs.js

@@ -56,9 +56,9 @@ const Arc = (0, mobx_react_1.observer)(function ({ model, feature, alt, assembly
         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: 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,
+            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 !== undefined ? (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 !== undefined ? (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(ArcTooltip_1.default, { contents: (0, util_2.makeSummary)(feature, alt) })) : null)) : null;
     }
     return null;

package/esm/ArcRenderer/ArcRenderer.d.ts

@@ -1,3 +1,3 @@
 import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-export default class extends FeatureRendererType {
+export default class ArcRenderer extends FeatureRendererType {
 }

package/esm/ArcRenderer/ArcRenderer.js

@@ -1,3 +1,3 @@
 import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-export default class extends FeatureRendererType {
+export default class ArcRenderer extends FeatureRendererType {
 }

package/esm/ArcRenderer/ArcRendering.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { Feature, Region } from '@jbrowse/core/util';
-declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }: {
+declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }: {
     features: Map<string, Feature>;
     config: AnyConfigurationModel;
     regions: Region[];
@@ -10,6 +10,7 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
     displayModel: {
         selectedFeatureId: string;
     };
+    onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
     exportSVG: boolean;
 }) => React.JSX.Element;
 export default ArcRendering;

package/esm/ArcRenderer/ArcRendering.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { readConfObject, } from '@jbrowse/core/configuration';
-import { bpSpanPx } from '@jbrowse/core/util';
+import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 // locals
 import ArcTooltip from '../ArcTooltip';
@@ -18,15 +18,15 @@ 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 t = 0.5;
     // formula: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves
+    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", { 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" }),
+        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 === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, featureId), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), 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)));
+        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)));
 }
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
@@ -68,16 +68,16 @@ function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClic
     const ref = React.createRef();
     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), onMouseOver: () => setIsMouseOvered(true), onMouseLeave: () => setIsMouseOvered(false), ref: ref, pointerEvents: "stroke" }),
+        React.createElement("path", { d: describeArc(left + (right - left) / 2, 0, (right - left) / 2, 90, 270), ...getStrokeProps(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)));
+        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)));
 }
-const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
+const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, onFeatureClick, displayModel: { selectedFeatureId }, }) {
     const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
     const semicircles = readConfObject(config, 'displayMode') === 'semicircles';
-    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, feature: f })) : (React.createElement(Arc, { key: f.id(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, feature: f })))));
+    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(), config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f })))));
 });
 function Wrapper({ exportSVG, width, height, children, }) {
     return exportSVG ? (children) : (React.createElement("svg", { width: width, height: height }, children));

package/esm/ArcRenderer/index.d.ts

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

package/esm/ArcRenderer/index.js

@@ -1,11 +1,11 @@
 import ReactComponent from './ArcRendering';
 import configSchema from './configSchema';
 import ArcRenderer from './ArcRenderer';
-export default (pluginManager) => {
+export default function ArcRendererF(pluginManager) {
     pluginManager.addRendererType(() => new ArcRenderer({
         name: 'ArcRenderer',
         ReactComponent,
         configSchema,
         pluginManager,
     }));
-};
+}

package/esm/ArcTooltip.js

@@ -31,6 +31,7 @@ const ArcTooltip = observer(function ({ contents }) {
     const { theme, classes } = useStyles();
     const { refs, floatingStyles, context } = useFloating({
         placement: 'right',
+        strategy: 'fixed',
     });
     const clientPoint = useClientPoint(context);
     const { getFloatingProps } = useInteractions([clientPoint]);

package/esm/LinearArcDisplay/index.d.ts

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

package/esm/LinearArcDisplay/index.js

@@ -2,7 +2,7 @@ import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { configSchemaFactory } from './configSchema';
 import { stateModelFactory } from './model';
-export default (pluginManager) => {
+export default function LinearArcDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);
         return new DisplayType({
@@ -15,4 +15,4 @@ export default (pluginManager) => {
             ReactComponent: BaseLinearDisplayComponent,
         });
     });
-};
+}

package/esm/LinearPairedArcDisplay/components/Arcs.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-import { getContainingView, getSession, } from '@jbrowse/core/util';
+import { getContainingView, getSession, getStrokeProps, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
 import ArcTooltip from '../../ArcTooltip';
 import { makeFeaturePair, makeSummary } from './util';
@@ -28,9 +28,9 @@ const Arc = observer(function ({ model, feature, alt, assembly, view, }) {
         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: 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,
+            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 !== undefined ? (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 !== undefined ? (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(ArcTooltip, { contents: makeSummary(feature, alt) })) : null)) : null;
     }
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-arc",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "JBrowse 2 arc adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3d43a820b9274a6160aa4dc15616147f390d9094"
+  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
 }