@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.2

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -1,34 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseLinearDisplay = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const react_1 = __importDefault(require("react"));
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
@@ -39,54 +14,34 @@ const mobx_state_tree_1 = require("mobx-state-tree");
 // icons
 const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
 const BaseLinearDisplay_1 = require("../components/BaseLinearDisplay");
-const TooLargeMessage_1 = __importDefault(require("../components/TooLargeMessage"));
-const serverSideRenderedBlock_1 = __importStar(require("./serverSideRenderedBlock"));
-const util_2 = require("./util");
+const serverSideRenderedBlock_1 = __importDefault(require("./serverSideRenderedBlock"));
 const configSchema_1 = __importDefault(require("./configSchema"));
-const minDisplayHeight = 20;
+const renderSvg_1 = __importDefault(require("./renderSvg"));
+const TrackHeightMixin_1 = __importDefault(require("./TrackHeightMixin"));
+const FeatureDensityMixin_1 = __importDefault(require("./FeatureDensityMixin"));
 /**
  * #stateModel BaseLinearDisplay
+ * #category display
  * extends `BaseDisplay`
  */
 function stateModelFactory() {
     return mobx_state_tree_1.types
-        .compose('BaseLinearDisplay', models_1.BaseDisplay, mobx_state_tree_1.types.model({
-        /**
-         * #property
-         */
-        heightPreConfig: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.refinement('displayHeight', mobx_state_tree_1.types.number, n => n >= minDisplayHeight)),
+        .compose('BaseLinearDisplay', models_1.BaseDisplay, (0, TrackHeightMixin_1.default)(), (0, FeatureDensityMixin_1.default)(), mobx_state_tree_1.types.model({
         /**
          * #property
          * updated via autorun
          */
         blockState: mobx_state_tree_1.types.map(serverSideRenderedBlock_1.default),
-        /**
-         * #property
-         */
-        userBpPerPxLimit: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
-        /**
-         * #property
-         */
-        userByteSizeLimit: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
         /**
          * #property
          */
         configuration: (0, configuration_1.ConfigurationReference)(configSchema_1.default),
     }))
         .volatile(() => ({
-        currBpPerPx: 0,
-        scrollTop: 0,
-        message: '',
         featureIdUnderMouse: undefined,
         contextMenuFeature: undefined,
-        featureDensityStatsP: undefined,
-        featureDensityStats: undefined,
     }))
         .views(self => ({
-        get height() {
-            var _a;
-            return (_a = self.heightPreConfig) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'height');
-        },
         /**
          * #getter
          */
@@ -97,12 +52,11 @@ function stateModelFactory() {
          * #getter
          */
         get blockDefinitions() {
-            const { blockType } = this;
             const view = (0, util_1.getContainingView)(self);
             if (!view.initialized) {
                 throw new Error('view not initialized yet');
             }
-            return view[blockType];
+            return view[this.blockType];
         },
     }))
         .views(self => ({
@@ -194,139 +148,8 @@ function stateModelFactory() {
             });
             return ret;
         },
-        /**
-         * #getter
-         */
-        get currentBytesRequested() {
-            var _a;
-            return ((_a = self.featureDensityStats) === null || _a === void 0 ? void 0 : _a.bytes) || 0;
-        },
-        /**
-         * #getter
-         */
-        get currentFeatureScreenDensity() {
-            var _a;
-            const view = (0, util_1.getContainingView)(self);
-            return (((_a = self.featureDensityStats) === null || _a === void 0 ? void 0 : _a.featureDensity) || 0) * view.bpPerPx;
-        },
-        /**
-         * #getter
-         */
-        get maxFeatureScreenDensity() {
-            return (0, configuration_1.getConf)(self, 'maxFeatureScreenDensity');
-        },
-        /**
-         * #getter
-         */
-        get featureDensityStatsReady() {
-            return !!self.featureDensityStats || !!self.userBpPerPxLimit;
-        },
-        /**
-         * #getter
-         */
-        get maxAllowableBytes() {
-            var _a;
-            return (self.userByteSizeLimit ||
-                ((_a = self.featureDensityStats) === null || _a === void 0 ? void 0 : _a.fetchSizeLimit) ||
-                (0, configuration_1.getConf)(self, 'fetchSizeLimit'));
-        },
-    }))
-        .actions(self => ({
-        /**
-         * #action
-         */
-        setMessage(message) {
-            self.message = message;
-        },
     }))
         .actions(self => ({
-        afterAttach() {
-            // watch the parent's blocks to update our block state when they change,
-            // then we recreate the blocks on our own model (creating and deleting to
-            // match the parent blocks)
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                const blocksPresent = {};
-                const view = (0, util_1.getContainingView)(self);
-                if (view.initialized) {
-                    self.blockDefinitions.contentBlocks.forEach(block => {
-                        blocksPresent[block.key] = true;
-                        if (!self.blockState.has(block.key)) {
-                            this.addBlock(block.key, block);
-                        }
-                    });
-                    self.blockState.forEach((_, key) => {
-                        if (!blocksPresent[key]) {
-                            this.deleteBlock(key);
-                        }
-                    });
-                }
-            }));
-        },
-        /**
-         * #action
-         */
-        async getFeatureDensityStats() {
-            if (!self.featureDensityStatsP) {
-                self.featureDensityStatsP = (0, util_2.getFeatureDensityStatsPre)(self).catch(e => {
-                    this.setFeatureDensityStatsP(undefined);
-                    throw e;
-                });
-            }
-            return self.featureDensityStatsP;
-        },
-        /**
-         * #action
-         */
-        setFeatureDensityStatsP(arg) {
-            self.featureDensityStatsP = arg;
-        },
-        /**
-         * #action
-         */
-        setFeatureDensityStats(featureDensityStats) {
-            self.featureDensityStats = featureDensityStats;
-        },
-        /**
-         * #action
-         */
-        clearFeatureDensityStats() {
-            self.featureDensityStatsP = undefined;
-            self.featureDensityStats = undefined;
-        },
-        /**
-         * #action
-         */
-        setHeight(displayHeight) {
-            self.heightPreConfig =
-                displayHeight > minDisplayHeight ? displayHeight : minDisplayHeight;
-            return self.height;
-        },
-        /**
-         * #action
-         */
-        resizeHeight(distance) {
-            const oldHeight = self.height;
-            const newHeight = this.setHeight(self.height + distance);
-            return newHeight - oldHeight;
-        },
-        /**
-         * #action
-         */
-        setScrollTop(scrollTop) {
-            self.scrollTop = scrollTop;
-        },
-        /**
-         * #action
-         */
-        setFeatureDensityStatsLimit(stats) {
-            const view = (0, util_1.getContainingView)(self);
-            if (stats === null || stats === void 0 ? void 0 : stats.bytes) {
-                self.userByteSizeLimit = stats.bytes;
-            }
-            else {
-                self.userBpPerPxLimit = view.bpPerPx;
-            }
-        },
         /**
          * #action
          */
@@ -336,12 +159,6 @@ function stateModelFactory() {
                 region: block.toRegion(),
             }));
         },
-        /**
-         * #action
-         */
-        setCurrBpPerPx(n) {
-            self.currBpPerPx = n;
-        },
         /**
          * #action
          */
@@ -377,52 +194,12 @@ function stateModelFactory() {
         setFeatureIdUnderMouse(feature) {
             self.featureIdUnderMouse = feature;
         },
-        /**
-         * #action
-         */
-        reload() {
-            ;
-            [...self.blockState.values()].map(val => val.doReload());
-        },
         /**
          * #action
          */
         setContextMenuFeature(feature) {
             self.contextMenuFeature = feature;
         },
-    }))
-        .views(self => ({
-        /**
-         * #getter
-         * region is too large if:
-         * - stats are ready
-         * - region is greater than 20kb (don't warn when zoomed in less than that)
-         * - and bytes is greater than max allowed bytes or density greater than max
-         *   density
-         */
-        get regionTooLarge() {
-            const view = (0, util_1.getContainingView)(self);
-            if (!self.featureDensityStatsReady ||
-                view.dynamicBlocks.totalBp < 20000) {
-                return false;
-            }
-            return (self.currentBytesRequested > self.maxAllowableBytes ||
-                (self.userBpPerPxLimit
-                    ? view.bpPerPx > self.userBpPerPxLimit
-                    : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity));
-        },
-        /**
-         * #getter
-         * only shows a message of bytes requested is defined, the feature density
-         * based stats don't produce any helpful message besides to zoom in
-         */
-        get regionTooLargeReason() {
-            const req = self.currentBytesRequested;
-            const max = self.maxAllowableBytes;
-            return req && req > max
-                ? `Requested too much data (${(0, util_2.getDisplayStr)(req)})`
-                : '';
-        },
     }))
         .actions(self => {
         const { reload: superReload } = self;
@@ -432,88 +209,14 @@ function stateModelFactory() {
              */
             async reload() {
                 self.setError();
-                const view = (0, util_1.getContainingView)(self);
-                // extra check for contentBlocks.length
-                // https://github.com/GMOD/jbrowse-components/issues/2694
-                if (!view.initialized || !view.staticBlocks.contentBlocks.length) {
-                    return;
-                }
-                try {
-                    const featureDensityStats = await self.getFeatureDensityStats();
-                    if ((0, mobx_state_tree_1.isAlive)(self)) {
-                        self.setFeatureDensityStats(featureDensityStats);
-                        superReload();
-                    }
-                }
-                catch (e) {
-                    console.error(e);
-                    self.setError(e);
-                }
+                self.setCurrStatsBpPerPx(0);
+                self.clearFeatureDensityStats();
+                [...self.blockState.values()].map(val => val.doReload());
+                superReload();
             },
         };
     })
-        .actions(self => ({
-        afterAttach() {
-            // this autorun performs stats estimation
-            //
-            // the chain of events calls getFeatureDensityStats against the data
-            // adapter which by default uses featureDensity, but can also respond
-            // with a byte size estimate and fetch size limit (data adapter can
-            // define what is too much data)
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
-                var _a;
-                try {
-                    const view = (0, util_1.getContainingView)(self);
-                    // extra check for contentBlocks.length
-                    // https://github.com/GMOD/jbrowse-components/issues/2694
-                    if (!view.initialized ||
-                        !view.staticBlocks.contentBlocks.length) {
-                        return;
-                    }
-                    // don't re-estimate featureDensity even if zoom level changes,
-                    // jbrowse1-style assume it's sort of representative
-                    if (((_a = self.featureDensityStats) === null || _a === void 0 ? void 0 : _a.featureDensity) !== undefined) {
-                        self.setCurrBpPerPx(view.bpPerPx);
-                        return;
-                    }
-                    // we estimate stats once at a given zoom level
-                    if (view.bpPerPx === self.currBpPerPx) {
-                        return;
-                    }
-                    self.clearFeatureDensityStats();
-                    self.setCurrBpPerPx(view.bpPerPx);
-                    const featureDensityStats = await self.getFeatureDensityStats();
-                    if ((0, mobx_state_tree_1.isAlive)(self)) {
-                        self.setFeatureDensityStats(featureDensityStats);
-                    }
-                }
-                catch (e) {
-                    if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(self)) {
-                        console.error(e);
-                        self.setError(e);
-                    }
-                }
-            }));
-        },
-    }))
         .views(self => ({
-        /**
-         * #method
-         */
-        regionCannotBeRenderedText(_region) {
-            return self.regionTooLarge ? 'Force load to see features' : '';
-        },
-        /**
-         * #method
-         * @param region -
-         * @returns falsy if the region is fine to try rendering. Otherwise,
-         *  return a react node + string of text.
-         *  string of text describes why it cannot be rendered
-         *  react node allows user to force load at current setting
-         */
-        regionCannotBeRendered(_region) {
-            return self.regionTooLarge ? react_1.default.createElement(TooLargeMessage_1.default, { model: self }) : null;
-        },
         /**
          * #method
          */
@@ -544,10 +247,9 @@ function stateModelFactory() {
          * #method
          */
         renderProps() {
-            const view = (0, util_1.getContainingView)(self);
             return {
                 ...(0, tracks_1.getParentRenderProps)(self),
-                notReady: self.currBpPerPx !== view.bpPerPx || !self.featureDensityStatsReady,
+                notReady: !self.featureDensityStatsReady,
                 rpcDriverName: self.rpcDriverName,
                 displayModel: self,
                 onFeatureClick(_, featureId) {
@@ -594,53 +296,30 @@ function stateModelFactory() {
          * #method
          */
         async renderSvg(opts) {
-            const { height, id } = self;
-            const { overrideHeight } = opts;
-            const view = (0, util_1.getContainingView)(self);
-            const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view;
-            const renderings = await Promise.all(roundedDynamicBlocks.map(async (block) => {
-                const blockState = serverSideRenderedBlock_1.default.create({
-                    key: block.key,
-                    region: block,
-                });
-                // regionCannotBeRendered can return jsx so look for plaintext
-                // version, or just get the default if none available
-                const cannotBeRenderedReason = self.regionCannotBeRenderedText(block) ||
-                    self.regionCannotBeRendered(block);
-                if (cannotBeRenderedReason) {
-                    return [
-                        block,
-                        {
-                            reactElement: (react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: 20, fill: "#aaa" }),
-                                react_1.default.createElement("text", { x: 0, y: 15 }, cannotBeRenderedReason))),
-                        },
-                    ];
+            return (0, renderSvg_1.default)(self, opts);
+        },
+        afterAttach() {
+            // watch the parent's blocks to update our block state when they change,
+            // then we recreate the blocks on our own model (creating and deleting to
+            // match the parent blocks)
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                const blocksPresent = {};
+                const view = (0, util_1.getContainingView)(self);
+                if (!view.initialized) {
+                    return;
                 }
-                const { rpcManager, renderArgs, renderProps, rendererType } = (0, serverSideRenderedBlock_1.renderBlockData)(blockState, self);
-                return [
-                    block,
-                    await rendererType.renderInClient(rpcManager, {
-                        ...renderArgs,
-                        ...renderProps,
-                        viewParams: (0, util_1.getViewParams)(self, true),
-                        exportSVG: opts,
-                        theme: opts.theme || renderProps.theme,
-                    }),
-                ];
+                self.blockDefinitions.contentBlocks.forEach(block => {
+                    blocksPresent[block.key] = true;
+                    if (!self.blockState.has(block.key)) {
+                        self.addBlock(block.key, block);
+                    }
+                });
+                self.blockState.forEach((_, key) => {
+                    if (!blocksPresent[key]) {
+                        self.deleteBlock(key);
+                    }
+                });
             }));
-            return (react_1.default.createElement(react_1.default.Fragment, null, renderings.map(([block, rendering], index) => {
-                const { offsetPx, widthPx } = block;
-                const offset = offsetPx - viewOffsetPx;
-                const clipid = (0, util_2.getId)(id, index);
-                return (react_1.default.createElement(react_1.default.Fragment, { key: `frag-${index}` },
-                    react_1.default.createElement("defs", null,
-                        react_1.default.createElement("clipPath", { id: clipid },
-                            react_1.default.createElement("rect", { x: 0, y: 0, width: widthPx, height: overrideHeight || height }))),
-                    react_1.default.createElement("g", { transform: `translate(${offset} 0)` },
-                        react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
-                            react_1.default.createElement(util_1.ReactRendering, { rendering: rendering })))));
-            })));
         },
     }))
         .preProcessSnapshot(snap => {
@@ -661,4 +340,3 @@ function stateModelFactory() {
     });
 }
 exports.BaseLinearDisplay = stateModelFactory();
-//# sourceMappingURL=BaseLinearDisplayModel.js.map

package/dist/BaseLinearDisplay/models/FeatureDensityMixin.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { Region } from '@jbrowse/core/util/types';
+/**
+ * #stateModel FeatureDensityMixin
+ * #category display
+ */
+export default function FeatureDensityMixin(): import("mobx-state-tree").IModelType<{
+    /**
+     * #property
+     */
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    /**
+     * #property
+     */
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+}, {
+    featureDensityStatsP: Promise<FeatureDensityStats> | undefined;
+    featureDensityStats: FeatureDensityStats | undefined;
+    currStatsBpPerPx: number;
+} & {
+    /**
+     * #getter
+     */
+    readonly currentBytesRequested: number;
+    /**
+     * #getter
+     */
+    readonly currentFeatureScreenDensity: number;
+    /**
+     * #getter
+     */
+    readonly maxFeatureScreenDensity: any;
+    /**
+     * #getter
+     */
+    readonly featureDensityStatsReady: boolean;
+    /**
+     * #getter
+     */
+    readonly maxAllowableBytes: number;
+} & {
+    afterAttach(): void;
+} & {
+    /**
+     * #action
+     */
+    setCurrStatsBpPerPx(n: number): void;
+    /**
+     * #action
+     */
+    setFeatureDensityStatsLimit(stats?: FeatureDensityStats): void;
+    /**
+     * #action
+     */
+    getFeatureDensityStats(): Promise<FeatureDensityStats>;
+    /**
+     * #action
+     */
+    setFeatureDensityStatsP(arg: any): void;
+    /**
+     * #action
+     */
+    setFeatureDensityStats(featureDensityStats?: FeatureDensityStats): void;
+    /**
+     * #action
+     */
+    clearFeatureDensityStats(): void;
+} & {
+    /**
+     * #getter
+     * region is too large if:
+     * - stats are ready
+     * - region is greater than 20kb (don't warn when zoomed in less than that)
+     * - and bytes is greater than max allowed bytes or density greater than max
+     *   density
+     */
+    readonly regionTooLarge: boolean;
+    /**
+     * #getter
+     * only shows a message of bytes requested is defined, the feature density
+     * based stats don't produce any helpful message besides to zoom in
+     */
+    readonly regionTooLargeReason: string;
+} & {
+    /**
+     * #method
+     */
+    regionCannotBeRenderedText(_region: Region): "" | "Force load to see features";
+    /**
+     * #method
+     * @param region -
+     * @returns falsy if the region is fine to try rendering. Otherwise,
+     *  return a react node + string of text.
+     *  string of text describes why it cannot be rendered
+     *  react node allows user to force load at current setting
+     */
+    regionCannotBeRendered(_region: Region): React.JSX.Element | null;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;