@jbrowse/plugin-alignments 2.15.0 → 2.15.2

package/esm/AlignmentsFeatureDetail/LaunchSupplementaryAlignmentBreakpointSplitViewPanel.js

@@ -0,0 +1,84 @@
+import React, { lazy, useEffect, useState } from 'react';
+import { Typography, Link } from '@mui/material';
+import { SimpleFeature, getSession, toLocale, } from '@jbrowse/core/util';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { getSAFeatures } from './getSAFeatures';
+// lazies
+const BreakendMultiLevelOptionDialog = lazy(() => import('./BreakendMultiLevelOptionDialog'));
+const BreakendSingleLevelOptionDialog = lazy(() => import('./BreakendSingleLevelOptionDialog'));
+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 view"),
+        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}` },
+                f1.refName,
+                ":",
+                toLocale(f1.strand === 1 ? f1.end : f1.start),
+                " ->",
+                ' ',
+                f2.refName,
+                ":",
+                toLocale(f2.strand === 1 ? f2.start : f2.end),
+                ' ',
+                React.createElement(Link, { href: "#", onClick: event => {
+                        event.preventDefault();
+                        session.queueDialog(handleClose => [
+                            BreakendMultiLevelOptionDialog,
+                            {
+                                handleClose,
+                                model,
+                                feature: new SimpleFeature({ ...f1, mate: f2 }),
+                                // @ts-expect-error
+                                viewType,
+                                view: model.view,
+                                assemblyName: model.view.displayedRegions[0].assemblyName,
+                            },
+                        ]);
+                    } }, "(top/bottom)"),
+                ' ',
+                React.createElement(Link, { href: "#", onClick: event => {
+                        event.preventDefault();
+                        session.queueDialog(handleClose => [
+                            BreakendSingleLevelOptionDialog,
+                            {
+                                handleClose,
+                                model,
+                                feature: new SimpleFeature({ ...f1, mate: f2 }),
+                                // @ts-expect-error
+                                viewType,
+                                view: model.view,
+                                assemblyName: model.view.displayedRegions[0].assemblyName,
+                            },
+                        ]);
+                    } }, "(single row)")));
+        })))) : null;
+}

package/esm/AlignmentsFeatureDetail/{SuppAlignments.d.ts → LinkedPairedAlignments.d.ts}

@@ -2,7 +2,6 @@ import React from 'react';
 import { SimpleFeatureSerialized } from '@jbrowse/core/util';
 import { AlignmentFeatureWidgetModel } from './stateModelFactory';
 export default function SuppAlignments(props: {
-    tag: string;
     model: AlignmentFeatureWidgetModel;
     feature: SimpleFeatureSerialized;
 }): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/LinkedPairedAlignments.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+import { getEnv, getSession } from '@jbrowse/core/util';
+import LaunchPairedEndBreakpointSplitViewPanel from './LaunchPairedEndBreakpointSplitViewPanel';
+export default function SuppAlignments(props) {
+    const { model, feature } = props;
+    const session = getSession(model);
+    const { pluginManager } = getEnv(session);
+    let viewType;
+    try {
+        viewType = pluginManager.getViewType('BreakpointSplitView');
+    }
+    catch (e) {
+        // ignore
+    }
+    return (React.createElement(BaseCard, { ...props, title: "Supplementary alignments" }, viewType ? (React.createElement(LaunchPairedEndBreakpointSplitViewPanel, { viewType: viewType, model: model, feature: feature })) : null));
+}

package/esm/AlignmentsFeatureDetail/SupplementaryAlignments.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+import { AlignmentFeatureWidgetModel } from './stateModelFactory';
+export default function SupplementaryAlignments(props: {
+    tag: string;
+    model: AlignmentFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+}): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/{SuppAlignments.js → SupplementaryAlignments.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 import { getEnv, getSession } from '@jbrowse/core/util';
-import SuppAlignmentsLocStrings from './SuppAlignmentsLocStrings';
-import LaunchBreakpointSplitViewPanel from './LaunchBreakpointSplitViewPanel';
-export default function SuppAlignments(props) {
+import SupplementaryAlignmentsLocStrings from './SupplementaryAlignmentsLocStrings';
+import LaunchBreakpointSplitViewPanel from './LaunchSupplementaryAlignmentBreakpointSplitViewPanel';
+export default function SupplementaryAlignments(props) {
     const { model, tag, feature } = props;
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
@@ -15,6 +15,6 @@ export default function SuppAlignments(props) {
         // ignore
     }
     return (React.createElement(BaseCard, { ...props, title: "Supplementary alignments" },
-        React.createElement(SuppAlignmentsLocStrings, { model: model, tag: tag }),
+        React.createElement(SupplementaryAlignmentsLocStrings, { model: model, tag: tag }),
         viewType ? (React.createElement(LaunchBreakpointSplitViewPanel, { viewType: viewType, model: model, feature: feature })) : null));
 }

package/{dist/AlignmentsFeatureDetail/SuppAlignmentsLocStrings.d.ts → esm/AlignmentsFeatureDetail/SupplementaryAlignmentsLocStrings.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AlignmentFeatureWidgetModel } from './stateModelFactory';
-export default function SuppAlignmentsLocStrings({ tag, model, }: {
+export default function SupplementaryAlignmentsLocStrings({ tag, model, }: {
     tag: string;
     model: AlignmentFeatureWidgetModel;
 }): React.JSX.Element;

package/esm/AlignmentsFeatureDetail/{SuppAlignmentsLocStrings.js → SupplementaryAlignmentsLocStrings.js}

@@ -3,7 +3,7 @@ import { Typography, Link } from '@mui/material';
 // locals
 import { getLengthOnRef } from '../MismatchParser';
 import { navToLoc } from './util';
-export default function SuppAlignmentsLocStrings({ tag, model, }) {
+export default function SupplementaryAlignmentsLocStrings({ tag, model, }) {
     return (React.createElement("div", null,
         React.createElement(Typography, null, "List of supplementary alignment locations"),
         React.createElement("ul", null, tag

package/esm/LinearAlignmentsDisplay/models/alignmentsModel.js

@@ -6,13 +6,12 @@ import { getLowerPanelDisplays } from './util';
  * #stateModel LinearAlignmentsDisplayMixin
  */
 export function LinearAlignmentsDisplayMixin(pluginManager, configSchema) {
-    const lowerPanelDisplays = getLowerPanelDisplays(pluginManager).map(f => f.stateModel);
     return types.model({
         /**
          * #property
          * refers to LinearPileupDisplay sub-display model
          */
-        PileupDisplay: types.maybe(types.union(...lowerPanelDisplays)),
+        PileupDisplay: types.maybe(types.union(...getLowerPanelDisplays(pluginManager).map(f => f.stateModel))),
         /**
          * #property
          * refers to LinearSNPCoverageDisplay sub-display model

package/esm/LinearAlignmentsDisplay/models/util.js

@@ -1,8 +1,6 @@
 export function getLowerPanelDisplays(pluginManager) {
-    return (pluginManager
+    return pluginManager
         .getDisplayElements()
-        // @ts-expect-error
         .filter(f => { var _a; return ((_a = f.subDisplay) === null || _a === void 0 ? void 0 : _a.type) === 'LinearAlignmentsDisplay'; })
-        // @ts-expect-error
-        .filter(f => { var _a; return (_a = f.subDisplay) === null || _a === void 0 ? void 0 : _a.lowerPanel; }));
+        .filter(f => { var _a; return (_a = f.subDisplay) === null || _a === void 0 ? void 0 : _a.lowerPanel; });
 }

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -37,7 +37,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -48,10 +48,10 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             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;
@@ -62,7 +62,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -150,7 +150,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: import("react").FC<{
+    readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
@@ -171,7 +171,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
-    readonly DisplayBlurb: import("react").FC<{
+    readonly DisplayBlurb: React.FC<{
         model: {
             id: string;
             type: string;
@@ -194,7 +194,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -240,13 +240,13 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
@@ -421,7 +421,6 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        priority: number;
         onClick: () => void;
     })[];
 } & {
@@ -458,7 +457,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     }, {
         renderInProgress: AbortController | undefined;
         filled: boolean;
-        reactElement: import("react").ReactElement | undefined;
+        reactElement: React.ReactElement | undefined;
         features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
@@ -469,10 +468,10 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             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;
@@ -483,7 +482,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -525,8 +524,8 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     type: string;
     id: string;
     configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
-    rpcDriverName: string | undefined;
     heightPreConfig: number | undefined;
+    rpcDriverName: string | undefined;
     userBpPerPxLimit: number | undefined;
     userByteSizeLimit: number | undefined;
 } & import("mobx-state-tree")._NotCustomized>;

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -403,9 +403,12 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     {
                         label: 'Color by tag...',
                         onClick: () => {
-                            getSession(self).queueDialog(doneCallback => [
+                            getSession(self).queueDialog(handleClose => [
                                 ColorByTagDialog,
-                                { model: self, handleClose: doneCallback },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },
@@ -417,20 +420,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
-                    {
-                        label: 'Filter by...',
-                        icon: FilterListIcon,
-                        priority: -1,
-                        onClick: () => {
-                            getSession(self).queueDialog(doneCallback => [
-                                FilterByTagDialog,
-                                { model: self, handleClose: doneCallback },
-                            ]);
-                        },
-                    },
                     {
                         label: 'Set feature height...',
-                        priority: -1,
+                        priority: 1,
                         subMenu: [
                             {
                                 label: 'Normal',
@@ -449,9 +441,12 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                             {
                                 label: 'Manually set height',
                                 onClick: () => {
-                                    getSession(self).queueDialog(doneCallback => [
+                                    getSession(self).queueDialog(handleClose => [
                                         SetFeatureHeightDialog,
-                                        { model: self, handleClose: doneCallback },
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
                                     ]);
                                 },
                             },
@@ -459,10 +454,27 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                     {
                         label: 'Set max height...',
+                        priority: -1,
                         onClick: () => {
-                            getSession(self).queueDialog(doneCallback => [
+                            getSession(self).queueDialog(handleClose => [
                                 SetMaxHeightDialog,
-                                { model: self, handleClose: doneCallback },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Filter by...',
+                        icon: FilterListIcon,
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                FilterByTagDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },

package/esm/LinearPileupDisplay/model.d.ts

@@ -34,7 +34,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     }, {
         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;
@@ -45,12 +45,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             model: {
                 error?: unknown;
                 reload: () => void;
-                message: import("react").ReactNode;
+                message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
                 reactElement? /**
                  * #property
-                 */: import("react").ReactElement;
+                 */: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -61,7 +61,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: import("react").ReactElement;
+            reactElement: React.
+            /**
+             * #action
+             */
+            ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -137,7 +141,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     error: unknown;
     message: string | undefined;
 } & {
-    readonly RenderingComponent: import("react").FC<{
+    readonly RenderingComponent: React.FC<{
         model: {
             id: string;
             type: string;
@@ -160,7 +164,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
-    readonly DisplayBlurb: import("react").FC<{
+    readonly DisplayBlurb: React.FC<{
         model: {
             id: string;
             type: string;
@@ -185,7 +189,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -231,13 +235,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: undefined | import("react").FC<any>;
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
@@ -335,7 +339,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        priority: number;
         onClick: () => void;
     })[];
 } & {
@@ -428,6 +431,22 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #method
      */
     trackMenuItems(): readonly [...import("@jbrowse/core/ui").MenuItem[], {
+        readonly label: "Sort by...";
+        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        readonly disabled: boolean;
+        readonly subMenu: readonly [...{
+            label: string;
+            onClick: () => void;
+        }[], {
+            readonly label: "Sort by tag...";
+            readonly onClick: () => void;
+        }, {
+            readonly label: "Clear sort";
+            readonly onClick: () => void;
+        }];
+    }, {
         readonly label: "Color by...";
         readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
@@ -445,22 +464,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             label: string;
             onClick: () => void;
         }[]];
-    }, {
-        readonly label: "Sort by...";
-        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        readonly disabled: boolean;
-        readonly subMenu: readonly [...{
-            label: string;
-            onClick: () => void;
-        }[], {
-            readonly label: "Sort by tag...";
-            readonly onClick: () => void;
-        }, {
-            readonly label: "Clear sort";
-            readonly onClick: () => void;
-        }];
     }, {
         readonly label: "Group by...";
         readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {

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')),
         });
     });
 }