@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/LinearPileupDisplay/model.js

@@ -1,19 +1,18 @@
 import { lazy } from 'react';
 import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
-import { getContainingView, getEnv, getSession } from '@jbrowse/core/util';
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import { types } from '@jbrowse/mobx-state-tree';
 import ColorLensIcon from '@mui/icons-material/ColorLens';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import WorkspacesIcon from '@mui/icons-material/Workspaces';
-import { observable } from 'mobx';
-import { types } from 'mobx-state-tree';
-import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
-import { getColorForModification, modificationData } from '../util';
-const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
-const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
+import { SharedLinearPileupDisplayMixin } from "./SharedLinearPileupDisplayMixin.js";
+import { SharedModificationsMixin } from "../shared/SharedModificationsMixin.js";
+import { getModificationsSubMenu } from "../shared/menuItems.js";
+const SortByTagDialog = lazy(() => import("./components/SortByTagDialog.js"));
+const GroupByDialog = lazy(() => import("./components/GroupByDialog.js"));
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), types.model({
+        .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), SharedModificationsMixin(), types.model({
         type: types.literal('LinearPileupDisplay'),
         configuration: ConfigurationReference(configSchema),
         showSoftClipping: false,
@@ -23,26 +22,11 @@ function stateModelFactory(configSchema) {
         .volatile(() => ({
         sortReady: false,
         currSortBpPerPx: 0,
-        visibleModifications: observable.map({}),
-        modificationsReady: false,
     }))
         .actions(self => ({
         setCurrSortBpPerPx(n) {
             self.currSortBpPerPx = n;
         },
-        updateVisibleModifications(uniqueModifications) {
-            for (const value of uniqueModifications) {
-                if (!self.visibleModifications.has(value.type)) {
-                    self.visibleModifications.set(value.type, {
-                        ...value,
-                        color: getColorForModification(value.type),
-                    });
-                }
-            }
-        },
-        setModificationsReady(flag) {
-            self.modificationsReady = flag;
-        },
         setSortReady(flag) {
             self.sortReady = flag;
         },
@@ -74,6 +58,20 @@ function stateModelFactory(configSchema) {
                 tag,
             };
         },
+        setSortedByAtPosition(type, pos, refName) {
+            const view = getContainingView(self);
+            const assemblyName = view.assemblyNames[0];
+            if (!assemblyName) {
+                return;
+            }
+            self.sortReady = false;
+            self.sortedBy = {
+                type,
+                pos: pos + 1,
+                refName,
+                assemblyName,
+            };
+        },
         setFeatureHeight(n) {
             self.sortReady = false;
             self.featureHeight = n;
@@ -89,22 +87,23 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
-        get visibleModificationTypes() {
-            return [...self.visibleModifications.keys()];
+        get modificationThreshold() {
+            return self.colorBy?.modifications?.threshold ?? 10;
         },
         get rendererConfig() {
-            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, hideSmallIndels, } = self;
+            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, hideSmallIndels, hideMismatches, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
-            return self.rendererType.configSchema.create({
+            return {
                 ...configBlob,
                 ...(featureHeight !== undefined ? { height: featureHeight } : {}),
                 ...(hideSmallIndels !== undefined ? { hideSmallIndels } : {}),
+                ...(hideMismatches !== undefined ? { hideMismatches } : {}),
                 ...(noSpacing !== undefined ? { noSpacing } : {}),
                 ...(mismatchAlpha !== undefined ? { mismatchAlpha } : {}),
                 ...(trackMaxHeight !== undefined
                     ? { maxHeight: trackMaxHeight }
                     : {}),
-            }, getEnv(self));
+            };
         },
     }))
         .views(self => {
@@ -122,16 +121,17 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => {
-        const { trackMenuItems: superTrackMenuItems, renderPropsPre: superRenderPropsPre, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
+        const { trackMenuItems: superTrackMenuItems, adapterRenderProps: superAdapterRenderProps, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, showSubMenuItems: superShowSubMenuItems, } = self;
         return {
-            renderPropsPre() {
-                const { sortedBy, showSoftClipping, visibleModifications } = self;
-                const superProps = superRenderPropsPre();
+            adapterRenderProps() {
+                const { sortedBy, showSoftClipping, visibleModifications, simplexModifications, } = self;
+                const superProps = superAdapterRenderProps();
                 return {
                     ...superProps,
                     showSoftClip: showSoftClipping,
                     sortedBy,
                     visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
+                    simplexModifications: [...simplexModifications],
                 };
             },
             renderProps() {
@@ -142,6 +142,30 @@ function stateModelFactory(configSchema) {
                     notReady: result.notReady || !sortReady,
                 };
             },
+            showSubMenuItems() {
+                return [
+                    ...superShowSubMenuItems(),
+                    {
+                        label: 'Show soft clipping',
+                        type: 'checkbox',
+                        checked: self.showSoftClipping,
+                        onClick: () => {
+                            self.toggleSoftClipping();
+                            if (self.showSoftClipping) {
+                                self.clearSelected();
+                            }
+                        },
+                    },
+                    {
+                        label: 'Show mismatches faded by quality',
+                        type: 'checkbox',
+                        checked: self.mismatchAlphaSetting,
+                        onClick: () => {
+                            self.toggleMismatchAlpha();
+                        },
+                    },
+                ];
+            },
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
@@ -191,73 +215,9 @@ function stateModelFactory(configSchema) {
                             {
                                 label: 'Modifications',
                                 type: 'subMenu',
-                                subMenu: self.modificationsReady
-                                    ? [
-                                        {
-                                            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: () => { },
-                                        },
-                                    ],
+                                subMenu: getModificationsSubMenu(self, {
+                                    includeMethylation: true,
+                                }),
                             },
                             {
                                 label: 'Insert size',
@@ -283,26 +243,6 @@ function stateModelFactory(configSchema) {
                             ]);
                         },
                     },
-                    {
-                        label: 'Show soft clipping',
-                        icon: VisibilityIcon,
-                        type: 'checkbox',
-                        checked: self.showSoftClipping,
-                        onClick: () => {
-                            self.toggleSoftClipping();
-                            if (self.showSoftClipping) {
-                                self.clearSelected();
-                            }
-                        },
-                    },
-                    {
-                        label: 'Fade mismatches by quality',
-                        type: 'checkbox',
-                        checked: self.mismatchAlphaSetting,
-                        onClick: () => {
-                            self.toggleMismatchAlpha();
-                        },
-                    },
                 ];
             },
         };
@@ -312,7 +252,7 @@ function stateModelFactory(configSchema) {
             ;
             (async () => {
                 try {
-                    const { doAfterAttach } = await import('./doAfterAttach');
+                    const { doAfterAttach } = await import("./doAfterAttach.js");
                     doAfterAttach(self);
                 }
                 catch (e) {
@@ -321,6 +261,18 @@ function stateModelFactory(configSchema) {
                 }
             })();
         },
-    }));
+    }))
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { showSoftClipping, mismatchAlpha, sortedBy, ...rest } = snap;
+        return {
+            ...rest,
+            ...(showSoftClipping ? { showSoftClipping } : {}),
+            ...(mismatchAlpha !== undefined ? { mismatchAlpha } : {}),
+            ...(sortedBy !== undefined ? { sortedBy } : {}),
+        };
+    });
 }
 export default stateModelFactory;

package/esm/LinearPileupDisplay/sharedDoAfterAttach.d.ts

@@ -0,0 +1,10 @@
+import type { ColorBy } from '../shared/types.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function sharedDoAfterAttach(self: {
+    autorunReady: boolean;
+    adapterConfig: AnyConfigurationModel;
+    colorBy?: ColorBy;
+    tagsReady: boolean;
+    updateColorTagMap: (arg: string[]) => void;
+    setTagsReady: (arg: boolean) => void;
+}): void;

package/esm/LinearPileupDisplay/sharedDoAfterAttach.js

@@ -0,0 +1,28 @@
+import { getContainingView } from '@jbrowse/core/util';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { getUniqueTags } from "../shared/getUniqueTags.js";
+import { createAutorun } from "../util.js";
+export function sharedDoAfterAttach(self) {
+    createAutorun(self, async () => {
+        const view = getContainingView(self);
+        if (!self.autorunReady) {
+            return;
+        }
+        const { colorBy, tagsReady } = self;
+        const { staticBlocks } = view;
+        if (colorBy?.tag && !tagsReady) {
+            const vals = await getUniqueTags({
+                self,
+                tag: colorBy.tag,
+                blocks: staticBlocks,
+            });
+            if (isAlive(self)) {
+                self.updateColorTagMap(vals);
+                self.setTagsReady(true);
+            }
+        }
+        else {
+            self.setTagsReady(true);
+        }
+    }, { name: 'ColorReady', delay: 1000 });
+}

package/esm/LinearReadArcsDisplay/afterAttachRPC.d.ts

@@ -0,0 +1,2 @@
+import type { LinearReadArcsDisplayModel } from './model.ts';
+export declare function doAfterAttachRPC(self: LinearReadArcsDisplayModel): void;

package/esm/LinearReadArcsDisplay/afterAttachRPC.js

@@ -0,0 +1,21 @@
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { createRPCRenderFunction, setupCanvasRenderingAutorun, } from "../shared/createRPCRenderingSetup.js";
+import { createAutorun } from "../util.js";
+export function doAfterAttachRPC(self) {
+    const performRender = createRPCRenderFunction({
+        self,
+        rpcMethodName: 'RenderLinearReadArcsDisplay',
+        getRPCParams: () => self.renderProps(),
+        onResult: () => { },
+    });
+    createAutorun(self, async () => {
+        if (!isAlive(self)) {
+            return;
+        }
+        performRender();
+    }, {
+        delay: 1000,
+        name: 'PerformRender',
+    });
+    setupCanvasRenderingAutorun(self);
+}

package/esm/LinearReadArcsDisplay/chainToSimpleFeature.d.ts

@@ -0,0 +1,3 @@
+import { SimpleFeature } from '@jbrowse/core/util';
+import type { ReducedFeature } from '../shared/types.ts';
+export declare function chainToSimpleFeature(chain: ReducedFeature[]): SimpleFeature;

package/esm/LinearReadArcsDisplay/chainToSimpleFeature.js

@@ -0,0 +1,40 @@
+import { SimpleFeature } from '@jbrowse/core/util';
+export function chainToSimpleFeature(chain) {
+    if (chain.length === 0) {
+        throw new Error('Chain cannot be empty');
+    }
+    const firstFeat = chain[0];
+    return new SimpleFeature({
+        uniqueId: firstFeat.id,
+        id: firstFeat.id,
+        name: firstFeat.name,
+        refName: firstFeat.refName,
+        start: Math.min(...chain.map(f => f.start)),
+        end: Math.max(...chain.map(f => f.end)),
+        strand: firstFeat.strand,
+        flags: firstFeat.flags,
+        tlen: firstFeat.tlen,
+        pair_orientation: firstFeat.pair_orientation,
+        clipLengthAtStartOfRead: firstFeat.clipLengthAtStartOfRead,
+        ...(firstFeat.next_ref && { next_ref: firstFeat.next_ref }),
+        ...(firstFeat.next_pos !== undefined && { next_pos: firstFeat.next_pos }),
+        ...(firstFeat.SA && { SA: firstFeat.SA }),
+        subfeatures: chain.map((feat, idx) => ({
+            uniqueId: `${feat.id}_${idx}`,
+            id: `${feat.id}_${idx}`,
+            name: feat.name,
+            refName: feat.refName,
+            start: feat.start,
+            end: feat.end,
+            strand: feat.strand,
+            type: 'alignment_part',
+            flags: feat.flags,
+            tlen: feat.tlen,
+            pair_orientation: feat.pair_orientation,
+            clipLengthAtStartOfRead: feat.clipLengthAtStartOfRead,
+            ...(feat.next_ref && { next_ref: feat.next_ref }),
+            ...(feat.next_pos !== undefined && { next_pos: feat.next_pos }),
+            ...(feat.SA && { SA: feat.SA }),
+        })),
+    });
+}

package/esm/LinearReadArcsDisplay/components/{ReactComponent.d.ts → LinearReadArcsReactComponent.d.ts}

@@ -1,4 +1,4 @@
-import type { LinearReadArcsDisplayModel } from '../model';
+import type { LinearReadArcsDisplayModel } from '../model.ts';
 declare const LinearReadArcsReactComponent: ({ model, }: {
     model: LinearReadArcsDisplayModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/LinearReadArcsDisplay/components/{ReactComponent.js → LinearReadArcsReactComponent.js}

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
+import { NonBlockCanvasDisplayComponent as BaseDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
-import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
-const Arcs = observer(function ({ model, }) {
+const Arcs = observer(function Arcs({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
     const height = model.height;
     const cb = useCallback((ref) => {
         model.setRef(ref);
     }, [model, width, height]);
-    return (_jsx("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
+    return (_jsx("div", { style: { position: 'relative', width, height }, children: _jsx("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }) }));
 });
-const LinearReadArcsReactComponent = observer(function ({ model, }) {
+const LinearReadArcsReactComponent = observer(function LinearReadArcsReactComponent({ model, }) {
     return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Arcs, { model: model }) }));
 });
 export default LinearReadArcsReactComponent;

package/esm/LinearReadArcsDisplay/configSchema.d.ts

@@ -1,5 +1,5 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare function configSchemaF(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -28,9 +28,9 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
             flagExclude: number;
         };
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IAnyModelType;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("@jbrowse/mobx-state-tree").IAnyModelType;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -57,5 +57,5 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
 export default configSchemaF;

package/esm/LinearReadArcsDisplay/configSchema.js

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
-import { defaultFilterFlags } from '../shared/util';
+import { defaultFilterFlags } from "../shared/util.js";
 function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearReadArcsDisplay', {
         maxFeatureScreenDensity: {

package/esm/LinearReadArcsDisplay/index.js

@@ -1,19 +1,20 @@
 import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import configSchemaF from './configSchema';
-import stateModelF from './model';
+import configSchemaF from "./configSchema.js";
+import stateModelF from "./model.js";
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearReadArcsDisplay',
-            displayName: 'Arc display',
+            displayName: 'Read arc display',
+            helpText: 'Connect paired end reads and long split reads using arcs',
             configSchema,
             stateModel: stateModelF(configSchema),
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
             subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent: lazy(() => import('./components/ReactComponent')),
+            ReactComponent: lazy(() => import("./components/LinearReadArcsReactComponent.js")),
         });
     });
 }