@jbrowse/plugin-circular-view 2.17.0 → 3.0.0

package/dist/CircularView/{models/viewportVisibleRegion.js → viewportVisibleRegion.js}

@@ -53,26 +53,21 @@ function thetaRangesOverlap(r1start, r1length, r2start, r2length) {
     if (r1length + 0.0001 >= twoPi || r2length + 0.0001 >= twoPi) {
         return true;
     }
-    // put both range starts between 2π and 4π
     r1start = (((r1start % twoPi) + twoPi) % twoPi) + twoPi;
     r2start = (((r2start % twoPi) + twoPi) % twoPi) + twoPi;
     if (r1start < r2start + r2length && r1start + r1length > r2start) {
         return true;
     }
-    // move r2 2π to the left and check
     r2start -= twoPi;
     if (r1start < r2start + r2length && r1start + r1length > r2start) {
         return true;
     }
-    // move it 2π to the right and check
     r2start += twoPi + twoPi;
     return r1start < r2start + r2length && r1start + r1length > r2start;
 }
-// return which arc range has any part of the circle visible in the viewport
 function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
     let [viewL, viewR, viewT, viewB] = viewSides;
     const [cx, cy] = circleCenter;
-    // transform coordinate system to center of circle
     viewL -= cx;
     viewR -= cx;
     viewT -= cy;
@@ -97,61 +92,6 @@ function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
             theta: [0, 2 * Math.PI],
         };
     }
-    // const viewportCompletelyContainsCircle =
-    //   circleCenter[0] - viewL >= circleRadius &&
-    //   viewR - circleCenter[0] >= circleRadius &&
-    //   circleCenter[1] - viewT >= circleRadius &&
-    //   viewB - circleCenter[1] >= circleRadius
-    // if (viewportCompletelyContainsCircle) {
-    //   return [0, 2 * Math.PI]
-    // }
-    // const distToCenterSquared = ([x, y]) => {
-    //   const [cx, cy] = circleCenter
-    //   const sq = n => n * n
-    //   return sq(x - cx) + sq(y - cy)
-    // }
-    // const circleRadiusSquared = circleRadius * circleRadius
-    // const tlInside = distToCenterSquared([viewL, viewT]) <= circleRadiusSquared
-    // const trInside = distToCenterSquared([viewR, viewT]) <= circleRadiusSquared
-    // const blInside = distToCenterSquared([viewL, viewB]) <= circleRadiusSquared
-    // const brInside = distToCenterSquared([viewR, viewB]) <= circleRadiusSquared
-    // const noIntersection = !tlInside && !trInside && !blInside && !brInside
-    // if (noIntersection) return undefined
-    // const circleCompletelyContainsViewport =
-    //   tlInside && trInside && blInside && brInside
-    // if (circleCompletelyContainsViewport) {
-    //   // viewport is in the circle, but the center is not in it, so take max
-    //   // and min of thetas to the center
-    //   const thetas = [
-    //     Math.atan(viewT / viewL),
-    //     Math.atan(viewT / viewR),
-    //     Math.atan(viewB / viewL),
-    //     Math.atan(viewB / viewR),
-    //   ]
-    //   return [Math.min(...thetas), Math.max(...thetas)]
-    // }
-    // if we get here, the viewport is partly in, partly out of the circle
-    // const viewLIntersects = Math.abs(viewL - circleCenter[0]) <= circleRadius
-    // const viewRIntersects = Math.abs(viewR - circleCenter[0]) <= circleRadius
-    // const viewTIntersects = Math.abs(viewT - circleCenter[1]) <= circleRadius
-    // const viewBIntersects = Math.abs(viewB - circleCenter[1]) <= circleRadius
-    // const numIntersectingSides =
-    //   Number(viewLIntersects) +
-    //   Number(viewRIntersects) +
-    //   Number(viewTIntersects) +
-    //   Number(viewBIntersects)
-    // if (numIntersectingSides === 4) return [0, 2 * Math.PI]
-    // if (numIntersectingSides === 3) {
-    //   // TODO calculate the thetas of the
-    // } else if (numIntersectingSides === 2) {
-    //   // TODO calculate the thetas of the 2 intersection points
-    // } else if (numIntersectingSides === 1) {
-    //   // TODO calculate the thetas of the 1-2 intersection points of the line, and the angle between
-    // }
-    // make a list of vertices-of-interest that lie inside both shapes to examine
-    // to determine the range covered by their intersection
-    // transform coordinates to have the circle as the origin and find the intersections
-    // of the circle and the view rectangle
     const vertices = [
         [viewL, viewT],
         [viewR, viewT],
@@ -162,7 +102,6 @@ function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
     findCircleIntersectionY(viewR, 0, 0, circleRadius, vertices);
     findCircleIntersectionX(viewT, 0, 0, circleRadius, vertices);
     findCircleIntersectionX(viewB, 0, 0, circleRadius, vertices);
-    // for each edge, also look at the closest point to center if it is inside the circle
     if (-viewL < circleRadius) {
         vertices.push([viewL, 0]);
     }
@@ -175,24 +114,15 @@ function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
     if (viewB < circleRadius) {
         vertices.push([0, viewB]);
     }
-    // const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
-    // now convert them all to polar and take the max and min of rho and theta
-    // const viewportCenterTheta = cartesianToTheta(viewR + viewL, viewT + viewB)
     const reflect = viewL >= 0 ? -1 : 1;
-    // viewportCenterTheta < Math.PI / 2 || viewportCenterTheta > 1.5 * Math.PI
-    //   ? -1
-    //   : 1
     let rhoMin = Number.POSITIVE_INFINITY;
     let rhoMax = Number.NEGATIVE_INFINITY;
     let thetaMin = Number.POSITIVE_INFINITY;
     let thetaMax = Number.NEGATIVE_INFINITY;
     for (const [vx, vy] of vertices) {
-        // ignore vertex if outside the viewport
         if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
             const [rho, theta] = cartesianToPolar(vx * reflect, vy * reflect);
-            // ignore vertex if outside the circle
             if (rho <= circleRadius + 0.001) {
-                // ignore theta if rho is 0
                 if (theta < thetaMin && rho > 0.0001) {
                     thetaMin = theta;
                 }

package/dist/LaunchCircularView/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LaunchCircularViewF(pluginManager: PluginManager): void;

package/dist/LaunchCircularView/index.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LaunchCircularViewF;
 const mobx_1 = require("mobx");
 function LaunchCircularViewF(pluginManager) {
-    pluginManager.addToExtensionPoint('LaunchView-CircularView', 
-    // @ts-expect-error
-    async ({ session, assembly, tracks = [], }) => {
+    pluginManager.addToExtensionPoint('LaunchView-CircularView', async ({ session, assembly, tracks = [], }) => {
         const { assemblyManager } = session;
         const view = session.addView('CircularView', {});
         await (0, mobx_1.when)(() => view.initialized);

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import PluginManager from '@jbrowse/core/PluginManager';
 import Plugin from '@jbrowse/core/Plugin';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class CircularViewPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;
 }
-export { baseChordDisplayConfig, BaseChordDisplayModel, BaseChordDisplayComponent, } from './BaseChordDisplay';
-export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/model';
+export { BaseChordDisplayComponent, BaseChordDisplayModel, baseChordDisplayConfig, } from './BaseChordDisplay';
+export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/model';

package/dist/index.js

@@ -3,14 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseChordDisplayComponent = exports.BaseChordDisplayModel = exports.baseChordDisplayConfig = void 0;
-const util_1 = require("@jbrowse/core/util");
+exports.baseChordDisplayConfig = exports.BaseChordDisplayModel = exports.BaseChordDisplayComponent = void 0;
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
-// locals
+const util_1 = require("@jbrowse/core/util");
+const DataUsage_1 = __importDefault(require("@mui/icons-material/DataUsage"));
 const CircularView_1 = __importDefault(require("./CircularView"));
 const LaunchCircularView_1 = __importDefault(require("./LaunchCircularView"));
-// icons
-const DataUsage_1 = __importDefault(require("@mui/icons-material/DataUsage"));
 class CircularViewPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -34,6 +32,6 @@ class CircularViewPlugin extends Plugin_1.default {
 }
 exports.default = CircularViewPlugin;
 var BaseChordDisplay_1 = require("./BaseChordDisplay");
-Object.defineProperty(exports, "baseChordDisplayConfig", { enumerable: true, get: function () { return BaseChordDisplay_1.baseChordDisplayConfig; } });
-Object.defineProperty(exports, "BaseChordDisplayModel", { enumerable: true, get: function () { return BaseChordDisplay_1.BaseChordDisplayModel; } });
 Object.defineProperty(exports, "BaseChordDisplayComponent", { enumerable: true, get: function () { return BaseChordDisplay_1.BaseChordDisplayComponent; } });
+Object.defineProperty(exports, "BaseChordDisplayModel", { enumerable: true, get: function () { return BaseChordDisplay_1.BaseChordDisplayModel; } });
+Object.defineProperty(exports, "baseChordDisplayConfig", { enumerable: true, get: function () { return BaseChordDisplay_1.baseChordDisplayConfig; } });

package/esm/BaseChordDisplay/components/BaseChordDisplay.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const BaseChordDisplay: ({ display, }: {
     display: {
         filled: boolean;
@@ -8,5 +7,5 @@ declare const BaseChordDisplay: ({ display, }: {
             radius: number;
         };
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BaseChordDisplay;

package/esm/BaseChordDisplay/components/BaseChordDisplay.js

@@ -1,15 +1,16 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-// locals
-import Loading from './Loading';
 import DisplayError from './DisplayError';
+import Loading from './Loading';
 const BaseChordDisplay = observer(function ({ display, }) {
     if (display.error) {
-        return React.createElement(DisplayError, { model: display });
+        return _jsx(DisplayError, { model: display });
+    }
+    else if (!display.filled) {
+        return _jsx(Loading, { model: display });
     }
-    if (!display.filled) {
-        return React.createElement(Loading, { model: display });
+    else {
+        return display.reactElement;
     }
-    return display.reactElement;
 });
 export default BaseChordDisplay;

package/esm/BaseChordDisplay/components/DisplayError.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const DisplayError: ({ model, }: {
     model: {
         renderProps: {
@@ -6,5 +5,5 @@ declare const DisplayError: ({ model, }: {
         };
         error: unknown;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DisplayError;

package/esm/BaseChordDisplay/components/DisplayError.js

@@ -1,13 +1,7 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 const DisplayError = observer(function ({ model, }) {
     const { renderProps: { radius }, error, } = model;
-    return (React.createElement("g", null,
-        React.createElement("defs", null,
-            React.createElement("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse" },
-                React.createElement("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 } }))),
-        React.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "#ffb4b4" }),
-        React.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }),
-        React.createElement("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle" }, String(error))));
+    return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: _jsx("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 } }) }) }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "#ffb4b4" }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), _jsx("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: String(error) })] }));
 });
 export default DisplayError;

package/esm/BaseChordDisplay/components/Loading.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const Loading: ({ model: { renderProps: { radius }, }, }: {
     model: {
         renderProps: {
             radius: number;
         };
     };
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Loading;

package/esm/BaseChordDisplay/components/Loading.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => {
     const offset = 2;
     const duration = 1.4;
@@ -45,7 +46,6 @@ const useStyles = makeStyles()(theme => {
 });
 const Loading = observer(function ({ model: { renderProps: { radius }, }, }) {
     const { classes } = useStyles();
-    // only show the loading message after 400ms to prevent excessive flickering
     const [shown, setShown] = useState(false);
     useEffect(() => {
         const timeout = setTimeout(() => {
@@ -55,13 +55,6 @@ const Loading = observer(function ({ model: { renderProps: { radius }, }, }) {
             clearTimeout(timeout);
         };
     });
-    return !shown ? null : (React.createElement("g", null,
-        React.createElement("defs", null,
-            React.createElement("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse" },
-                React.createElement("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 } }))),
-        React.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "#f1f1f1" }),
-        React.createElement("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }),
-        React.createElement("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle" }, "Loading\u2026"),
-        React.createElement("circle", { className: classes.path, fill: "none", strokeWidth: "4", strokeLinecap: "round", cx: "0", cy: "0", r: "60" })));
+    return !shown ? null : (_jsxs("g", { children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: _jsx("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 } }) }) }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "#f1f1f1" }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), _jsx("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: "Loading\u2026" }), _jsx("circle", { className: classes.path, fill: "none", strokeWidth: "4", strokeLinecap: "round", cx: "0", cy: "0", r: "60" })] }));
 });
 export default Loading;

package/esm/BaseChordDisplay/{models/configSchema.d.ts → configSchema.d.ts}

@@ -1,7 +1,4 @@
 declare const baseChordDisplayConfig: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     onChordClick: {
         type: string;
         description: string;

package/esm/BaseChordDisplay/{models/configSchema.js → configSchema.js}

@@ -1,12 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config BaseChordDisplay
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 const baseChordDisplayConfig = ConfigurationSchema('BaseChordDisplay', {
-    /**
-     * #slot
-     */
     onChordClick: {
         type: 'boolean',
         description: 'callback that should be run when a chord in the track is clicked',
@@ -14,9 +8,6 @@ const baseChordDisplayConfig = ConfigurationSchema('BaseChordDisplay', {
         contextVariable: ['feature', 'track', 'pluginManager'],
     },
 }, {
-    /**
-     * #identifier
-     */
     explicitIdentifier: 'displayId',
 });
 export { baseChordDisplayConfig };

package/esm/BaseChordDisplay/index.d.ts

@@ -1,3 +1,3 @@
 export { default as BaseChordDisplayComponent } from './components/BaseChordDisplay';
-export { BaseChordDisplayModel } from './models/model';
-export { baseChordDisplayConfig } from './models/configSchema';
+export { BaseChordDisplayModel } from './model';
+export { baseChordDisplayConfig } from './configSchema';

package/esm/BaseChordDisplay/index.js

@@ -1,3 +1,3 @@
 export { default as BaseChordDisplayComponent } from './components/BaseChordDisplay';
-export { BaseChordDisplayModel } from './models/model';
-export { baseChordDisplayConfig } from './models/configSchema';
+export { BaseChordDisplayModel } from './model';
+export { baseChordDisplayConfig } from './configSchema';

package/{dist/BaseChordDisplay/models → esm/BaseChordDisplay}/model.d.ts

@@ -1,9 +1,6 @@
-import React from 'react';
-import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType';
-import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/RendererType';
-import { AnyReactComponentType, Feature } from '@jbrowse/core/util';
-import { ExportSvgOptions } from '../../CircularView/models/model';
-import { ThemeOptions } from '@mui/material';
+import type { ExportSvgOptions } from '../CircularView/model';
+import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
+import type { ThemeOptions } from '@mui/material';
 export declare const BaseChordDisplayModel: 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>;
@@ -54,9 +51,7 @@ export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree" /**
-         * #getter
-         */).IModelType<{
+        } & 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>>;
@@ -88,64 +83,27 @@ export declare const BaseChordDisplayModel: import("mobx-state-tree").IModelType
     renderingComponent: undefined | AnyReactComponentType;
     refNameMap: Record<string, string> | undefined;
 } & {
-    /**
-     * #action
-     */
     onChordClick(feature: Feature): void;
 } & {
-    /**
-     * #getter
-     */
-    readonly blockDefinitions: import("../../CircularView/models/slices").Slice[];
-    /**
-     * #method
-     */
+    readonly blockDefinitions: import("../CircularView/slices").Slice[];
     renderProps(): any;
-    /**
-     * #getter
-     * the pluggable element type object for this display's renderer
-     */
-    readonly rendererType: RendererType | undefined;
-    /**
-     * #method
-     */
-    isCompatibleWithRenderer(renderer: RendererType): renderer is CircularChordRendererType;
-    /**
-     * #getter
-     * returns a string feature ID if the globally-selected object
-     * is probably a feature
-     */
+    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType | undefined;
     readonly selectedFeatureId: string | undefined;
 } & {
-    /**
-     * #action
-     */
     renderStarted(): void;
-    /**
-     * #action
-     */
     renderSuccess({ message, data, reactElement, html, renderingComponent, }: {
-        message: string;
-        data: any;
-        html: string;
-        reactElement: React.ReactElement;
-        renderingComponent: AnyReactComponentType;
+        message?: string;
+        data?: any;
+        html?: string;
+        reactElement?: React.ReactElement;
+        renderingComponent?: AnyReactComponentType;
     }): void;
-    /**
-     * #action
-     */
     renderError(error: unknown): void;
-    /**
-     * #action
-     */
     setRefNameMap(refNameMap: Record<string, string>): void;
 } & {
     afterAttach(): void;
 } & {
-    /**
-     * #method
-     */
     renderSvg(opts: ExportSvgOptions & {
         theme?: ThemeOptions;
-    }): Promise<React.JSX.Element>;
+    }): Promise<import("react/jsx-runtime").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;