@jbrowse/plugin-wiggle 2.5.0 → 2.6.1

package/esm/MultiLinearWiggleDisplay/models/model.js

@@ -1,21 +1,19 @@
-import React, { lazy } from 'react';
+import { lazy } from 'react';
 import { addDisposer, isAlive, types } from 'mobx-state-tree';
-import { autorun, when } from 'mobx';
+import { autorun } from 'mobx';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 import deepEqual from 'fast-deep-equal';
 // jbrowse imports
-import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
-import { getSession, getEnv, getContainingView, isSelectionContainer, } from '@jbrowse/core/util';
+import { getConf, } from '@jbrowse/core/configuration';
+import { getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { set1 as colors } from '@jbrowse/core/ui/colors';
-import { BaseLinearDisplay, } from '@jbrowse/plugin-linear-genome-view';
 // locals
-import { getNiceDomain, getScale, quantitativeStatsAutorun, YSCALEBAR_LABEL_OFFSET, } from '../../util';
+import { getScale, quantitativeStatsAutorun, YSCALEBAR_LABEL_OFFSET, } from '../../util';
 import Tooltip from '../components/Tooltip';
-import { StatBars } from '../components/WiggleDisplayComponent';
-const randomColor = () => '#000000'.replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
-// lazt components
-const SetMinMaxDlg = lazy(() => import('../../shared/SetMinMaxDialog'));
+import SharedWiggleMixin from '../../shared/modelShared';
+const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
+// lazies
 const SetColorDlg = lazy(() => import('../components/SetColorDialog'));
 // using a map because it preserves order
 const rendererTypes = new Map([
@@ -25,531 +23,358 @@ const rendererTypes = new Map([
     ['multiline', 'MultiLineRenderer'],
     ['multirowline', 'MultiRowLineRenderer'],
 ]);
-const stateModelFactory = (pluginManager, configSchema) => types
-    .compose('MultiLinearWiggleDisplay', BaseLinearDisplay, types.model({
-    type: types.literal('MultiLinearWiggleDisplay'),
-    configuration: ConfigurationReference(configSchema),
-    selectedRendering: types.optional(types.string, ''),
-    resolution: types.optional(types.number, 1),
-    fill: types.maybe(types.boolean),
-    minSize: types.maybe(types.number),
-    color: types.maybe(types.string),
-    posColor: types.maybe(types.string),
-    negColor: types.maybe(types.string),
-    summaryScoreMode: types.maybe(types.string),
-    rendererTypeNameState: types.maybe(types.string),
-    scale: types.maybe(types.string),
-    autoscale: types.maybe(types.string),
-    displayCrossHatches: types.maybe(types.boolean),
-    layout: types.optional(types.frozen(), []),
-    constraints: types.optional(types.model({
-        max: types.maybe(types.number),
-        min: types.maybe(types.number),
-    }), {}),
-}))
-    .volatile(() => ({
-    message: undefined,
-    stats: undefined,
-    statsRegion: undefined,
-    statsFetchInProgress: undefined,
-    featureUnderMouseVolatile: undefined,
-    sourcesVolatile: undefined,
-}))
-    .actions(self => ({
-    setLayout(layout) {
-        self.layout = layout;
-    },
-    clearLayout() {
-        self.layout = [];
-    },
-    updateQuantitativeStats(stats) {
-        const { scoreMin, scoreMax } = stats;
-        const EPSILON = 0.000001;
-        if (!self.stats) {
-            self.stats = { scoreMin, scoreMax };
-        }
-        else if (Math.abs(self.stats.scoreMax - scoreMax) > EPSILON ||
-            Math.abs(self.stats.scoreMin - scoreMin) > EPSILON) {
-            self.stats = { scoreMin, scoreMax };
-        }
-    },
-    setSources(sources) {
-        if (!deepEqual(sources, self.sourcesVolatile)) {
-            self.sourcesVolatile = sources;
-        }
-    },
-    setColor(color) {
-        self.color = color;
-    },
-    setPosColor(color) {
-        self.posColor = color;
-    },
-    setNegColor(color) {
-        self.negColor = color;
-    },
-    setLoading(aborter) {
-        const { statsFetchInProgress: statsFetch } = self;
-        if (statsFetch !== undefined && !statsFetch.signal.aborted) {
-            statsFetch.abort();
-        }
-        self.statsFetchInProgress = aborter;
-    },
-    // this overrides the BaseLinearDisplayModel to avoid popping up a
-    // feature detail display, but still sets the feature selection on the
-    // model so listeners can detect a click
-    selectFeature(feature) {
-        const session = getSession(self);
-        if (isSelectionContainer(session)) {
-            session.setSelection(feature);
-        }
-    },
-    setFeatureUnderMouse(f) {
-        self.featureUnderMouseVolatile = f;
-    },
-    setResolution(res) {
-        self.resolution = res;
-    },
-    setFill(fill) {
-        if (fill === 0) {
-            self.fill = true;
-            self.minSize = 0;
-        }
-        else if (fill === 1) {
-            self.fill = false;
-            self.minSize = 1;
-        }
-        else if (fill === 2) {
-            self.fill = false;
-            self.minSize = 2;
-        }
-    },
-    toggleLogScale() {
-        self.scale = self.scale === 'log' ? 'linear' : 'log';
-    },
-    setScaleType(scale) {
-        self.scale = scale;
-    },
-    setSummaryScoreMode(val) {
-        self.summaryScoreMode = val;
-    },
-    setAutoscale(val) {
-        self.autoscale = val;
-    },
-    setMaxScore(val) {
-        self.constraints.max = val;
-    },
-    setRendererType(val) {
-        self.rendererTypeNameState = val;
-    },
-    setMinScore(val) {
-        self.constraints.min = val;
-    },
-    toggleCrossHatches() {
-        self.displayCrossHatches = !self.displayCrossHatches;
-    },
-    setCrossHatches(cross) {
-        self.displayCrossHatches = cross;
-    },
-}))
-    .views(self => ({
-    get featureUnderMouse() {
-        return self.featureUnderMouseVolatile;
-    },
-    get TooltipComponent() {
-        return Tooltip;
-    },
-    get adapterTypeName() {
-        return self.adapterConfig.type;
-    },
-    get rendererTypeNameSimple() {
-        return self.rendererTypeNameState || getConf(self, 'defaultRendering');
-    },
-    get rendererTypeName() {
-        const name = this.rendererTypeNameSimple;
-        const rendererType = rendererTypes.get(name);
-        if (!rendererType) {
-            throw new Error(`unknown renderer ${name}`);
-        }
-        return rendererType;
-    },
-    // subclasses can define these, as snpcoverage track does
-    get filters() {
-        return undefined;
-    },
-    get scaleType() {
-        var _a;
-        return (_a = self.scale) !== null && _a !== void 0 ? _a : getConf(self, 'scaleType');
-    },
-    get maxScore() {
-        var _a;
-        return (_a = self.constraints.max) !== null && _a !== void 0 ? _a : getConf(self, 'maxScore');
-    },
-    get minScore() {
-        var _a;
-        return (_a = self.constraints.min) !== null && _a !== void 0 ? _a : getConf(self, 'minScore');
-    },
-}))
-    .views(self => ({
-    get rendererConfig() {
-        const configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
-        const { color, displayCrossHatches, fill, minSize, negColor, posColor, summaryScoreMode, scaleType, } = self;
-        return self.rendererType.configSchema.create({
-            ...configBlob,
-            ...(scaleType ? { scaleType } : {}),
-            ...(fill !== undefined ? { filled: fill } : {}),
-            ...(displayCrossHatches !== undefined
-                ? { displayCrossHatches }
-                : {}),
-            ...(summaryScoreMode !== undefined ? { summaryScoreMode } : {}),
-            ...(color !== undefined ? { color } : {}),
-            ...(negColor !== undefined ? { negColor } : {}),
-            ...(posColor !== undefined ? { posColor } : {}),
-            ...(minSize !== undefined ? { minSize } : {}),
-        }, getEnv(self));
-    },
-}))
-    .views(self => ({
-    // everything except density gets a numerical scalebar
-    get needsScalebar() {
-        return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
-            self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
-            self.rendererTypeName === 'MultiLineRenderer' ||
-            self.rendererTypeName === 'MultiRowLineRenderer');
-    },
-    get needsFullHeightScalebar() {
-        return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
-            self.rendererTypeName === 'MultiLineRenderer');
-    },
-    get isMultiRow() {
-        return (self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
-            self.rendererTypeName === 'MultiRowLineRenderer' ||
-            self.rendererTypeName === 'MultiDensityRenderer');
-    },
-    // can be used to give it a "color scale" like a R heatmap, not
-    // implemented like this yet but flag can be used for this
-    get needsCustomLegend() {
-        return self.rendererTypeName === 'MultiDensityRenderer';
-    },
-    get canHaveFill() {
-        return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
-            self.rendererTypeName === 'MultiRowXYPlotRenderer');
-    },
-    // the multirowxy and multiline don't need to use colors on the legend
-    // boxes since their track is drawn with the color. sort of a stylistic choice
-    get renderColorBoxes() {
-        return !(self.rendererTypeName === 'MultiRowLineRenderer' ||
-            self.rendererTypeName === 'MultiRowXYPlotRenderer');
-    },
-    // positions multi-row below the tracklabel even if using overlap
-    // tracklabels for everything else
-    get prefersOffset() {
-        return this.isMultiRow;
-    },
-    get sources() {
-        var _a;
-        const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
-        const iter = self.layout.length ? self.layout : self.sourcesVolatile;
-        return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
-            ...sources[s.name],
-            ...s,
-        })).map((s, i) => ({
-            ...s,
-            color: s.color ||
-                (!this.isMultiRow ? colors[i] || randomColor() : 'blue'),
-        }));
-    },
-}))
-    .views(self => {
-    let oldDomain = [0, 0];
-    return {
-        get filled() {
-            const { fill, rendererConfig } = self;
-            return fill !== null && fill !== void 0 ? fill : readConfObject(rendererConfig, 'filled');
+/**
+ * #stateModel MultiLinearWiggleDisplay
+ * extends `SharedWiggleMixin`
+ */
+export function stateModelFactory(pluginManager, configSchema) {
+    return types
+        .compose('MultiLinearWiggleDisplay', SharedWiggleMixin(configSchema), types.model({
+        /**
+         * #property
+         */
+        type: types.literal('MultiLinearWiggleDisplay'),
+        /**
+         * #property
+         */
+        layout: types.optional(types.frozen(), []),
+    }))
+        .volatile(() => ({
+        featureUnderMouseVolatile: undefined,
+        sourcesVolatile: undefined,
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setLayout(layout) {
+            self.layout = layout;
         },
-        get summaryScoreModeSetting() {
-            const { summaryScoreMode: scoreMode, rendererConfig } = self;
-            return scoreMode !== null && scoreMode !== void 0 ? scoreMode : readConfObject(rendererConfig, 'summaryScoreMode');
+        /**
+         * #action
+         */
+        clearLayout() {
+            self.layout = [];
         },
-        get domain() {
-            const { stats, scaleType, minScore, maxScore } = self;
-            if (!stats) {
-                return undefined;
-            }
-            const { scoreMin, scoreMax } = stats;
-            const ret = getNiceDomain({
-                domain: [scoreMin, scoreMax],
-                bounds: [minScore, maxScore],
-                scaleType,
-            });
-            // avoid weird scalebar if log value and empty region displayed
-            if (scaleType === 'log' && ret[1] === Number.MIN_VALUE) {
-                return [0, Number.MIN_VALUE];
+        /**
+         * #action
+         */
+        setSources(sources) {
+            if (!deepEqual(sources, self.sourcesVolatile)) {
+                self.sourcesVolatile = sources;
             }
-            // avoid returning a new object if it matches the old value
-            if (!deepEqual(oldDomain, ret)) {
-                oldDomain = ret;
+        },
+        /**
+         * #action
+         */
+        setFeatureUnderMouse(f) {
+            self.featureUnderMouseVolatile = f;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+        /**
+         * #getter
+         */
+        get TooltipComponent() {
+            return Tooltip;
+        },
+        /**
+         * #getter
+         */
+        get rendererTypeName() {
+            const name = self.rendererTypeNameSimple;
+            const rendererType = rendererTypes.get(name);
+            if (!rendererType) {
+                throw new Error(`unknown renderer ${name}`);
             }
-            return oldDomain;
+            return rendererType;
         },
-        get scaleOpts() {
-            const { scaleType, stats } = self;
-            return {
-                autoscaleType: this.autoscaleType,
-                domain: this.domain,
-                stats,
-                scaleType,
-                inverted: getConf(self, 'inverted'),
-            };
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get needsScalebar() {
+            return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
+                self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
+                self.rendererTypeName === 'MultiLineRenderer' ||
+                self.rendererTypeName === 'MultiRowLineRenderer');
         },
-        get autoscaleType() {
-            var _a;
-            return (_a = self.autoscale) !== null && _a !== void 0 ? _a : getConf(self, 'autoscale');
+        /**
+         * #getter
+         */
+        get needsFullHeightScalebar() {
+            return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
+                self.rendererTypeName === 'MultiLineRenderer');
+        },
+        /**
+         * #getter
+         */
+        get isMultiRow() {
+            return (self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
+                self.rendererTypeName === 'MultiRowLineRenderer' ||
+                self.rendererTypeName === 'MultiDensityRenderer');
         },
-        get displayCrossHatchesSetting() {
-            const { displayCrossHatches, rendererConfig } = self;
-            return (displayCrossHatches !== null && displayCrossHatches !== void 0 ? displayCrossHatches : readConfObject(rendererConfig, 'displayCrossHatches'));
+        /**
+         * #getter
+         * can be used to give it a "color scale" like a R heatmap, not
+         * implemented like this yet but flag can be used for this
+         */
+        get needsCustomLegend() {
+            return self.rendererTypeName === 'MultiDensityRenderer';
         },
+        get canHaveFill() {
+            return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
+                self.rendererTypeName === 'MultiRowXYPlotRenderer');
+        },
+        /**
+         * #getter
+         * the multirowxy and multiline don't need to use colors on the legend
+         * boxes since their track is drawn with the color. sort of a stylistic
+         * choice
+         */
+        get renderColorBoxes() {
+            return !(self.rendererTypeName === 'MultiRowLineRenderer' ||
+                self.rendererTypeName === 'MultiRowXYPlotRenderer');
+        },
+        /**
+         * #getter
+         * positions multi-row below the tracklabel even if using overlap
+         * tracklabels for everything else
+         */
+        get prefersOffset() {
+            return this.isMultiRow;
+        },
+        /**
+         * #getter
+         */
+        get sources() {
+            var _a;
+            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+            const iter = self.layout.length ? self.layout : self.sourcesVolatile;
+            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
+                ...sources[s.name],
+                ...s,
+            })).map((s, i) => ({
+                ...s,
+                color: s.color ||
+                    (!this.isMultiRow ? colors[i] || randomColor() : 'blue'),
+            }));
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
         get rowHeight() {
             const { sources, height, isMultiRow } = self;
             return isMultiRow ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : height;
         },
+        /**
+         * #getter
+         */
         get rowHeightTooSmallForScalebar() {
             return this.rowHeight < 70;
         },
+        /**
+         * #getter
+         */
         get useMinimalTicks() {
             return (getConf(self, 'minimalTicks') || this.rowHeightTooSmallForScalebar);
         },
-    };
-})
-    .views(self => ({
-    get ticks() {
-        const { scaleType, domain, isMultiRow, rowHeight, useMinimalTicks } = self;
-        if (!domain) {
-            return undefined;
-        }
-        const offset = isMultiRow ? 0 : YSCALEBAR_LABEL_OFFSET;
-        const ticks = axisPropsFromTickScale(getScale({
-            scaleType,
-            domain,
-            range: [rowHeight - offset, offset],
-            inverted: getConf(self, 'inverted'),
-        }), 4);
-        return useMinimalTicks ? { ...ticks, values: domain } : ticks;
-    },
-    get colors() {
-        return [
-            'red',
-            'blue',
-            'green',
-            'orange',
-            'purple',
-            'cyan',
-            'pink',
-            'darkblue',
-            'darkred',
-            'pink',
-        ];
-    },
-    get adapterCapabilities() {
-        const { adapterTypeName } = self;
-        return pluginManager.getAdapterType(adapterTypeName).adapterCapabilities;
-    },
-}))
-    .views(self => {
-    const { renderProps: superRenderProps } = self;
-    return {
-        renderProps() {
-            const superProps = superRenderProps();
-            const { displayCrossHatches, filters, height, resolution, rpcDriverName, scaleOpts, stats, sources, ticks, rendererConfig: config, } = self;
-            return {
-                ...superProps,
-                notReady: superProps.notReady || !sources || !stats,
-                displayModel: self,
-                config,
-                displayCrossHatches,
-                filters,
-                height,
-                resolution,
-                rpcDriverName,
-                scaleOpts,
-                sources,
-                ticks,
-                onMouseMove: (_, f) => self.setFeatureUnderMouse(f),
-                onMouseLeave: () => self.setFeatureUnderMouse(undefined),
-            };
-        },
-        get hasResolution() {
-            return self.adapterCapabilities.includes('hasResolution');
-        },
-        get hasGlobalStats() {
-            return self.adapterCapabilities.includes('hasGlobalStats');
-        },
-        get fillSetting() {
-            if (self.filled) {
-                return 0;
-            }
-            else if (!self.filled && self.minSize === 1) {
-                return 1;
-            }
-            else {
-                return 2;
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get ticks() {
+            const { scaleType, domain, isMultiRow, rowHeight, useMinimalTicks } = self;
+            if (!domain) {
+                return undefined;
             }
+            const offset = isMultiRow ? 0 : YSCALEBAR_LABEL_OFFSET;
+            const ticks = axisPropsFromTickScale(getScale({
+                scaleType,
+                domain,
+                range: [rowHeight - offset, offset],
+                inverted: getConf(self, 'inverted'),
+            }), 4);
+            return useMinimalTicks ? { ...ticks, values: domain } : ticks;
         },
-    };
-})
-    .views(self => {
-    const { trackMenuItems: superTrackMenuItems } = self;
-    const hasRenderings = getConf(self, 'defaultRendering');
-    return {
-        trackMenuItems() {
+        /**
+         * #getter
+         */
+        get colors() {
             return [
-                ...superTrackMenuItems(),
-                ...(self.hasResolution
-                    ? [
-                        {
-                            label: 'Resolution',
-                            subMenu: [
-                                {
-                                    label: 'Finer resolution',
-                                    onClick: () => self.setResolution(self.resolution * 5),
-                                },
-                                {
-                                    label: 'Coarser resolution',
-                                    onClick: () => self.setResolution(self.resolution / 5),
-                                },
-                            ],
-                        },
-                        {
-                            label: 'Summary score mode',
-                            subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => ({
-                                label: elt,
-                                type: 'radio',
-                                checked: self.summaryScoreModeSetting === elt,
-                                onClick: () => self.setSummaryScoreMode(elt),
-                            })),
-                        },
-                    ]
-                    : []),
-                ...(self.canHaveFill
-                    ? [
-                        {
-                            label: 'Fill mode',
-                            subMenu: ['filled', 'no fill', 'no fill w/ emphasis'].map((elt, idx) => ({
-                                label: elt,
-                                type: 'radio',
-                                checked: self.fillSetting === idx,
-                                onClick: () => self.setFill(idx),
-                            })),
-                        },
-                    ]
-                    : []),
-                {
-                    label: self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
-                    onClick: () => self.toggleLogScale(),
-                },
-                ...(self.needsScalebar
-                    ? [
-                        {
-                            type: 'checkbox',
-                            label: 'Draw cross hatches',
-                            checked: self.displayCrossHatchesSetting,
-                            onClick: () => self.toggleCrossHatches(),
-                        },
-                    ]
-                    : []),
-                ...(hasRenderings
-                    ? [
-                        {
-                            label: 'Renderer type',
-                            subMenu: [
-                                'xyplot',
-                                'multirowxy',
-                                'multirowdensity',
-                                'multiline',
-                                'multirowline',
-                            ].map(key => ({
-                                label: key,
-                                type: 'radio',
-                                checked: self.rendererTypeNameSimple === key,
-                                onClick: () => self.setRendererType(key),
-                            })),
-                        },
-                    ]
-                    : []),
-                {
-                    label: 'Autoscale type',
-                    subMenu: [
-                        ['local', 'Local'],
-                        ...(self.hasGlobalStats
-                            ? [
-                                ['global', 'Global'],
-                                ['globalsd', 'Global ± 3σ'],
-                            ]
-                            : []),
-                        ['localsd', 'Local ± 3σ'],
-                    ].map(([val, label]) => {
-                        return {
-                            label,
-                            type: 'radio',
-                            checked: self.autoscaleType === val,
-                            onClick: () => self.setAutoscale(val),
-                        };
-                    }),
-                },
-                {
-                    label: 'Set min/max score...',
-                    onClick: () => {
-                        const session = getSession(self);
-                        session.queueDialog(handleClose => [
-                            SetMinMaxDlg,
-                            { model: self, handleClose },
-                        ]);
-                    },
-                },
-                {
-                    label: 'Edit colors/arrangement...',
-                    onClick: () => {
-                        getSession(self).queueDialog(handleClose => [
-                            SetColorDlg,
-                            { model: self, handleClose },
-                        ]);
-                    },
-                },
+                'red',
+                'blue',
+                'green',
+                'orange',
+                'purple',
+                'cyan',
+                'pink',
+                'darkblue',
+                'darkred',
+                'pink',
             ];
         },
-    };
-})
-    .actions(self => {
-    const { reload: superReload, renderSvg: superRenderSvg } = self;
-    return {
-        async reload() {
-            self.setError();
-            superReload();
-        },
-        afterAttach() {
-            quantitativeStatsAutorun(self);
-            addDisposer(self, autorun(async () => {
-                const { rpcManager } = getSession(self);
-                const { adapterConfig } = self;
-                const sessionId = getRpcSessionId(self);
-                const sources = (await rpcManager.call(sessionId, 'MultiWiggleGetSources', {
-                    sessionId,
-                    adapterConfig,
-                }));
-                if (isAlive(self)) {
-                    self.setSources(sources);
+    }))
+        .views(self => {
+        const { renderProps: superRenderProps } = self;
+        return {
+            /**
+             * #method
+             */
+            renderProps() {
+                const superProps = superRenderProps();
+                const { displayCrossHatches, filters, height, resolution, rpcDriverName, scaleOpts, stats, sources, ticks, rendererConfig: config, } = self;
+                return {
+                    ...superProps,
+                    notReady: superProps.notReady || !sources || !stats,
+                    displayModel: self,
+                    config,
+                    displayCrossHatches,
+                    filters,
+                    height,
+                    resolution,
+                    rpcDriverName,
+                    scaleOpts,
+                    sources,
+                    ticks,
+                    onMouseMove: (_, f) => self.setFeatureUnderMouse(f),
+                    onMouseLeave: () => self.setFeatureUnderMouse(undefined),
+                };
+            },
+            /**
+             * #getter
+             */
+            get hasResolution() {
+                return self.adapterCapabilities.includes('hasResolution');
+            },
+            /**
+             * #getter
+             */
+            get hasGlobalStats() {
+                return self.adapterCapabilities.includes('hasGlobalStats');
+            },
+            /**
+             * #getter
+             */
+            get fillSetting() {
+                if (self.filled) {
+                    return 0;
                 }
-            }));
-        },
-        async renderSvg(opts) {
-            await when(() => !!self.stats && !!self.regionCannotBeRenderedText);
-            const { offsetPx } = getContainingView(self);
-            return (React.createElement(React.Fragment, null,
-                React.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
-                React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-                    React.createElement(StatBars, { model: self, orientation: "left", exportSVG: true }))));
-        },
-    };
-});
+                else if (!self.filled && self.minSize === 1) {
+                    return 1;
+                }
+                else {
+                    return 2;
+                }
+            },
+        };
+    })
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        const hasRenderings = getConf(self, 'defaultRendering');
+        return {
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Score',
+                        subMenu: self.scoreTrackMenuItems(),
+                    },
+                    ...(self.canHaveFill
+                        ? [
+                            {
+                                label: 'Fill mode',
+                                subMenu: ['filled', 'no fill', 'no fill w/ emphasis'].map((elt, idx) => ({
+                                    label: elt,
+                                    type: 'radio',
+                                    checked: self.fillSetting === idx,
+                                    onClick: () => self.setFill(idx),
+                                })),
+                            },
+                        ]
+                        : []),
+                    ...(self.needsScalebar
+                        ? [
+                            {
+                                type: 'checkbox',
+                                label: 'Draw cross hatches',
+                                checked: self.displayCrossHatchesSetting,
+                                onClick: () => self.toggleCrossHatches(),
+                            },
+                        ]
+                        : []),
+                    ...(hasRenderings
+                        ? [
+                            {
+                                label: 'Renderer type',
+                                subMenu: [
+                                    'xyplot',
+                                    'multirowxy',
+                                    'multirowdensity',
+                                    'multiline',
+                                    'multirowline',
+                                ].map(key => ({
+                                    label: key,
+                                    type: 'radio',
+                                    checked: self.rendererTypeNameSimple === key,
+                                    onClick: () => self.setRendererType(key),
+                                })),
+                            },
+                        ]
+                        : []),
+                    {
+                        label: 'Edit colors/arrangement...',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                SetColorDlg,
+                                { model: self, handleClose },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .actions(self => {
+        const { renderSvg: superRenderSvg } = self;
+        return {
+            afterAttach() {
+                quantitativeStatsAutorun(self);
+                addDisposer(self, autorun(async () => {
+                    const { rpcManager } = getSession(self);
+                    const { adapterConfig } = self;
+                    const sessionId = getRpcSessionId(self);
+                    const sources = (await rpcManager.call(sessionId, 'MultiWiggleGetSources', {
+                        sessionId,
+                        adapterConfig,
+                    }));
+                    if (isAlive(self)) {
+                        self.setSources(sources);
+                    }
+                }));
+            },
+            /**
+             * #action
+             */
+            async renderSvg(opts) {
+                const { renderSvg } = await import('./renderSvg');
+                return renderSvg(self, opts, superRenderSvg);
+            },
+        };
+    });
+}
 export default stateModelFactory;
 //# sourceMappingURL=model.js.map