@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -0,0 +1,517 @@
+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 SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+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, {}),
+        /**
+         * #property
+         */
+        jexlFilters: types.optional(types.array(types.string), []),
+    }))
+        .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);
+        },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = cast(filters);
+        },
+    }))
+        .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;
+        },
+        /**
+         * #getter
+         */
+        get filters() {
+            return new SerializableFilterChain({ filters: self.jexlFilters });
+        },
+    }))
+        .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)),
+                    filters: self.filters,
+                    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, tagsReady } = self;
+                const { staticBlocks } = view;
+                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
+                    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/components/ColorByModifications.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ObservableMap } from 'mobx';
-declare function ColorByTagDlg(props: {
+declare const ColorByModificationsDialog: ({ model, handleClose, }: {
     model: {
         setColorScheme: (arg: {
             type: string;
@@ -8,9 +8,8 @@ declare function ColorByTagDlg(props: {
         modificationTagMap: ObservableMap<string, string>;
         colorBy?: {
             type: string;
-        };
+        } | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByModificationsDialog;

package/esm/LinearPileupDisplay/components/ColorByModifications.js

@@ -3,8 +3,7 @@ import { observer } from 'mobx-react';
 import { Button, CircularProgress, DialogActions, DialogContent, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
 import ModificationTable from './ModificationsTable';
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByModificationsDialog = observer(function ({ model, handleClose, }) {
     const { colorBy, modificationTagMap } = model;
     const modifications = [...modificationTagMap.entries()];
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Color by modifications" },
@@ -31,5 +30,5 @@ function ColorByTagDlg(props) {
                         handleClose();
                     } }, "Methylation"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(ColorByTagDlg);
+});
+export default ColorByModificationsDialog;

package/esm/LinearPileupDisplay/components/ColorByTag.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-declare function ColorByTagDlg(props: {
+declare const ColorByTagDialog: ({ model, handleClose, }: {
     model: {
-        setColorScheme: Function;
+        setColorScheme: (arg: {
+            type: string;
+            tag: string;
+        }) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByTagDialog;

package/esm/LinearPileupDisplay/components/ColorByTag.js

@@ -2,22 +2,19 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     const [tag, setTag] = useState('');
     const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Color by tag" },
         React.createElement(DialogContent, { style: { overflowX: 'hidden' } },
             React.createElement(Typography, null, "Enter tag to color by: "),
             React.createElement(Typography, { color: "textSecondary" }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."),
-            React.createElement(TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
+            React.createElement(TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
             React.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });
                         handleClose();
                     }, disabled: !validTag }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
-}
-export default observer(ColorByTagDlg);
+});
+export default ColorByTagDialog;

package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface LinearPileupDisplayBlurbProps {
+declare const LinearPileupDisplayBlurb: ({ model, }: {
     model: {
         sortedBy?: {
             pos: number;
@@ -8,6 +8,5 @@ export interface LinearPileupDisplayBlurbProps {
             tag?: string;
         };
     };
-}
-declare const _default: (props: LinearPileupDisplayBlurbProps) => React.JSX.Element | null;
-export default _default;
+}) => React.JSX.Element | null;
+export default LinearPileupDisplayBlurb;

package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Typography } from '@mui/material';
-export default observer(function LinearPileupDisplayBlurb(props) {
+const LinearPileupDisplayBlurb = observer(function ({ model, }) {
     var _a;
-    const { model } = props;
     const { sortedBy } = model;
     return sortedBy ? (React.createElement("div", { "data-testid": `blurb-${sortedBy}` },
         React.createElement(Typography, { color: "secondary", variant: "caption" }, sortedBy
             ? `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`
             : null))) : null;
 });
+export default LinearPileupDisplayBlurb;

package/esm/LinearPileupDisplay/components/SetFeatureHeight.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-declare function SetFeatureHeightDlg(props: {
+declare const SetFeatureHeightDialog: (props: {
     model: {
         setFeatureHeight: (arg?: number) => void;
         setNoSpacing: (arg?: boolean) => void;
         featureHeightSetting: number;
-        noSpacing?: boolean;
+        noSpacing?: boolean | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetFeatureHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetFeatureHeightDialog;

package/esm/LinearPileupDisplay/components/SetFeatureHeight.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-function SetFeatureHeightDlg(props) {
+const SetFeatureHeightDialog = observer(function (props) {
     const { model, handleClose } = props;
     const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
     const [height, setHeight] = useState(`${featureHeightSetting}`);
@@ -20,5 +20,5 @@ function SetFeatureHeightDlg(props) {
                         handleClose();
                     } }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(SetFeatureHeightDlg);
+});
+export default SetFeatureHeightDialog;

package/esm/LinearPileupDisplay/components/SetMaxHeight.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-declare function SetMaxHeightDlg(props: {
+declare const SetMaxHeightDialog: (props: {
     model: {
         maxHeight?: number;
         setMaxHeight: Function;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetMaxHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetMaxHeightDialog;