@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/dist/LinearPileupDisplay/model.js

@@ -27,116 +27,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
-const tracks_1 = require("@jbrowse/core/util/tracks");
 const util_1 = require("@jbrowse/core/util");
-const shared_1 = require("../shared");
-const util_2 = require("../util");
-// icons
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const ColorLens_1 = __importDefault(require("@mui/icons-material/ColorLens"));
+const SwapVert_1 = __importDefault(require("@mui/icons-material/SwapVert"));
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
-const Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
 const Workspaces_1 = __importDefault(require("@mui/icons-material/Workspaces"));
-const ColorLens_1 = __importDefault(require("@mui/icons-material/ColorLens"));
-// locals
-const SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
 const mobx_1 = require("mobx");
-// lazies
+const mobx_state_tree_1 = require("mobx-state-tree");
+const SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
+const getUniqueModifications_1 = require("../shared/getUniqueModifications");
+const util_2 = require("../util");
 const SortByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTagDialog'))));
 const GroupByDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/GroupByDialog'))));
-const ModificationsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModificationsDialog'))));
-/**
- * #stateModel LinearPileupDisplay
- * #category display
- * extends
- * - [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
- */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
         .compose('LinearPileupDisplay', (0, SharedLinearPileupDisplayMixin_1.SharedLinearPileupDisplayMixin)(configSchema), mobx_state_tree_1.types.model({
-        /**
-         * #property
-         */
         type: mobx_state_tree_1.types.literal('LinearPileupDisplay'),
-        /**
-         * #property
-         */
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-        /**
-         * #property
-         */
         showSoftClipping: false,
-        /**
-         * #property
-         */
         mismatchAlpha: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
-        /**
-         * #property
-         */
-        sortedBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
-            type: mobx_state_tree_1.types.string,
-            pos: mobx_state_tree_1.types.number,
-            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-            refName: mobx_state_tree_1.types.string,
-            assemblyName: mobx_state_tree_1.types.string,
-        })),
+        sortedBy: mobx_state_tree_1.types.frozen(),
     }))
         .volatile(() => ({
         sortReady: false,
         currSortBpPerPx: 0,
-        modificationTagMap: mobx_1.observable.map({}),
+        visibleModifications: mobx_1.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, util_2.modificationColors[value] || (0, util_2.randomColor)(value));
+                if (!self.visibleModifications.has(value.type)) {
+                    self.visibleModifications.set(value.type, {
+                        ...value,
+                        color: (0, util_2.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 } = (0, util_1.getContainingView)(self);
             if (!centerLineInfo) {
@@ -156,23 +104,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();
@@ -180,9 +119,9 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
-        /**
-         * #getter
-         */
+        get visibleModificationTypes() {
+            return [...self.visibleModifications.keys()];
+        },
         get rendererConfig() {
             const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, } = self;
             const configBlob = (0, configuration_1.getConf)(self, ['renderers', rendererTypeName]) || {};
@@ -200,15 +139,9 @@ function stateModelFactory(configSchema) {
         .views(self => {
         const { renderReady: superRenderReady } = self;
         return {
-            /**
-             * #getter
-             */
             get mismatchAlphaSetting() {
                 return (0, configuration_1.readConfObject)(self.rendererConfig, 'mismatchAlpha');
             },
-            /**
-             * #method
-             */
             renderReady() {
                 const view = (0, util_1.getContainingView)(self);
                 return (self.modificationsReady &&
@@ -220,22 +153,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();
@@ -244,15 +171,12 @@ function stateModelFactory(configSchema) {
                     notReady: result.notReady || !sortReady,
                 };
             },
-            /**
-             * #method
-             */
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
                     {
                         label: 'Sort by...',
-                        icon: Sort_1.default,
+                        icon: SwapVert_1.default,
                         disabled: self.showSoftClipping,
                         subMenu: [
                             ...['Start location', 'Read strand', 'Base pair'].map(option => ({
@@ -288,25 +212,88 @@ function stateModelFactory(configSchema) {
                             {
                                 label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setColorScheme({
+                                        type: 'pairOrientation',
+                                    });
                                 },
                             },
                             {
-                                label: 'Modifications or methylation',
-                                onClick: () => {
-                                    (0, util_1.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 = util_2.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 = util_2.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(),
@@ -318,7 +305,10 @@ function stateModelFactory(configSchema) {
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
                                 GroupByDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -329,8 +319,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();
                             }
@@ -368,8 +356,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: [
@@ -388,25 +374,25 @@ function stateModelFactory(configSchema) {
                         ...self.renderPropsPre(),
                     });
                 }
-                self.setCurrSortBpPerPx(bpPerPx);
-                self.setSortReady(true);
+                if ((0, mobx_state_tree_1.isAlive)(self)) {
+                    self.setCurrSortBpPerPx(bpPerPx);
+                    self.setSortReady(true);
+                }
             }, { delay: 1000 });
             (0, util_2.createAutorun)(self, async () => {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { parentTrack, colorBy } = self;
                 const { staticBlocks } = (0, util_1.getContainingView)(self);
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = (0, configuration_1.getConf)(parentTrack, ['adapter']);
-                    const vals = await (0, shared_1.getUniqueModificationValues)({
-                        self,
-                        adapterConfig: adapter,
-                        blocks: staticBlocks,
-                    });
-                    self.updateModificationColorMap(vals);
+                const vals = await (0, getUniqueModifications_1.getUniqueModifications)({
+                    self,
+                    adapterConfig: (0, configuration_1.getConf)(self.parentTrack, 'adapter'),
+                    blocks: staticBlocks,
+                });
+                if ((0, mobx_state_tree_1.isAlive)(self)) {
+                    self.updateVisibleModifications(vals);
+                    self.setModificationsReady(true);
                 }
-                self.setModificationsReady(true);
             });
         },
     }));

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

@@ -27,20 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-const BaseDisplayComponent_1 = __importDefault(require("../../shared/BaseDisplayComponent"));
+const mobx_react_1 = require("mobx-react");
+const BaseDisplayComponent_1 = __importDefault(require("../../shared/components/BaseDisplayComponent"));
 const Arcs = (0, mobx_react_1.observer)(function ({ model, }) {
     const view = (0, util_1.getContainingView)(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
     const height = model.height;
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const cb = (0, react_1.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_1.default.createElement("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 const LinearReadArcsReactComponent = (0, mobx_react_1.observer)(function ({ model, }) {

package/dist/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/dist/LinearReadArcsDisplay/configSchema.js

@@ -2,56 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const configuration_1 = require("@jbrowse/core/configuration");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const mobx_state_tree_1 = require("mobx-state-tree");
-/**
- * #config LinearReadArcsDisplay
- */
+const util_1 = require("../shared/util");
 function configSchemaF(pluginManager) {
     return (0, configuration_1.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: mobx_state_tree_1.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: util_1.defaultFilterFlags,
         },
     }, {
-        /**
-         * #baseConfiguration
-         */
         baseConfiguration: (0, plugin_linear_genome_view_1.linearBasicDisplayConfigSchemaFactory)(pluginManager),
         explicitlyTyped: true,
     });

package/dist/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/dist/LinearReadArcsDisplay/drawFeats.js

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawFeats = drawFeats;
 const util_1 = require("@jbrowse/core/util");
-// locals
-const color_1 = require("../shared/color");
 const MismatchParser_1 = require("../MismatchParser");
+const color_1 = require("../shared/color");
 const util_2 = require("../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);
@@ -50,9 +48,6 @@ 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();
@@ -100,8 +95,6 @@ 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');
@@ -125,7 +118,6 @@ 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/dist/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/dist/LinearReadArcsDisplay/index.js

@@ -27,11 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = register;
+const react_1 = require("react");
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
-// locals
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
-const react_1 = require("react");
 function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);