@jbrowse/plugin-alignments 2.14.0 → 2.15.1

package/esm/LinearPileupDisplay/model.js

@@ -223,59 +223,65 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Color by...',
-                        icon: ColorLensIcon,
+                        label: 'Sort by...',
+                        icon: SortIcon,
+                        disabled: self.showSoftClipping,
                         subMenu: [
-                            {
-                                label: 'Pair orientation',
+                            ...['Start location', 'Read strand', 'Base pair'].map(option => ({
+                                label: option,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setSortedBy(option);
                                 },
-                            },
+                            })),
                             {
-                                label: 'Modifications or methylation',
+                                label: 'Sort by tag...',
                                 onClick: () => {
-                                    getSession(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
-                                        { model: self, handleClose: doneCallback },
+                                    getSession(self).queueDialog(handleClose => [
+                                        SortByTagDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
                                     ]);
                                 },
                             },
                             {
-                                label: 'Insert size',
+                                label: 'Clear sort',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.clearSelected();
                                 },
                             },
-                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
                     {
-                        label: 'Sort by...',
-                        icon: SortIcon,
-                        disabled: self.showSoftClipping,
+                        label: 'Color by...',
+                        icon: ColorLensIcon,
                         subMenu: [
-                            ...['Start location', 'Read strand', 'Base pair'].map(option => ({
-                                label: option,
+                            {
+                                label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setSortedBy(option);
+                                    self.setColorScheme({ type: 'pairOrientation' });
                                 },
-                            })),
+                            },
                             {
-                                label: 'Sort by tag...',
+                                label: 'Modifications or methylation',
                                 onClick: () => {
-                                    getSession(self).queueDialog(handleClose => [
-                                        SortByTagDialog,
-                                        { model: self, handleClose },
+                                    getSession(self).queueDialog(doneCallback => [
+                                        ModificationsDialog,
+                                        {
+                                            model: self,
+                                            handleClose: doneCallback,
+                                        },
                                     ]);
                                 },
                             },
                             {
-                                label: 'Clear sort',
+                                label: 'Insert size',
                                 onClick: () => {
-                                    self.clearSelected();
+                                    self.setColorScheme({ type: 'insertSize' });
                                 },
                             },
+                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
                     {
@@ -321,8 +327,7 @@ function stateModelFactory(configSchema) {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { bpPerPx } = view;
-                self.setCurrSortBpPerPx(bpPerPx);
+                self.setCurrSortBpPerPx(view.bpPerPx);
             }, { delay: 1000 });
             createAutorun(self, async () => {
                 const { rpcManager } = getSession(self);

package/esm/LinearReadArcsDisplay/index.js

@@ -1,8 +1,8 @@
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 // locals
-import ReactComponent from './components/ReactComponent';
 import configSchemaF from './configSchema';
 import stateModelF from './model';
+import { lazy } from 'react';
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
@@ -14,7 +14,7 @@ export default function register(pluginManager) {
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
             subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent,
+            ReactComponent: lazy(() => import('./components/ReactComponent')),
         });
     });
 }

package/esm/LinearReadCloudDisplay/index.js

@@ -1,8 +1,8 @@
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 // locals
-import ReactComponent from './components/ReactComponent';
 import configSchemaF from './configSchema';
 import stateModelF from './model';
+import { lazy } from 'react';
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
@@ -14,7 +14,7 @@ export default function register(pluginManager) {
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
             subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent,
+            ReactComponent: lazy(() => import('./components/ReactComponent')),
         });
     });
 }

package/esm/LinearSNPCoverageDisplay/models/model.d.ts

@@ -33,7 +33,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
         layout: any;
         status: string;
@@ -44,10 +44,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
-                reactElement?: import("react").ReactElement;
+                reactElement?: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -58,7 +58,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;

package/esm/LinearSNPCoverageDisplay/models/model.js

@@ -1,3 +1,4 @@
+import { lazy } from 'react';
 import { types, cast, getEnv, getSnapshot, isAlive } from 'mobx-state-tree';
 import { observable } from 'mobx';
 import { getConf, readConfObject, } from '@jbrowse/core/configuration';
@@ -5,10 +6,11 @@ import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle';
 import { getContainingView } from '@jbrowse/core/util';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 // locals
-import Tooltip from '../components/Tooltip';
 import { FilterModel, getUniqueModificationValues } from '../../shared';
 import { createAutorun, modificationColors } from '../../util';
 import { randomColor } from '../../util';
+// lazies
+const Tooltip = lazy(() => import('../components/Tooltip'));
 // using a map because it preserves order
 const rendererTypes = new Map([['snpcoverage', 'SNPCoverageRenderer']]);
 /**

package/esm/MismatchParser/index.js

@@ -61,7 +61,7 @@ export function cigarToMismatches(ops, seq, ref, qual) {
         }
         else if (op === 'X') {
             const r = (seq === null || seq === void 0 ? void 0 : seq.slice(soffset, soffset + len)) || [];
-            const q = (qual === null || qual === void 0 ? void 0 : qual.slice(soffset, soffset + len)) || [];
+            const q = (qual === null || qual === void 0 ? void 0 : qual.subarray(soffset, soffset + len)) || [];
             for (let j = 0; j < len; j++) {
                 mismatches.push({
                     start: roffset + j,

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -49,7 +49,7 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
-        reactElement: import("react").JSX.Element;
+        reactElement: React.JSX.Element;
         html?: string;
     } | {
         features: Map<any, any>;

package/esm/shared/color.d.ts

@@ -51,6 +51,9 @@ export declare function getPairedInsertSizeAndOrientationColor(f1: {
 }, f2: {
     refName: string;
 }, stats?: ChainStats): readonly [string, string];
+export declare function getPairedOrientationColorOrDefault(f: {
+    pair_orientation?: string;
+}): readonly [string, string] | undefined;
 export declare function getPairedOrientationColor(f: {
     pair_orientation?: string;
 }): readonly [string, string];

package/esm/shared/color.js

@@ -50,24 +50,34 @@ export function getPairedInsertSizeColor(f1, f2, stats) {
     if (sameRef && tlen > ((stats === null || stats === void 0 ? void 0 : stats.upper) || 0)) {
         return [fillColor.color_longinsert, strokeColor.color_longinsert];
     }
-    if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
+    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
         return [fillColor.color_shortinsert, strokeColor.color_shortinsert];
     }
-    if (!sameRef) {
+    else if (!sameRef) {
         return [fillColor.color_interchrom, strokeColor.color_interchrom];
     }
-    return undefined;
+    else {
+        return undefined;
+    }
 }
+const defaultColor = [fillColor.color_unknown, fillColor.color_unknown];
+// return color scheme with both insert size and orientation coloring,
+// prioritzing orientation coloring
 export function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedInsertSizeColor(f1, f2, stats) || getPairedOrientationColor(f1));
+    return (getPairedOrientationColorOrDefault(f1) ||
+        getPairedInsertSizeColor(f1, f2, stats) ||
+        defaultColor);
 }
-export function getPairedOrientationColor(f) {
+export function getPairedOrientationColorOrDefault(f) {
     const type = orientationTypes.fr;
-    const type2 = pairMap[type[f.pair_orientation || '']];
-    return [
-        fillColor[type2] || fillColor.color_unknown,
-        strokeColor[type2] || strokeColor.color_unknown,
-    ];
+    const r = type[f.pair_orientation || ''];
+    const type2 = pairMap[r];
+    return r === 'LR'
+        ? undefined
+        : [fillColor[type2], strokeColor[type2]];
+}
+export function getPairedOrientationColor(f) {
+    return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
 export const ColorByModel = types.maybe(types.model({
     type: types.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "2.14.0",
+  "version": "2.15.1",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -38,7 +38,8 @@
   "dependencies": {
     "@gmod/bam": "^2.0.0",
     "@gmod/cram": "^3.0.3",
-    "@mui/icons-material": "^5.0.1",
+    "@jbrowse/sv-core": "^2.15.1",
+    "@mui/icons-material": "^6.0.0",
     "canvas2svg": "^1.0.16",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",
@@ -49,7 +50,7 @@
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@jbrowse/plugin-wiggle": "^2.0.0",
-    "@mui/material": "^5.0.0",
+    "@mui/material": "^6.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -63,5 +64,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
+  "gitHead": "86ed70124fc5a0b1161266659d1ca9f8796bf3fe"
 }

package/dist/AlignmentsFeatureDetail/BreakendOptionDialog.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ViewType } from '@jbrowse/core/pluggableElementTypes';
-import { AlignmentFeatureWidgetModel } from './stateModelFactory';
-import { ReducedFeature } from './getSAFeatures';
-declare const BreakendOptionDialog: ({ model, handleClose, f1, f2, }: {
-    model: AlignmentFeatureWidgetModel;
-    handleClose: () => void;
-    f1: ReducedFeature;
-    f2: ReducedFeature;
-    viewType: ViewType;
-}) => React.JSX.Element;
-export default BreakendOptionDialog;

package/dist/AlignmentsFeatureDetail/BreakendOptionDialog.js

@@ -1,97 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-const launchBreakpointSplitView_1 = require("./launchBreakpointSplitView");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const useStyles = (0, mui_1.makeStyles)()({
-    block: {
-        display: 'block',
-    },
-});
-function stripIds(arr) {
-    return arr.map(({ id, displays, ...rest }) => ({
-        ...rest,
-        displays: displays.map(({ id, ...rest }) => rest),
-    }));
-}
-function Checkbox2({ checked, label, onChange, }) {
-    const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.FormControlLabel, { className: classes.block, control: react_1.default.createElement(material_1.Checkbox, { checked: checked, onChange: onChange }), label: label }));
-}
-const BreakendOptionDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, f1, f2, }) {
-    const [copyTracks, setCopyTracks] = (0, react_1.useState)(true);
-    const [mirror, setMirror] = (0, react_1.useState)(true);
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Breakpoint split view options" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(Checkbox2, { checked: copyTracks, onChange: event => {
-                    setCopyTracks(event.target.checked);
-                }, label: "Copy tracks into the new view" }),
-            react_1.default.createElement(Checkbox2, { checked: mirror, onChange: event => {
-                    setMirror(event.target.checked);
-                }, label: "Mirror tracks vertically in vertically stacked view" })),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    const { view } = model;
-                    const session = (0, util_1.getSession)(model);
-                    try {
-                        const viewSnapshot = (0, launchBreakpointSplitView_1.getBreakpointSplitView)({ view, f1, f2 });
-                        const views = viewSnapshot.views;
-                        const view1 = views[0];
-                        const view2 = views[1];
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-                        const viewTracks = (0, mobx_state_tree_1.getSnapshot)(view.tracks);
-                        session.addView('BreakpointSplitView', {
-                            ...viewSnapshot,
-                            views: [
-                                {
-                                    ...view1,
-                                    tracks: stripIds(viewTracks),
-                                    offsetPx: view1.offsetPx - view.width / 2 + 100,
-                                },
-                                {
-                                    ...view2,
-                                    tracks: stripIds(mirror ? [...viewTracks].reverse() : viewTracks),
-                                    offsetPx: view2.offsetPx - view.width / 2 + 100,
-                                },
-                            ],
-                        });
-                    }
-                    catch (e) {
-                        console.error(e);
-                        session.notify(`${e}`);
-                    }
-                    handleClose();
-                }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    handleClose();
-                }, color: "secondary", variant: "contained" }, "Cancel"))));
-});
-exports.default = BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/BreakendOptionDialog.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ViewType } from '@jbrowse/core/pluggableElementTypes';
-import { AlignmentFeatureWidgetModel } from './stateModelFactory';
-import { ReducedFeature } from './getSAFeatures';
-declare const BreakendOptionDialog: ({ model, handleClose, f1, f2, }: {
-    model: AlignmentFeatureWidgetModel;
-    handleClose: () => void;
-    f1: ReducedFeature;
-    f2: ReducedFeature;
-    viewType: ViewType;
-}) => React.JSX.Element;
-export default BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/BreakendOptionDialog.js

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { getSession } from '@jbrowse/core/util';
-import { Dialog } from '@jbrowse/core/ui';
-import { getBreakpointSplitView } from './launchBreakpointSplitView';
-import { getSnapshot } from 'mobx-state-tree';
-const useStyles = makeStyles()({
-    block: {
-        display: 'block',
-    },
-});
-function stripIds(arr) {
-    return arr.map(({ id, displays, ...rest }) => ({
-        ...rest,
-        displays: displays.map(({ id, ...rest }) => rest),
-    }));
-}
-function Checkbox2({ checked, label, onChange, }) {
-    const { classes } = useStyles();
-    return (React.createElement(FormControlLabel, { className: classes.block, control: React.createElement(Checkbox, { checked: checked, onChange: onChange }), label: label }));
-}
-const BreakendOptionDialog = observer(function ({ model, handleClose, f1, f2, }) {
-    const [copyTracks, setCopyTracks] = useState(true);
-    const [mirror, setMirror] = useState(true);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Breakpoint split view options" },
-        React.createElement(DialogContent, null,
-            React.createElement(Checkbox2, { checked: copyTracks, onChange: event => {
-                    setCopyTracks(event.target.checked);
-                }, label: "Copy tracks into the new view" }),
-            React.createElement(Checkbox2, { checked: mirror, onChange: event => {
-                    setMirror(event.target.checked);
-                }, label: "Mirror tracks vertically in vertically stacked view" })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    const { view } = model;
-                    const session = getSession(model);
-                    try {
-                        const viewSnapshot = getBreakpointSplitView({ view, f1, f2 });
-                        const views = viewSnapshot.views;
-                        const view1 = views[0];
-                        const view2 = views[1];
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-                        const viewTracks = getSnapshot(view.tracks);
-                        session.addView('BreakpointSplitView', {
-                            ...viewSnapshot,
-                            views: [
-                                {
-                                    ...view1,
-                                    tracks: stripIds(viewTracks),
-                                    offsetPx: view1.offsetPx - view.width / 2 + 100,
-                                },
-                                {
-                                    ...view2,
-                                    tracks: stripIds(mirror ? [...viewTracks].reverse() : viewTracks),
-                                    offsetPx: view2.offsetPx - view.width / 2 + 100,
-                                },
-                            ],
-                        });
-                    }
-                    catch (e) {
-                        console.error(e);
-                        session.notify(`${e}`);
-                    }
-                    handleClose();
-                }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
-            React.createElement(Button, { onClick: () => {
-                    handleClose();
-                }, color: "secondary", variant: "contained" }, "Cancel"))));
-});
-export default BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/LaunchBreakpointSplitViewPanel.js

@@ -1,59 +0,0 @@
-import React, { lazy, useEffect, useState } from 'react';
-import { Typography, Link, Tooltip } from '@mui/material';
-import { SimpleFeature, getSession, toLocale, } from '@jbrowse/core/util';
-import { ErrorMessage } from '@jbrowse/core/ui';
-import { getSAFeatures } from './getSAFeatures';
-// lazies
-const BreakendOptionDialog = lazy(() => import('./BreakendOptionDialog'));
-export default function LaunchBreakpointSplitViewPanel({ model, feature, viewType, }) {
-    const session = getSession(model);
-    const { view } = model;
-    const [res, setRes] = useState();
-    const [error, setError] = useState();
-    useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        ;
-        (async () => {
-            try {
-                const feats = await getSAFeatures({
-                    view,
-                    feature: new SimpleFeature(feature),
-                });
-                setRes(feats);
-            }
-            catch (e) {
-                setError(e);
-                console.error(e);
-            }
-        })();
-    }, [feature, view]);
-    const ret = [];
-    if (res) {
-        for (let i = 0; i < res.length - 1; i++) {
-            ret.push([res[i], res[i + 1]]);
-        }
-    }
-    return ret.length ? (React.createElement("div", null,
-        React.createElement(Typography, null, "Launch split views with breakend source and target"),
-        error ? React.createElement(ErrorMessage, { error: error }) : null,
-        React.createElement("ul", null, ret.map((arg, index) => {
-            const [f1, f2] = arg;
-            return (React.createElement("li", { key: `${JSON.stringify(arg)}-${index}` },
-                React.createElement(Tooltip, { title: "Top panel->Bottom panel" },
-                    React.createElement(Link, { href: "#", onClick: event => {
-                            event.preventDefault();
-                            session.queueDialog(handleClose => [
-                                BreakendOptionDialog,
-                                { handleClose, f1, f2, model, viewType },
-                            ]);
-                        } },
-                        f1.refName,
-                        ":",
-                        toLocale(f1.strand === 1 ? f1.end : f1.start),
-                        ' ',
-                        "-> ",
-                        f2.refName,
-                        ":",
-                        toLocale(f2.strand === 1 ? f2.start : f2.end)))));
-        })))) : null;
-}