@jbrowse/plugin-alignments 2.6.2 → 2.6.3

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -0,0 +1,499 @@
+import { lazy } from 'react';
+import { autorun, observable } from 'mobx';
+import { cast, types, addDisposer, getSnapshot } from 'mobx-state-tree';
+import copy from 'copy-to-clipboard';
+import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { getEnv, getSession, isSessionModelWithWidgets, getContainingView, SimpleFeature, } from '@jbrowse/core/util';
+import { BaseLinearDisplay, } from '@jbrowse/plugin-linear-genome-view';
+// icons
+import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import FilterListIcon from '@mui/icons-material/ClearAll';
+// locals
+import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
+import { getUniqueTagValues, FilterModel } from '../shared';
+import { createAutorun } from '../util';
+import { ColorByModel } from '../shared/color';
+// async
+const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'));
+const ColorByTagDlg = lazy(() => import('./components/ColorByTag'));
+const SetFeatureHeightDlg = lazy(() => import('./components/SetFeatureHeight'));
+const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'));
+// using a map because it preserves order
+const rendererTypes = new Map([
+    ['pileup', 'PileupRenderer'],
+    ['svg', 'SvgFeatureRenderer'],
+]);
+/**
+ * #stateModel SharedLinearPileupDisplayMixin
+ * #category display
+ * extends `BaseLinearDisplay`
+ */
+export function SharedLinearPileupDisplayMixin(configSchema) {
+    return types
+        .compose(BaseLinearDisplay, types.model({
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+        /**
+         * #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
+         */
+        colorBy: ColorByModel,
+        /**
+         * #property
+         */
+        filterBy: types.optional(FilterModel, {}),
+    }))
+        .volatile(() => ({
+        colorTagMap: observable.map({}),
+        featureUnderMouseVolatile: undefined,
+        tagsReady: false,
+    }))
+        .views(self => ({
+        get autorunReady() {
+            const view = getContainingView(self);
+            return (view.initialized &&
+                self.featureDensityStatsReady &&
+                !self.regionTooLarge);
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setTagsReady(flag) {
+            self.tagsReady = 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);
+            if (colorScheme.tag) {
+                self.tagsReady = false;
+            }
+        },
+        /**
+         * #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;
+                    self.colorTagMap.set(value, colorPalette[totalKeys]);
+                }
+            });
+        },
+        /**
+         * #action
+         */
+        setFeatureUnderMouse(feat) {
+            self.featureUnderMouseVolatile = feat;
+        },
+        /**
+         * #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
+         * 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
+         */
+        setConfig(conf) {
+            self.configuration = conf;
+        },
+        /**
+         * #action
+         */
+        setFilterBy(filter) {
+            self.filterBy = cast(filter);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const { featureHeight, noSpacing, trackMaxHeight, rendererTypeName } = self;
+            const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
+            return self.rendererType.configSchema.create({
+                ...configBlob,
+                ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(noSpacing !== undefined ? { noSpacing } : {}),
+                ...(trackMaxHeight !== undefined
+                    ? { maxHeight: trackMaxHeight }
+                    : {}),
+            }, getEnv(self));
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get maxHeight() {
+            return readConfObject(self.rendererConfig, 'maxHeight');
+        },
+        /**
+         * #getter
+         */
+        get featureHeightSetting() {
+            return readConfObject(self.rendererConfig, 'height');
+        },
+        /**
+         * #getter
+         */
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+        /**
+         * #getter
+         */
+        renderReady() {
+            return self.tagsReady;
+        },
+    }))
+        .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;
+                return 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);
+                                }
+                            },
+                        },
+                    ]
+                    : [];
+            },
+            /**
+             * #getter
+             */
+            get DisplayBlurb() {
+                return LinearPileupDisplayBlurb;
+            },
+            /**
+             * #method
+             */
+            renderPropsPre() {
+                const { colorTagMap, colorBy, filterBy, rpcDriverName } = self;
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    notReady: superProps.notReady || !self.renderReady(),
+                    rpcDriverName,
+                    displayModel: self,
+                    colorBy: colorBy ? getSnapshot(colorBy) : undefined,
+                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+                    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) {
+                                    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
+             */
+            colorSchemeSubMenuItems() {
+                return [
+                    {
+                        label: 'Normal',
+                        onClick: () => self.setColorScheme({ type: 'normal' }),
+                    },
+                    {
+                        label: 'Mapping quality',
+                        onClick: () => self.setColorScheme({ type: 'mappingQuality' }),
+                    },
+                    {
+                        label: 'Strand',
+                        onClick: () => self.setColorScheme({ type: 'strand' }),
+                    },
+                    {
+                        label: 'Per-base quality',
+                        onClick: () => self.setColorScheme({ type: 'perBaseQuality' }),
+                    },
+                    {
+                        label: 'Per-base lettering',
+                        onClick: () => self.setColorScheme({ type: 'perBaseLettering' }),
+                    },
+                    {
+                        label: 'First-of-pair strand',
+                        onClick: () => self.setColorScheme({ type: 'stranded' }),
+                    },
+                    {
+                        label: 'Color by tag...',
+                        onClick: () => {
+                            getSession(self).queueDialog(doneCallback => [
+                                ColorByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                ];
+            },
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Filter by',
+                        icon: FilterListIcon,
+                        onClick: () => {
+                            getSession(self).queueDialog(doneCallback => [
+                                FilterByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Set feature height',
+                        subMenu: [
+                            {
+                                label: 'Normal',
+                                onClick: () => {
+                                    self.setFeatureHeight(7);
+                                    self.setNoSpacing(false);
+                                },
+                            },
+                            {
+                                label: 'Compact',
+                                onClick: () => {
+                                    self.setFeatureHeight(2);
+                                    self.setNoSpacing(true);
+                                },
+                            },
+                            {
+                                label: 'Manually set 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 },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => ({
+        renderProps() {
+            return self.renderPropsPre();
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            createAutorun(self, async () => {
+                const view = getContainingView(self);
+                if (!self.autorunReady) {
+                    return;
+                }
+                const { colorBy } = self;
+                const { staticBlocks } = view;
+                if (colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) {
+                    const vals = await getUniqueTagValues(self, colorBy, staticBlocks);
+                    self.updateColorTagMap(vals);
+                }
+                self.setTagsReady(true);
+            }, { delay: 1000 });
+            // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+            // asynchronously. this is needed due to how we do not serialize all
+            // features from the BAM/CRAM over the rpc
+            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 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
+                            if (self.featureIdUnderMouse === feature.uniqueId) {
+                                self.setFeatureUnderMouse(new SimpleFeature(feature));
+                            }
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error(e);
+                    session.notify(`${e}`, 'error');
+                }
+            }));
+        },
+    }));
+}

package/esm/LinearPileupDisplay/index.d.ts

@@ -2,3 +2,4 @@ import PluginManager from '@jbrowse/core/PluginManager';
 export default function register(pluginManager: PluginManager): void;
 export { default as linearPileupDisplayStateModelFactory } from './model';
 export { default as linearPileupDisplayConfigSchemaFactory } from './configSchema';
+export { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';

package/esm/LinearPileupDisplay/index.js

@@ -19,3 +19,4 @@ export default function register(pluginManager) {
 }
 export { default as linearPileupDisplayStateModelFactory } from './model';
 export { default as linearPileupDisplayConfigSchemaFactory } from './configSchema';
+export { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';