@jbrowse/plugin-wiggle 2.5.0 → 2.6.1

package/dist/MultiLinearWiggleDisplay/models/model.js

@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+exports.stateModelFactory = void 0;
+const react_1 = require("react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mobx_1 = require("mobx");
 const react_d3_axis_mod_1 = require("react-d3-axis-mod");
@@ -36,14 +37,12 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const colors_1 = require("@jbrowse/core/ui/colors");
-const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 // locals
 const util_2 = require("../../util");
 const Tooltip_1 = __importDefault(require("../components/Tooltip"));
-const WiggleDisplayComponent_1 = require("../components/WiggleDisplayComponent");
-const randomColor = () => '#000000'.replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
-// lazt components
-const SetMinMaxDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../../shared/SetMinMaxDialog'))));
+const modelShared_1 = __importDefault(require("../../shared/modelShared"));
+const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
+// lazies
 const SetColorDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../components/SetColorDialog'))));
 // using a map because it preserves order
 const rendererTypes = new Map([
@@ -53,531 +52,359 @@ const rendererTypes = new Map([
     ['multiline', 'MultiLineRenderer'],
     ['multirowline', 'MultiRowLineRenderer'],
 ]);
-const stateModelFactory = (pluginManager, configSchema) => mobx_state_tree_1.types
-    .compose('MultiLinearWiggleDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
-    type: mobx_state_tree_1.types.literal('MultiLinearWiggleDisplay'),
-    configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-    selectedRendering: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, ''),
-    resolution: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 1),
-    fill: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
-    minSize: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
-    color: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    posColor: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    negColor: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    summaryScoreMode: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    rendererTypeNameState: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    scale: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    autoscale: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-    displayCrossHatches: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
-    layout: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), []),
-    constraints: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.model({
-        max: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
-        min: mobx_state_tree_1.types.maybe(mobx_state_tree_1.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 (!(0, fast_deep_equal_1.default)(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 = (0, util_1.getSession)(self);
-        if ((0, util_1.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_1.default;
-    },
-    get adapterTypeName() {
-        return self.adapterConfig.type;
-    },
-    get rendererTypeNameSimple() {
-        return self.rendererTypeNameState || (0, configuration_1.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 : (0, configuration_1.getConf)(self, 'scaleType');
-    },
-    get maxScore() {
-        var _a;
-        return (_a = self.constraints.max) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'maxScore');
-    },
-    get minScore() {
-        var _a;
-        return (_a = self.constraints.min) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'minScore');
-    },
-}))
-    .views(self => ({
-    get rendererConfig() {
-        const configBlob = (0, configuration_1.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 } : {}),
-        }, (0, util_1.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_1.set1[i] || randomColor() : 'blue'),
-        }));
-    },
-}))
-    .views(self => {
-    let oldDomain = [0, 0];
-    return {
-        get filled() {
-            const { fill, rendererConfig } = self;
-            return fill !== null && fill !== void 0 ? fill : (0, configuration_1.readConfObject)(rendererConfig, 'filled');
+/**
+ * #stateModel MultiLinearWiggleDisplay
+ * extends `SharedWiggleMixin`
+ */
+function stateModelFactory(pluginManager, configSchema) {
+    return mobx_state_tree_1.types
+        .compose('MultiLinearWiggleDisplay', (0, modelShared_1.default)(configSchema), mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
+        type: mobx_state_tree_1.types.literal('MultiLinearWiggleDisplay'),
+        /**
+         * #property
+         */
+        layout: mobx_state_tree_1.types.optional(mobx_state_tree_1.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 : (0, configuration_1.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 = (0, util_2.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 (!(0, fast_deep_equal_1.default)(sources, self.sourcesVolatile)) {
+                self.sourcesVolatile = sources;
             }
-            // avoid returning a new object if it matches the old value
-            if (!(0, fast_deep_equal_1.default)(oldDomain, ret)) {
-                oldDomain = ret;
+        },
+        /**
+         * #action
+         */
+        setFeatureUnderMouse(f) {
+            self.featureUnderMouseVolatile = f;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+        /**
+         * #getter
+         */
+        get TooltipComponent() {
+            return Tooltip_1.default;
+        },
+        /**
+         * #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: (0, configuration_1.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 : (0, configuration_1.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 : (0, configuration_1.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_1.set1[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 ((0, configuration_1.getConf)(self, 'minimalTicks') || this.rowHeightTooSmallForScalebar);
         },
-    };
-})
-    .views(self => ({
-    get ticks() {
-        const { scaleType, domain, isMultiRow, rowHeight, useMinimalTicks } = self;
-        if (!domain) {
-            return undefined;
-        }
-        const offset = isMultiRow ? 0 : util_2.YSCALEBAR_LABEL_OFFSET;
-        const ticks = (0, react_d3_axis_mod_1.axisPropsFromTickScale)((0, util_2.getScale)({
-            scaleType,
-            domain,
-            range: [rowHeight - offset, offset],
-            inverted: (0, configuration_1.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 : util_2.YSCALEBAR_LABEL_OFFSET;
+            const ticks = (0, react_d3_axis_mod_1.axisPropsFromTickScale)((0, util_2.getScale)({
+                scaleType,
+                domain,
+                range: [rowHeight - offset, offset],
+                inverted: (0, configuration_1.getConf)(self, 'inverted'),
+            }), 4);
+            return useMinimalTicks ? { ...ticks, values: domain } : ticks;
         },
-    };
-})
-    .views(self => {
-    const { trackMenuItems: superTrackMenuItems } = self;
-    const hasRenderings = (0, configuration_1.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 = (0, util_1.getSession)(self);
-                        session.queueDialog(handleClose => [
-                            SetMinMaxDlg,
-                            { model: self, handleClose },
-                        ]);
-                    },
-                },
-                {
-                    label: 'Edit colors/arrangement...',
-                    onClick: () => {
-                        (0, util_1.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() {
-            (0, util_2.quantitativeStatsAutorun)(self);
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
-                const { rpcManager } = (0, util_1.getSession)(self);
-                const { adapterConfig } = self;
-                const sessionId = (0, tracks_1.getRpcSessionId)(self);
-                const sources = (await rpcManager.call(sessionId, 'MultiWiggleGetSources', {
-                    sessionId,
-                    adapterConfig,
-                }));
-                if ((0, mobx_state_tree_1.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 (0, mobx_1.when)(() => !!self.stats && !!self.regionCannotBeRenderedText);
-            const { offsetPx } = (0, util_1.getContainingView)(self);
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
-                react_1.default.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-                    react_1.default.createElement(WiggleDisplayComponent_1.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 = (0, configuration_1.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: () => {
+                            (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                SetColorDlg,
+                                { model: self, handleClose },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .actions(self => {
+        const { renderSvg: superRenderSvg } = self;
+        return {
+            afterAttach() {
+                (0, util_2.quantitativeStatsAutorun)(self);
+                (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+                    const { rpcManager } = (0, util_1.getSession)(self);
+                    const { adapterConfig } = self;
+                    const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                    const sources = (await rpcManager.call(sessionId, 'MultiWiggleGetSources', {
+                        sessionId,
+                        adapterConfig,
+                    }));
+                    if ((0, mobx_state_tree_1.isAlive)(self)) {
+                        self.setSources(sources);
+                    }
+                }));
+            },
+            /**
+             * #action
+             */
+            async renderSvg(opts) {
+                const { renderSvg } = await Promise.resolve().then(() => __importStar(require('./renderSvg')));
+                return renderSvg(self, opts, superRenderSvg);
+            },
+        };
+    });
+}
+exports.stateModelFactory = stateModelFactory;
 exports.default = stateModelFactory;
 //# sourceMappingURL=model.js.map