@jbrowse/plugin-circular-view 2.16.1 → 2.18.0

package/esm/CircularView/{models/model.js → model.js}

@@ -1,107 +1,40 @@
 import { lazy } from 'react';
-import { cast, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
-import { Region } from '@jbrowse/core/util/types/mst';
-import { transaction } from 'mobx';
-import { saveAs } from 'file-saver';
-import { readConfObject, } from '@jbrowse/core/configuration';
-import { getSession, clamp, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-// icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { clamp, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
-// locals
+import { saveAs } from 'file-saver';
+import { transaction } from 'mobx';
+import { cast, getRoot, resolveIdentifier, types } from 'mobx-state-tree';
 import { calculateStaticSlices, sliceIsVisible } from './slices';
 import { viewportVisibleSection } from './viewportVisibleRegion';
-// lazies
-const ExportSvgDialog = lazy(() => import('../components/ExportSvgDialog'));
-/**
- * #stateModel CircularView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
+const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
 function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const minWidth = 100;
     const defaultHeight = 400;
     return types
         .compose('CircularView', BaseViewModel, types.model({
-        /**
-         * #property
-         */
         type: types.literal('CircularView'),
-        /**
-         * #property
-         * similar to offsetPx in linear genome view
-         */
         offsetRadians: -Math.PI / 2,
-        /**
-         * #property
-         */
         bpPerPx: 200,
-        /**
-         * #property
-         */
         tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
-        /**
-         * #property
-         */
         hideVerticalResizeHandle: false,
-        /**
-         * #property
-         */
         hideTrackSelectorButton: false,
-        /**
-         * #property
-         */
         lockedFitToWindow: true,
-        /**
-         * #property
-         */
         disableImportForm: false,
-        /**
-         * #property
-         */
-        height: types.optional(types.refinement('trackHeight', types.number, n => n >= minHeight), defaultHeight),
-        /**
-         * #property
-         */
-        displayedRegions: types.array(Region),
-        /**
-         * #property
-         */
+        height: types.optional(types.number, defaultHeight),
+        displayedRegions: types.optional(types.frozen(), []),
         scrollX: 0,
-        /**
-         * #property
-         */
         scrollY: 0,
-        /**
-         * #property
-         */
         minimumRadiusPx: 25,
-        /**
-         * #property
-         */
         spacingPx: 10,
-        /**
-         * #property
-         */
         paddingPx: 80,
-        /**
-         * #property
-         */
         lockedPaddingPx: 100,
-        /**
-         * #property
-         */
         minVisibleWidth: 6,
-        /**
-         * #property
-         */
         minimumBlockWidth: 20,
-        /**
-         * #property
-         */
         trackSelectorType: 'hierarchical',
     }))
         .volatile(() => ({
@@ -109,25 +42,16 @@ function stateModelFactory(pluginManager) {
         error: undefined,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get width() {
             if (self.volatileWidth === undefined) {
                 throw new Error('wait for view to be initialized first before accessing width');
             }
             return self.volatileWidth;
         },
-        /**
-         * #getter
-         */
         get visibleSection() {
             const { scrollX, scrollY, width, height } = self;
             return viewportVisibleSection([scrollX, scrollX + width, scrollY, scrollY + height], this.centerXY, this.radiusPx);
         },
-        /**
-         * #getter
-         */
         get circumferencePx() {
             let elidedBp = 0;
             for (const r of this.elidedRegions) {
@@ -135,33 +59,18 @@ function stateModelFactory(pluginManager) {
             }
             return (elidedBp / self.bpPerPx + self.spacingPx * this.elidedRegions.length);
         },
-        /**
-         * #getter
-         */
         get radiusPx() {
             return this.circumferencePx / (2 * Math.PI);
         },
-        /**
-         * #getter
-         */
         get bpPerRadian() {
             return self.bpPerPx * this.radiusPx;
         },
-        /**
-         * #getter
-         */
         get pxPerRadian() {
             return this.radiusPx;
         },
-        /**
-         * #getter
-         */
         get centerXY() {
             return [this.radiusPx + self.paddingPx, this.radiusPx + self.paddingPx];
         },
-        /**
-         * #getter
-         */
         get totalBp() {
             let total = 0;
             for (const region of self.displayedRegions) {
@@ -169,80 +78,46 @@ function stateModelFactory(pluginManager) {
             }
             return total;
         },
-        /**
-         * #getter
-         */
         get maximumRadiusPx() {
             return self.lockedFitToWindow
                 ? Math.min(self.width, self.height) / 2 - self.lockedPaddingPx
                 : 1000000;
         },
-        /**
-         * #getter
-         */
         get maxBpPerPx() {
             const minCircumferencePx = 2 * Math.PI * self.minimumRadiusPx;
             return this.totalBp / minCircumferencePx;
         },
-        /**
-         * #getter
-         */
         get minBpPerPx() {
-            // min depends on window dimensions, clamp between old min(0.01) and max
             const maxCircumferencePx = 2 * Math.PI * this.maximumRadiusPx;
             return clamp(this.totalBp / maxCircumferencePx, 0.0000000001, this.maxBpPerPx);
         },
-        /**
-         * #getter
-         */
         get atMaxBpPerPx() {
             return self.bpPerPx >= this.maxBpPerPx;
         },
-        /**
-         * #getter
-         */
         get atMinBpPerPx() {
             return self.bpPerPx <= this.minBpPerPx;
         },
-        /**
-         * #getter
-         */
         get tooSmallToLock() {
             return this.minBpPerPx <= 0.0000000001;
         },
-        /**
-         * #getter
-         */
         get figureDimensions() {
             return [
                 this.radiusPx * 2 + 2 * self.paddingPx,
                 this.radiusPx * 2 + 2 * self.paddingPx,
             ];
         },
-        /**
-         * #getter
-         */
         get figureWidth() {
             return this.figureDimensions[0];
         },
-        /**
-         * #getter
-         */
         get figureHeight() {
             return this.figureDimensions[1];
         },
-        /**
-         * #getter
-         * this is displayedRegions, post-processed to elide regions that are too
-         * small to see reasonably
-         */
         get elidedRegions() {
             const visible = [];
             self.displayedRegions.forEach(region => {
                 const widthBp = region.end - region.start;
                 const widthPx = widthBp / self.bpPerPx;
                 if (widthPx < self.minVisibleWidth) {
-                    // too small to see, collapse into a single elision region
                     const lastVisible = visible.at(-1);
                     if (lastVisible === null || lastVisible === void 0 ? void 0 : lastVisible.elided) {
                         lastVisible.regions.push({ ...region });
@@ -257,11 +132,9 @@ function stateModelFactory(pluginManager) {
                     }
                 }
                 else {
-                    // big enough to see, display it
                     visible.push({ ...region, widthBp, elided: false });
                 }
             });
-            // remove any single-region elisions
             for (let i = 0; i < visible.length; i += 1) {
                 const v = visible[i];
                 if (v.elided && v.regions.length === 1) {
@@ -270,9 +143,6 @@ function stateModelFactory(pluginManager) {
             }
             return visible;
         },
-        /**
-         * #getter
-         */
         get assemblyNames() {
             const assemblyNames = [];
             self.displayedRegions.forEach(displayedRegion => {
@@ -282,9 +152,6 @@ function stateModelFactory(pluginManager) {
             });
             return assemblyNames;
         },
-        /**
-         * #getter
-         */
         get initialized() {
             const { assemblyManager } = getSession(self);
             return (self.volatileWidth !== undefined &&
@@ -292,107 +159,62 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get staticSlices() {
             return calculateStaticSlices(self);
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get visibleStaticSlices() {
             return self.staticSlices.filter(s => sliceIsVisible(self, s));
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setWidth(newWidth) {
             self.volatileWidth = Math.max(newWidth, minWidth);
             return self.volatileWidth;
         },
-        /**
-         * #action
-         */
         setHeight(newHeight) {
             self.height = Math.max(newHeight, minHeight);
             return self.height;
         },
-        /**
-         * #action
-         */
         resizeHeight(distance) {
             const oldHeight = self.height;
             const newHeight = this.setHeight(self.height + distance);
             this.setModelViewWhenAdjust(!self.tooSmallToLock);
             return newHeight - oldHeight;
         },
-        /**
-         * #action
-         */
         resizeWidth(distance) {
             const oldWidth = self.width;
             const newWidth = this.setWidth(self.width + distance);
             this.setModelViewWhenAdjust(!self.tooSmallToLock);
             return newWidth - oldWidth;
         },
-        /**
-         * #action
-         */
         rotateClockwiseButton() {
             this.rotateClockwise(Math.PI / 6);
         },
-        /**
-         * #action
-         */
         rotateCounterClockwiseButton() {
             this.rotateCounterClockwise(Math.PI / 6);
         },
-        /**
-         * #action
-         */
         rotateClockwise(distance = 0.17) {
             self.offsetRadians += distance;
         },
-        /**
-         * #action
-         */
         rotateCounterClockwise(distance = 0.17) {
             self.offsetRadians -= distance;
         },
-        /**
-         * #action
-         */
         zoomInButton() {
             this.setBpPerPx(self.bpPerPx / 1.4);
         },
-        /**
-         * #action
-         */
         zoomOutButton() {
             this.setBpPerPx(self.bpPerPx * 1.4);
         },
-        /**
-         * #action
-         */
         setBpPerPx(newVal) {
             self.bpPerPx = clamp(newVal, self.minBpPerPx, self.maxBpPerPx);
         },
-        /**
-         * #action
-         */
         setModelViewWhenAdjust(secondCondition) {
             if (self.lockedFitToWindow && secondCondition) {
                 this.setBpPerPx(self.minBpPerPx);
             }
         },
-        /**
-         * #action
-         */
         setDisplayedRegions(regions) {
             const previouslyEmpty = self.displayedRegions.length === 0;
             self.displayedRegions = cast(regions);
@@ -403,9 +225,6 @@ function stateModelFactory(pluginManager) {
                 this.setBpPerPx(self.bpPerPx);
             }
         },
-        /**
-         * #action
-         */
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -417,9 +236,6 @@ function stateModelFactory(pluginManager) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
-        /**
-         * #action
-         */
         toggleTrack(trackId) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
@@ -428,15 +244,9 @@ function stateModelFactory(pluginManager) {
             }
             return false;
         },
-        /**
-         * #action
-         */
         setError(error) {
             self.error = error;
         },
-        /**
-         * #action
-         */
         showTrack(trackId, initialSnapshot = {}) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = resolveIdentifier(schema, getRoot(self), trackId);
@@ -455,9 +265,6 @@ function stateModelFactory(pluginManager) {
             });
             self.tracks.push(track);
         },
-        /**
-         * #action
-         */
         addTrackConf(configuration, initialSnapshot = {}) {
             const { type } = configuration;
             const name = readConfObject(configuration, 'name');
@@ -476,9 +283,6 @@ function stateModelFactory(pluginManager) {
                 displays: [{ type: displayConf.type, configuration: displayConf }],
             }));
         },
-        /**
-         * #action
-         */
         hideTrack(trackId) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = resolveIdentifier(schema, getRoot(self), trackId);
@@ -488,32 +292,19 @@ function stateModelFactory(pluginManager) {
             });
             return t.length;
         },
-        /**
-         * #action
-         */
         toggleFitToWindowLock() {
-            // when going unlocked -> locked and circle is cut off, set to the
-            // locked minBpPerPx
             self.lockedFitToWindow = !self.lockedFitToWindow;
             this.setModelViewWhenAdjust(self.atMinBpPerPx);
             return self.lockedFitToWindow;
         },
-        /**
-         * #action
-         * creates an svg export and save using FileSaver
-         */
         async exportSvg(opts = {}) {
-            const { renderToSvg } = await import('../svgcomponents/SVGCircularView');
+            const { renderToSvg } = await import('./svgcomponents/SVGCircularView');
             const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             saveAs(blob, opts.filename || 'image.svg');
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         * return the view menu items
-         */
         menuItems() {
             return [
                 {

package/esm/CircularView/{models/slices.d.ts → slices.d.ts}

@@ -1,4 +1,4 @@
-import { Region } from '@jbrowse/core/util';
+import type { Region } from '@jbrowse/core/util';
 export interface SliceElidedRegion {
     elided: true;
     widthBp: number;

package/esm/CircularView/{models/slices.js → slices.js}

@@ -1,4 +1,4 @@
-import { polarToCartesian, assembleLocString } from '@jbrowse/core/util';
+import { assembleLocString, polarToCartesian } from '@jbrowse/core/util';
 import { thetaRangesOverlap } from './viewportVisibleRegion';
 export class Slice {
     constructor(view, region, offsetRadians, radianWidth) {

package/esm/CircularView/svgcomponents/SVGBackground.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTheme } from '@mui/material';
 import { stripAlpha } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
     return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));

package/esm/CircularView/svgcomponents/SVGCircularView.d.ts

@@ -1,4 +1,4 @@
-import { ExportSvgOptions, CircularViewModel } from '../models/model';
+import type { CircularViewModel, ExportSvgOptions } from '../model';
 type CGV = CircularViewModel;
 export declare function renderToSvg(model: CGV, opts: ExportSvgOptions): Promise<string>;
 export {};

package/esm/CircularView/svgcomponents/SVGCircularView.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getSession, radToDeg, renderToStaticMarkup } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { when } from 'mobx';
-import { getSession, radToDeg, renderToStaticMarkup } from '@jbrowse/core/util';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import Ruler from '../components/Ruler';
@@ -22,16 +22,11 @@ export async function renderToSvg(model, opts) {
     }));
     const { staticSlices, offsetRadians, centerXY } = model;
     const deg = radToDeg(offsetRadians);
-    // the xlink namespace is used for rendering <image> tag
     return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: createJBrowseTheme(theme) },
         React.createElement(Wrapper, null,
             React.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width + shift * 2, height].toString() },
                 React.createElement(SVGBackground, { width: width, height: height, shift: shift }),
                 React.createElement("g", { transform: `translate(${centerXY}) rotate(${deg})` },
-                    staticSlices.map((slice, i) => (
-                    /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                    React.createElement(Ruler, { key: i, model: model, slice: slice }))),
-                    displayResults.map(({ result }, i) => (
-                    /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                    React.createElement(React.Fragment, { key: i }, result))))))), createRootFn);
+                    staticSlices.map((slice, i) => (React.createElement(Ruler, { key: i, model: model, slice: slice }))),
+                    displayResults.map(({ result }, i) => (React.createElement(React.Fragment, { key: i }, result))))))), createRootFn);
 }

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

@@ -48,26 +48,21 @@ export 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
 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;
@@ -92,61 +87,6 @@ export 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],
@@ -157,7 +97,6 @@ export 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]);
     }
@@ -170,24 +109,15 @@ export 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/esm/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/esm/LaunchCircularView/index.js

@@ -1,8 +1,6 @@
 import { when } from 'mobx';
 export default 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 when(() => view.initialized);