@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -1,127 +1,82 @@
 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 { ConfigurationReference, getConf, readConfObject, } 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, getContainingTrack, } 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 { SimpleFeature, getContainingTrack, getContainingView, getEnv, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
 import FilterListIcon from '@mui/icons-material/ClearAll';
-// locals
-import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
-import { getUniqueTagValues, FilterModel } from '../shared';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import copy from 'copy-to-clipboard';
+import { autorun, observable } from 'mobx';
+import { addDisposer, cast, isAlive, types } from 'mobx-state-tree';
 import { createAutorun } from '../util';
-import { ColorByModel } from '../shared/color';
-// lazies
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'));
+import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
+import { getUniqueTags } from '../shared/getUniqueTags';
+const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'));
 const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
 const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
-// 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
-         */
+        colorBySetting: types.frozen(),
+        filterBySetting: types.frozen(),
         jexlFilters: types.optional(types.array(types.string), []),
     }))
         .volatile(() => ({
         colorTagMap: observable.map({}),
         featureUnderMouseVolatile: undefined,
         tagsReady: false,
+    }))
+        .views(self => ({
+        get colorBy() {
+            var _a;
+            return (_a = self.colorBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'colorBy');
+        },
+        get filterBy() {
+            var _a;
+            return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
+        },
     }))
         .views(self => ({
         get autorunReady() {
             const view = getContainingView(self);
-            return (view.initialized &&
-                self.featureDensityStatsReady &&
-                !self.regionTooLarge);
+            return view.initialized && self.statsReadyAndRegionNotTooLarge;
         },
     }))
         .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);
+            self.colorTagMap = observable.map({});
+            self.colorBySetting = {
+                ...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',
@@ -141,15 +96,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
             });
         },
-        /**
-         * #action
-         */
         setFeatureUnderMouse(feat) {
             self.featureUnderMouseVolatile = feat;
         },
-        /**
-         * #action
-         */
         selectFeature(feature) {
             const session = getSession(self);
             if (isSessionModelWithWidgets(session)) {
@@ -162,39 +111,25 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
             }
             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);
+            self.filterBySetting = {
+                ...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]) || {};
@@ -209,33 +144,18 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         },
     }))
         .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 });
         },
@@ -243,9 +163,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
-            /**
-             * #getter
-             */
             get rendererTypeName() {
                 const viewName = getConf(self, 'defaultRendering');
                 const rendererType = rendererTypes.get(viewName);
@@ -254,9 +171,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
                 return rendererType;
             },
-            /**
-             * #method
-             */
             contextMenuItems() {
                 const feat = self.contextMenuFeature;
                 return feat
@@ -279,15 +193,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     ]
                     : [];
             },
-            /**
-             * #getter
-             */
             get DisplayBlurb() {
                 return LinearPileupDisplayBlurb;
             },
-            /**
-             * #method
-             */
             renderPropsPre() {
                 const { colorTagMap, colorBy, filterBy, rpcDriverName } = self;
                 const superProps = superRenderProps();
@@ -296,8 +204,8 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     notReady: superProps.notReady || !self.renderReady(),
                     rpcDriverName,
                     displayModel: self,
-                    colorBy: colorBy ? getSnapshot(colorBy) : undefined,
-                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorBy,
+                    filterBy,
                     filters: self.filters,
                     colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
                     config: self.rendererConfig,
@@ -317,7 +225,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                                     layoutId: getContainingView(self).id,
                                     rendererType: 'PileupRenderer',
                                 }));
-                                if (feature) {
+                                if (isAlive(self) && feature) {
                                     self.selectFeature(new SimpleFeature(feature));
                                 }
                             }
@@ -330,7 +238,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     onClick() {
                         self.clearFeatureSelection();
                     },
-                    // similar to click but opens a menu with further options
                     async onFeatureContextMenu(_, featureId) {
                         const session = getSession(self);
                         const { rpcManager } = session;
@@ -359,45 +266,54 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                 };
             },
-            /**
-             * #method
-             */
             colorSchemeSubMenuItems() {
                 return [
                     {
                         label: 'Normal',
                         onClick: () => {
-                            self.setColorScheme({ type: 'normal' });
+                            self.setColorScheme({
+                                type: 'normal',
+                            });
                         },
                     },
                     {
                         label: 'Mapping quality',
                         onClick: () => {
-                            self.setColorScheme({ type: 'mappingQuality' });
+                            self.setColorScheme({
+                                type: 'mappingQuality',
+                            });
                         },
                     },
                     {
                         label: 'Strand',
                         onClick: () => {
-                            self.setColorScheme({ type: 'strand' });
+                            self.setColorScheme({
+                                type: 'strand',
+                            });
                         },
                     },
                     {
                         label: 'Per-base quality',
                         onClick: () => {
-                            self.setColorScheme({ type: 'perBaseQuality' });
+                            self.setColorScheme({
+                                type: 'perBaseQuality',
+                            });
                         },
                     },
                     {
                         label: 'Per-base lettering',
                         onClick: () => {
-                            self.setColorScheme({ type: 'perBaseLettering' });
+                            self.setColorScheme({
+                                type: 'perBaseLettering',
+                            });
                         },
                     },
                     {
                         label: 'First-of-pair strand',
                         onClick: () => {
-                            self.setColorScheme({ type: 'stranded' });
+                            self.setColorScheme({
+                                type: 'stranded',
+                            });
                         },
                     },
                     {
@@ -414,9 +330,6 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                 ];
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -497,18 +410,20 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 const { colorBy, tagsReady } = self;
                 const { staticBlocks } = view;
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
-                    const vals = await getUniqueTagValues({
+                    const vals = await getUniqueTags({
                         self,
                         tag: colorBy.tag,
                         blocks: staticBlocks,
                     });
-                    self.updateColorTagMap(vals);
+                    if (isAlive(self)) {
+                        self.updateColorTagMap(vals);
+                        self.setTagsReady(true);
+                    }
+                }
+                else {
+                    self.setTagsReady(true);
                 }
-                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);
@@ -527,11 +442,8 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                                 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 (feature &&
+                            if (isAlive(self) &&
+                                feature &&
                                 self.featureIdUnderMouse === feature.uniqueId) {
                                 self.setFeatureUnderMouse(new SimpleFeature(feature));
                             }
@@ -544,5 +456,16 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 }
             }));
         },
-    }));
+    }))
+        .preProcessSnapshot(snap => {
+        if (snap) {
+            const { colorBy, filterBy, ...rest } = snap;
+            return {
+                ...rest,
+                filterBySetting: filterBy,
+                colorBySetting: colorBy,
+            };
+        }
+        return snap;
+    });
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
+interface Tag {
+    type: string;
+    tag: string;
+}
 declare const ColorByTagDialog: ({ model, handleClose, }: {
     model: {
-        setColorScheme: (arg: {
-            type: string;
-            tag: string;
-        }) => void;
+        setColorScheme: (arg: Tag) => void;
     };
     handleClose: () => void;
 }) => React.JSX.Element;

package/esm/LinearPileupDisplay/components/ColorByTagDialog.js

@@ -1,7 +1,7 @@
 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';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
 const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     const [tag, setTag] = useState('');
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
@@ -11,7 +11,9 @@ const ColorByTagDialog = observer(function ({ model, handleClose, }) {
             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" }),
+                }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", slotProps: {
+                    htmlInput: { maxLength: 2 },
+                } }),
             React.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 declare const GroupByTagDialog: (props: {
     model: {
         adapterConfig: AnyConfigurationModel;