@jbrowse/plugin-circular-view 1.7.11 → 2.1.0

package/esm/CircularView/models/viewportVisibleRegion.d.ts

@@ -0,0 +1,6 @@
+export declare function cartesianToPolar(x: number, y: number): number[];
+export declare function thetaRangesOverlap(r1start: number, r1length: number, r2start: number, r2length: number): boolean;
+export declare function viewportVisibleSection(viewSides: [number, number, number, number], circleCenter: [number, number], circleRadius: number): {
+    rho: number[];
+    theta: number[];
+};

package/esm/CircularView/models/viewportVisibleRegion.js

@@ -0,0 +1,223 @@
+function findCircleIntersectionX(y, cx, cy, r, resultArray) {
+    const d = Math.abs(y - cy);
+    if (d > r) {
+        return;
+    }
+    if (d === r) {
+        resultArray.push([cx, y]);
+    }
+    const solution = Math.sqrt(r * r - d * d);
+    resultArray.push([cx - solution, y]);
+    resultArray.push([cx + solution, y]);
+}
+function findCircleIntersectionY(x, cx, cy, r, resultArray) {
+    const d = Math.abs(x - cx);
+    if (d > r) {
+        return;
+    }
+    if (d === r) {
+        resultArray.push([x, cy]);
+    }
+    const solution = Math.sqrt(r * r - d * d);
+    resultArray.push([x, cy - solution]);
+    resultArray.push([x, cy + solution]);
+}
+function cartesianToTheta(x, y) {
+    let theta = (Math.atan(y / x) + 2 * Math.PI) % (2 * Math.PI);
+    if (x < 0) {
+        if (y <= 0) {
+            theta += Math.PI;
+        }
+        else {
+            theta -= Math.PI;
+        }
+    }
+    return theta;
+}
+export function cartesianToPolar(x, y) {
+    const rho = Math.sqrt(x * x + y * y);
+    if (rho === 0) {
+        return [0, 0];
+    }
+    const theta = cartesianToTheta(x, y);
+    return [rho, theta];
+}
+const twoPi = 2 * Math.PI;
+export function thetaRangesOverlap(r1start, r1length, r2start, r2length) {
+    if (r1length <= 0 || r2length <= 0) {
+        return false;
+    }
+    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
+export 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;
+    viewB -= cy;
+    const centerIsInsideViewport = viewL < 0 && viewR > 0 && viewT < 0 && viewB > 0;
+    if (centerIsInsideViewport) {
+        const vertices = [
+            [viewL, viewT],
+            [viewR, viewT],
+            [viewL, viewB],
+            [viewR, viewB],
+        ];
+        let maxRho = -Infinity;
+        for (let i = 0; i < vertices.length; i += 1) {
+            const [x, y] = vertices[i];
+            const rho = Math.sqrt(x * x + y * y);
+            if (rho > maxRho) {
+                maxRho = rho;
+            }
+        }
+        return {
+            rho: [0, Math.min(circleRadius, maxRho)],
+            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],
+        [viewL, viewB],
+        [viewR, viewB],
+    ];
+    findCircleIntersectionY(viewL, 0, 0, circleRadius, vertices);
+    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]);
+    }
+    if (viewR < circleRadius) {
+        vertices.push([viewR, 0]);
+    }
+    if (-viewT < circleRadius) {
+        vertices.push([0, viewT]);
+    }
+    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 = Infinity;
+    let rhoMax = -Infinity;
+    let thetaMin = Infinity;
+    let thetaMax = -Infinity;
+    for (let i = 0; i < vertices.length; i += 1) {
+        // ignore vertex if outside the viewport
+        const [vx, vy] = vertices[i];
+        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;
+                }
+                if (theta > thetaMax && rho > 0.0001) {
+                    thetaMax = theta;
+                }
+                if (rho < rhoMin) {
+                    rhoMin = rho;
+                }
+                if (rho > rhoMax) {
+                    rhoMax = rho;
+                }
+            }
+        }
+    }
+    if (reflect === -1) {
+        thetaMin += Math.PI;
+        thetaMax += Math.PI;
+    }
+    if (thetaMin > 2 * Math.PI && thetaMax > 2 * Math.PI) {
+        thetaMin -= 2 * Math.PI;
+        thetaMax -= 2 * Math.PI;
+    }
+    return {
+        rho: [rhoMin, Math.min(circleRadius, rhoMax)],
+        theta: [thetaMin, thetaMax],
+    };
+}
+//# sourceMappingURL=viewportVisibleRegion.js.map

package/esm/CircularView/models/viewportVisibleRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewportVisibleRegion.js","sourceRoot":"","sources":["../../../src/CircularView/models/viewportVisibleRegion.ts"],"names":[],"mappings":"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"}

package/esm/index.d.ts

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

package/esm/index.js

@@ -0,0 +1,49 @@
+import { lazy } from 'react';
+import { when } from 'mobx';
+import { isAbstractMenuManager } from '@jbrowse/core/util';
+import Plugin from '@jbrowse/core/Plugin';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import DataUsageIcon from '@mui/icons-material/DataUsage';
+import stateModelFactory from './CircularView/models/CircularView';
+export default class CircularViewPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'CircularViewPlugin';
+    }
+    install(pluginManager) {
+        pluginManager.addViewType(() => new ViewType({
+            ReactComponent: lazy(() => import('./CircularView/components/CircularView')),
+            stateModel: stateModelFactory(pluginManager),
+            name: 'CircularView',
+        }));
+        pluginManager.addToExtensionPoint('LaunchView-CircularView', 
+        // @ts-ignore
+        async ({ session, assembly, loc, tracks = [], }) => {
+            const { assemblyManager } = session;
+            const view = session.addView('CircularView', {});
+            await when(() => view.initialized);
+            if (!assembly) {
+                throw new Error('No assembly provided when launching circular genome view');
+            }
+            const asm = await assemblyManager.waitForAssembly(assembly);
+            if (!asm) {
+                throw new Error(`Assembly "${assembly}" not found when launching circular genome view`);
+            }
+            view.setDisplayedRegions(asm.regions || []);
+            tracks.forEach(track => view.showTrack(track));
+        });
+    }
+    configure(pluginManager) {
+        if (isAbstractMenuManager(pluginManager.rootModel)) {
+            pluginManager.rootModel.appendToSubMenu(['Add'], {
+                label: 'Circular view',
+                icon: DataUsageIcon,
+                onClick: (session) => {
+                    session.addView('CircularView', {});
+                },
+            });
+        }
+    }
+}
+export { BaseChordDisplayModel, baseChordDisplayConfig, BaseChordDisplayComponent, } from './BaseChordDisplay';
+//# 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,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,QAAQ,MAAM,8CAA8C,CAAA;AACnE,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,iBAGN,MAAM,oCAAoC,CAAA;AAI3C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IAAtD;;QACE,SAAI,GAAG,oBAAoB,CAAA;IAgE7B,CAAC;IA9DC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,WAAW,CACvB,GAAG,EAAE,CACH,IAAI,QAAQ,CAAC;YACX,cAAc,EAAE,IAAI,CAClB,GAAG,EAAE,CAAC,MAAM,CAAC,wCAAwC,CAAC,CACvD;YACD,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC;YAC5C,IAAI,EAAE,cAAc;SACrB,CAAC,CACL,CAAA;QAED,aAAa,CAAC,mBAAmB,CAC/B,yBAAyB;QACzB,aAAa;QACb,KAAK,EAAE,EACL,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,EAAE,GAMZ,EAAE,EAAE;YACH,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAA;YACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAQ,CAAA;YAEvD,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;YAElC,IAAI,CAAC,QAAQ,EAAE;gBACb,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAA;aACF;YAED,MAAM,GAAG,GAAG,MAAM,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAC3D,IAAI,CAAC,GAAG,EAAE;gBACR,MAAM,IAAI,KAAK,CACb,aAAa,QAAQ,iDAAiD,CACvE,CAAA;aACF;YAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAA;YAE3C,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAChD,CAAC,CACF,CAAA;IACH,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;gBACrC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "1.7.11",
+  "version": "2.1.0",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -20,33 +20,41 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/circular-view",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
     "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "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": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1"
+    "@mui/icons-material": "^5.0.1"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@jbrowse/core": "^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"
+    "react-dom": ">=16.8.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5c21beb48a21f08b0091d293f09ac99174c48f77"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "0db0462fa1f9f15ab4869da085bcab032b9483c3"
 }

package/src/BaseChordDisplay/components/BaseChordDisplay.tsx

@@ -1,28 +1,16 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import ChordDisplayLoadingFactory from './Loading'
-import ChordDisplayErrorFactory from './DisplayError'
-import RpcRenderedSvgGroupF from './RpcRenderedSvgGroup'
-
-export default ({ lib, load }: PluginManager) => {
-  const React = lib.react
-  const { observer, PropTypes: MobxPropTypes } = lib['mobx-react']
-
-  const Loading = load(ChordDisplayLoadingFactory)
-  const DisplayError = load(ChordDisplayErrorFactory)
-  const RpcRenderedSvgGroup = load(RpcRenderedSvgGroupF)
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function BaseChordDisplay({ display }: any) {
-    if (display.error) {
-      return <DisplayError model={display} />
-    }
-    if (!display.filled) {
-      return <Loading model={display} />
-    }
-    return <RpcRenderedSvgGroup model={display} />
+import React from 'react'
+import { observer } from 'mobx-react'
+import Loading from './Loading'
+import DisplayError from './DisplayError'
+import RpcRenderedSvgGroup from './RpcRenderedSvgGroup'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function BaseChordDisplay({ display }: any) {
+  if (display.error) {
+    return <DisplayError model={display} />
   }
-  BaseChordDisplay.propTypes = {
-    display: MobxPropTypes.observableObject.isRequired,
+  if (!display.filled) {
+    return <Loading model={display} />
   }
-  return observer(BaseChordDisplay)
+  return <RpcRenderedSvgGroup model={display} />
 }
+export default observer(BaseChordDisplay)

package/src/BaseChordDisplay/components/DisplayError.js

@@ -1,70 +1,68 @@
-export default ({ jbrequire }) => {
-  const React = jbrequire('react')
-  const { makeStyles } = jbrequire('@material-ui/core/styles')
-  const { observer } = jbrequire('mobx-react')
+import React from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
-  const useStyles = makeStyles({
-    errorMessage: {},
-    errorBackground: {},
-    errorText: {},
-  })
+const useStyles = makeStyles()({
+  errorMessage: {},
+  errorBackground: {},
+  errorText: {},
+})
 
-  // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-  const DisplayError = observer(
-    ({
-      model: {
-        renderProps: { radius },
-        error,
-      },
-    }) => {
-      const classes = useStyles()
-      return (
-        <g className={classes.errorMessage}>
-          <defs>
-            <pattern
-              id="diagonalHatch"
-              width="10"
-              height="10"
-              patternTransform="rotate(45 0 0)"
-              patternUnits="userSpaceOnUse"
-            >
-              <line
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="10"
-                style={{ stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 }}
-              />
-            </pattern>
-          </defs>
-          <circle
-            className={classes.errorBackground}
-            cx="0"
-            cy="0"
-            r={radius}
-            fill="#ffb4b4"
-          />
-          <circle
-            className={classes.errorPattern}
-            cx="0"
-            cy="0"
-            r={radius}
-            fill="url(#diagonalHatch)"
-          />
-          <text
-            className={classes.errorText}
-            x="0"
-            y="0"
-            transform="rotate(90 0 0)"
-            dominantBaseline="middle"
-            textAnchor="middle"
-          >
-            {String(error)}
-          </text>
-        </g>
-      )
+// 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+const DisplayError = observer(
+  ({
+    model: {
+      renderProps: { radius },
+      error,
     },
-  )
+  }) => {
+    const { classes } = useStyles()
+    return (
+      <g className={classes.errorMessage}>
+        <defs>
+          <pattern
+            id="diagonalHatch"
+            width="10"
+            height="10"
+            patternTransform="rotate(45 0 0)"
+            patternUnits="userSpaceOnUse"
+          >
+            <line
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="10"
+              style={{ stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 }}
+            />
+          </pattern>
+        </defs>
+        <circle
+          className={classes.errorBackground}
+          cx="0"
+          cy="0"
+          r={radius}
+          fill="#ffb4b4"
+        />
+        <circle
+          className={classes.errorPattern}
+          cx="0"
+          cy="0"
+          r={radius}
+          fill="url(#diagonalHatch)"
+        />
+        <text
+          className={classes.errorText}
+          x="0"
+          y="0"
+          transform="rotate(90 0 0)"
+          dominantBaseline="middle"
+          textAnchor="middle"
+        >
+          {String(error)}
+        </text>
+      </g>
+    )
+  },
+)
 
-  return DisplayError
-}
+export default DisplayError