@jbrowse/plugin-arc 2.7.0 → 2.7.2

package/dist/ArcRenderer/ArcRendering.d.ts

@@ -1,3 +1,15 @@
 import React from 'react';
-declare const ArcRendering: (props: any) => React.JSX.Element;
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }: {
+    features: Map<string, Feature>;
+    config: AnyConfigurationModel;
+    regions: Region[];
+    bpPerPx: number;
+    height: number;
+    displayModel: {
+        selectedFeatureId: string;
+    };
+    exportSVG: boolean;
+}) => React.JSX.Element;
 export default ArcRendering;

package/dist/ArcRenderer/ArcRendering.js

@@ -8,54 +8,88 @@ 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");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ArcRendering = (0, mobx_react_1.observer)(function (props) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onClick = (event, id) => {
-        const { onFeatureClick: handler } = props;
-        if (!handler) {
-            return undefined;
-        }
-        return handler(event, id);
+function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    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 });
+    let textStroke = 'black';
+    if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
+        stroke = textStroke = 'red';
+    }
+    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 }) || 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 +
+        3 * ((1 - t) * (1 - t)) * (t * height) +
+        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("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)));
+}
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
     };
-    const { features, config, regions, blockKey, bpPerPx, displayModel: { selectedFeatureId }, } = props;
-    const [region] = regions;
-    const arcsRendered = [];
-    for (const feature of features.values()) {
-        const [left, right] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
-        const featureId = feature.id();
-        const id = blockKey + '-' + featureId;
-        let stroke = (0, configuration_1.readConfObject)(config, 'color', { feature });
-        let textStroke = 'black';
-        if (selectedFeatureId &&
-            String(selectedFeatureId) === String(feature.id())) {
-            stroke = textStroke = 'red';
-        }
-        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 }) || 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 +
-            3 * ((1 - t) * (1 - t)) * (t * height) +
-            3 * (1 - t) * (t * t) * height +
-            t * t * t * 0;
-        arcsRendered.push(react_1.default.createElement("g", { key: id, onClick: e => onClick(e, featureId) },
-            react_1.default.createElement("path", { id: id, d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onClick(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("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)));
+}
+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 SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    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 });
+    let textStroke = 'black';
+    if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
+        stroke = textStroke = 'red';
     }
+    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 }) || 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("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)));
+}
+const ArcRendering = (0, mobx_react_1.observer)(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
+    const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
-    const height = 500;
-    return (react_1.default.createElement("svg", { className: "ArcRendering", width: width, height: height, style: {
-            outline: 'none',
-            position: 'relative',
-        } }, arcsRendered));
+    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 })))));
 });
+function Wrapper({ exportSVG, width, height, children, }) {
+    return exportSVG ? (react_1.default.createElement(react_1.default.Fragment, null, children)) : (react_1.default.createElement("svg", { width: width, height: height }, children));
+}
 exports.default = ArcRendering;

package/dist/ArcRenderer/configSchema.d.ts

@@ -44,5 +44,14 @@ declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSche
         defaultValue: string;
         contextVariable: string[];
     };
+    /**
+     * #slot
+     */
+    displayMode: {
+        type: string;
+        defaultValue: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default ArcRenderer;

package/dist/ArcRenderer/configSchema.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const configuration_1 = require("@jbrowse/core/configuration");
+const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #config ArcRenderer
  */
@@ -51,5 +52,14 @@ const ArcRenderer = (0, configuration_1.ConfigurationSchema)('ArcRenderer', {
         defaultValue: `jexl:get(feature,'name')`,
         contextVariable: ['feature'],
     },
+    /**
+     * #slot
+     */
+    displayMode: {
+        type: 'enum',
+        defaultValue: 'arcs',
+        model: mobx_state_tree_1.types.enumeration('DisplayMode', ['arcs', 'semicircles']),
+        description: 'render semi-circles instead of arcs',
+    },
 }, { explicitlyTyped: true });
 exports.default = ArcRenderer;

package/dist/LinearArcDisplay/model.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+/**
+ * #stateModel LinearArcDisplay
+ * extends BaseLinearDisplay
+ */
 export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<string>;
@@ -59,7 +63,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -73,21 +79,36 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
+    /**
+     * #property
+     */
     type: import("mobx-state-tree").ISimpleType<"LinearArcDisplay">;
+    /**
+     * #property
+     */
     configuration: AnyConfigurationSchemaType;
+    /**
+     * #property
+     */
+    displayMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
     rendererTypeName: string;
     error: unknown;
     message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
+        /**
+         * #property
+         */
         model: {
             id: string;
             type: string;
@@ -143,7 +164,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     scrollTop: number;
 } & {
-    readonly height: number;
+    readonly height: number; /**
+     * #property
+     */
 } & {
     setScrollTop(scrollTop: number): void;
     setHeight(displayHeight: number): number;
@@ -157,7 +180,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
-    readonly maxAllowableBytes: number;
+    readonly maxAllowableBytes: number; /**
+     * #method
+     */
 } & {
     afterAttach(): void;
 } & {
@@ -207,10 +232,55 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
+    /**
+     * #getter
+     */
     readonly blockType: string;
+    /**
+     * #getter
+     */
     readonly renderDelay: number;
-    renderProps(): any;
+    /**
+     * #getter
+     */
     readonly rendererTypeName: any;
+} & {
+    /**
+     * #getter
+     */
+    readonly displayModeSetting: any;
+} & {
+    /**
+     * #getter
+     */
+    readonly rendererConfig: {
+        [x: string]: any;
+    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        setSubschema(slotName: string, data: unknown): any;
+    } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
+} & {
+    /**
+     * #method
+     */
+    renderProps(): any;
+} & {
+    /**
+     * #action
+     */
+    setDisplayMode(flag: string): void;
+} & {
+    /**
+     * #method
+     */
+    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        subMenu: {
+            type: string;
+            label: string;
+            onClick: () => void;
+            checked: boolean;
+        }[];
+    })[];
 }, {
     type: string;
 } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
@@ -272,7 +342,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -286,7 +358,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];

package/dist/LinearArcDisplay/model.js

@@ -4,30 +4,120 @@ exports.stateModelFactory = void 0;
 const configuration_1 = require("@jbrowse/core/configuration");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const util_1 = require("@jbrowse/core/util");
+/**
+ * #stateModel LinearArcDisplay
+ * extends BaseLinearDisplay
+ */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
         .compose('LinearArcDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
         type: mobx_state_tree_1.types.literal('LinearArcDisplay'),
+        /**
+         * #property
+         */
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        /**
+         * #property
+         */
+        displayMode: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get blockType() {
+            return 'staticBlocks';
+        },
+        /**
+         * #getter
+         */
+        get renderDelay() {
+            return 500;
+        },
+        /**
+         * #getter
+         */
+        get rendererTypeName() {
+            return self.configuration.renderer.type;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get displayModeSetting() {
+            var _a;
+            return (_a = self.displayMode) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, ['renderer', 'displayMode']);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const configBlob = (0, configuration_1.getConf)(self, ['renderer']) || {};
+            const config = configBlob;
+            return self.rendererType.configSchema.create({
+                ...config,
+                displayMode: self.displayModeSetting,
+            }, (0, util_1.getEnv)(self));
+        },
     }))
         .views(self => {
         const { renderProps: superRenderProps } = self;
         return {
-            get blockType() {
-                return 'staticBlocks';
-            },
-            get renderDelay() {
-                return 500;
-            },
+            /**
+             * #method
+             */
             renderProps() {
                 return {
                     ...superRenderProps(),
                     rpcDriverName: self.rpcDriverName,
-                    config: self.configuration.renderer,
+                    config: self.rendererConfig,
+                    height: self.height,
                 };
             },
-            get rendererTypeName() {
-                return self.configuration.renderer.type;
+        };
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setDisplayMode(flag) {
+            self.displayMode = flag;
+        },
+    }))
+        .views(self => {
+        const superMenuItems = self.trackMenuItems;
+        return {
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superMenuItems(),
+                    {
+                        label: 'Display mode',
+                        subMenu: [
+                            {
+                                type: 'radio',
+                                label: 'Arcs',
+                                onClick: () => self.setDisplayMode('arcs'),
+                                checked: self.displayMode === 'arcs',
+                            },
+                            {
+                                type: 'radio',
+                                label: 'Semi-circles',
+                                onClick: () => self.setDisplayMode('semicircles'),
+                                checked: self.displayMode === 'semicircles',
+                            },
+                        ],
+                    },
+                ];
             },
         };
     });

package/esm/ArcRenderer/ArcRendering.d.ts

@@ -1,3 +1,15 @@
 import React from 'react';
-declare const ArcRendering: (props: any) => React.JSX.Element;
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+declare const ArcRendering: ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }: {
+    features: Map<string, Feature>;
+    config: AnyConfigurationModel;
+    regions: Region[];
+    bpPerPx: number;
+    height: number;
+    displayModel: {
+        selectedFeatureId: string;
+    };
+    exportSVG: boolean;
+}) => React.JSX.Element;
 export default ArcRendering;

package/esm/ArcRenderer/ArcRendering.js

@@ -1,56 +1,90 @@
 import React from 'react';
-import { readConfObject } from '@jbrowse/core/configuration';
+import { readConfObject, } from '@jbrowse/core/configuration';
 import { bpSpanPx, measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { Tooltip } from 'react-svg-tooltip';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ArcRendering = observer(function (props) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onClick = (event, id) => {
-        const { onFeatureClick: handler } = props;
-        if (!handler) {
-            return undefined;
-        }
-        return handler(event, id);
+function Arc({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
+    const featureId = feature.id();
+    let stroke = readConfObject(config, 'color', { feature });
+    let textStroke = 'black';
+    if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
+        stroke = textStroke = 'red';
+    }
+    const label = readConfObject(config, 'label', { feature });
+    const caption = readConfObject(config, 'caption', { feature });
+    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 +
+        3 * ((1 - t) * (1 - t)) * (t * height) +
+        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("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)));
+}
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
     };
-    const { features, config, regions, blockKey, bpPerPx, displayModel: { selectedFeatureId }, } = props;
-    const [region] = regions;
-    const arcsRendered = [];
-    for (const feature of features.values()) {
-        const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
-        const featureId = feature.id();
-        const id = blockKey + '-' + featureId;
-        let stroke = readConfObject(config, 'color', { feature });
-        let textStroke = 'black';
-        if (selectedFeatureId &&
-            String(selectedFeatureId) === String(feature.id())) {
-            stroke = textStroke = 'red';
-        }
-        const label = readConfObject(config, 'label', { feature });
-        const caption = readConfObject(config, 'caption', { feature });
-        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 +
-            3 * ((1 - t) * (1 - t)) * (t * height) +
-            3 * (1 - t) * (t * t) * height +
-            t * t * t * 0;
-        arcsRendered.push(React.createElement("g", { key: id, onClick: e => onClick(e, featureId) },
-            React.createElement("path", { id: id, d: `M ${left} 0 C ${left} ${height}, ${right} ${height}, ${right} 0`, stroke: stroke, strokeWidth: strokeWidth, fill: "transparent", onClick: e => onClick(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("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)));
+}
+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 SemiCircles({ selectedFeatureId, region, bpPerPx, config, onFeatureClick, feature, }) {
+    const [left, right] = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx);
+    const featureId = feature.id();
+    let stroke = readConfObject(config, 'color', { feature });
+    let textStroke = 'black';
+    if (selectedFeatureId && String(selectedFeatureId) === String(feature.id())) {
+        stroke = textStroke = 'red';
     }
+    const label = readConfObject(config, 'label', { feature });
+    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("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)));
+}
+const ArcRendering = observer(function ({ features, config, regions, bpPerPx, height, exportSVG, displayModel: { selectedFeatureId }, }) {
+    const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
-    const height = 500;
-    return (React.createElement("svg", { className: "ArcRendering", width: width, height: height, style: {
-            outline: 'none',
-            position: 'relative',
-        } }, arcsRendered));
+    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 })))));
 });
+function Wrapper({ exportSVG, width, height, children, }) {
+    return exportSVG ? (React.createElement(React.Fragment, null, children)) : (React.createElement("svg", { width: width, height: height }, children));
+}
 export default ArcRendering;

package/esm/ArcRenderer/configSchema.d.ts

@@ -44,5 +44,14 @@ declare const ArcRenderer: import("@jbrowse/core/configuration/configurationSche
         defaultValue: string;
         contextVariable: string[];
     };
+    /**
+     * #slot
+     */
+    displayMode: {
+        type: string;
+        defaultValue: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default ArcRenderer;

package/esm/ArcRenderer/configSchema.js

@@ -1,4 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from 'mobx-state-tree';
 /**
  * #config ArcRenderer
  */
@@ -49,5 +50,14 @@ const ArcRenderer = ConfigurationSchema('ArcRenderer', {
         defaultValue: `jexl:get(feature,'name')`,
         contextVariable: ['feature'],
     },
+    /**
+     * #slot
+     */
+    displayMode: {
+        type: 'enum',
+        defaultValue: 'arcs',
+        model: types.enumeration('DisplayMode', ['arcs', 'semicircles']),
+        description: 'render semi-circles instead of arcs',
+    },
 }, { explicitlyTyped: true });
 export default ArcRenderer;

package/esm/LinearArcDisplay/model.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+/**
+ * #stateModel LinearArcDisplay
+ * extends BaseLinearDisplay
+ */
 export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<string>;
@@ -59,7 +63,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -73,21 +79,36 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
+    /**
+     * #property
+     */
     type: import("mobx-state-tree").ISimpleType<"LinearArcDisplay">;
+    /**
+     * #property
+     */
     configuration: AnyConfigurationSchemaType;
+    /**
+     * #property
+     */
+    displayMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
     rendererTypeName: string;
     error: unknown;
     message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
+        /**
+         * #property
+         */
         model: {
             id: string;
             type: string;
@@ -143,7 +164,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     scrollTop: number;
 } & {
-    readonly height: number;
+    readonly height: number; /**
+     * #property
+     */
 } & {
     setScrollTop(scrollTop: number): void;
     setHeight(displayHeight: number): number;
@@ -157,7 +180,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
-    readonly maxAllowableBytes: number;
+    readonly maxAllowableBytes: number; /**
+     * #method
+     */
 } & {
     afterAttach(): void;
 } & {
@@ -207,10 +232,55 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
     afterAttach(): void;
 } & {
+    /**
+     * #getter
+     */
     readonly blockType: string;
+    /**
+     * #getter
+     */
     readonly renderDelay: number;
-    renderProps(): any;
+    /**
+     * #getter
+     */
     readonly rendererTypeName: any;
+} & {
+    /**
+     * #getter
+     */
+    readonly displayModeSetting: any;
+} & {
+    /**
+     * #getter
+     */
+    readonly rendererConfig: {
+        [x: string]: any;
+    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        setSubschema(slotName: string, data: unknown): any;
+    } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
+} & {
+    /**
+     * #method
+     */
+    renderProps(): any;
+} & {
+    /**
+     * #action
+     */
+    setDisplayMode(flag: string): void;
+} & {
+    /**
+     * #method
+     */
+    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        subMenu: {
+            type: string;
+            label: string;
+            onClick: () => void;
+            checked: boolean;
+        }[];
+    })[];
 }, {
     type: string;
 } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
@@ -272,7 +342,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
-            description: string;
+            description: string; /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -286,7 +358,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];

package/esm/LinearArcDisplay/model.js

@@ -1,30 +1,120 @@
-import { ConfigurationReference, } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf, } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
 import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
+import { getEnv } from '@jbrowse/core/util';
+/**
+ * #stateModel LinearArcDisplay
+ * extends BaseLinearDisplay
+ */
 export function stateModelFactory(configSchema) {
     return types
         .compose('LinearArcDisplay', BaseLinearDisplay, types.model({
+        /**
+         * #property
+         */
         type: types.literal('LinearArcDisplay'),
+        /**
+         * #property
+         */
         configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        displayMode: types.maybe(types.string),
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get blockType() {
+            return 'staticBlocks';
+        },
+        /**
+         * #getter
+         */
+        get renderDelay() {
+            return 500;
+        },
+        /**
+         * #getter
+         */
+        get rendererTypeName() {
+            return self.configuration.renderer.type;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get displayModeSetting() {
+            var _a;
+            return (_a = self.displayMode) !== null && _a !== void 0 ? _a : getConf(self, ['renderer', 'displayMode']);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const configBlob = getConf(self, ['renderer']) || {};
+            const config = configBlob;
+            return self.rendererType.configSchema.create({
+                ...config,
+                displayMode: self.displayModeSetting,
+            }, getEnv(self));
+        },
     }))
         .views(self => {
         const { renderProps: superRenderProps } = self;
         return {
-            get blockType() {
-                return 'staticBlocks';
-            },
-            get renderDelay() {
-                return 500;
-            },
+            /**
+             * #method
+             */
             renderProps() {
                 return {
                     ...superRenderProps(),
                     rpcDriverName: self.rpcDriverName,
-                    config: self.configuration.renderer,
+                    config: self.rendererConfig,
+                    height: self.height,
                 };
             },
-            get rendererTypeName() {
-                return self.configuration.renderer.type;
+        };
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setDisplayMode(flag) {
+            self.displayMode = flag;
+        },
+    }))
+        .views(self => {
+        const superMenuItems = self.trackMenuItems;
+        return {
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superMenuItems(),
+                    {
+                        label: 'Display mode',
+                        subMenu: [
+                            {
+                                type: 'radio',
+                                label: 'Arcs',
+                                onClick: () => self.setDisplayMode('arcs'),
+                                checked: self.displayMode === 'arcs',
+                            },
+                            {
+                                type: 'radio',
+                                label: 'Semi-circles',
+                                onClick: () => self.setDisplayMode('semicircles'),
+                                checked: self.displayMode === 'semicircles',
+                            },
+                        ],
+                    },
+                ];
             },
         };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-arc",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "description": "JBrowse 2 arc adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
+  "gitHead": "9052b295f2d322e729254457ed9fe2231fb22cce"
 }