@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/dist/LinearPileupDisplay/model.js

@@ -27,37 +27,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
+const shared_1 = require("../shared");
+const util_2 = require("../util");
 // icons
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
-const Icons_1 = require("@jbrowse/core/ui/Icons");
-const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
 const Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
-const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
-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 util_3 = require("../util");
+const SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
+const mobx_1 = require("mobx");
 // 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 SortByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTag'))));
-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'))));
 const ModificationsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModifications'))));
-// using a map because it preserves order
-const rendererTypes = new Map([
-    ['pileup', 'PileupRenderer'],
-    ['svg', 'SvgFeatureRenderer'],
-]);
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -65,7 +49,7 @@ const rendererTypes = new Map([
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
-        .compose('LinearPileupDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        .compose('LinearPileupDisplay', (0, SharedLinearPileupDisplayMixin_1.SharedLinearPileupDisplayMixin)(configSchema), mobx_state_tree_1.types.model({
         /**
          * #property
          */
@@ -78,22 +62,6 @@ function stateModelFactory(configSchema) {
          * #property
          */
         showSoftClipping: false,
-        /**
-         * #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
          */
@@ -108,140 +76,41 @@ function stateModelFactory(configSchema) {
             refName: mobx_state_tree_1.types.string,
             assemblyName: mobx_state_tree_1.types.string,
         })),
-        /**
-         * #property
-         */
-        colorBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
-            type: mobx_state_tree_1.types.string,
-            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-            extra: mobx_state_tree_1.types.frozen(),
-        })),
-        /**
-         * #property
-         */
-        filterBy: mobx_state_tree_1.types.optional(shared_1.FilterModel, {}),
     }))
         .volatile(() => ({
-        colorTagMap: mobx_1.observable.map({}),
-        modificationTagMap: mobx_1.observable.map({}),
-        featureUnderMouseVolatile: undefined,
+        sortReady: false,
         currSortBpPerPx: 0,
+        modificationTagMap: mobx_1.observable.map({}),
         modificationsReady: false,
-        sortReady: false,
-        tagsReady: false,
-    }))
-        .views(self => ({
-        get autorunReady() {
-            const view = (0, util_1.getContainingView)(self);
-            return (view.initialized &&
-                self.featureDensityStatsReady &&
-                !self.regionTooLarge);
-        },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
-        setModificationsReady(flag) {
-            self.modificationsReady = flag;
-        },
-        /**
-         * #action
-         */
-        setTagsReady(flag) {
-            self.tagsReady = flag;
-        },
-        /**
-         * #action
-         */
-        setSortReady(flag) {
-            self.sortReady = flag;
-        },
         /**
          * #action
          */
         setCurrSortBpPerPx(n) {
             self.currSortBpPerPx = n;
         },
-        /**
-         * #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);
-            self.tagsReady = false;
-            self.modificationsReady = false;
-        },
         /**
          * #action
          */
         updateModificationColorMap(uniqueModifications) {
             uniqueModifications.forEach(value => {
                 if (!self.modificationTagMap.has(value)) {
-                    self.modificationTagMap.set(value, util_2.modificationColors[value] || (0, util_3.randomColor)());
+                    self.modificationTagMap.set(value, util_2.modificationColors[value] || (0, util_2.randomColor)());
                 }
             });
         },
         /**
          * #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;
+        setModificationsReady(flag) {
+            self.modificationsReady = flag;
         },
         /**
          * #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);
+        setSortReady(flag) {
+            self.sortReady = flag;
         },
         /**
          * #action
@@ -249,16 +118,6 @@ function stateModelFactory(configSchema) {
         clearSelected() {
             self.sortedBy = undefined;
         },
-        /**
-         * #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
          */
@@ -271,12 +130,6 @@ function stateModelFactory(configSchema) {
         toggleMismatchAlpha() {
             self.mismatchAlpha = !self.mismatchAlpha;
         },
-        /**
-         * #action
-         */
-        setConfig(conf) {
-            self.configuration = conf;
-        },
         /**
          * #action
          */
@@ -299,9 +152,6 @@ function stateModelFactory(configSchema) {
                 tag,
             };
         },
-        setFilterBy(filter) {
-            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
-        },
     }))
         .actions(self => {
         // resets the sort object and refresh whole display on reload
@@ -333,178 +183,52 @@ function stateModelFactory(configSchema) {
                     : {}),
             }, (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 mismatchAlphaSetting() {
-            return (0, configuration_1.readConfObject)(self.rendererConfig, 'mismatchAlpha');
-        },
-        /**
-         * #getter
-         */
-        get featureUnderMouse() {
-            return self.featureUnderMouseVolatile;
-        },
-        /**
-         * #getter
-         */
-        get renderReady() {
-            const view = (0, util_1.getContainingView)(self);
-            return (self.modificationsReady &&
-                self.tagsReady &&
-                self.currSortBpPerPx === view.bpPerPx);
-        },
     }))
         .views(self => {
-        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        const { renderReady: superRenderReady } = 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);
-                                }
-                            },
-                        },
-                    ]
-                    : [];
+            get mismatchAlphaSetting() {
+                return (0, configuration_1.readConfObject)(self.rendererConfig, 'mismatchAlpha');
             },
             /**
              * #getter
              */
-            get DisplayBlurb() {
-                return LinearPileupDisplayBlurb_1.default;
+            renderReady() {
+                const view = (0, util_1.getContainingView)(self);
+                return (self.modificationsReady &&
+                    self.currSortBpPerPx === view.bpPerPx &&
+                    superRenderReady());
             },
+        };
+    })
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderPropsPre: superRenderPropsPre, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
+        return {
             /**
              * #method
              */
             renderPropsPre() {
-                const { colorTagMap, modificationTagMap, sortedBy, colorBy, filterBy, rpcDriverName, } = self;
-                const superProps = superRenderProps();
+                const { sortedBy, showSoftClipping, modificationTagMap } = self;
+                const superProps = superRenderPropsPre();
                 return {
                     ...superProps,
-                    notReady: superProps.notReady || !self.renderReady,
-                    rpcDriverName,
-                    displayModel: self,
-                    sortedBy: sortedBy ? (0, mobx_state_tree_1.getSnapshot)(sortedBy) : undefined,
-                    colorBy: colorBy ? (0, mobx_state_tree_1.getSnapshot)(colorBy) : undefined,
-                    filterBy: JSON.parse(JSON.stringify(filterBy)),
-                    colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+                    showSoftClip: showSoftClipping,
+                    sortedBy,
                     modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
-                    showSoftClip: self.showSoftClipping,
-                    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}`);
-                        }
-                    },
                 };
             },
-            // renderProps and renderPropsPre are separated due to sortReady
-            // causing a infinite loop in the sort autorun, since the sort autorun
-            // uses renderProps
             /**
              * #method
              */
             renderProps() {
-                const pre = this.renderPropsPre();
+                const { sortReady } = self;
+                const result = superRenderProps();
                 return {
-                    ...pre,
-                    notReady: pre.notReady || !self.sortReady,
+                    ...result,
+                    notReady: result.notReady || !sortReady,
                 };
             },
             /**
@@ -553,32 +277,11 @@ function stateModelFactory(configSchema) {
                     },
                     {
                         label: 'Color scheme',
-                        icon: Palette_1.default,
                         subMenu: [
-                            {
-                                label: 'Normal',
-                                onClick: () => self.setColorScheme({ type: 'normal' }),
-                            },
-                            {
-                                label: 'Mapping quality',
-                                onClick: () => self.setColorScheme({ type: 'mappingQuality' }),
-                            },
-                            {
-                                label: 'Strand',
-                                onClick: () => self.setColorScheme({ type: 'strand' }),
-                            },
                             {
                                 label: 'Pair orientation',
                                 onClick: () => self.setColorScheme({ type: 'pairOrientation' }),
                             },
-                            {
-                                label: 'Per-base quality',
-                                onClick: () => self.setColorScheme({ type: 'perBaseQuality' }),
-                            },
-                            {
-                                label: 'Per-base lettering',
-                                onClick: () => self.setColorScheme({ type: 'perBaseLettering' }),
-                            },
                             {
                                 label: 'Modifications or methylation',
                                 onClick: () => {
@@ -592,68 +295,9 @@ function stateModelFactory(configSchema) {
                                 label: 'Insert size',
                                 onClick: () => self.setColorScheme({ type: 'insertSize' }),
                             },
-                            {
-                                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 },
-                                    ]);
-                                },
-                            },
+                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
-                    {
-                        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 },
-                            ]);
-                        },
-                    },
                     {
                         label: 'Fade mismatches by quality',
                         type: 'checkbox',
@@ -671,36 +315,19 @@ function stateModelFactory(configSchema) {
                 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);
+                const { bpPerPx } = view;
+                self.setCurrSortBpPerPx(bpPerPx);
             }, { delay: 1000 });
-            (0, util_2.createAutorun)(self, async () => {
-                if (!self.autorunReady) {
-                    return;
-                }
-                const { parentTrack, colorBy } = self;
-                const { staticBlocks } = (0, util_1.getContainingView)(self);
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = (0, configuration_1.getConf)(parentTrack, ['adapter']);
-                    const vals = await (0, shared_1.getUniqueModificationValues)(self, adapter, colorBy, staticBlocks);
-                    self.updateModificationColorMap(vals);
-                }
-                self.setModificationsReady(true);
-            });
             (0, util_2.createAutorun)(self, async () => {
                 const { rpcManager } = (0, util_1.getSession)(self);
                 const view = (0, util_1.getContainingView)(self);
                 if (!self.autorunReady) {
                     return;
                 }
-                const { sortedBy, adapterConfig, rendererType } = self;
+                const { sortedBy, adapterConfig, rendererType, sortReady } = self;
                 const { bpPerPx } = view;
-                if (sortedBy) {
+                if (sortedBy &&
+                    (!sortReady || self.currSortBpPerPx === view.bpPerPx)) {
                     const { pos, refName, assemblyName } = sortedBy;
                     // render just the sorted region first
                     // @ts-expect-error
@@ -725,42 +352,19 @@ function stateModelFactory(configSchema) {
                 self.setCurrSortBpPerPx(bpPerPx);
                 self.setSortReady(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));
-                            }
-                        }
-                    }
+            (0, util_2.createAutorun)(self, async () => {
+                if (!self.autorunReady) {
+                    return;
                 }
-                catch (e) {
-                    console.error(e);
-                    session.notify(`${e}`, 'error');
+                const { parentTrack, colorBy } = self;
+                const { staticBlocks } = (0, util_1.getContainingView)(self);
+                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
+                    const adapter = (0, configuration_1.getConf)(parentTrack, ['adapter']);
+                    const vals = await (0, shared_1.getUniqueModificationValues)(self, adapter, colorBy, staticBlocks);
+                    self.updateModificationColorMap(vals);
                 }
-            }));
+                self.setModificationsReady(true);
+            });
         },
     }));
 }

package/dist/LinearReadArcsDisplay/components/ReactComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LinearReadArcsDisplayModel } from '../model';
-declare const _default: ({ model, }: {
+declare const LinearReadArcsReactComponent: ({ model, }: {
     model: LinearReadArcsDisplayModel;
 }) => React.JSX.Element;
-export default _default;
+export default LinearReadArcsReactComponent;

package/dist/LinearReadArcsDisplay/components/ReactComponent.js

@@ -42,7 +42,8 @@ const Arcs = (0, mobx_react_1.observer)(function ({ model, }) {
     // note: the position absolute below avoids scrollbar from appearing on track
     return (react_1.default.createElement("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
-exports.default = (0, mobx_react_1.observer)(function ({ model, }) {
+const LinearReadArcsReactComponent = (0, mobx_react_1.observer)(function ({ model, }) {
     return (react_1.default.createElement(BaseDisplayComponent_1.default, { model: model },
         react_1.default.createElement(Arcs, { model: model })));
 });
+exports.default = LinearReadArcsReactComponent;