@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/LinearPileupDisplay/model.js

@@ -1,114 +1,62 @@
 import { lazy } from 'react';
-import { types } from 'mobx-state-tree';
-import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
+import { getContainingView, getEnv, getSession } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { getEnv, getSession, getContainingView } from '@jbrowse/core/util';
-import { getUniqueModificationValues } from '../shared';
-import { createAutorun, randomColor, modificationColors } from '../util';
-// icons
+import ColorLensIcon from '@mui/icons-material/ColorLens';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import SortIcon from '@mui/icons-material/Sort';
 import WorkspacesIcon from '@mui/icons-material/Workspaces';
-import ColorLensIcon from '@mui/icons-material/ColorLens';
-// locals
-import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
 import { observable } from 'mobx';
-// lazies
+import { isAlive, types } from 'mobx-state-tree';
+import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
+import { getUniqueModifications } from '../shared/getUniqueModifications';
+import { createAutorun, getColorForModification, modificationData, } from '../util';
 const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
 const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
-const ModificationsDialog = lazy(() => import('./components/ColorByModificationsDialog'));
-/**
- * #stateModel LinearPileupDisplay
- * #category display
- * extends
- * - [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
- */
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearPileupDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
         showSoftClipping: false,
-        /**
-         * #property
-         */
         mismatchAlpha: types.maybe(types.boolean),
-        /**
-         * #property
-         */
-        sortedBy: types.maybe(types.model({
-            type: types.string,
-            pos: types.number,
-            tag: types.maybe(types.string),
-            refName: types.string,
-            assemblyName: types.string,
-        })),
+        sortedBy: types.frozen(),
     }))
         .volatile(() => ({
         sortReady: false,
         currSortBpPerPx: 0,
-        modificationTagMap: observable.map({}),
+        visibleModifications: observable.map({}),
         modificationsReady: false,
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setCurrSortBpPerPx(n) {
             self.currSortBpPerPx = n;
         },
-        /**
-         * #action
-         */
-        updateModificationColorMap(uniqueModifications) {
+        updateVisibleModifications(uniqueModifications) {
             uniqueModifications.forEach(value => {
-                if (!self.modificationTagMap.has(value)) {
-                    self.modificationTagMap.set(value, modificationColors[value] || randomColor(value));
+                if (!self.visibleModifications.has(value.type)) {
+                    self.visibleModifications.set(value.type, {
+                        ...value,
+                        color: getColorForModification(value.type),
+                    });
                 }
             });
         },
-        /**
-         * #action
-         */
         setModificationsReady(flag) {
             self.modificationsReady = flag;
         },
-        /**
-         * #action
-         */
         setSortReady(flag) {
             self.sortReady = flag;
         },
-        /**
-         * #action
-         */
         clearSelected() {
             self.sortedBy = undefined;
         },
-        /**
-         * #action
-         */
         toggleSoftClipping() {
             self.showSoftClipping = !self.showSoftClipping;
         },
-        /**
-         * #action
-         */
         toggleMismatchAlpha() {
             self.mismatchAlpha = !self.mismatchAlpha;
         },
-        /**
-         * #action
-         */
         setSortedBy(type, tag) {
             const { centerLineInfo } = getContainingView(self);
             if (!centerLineInfo) {
@@ -128,23 +76,14 @@ function stateModelFactory(configSchema) {
                 tag,
             };
         },
-        /**
-         * #action
-         * overrides base from SharedLinearPileupDisplay to make sortReady false
-         * since changing feature height destroys the sort-induced layout
-         */
         setFeatureHeight(n) {
             self.sortReady = false;
             self.featureHeight = n;
         },
     }))
         .actions(self => {
-        // resets the sort object and refresh whole display on reload
         const superReload = self.reload;
         return {
-            /**
-             * #action
-             */
             reload() {
                 self.clearSelected();
                 superReload();
@@ -152,9 +91,9 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
-        /**
-         * #getter
-         */
+        get visibleModificationTypes() {
+            return [...self.visibleModifications.keys()];
+        },
         get rendererConfig() {
             const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
@@ -172,15 +111,9 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { renderReady: superRenderReady } = self;
         return {
-            /**
-             * #getter
-             */
             get mismatchAlphaSetting() {
                 return readConfObject(self.rendererConfig, 'mismatchAlpha');
             },
-            /**
-             * #method
-             */
             renderReady() {
                 const view = getContainingView(self);
                 return (self.modificationsReady &&
@@ -192,22 +125,16 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderPropsPre: superRenderPropsPre, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
         return {
-            /**
-             * #method
-             */
             renderPropsPre() {
-                const { sortedBy, showSoftClipping, modificationTagMap } = self;
+                const { sortedBy, showSoftClipping, visibleModifications } = self;
                 const superProps = superRenderPropsPre();
                 return {
                     ...superProps,
                     showSoftClip: showSoftClipping,
                     sortedBy,
-                    modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
+                    visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
                 };
             },
-            /**
-             * #method
-             */
             renderProps() {
                 const { sortReady } = self;
                 const result = superRenderProps();
@@ -216,15 +143,12 @@ function stateModelFactory(configSchema) {
                     notReady: result.notReady || !sortReady,
                 };
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
                     {
                         label: 'Sort by...',
-                        icon: SortIcon,
+                        icon: SwapVertIcon,
                         disabled: self.showSoftClipping,
                         subMenu: [
                             ...['Start location', 'Read strand', 'Base pair'].map(option => ({
@@ -260,25 +184,88 @@ function stateModelFactory(configSchema) {
                             {
                                 label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setColorScheme({
+                                        type: 'pairOrientation',
+                                    });
                                 },
                             },
                             {
-                                label: 'Modifications or methylation',
-                                onClick: () => {
-                                    getSession(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
+                                label: 'Modifications',
+                                type: 'subMenu',
+                                subMenu: self.modificationsReady
+                                    ? [
                                         {
-                                            model: self,
-                                            handleClose: doneCallback,
+                                            label: 'All modifications',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'modifications',
+                                                });
+                                            },
                                         },
-                                    ]);
-                                },
+                                        ...self.visibleModificationTypes.map(key => {
+                                            var _a;
+                                            return ({
+                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key}`,
+                                                onClick: () => {
+                                                    self.setColorScheme({
+                                                        type: 'modifications',
+                                                        modifications: {
+                                                            isolatedModification: key,
+                                                        },
+                                                    });
+                                                },
+                                            });
+                                        }),
+                                        { type: 'divider' },
+                                        {
+                                            label: 'All modifications (<50% prob colored blue)',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'modifications',
+                                                    modifications: {
+                                                        twoColor: true,
+                                                    },
+                                                });
+                                            },
+                                        },
+                                        ...self.visibleModificationTypes.map(key => {
+                                            var _a;
+                                            return ({
+                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key} (<50% prob colored blue)`,
+                                                onClick: () => {
+                                                    self.setColorScheme({
+                                                        type: 'modifications',
+                                                        modifications: {
+                                                            isolatedModification: key,
+                                                            twoColor: true,
+                                                        },
+                                                    });
+                                                },
+                                            });
+                                        }),
+                                        { type: 'divider' },
+                                        {
+                                            label: 'All reference CpGs',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'methylation',
+                                                });
+                                            },
+                                        },
+                                    ]
+                                    : [
+                                        {
+                                            label: 'Loading modifications...',
+                                            onClick: () => { },
+                                        },
+                                    ],
                             },
                             {
                                 label: 'Insert size',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.setColorScheme({
+                                        type: 'insertSize',
+                                    });
                                 },
                             },
                             ...superColorSchemeSubMenuItems(),
@@ -290,7 +277,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 GroupByDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -301,8 +291,6 @@ function stateModelFactory(configSchema) {
                         checked: self.showSoftClipping,
                         onClick: () => {
                             self.toggleSoftClipping();
-                            // if toggling from off to on, will break sort for this track
-                            // so clear it
                             if (self.showSoftClipping) {
                                 self.clearSelected();
                             }
@@ -340,8 +328,6 @@ function stateModelFactory(configSchema) {
                 if (sortedBy &&
                     (!sortReady || self.currSortBpPerPx === view.bpPerPx)) {
                     const { pos, refName, assemblyName } = sortedBy;
-                    // render just the sorted region first
-                    // @ts-expect-error
                     await self.rendererType.renderInClient(rpcManager, {
                         assemblyName,
                         regions: [
@@ -360,25 +346,25 @@ function stateModelFactory(configSchema) {
                         ...self.renderPropsPre(),
                     });
                 }
-                self.setCurrSortBpPerPx(bpPerPx);
-                self.setSortReady(true);
+                if (isAlive(self)) {
+                    self.setCurrSortBpPerPx(bpPerPx);
+                    self.setSortReady(true);
+                }
             }, { 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,
-                        adapterConfig: adapter,
-                        blocks: staticBlocks,
-                    });
-                    self.updateModificationColorMap(vals);
+                const vals = await getUniqueModifications({
+                    self,
+                    adapterConfig: getConf(self.parentTrack, 'adapter'),
+                    blocks: staticBlocks,
+                });
+                if (isAlive(self)) {
+                    self.updateVisibleModifications(vals);
+                    self.setModificationsReady(true);
                 }
-                self.setModificationsReady(true);
             });
         },
     }));

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

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

package/esm/LinearReadArcsDisplay/components/ReactComponent.js

@@ -1,18 +1,14 @@
 import React, { useCallback } from 'react';
-import { observer } from 'mobx-react';
 import { getContainingView } from '@jbrowse/core/util';
-import BaseDisplayComponent from '../../shared/BaseDisplayComponent';
+import { observer } from 'mobx-react';
+import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
 const Arcs = observer(function ({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
     const height = model.height;
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const cb = useCallback((ref) => {
         model.setRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, width, height]);
-    // note: the position absolute below avoids scrollbar from appearing on track
+    }, [model, width, height]);
     return (React.createElement("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 const LinearReadArcsReactComponent = observer(function ({ model, }) {

package/esm/LinearReadArcsDisplay/configSchema.d.ts

@@ -1,40 +1,32 @@
-import PluginManager from '@jbrowse/core/PluginManager';
-/**
- * #config LinearReadArcsDisplay
- */
+import type PluginManager from '@jbrowse/core/PluginManager';
 declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     maxFeatureScreenDensity: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     lineWidth: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     jitter: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
-    colorScheme: {
+    colorBy: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
-        description: string;
-        defaultValue: string;
+        defaultValue: {
+            type: string;
+        };
+    };
+    filterBy: {
+        type: string;
+        defaultValue: {
+            flagInclude: number;
+            flagExclude: number;
+        };
     };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     renderer: import("mobx-state-tree").IAnyModelType;

package/esm/LinearReadArcsDisplay/configSchema.js

@@ -1,55 +1,32 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
-import { types } from 'mobx-state-tree';
-/**
- * #config LinearReadArcsDisplay
- */
+import { defaultFilterFlags } from '../shared/util';
 function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearReadArcsDisplay', {
-        /**
-         * #slot
-         */
         maxFeatureScreenDensity: {
             type: 'number',
             description: 'maximum features per pixel that is displayed in the view',
             defaultValue: 5,
         },
-        /**
-         * #slot
-         */
         lineWidth: {
             type: 'number',
             description: 'set arc line width',
             defaultValue: 1,
         },
-        /**
-         * #slot
-         */
         jitter: {
             type: 'number',
             description: 'jitters the x position so e.g. if many reads map to exact same x position, jittering makes it easy to see that there are many of them',
             defaultValue: 0,
         },
-        /**
-         * #slot
-         */
-        colorScheme: {
-            type: 'stringEnum',
-            model: types.enumeration('colorScheme', [
-                'strand',
-                'normal',
-                'insertSize',
-                'insertSizeAndOrientation',
-                'mappingQuality',
-                'tag',
-            ]),
-            description: 'color scheme to use',
-            defaultValue: 'normal',
+        colorBy: {
+            type: 'frozen',
+            defaultValue: { type: 'insertSizeAndOrientation' },
+        },
+        filterBy: {
+            type: 'frozen',
+            defaultValue: defaultFilterFlags,
         },
     }, {
-        /**
-         * #baseConfiguration
-         */
         baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
         explicitlyTyped: true,
     });

package/esm/LinearReadArcsDisplay/drawFeats.d.ts

@@ -1,2 +1,2 @@
-import { LinearReadArcsDisplayModel } from './model';
+import type { LinearReadArcsDisplayModel } from './model';
 export declare function drawFeats(self: LinearReadArcsDisplayModel, ctx: CanvasRenderingContext2D, width: number, height: number): void;

package/esm/LinearReadArcsDisplay/drawFeats.js

@@ -1,13 +1,11 @@
 import { getContainingView, getSession } from '@jbrowse/core/util';
-// locals
-import { getPairedOrientationColor, getPairedInsertSizeColor, getPairedInsertSizeAndOrientationColor, } from '../shared/color';
 import { featurizeSA } from '../MismatchParser';
+import { getPairedInsertSizeAndOrientationColor, getPairedInsertSizeColor, getPairedOrientationColor, } from '../shared/color';
 import { hasPairedReads } from '../shared/util';
 function jitter(n) {
     return Math.random() * 2 * n - n;
 }
 function drawLineAtOffset(ctx, offset, height, color) {
-    // draws a vertical line off to middle of nowhere if the second end not found
     ctx.strokeStyle = color;
     ctx.beginPath();
     ctx.moveTo(offset, 0);
@@ -47,9 +45,6 @@ export function drawFeats(self, ctx, width, height) {
             const p = r1 - view.offsetPx;
             const p2 = r2 - view.offsetPx;
             const drawArcInsteadOfBezier = absrad > 10000;
-            // bezier (used for non-long-range arcs) requires moveTo before beginPath
-            // arc (used for long-range) requires moveTo after beginPath (or else a
-            // unwanted line at y=0 is rendered along with the arc)
             if (longRange && drawArcInsteadOfBezier) {
                 ctx.moveTo(p, 0);
                 ctx.beginPath();
@@ -97,8 +92,6 @@ export function drawFeats(self, ctx, width, height) {
             const destX = p + radius * 2;
             const destY = Math.min(height + jitter(jitterVal), absrad);
             if (longRange) {
-                // avoid drawing gigantic circles that glitch out the rendering,
-                // instead draw vertical lines
                 if (absrad > 100000) {
                     drawLineAtOffset(ctx, p + jitter(jitterVal), height, 'red');
                     drawLineAtOffset(ctx, p2 + jitter(jitterVal), height, 'red');
@@ -122,7 +115,6 @@ export function drawFeats(self, ctx, width, height) {
         }
     }
     for (const chain of chains) {
-        // chain.length === 1, singleton (other pairs/mates not in view)
         if (chain.length === 1 && drawLongRange) {
             const f = chain[0];
             if (hasPaired && !(f.flags & 8)) {

package/esm/LinearReadArcsDisplay/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function register(pluginManager: PluginManager): void;

package/esm/LinearReadArcsDisplay/index.js

@@ -1,8 +1,7 @@
+import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-// locals
 import configSchemaF from './configSchema';
 import stateModelF from './model';
-import { lazy } from 'react';
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);