@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/esm/LinearPileupDisplay/model.js

@@ -1,35 +1,19 @@
 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 { types } from 'mobx-state-tree';
 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';
+import { getEnv, getSession, getContainingView } from '@jbrowse/core/util';
+import { getUniqueModificationValues } from '../shared';
+import { createAutorun, randomColor, modificationColors } from '../util';
 // icons
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
-import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import SortIcon from '@mui/icons-material/Sort';
-import PaletteIcon from '@mui/icons-material/Palette';
-import FilterListIcon from '@mui/icons-material/ClearAll';
 // locals
-import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
-import { getUniqueTagValues, getUniqueModificationValues, FilterModel, } from '../shared';
-import { createAutorun, modificationColors } from '../util';
-import { randomColor } from '../util';
+import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
+import { observable } from 'mobx';
 // async
-const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'));
-const ColorByTagDlg = lazy(() => import('./components/ColorByTag'));
 const SortByTagDlg = lazy(() => import('./components/SortByTag'));
-const SetFeatureHeightDlg = lazy(() => import('./components/SetFeatureHeight'));
-const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'));
 const ModificationsDlg = lazy(() => import('./components/ColorByModifications'));
-// using a map because it preserves order
-const rendererTypes = new Map([
-    ['pileup', 'PileupRenderer'],
-    ['svg', 'SvgFeatureRenderer'],
-]);
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -37,7 +21,7 @@ const rendererTypes = new Map([
  */
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearPileupDisplay', BaseLinearDisplay, types.model({
+        .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), types.model({
         /**
          * #property
          */
@@ -50,22 +34,6 @@ function stateModelFactory(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
          */
@@ -80,88 +48,20 @@ function stateModelFactory(configSchema) {
             refName: types.string,
             assemblyName: types.string,
         })),
-        /**
-         * #property
-         */
-        colorBy: types.maybe(types.model({
-            type: types.string,
-            tag: types.maybe(types.string),
-            extra: types.frozen(),
-        })),
-        /**
-         * #property
-         */
-        filterBy: types.optional(FilterModel, {}),
     }))
         .volatile(() => ({
-        colorTagMap: observable.map({}),
-        modificationTagMap: observable.map({}),
-        featureUnderMouseVolatile: undefined,
+        sortReady: false,
         currSortBpPerPx: 0,
+        modificationTagMap: observable.map({}),
         modificationsReady: false,
-        sortReady: false,
-        tagsReady: false,
-    }))
-        .views(self => ({
-        get autorunReady() {
-            const view = 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 = observable.map({}); // clear existing mapping
-            self.colorBy = cast(colorScheme);
-            self.tagsReady = false;
-            self.modificationsReady = false;
-        },
         /**
          * #action
          */
@@ -175,45 +75,14 @@ function stateModelFactory(configSchema) {
         /**
          * #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 = getSession(self);
-            if (isSessionModelWithWidgets(session)) {
-                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', { featureData: feature.toJSON(), view: getContainingView(self) });
-                session.showWidget(featureWidget);
-            }
-            session.setSelection(feature);
+        setSortReady(flag) {
+            self.sortReady = flag;
         },
         /**
          * #action
@@ -221,16 +90,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 = getSession(self);
-            copy(JSON.stringify(rest, null, 4));
-            session.notify('Copied to clipboard', 'success');
-        },
         /**
          * #action
          */
@@ -243,12 +102,6 @@ function stateModelFactory(configSchema) {
         toggleMismatchAlpha() {
             self.mismatchAlpha = !self.mismatchAlpha;
         },
-        /**
-         * #action
-         */
-        setConfig(conf) {
-            self.configuration = conf;
-        },
         /**
          * #action
          */
@@ -271,9 +124,6 @@ function stateModelFactory(configSchema) {
                 tag,
             };
         },
-        setFilterBy(filter) {
-            self.filterBy = cast(filter);
-        },
     }))
         .actions(self => {
         // resets the sort object and refresh whole display on reload
@@ -305,178 +155,52 @@ function stateModelFactory(configSchema) {
                     : {}),
             }, getEnv(self));
         },
-    }))
-        .views(self => ({
-        /**
-         * #getter
-         */
-        get maxHeight() {
-            return readConfObject(self.rendererConfig, 'maxHeight');
-        },
-        /**
-         * #getter
-         */
-        get featureHeightSetting() {
-            return readConfObject(self.rendererConfig, 'height');
-        },
-        /**
-         * #getter
-         */
-        get mismatchAlphaSetting() {
-            return readConfObject(self.rendererConfig, 'mismatchAlpha');
-        },
-        /**
-         * #getter
-         */
-        get featureUnderMouse() {
-            return self.featureUnderMouseVolatile;
-        },
-        /**
-         * #getter
-         */
-        get renderReady() {
-            const view = 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 = 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);
-                                }
-                            },
-                        },
-                    ]
-                    : [];
+            get mismatchAlphaSetting() {
+                return readConfObject(self.rendererConfig, 'mismatchAlpha');
             },
             /**
              * #getter
              */
-            get DisplayBlurb() {
-                return LinearPileupDisplayBlurb;
+            renderReady() {
+                const view = 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 ? getSnapshot(sortedBy) : undefined,
-                    colorBy: colorBy ? 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 = 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}`);
-                        }
-                    },
                 };
             },
-            // 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,
                 };
             },
             /**
@@ -525,32 +249,11 @@ function stateModelFactory(configSchema) {
                     },
                     {
                         label: 'Color scheme',
-                        icon: PaletteIcon,
                         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: () => {
@@ -564,68 +267,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: () => {
-                                    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: '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 },
-                                    ]);
-                                },
-                            },
+                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
-                    {
-                        label: 'Set max height',
-                        onClick: () => {
-                            getSession(self).queueDialog(doneCallback => [
-                                SetMaxHeightDlg,
-                                { model: self, handleClose: doneCallback },
-                            ]);
-                        },
-                    },
                     {
                         label: 'Fade mismatches by quality',
                         type: 'checkbox',
@@ -643,36 +287,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 getUniqueTagValues(self, colorBy, staticBlocks);
-                    self.updateColorTagMap(vals);
-                }
-                self.setTagsReady(true);
+                const { bpPerPx } = view;
+                self.setCurrSortBpPerPx(bpPerPx);
             }, { delay: 1000 });
-            createAutorun(self, async () => {
-                if (!self.autorunReady) {
-                    return;
-                }
-                const { parentTrack, colorBy } = self;
-                const { staticBlocks } = getContainingView(self);
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = getConf(parentTrack, ['adapter']);
-                    const vals = await getUniqueModificationValues(self, adapter, colorBy, staticBlocks);
-                    self.updateModificationColorMap(vals);
-                }
-                self.setModificationsReady(true);
-            });
             createAutorun(self, async () => {
                 const { rpcManager } = getSession(self);
                 const view = 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
@@ -697,42 +324,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
-            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));
-                            }
-                        }
-                    }
+            createAutorun(self, async () => {
+                if (!self.autorunReady) {
+                    return;
                 }
-                catch (e) {
-                    console.error(e);
-                    session.notify(`${e}`, 'error');
+                const { parentTrack, colorBy } = self;
+                const { staticBlocks } = getContainingView(self);
+                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
+                    const adapter = getConf(parentTrack, ['adapter']);
+                    const vals = await getUniqueModificationValues(self, adapter, colorBy, staticBlocks);
+                    self.updateModificationColorMap(vals);
                 }
-            }));
+                self.setModificationsReady(true);
+            });
         },
     }));
 }

package/esm/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/esm/LinearReadArcsDisplay/components/ReactComponent.js

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