@jbrowse/plugin-arc 3.6.5 → 4.0.0

package/esm/ArcRenderer/ArcRendering.d.ts

@@ -11,5 +11,5 @@ declare const ArcRendering: ({ features, config, regions, bpPerPx, height, expor
     };
     onFeatureClick: (event: React.MouseEvent, featureId: string) => void;
     exportSVG: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export default ArcRendering;

package/esm/ArcRenderer/ArcRendering.js

@@ -1,32 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useRef, useState } from 'react';
+import { Suspense, lazy, useState } from 'react';
 import { readConfObject } from '@jbrowse/core/configuration';
 import { bpSpanPx, getStrokeProps } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-const ArcTooltip = lazy(() => import('../ArcTooltip'));
-function Arc({ selectedFeatureId, region, bpPerPx, config, height: displayHeight, feature, onFeatureClick, }) {
-    const [isMouseOvered, setIsMouseOvered] = useState(false);
-    const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
-    const featureId = feature.id();
-    const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
-    const stroke = selected ? 'red' : readConfObject(config, 'color', { feature });
-    const textStroke = selected ? 'red' : 'black';
-    const label = readConfObject(config, 'label', { feature });
-    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 = useRef(null);
-    const t = 0.5;
-    const t1 = 1 - t;
-    const textYCoord = 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height;
-    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 })] }));
-}
+const ArcTooltip = lazy(() => import("../ArcTooltip.js"));
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
     return {
@@ -34,52 +11,52 @@ function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
         y: centerY + radius * Math.sin(angleInRadians),
     };
 }
-function describeArc(x, y, radius, startAngle, endAngle) {
-    const start = polarToCartesian(x, y, radius, endAngle);
-    const end = polarToCartesian(x, y, radius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return [
-        'M',
-        start.x,
-        start.y,
-        'A',
-        radius,
-        radius,
-        0,
-        largeArcFlag,
-        0,
-        end.x,
-        end.y,
-    ].join(' ');
+function getSemicirclePath(centerX, radius) {
+    const start = polarToCartesian(centerX, 0, radius, 270);
+    const end = polarToCartesian(centerX, 0, radius, 90);
+    return {
+        d: `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 0 ${end.x} ${end.y}`,
+        textYCoord: radius,
+    };
+}
+function getBezierPath(left, right, config, feature, displayHeight) {
+    const height = Math.min(readConfObject(config, 'height', { feature }) || 100, displayHeight);
+    const t = 0.5;
+    const t1 = 1 - t;
+    return {
+        d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`,
+        textYCoord: 3 * (t1 * t1) * (t * height) + 3 * t1 * (t * t) * height,
+    };
 }
-function SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+function ArcFeature({ selectedFeatureId, region, bpPerPx, config, displayHeight, feature, semicircle, onFeatureClick, }) {
     const [isMouseOvered, setIsMouseOvered] = useState(false);
     const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
     const featureId = feature.id();
-    const selected = selectedFeatureId && String(selectedFeatureId) === String(feature.id());
+    const selected = selectedFeatureId === featureId;
     const stroke = selected ? 'red' : readConfObject(config, 'color', { feature });
     const textStroke = selected ? 'red' : 'black';
     const label = readConfObject(config, 'label', { feature });
     const caption = readConfObject(config, 'caption', { feature });
     const strokeWidth = readConfObject(config, 'thickness', { feature }) || 2;
-    const ref = useRef(null);
-    const textYCoord = (right - left) / 2;
-    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 => {
+    const centerX = left + (right - left) / 2;
+    const radius = (right - left) / 2;
+    const { d, textYCoord } = semicircle
+        ? getSemicirclePath(centerX, radius)
+        : getBezierPath(left, right, config, feature, displayHeight);
+    return (_jsxs("g", { children: [_jsx("path", { ...getStrokeProps(stroke), d: d, strokeWidth: strokeWidth, fill: "transparent", style: { cursor: 'pointer' }, 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 })] }));
+                }, pointerEvents: "stroke" }), isMouseOvered ? (_jsx(Suspense, { fallback: null, children: _jsx(ArcTooltip, { contents: caption }) })) : null, _jsx("text", { x: centerX, y: textYCoord + 3, stroke: "white", strokeWidth: "0.6em", children: label }), _jsx("text", { x: centerX, y: textYCoord + 3, stroke: textStroke, children: label })] }));
 }
-const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel, onFeatureClick, }) {
+const ArcRendering = observer(function ArcRendering({ 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 semicircle = readConfObject(config, 'displayMode') === 'semicircles';
     const { selectedFeatureId } = displayModel || {};
-    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, }) {
+    const children = [...features.values()].map(f => (_jsx(ArcFeature, { displayHeight: height, config: config, region: region, bpPerPx: bpPerPx, selectedFeatureId: selectedFeatureId, onFeatureClick: onFeatureClick, feature: f, semicircle: semicircle }, f.id())));
     return exportSVG ? (children) : (_jsx("svg", { width: width, height: height, children: children }));
-}
+});
 export default ArcRendering;

package/esm/ArcRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const ArcRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -32,8 +32,8 @@ declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSche
     displayMode: {
         type: string;
         defaultValue: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default ArcRenderer;

package/esm/ArcRenderer/configSchema.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { types } from 'mobx-state-tree';
+import { types } from '@jbrowse/mobx-state-tree';
 function x() { }
 const ArcRenderer = ConfigurationSchema('ArcRenderer', {
     color: {

package/esm/ArcRenderer/index.js

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

package/esm/ArcTooltip.d.ts

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

package/esm/ArcTooltip.js

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 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 }) {
+const ArcTooltip = observer(function ArcTooltip({ contents, }) {
     return contents ? (_jsx(Suspense, { fallback: null, children: _jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) }) })) : null;
 });
 export default ArcTooltip;

package/esm/LinearArcDisplay/configSchema.d.ts

@@ -1,7 +1,7 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IAnyModelType, [undefined]>;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+export declare function configSchemaFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+    renderer: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IAnyModelType, [undefined]>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -28,4 +28,4 @@ export declare function configSchemaFactory(pluginManager: PluginManager): impor
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/LinearArcDisplay/configSchema.js

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from '@jbrowse/mobx-state-tree';
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
-import { types } from 'mobx-state-tree';
 export function configSchemaFactory(pluginManager) {
     return ConfigurationSchema('LinearArcDisplay', {
         renderer: types.optional(pluginManager.pluggableConfigSchemaType('renderer'), { type: 'ArcRenderer' }),

package/esm/LinearArcDisplay/index.js

@@ -1,7 +1,7 @@
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
-import { configSchemaFactory } from './configSchema';
-import { stateModelFactory } from './model';
+import { configSchemaFactory } from "./configSchema.js";
+import { stateModelFactory } from "./model.js";
 export default function LinearArcDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);