@jbrowse/plugin-alignments 2.13.1 → 2.15.0

package/esm/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/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
+import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { getSnapshot } from 'mobx-state-tree';
+import { getContainingTrack, getContainingView, getSession, useDebounce, } from '@jbrowse/core/util';
+// locals
+import { getUniqueTagValues } from '../../shared';
+function clone(c) {
+    return JSON.parse(JSON.stringify(c));
+}
+const GroupByTagDialog = observer(function (props) {
+    const { model, handleClose } = props;
+    const [tag, setTag] = useState('');
+    const [tagSet, setTagSet] = useState();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [includeUndefined, setIncludeUndefined] = useState(true);
+    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
+    const isInvalid = tag.length === 2 && !validTag;
+    const debouncedTag = useDebounce(tag, 1000);
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                if (!isInvalid) {
+                    setError(undefined);
+                    setLoading(true);
+                    const vals = await getUniqueTagValues({
+                        self: model,
+                        tag: debouncedTag,
+                        blocks: getContainingView(model)
+                            .staticBlocks,
+                    });
+                    setTagSet(vals);
+                }
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model, isInvalid, debouncedTag]);
+    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Group by tag" },
+        React.createElement(DialogContent, null,
+            React.createElement(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.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: includeUndefined, onChange: () => {
+                        setIncludeUndefined(!includeUndefined);
+                    } }), label: "Make a new subtrack for undefined values of tag as well?" }),
+            React.createElement(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.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (React.createElement("div", null,
+                React.createElement("div", null,
+                    "Found unique ",
+                    tag,
+                    " values:"),
+                React.createElement("div", null, tagSet.join(', ')))) : null),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                    const track = getContainingTrack(model);
+                    const trackConf = clone(getSnapshot(track.configuration));
+                    const session = 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 = 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.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
+});
+export default GroupByTagDialog;

package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -5,8 +5,6 @@ const LinearPileupDisplayBlurb = observer(function ({ model, }) {
     var _a;
     const { sortedBy } = model;
     return sortedBy ? (React.createElement("div", { "data-testid": `blurb-${sortedBy}` },
-        React.createElement(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.createElement(Typography, { color: "secondary", variant: "caption" }, `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`))) : null;
 });
 export default LinearPileupDisplayBlurb;

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

@@ -11,14 +11,20 @@ const SetFeatureHeightDialog = observer(function (props) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set feature height" },
         React.createElement(DialogContent, null,
             React.createElement(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.createElement(TextField, { value: height, helperText: "Feature height", onChange: event => setHeight(event.target.value) }),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: !!noSpacing, onChange: () => setNoSpacing(val => !val) }), label: "Remove spacing between features in y-direction?" }),
+            React.createElement(TextField, { value: height, helperText: "Feature height", onChange: event => {
+                    setHeight(event.target.value);
+                } }),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: !!noSpacing, onChange: () => {
+                        setNoSpacing(val => !val);
+                    } }), label: "Remove spacing between features in y-direction?" }),
             React.createElement(DialogActions, null,
                 React.createElement(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.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 export default SetFeatureHeightDialog;

package/{dist/LinearPileupDisplay/components/SetMaxHeight.d.ts → esm/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/esm/LinearPileupDisplay/components/{SetMaxHeight.js → SetMaxHeightDialog.js}

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

package/esm/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/esm/LinearPileupDisplay/components/{SortByTag.js → SortByTagDialog.js}

@@ -5,12 +5,14 @@ import { Dialog } from '@jbrowse/core/ui';
 const SortByTagDialog = observer(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = 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.createElement(Dialog, { open: true, onClose: handleClose, title: "Sort by tag" },
         React.createElement(DialogContent, null,
             React.createElement(Typography, null, "Set the tag to sort by"),
             React.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
-            React.createElement(TextField, { value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
+            React.createElement(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" }),
@@ -19,6 +21,8 @@ const SortByTagDialog = observer(function (props) {
                         model.setSortedBy('tag', tag);
                         handleClose();
                     } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 export default SortByTagDialog;

package/esm/LinearPileupDisplay/configSchema.js

@@ -6,7 +6,6 @@ import { types } from '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 ConfigurationSchema('LinearPileupDisplay', {
         /**
          * #slot

package/esm/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/esm/LinearPileupDisplay/model.js

@@ -8,12 +8,15 @@ import { createAutorun, randomColor, modificationColors } from '../util';
 // icons
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import SortIcon from '@mui/icons-material/Sort';
+import WorkspacesIcon from '@mui/icons-material/Workspaces';
+import ColorLensIcon from '@mui/icons-material/ColorLens';
 // locals
 import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
 import { observable } from 'mobx';
-// lzies
-const SortByTagDialog = lazy(() => import('./components/SortByTag'));
-const ModificationsDialog = lazy(() => import('./components/ColorByModifications'));
+// lazies
+const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
+const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
+const ModificationsDialog = lazy(() => import('./components/ColorByModificationsDialog'));
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -220,27 +223,43 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Show soft clipping',
-                        icon: VisibilityIcon,
-                        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: ColorLensIcon,
+                        subMenu: [
+                            {
+                                label: 'Pair orientation',
+                                onClick: () => {
+                                    self.setColorScheme({ type: 'pairOrientation' });
+                                },
+                            },
+                            {
+                                label: 'Modifications or methylation',
+                                onClick: () => {
+                                    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: SortIcon,
                         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...',
@@ -253,38 +272,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: () => {
-                                    getSession(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
-                                        { model: self, handleClose: doneCallback },
-                                    ]);
+                                    self.clearSelected();
                                 },
                             },
-                            {
-                                label: 'Insert size',
-                                onClick: () => self.setColorScheme({ type: 'insertSize' }),
-                            },
-                            ...superColorSchemeSubMenuItems(),
                         ],
                     },
+                    {
+                        label: 'Group by...',
+                        icon: WorkspacesIcon,
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                GroupByDialog,
+                                { model: self, handleClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Show soft clipping',
+                        icon: VisibilityIcon,
+                        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();
+                        },
                     },
                 ];
             },
@@ -342,7 +366,11 @@ function stateModelFactory(configSchema) {
                 const { staticBlocks } = getContainingView(self);
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
                     const adapter = getConf(parentTrack, ['adapter']);
-                    const vals = await getUniqueModificationValues(self, adapter, colorBy, staticBlocks);
+                    const vals = await getUniqueModificationValues({
+                        self,
+                        adapterConfig: adapter,
+                        blocks: staticBlocks,
+                    });
                     self.updateModificationColorMap(vals);
                 }
                 self.setModificationsReady(true);

package/esm/LinearReadArcsDisplay/components/ReactComponent.js

@@ -6,6 +6,7 @@ const Arcs = observer(function ({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
     const height = model.height;
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const cb = useCallback((ref) => {
         model.setRef(ref);
     }, 

package/esm/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<{