@jbrowse/plugin-linear-genome-view 2.1.6 → 2.2.0

package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import TooLargeMessage from './TooLargeMessage';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import { getConf } from '@jbrowse/core/configuration';
 import { isAbortException, getContainingView, getContainingTrack, getSession, getViewParams, isSelectionContainer, isSessionModelWithWidgets, } from '@jbrowse/core/util';
@@ -11,6 +10,8 @@ import { autorun } from 'mobx';
 import { addDisposer, isAlive, types } from 'mobx-state-tree';
 // icons
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+// locals
+import TooLargeMessage from './TooLargeMessage';
 import { Tooltip } from '../components/BaseLinearDisplay';
 import BlockState, { renderBlockData } from './serverSideRenderedBlock';
 // stabilize clipid under test for snapshot
@@ -33,492 +34,627 @@ function getDisplayStr(totalBytes) {
 }
 const minDisplayHeight = 20;
 const defaultDisplayHeight = 100;
-export const BaseLinearDisplay = types
-    .compose('BaseLinearDisplay', BaseDisplay, types.model({
-    height: types.optional(types.refinement('displayHeight', types.number, n => n >= minDisplayHeight), defaultDisplayHeight),
-    blockState: types.map(BlockState),
-    userBpPerPxLimit: types.maybe(types.number),
-    userByteSizeLimit: types.maybe(types.number),
-}))
-    .volatile(() => ({
-    currBpPerPx: 0,
-    message: '',
-    featureIdUnderMouse: undefined,
-    contextMenuFeature: undefined,
-    scrollTop: 0,
-    estimatedRegionStatsP: undefined,
-    estimatedRegionStats: undefined,
-}))
-    .views(self => ({
-    get blockType() {
-        return 'staticBlocks';
-    },
-    get blockDefinitions() {
-        const { blockType } = this;
-        const view = getContainingView(self);
-        if (!view.initialized) {
-            throw new Error('view not initialized yet');
-        }
-        return view[blockType];
-    },
-}))
-    .views(self => ({
-    /**
-     * how many milliseconds to wait for the display to
-     * "settle" before re-rendering a block
-     */
-    get renderDelay() {
-        return 50;
-    },
-    get TooltipComponent() {
-        return Tooltip;
-    },
-    /**
-     * returns a string feature ID if the globally-selected object
-     * is probably a feature
-     */
-    get selectedFeatureId() {
-        if (isAlive(self)) {
-            const { selection } = getSession(self);
-            // does it quack like a feature?
-            if (isFeature(selection)) {
-                return selection.id();
+/**
+ * #stateModel BaseLinearDisplay
+ * extends `BaseDisplay`
+ */
+function stateModelFactory() {
+    return types
+        .compose('BaseLinearDisplay', BaseDisplay, types.model({
+        /**
+         * #property
+         */
+        height: types.optional(types.refinement('displayHeight', types.number, n => n >= minDisplayHeight), defaultDisplayHeight),
+        /**
+         * #property
+         * updated via autorun
+         */
+        blockState: types.map(BlockState),
+        /**
+         * #property
+         */
+        userBpPerPxLimit: types.maybe(types.number),
+        /**
+         * #property
+         */
+        userByteSizeLimit: types.maybe(types.number),
+    }))
+        .volatile(() => ({
+        currBpPerPx: 0,
+        message: '',
+        featureIdUnderMouse: undefined,
+        contextMenuFeature: undefined,
+        scrollTop: 0,
+        estimatedRegionStatsP: undefined,
+        estimatedRegionStats: undefined,
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get blockType() {
+            return 'staticBlocks';
+        },
+        /**
+         * #getter
+         */
+        get blockDefinitions() {
+            const { blockType } = this;
+            const view = getContainingView(self);
+            if (!view.initialized) {
+                throw new Error('view not initialized yet');
             }
-        }
-        return undefined;
-    },
-    /**
-     * if a display-level message should be displayed instead of the blocks,
-     * make this return a react component
-     */
-    get DisplayMessageComponent() {
-        return undefined;
-    },
-}))
-    .views(self => ({
-    /**
-     * a CompositeMap of `featureId -> feature obj` that
-     * just looks in all the block data for that feature
-     */
-    get features() {
-        const featureMaps = [];
-        for (const block of self.blockState.values()) {
-            if (block && block.features) {
-                featureMaps.push(block.features);
+            return view[blockType];
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         * how many milliseconds to wait for the display to
+         * "settle" before re-rendering a block
+         */
+        get renderDelay() {
+            return 50;
+        },
+        /**
+         * #getter
+         */
+        get TooltipComponent() {
+            return Tooltip;
+        },
+        /**
+         * #getter
+         * returns a string feature ID if the globally-selected object
+         * is probably a feature
+         */
+        get selectedFeatureId() {
+            if (isAlive(self)) {
+                const { selection } = getSession(self);
+                // does it quack like a feature?
+                if (isFeature(selection)) {
+                    return selection.id();
+                }
             }
-        }
-        return new CompositeMap(featureMaps);
-    },
-    get featureUnderMouse() {
-        const feat = self.featureIdUnderMouse;
-        return feat ? this.features.get(feat) : undefined;
-    },
-    getFeatureOverlapping(blockKey, x, y) {
-        var _a, _b;
-        return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByCoord(x, y);
-    },
-    getFeatureByID(blockKey, id) {
-        var _a, _b;
-        return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByID(id);
-    },
-    // if block key is not supplied, can look at all blocks
-    searchFeatureByID(id) {
-        let ret;
-        self.blockState.forEach(block => {
-            var _a;
-            const val = (_a = block === null || block === void 0 ? void 0 : block.layout) === null || _a === void 0 ? void 0 : _a.getByID(id);
-            if (val) {
-                ret = val;
+            return undefined;
+        },
+        /**
+         * #getter
+         * if a display-level message should be displayed instead of the blocks,
+         * make this return a react component
+         */
+        get DisplayMessageComponent() {
+            return undefined;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         * a CompositeMap of `featureId -> feature obj` that
+         * just looks in all the block data for that feature
+         */
+        get features() {
+            const featureMaps = [];
+            for (const block of self.blockState.values()) {
+                if (block && block.features) {
+                    featureMaps.push(block.features);
+                }
             }
-        });
-        return ret;
-    },
-    get currentBytesRequested() {
-        var _a;
-        return ((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.bytes) || 0;
-    },
-    get currentFeatureScreenDensity() {
-        var _a;
-        const view = getContainingView(self);
-        return (((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.featureDensity) || 0) * view.bpPerPx;
-    },
-    get maxFeatureScreenDensity() {
-        return getConf(self, 'maxFeatureScreenDensity');
-    },
-    get estimatedStatsReady() {
-        return !!self.estimatedRegionStats;
-    },
-    get maxAllowableBytes() {
-        var _a;
-        return (self.userByteSizeLimit ||
-            ((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.fetchSizeLimit) ||
-            getConf(self, 'fetchSizeLimit'));
-    },
-}))
-    .actions(self => ({
-    // base display reload does nothing, see specialized displays for details
-    setMessage(message) {
-        self.message = message;
-    },
-    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)
-        const blockWatchDisposer = autorun(() => {
-            const blocksPresent = {};
+            return new CompositeMap(featureMaps);
+        },
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            const feat = self.featureIdUnderMouse;
+            return feat ? this.features.get(feat) : undefined;
+        },
+        /**
+         * #getter
+         */
+        getFeatureOverlapping(blockKey, x, y) {
+            var _a, _b;
+            return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByCoord(x, y);
+        },
+        /**
+         * #getter
+         */
+        getFeatureByID(blockKey, id) {
+            var _a, _b;
+            return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByID(id);
+        },
+        /**
+         * #getter
+         */
+        searchFeatureByID(id) {
+            let ret;
+            self.blockState.forEach(block => {
+                var _a;
+                const val = (_a = block === null || block === void 0 ? void 0 : block.layout) === null || _a === void 0 ? void 0 : _a.getByID(id);
+                if (val) {
+                    ret = val;
+                }
+            });
+            return ret;
+        },
+        /**
+         * #getter
+         */
+        get currentBytesRequested() {
+            var _a;
+            return ((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.bytes) || 0;
+        },
+        /**
+         * #getter
+         */
+        get currentFeatureScreenDensity() {
+            var _a;
             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);
-                    }
-                });
-            }
-        });
-        addDisposer(self, blockWatchDisposer);
-    },
-    estimateRegionsStats(regions, opts) {
-        if (self.estimatedRegionStatsP) {
-            return self.estimatedRegionStatsP;
-        }
-        const { rpcManager } = getSession(self);
-        const { adapterConfig } = self;
-        if (!adapterConfig) {
-            // A track extending the base track might not have an adapter config
-            // e.g. Apollo tracks don't use adapters
-            return Promise.resolve({});
-        }
-        const sessionId = getRpcSessionId(self);
-        const params = {
-            sessionId,
-            regions,
-            adapterConfig,
-            statusCallback: (message) => {
-                if (isAlive(self)) {
-                    this.setMessage(message);
+            return (((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.featureDensity) || 0) * view.bpPerPx;
+        },
+        /**
+         * #getter
+         */
+        get maxFeatureScreenDensity() {
+            return getConf(self, 'maxFeatureScreenDensity');
+        },
+        /**
+         * #getter
+         */
+        get estimatedStatsReady() {
+            return !!self.estimatedRegionStats;
+        },
+        /**
+         * #getter
+         */
+        get maxAllowableBytes() {
+            var _a;
+            return (self.userByteSizeLimit ||
+                ((_a = self.estimatedRegionStats) === null || _a === void 0 ? void 0 : _a.fetchSizeLimit) ||
+                getConf(self, 'fetchSizeLimit'));
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setMessage(message) {
+            self.message = message;
+        },
+        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)
+            const blockWatchDisposer = 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);
+                        }
+                    });
                 }
-            },
-            ...opts,
-        };
-        self.estimatedRegionStatsP = rpcManager
-            .call(sessionId, 'CoreEstimateRegionStats', params)
-            .catch(e => {
-            this.setRegionStatsP(undefined);
-            throw e;
-        });
-        return self.estimatedRegionStatsP;
-    },
-    setRegionStatsP(p) {
-        self.estimatedRegionStatsP = p;
-    },
-    setRegionStats(estimatedRegionStats) {
-        self.estimatedRegionStats = estimatedRegionStats;
-    },
-    clearRegionStats() {
-        self.estimatedRegionStatsP = undefined;
-        self.estimatedRegionStats = undefined;
-    },
-    setHeight(displayHeight) {
-        if (displayHeight > minDisplayHeight) {
-            self.height = displayHeight;
-        }
-        else {
-            self.height = minDisplayHeight;
-        }
-        return self.height;
-    },
-    resizeHeight(distance) {
-        const oldHeight = self.height;
-        const newHeight = this.setHeight(self.height + distance);
-        return newHeight - oldHeight;
-    },
-    setScrollTop(scrollTop) {
-        self.scrollTop = scrollTop;
-    },
-    updateStatsLimit(stats) {
-        const view = getContainingView(self);
-        if (stats.bytes) {
-            self.userByteSizeLimit = stats.bytes;
-        }
-        else {
-            self.userBpPerPxLimit = view.bpPerPx;
-        }
-    },
-    addBlock(key, block) {
-        self.blockState.set(key, BlockState.create({
-            key,
-            region: block.toRegion(),
-        }));
-    },
-    setCurrBpPerPx(n) {
-        self.currBpPerPx = n;
-    },
-    deleteBlock(key) {
-        self.blockState.delete(key);
-    },
-    selectFeature(feature) {
-        const session = getSession(self);
-        if (isSessionModelWithWidgets(session)) {
-            const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
-                view: getContainingView(self),
-                track: getContainingTrack(self),
-                featureData: feature.toJSON(),
             });
-            session.showWidget(featureWidget);
-        }
-        if (isSelectionContainer(session)) {
-            session.setSelection(feature);
-        }
-    },
-    clearFeatureSelection() {
-        const session = getSession(self);
-        session.clearSelection();
-    },
-    setFeatureIdUnderMouse(feature) {
-        self.featureIdUnderMouse = feature;
-    },
-    reload() {
-        ;
-        [...self.blockState.values()].map(val => val.doReload());
-    },
-    setContextMenuFeature(feature) {
-        self.contextMenuFeature = feature;
-    },
-}))
-    .views(self => ({
-    // region is too large if:
-    // - stats are ready
-    // - region is greater than 20kb (don't warn when zoomed in less than that)
-    // - and bytes > max allowed bytes || curr density>max density
-    get regionTooLarge() {
-        const view = getContainingView(self);
-        if (!self.estimatedStatsReady || view.dynamicBlocks.totalBp < 20000) {
-            return false;
-        }
-        const bpLimitOrDensity = self.userBpPerPxLimit
-            ? view.bpPerPx > self.userBpPerPxLimit
-            : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity;
-        return (self.currentBytesRequested > self.maxAllowableBytes || bpLimitOrDensity);
-    },
-    // 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;
-    return {
-        async reload() {
-            self.setError();
-            const aborter = new AbortController();
+            addDisposer(self, blockWatchDisposer);
+        },
+        /**
+         * #action
+         */
+        estimateRegionsStats(regions, opts) {
+            if (self.estimatedRegionStatsP) {
+                return self.estimatedRegionStatsP;
+            }
+            const { rpcManager } = getSession(self);
+            const { adapterConfig } = self;
+            if (!adapterConfig) {
+                // A track extending the base track might not have an adapter config
+                // e.g. Apollo tracks don't use adapters
+                return Promise.resolve({});
+            }
+            const sessionId = getRpcSessionId(self);
+            const params = {
+                sessionId,
+                regions,
+                adapterConfig,
+                statusCallback: (message) => {
+                    if (isAlive(self)) {
+                        this.setMessage(message);
+                    }
+                },
+                ...opts,
+            };
+            self.estimatedRegionStatsP = rpcManager
+                .call(sessionId, 'CoreEstimateRegionStats', params)
+                .catch(e => {
+                this.setRegionStatsP(undefined);
+                throw e;
+            });
+            return self.estimatedRegionStatsP;
+        },
+        /**
+         * #action
+         */
+        setRegionStatsP(p) {
+            self.estimatedRegionStatsP = p;
+        },
+        /**
+         * #action
+         */
+        setRegionStats(estimatedRegionStats) {
+            self.estimatedRegionStats = estimatedRegionStats;
+        },
+        /**
+         * #action
+         */
+        clearRegionStats() {
+            self.estimatedRegionStatsP = undefined;
+            self.estimatedRegionStats = undefined;
+        },
+        /**
+         * #action
+         */
+        setHeight(displayHeight) {
+            if (displayHeight > minDisplayHeight) {
+                self.height = displayHeight;
+            }
+            else {
+                self.height = 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
+         */
+        updateStatsLimit(stats) {
             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;
+            if (stats.bytes) {
+                self.userByteSizeLimit = stats.bytes;
             }
-            try {
-                self.estimatedRegionStatsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, { signal: aborter.signal });
-                const estimatedRegionStats = await self.estimatedRegionStatsP;
-                if (isAlive(self)) {
-                    self.setRegionStats(estimatedRegionStats);
-                    superReload();
-                }
-                else {
-                    return;
-                }
+            else {
+                self.userBpPerPxLimit = view.bpPerPx;
+            }
+        },
+        /**
+         * #action
+         */
+        addBlock(key, block) {
+            self.blockState.set(key, BlockState.create({
+                key,
+                region: block.toRegion(),
+            }));
+        },
+        /**
+         * #action
+         */
+        setCurrBpPerPx(n) {
+            self.currBpPerPx = n;
+        },
+        /**
+         * #action
+         */
+        deleteBlock(key) {
+            self.blockState.delete(key);
+        },
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = getSession(self);
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                    view: getContainingView(self),
+                    track: getContainingTrack(self),
+                    featureData: feature.toJSON(),
+                });
+                session.showWidget(featureWidget);
             }
-            catch (e) {
-                console.error(e);
-                self.setError(e);
+            if (isSelectionContainer(session)) {
+                session.setSelection(feature);
             }
         },
-        afterAttach() {
-            // this autorun performs stats estimation
-            //
-            // the chain of events calls estimateRegionsStats 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;
+        /**
+         * #action
+         */
+        clearFeatureSelection() {
+            const session = getSession(self);
+            session.clearSelection();
+        },
+        /**
+         * #action
+         */
+        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.estimatedStatsReady || view.dynamicBlocks.totalBp < 20000) {
+                return false;
+            }
+            const bpLimitOrDensity = self.userBpPerPxLimit
+                ? view.bpPerPx > self.userBpPerPxLimit
+                : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity;
+            return (self.currentBytesRequested > self.maxAllowableBytes ||
+                bpLimitOrDensity);
+        },
+        /**
+         * #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;
+        return {
+            /**
+             * #action
+             */
+            async reload() {
+                self.setError();
+                const aborter = new AbortController();
+                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 aborter = new AbortController();
-                    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.estimatedRegionStats) === 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.clearRegionStats();
-                    self.setCurrBpPerPx(view.bpPerPx);
-                    const statsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, { signal: aborter.signal });
-                    self.setRegionStatsP(statsP);
-                    const estimatedRegionStats = await statsP;
+                    self.estimatedRegionStatsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, { signal: aborter.signal });
+                    const estimatedRegionStats = await self.estimatedRegionStatsP;
                     if (isAlive(self)) {
                         self.setRegionStats(estimatedRegionStats);
+                        superReload();
+                    }
+                    else {
+                        return;
                     }
                 }
                 catch (e) {
-                    if (!isAbortException(e) && isAlive(self)) {
-                        console.error(e);
-                        self.setError(e);
-                    }
+                    console.error(e);
+                    self.setError(e);
                 }
-            }, { delay: 500 }));
-        },
-    };
-})
-    .views(self => ({
-    regionCannotBeRenderedText(_region) {
-        return self.regionTooLarge ? 'Force load to see features' : '';
-    },
-    /**
-     * @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) {
-        const { regionTooLarge } = self;
-        return regionTooLarge ? React.createElement(TooLargeMessage, { model: self }) : null;
-    },
-    trackMenuItems() {
-        return [];
-    },
-    contextMenuItems() {
-        return self.contextMenuFeature
-            ? [
-                {
-                    label: 'Open feature details',
-                    icon: MenuOpenIcon,
-                    onClick: () => {
-                        if (self.contextMenuFeature) {
-                            self.selectFeature(self.contextMenuFeature);
+            },
+            afterAttach() {
+                // this autorun performs stats estimation
+                //
+                // the chain of events calls estimateRegionsStats 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 aborter = new AbortController();
+                        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.estimatedRegionStats) === 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.clearRegionStats();
+                        self.setCurrBpPerPx(view.bpPerPx);
+                        const statsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, { signal: aborter.signal });
+                        self.setRegionStatsP(statsP);
+                        const estimatedRegionStats = await statsP;
+                        if (isAlive(self)) {
+                            self.setRegionStats(estimatedRegionStats);
+                        }
+                    }
+                    catch (e) {
+                        if (!isAbortException(e) && isAlive(self)) {
+                            console.error(e);
+                            self.setError(e);
+                        }
+                    }
+                }, { delay: 500 }));
+            },
+        };
+    })
+        .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) {
+            const { regionTooLarge } = self;
+            return regionTooLarge ? React.createElement(TooLargeMessage, { model: self }) : null;
+        },
+        /**
+         * #method
+         */
+        trackMenuItems() {
+            return [];
+        },
+        /**
+         * #method
+         */
+        contextMenuItems() {
+            return self.contextMenuFeature
+                ? [
+                    {
+                        label: 'Open feature details',
+                        icon: MenuOpenIcon,
+                        onClick: () => {
+                            if (self.contextMenuFeature) {
+                                self.selectFeature(self.contextMenuFeature);
+                            }
+                        },
                     },
+                ]
+                : [];
+        },
+        /**
+         * #method
+         */
+        renderProps() {
+            const view = getContainingView(self);
+            return {
+                ...getParentRenderProps(self),
+                notReady: self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
+                rpcDriverName: self.rpcDriverName,
+                displayModel: self,
+                onFeatureClick(_, featureId) {
+                    const f = featureId || self.featureIdUnderMouse;
+                    if (!f) {
+                        self.clearFeatureSelection();
+                    }
+                    else {
+                        const feature = self.features.get(f);
+                        if (feature) {
+                            self.selectFeature(feature);
+                        }
+                    }
                 },
-            ]
-            : [];
-    },
-    renderProps() {
-        const view = getContainingView(self);
-        return {
-            ...getParentRenderProps(self),
-            notReady: self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
-            rpcDriverName: self.rpcDriverName,
-            displayModel: self,
-            onFeatureClick(_, featureId) {
-                const f = featureId || self.featureIdUnderMouse;
-                if (!f) {
+                onClick() {
                     self.clearFeatureSelection();
-                }
-                else {
-                    const feature = self.features.get(f);
-                    if (feature) {
-                        self.selectFeature(feature);
+                },
+                // similar to click but opens a menu with further options
+                onFeatureContextMenu(_, featureId) {
+                    const f = featureId || self.featureIdUnderMouse;
+                    if (!f) {
+                        self.clearFeatureSelection();
                     }
-                }
-            },
-            onClick() {
-                self.clearFeatureSelection();
-            },
-            // similar to click but opens a menu with further options
-            onFeatureContextMenu(_, featureId) {
-                const f = featureId || self.featureIdUnderMouse;
-                if (!f) {
+                    else {
+                        // feature id under mouse passed to context menu
+                        self.setContextMenuFeature(self.features.get(f));
+                    }
+                },
+                onMouseMove(_, featureId) {
+                    self.setFeatureIdUnderMouse(featureId);
+                },
+                onMouseLeave(_) {
+                    self.setFeatureIdUnderMouse(undefined);
+                },
+                onContextMenu() {
+                    self.setContextMenuFeature(undefined);
                     self.clearFeatureSelection();
+                },
+            };
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #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(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 {
+                        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))),
+                    };
                 }
-                else {
-                    // feature id under mouse passed to context menu
-                    self.setContextMenuFeature(self.features.get(f));
-                }
-            },
-            onMouseMove(_, featureId) {
-                self.setFeatureIdUnderMouse(featureId);
-            },
-            onMouseLeave(_) {
-                self.setFeatureIdUnderMouse(undefined);
-            },
-            onContextMenu() {
-                self.setContextMenuFeature(undefined);
-                self.clearFeatureSelection();
-            },
-        };
-    },
-}))
-    .actions(self => ({
-    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(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 {
-                    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))),
-                };
-            }
-            const { rpcManager, renderArgs, renderProps, rendererType } = renderBlockData(blockState, self);
-            return rendererType.renderInClient(rpcManager, {
-                ...renderArgs,
-                ...renderProps,
-                viewParams: getViewParams(self, true),
-                exportSVG: opts,
-            });
-        }));
-        return (React.createElement(React.Fragment, null, renderings.map((rendering, index) => {
-            const { offsetPx } = roundedDynamicBlocks[index];
-            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: width, height: overrideHeight || height }))),
-                React.createElement("g", { transform: `translate(${offset} 0)` },
-                    React.createElement("g", { clipPath: `url(#${clipid})` }, React.isValidElement(rendering.reactElement) ? (rendering.reactElement) : (
-                    // eslint-disable-next-line react/no-danger
-                    React.createElement("g", { dangerouslySetInnerHTML: { __html: rendering.html } }))))));
-        })));
-    },
-}))
-    .postProcessSnapshot(self => {
-    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-    const r = self;
-    const { blockState, ...rest } = r;
-    return rest;
-});
+                const { rpcManager, renderArgs, renderProps, rendererType } = renderBlockData(blockState, self);
+                return rendererType.renderInClient(rpcManager, {
+                    ...renderArgs,
+                    ...renderProps,
+                    viewParams: getViewParams(self, true),
+                    exportSVG: opts,
+                });
+            }));
+            return (React.createElement(React.Fragment, null, renderings.map((rendering, index) => {
+                const { offsetPx } = roundedDynamicBlocks[index];
+                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: width, height: overrideHeight || height }))),
+                    React.createElement("g", { transform: `translate(${offset} 0)` },
+                        React.createElement("g", { clipPath: `url(#${clipid})` }, React.isValidElement(rendering.reactElement) ? (rendering.reactElement) : (React.createElement("g", { 
+                            /* eslint-disable-next-line react/no-danger */
+                            dangerouslySetInnerHTML: { __html: rendering.html } }))))));
+            })));
+        },
+    }))
+        .postProcessSnapshot(self => {
+        // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+        const r = self;
+        const { blockState, ...rest } = r;
+        return rest;
+    });
+}
+export const BaseLinearDisplay = stateModelFactory();
 //# sourceMappingURL=BaseLinearDisplayModel.js.map