@jbrowse/plugin-alignments 2.1.6 → 2.2.0

package/esm/LinearPileupDisplay/model.js

@@ -27,548 +27,661 @@ const rendererTypes = new Map([
     ['pileup', 'PileupRenderer'],
     ['svg', 'SvgFeatureRenderer'],
 ]);
-const stateModelFactory = (configSchema) => types
-    .compose('LinearPileupDisplay', BaseLinearDisplay, types.model({
-    type: types.literal('LinearPileupDisplay'),
-    configuration: ConfigurationReference(configSchema),
-    showSoftClipping: false,
-    featureHeight: types.maybe(types.number),
-    noSpacing: types.maybe(types.boolean),
-    fadeLikelihood: types.maybe(types.boolean),
-    trackMaxHeight: types.maybe(types.number),
-    mismatchAlpha: types.maybe(types.boolean),
-    sortedBy: types.maybe(types.model({
-        type: types.string,
-        pos: types.number,
-        tag: types.maybe(types.string),
-        refName: types.string,
-        assemblyName: types.string,
-    })),
-    colorBy: types.maybe(types.model({
-        type: types.string,
-        tag: types.maybe(types.string),
-        extra: types.frozen(),
-    })),
-    filterBy: types.optional(types.model({
-        flagInclude: types.optional(types.number, 0),
-        flagExclude: types.optional(types.number, 1540),
-        readName: types.maybe(types.string),
-        tagFilter: types.maybe(types.model({ tag: types.string, value: types.string })),
-    }), {}),
-}))
-    .volatile(() => ({
-    colorTagMap: observable.map({}),
-    modificationTagMap: observable.map({}),
-    featureUnderMouseVolatile: undefined,
-    ready: false,
-}))
-    .actions(self => ({
-    setReady(flag) {
-        self.ready = flag;
-    },
-    setMaxHeight(n) {
-        self.trackMaxHeight = n;
-    },
-    setFeatureHeight(n) {
-        self.featureHeight = n;
-    },
-    setNoSpacing(flag) {
-        self.noSpacing = flag;
-    },
-    setColorScheme(colorScheme) {
-        self.colorTagMap = observable.map({}); // clear existing mapping
-        self.colorBy = cast(colorScheme);
-        self.ready = false;
-    },
-    updateModificationColorMap(uniqueModifications) {
-        const colorPalette = ['red', 'blue', 'green', 'orange', 'purple'];
-        uniqueModifications.forEach(value => {
-            if (!self.modificationTagMap.has(value)) {
-                const totalKeys = [...self.modificationTagMap.keys()].length;
-                const newColor = colorPalette[totalKeys];
-                self.modificationTagMap.set(value, newColor);
-            }
-        });
-    },
-    updateColorTagMap(uniqueTag) {
-        // pale color scheme
-        // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
-        // e.g. "tol_light"
-        const colorPalette = [
-            '#BBCCEE',
-            'pink',
-            '#CCDDAA',
-            '#EEEEBB',
-            '#FFCCCC',
-            'lightblue',
-            'lightgreen',
-            'tan',
-            '#CCEEFF',
-            'lightsalmon',
-        ];
-        uniqueTag.forEach(value => {
-            if (!self.colorTagMap.has(value)) {
-                const totalKeys = [...self.colorTagMap.keys()].length;
-                const newColor = colorPalette[totalKeys];
-                self.colorTagMap.set(value, newColor);
-            }
-        });
-    },
-    setFeatureUnderMouse(feat) {
-        self.featureUnderMouseVolatile = feat;
-    },
-}))
-    .actions(self => ({
-    afterAttach() {
-        addDisposer(self, autorun(async () => {
-            try {
-                const { rpcManager } = getSession(self);
-                const view = getContainingView(self);
-                const { sortedBy, colorBy, parentTrack, adapterConfig, rendererType, } = self;
-                if (!view.initialized ||
-                    !self.estimatedStatsReady ||
-                    self.regionTooLarge) {
-                    return;
-                }
-                const { staticBlocks, bpPerPx } = view;
-                // continually generate the vc pairing, set and rerender if any
-                // new values seen
-                if (colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) {
-                    self.updateColorTagMap(await getUniqueTagValues(self, colorBy, staticBlocks));
-                }
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = getConf(parentTrack, ['adapter']);
-                    self.updateModificationColorMap(await getUniqueModificationValues(self, adapter, colorBy, staticBlocks));
-                }
-                if (sortedBy) {
-                    const { pos, refName, assemblyName } = sortedBy;
-                    // render just the sorted region first
-                    // @ts-ignore
-                    await self.rendererType.renderInClient(rpcManager, {
-                        assemblyName,
-                        regions: [
-                            {
-                                start: pos,
-                                end: pos + 1,
-                                refName,
-                                assemblyName,
-                            },
-                        ],
-                        adapterConfig: adapterConfig,
-                        rendererType: rendererType.name,
-                        sessionId: getRpcSessionId(self),
-                        layoutId: view.id,
-                        timeout: 1000000,
-                        ...self.renderProps(),
-                    });
-                    self.setReady(true);
-                    self.setCurrBpPerPx(bpPerPx);
+/**
+ * #stateModel LinearPileupDisplay
+ */
+function stateModelFactory(configSchema) {
+    return types
+        .compose('LinearPileupDisplay', BaseLinearDisplay, types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearPileupDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        showSoftClipping: false,
+        /**
+         * #property
+         */
+        featureHeight: types.maybe(types.number),
+        /**
+         * #property
+         */
+        noSpacing: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        fadeLikelihood: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        trackMaxHeight: types.maybe(types.number),
+        /**
+         * #property
+         */
+        mismatchAlpha: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        sortedBy: types.maybe(types.model({
+            type: types.string,
+            pos: types.number,
+            tag: types.maybe(types.string),
+            refName: types.string,
+            assemblyName: types.string,
+        })),
+        /**
+         * #property
+         */
+        colorBy: types.maybe(types.model({
+            type: types.string,
+            tag: types.maybe(types.string),
+            extra: types.frozen(),
+        })),
+        filterBy: types.optional(types.model({
+            flagInclude: types.optional(types.number, 0),
+            flagExclude: types.optional(types.number, 1540),
+            readName: types.maybe(types.string),
+            tagFilter: types.maybe(types.model({ tag: types.string, value: types.string })),
+        }), {}),
+    }))
+        .volatile(() => ({
+        colorTagMap: observable.map({}),
+        modificationTagMap: observable.map({}),
+        featureUnderMouseVolatile: undefined,
+        ready: false,
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setReady(flag) {
+            self.ready = flag;
+        },
+        /**
+         * #action
+         */
+        setMaxHeight(n) {
+            self.trackMaxHeight = n;
+        },
+        /**
+         * #action
+         */
+        setFeatureHeight(n) {
+            self.featureHeight = n;
+        },
+        /**
+         * #action
+         */
+        setNoSpacing(flag) {
+            self.noSpacing = flag;
+        },
+        /**
+         * #action
+         */
+        setColorScheme(colorScheme) {
+            self.colorTagMap = observable.map({}); // clear existing mapping
+            self.colorBy = cast(colorScheme);
+            self.ready = false;
+        },
+        /**
+         * #action
+         */
+        updateModificationColorMap(uniqueModifications) {
+            const colorPalette = ['red', 'blue', 'green', 'orange', 'purple'];
+            uniqueModifications.forEach(value => {
+                if (!self.modificationTagMap.has(value)) {
+                    const totalKeys = [...self.modificationTagMap.keys()].length;
+                    const newColor = colorPalette[totalKeys];
+                    self.modificationTagMap.set(value, newColor);
                 }
-                else {
-                    self.setReady(true);
+            });
+        },
+        /**
+         * #action
+         */
+        updateColorTagMap(uniqueTag) {
+            // pale color scheme
+            // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
+            // e.g. "tol_light"
+            const colorPalette = [
+                '#BBCCEE',
+                'pink',
+                '#CCDDAA',
+                '#EEEEBB',
+                '#FFCCCC',
+                'lightblue',
+                'lightgreen',
+                'tan',
+                '#CCEEFF',
+                'lightsalmon',
+            ];
+            uniqueTag.forEach(value => {
+                if (!self.colorTagMap.has(value)) {
+                    const totalKeys = [...self.colorTagMap.keys()].length;
+                    const newColor = colorPalette[totalKeys];
+                    self.colorTagMap.set(value, newColor);
                 }
-            }
-            catch (e) {
-                console.error(e);
-                self.setError(e);
-            }
-        }, { delay: 1000 }));
-        // autorun synchronizes featureUnderMouse with featureIdUnderMouse
-        addDisposer(self, autorun(async () => {
-            var _a;
-            const session = getSession(self);
-            try {
-                const featureId = self.featureIdUnderMouse;
-                if (((_a = self.featureUnderMouse) === null || _a === void 0 ? void 0 : _a.id()) !== featureId) {
-                    if (!featureId) {
-                        self.setFeatureUnderMouse(undefined);
+            });
+        },
+        /**
+         * #action
+         */
+        setFeatureUnderMouse(feat) {
+            self.featureUnderMouseVolatile = feat;
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            addDisposer(self, autorun(async () => {
+                try {
+                    const { rpcManager } = getSession(self);
+                    const view = getContainingView(self);
+                    const { sortedBy, colorBy, parentTrack, adapterConfig, rendererType, } = self;
+                    if (!view.initialized ||
+                        !self.estimatedStatsReady ||
+                        self.regionTooLarge) {
+                        return;
                     }
-                    else {
-                        const sessionId = getRpcSessionId(self);
-                        const view = getContainingView(self);
-                        const { feature } = (await session.rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
-                            featureId,
-                            sessionId,
-                            layoutId: view.id,
-                            rendererType: 'PileupRenderer',
-                        }));
-                        // check featureIdUnderMouse is still the same as the
-                        // feature.id that was returned e.g. that the user hasn't
-                        // moused over to a new position during the async operation
-                        // above
+                    const { staticBlocks, bpPerPx } = view;
+                    // continually generate the vc pairing, set and rerender if any
+                    // new values seen
+                    if (colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) {
+                        self.updateColorTagMap(await getUniqueTagValues(self, colorBy, staticBlocks));
+                    }
+                    if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
+                        const adapter = getConf(parentTrack, ['adapter']);
+                        self.updateModificationColorMap(await getUniqueModificationValues(self, adapter, colorBy, staticBlocks));
+                    }
+                    if (sortedBy) {
+                        const { pos, refName, assemblyName } = sortedBy;
+                        // render just the sorted region first
                         // @ts-ignore
-                        if (self.featureIdUnderMouse === feature.uniqueId) {
-                            // @ts-ignore
-                            self.setFeatureUnderMouse(new SimpleFeature(feature));
-                        }
+                        await self.rendererType.renderInClient(rpcManager, {
+                            assemblyName,
+                            regions: [
+                                {
+                                    start: pos,
+                                    end: pos + 1,
+                                    refName,
+                                    assemblyName,
+                                },
+                            ],
+                            adapterConfig: adapterConfig,
+                            rendererType: rendererType.name,
+                            sessionId: getRpcSessionId(self),
+                            layoutId: view.id,
+                            timeout: 1000000,
+                            ...self.renderProps(),
+                        });
+                        self.setReady(true);
+                        self.setCurrBpPerPx(bpPerPx);
+                    }
+                    else {
+                        self.setReady(true);
                     }
                 }
-            }
-            catch (e) {
-                console.error(e);
-                session.notify(`${e}`, 'error');
-            }
-        }));
-    },
-    selectFeature(feature) {
-        const session = getSession(self);
-        if (isSessionModelWithWidgets(session)) {
-            const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: getContainingView(self) });
-            session.showWidget(featureWidget);
-        }
-        session.setSelection(feature);
-    },
-    clearSelected() {
-        self.sortedBy = undefined;
-    },
-    // uses copy-to-clipboard and generates notification
-    copyFeatureToClipboard(feature) {
-        const { uniqueId, ...rest } = feature.toJSON();
-        const session = getSession(self);
-        copy(JSON.stringify(rest, null, 4));
-        session.notify('Copied to clipboard', 'success');
-    },
-    toggleSoftClipping() {
-        self.showSoftClipping = !self.showSoftClipping;
-    },
-    toggleMismatchAlpha() {
-        self.mismatchAlpha = !self.mismatchAlpha;
-    },
-    setConfig(configuration) {
-        self.configuration = configuration;
-    },
-    setSortedBy(type, tag) {
-        const { centerLineInfo } = getContainingView(self);
-        if (!centerLineInfo) {
-            return;
-        }
-        const { refName, assemblyName, offset } = centerLineInfo;
-        const centerBp = Math.round(offset) + 1;
-        if (centerBp < 0 || !refName) {
-            return;
-        }
-        self.sortedBy = {
-            type,
-            pos: centerBp,
-            refName,
-            assemblyName,
-            tag,
-        };
-        self.ready = false;
-    },
-    setFilterBy(filter) {
-        self.filterBy = cast(filter);
-    },
-}))
-    .actions(self => {
-    // resets the sort object and refresh whole display on reload
-    const superReload = self.reload;
-    return {
-        reload() {
-            self.clearSelected();
-            superReload();
-        },
-    };
-})
-    .views(self => ({
-    get maxHeight() {
-        const conf = getConf(self, ['renderers', self.rendererTypeName]) || {};
-        return self.trackMaxHeight !== undefined
-            ? self.trackMaxHeight
-            : conf.maxHeight;
-    },
-    get rendererConfig() {
-        const configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
-        return self.rendererType.configSchema.create({
-            ...configBlob,
-            height: self.featureHeight,
-            noSpacing: self.noSpacing,
-            maxHeight: this.maxHeight,
-            mismatchAlpha: self.mismatchAlpha,
-        }, getEnv(self));
-    },
-    get featureHeightSetting() {
-        return (self.featureHeight || readConfObject(this.rendererConfig, 'height'));
-    },
-    get mismatchAlphaSetting() {
-        return self.mismatchAlpha !== undefined
-            ? self.mismatchAlpha
-            : readConfObject(this.rendererConfig, 'mismatchAlpha');
-    },
-    get featureUnderMouse() {
-        return self.featureUnderMouseVolatile;
-    },
-}))
-    .views(self => {
-    const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
-    return {
-        get rendererTypeName() {
-            const viewName = getConf(self, 'defaultRendering');
-            const rendererType = rendererTypes.get(viewName);
-            if (!rendererType) {
-                throw new Error(`unknown alignments view name ${viewName}`);
-            }
-            return rendererType;
-        },
-        contextMenuItems() {
-            const feat = self.contextMenuFeature;
-            const contextMenuItems = feat
-                ? [
-                    {
-                        label: 'Open feature details',
-                        icon: MenuOpenIcon,
-                        onClick: () => {
-                            self.clearFeatureSelection();
-                            if (feat) {
-                                self.selectFeature(feat);
-                            }
-                        },
-                    },
-                    {
-                        label: 'Copy info to clipboard',
-                        icon: ContentCopyIcon,
-                        onClick: () => {
-                            if (feat) {
-                                self.copyFeatureToClipboard(feat);
-                            }
-                        },
-                    },
-                ]
-                : [];
-            return contextMenuItems;
-        },
-        get DisplayBlurb() {
-            return LinearPileupDisplayBlurb;
-        },
-        renderProps() {
-            const view = getContainingView(self);
-            const { colorTagMap, modificationTagMap, sortedBy, colorBy, filterBy, rpcDriverName, currBpPerPx, ready, } = self;
-            const superProps = superRenderProps();
-            return {
-                ...superProps,
-                notReady: superProps.notReady ||
-                    !ready ||
-                    (sortedBy && currBpPerPx !== view.bpPerPx),
-                rpcDriverName,
-                displayModel: self,
-                sortedBy,
-                colorBy,
-                filterBy: JSON.parse(JSON.stringify(filterBy)),
-                colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
-                modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
-                showSoftClip: self.showSoftClipping,
-                config: self.rendererConfig,
-                async onFeatureClick(_, featureId) {
-                    const session = getSession(self);
-                    const { rpcManager } = session;
-                    try {
-                        const f = featureId || self.featureIdUnderMouse;
-                        if (!f) {
-                            self.clearFeatureSelection();
+                catch (e) {
+                    console.error(e);
+                    self.setError(e);
+                }
+            }, { delay: 1000 }));
+            // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+            addDisposer(self, autorun(async () => {
+                var _a;
+                const session = getSession(self);
+                try {
+                    const featureId = self.featureIdUnderMouse;
+                    if (((_a = self.featureUnderMouse) === null || _a === void 0 ? void 0 : _a.id()) !== featureId) {
+                        if (!featureId) {
+                            self.setFeatureUnderMouse(undefined);
                         }
                         else {
                             const sessionId = getRpcSessionId(self);
-                            const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
-                                featureId: f,
+                            const view = getContainingView(self);
+                            const { feature } = (await session.rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                featureId,
                                 sessionId,
-                                layoutId: getContainingView(self).id,
+                                layoutId: view.id,
                                 rendererType: 'PileupRenderer',
                             }));
-                            if (feature) {
+                            // check featureIdUnderMouse is still the same as the
+                            // feature.id that was returned e.g. that the user hasn't
+                            // moused over to a new position during the async operation
+                            // above
+                            // @ts-ignore
+                            if (self.featureIdUnderMouse === feature.uniqueId) {
                                 // @ts-ignore
-                                self.selectFeature(new SimpleFeature(feature));
+                                self.setFeatureUnderMouse(new SimpleFeature(feature));
                             }
                         }
                     }
-                    catch (e) {
-                        console.error(e);
-                        session.notify(`${e}`);
-                    }
-                },
-                onClick() {
-                    self.clearFeatureSelection();
-                },
-                // similar to click but opens a menu with further options
-                async onFeatureContextMenu(_, featureId) {
-                    const session = getSession(self);
-                    const { rpcManager } = session;
-                    try {
-                        const f = featureId || self.featureIdUnderMouse;
-                        if (!f) {
-                            self.clearFeatureSelection();
-                        }
-                        else {
-                            const sessionId = getRpcSessionId(self);
-                            const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
-                                featureId: f,
-                                sessionId,
-                                layoutId: getContainingView(self).id,
-                                rendererType: 'PileupRenderer',
-                            }));
-                            if (feature) {
-                                self.setContextMenuFeature(new SimpleFeature(feature));
-                            }
-                        }
-                    }
-                    catch (e) {
-                        console.error(e);
-                        session.notify(`${e}`);
-                    }
-                },
+                }
+                catch (e) {
+                    console.error(e);
+                    session.notify(`${e}`, 'error');
+                }
+            }));
+        },
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = getSession(self);
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: getContainingView(self) });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(feature);
+        },
+        /**
+         * #action
+         */
+        clearSelected() {
+            self.sortedBy = undefined;
+        },
+        /**
+         * #action
+         * uses copy-to-clipboard and generates notification
+         */
+        copyFeatureToClipboard(feature) {
+            const { uniqueId, ...rest } = feature.toJSON();
+            const session = getSession(self);
+            copy(JSON.stringify(rest, null, 4));
+            session.notify('Copied to clipboard', 'success');
+        },
+        /**
+         * #action
+         */
+        toggleSoftClipping() {
+            self.showSoftClipping = !self.showSoftClipping;
+        },
+        /**
+         * #action
+         */
+        toggleMismatchAlpha() {
+            self.mismatchAlpha = !self.mismatchAlpha;
+        },
+        /**
+         * #action
+         */
+        setConfig(configuration) {
+            self.configuration = configuration;
+        },
+        /**
+         * #action
+         */
+        setSortedBy(type, tag) {
+            const { centerLineInfo } = getContainingView(self);
+            if (!centerLineInfo) {
+                return;
+            }
+            const { refName, assemblyName, offset } = centerLineInfo;
+            const centerBp = Math.round(offset) + 1;
+            if (centerBp < 0 || !refName) {
+                return;
+            }
+            self.sortedBy = {
+                type,
+                pos: centerBp,
+                refName,
+                assemblyName,
+                tag,
             };
+            self.ready = false;
         },
-        trackMenuItems() {
-            return [
-                ...superTrackMenuItems(),
-                {
-                    label: 'Show soft clipping',
-                    icon: VisibilityIcon,
-                    type: 'checkbox',
-                    checked: self.showSoftClipping,
-                    onClick: () => {
-                        self.toggleSoftClipping();
-                        // if toggling from off to on, will break sort for this track
-                        // so clear it
-                        if (self.showSoftClipping) {
-                            self.clearSelected();
-                        }
-                    },
-                },
-                {
-                    label: 'Sort by',
-                    icon: SortIcon,
-                    disabled: self.showSoftClipping,
-                    subMenu: [
-                        ...['Start location', 'Read strand', 'Base pair'].map(option => ({
-                            label: option,
-                            onClick: () => self.setSortedBy(option),
-                        })),
+        setFilterBy(filter) {
+            self.filterBy = cast(filter);
+        },
+    }))
+        .actions(self => {
+        // resets the sort object and refresh whole display on reload
+        const superReload = self.reload;
+        return {
+            /**
+             * #action
+             */
+            reload() {
+                self.clearSelected();
+                superReload();
+            },
+        };
+    })
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get maxHeight() {
+            const conf = getConf(self, ['renderers', self.rendererTypeName]) || {};
+            return self.trackMaxHeight !== undefined
+                ? self.trackMaxHeight
+                : conf.maxHeight;
+        },
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
+            return self.rendererType.configSchema.create({
+                ...configBlob,
+                height: self.featureHeight,
+                noSpacing: self.noSpacing,
+                maxHeight: this.maxHeight,
+                mismatchAlpha: self.mismatchAlpha,
+            }, getEnv(self));
+        },
+        /**
+         * #getter
+         */
+        get featureHeightSetting() {
+            return (self.featureHeight || readConfObject(this.rendererConfig, 'height'));
+        },
+        /**
+         * #getter
+         */
+        get mismatchAlphaSetting() {
+            return self.mismatchAlpha !== undefined
+                ? self.mismatchAlpha
+                : readConfObject(this.rendererConfig, 'mismatchAlpha');
+        },
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        return {
+            /**
+             * #getter
+             */
+            get rendererTypeName() {
+                const viewName = getConf(self, 'defaultRendering');
+                const rendererType = rendererTypes.get(viewName);
+                if (!rendererType) {
+                    throw new Error(`unknown alignments view name ${viewName}`);
+                }
+                return rendererType;
+            },
+            /**
+             * #method
+             */
+            contextMenuItems() {
+                const feat = self.contextMenuFeature;
+                const contextMenuItems = feat
+                    ? [
                         {
-                            label: 'Sort by tag...',
+                            label: 'Open feature details',
+                            icon: MenuOpenIcon,
                             onClick: () => {
-                                getSession(self).queueDialog(handleClose => [
-                                    SortByTagDlg,
-                                    { model: self, handleClose },
-                                ]);
+                                self.clearFeatureSelection();
+                                if (feat) {
+                                    self.selectFeature(feat);
+                                }
                             },
                         },
                         {
-                            label: 'Clear sort',
-                            onClick: () => self.clearSelected(),
-                        },
-                    ],
-                },
-                {
-                    label: 'Color scheme',
-                    icon: PaletteIcon,
-                    subMenu: [
-                        {
-                            label: 'Normal',
+                            label: 'Copy info to clipboard',
+                            icon: ContentCopyIcon,
                             onClick: () => {
-                                self.setColorScheme({ type: 'normal' });
+                                if (feat) {
+                                    self.copyFeatureToClipboard(feat);
+                                }
                             },
                         },
-                        {
-                            label: 'Mapping quality',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'mappingQuality' });
-                            },
+                    ]
+                    : [];
+                return contextMenuItems;
+            },
+            /**
+             * #getter
+             */
+            get DisplayBlurb() {
+                return LinearPileupDisplayBlurb;
+            },
+            /**
+             * #method
+             */
+            renderProps() {
+                const view = getContainingView(self);
+                const { colorTagMap, modificationTagMap, sortedBy, colorBy, filterBy, rpcDriverName, currBpPerPx, ready, } = self;
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    notReady: superProps.notReady ||
+                        !ready ||
+                        (sortedBy && currBpPerPx !== view.bpPerPx),
+                    rpcDriverName,
+                    displayModel: self,
+                    sortedBy,
+                    colorBy,
+                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+                    modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
+                    showSoftClip: self.showSoftClipping,
+                    config: self.rendererConfig,
+                    async onFeatureClick(_, featureId) {
+                        const session = getSession(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = getRpcSessionId(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: getContainingView(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    // @ts-ignore
+                                    self.selectFeature(new SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notify(`${e}`);
+                        }
+                    },
+                    onClick() {
+                        self.clearFeatureSelection();
+                    },
+                    // similar to click but opens a menu with further options
+                    async onFeatureContextMenu(_, featureId) {
+                        const session = getSession(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = getRpcSessionId(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: getContainingView(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    self.setContextMenuFeature(new SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notify(`${e}`);
+                        }
+                    },
+                };
+            },
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Show soft clipping',
+                        icon: VisibilityIcon,
+                        type: 'checkbox',
+                        checked: self.showSoftClipping,
+                        onClick: () => {
+                            self.toggleSoftClipping();
+                            // if toggling from off to on, will break sort for this track
+                            // so clear it
+                            if (self.showSoftClipping) {
+                                self.clearSelected();
+                            }
                         },
-                        {
-                            label: 'Strand',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'strand' });
+                    },
+                    {
+                        label: 'Sort by',
+                        icon: SortIcon,
+                        disabled: self.showSoftClipping,
+                        subMenu: [
+                            ...['Start location', 'Read strand', 'Base pair'].map(option => ({
+                                label: option,
+                                onClick: () => self.setSortedBy(option),
+                            })),
+                            {
+                                label: 'Sort by tag...',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        SortByTagDlg,
+                                        { model: self, handleClose },
+                                    ]);
+                                },
                             },
-                        },
-                        {
-                            label: 'Pair orientation',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'pairOrientation' });
+                            {
+                                label: 'Clear sort',
+                                onClick: () => self.clearSelected(),
                             },
-                        },
-                        {
-                            label: 'Per-base quality',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'perBaseQuality' });
+                        ],
+                    },
+                    {
+                        label: 'Color scheme',
+                        icon: PaletteIcon,
+                        subMenu: [
+                            {
+                                label: 'Normal',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'normal' });
+                                },
                             },
-                        },
-                        {
-                            label: 'Per-base lettering',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'perBaseLettering' });
+                            {
+                                label: 'Mapping quality',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'mappingQuality' });
+                                },
                             },
-                        },
-                        {
-                            label: 'Modifications or methylation',
-                            onClick: () => {
-                                getSession(self).queueDialog(doneCallback => [
-                                    ModificationsDlg,
-                                    { model: self, handleClose: doneCallback },
-                                ]);
+                            {
+                                label: 'Strand',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'strand' });
+                                },
                             },
-                        },
-                        {
-                            label: 'Insert size',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'insertSize' });
+                            {
+                                label: 'Pair orientation',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'pairOrientation' });
+                                },
                             },
-                        },
-                        {
-                            label: 'Stranded paired-end',
-                            onClick: () => {
-                                self.setColorScheme({ type: 'reverseTemplate' });
+                            {
+                                label: 'Per-base quality',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'perBaseQuality' });
+                                },
                             },
-                        },
-                        {
-                            label: 'Color by tag...',
-                            onClick: () => {
-                                getSession(self).queueDialog(doneCallback => [
-                                    ColorByTagDlg,
-                                    { model: self, handleClose: doneCallback },
-                                ]);
+                            {
+                                label: 'Per-base lettering',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'perBaseLettering' });
+                                },
+                            },
+                            {
+                                label: 'Modifications or methylation',
+                                onClick: () => {
+                                    getSession(self).queueDialog(doneCallback => [
+                                        ModificationsDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Insert size',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'insertSize' });
+                                },
                             },
+                            {
+                                label: 'Stranded paired-end',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'reverseTemplate' });
+                                },
+                            },
+                            {
+                                label: 'Color by tag...',
+                                onClick: () => {
+                                    getSession(self).queueDialog(doneCallback => [
+                                        ColorByTagDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Filter by',
+                        icon: FilterListIcon,
+                        onClick: () => {
+                            getSession(self).queueDialog(doneCallback => [
+                                FilterByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
                         },
-                    ],
-                },
-                {
-                    label: 'Filter by',
-                    icon: FilterListIcon,
-                    onClick: () => {
-                        getSession(self).queueDialog(doneCallback => [
-                            FilterByTagDlg,
-                            { model: self, handleClose: doneCallback },
-                        ]);
                     },
-                },
-                {
-                    label: 'Set feature height',
-                    onClick: () => {
-                        getSession(self).queueDialog(doneCallback => [
-                            SetFeatureHeightDlg,
-                            { model: self, handleClose: doneCallback },
-                        ]);
+                    {
+                        label: 'Set feature height',
+                        onClick: () => {
+                            getSession(self).queueDialog(doneCallback => [
+                                SetFeatureHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
                     },
-                },
-                {
-                    label: 'Set max height',
-                    onClick: () => {
-                        getSession(self).queueDialog(doneCallback => [
-                            SetMaxHeightDlg,
-                            { model: self, handleClose: doneCallback },
-                        ]);
+                    {
+                        label: 'Set max height',
+                        onClick: () => {
+                            getSession(self).queueDialog(doneCallback => [
+                                SetMaxHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
                     },
-                },
-                {
-                    label: 'Fade mismatches by quality',
-                    type: 'checkbox',
-                    checked: self.mismatchAlphaSetting,
-                    onClick: () => {
-                        self.toggleMismatchAlpha();
+                    {
+                        label: 'Fade mismatches by quality',
+                        type: 'checkbox',
+                        checked: self.mismatchAlphaSetting,
+                        onClick: () => {
+                            self.toggleMismatchAlpha();
+                        },
                     },
-                },
-            ];
-        },
-    };
-});
+                ];
+            },
+        };
+    });
+}
 export default stateModelFactory;
 //# sourceMappingURL=model.js.map