@jbrowse/plugin-arc 2.6.1

package/esm/LinearArcDisplay/index.d.ts

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

package/esm/LinearArcDisplay/index.js

@@ -0,0 +1,19 @@
+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) => {
+    pluginManager.addDisplayType(() => {
+        const configSchema = configSchemaFactory(pluginManager);
+        return new DisplayType({
+            name: 'LinearArcDisplay',
+            displayName: 'Arc display',
+            configSchema,
+            stateModel: stateModelFactory(configSchema),
+            trackType: 'FeatureTrack',
+            viewType: 'LinearGenomeView',
+            ReactComponent: BaseLinearDisplayComponent,
+        });
+    });
+};
+//# sourceMappingURL=index.js.map

package/esm/LinearArcDisplay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/LinearArcDisplay/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAA;AAE/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAe,CAAC,aAA4B,EAAE,EAAE;IAC9C,aAAa,CAAC,cAAc,CAAC,GAAG,EAAE;QAChC,MAAM,YAAY,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAA;QACvD,OAAO,IAAI,WAAW,CAAC;YACrB,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,aAAa;YAC1B,YAAY;YACZ,UAAU,EAAE,iBAAiB,CAAC,YAAY,CAAC;YAC3C,SAAS,EAAE,cAAc;YACzB,QAAQ,EAAE,kBAAkB;YAC5B,cAAc,EAAE,0BAA0B;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/esm/LinearArcDisplay/model.d.ts

@@ -0,0 +1,303 @@
+/// <reference types="react" />
+import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+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>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IModelType<{
+            refName: import("mobx-state-tree").ISimpleType<string>;
+            start: import("mobx-state-tree").ISimpleType<number>;
+            end: import("mobx-state-tree").ISimpleType<number>;
+            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        } & {
+            assemblyName: import("mobx-state-tree").ISimpleType<string>;
+        }, {
+            setRefName(newRefName: string): void;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        renderInProgress: AbortController | undefined;
+        filled: boolean;
+        reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: any;
+        }) => any;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(abortController: AbortController): void;
+        setMessage(messageText: string): void;
+        setRendered(props: {
+            reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            features: Map<string, import("@jbrowse/core/util").Feature>;
+            layout: any;
+            maxHeightReached: boolean;
+            renderProps: any;
+        } | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+} & {
+    type: import("mobx-state-tree").ISimpleType<"LinearArcDisplay">;
+    configuration: AnyConfigurationSchemaType;
+}, {
+    rendererTypeName: string;
+    error: unknown;
+    message: string | undefined;
+} & {
+    readonly RenderingComponent: import("react").FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<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>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll?: Function | undefined;
+        blockState?: Record<string, any> | undefined;
+    }>;
+    readonly DisplayBlurb: import("react").FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<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>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    }> | null;
+    readonly adapterConfig: any;
+    readonly parentTrack: any;
+    renderProps(): any;
+    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+    regionCannotBeRendered(): null;
+} & {
+    setMessage(arg?: string | undefined): void;
+    setError(error?: unknown): void;
+    setRpcDriverName(rpcDriverName: string): void;
+    reload(): void;
+} & {
+    scrollTop: number;
+} & {
+    readonly height: number;
+} & {
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
+    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
+    featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+    currStatsBpPerPx: number;
+} & {
+    readonly currentBytesRequested: number;
+    readonly currentFeatureScreenDensity: number;
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
+    readonly maxAllowableBytes: number;
+} & {
+    afterAttach(): void;
+} & {
+    setCurrStatsBpPerPx(n: number): void;
+    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    clearFeatureDensityStats(): void;
+} & {
+    readonly regionTooLarge: boolean;
+    readonly regionTooLargeReason: string;
+} & {
+    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+} & {
+    featureIdUnderMouse: string | undefined;
+    contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
+} & {
+    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
+} & {
+    readonly renderDelay: number;
+    readonly TooltipComponent: import("react").FC<any>;
+    readonly selectedFeatureId: string | undefined;
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
+} & {
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
+    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
+    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
+    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+} & {
+    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
+    deleteBlock(key: string): void;
+    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
+    clearFeatureSelection(): void;
+    setFeatureIdUnderMouse(feature?: string | undefined): void;
+    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
+} & {
+    reload(): Promise<void>;
+} & {
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    renderProps(): any;
+} & {
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    afterAttach(): void;
+} & {
+    readonly blockType: string;
+    readonly renderDelay: number;
+    renderProps(): any;
+    readonly rendererTypeName: any;
+}, {
+    type: string;
+} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IModelType<{
+            refName: import("mobx-state-tree").ISimpleType<string>;
+            start: import("mobx-state-tree").ISimpleType<number>;
+            end: import("mobx-state-tree").ISimpleType<number>;
+            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        } & {
+            assemblyName: import("mobx-state-tree").ISimpleType<string>;
+        }, {
+            setRefName(newRefName: string): void;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        renderInProgress: AbortController | undefined;
+        filled: boolean;
+        reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: any;
+        }) => any;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(abortController: AbortController): void;
+        setMessage(messageText: string): void;
+        setRendered(props: {
+            reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            features: Map<string, import("@jbrowse/core/util").Feature>;
+            layout: any;
+            maxHeightReached: boolean;
+            renderProps: any;
+        } | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
+    type: string;
+    id: string;
+    configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
+    rpcDriverName: string | undefined;
+    heightPreConfig: number | undefined;
+    userBpPerPxLimit: number | undefined;
+    userByteSizeLimit: number | undefined;
+} & import("mobx-state-tree")._NotCustomized>;

package/esm/LinearArcDisplay/model.js

@@ -0,0 +1,32 @@
+import { ConfigurationReference, } from '@jbrowse/core/configuration';
+import { types } from 'mobx-state-tree';
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
+export function stateModelFactory(configSchema) {
+    return types
+        .compose('LinearArcDisplay', BaseLinearDisplay, types.model({
+        type: types.literal('LinearArcDisplay'),
+        configuration: ConfigurationReference(configSchema),
+    }))
+        .views(self => {
+        const { renderProps: superRenderProps } = self;
+        return {
+            get blockType() {
+                return 'staticBlocks';
+            },
+            get renderDelay() {
+                return 500;
+            },
+            renderProps() {
+                return {
+                    ...superRenderProps(),
+                    rpcDriverName: self.rpcDriverName,
+                    config: self.configuration.renderer,
+                };
+            },
+            get rendererTypeName() {
+                return self.configuration.renderer.type;
+            },
+        };
+    });
+}
+//# sourceMappingURL=model.js.map

package/esm/LinearArcDisplay/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/LinearArcDisplay/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,GACvB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AAEtE,MAAM,UAAU,iBAAiB,CAAC,YAAwC;IACxE,OAAO,KAAK;SACT,OAAO,CACN,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,CAAC,KAAK,CAAC;QACV,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QACvC,aAAa,EAAE,sBAAsB,CAAC,YAAY,CAAC;KACpD,CAAC,CACH;SAEA,KAAK,CAAC,IAAI,CAAC,EAAE;QACZ,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAA;QAC9C,OAAO;YACL,IAAI,SAAS;gBACX,OAAO,cAAc,CAAA;YACvB,CAAC;YACD,IAAI,WAAW;gBACb,OAAO,GAAG,CAAA;YACZ,CAAC;YACD,WAAW;gBACT,OAAO;oBACL,GAAG,gBAAgB,EAAE;oBACrB,aAAa,EAAE,IAAI,CAAC,aAAa;oBACjC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ;iBACpC,CAAA;YACH,CAAC;YACD,IAAI,gBAAgB;gBAClB,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAA;YACzC,CAAC;SACF,CAAA;IACH,CAAC,CAAC,CAAA;AACN,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,6 @@
+import Plugin from '@jbrowse/core/Plugin';
+import PluginManager from '@jbrowse/core/PluginManager';
+export default class ArcPlugin extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+}

package/esm/index.js

@@ -0,0 +1,17 @@
+import Plugin from '@jbrowse/core/Plugin';
+import LinearArcDisplayF from './LinearArcDisplay';
+import ArcRendererF from './ArcRenderer';
+export default class ArcPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'ArcRenderer';
+    }
+    install(pluginManager) {
+        ArcRendererF(pluginManager);
+        LinearArcDisplayF(pluginManager);
+        pluginManager.jexl.addFunction('logThickness', (feature, attributeName) => {
+            return Math.log(feature.get(attributeName) + 1);
+        });
+    }
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,iBAAiB,MAAM,oBAAoB,CAAA;AAClD,OAAO,YAAY,MAAM,eAAe,CAAA;AAGxC,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,MAAM;IAA7C;;QACE,SAAI,GAAG,aAAa,CAAA;IAYtB,CAAC;IAXC,OAAO,CAAC,aAA4B;QAClC,YAAY,CAAC,aAAa,CAAC,CAAA;QAC3B,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAEhC,aAAa,CAAC,IAAI,CAAC,WAAW,CAC5B,cAAc,EACd,CAAC,OAAgB,EAAE,aAAqB,EAAE,EAAE;YAC1C,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAA;QACjD,CAAC,CACF,CAAA;IACH,CAAC;CACF"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@jbrowse/plugin-arc",
+  "version": "2.6.1",
+  "description": "JBrowse 2 arc adapters, tracks, etc.",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/arc"
+  },
+  "author": "JBrowse Team",
+  "distMain": "dist/index.js",
+  "srcMain": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "esm"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "test": "cd ../..; jest plugins/arc",
+    "prepublishOnly": "yarn test",
+    "prepack": "yarn build && yarn useDist",
+    "postpack": "yarn useSrc",
+    "useDist": "node ../../scripts/useDist.js",
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.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",
+    "@jbrowse/plugin-wiggle": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "rxjs": "^7.0.0"
+  },
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
+}

package/src/ArcRenderer/ArcRenderer.ts

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

package/src/ArcRenderer/ArcRendering.test.tsx

@@ -0,0 +1,45 @@
+import SimpleFeature from '@jbrowse/core/util/simpleFeature'
+import React from 'react'
+import { render } from '@testing-library/react'
+import Rendering from './ArcRendering'
+
+test('no features', () => {
+  const { container } = render(
+    <Rendering
+      width={500}
+      height={500}
+      regions={[{ refName: 'zonk', start: 0, end: 300 }]}
+      blockKey={1}
+      config={{}}
+      bpPerPx={3}
+      displayModel={{}}
+      features={new Map()}
+    />,
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('one feature', () => {
+  const { container } = render(
+    <Rendering
+      width={500}
+      height={500}
+      regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
+      blockKey={1}
+      features={
+        new Map([
+          [
+            'one',
+            new SimpleFeature({ uniqueId: 'one', score: 10, start: 1, end: 3 }),
+          ],
+        ])
+      }
+      config={{ type: 'DummyRenderer' }}
+      bpPerPx={3}
+      displayModel={{}}
+    />,
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
+})

package/src/ArcRenderer/ArcRendering.tsx

@@ -0,0 +1,131 @@
+import React from 'react'
+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
+function ArcRendering(props: any) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onClick = (event: any, id: any) => {
+    const { onFeatureClick: handler } = props
+    if (!handler) {
+      return undefined
+    }
+    return handler(event, id)
+  }
+
+  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<SVGPathElement>()
+    const tooltipWidth = 20 + measureText(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(
+      <g key={id} onClick={e => onClick(e, featureId)}>
+        <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"
+        />
+        <Tooltip triggerRef={ref}>
+          <rect
+            x={12}
+            y={0}
+            width={tooltipWidth}
+            height={20}
+            rx={5}
+            ry={5}
+            fill="black"
+            fillOpacity="50%"
+          />
+          <text
+            x={22}
+            y={14}
+            fontSize={10}
+            fill="white"
+            textLength={tooltipWidth - 20}
+          >
+            {caption}
+          </text>
+        </Tooltip>
+        <text
+          x={left + (right - left) / 2}
+          y={textYCoord + 3}
+          style={{ stroke: 'white', strokeWidth: '0.6em' }}
+        >
+          {label}
+        </text>
+        <text
+          x={left + (right - left) / 2}
+          y={textYCoord + 3}
+          style={{ stroke: textStroke }}
+        >
+          {label}
+        </text>
+      </g>,
+    )
+  }
+
+  const width = (region.end - region.start) / bpPerPx
+  const height = 500
+
+  return (
+    <svg
+      className="ArcRendering"
+      width={width}
+      height={height}
+      style={{
+        outline: 'none',
+        position: 'relative',
+      }}
+    >
+      {arcsRendered}
+    </svg>
+  )
+}
+
+export default observer(ArcRendering)