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

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
-import { isAbortException, getContainingView, getContainingTrack, getSession, getViewParams, isSelectionContainer, isSessionModelWithWidgets, isFeature, ReactRendering, } from '@jbrowse/core/util';
+import { ConfigurationReference } from '@jbrowse/core/configuration';
+import { getContainingView, getContainingTrack, getSession, isSelectionContainer, isSessionModelWithWidgets, isFeature, } from '@jbrowse/core/util';
 import CompositeMap from '@jbrowse/core/util/compositeMap';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import { autorun } from 'mobx';
@@ -10,54 +8,34 @@ import { addDisposer, isAlive, types } from 'mobx-state-tree';
 // icons
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import { Tooltip } from '../components/BaseLinearDisplay';
-import TooLargeMessage from '../components/TooLargeMessage';
-import BlockState, { renderBlockData } from './serverSideRenderedBlock';
-import { getId, getDisplayStr, getFeatureDensityStatsPre } from './util';
+import BlockState from './serverSideRenderedBlock';
 import configSchema from './configSchema';
-const minDisplayHeight = 20;
+import renderBaseLinearDisplaySvg from './renderSvg';
+import TrackHeightMixin from './TrackHeightMixin';
+import FeatureDensityMixin from './FeatureDensityMixin';
 /**
  * #stateModel BaseLinearDisplay
+ * #category display
  * extends `BaseDisplay`
  */
 function stateModelFactory() {
     return types
-        .compose('BaseLinearDisplay', BaseDisplay, types.model({
-        /**
-         * #property
-         */
-        heightPreConfig: types.maybe(types.refinement('displayHeight', types.number, n => n >= minDisplayHeight)),
+        .compose('BaseLinearDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
         /**
          * #property
          * updated via autorun
          */
         blockState: types.map(BlockState),
-        /**
-         * #property
-         */
-        userBpPerPxLimit: types.maybe(types.number),
-        /**
-         * #property
-         */
-        userByteSizeLimit: types.maybe(types.number),
         /**
          * #property
          */
         configuration: ConfigurationReference(configSchema),
     }))
         .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 : getConf(self, 'height');
-        },
         /**
          * #getter
          */
@@ -68,12 +46,11 @@ function stateModelFactory() {
          * #getter
          */
         get blockDefinitions() {
-            const { blockType } = this;
             const view = getContainingView(self);
             if (!view.initialized) {
                 throw new Error('view not initialized yet');
             }
-            return view[blockType];
+            return view[this.blockType];
         },
     }))
         .views(self => ({
@@ -165,139 +142,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 = getContainingView(self);
-            return (((_a = self.featureDensityStats) === null || _a === void 0 ? void 0 : _a.featureDensity) || 0) * view.bpPerPx;
-        },
-        /**
-         * #getter
-         */
-        get maxFeatureScreenDensity() {
-            return 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) ||
-                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)
-            addDisposer(self, autorun(() => {
-                const blocksPresent = {};
-                const view = 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 = 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 = getContainingView(self);
-            if (stats === null || stats === void 0 ? void 0 : stats.bytes) {
-                self.userByteSizeLimit = stats.bytes;
-            }
-            else {
-                self.userBpPerPxLimit = view.bpPerPx;
-            }
-        },
         /**
          * #action
          */
@@ -307,12 +153,6 @@ function stateModelFactory() {
                 region: block.toRegion(),
             }));
         },
-        /**
-         * #action
-         */
-        setCurrBpPerPx(n) {
-            self.currBpPerPx = n;
-        },
         /**
          * #action
          */
@@ -348,52 +188,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 = 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 (${getDisplayStr(req)})`
-                : '';
-        },
     }))
         .actions(self => {
         const { reload: superReload } = self;
@@ -403,88 +203,14 @@ function stateModelFactory() {
              */
             async reload() {
                 self.setError();
-                const view = 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 (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)
-            addDisposer(self, autorun(async () => {
-                var _a;
-                try {
-                    const view = 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 (isAlive(self)) {
-                        self.setFeatureDensityStats(featureDensityStats);
-                    }
-                }
-                catch (e) {
-                    if (!isAbortException(e) && 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.createElement(TooLargeMessage, { model: self }) : null;
-        },
         /**
          * #method
          */
@@ -515,10 +241,9 @@ function stateModelFactory() {
          * #method
          */
         renderProps() {
-            const view = getContainingView(self);
             return {
                 ...getParentRenderProps(self),
-                notReady: self.currBpPerPx !== view.bpPerPx || !self.featureDensityStatsReady,
+                notReady: !self.featureDensityStatsReady,
                 rpcDriverName: self.rpcDriverName,
                 displayModel: self,
                 onFeatureClick(_, featureId) {
@@ -565,53 +290,30 @@ function stateModelFactory() {
          * #method
          */
         async renderSvg(opts) {
-            const { height, id } = self;
-            const { overrideHeight } = opts;
-            const view = getContainingView(self);
-            const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view;
-            const renderings = await Promise.all(roundedDynamicBlocks.map(async (block) => {
-                const blockState = BlockState.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.createElement(React.Fragment, null,
-                                React.createElement("rect", { x: 0, y: 0, width: width, height: 20, fill: "#aaa" }),
-                                React.createElement("text", { x: 0, y: 15 }, cannotBeRenderedReason))),
-                        },
-                    ];
+            return renderBaseLinearDisplaySvg(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)
+            addDisposer(self, autorun(() => {
+                const blocksPresent = {};
+                const view = getContainingView(self);
+                if (!view.initialized) {
+                    return;
                 }
-                const { rpcManager, renderArgs, renderProps, rendererType } = renderBlockData(blockState, self);
-                return [
-                    block,
-                    await rendererType.renderInClient(rpcManager, {
-                        ...renderArgs,
-                        ...renderProps,
-                        viewParams: 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.createElement(React.Fragment, null, renderings.map(([block, rendering], index) => {
-                const { offsetPx, widthPx } = block;
-                const offset = offsetPx - viewOffsetPx;
-                const clipid = getId(id, index);
-                return (React.createElement(React.Fragment, { key: `frag-${index}` },
-                    React.createElement("defs", null,
-                        React.createElement("clipPath", { id: clipid },
-                            React.createElement("rect", { x: 0, y: 0, width: widthPx, height: overrideHeight || height }))),
-                    React.createElement("g", { transform: `translate(${offset} 0)` },
-                        React.createElement("g", { clipPath: `url(#${clipid})` },
-                            React.createElement(ReactRendering, { rendering: rendering })))));
-            })));
         },
     }))
         .preProcessSnapshot(snap => {
@@ -632,4 +334,3 @@ function stateModelFactory() {
     });
 }
 export const BaseLinearDisplay = stateModelFactory();
-//# sourceMappingURL=BaseLinearDisplayModel.js.map

package/esm/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>;