@jbrowse/plugin-alignments 2.6.2 → 2.6.3

package/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -0,0 +1,529 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedLinearPileupDisplayMixin = void 0;
+const react_1 = require("react");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const configuration_1 = require("@jbrowse/core/configuration");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const util_1 = require("@jbrowse/core/util");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
+// locals
+const LinearPileupDisplayBlurb_1 = __importDefault(require("./components/LinearPileupDisplayBlurb"));
+const shared_1 = require("../shared");
+const util_2 = require("../util");
+const color_1 = require("../shared/color");
+// async
+const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
+const ColorByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByTag'))));
+const SetFeatureHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetFeatureHeight'))));
+const SetMaxHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetMaxHeight'))));
+// using a map because it preserves order
+const rendererTypes = new Map([
+    ['pileup', 'PileupRenderer'],
+    ['svg', 'SvgFeatureRenderer'],
+]);
+/**
+ * #stateModel SharedLinearPileupDisplayMixin
+ * #category display
+ * extends `BaseLinearDisplay`
+ */
+function SharedLinearPileupDisplayMixin(configSchema) {
+    return mobx_state_tree_1.types
+        .compose(plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        /**
+         * #property
+         */
+        configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        /**
+         * #property
+         */
+        featureHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        /**
+         * #property
+         */
+        noSpacing: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        fadeLikelihood: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        trackMaxHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+        /**
+         * #property
+         */
+        colorBy: color_1.ColorByModel,
+        /**
+         * #property
+         */
+        filterBy: mobx_state_tree_1.types.optional(shared_1.FilterModel, {}),
+    }))
+        .volatile(() => ({
+        colorTagMap: mobx_1.observable.map({}),
+        featureUnderMouseVolatile: undefined,
+        tagsReady: false,
+    }))
+        .views(self => ({
+        get autorunReady() {
+            const view = (0, util_1.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 = mobx_1.observable.map({}); // clear existing mapping
+            self.colorBy = (0, mobx_state_tree_1.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 = (0, util_1.getSession)(self);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: (0, util_1.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 = (0, util_1.getSession)(self);
+            (0, copy_to_clipboard_1.default)(JSON.stringify(rest, null, 4));
+            session.notify('Copied to clipboard', 'success');
+        },
+        /**
+         * #action
+         */
+        setConfig(conf) {
+            self.configuration = conf;
+        },
+        /**
+         * #action
+         */
+        setFilterBy(filter) {
+            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get rendererConfig() {
+            const { featureHeight, noSpacing, trackMaxHeight, rendererTypeName } = self;
+            const configBlob = (0, configuration_1.getConf)(self, ['renderers', rendererTypeName]) || {};
+            return self.rendererType.configSchema.create({
+                ...configBlob,
+                ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(noSpacing !== undefined ? { noSpacing } : {}),
+                ...(trackMaxHeight !== undefined
+                    ? { maxHeight: trackMaxHeight }
+                    : {}),
+            }, (0, util_1.getEnv)(self));
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get maxHeight() {
+            return (0, configuration_1.readConfObject)(self.rendererConfig, 'maxHeight');
+        },
+        /**
+         * #getter
+         */
+        get featureHeightSetting() {
+            return (0, configuration_1.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 = (0, configuration_1.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: MenuOpen_1.default,
+                            onClick: () => {
+                                self.clearFeatureSelection();
+                                if (feat) {
+                                    self.selectFeature(feat);
+                                }
+                            },
+                        },
+                        {
+                            label: 'Copy info to clipboard',
+                            icon: Icons_1.ContentCopy,
+                            onClick: () => {
+                                if (feat) {
+                                    self.copyFeatureToClipboard(feat);
+                                }
+                            },
+                        },
+                    ]
+                    : [];
+            },
+            /**
+             * #getter
+             */
+            get DisplayBlurb() {
+                return LinearPileupDisplayBlurb_1.default;
+            },
+            /**
+             * #method
+             */
+            renderPropsPre() {
+                const { colorTagMap, colorBy, filterBy, rpcDriverName } = self;
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    notReady: superProps.notReady || !self.renderReady(),
+                    rpcDriverName,
+                    displayModel: self,
+                    colorBy: colorBy ? (0, mobx_state_tree_1.getSnapshot)(colorBy) : undefined,
+                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+                    config: self.rendererConfig,
+                    async onFeatureClick(_, featureId) {
+                        const session = (0, util_1.getSession)(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: (0, util_1.getContainingView)(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    self.selectFeature(new util_1.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 = (0, util_1.getSession)(self);
+                        const { rpcManager } = session;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = (0, tracks_1.getRpcSessionId)(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    layoutId: (0, util_1.getContainingView)(self).id,
+                                    rendererType: 'PileupRenderer',
+                                }));
+                                if (feature) {
+                                    self.setContextMenuFeature(new util_1.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: () => {
+                            (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                ColorByTagDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                ];
+            },
+            /**
+             * #method
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Filter by',
+                        icon: ClearAll_1.default,
+                        onClick: () => {
+                            (0, util_1.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: () => {
+                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                        SetFeatureHeightDlg,
+                                        { model: self, handleClose: doneCallback },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Set max height...',
+                        onClick: () => {
+                            (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                SetMaxHeightDlg,
+                                { model: self, handleClose: doneCallback },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => ({
+        renderProps() {
+            return self.renderPropsPre();
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            (0, util_2.createAutorun)(self, async () => {
+                const view = (0, util_1.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 (0, shared_1.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
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+                var _a;
+                const session = (0, util_1.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 = (0, tracks_1.getRpcSessionId)(self);
+                            const view = (0, util_1.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 util_1.SimpleFeature(feature));
+                            }
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error(e);
+                    session.notify(`${e}`, 'error');
+                }
+            }));
+        },
+    }));
+}
+exports.SharedLinearPileupDisplayMixin = SharedLinearPileupDisplayMixin;

package/dist/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/dist/LinearPileupDisplay/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.linearPileupDisplayConfigSchemaFactory = exports.linearPileupDisplayStateModelFactory = void 0;
+exports.SharedLinearPileupDisplayMixin = exports.linearPileupDisplayConfigSchemaFactory = exports.linearPileupDisplayStateModelFactory = void 0;
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
@@ -28,3 +28,5 @@ var model_2 = require("./model");
 Object.defineProperty(exports, "linearPileupDisplayStateModelFactory", { enumerable: true, get: function () { return __importDefault(model_2).default; } });
 var configSchema_2 = require("./configSchema");
 Object.defineProperty(exports, "linearPileupDisplayConfigSchemaFactory", { enumerable: true, get: function () { return __importDefault(configSchema_2).default; } });
+var SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
+Object.defineProperty(exports, "SharedLinearPileupDisplayMixin", { enumerable: true, get: function () { return SharedLinearPileupDisplayMixin_1.SharedLinearPileupDisplayMixin; } });