@jbrowse/plugin-alignments 2.13.0 → 2.14.0

package/dist/LinearPileupDisplay/components/{ColorByTag.js → ColorByTagDialog.js}

@@ -29,12 +29,14 @@ const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const ColorByTagDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const [tag, setTag] = (0, react_1.useState)('');
-    const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Color by tag" },
         react_1.default.createElement(material_1.DialogContent, { style: { overflowX: 'hidden' } },
             react_1.default.createElement(material_1.Typography, null, "Enter tag to color by: "),
             react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."),
-            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
+            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
+                    setTag(event.target.value);
+                }, placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });

package/dist/LinearPileupDisplay/components/GroupByDialog.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IAnyStateTreeNode } from 'mobx-state-tree';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+declare const GroupByTagDialog: (props: {
+    model: {
+        adapterConfig: AnyConfigurationModel;
+        configuration: AnyConfigurationModel;
+    } & IAnyStateTreeNode;
+    handleClose: () => void;
+}) => React.JSX.Element;
+export default GroupByTagDialog;

package/dist/LinearPileupDisplay/components/GroupByDialog.js

@@ -0,0 +1,129 @@
+"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 ui_1 = require("@jbrowse/core/ui");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const util_1 = require("@jbrowse/core/util");
+// locals
+const shared_1 = require("../../shared");
+function clone(c) {
+    return JSON.parse(JSON.stringify(c));
+}
+const GroupByTagDialog = (0, mobx_react_1.observer)(function (props) {
+    const { model, handleClose } = props;
+    const [tag, setTag] = (0, react_1.useState)('');
+    const [tagSet, setTagSet] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const [includeUndefined, setIncludeUndefined] = (0, react_1.useState)(true);
+    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
+    const isInvalid = tag.length === 2 && !validTag;
+    const debouncedTag = (0, util_1.useDebounce)(tag, 1000);
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                if (!isInvalid) {
+                    setError(undefined);
+                    setLoading(true);
+                    const vals = await (0, shared_1.getUniqueTagValues)({
+                        self: model,
+                        tag: debouncedTag,
+                        blocks: (0, util_1.getContainingView)(model)
+                            .staticBlocks,
+                    });
+                    setTagSet(vals);
+                }
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model, isInvalid, debouncedTag]);
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Group by tag" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Typography, null, "Set the tag to group by. NOTE: this will make a set of fully functional subtracks with the filter by by default set to the values of the tag that are visible in the current view"),
+            react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
+            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: includeUndefined, onChange: () => {
+                        setIncludeUndefined(!includeUndefined);
+                    } }), label: "Make a new subtrack for undefined values of tag as well?" }),
+            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
+                    setTag(event.target.value);
+                }, placeholder: "Enter tag name", inputProps: {
+                    maxLength: 2,
+                    'data-testid': 'group-tag-name-input',
+                }, error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name" }),
+            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(ui_1.LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", null,
+                    "Found unique ",
+                    tag,
+                    " values:"),
+                react_1.default.createElement("div", null, tagSet.join(', ')))) : null),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                    const track = (0, util_1.getContainingTrack)(model);
+                    const trackConf = clone((0, mobx_state_tree_1.getSnapshot)(track.configuration));
+                    const session = (0, util_1.getSession)(model);
+                    if (tagSet) {
+                        const ret = [...tagSet];
+                        if (includeUndefined) {
+                            ret.push(undefined);
+                        }
+                        for (const tagValue of ret) {
+                            // @ts-expect-error
+                            const newTrackConf = session.addTrackConf({
+                                ...trackConf,
+                                trackId: `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`,
+                                name: `${trackConf.name} ${tag}:${tagValue}`,
+                                displays: undefined,
+                            });
+                            const view = (0, util_1.getContainingView)(model);
+                            const t = view.showTrack(newTrackConf.trackId);
+                            const d = t.displays[0];
+                            d.setFilterBy({
+                                flagInclude: 0,
+                                flagExclude: 1540,
+                                tagFilter: {
+                                    tag,
+                                    value: tagValue,
+                                },
+                            });
+                        }
+                    }
+                    handleClose();
+                } }, "Submit"),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
+});
+exports.default = GroupByTagDialog;

package/dist/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -10,8 +10,6 @@ const LinearPileupDisplayBlurb = (0, mobx_react_1.observer)(function ({ model, }
     var _a;
     const { sortedBy } = model;
     return sortedBy ? (react_1.default.createElement("div", { "data-testid": `blurb-${sortedBy}` },
-        react_1.default.createElement(material_1.Typography, { color: "secondary", variant: "caption" }, sortedBy
-            ? `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`
-            : null))) : null;
+        react_1.default.createElement(material_1.Typography, { color: "secondary", variant: "caption" }, `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`))) : null;
 });
 exports.default = LinearPileupDisplayBlurb;

package/dist/LinearPileupDisplay/components/{SetFeatureHeight.js → SetFeatureHeightDialog.js}

@@ -36,14 +36,20 @@ const SetFeatureHeightDialog = (0, mobx_react_1.observer)(function (props) {
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set feature height" },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(material_1.Typography, null, "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact."),
-            react_1.default.createElement(material_1.TextField, { value: height, helperText: "Feature height", onChange: event => setHeight(event.target.value) }),
-            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: !!noSpacing, onChange: () => setNoSpacing(val => !val) }), label: "Remove spacing between features in y-direction?" }),
+            react_1.default.createElement(material_1.TextField, { value: height, helperText: "Feature height", onChange: event => {
+                    setHeight(event.target.value);
+                } }),
+            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: !!noSpacing, onChange: () => {
+                        setNoSpacing(val => !val);
+                    } }), label: "Remove spacing between features in y-direction?" }),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
                         model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
                         model.setNoSpacing(noSpacing);
                         handleClose();
                     } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 exports.default = SetFeatureHeightDialog;

package/{esm/LinearPileupDisplay/components/SetMaxHeight.d.ts → dist/LinearPileupDisplay/components/SetMaxHeightDialog.d.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 declare const SetMaxHeightDialog: (props: {
     model: {
         maxHeight?: number;
-        setMaxHeight: Function;
+        setMaxHeight: (arg?: number) => void;
     };
     handleClose: () => void;
 }) => React.JSX.Element;

package/dist/LinearPileupDisplay/components/{SetMaxHeight.js → SetMaxHeightDialog.js}

@@ -41,12 +41,16 @@ const SetMaxHeightDialog = (0, mobx_react_1.observer)(function (props) {
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Filter options" },
         react_1.default.createElement(material_1.DialogContent, { className: classes.root },
             react_1.default.createElement(material_1.Typography, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""),
-            react_1.default.createElement(material_1.TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max height for layout" }),
+            react_1.default.createElement(material_1.TextField, { value: max, onChange: event => {
+                    setMax(event.target.value);
+                }, placeholder: "Enter max height for layout" }),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                         model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
                         handleClose();
                     } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 exports.default = SetMaxHeightDialog;

package/dist/LinearPileupDisplay/components/{SortByTag.d.ts → SortByTagDialog.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const SortByTagDialog: (props: {
     model: {
-        setSortedBy: Function;
+        setSortedBy: (arg: string, arg2: string) => void;
     };
     handleClose: () => void;
 }) => React.JSX.Element;

package/dist/LinearPileupDisplay/components/{SortByTag.js → SortByTagDialog.js}

@@ -30,12 +30,14 @@ const ui_1 = require("@jbrowse/core/ui");
 const SortByTagDialog = (0, mobx_react_1.observer)(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = (0, react_1.useState)('');
-    const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Sort by tag" },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(material_1.Typography, null, "Set the tag to sort by"),
             react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
-            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
+            react_1.default.createElement(material_1.TextField, { value: tag, onChange: event => {
+                    setTag(event.target.value);
+                }, placeholder: "Enter tag name", inputProps: {
                     maxLength: 2,
                     'data-testid': 'sort-tag-name-input',
                 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name" }),
@@ -44,6 +46,8 @@ const SortByTagDialog = (0, mobx_react_1.observer)(function (props) {
                         model.setSortedBy('tag', tag);
                         handleClose();
                     } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 exports.default = SortByTagDialog;

package/dist/LinearPileupDisplay/configSchema.js

@@ -8,7 +8,6 @@ const mobx_state_tree_1 = require("mobx-state-tree");
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
 function configSchemaF(pluginManager) {
-    // modify config schema to take in a sub coverage display
     return (0, configuration_1.ConfigurationSchema)('LinearPileupDisplay', {
         /**
          * #slot

package/dist/LinearPileupDisplay/model.d.ts

@@ -116,7 +116,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         readName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         tagFilter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
             tag: import("mobx-state-tree").ISimpleType<string>;
-            value: import("mobx-state-tree").ISimpleType<string>;
+            value: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
@@ -154,8 +154,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
+         * #property
+         */)._NotCustomized>>;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: import("react").FC<{
@@ -175,9 +177,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
+        }, import("mobx-state-tree" /**
          * #action
-         */)._NotCustomized>>;
+         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -267,7 +269,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly autorunReady: boolean;
 } & {
     setTagsReady(flag: boolean): void;
-    setMaxHeight(n: number): void;
+    setMaxHeight(n?: number): void;
     setFeatureHeight(n?: number): void;
     setNoSpacing(flag?: boolean): void;
     setColorScheme(colorScheme: {
@@ -292,9 +294,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                 [x: string]: any;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-        } & import("mobx-state-tree" /**
-         * #property
-         */).IStateTreeNode<AnyConfigurationSchemaType>);
+        } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     readonly maxHeight: any;
@@ -335,6 +335,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
+        priority: number;
         onClick: () => void;
     })[];
 } & {
@@ -426,49 +427,60 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #method
      */
-    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    trackMenuItems(): readonly [...import("@jbrowse/core/ui").MenuItem[], {
+        readonly label: "Color by...";
+        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        type: string;
-        checked: boolean;
-        onClick: () => void;
-        disabled?: undefined;
-        subMenu?: undefined;
-    } | {
-        label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        disabled: boolean;
-        subMenu: {
+        readonly subMenu: readonly [{
+            readonly label: "Pair orientation";
+            readonly onClick: () => void;
+        }, {
+            readonly label: "Modifications or methylation";
+            readonly onClick: () => void;
+        }, {
+            readonly label: "Insert size";
+            readonly onClick: () => void;
+        }, ...{
             label: string;
             onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        subMenu: {
+        }[]];
+    }, {
+        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;
-        }[];
-        icon?: undefined;
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-        disabled?: undefined;
-    } | {
-        label: string;
-        type: string;
-        checked: any;
-        onClick: () => void;
-        icon?: undefined;
-        disabled?: undefined;
-        subMenu?: undefined;
-    })[];
+        }[], {
+            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">> & {
+            muiName: string;
+        };
+        readonly onClick: () => void;
+    }, {
+        readonly label: "Show soft clipping";
+        readonly icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        readonly type: "checkbox";
+        readonly checked: boolean;
+        readonly onClick: () => void;
+    }, {
+        readonly label: "Fade mismatches by quality";
+        readonly type: "checkbox";
+        readonly checked: any;
+        readonly onClick: () => void;
+    }];
 } & {
     afterAttach(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/LinearPileupDisplay/model.js

@@ -36,12 +36,15 @@ const util_2 = require("../util");
 // icons
 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");
-// lzies
-const SortByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTag'))));
-const ModificationsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModifications'))));
+// lazies
+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
@@ -248,27 +251,43 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Show soft clipping',
-                        icon: Visibility_1.default,
-                        type: 'checkbox',
-                        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();
-                            }
-                        },
+                        label: 'Color by...',
+                        icon: ColorLens_1.default,
+                        subMenu: [
+                            {
+                                label: 'Pair orientation',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'pairOrientation' });
+                                },
+                            },
+                            {
+                                label: 'Modifications or methylation',
+                                onClick: () => {
+                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
+                                        ModificationsDialog,
+                                        { model: self, handleClose: doneCallback },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Insert size',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'insertSize' });
+                                },
+                            },
+                            ...superColorSchemeSubMenuItems(),
+                        ],
                     },
                     {
-                        label: 'Sort by',
+                        label: 'Sort by...',
                         icon: Sort_1.default,
                         disabled: self.showSoftClipping,
                         subMenu: [
                             ...['Start location', 'Read strand', 'Base pair'].map(option => ({
                                 label: option,
-                                onClick: () => self.setSortedBy(option),
+                                onClick: () => {
+                                    self.setSortedBy(option);
+                                },
                             })),
                             {
                                 label: 'Sort by tag...',
@@ -281,38 +300,43 @@ function stateModelFactory(configSchema) {
                             },
                             {
                                 label: 'Clear sort',
-                                onClick: () => self.clearSelected(),
-                            },
-                        ],
-                    },
-                    {
-                        label: 'Color scheme',
-                        subMenu: [
-                            {
-                                label: 'Pair orientation',
-                                onClick: () => self.setColorScheme({ type: 'pairOrientation' }),
-                            },
-                            {
-                                label: 'Modifications or methylation',
                                 onClick: () => {
-                                    (0, util_1.getSession)(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
-                                        { model: self, handleClose: doneCallback },
-                                    ]);
+                                    self.clearSelected();
                                 },
                             },
-                            {
-                                label: 'Insert size',
-                                onClick: () => self.setColorScheme({ type: 'insertSize' }),
-                            },
-                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
+                    {
+                        label: 'Group by...',
+                        icon: Workspaces_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                GroupByDialog,
+                                { model: self, handleClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Show soft clipping',
+                        icon: Visibility_1.default,
+                        type: 'checkbox',
+                        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();
+                            }
+                        },
+                    },
                     {
                         label: 'Fade mismatches by quality',
                         type: 'checkbox',
                         checked: self.mismatchAlphaSetting,
-                        onClick: () => self.toggleMismatchAlpha(),
+                        onClick: () => {
+                            self.toggleMismatchAlpha();
+                        },
                     },
                 ];
             },
@@ -370,7 +394,11 @@ function stateModelFactory(configSchema) {
                 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, adapter, colorBy, staticBlocks);
+                    const vals = await (0, shared_1.getUniqueModificationValues)({
+                        self,
+                        adapterConfig: adapter,
+                        blocks: staticBlocks,
+                    });
                     self.updateModificationColorMap(vals);
                 }
                 self.setModificationsReady(true);

package/dist/LinearReadArcsDisplay/components/ReactComponent.js

@@ -34,6 +34,7 @@ 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);
     }, 

package/dist/LinearReadArcsDisplay/model.d.ts

@@ -30,7 +30,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         readName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         tagFilter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
             tag: import("mobx-state-tree").ISimpleType<string>;
-            value: import("mobx-state-tree").ISimpleType<string>;
+            value: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
     lineWidth: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
@@ -65,7 +65,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{