@jbrowse/plugin-circular-view 2.1.6 → 2.2.0

package/dist/CircularView/models/CircularView.d.ts

@@ -2,7 +2,11 @@ import PluginManager from '@jbrowse/core/PluginManager';
 import { SnapshotOrInstance, Instance } from 'mobx-state-tree';
 import { Region } from '@jbrowse/core/util/types/mst';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export default function CircularView(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
+/**
+ * #stateModel CircularView
+ * extends `BaseViewModel`
+ */
+declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
@@ -15,12 +19,6 @@ export default function CircularView(pluginManager: PluginManager): import("mobx
     lockedFitToWindow: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     disableImportForm: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumRadiusPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    spacingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    paddingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    lockedPaddingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    minVisibleWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
-    minimumBlockWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
     displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         refName: import("mobx-state-tree").ISimpleType<string>;
         start: import("mobx-state-tree").ISimpleType<number>;
@@ -33,6 +31,12 @@ export default function CircularView(pluginManager: PluginManager): import("mobx
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     scrollX: import("mobx-state-tree").IType<number | undefined, number, number>;
     scrollY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    minimumRadiusPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    spacingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    paddingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    lockedPaddingPx: import("mobx-state-tree").IType<number | undefined, number, number>;
+    minVisibleWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    minimumBlockWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
     trackSelectorType: import("mobx-state-tree").IType<string | undefined, string, string>;
 }, {
     width: number;
@@ -44,55 +48,192 @@ export default function CircularView(pluginManager: PluginManager): import("mobx
 } & {
     width: number;
 } & {
+    /**
+     * #getter
+     */
     readonly staticSlices: import("./slices").Slice[];
+    /**
+     * #getter
+     */
     readonly visibleSection: {
         rho: [number, number];
         theta: [number, number];
     };
+    /**
+     * #getter
+     */
     readonly circumferencePx: number;
+    /**
+     * #getter
+     */
     readonly radiusPx: number;
+    /**
+     * #getter
+     */
     readonly bpPerRadian: number;
+    /**
+     * #getter
+     */
     readonly pxPerRadian: number;
+    /**
+     * #getter
+     */
     readonly centerXY: [number, number];
+    /**
+     * #getter
+     */
     readonly totalBp: number;
+    /**
+     * #getter
+     */
     readonly maximumRadiusPx: number;
+    /**
+     * #getter
+     */
     readonly maxBpPerPx: number;
+    /**
+     * #getter
+     */
     readonly minBpPerPx: number;
+    /**
+     * #getter
+     */
     readonly atMaxBpPerPx: boolean;
+    /**
+     * #getter
+     */
     readonly atMinBpPerPx: boolean;
+    /**
+     * #getter
+     */
     readonly tooSmallToLock: boolean;
+    /**
+     * #getter
+     */
     readonly figureDimensions: [number, number];
+    /**
+     * #getter
+     */
     readonly figureWidth: number;
+    /**
+     * #getter
+     */
     readonly figureHeight: number;
+    /**
+     * #getter
+     * this is displayedRegions, post-processed to
+     * elide regions that are too small to see reasonably
+     */
     readonly elidedRegions: any[];
+    /**
+     * #getter
+     */
     readonly assemblyNames: string[];
+    /**
+     * #getter
+     */
     readonly initialized: boolean;
 } & {
+    /**
+     * #getter
+     */
     readonly visibleStaticSlices: import("./slices").Slice[];
 } & {
     error: unknown;
 } & {
+    /**
+     * #action
+     */
     setWidth(newWidth: number): number;
+    /**
+     * #action
+     */
     setHeight(newHeight: number): number;
+    /**
+     * #action
+     */
     resizeHeight(distance: number): number;
+    /**
+     * #action
+     */
     resizeWidth(distance: number): number;
+    /**
+     * #action
+     */
     rotateClockwiseButton(): void;
+    /**
+     * #action
+     */
     rotateCounterClockwiseButton(): void;
+    /**
+     * #action
+     */
     rotateClockwise(distance?: number): void;
+    /**
+     * #action
+     */
     rotateCounterClockwise(distance?: number): void;
+    /**
+     * #action
+     */
     zoomInButton(): void;
+    /**
+     * #action
+     */
     zoomOutButton(): void;
+    /**
+     * #action
+     */
     setBpPerPx(newVal: number): void;
+    /**
+     * #action
+     */
     setModelViewWhenAdjust(secondCondition: boolean): void;
+    /**
+     * #action
+     */
     closeView(): void;
+    /**
+     * #action
+     */
     setDisplayedRegions(regions: SnapshotOrInstance<typeof Region>[]): void;
+    /**
+     * #action
+     */
     activateTrackSelector(): import("@jbrowse/core/util").Widget;
+    /**
+     * #action
+     */
     toggleTrack(trackId: string): void;
+    /**
+     * #action
+     */
     setError(error: unknown): void;
+    /**
+     * #action
+     */
     showTrack(trackId: string, initialSnapshot?: {}): void;
+    /**
+     * #action
+     */
     addTrackConf(configuration: AnyConfigurationModel, initialSnapshot?: {}): void;
+    /**
+     * #action
+     */
     hideTrack(trackId: string): number;
+    /**
+     * #action
+     */
     toggleFitToWindowLock(): boolean;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export declare type CircularViewStateModel = ReturnType<typeof CircularView>;
+export declare type CircularViewStateModel = ReturnType<typeof stateModelFactory>;
 export declare type CircularViewModel = Instance<CircularViewStateModel>;
+/**
+PLANS
+
+- tracks
+- ruler tick marks
+- set viewport scroll from state snapshot
+
+*/
+export default stateModelFactory;

package/dist/CircularView/models/CircularView.js

@@ -8,39 +8,86 @@ const util_1 = require("@jbrowse/core/util");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const slices_1 = require("./slices");
 const viewportVisibleRegion_1 = require("./viewportVisibleRegion");
-function CircularView(pluginManager) {
+/**
+ * #stateModel CircularView
+ * extends `BaseViewModel`
+ */
+function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const minWidth = 100;
     const defaultHeight = 400;
     return mobx_state_tree_1.types.compose(models_1.BaseViewModel, mobx_state_tree_1.types
         .model('CircularView', {
+        /**
+         * #property
+         */
         type: mobx_state_tree_1.types.literal('CircularView'),
+        /**
+         * #property
+         * similar to offsetPx in linear genome view
+         */
         offsetRadians: -Math.PI / 2,
+        /**
+         * #property
+         */
         bpPerPx: 2000000,
+        /**
+         * #property
+         */
         tracks: mobx_state_tree_1.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        /**
+         * #property
+         */
         hideVerticalResizeHandle: false,
+        /**
+         * #property
+         */
         hideTrackSelectorButton: false,
+        /**
+         * #property
+         */
         lockedFitToWindow: true,
+        /**
+         * #property
+         */
         disableImportForm: false,
+        /**
+         * #property
+         */
         height: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.refinement('trackHeight', mobx_state_tree_1.types.number, n => n >= minHeight), defaultHeight),
+        /**
+         * #property
+         */
+        displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
+        /**
+         * #property
+         */
+        scrollX: 0,
+        /**
+         * #property
+         */
+        scrollY: 0,
         minimumRadiusPx: 25,
         spacingPx: 10,
         paddingPx: 80,
         lockedPaddingPx: 100,
         minVisibleWidth: 6,
         minimumBlockWidth: 20,
-        displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
-        scrollX: 0,
-        scrollY: 0,
         trackSelectorType: 'hierarchical',
     })
         .volatile(() => ({
         width: 0,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get staticSlices() {
             return (0, slices_1.calculateStaticSlices)(self);
         },
+        /**
+         * #getter
+         */
         get visibleSection() {
             return (0, viewportVisibleRegion_1.viewportVisibleSection)([
                 self.scrollX,
@@ -49,6 +96,9 @@ function CircularView(pluginManager) {
                 self.scrollY + self.height,
             ], this.centerXY, this.radiusPx);
         },
+        /**
+         * #getter
+         */
         get circumferencePx() {
             let elidedBp = 0;
             for (const r of this.elidedRegions) {
@@ -56,21 +106,36 @@ function CircularView(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) {
@@ -78,43 +143,73 @@ function CircularView(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 (0, util_1.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];
         },
-        // this is displayedRegions, post-processed to
-        // elide regions that are too small to see reasonably
+        /**
+         * #getter
+         * this is displayedRegions, post-processed to
+         * elide regions that are too small to see reasonably
+         */
         get elidedRegions() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const visible = [];
@@ -151,6 +246,9 @@ function CircularView(pluginManager) {
             }
             return visible;
         },
+        /**
+         * #getter
+         */
         get assemblyNames() {
             const assemblyNames = [];
             self.displayedRegions.forEach(displayedRegion => {
@@ -160,12 +258,18 @@ function CircularView(pluginManager) {
             });
             return assemblyNames;
         },
+        /**
+         * #getter
+         */
         get initialized() {
             const { assemblyManager } = (0, util_1.getSession)(self);
             return this.assemblyNames.every(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.initialized; });
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get visibleStaticSlices() {
             return self.staticSlices.filter(s => (0, slices_1.sliceIsVisible)(self, s));
         },
@@ -174,57 +278,98 @@ function CircularView(pluginManager) {
         error: undefined,
     }))
         .actions(self => ({
-        // toggle action with a flag stating which mode it's in
+        /**
+         * #action
+         */
         setWidth(newWidth) {
             self.width = Math.max(newWidth, minWidth);
             return self.width;
         },
+        /**
+         * #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 = (0, util_1.clamp)(newVal, self.minBpPerPx, self.maxBpPerPx);
         },
+        /**
+         * #action
+         */
         setModelViewWhenAdjust(secondCondition) {
             if (self.lockedFitToWindow && secondCondition) {
                 this.setBpPerPx(self.minBpPerPx);
             }
         },
+        /**
+         * #action
+         */
         closeView() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (0, mobx_state_tree_1.getParent)(self, 2).removeView(self);
         },
+        /**
+         * #action
+         */
         setDisplayedRegions(regions) {
             const previouslyEmpty = self.displayedRegions.length === 0;
             self.displayedRegions = (0, mobx_state_tree_1.cast)(regions);
@@ -235,6 +380,9 @@ function CircularView(pluginManager) {
                 this.setBpPerPx(self.bpPerPx);
             }
         },
+        /**
+         * #action
+         */
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = (0, util_1.getSession)(self);
@@ -246,6 +394,9 @@ function CircularView(pluginManager) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
+        /**
+         * #action
+         */
         toggleTrack(trackId) {
             // if we have any tracks with that configuration, turn them off
             const hiddenCount = this.hideTrack(trackId);
@@ -254,10 +405,16 @@ function CircularView(pluginManager) {
                 this.showTrack(trackId);
             }
         },
+        /**
+         * #action
+         */
         setError(error) {
             console.error(error);
             self.error = error;
         },
+        /**
+         * #action
+         */
         showTrack(trackId, initialSnapshot = {}) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
@@ -276,6 +433,9 @@ function CircularView(pluginManager) {
             });
             self.tracks.push(track);
         },
+        /**
+         * #action
+         */
         addTrackConf(configuration, initialSnapshot = {}) {
             const { type } = configuration;
             const name = (0, configuration_1.readConfObject)(configuration, 'name');
@@ -295,6 +455,9 @@ function CircularView(pluginManager) {
             });
             self.tracks.push(track);
         },
+        /**
+         * #action
+         */
         hideTrack(trackId) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
@@ -302,16 +465,18 @@ function CircularView(pluginManager) {
             (0, mobx_1.transaction)(() => t.forEach(t => self.tracks.remove(t)));
             return t.length;
         },
+        /**
+         * #action
+         */
         toggleFitToWindowLock() {
-            self.lockedFitToWindow = !self.lockedFitToWindow;
             // 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;
         },
     })));
 }
-exports.default = CircularView;
-/*
+/**
 PLANS
 
 - tracks
@@ -319,4 +484,5 @@ PLANS
 - set viewport scroll from state snapshot
 
 */
+exports.default = stateModelFactory;
 //# sourceMappingURL=CircularView.js.map