@jbrowse/plugin-circular-view 2.17.0 → 3.0.0

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

@@ -15,121 +15,64 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const mst_1 = require("@jbrowse/core/util/types/mst");
-const mobx_1 = require("mobx");
-const file_saver_1 = require("file-saver");
 const configuration_1 = require("@jbrowse/core/configuration");
-const util_1 = require("@jbrowse/core/util");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
-// icons
 const Icons_1 = require("@jbrowse/core/ui/Icons");
+const util_1 = require("@jbrowse/core/util");
 const FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
 const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
-// locals
+const file_saver_1 = require("file-saver");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const slices_1 = require("./slices");
 const viewportVisibleRegion_1 = require("./viewportVisibleRegion");
-// lazies
-const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/ExportSvgDialog'))));
-/**
- * #stateModel CircularView
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
+const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
 function stateModelFactory(pluginManager) {
     const minHeight = 40;
     const minWidth = 100;
     const defaultHeight = 400;
     return mobx_state_tree_1.types
         .compose('CircularView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
-        /**
-         * #property
-         */
         type: mobx_state_tree_1.types.literal('CircularView'),
-        /**
-         * #property
-         * similar to offsetPx in linear genome view
-         */
         offsetRadians: -Math.PI / 2,
-        /**
-         * #property
-         */
         bpPerPx: 200,
-        /**
-         * #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
-         */
+        height: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, defaultHeight),
+        displayedRegions: mobx_state_tree_1.types.optional(mobx_state_tree_1.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(() => ({
@@ -137,25 +80,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 (0, viewportVisibleRegion_1.viewportVisibleSection)([scrollX, scrollX + width, scrollY, scrollY + height], this.centerXY, this.radiusPx);
         },
-        /**
-         * #getter
-         */
         get circumferencePx() {
             let elidedBp = 0;
             for (const r of this.elidedRegions) {
@@ -163,33 +97,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) {
@@ -197,80 +116,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 (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];
         },
-        /**
-         * #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 });
@@ -285,11 +170,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) {
@@ -298,9 +181,6 @@ function stateModelFactory(pluginManager) {
             }
             return visible;
         },
-        /**
-         * #getter
-         */
         get assemblyNames() {
             const assemblyNames = [];
             self.displayedRegions.forEach(displayedRegion => {
@@ -310,9 +190,6 @@ function stateModelFactory(pluginManager) {
             });
             return assemblyNames;
         },
-        /**
-         * #getter
-         */
         get initialized() {
             const { assemblyManager } = (0, util_1.getSession)(self);
             return (self.volatileWidth !== undefined &&
@@ -320,107 +197,62 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get staticSlices() {
             return (0, slices_1.calculateStaticSlices)(self);
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get visibleStaticSlices() {
             return self.staticSlices.filter(s => (0, slices_1.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 = (0, util_1.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 = (0, mobx_state_tree_1.cast)(regions);
@@ -431,9 +263,6 @@ function stateModelFactory(pluginManager) {
                 this.setBpPerPx(self.bpPerPx);
             }
         },
-        /**
-         * #action
-         */
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = (0, util_1.getSession)(self);
@@ -445,9 +274,6 @@ function stateModelFactory(pluginManager) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
-        /**
-         * #action
-         */
         toggleTrack(trackId) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
@@ -456,15 +282,9 @@ function stateModelFactory(pluginManager) {
             }
             return false;
         },
-        /**
-         * #action
-         */
         setError(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);
@@ -483,9 +303,6 @@ function stateModelFactory(pluginManager) {
             });
             self.tracks.push(track);
         },
-        /**
-         * #action
-         */
         addTrackConf(configuration, initialSnapshot = {}) {
             const { type } = configuration;
             const name = (0, configuration_1.readConfObject)(configuration, 'name');
@@ -504,9 +321,6 @@ function stateModelFactory(pluginManager) {
                 displays: [{ type: displayConf.type, configuration: displayConf }],
             }));
         },
-        /**
-         * #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);
@@ -516,32 +330,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 Promise.resolve().then(() => __importStar(require('../svgcomponents/SVGCircularView')));
+            const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGCircularView')));
             const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             (0, file_saver_1.saveAs)(blob, opts.filename || 'image.svg');
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         * return the view menu items
-         */
         menuItems() {
             return [
                 {

package/dist/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/dist/CircularView/svgcomponents/SVGBackground.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export default function SVGBackground({ width, height, shift, }: {
     width: number;
     height: number;
     shift: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/CircularView/svgcomponents/SVGBackground.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SVGBackground;
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
+    return ((0, jsx_runtime_1.jsx)("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
 }

package/dist/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/dist/CircularView/svgcomponents/SVGCircularView.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = renderToSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_1 = require("mobx");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 const Ruler_1 = __importDefault(require("../components/Ruler"));
 async function renderToSvg(model, opts) {
@@ -18,7 +18,6 @@ async function renderToSvg(model, opts) {
     const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
-    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const { width, tracks, height } = model;
     const shift = 50;
     const displayResults = await Promise.all(tracks.map(async (track) => {
@@ -28,16 +27,5 @@ async function renderToSvg(model, opts) {
     }));
     const { staticSlices, offsetRadians, centerXY } = model;
     const deg = (0, util_1.radToDeg)(offsetRadians);
-    // the xlink namespace is used for rendering <image> tag
-    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.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_1.default.createElement(SVGBackground_1.default, { width: width, height: height, shift: shift }),
-                react_1.default.createElement("g", { transform: `translate(${centerXY}) rotate(${deg})` },
-                    staticSlices.map((slice, i) => (
-                    /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                    react_1.default.createElement(Ruler_1.default, { key: i, model: model, slice: slice }))),
-                    displayResults.map(({ result }, i) => (
-                    /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                    react_1.default.createElement(react_1.default.Fragment, { key: i }, result))))))), createRootFn);
+    return (0, util_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme), children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)("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(), children: [(0, jsx_runtime_1.jsx)(SVGBackground_1.default, { width: width, height: height, shift: shift }), (0, jsx_runtime_1.jsxs)("g", { transform: `translate(${centerXY}) rotate(${deg})`, children: [staticSlices.map((slice, i) => ((0, jsx_runtime_1.jsx)(Ruler_1.default, { model: model, slice: slice }, i))), displayResults.map(({ result }, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: result }, i)))] })] }) }) }));
 }