@jbrowse/plugin-alignments 2.18.0 → 3.0.1

package/esm/LinearPileupDisplay/components/SortByTagDialog.d.ts

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

package/esm/LinearPileupDisplay/components/SortByTagDialog.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -6,25 +7,18 @@ const SortByTagDialog = observer(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = useState('');
     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", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name", slotProps: {
-                    htmlInput: {
-                        maxLength: 2,
-                        'data-testid': 'sort-tag-name-input',
-                    },
-                } }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                        model.setSortedBy('tag', tag);
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Sort by tag", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Set the tag to sort by" }), _jsx(Typography, { color: "textSecondary", children: "Examples: HP for haplotype, RG for read group, etc." }), _jsx(TextField, { value: tag, onChange: event => {
+                        setTag(event.target.value);
+                    }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name", slotProps: {
+                        htmlInput: {
+                            maxLength: 2,
+                            'data-testid': 'sort-tag-name-input',
+                        },
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                                model.setSortedBy('tag', tag);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 export default SortByTagDialog;

package/esm/LinearPileupDisplay/model.d.ts

@@ -36,7 +36,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -86,6 +86,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearPileupDisplay">;
     configuration: AnyConfigurationSchemaType;
@@ -183,13 +184,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -216,7 +217,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
@@ -227,6 +228,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly filterBy: any;
 } & {
     readonly autorunReady: boolean;
+    readonly hideSmallIndels: boolean | undefined;
 } & {
     setTagsReady(flag: boolean): void;
     setMaxHeight(n?: number): void;
@@ -240,6 +242,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setConfig(conf: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
     setFilterBy(filter: import("../shared/types").FilterBy): void;
     setJexlFilters(filters: string[]): void;
+    setHideSmallIndels(arg: boolean): void;
 } & {
     readonly rendererConfig: {
         [x: string]: any;
@@ -275,18 +278,28 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         model: {
             sortedBy?: SortedBy;
         };
-    }) => import("react").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     renderPropsPre(): any;
     colorSchemeSubMenuItems(): {
         label: string;
         onClick: () => void;
     }[];
     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;
+        priority: number;
+        type: string;
+        checked: boolean | undefined;
+        onClick: () => void;
+        icon?: undefined;
+    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
+        priority?: undefined;
+        type?: undefined;
+        checked?: undefined;
     })[];
 } & {
     renderProps(): any;
@@ -430,7 +443,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -480,6 +493,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearPileupDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearPileupDisplayModel = Instance<LinearPileupDisplayStateModel>;

package/esm/LinearPileupDisplay/model.js

@@ -95,11 +95,12 @@ function stateModelFactory(configSchema) {
             return [...self.visibleModifications.keys()];
         },
         get rendererConfig() {
-            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, } = self;
+            const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, hideSmallIndels, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
             return self.rendererType.configSchema.create({
                 ...configBlob,
                 ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(hideSmallIndels !== undefined ? { hideSmallIndels } : {}),
                 ...(noSpacing !== undefined ? { noSpacing } : {}),
                 ...(mismatchAlpha !== undefined ? { mismatchAlpha } : {}),
                 ...(trackMaxHeight !== undefined

package/esm/LinearReadArcsDisplay/components/ReactComponent.d.ts

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

package/esm/LinearReadArcsDisplay/components/ReactComponent.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
@@ -9,10 +10,9 @@ const Arcs = observer(function ({ model, }) {
     const cb = useCallback((ref) => {
         model.setRef(ref);
     }, [model, width, height]);
-    return (React.createElement("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
+    return (_jsx("canvas", { "data-testid": "arc-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 const LinearReadArcsReactComponent = observer(function ({ model, }) {
-    return (React.createElement(BaseDisplayComponent, { model: model },
-        React.createElement(Arcs, { model: model })));
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Arcs, { model: model }) }));
 });
 export default LinearReadArcsReactComponent;

package/esm/LinearReadArcsDisplay/model.d.ts

@@ -112,7 +112,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     loading: boolean;
     chainData: ChainData | undefined;

package/esm/LinearReadCloudDisplay/components/ReactComponent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { LinearReadCloudDisplayModel } from '../model';
 declare const LinearReadCloudReactComponent: ({ model, }: {
     model: LinearReadCloudDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearReadCloudReactComponent;

package/esm/LinearReadCloudDisplay/components/ReactComponent.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
@@ -9,10 +10,9 @@ const Cloud = observer(function ({ model, }) {
     const cb = useCallback((ref) => {
         model.setRef(ref);
     }, [model, width, height]);
-    return (React.createElement("canvas", { "data-testid": "cloud-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
+    return (_jsx("canvas", { "data-testid": "cloud-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
 });
 const LinearReadCloudReactComponent = observer(function ({ model, }) {
-    return (React.createElement(BaseDisplayComponent, { model: model },
-        React.createElement(Cloud, { model: model })));
+    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Cloud, { model: model }) }));
 });
 export default LinearReadCloudReactComponent;

package/esm/LinearReadCloudDisplay/model.d.ts

@@ -109,7 +109,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     loading: boolean;
     chainData: ChainData | undefined;

package/esm/LinearSNPCoverageDisplay/components/Tooltip.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Feature } from '@jbrowse/core/util';
 type Coord = [number, number];
 declare const SNPCoverageTooltip: (props: {
@@ -9,5 +8,5 @@ declare const SNPCoverageTooltip: (props: {
     offsetMouseCoord: Coord;
     clientMouseCoord: Coord;
     clientRect?: DOMRect;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default SNPCoverageTooltip;

package/esm/LinearSNPCoverageDisplay/components/Tooltip.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { toLocale } from '@jbrowse/core/util';
 import { Tooltip } from '@jbrowse/plugin-wiggle';
 import { observer } from 'mobx-react';
@@ -10,7 +11,7 @@ const useStyles = makeStyles()(() => ({
 }));
 const toP = (s = 0) => +(+s).toFixed(1);
 const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
-const TooltipContents = React.forwardRef(function TooltipContents2(props, reactRef) {
+const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
     const { feature, model } = props;
     const { classes } = useStyles();
     const start = feature.get('start') + 1;
@@ -23,58 +24,21 @@ const TooltipContents = React.forwardRef(function TooltipContents2(props, reactR
     ]
         .filter(f => !!f)
         .join(':');
-    return (React.createElement("div", { ref: reactRef },
-        React.createElement("table", null,
-            React.createElement("caption", null, loc),
-            React.createElement("thead", null,
-                React.createElement("tr", null,
-                    React.createElement("th", null),
-                    React.createElement("th", null, "Base"),
-                    React.createElement("th", null, "Count"),
-                    React.createElement("th", null, "% of Total"),
-                    React.createElement("th", null, "Strands"))),
-            React.createElement("tbody", null,
-                React.createElement("tr", null,
-                    React.createElement("td", null),
-                    React.createElement("td", null, "Total"),
-                    React.createElement("td", null, readsCounted),
-                    React.createElement("td", null, " "),
-                    React.createElement("td", null, " ")),
-                React.createElement("tr", null,
-                    React.createElement("td", null),
-                    React.createElement("td", null,
-                        "REF ",
-                        refbase ? `(${refbase.toUpperCase()})` : ''),
-                    React.createElement("td", null, ref.entryDepth),
-                    React.createElement("td", null, pct(ref.entryDepth, readsCounted)),
-                    React.createElement("td", null,
-                        ref['-1'] ? `${ref['-1']}(-)` : '',
-                        ref['1'] ? `${ref['1']}(+)` : '')),
-                Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (React.createElement("tr", { key: `${key}_${base}` },
-                    React.createElement("td", null,
-                        React.createElement(ColorSquare, { model: model, base: base })),
-                    React.createElement("td", null,
-                        base.toUpperCase(),
-                        " "),
-                    React.createElement("td", { className: classes.td }, [
-                        score.entryDepth,
-                        score.avgProbability !== undefined
-                            ? `(avg. ${pct(score.avgProbability)} prob.)`
-                            : '',
-                    ]
-                        .filter(f => !!f)
-                        .join(' ')),
-                    React.createElement("td", null, base === 'depth' || base === 'skip'
-                        ? '---'
-                        : pct(score.entryDepth, readsCounted)),
-                    React.createElement("td", null,
-                        score['-1'] ? `${score['-1']}(-)` : '',
-                        score['1'] ? `${score['1']}(+)` : '')))))))));
+    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: loc }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Total" }), _jsx("th", { children: "Strands" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }), _jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), _jsx("td", { children: ref.entryDepth }), _jsx("td", { children: pct(ref.entryDepth, readsCounted) }), _jsxs("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsxs("td", { children: [base.toUpperCase(), " "] }), _jsx("td", { className: classes.td, children: [
+                                        score.entryDepth,
+                                        score.avgProbability !== undefined
+                                            ? `(avg. ${pct(score.avgProbability)} prob.)`
+                                            : '',
+                                    ]
+                                        .filter(f => !!f)
+                                        .join(' ') }), _jsx("td", { children: base === 'depth' || base === 'skip'
+                                        ? '---'
+                                        : pct(score.entryDepth, readsCounted) }), _jsxs("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
 });
 function ColorSquare({ base, model, }) {
     var _a;
     const { visibleModifications } = model;
-    return base.startsWith('mod_') ? (React.createElement("div", { style: {
+    return base.startsWith('mod_') ? (_jsx("div", { style: {
             width: 10,
             height: 10,
             background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
@@ -83,6 +47,6 @@ function ColorSquare({ base, model, }) {
 const SNPCoverageTooltip = observer(function (props) {
     const { model } = props;
     const { featureUnderMouse: feat } = model;
-    return feat && feat.get('type') === 'skip' ? null : (React.createElement(Tooltip, { TooltipContents: TooltipContents, ...props }));
+    return feat && feat.get('type') === 'skip' ? null : (_jsx(Tooltip, { TooltipContents: TooltipContents, ...props }));
 });
 export default SNPCoverageTooltip;

package/esm/LinearSNPCoverageDisplay/model.d.ts

@@ -36,7 +36,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -99,9 +99,9 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     type: import("mobx-state-tree").ISimpleType<"LinearWiggleDisplay">;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearSNPCoverageDisplay">;
-    drawInterbaseCounts: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
-    drawIndicators: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
-    drawArcs: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    showInterbaseCounts: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    showInterbaseIndicators: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    showArcs: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
     colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;

package/esm/LinearSNPCoverageDisplay/model.js

@@ -3,6 +3,7 @@ import { getConf, readConfObject } from '@jbrowse/core/configuration';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { getContainingView } from '@jbrowse/core/util';
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { observable } from 'mobx';
 import { cast, getEnv, isAlive, types } from 'mobx-state-tree';
 import { getUniqueModifications } from '../shared/getUniqueModifications';
@@ -13,9 +14,9 @@ function stateModelFactory(pluginManager, configSchema) {
     return types
         .compose('LinearSNPCoverageDisplay', linearWiggleDisplayModelFactory(pluginManager, configSchema), types.model({
         type: types.literal('LinearSNPCoverageDisplay'),
-        drawInterbaseCounts: types.maybe(types.boolean),
-        drawIndicators: types.maybe(types.boolean),
-        drawArcs: types.maybe(types.boolean),
+        showInterbaseCounts: types.maybe(types.boolean),
+        showInterbaseIndicators: types.maybe(types.boolean),
+        showArcs: types.maybe(types.boolean),
         filterBySetting: types.frozen(),
         colorBySetting: types.frozen(),
         jexlFilters: types.optional(types.array(types.string), []),
@@ -69,25 +70,25 @@ function stateModelFactory(pluginManager, configSchema) {
         return {
             get rendererConfig() {
                 const configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
-                const { drawArcs, drawInterbaseCounts, drawIndicators } = self;
+                const { showArcs, showInterbaseCounts, showInterbaseIndicators } = self;
                 return self.rendererType.configSchema.create({
                     ...configBlob,
-                    drawInterbaseCounts: drawInterbaseCounts !== null && drawInterbaseCounts !== void 0 ? drawInterbaseCounts : configBlob.drawInterbaseCounts,
-                    drawIndicators: drawIndicators !== null && drawIndicators !== void 0 ? drawIndicators : configBlob.drawIndicators,
-                    drawArcs: drawArcs !== null && drawArcs !== void 0 ? drawArcs : configBlob.drawArcs,
+                    showInterbaseCounts: showInterbaseCounts !== null && showInterbaseCounts !== void 0 ? showInterbaseCounts : configBlob.showInterbaseCounts,
+                    showInterbaseIndicators: showInterbaseIndicators !== null && showInterbaseIndicators !== void 0 ? showInterbaseIndicators : configBlob.showInterbaseIndicators,
+                    showArcs: showArcs !== null && showArcs !== void 0 ? showArcs : configBlob.showArcs,
                 }, getEnv(self));
             },
-            get drawArcsSetting() {
+            get showArcsSetting() {
                 var _a;
-                return ((_a = self.drawArcs) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'drawArcs'));
+                return ((_a = self.showArcs) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'showArcs'));
             },
-            get drawInterbaseCountsSetting() {
+            get showInterbaseCountsSetting() {
                 var _a;
-                return ((_a = self.drawInterbaseCounts) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'drawInterbaseCounts'));
+                return ((_a = self.showInterbaseCounts) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'showInterbaseCounts'));
             },
-            get drawIndicatorsSetting() {
+            get showInterbaseIndicatorsSetting() {
                 var _a;
-                return ((_a = self.drawIndicators) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'drawIndicators'));
+                return ((_a = self.showInterbaseIndicators) !== null && _a !== void 0 ? _a : readConfObject(this.rendererConfig, 'showInterbaseIndicators'));
             },
             get autorunReady() {
                 const view = getContainingView(self);
@@ -110,14 +111,14 @@ function stateModelFactory(pluginManager, configSchema) {
         setModificationsReady(flag) {
             self.modificationsReady = flag;
         },
-        toggleDrawIndicators() {
-            self.drawIndicators = !self.drawIndicatorsSetting;
+        setShowInterbaseIndicators(arg) {
+            self.showInterbaseIndicators = arg;
         },
-        toggleDrawInterbaseCounts() {
-            self.drawInterbaseCounts = !self.drawInterbaseCountsSetting;
+        setShowInterbaseCounts(arg) {
+            self.showInterbaseCounts = arg;
         },
-        toggleDrawArcs() {
-            self.drawArcs = !self.drawArcsSetting;
+        setShowArcs(arg) {
+            self.showArcs = arg;
         },
     }))
         .actions(self => ({
@@ -189,27 +190,30 @@ function stateModelFactory(pluginManager, configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Draw insertion/clipping indicators',
+                        label: 'Show insertion/clipping indicators',
+                        icon: VisibilityIcon,
                         type: 'checkbox',
-                        checked: self.drawIndicatorsSetting,
+                        checked: self.showInterbaseIndicatorsSetting,
                         onClick: () => {
-                            self.toggleDrawIndicators();
+                            self.setShowInterbaseIndicators(!self.showInterbaseIndicatorsSetting);
                         },
                     },
                     {
-                        label: 'Draw insertion/clipping counts',
+                        label: 'Show insertion/clipping counts',
+                        icon: VisibilityIcon,
                         type: 'checkbox',
-                        checked: self.drawInterbaseCountsSetting,
+                        checked: self.showInterbaseCountsSetting,
                         onClick: () => {
-                            self.toggleDrawInterbaseCounts();
+                            self.setShowInterbaseCounts(self.showInterbaseCountsSetting);
                         },
                     },
                     {
-                        label: 'Draw arcs',
+                        label: 'Show arcs',
+                        icon: VisibilityIcon,
                         type: 'checkbox',
-                        checked: self.drawArcsSetting,
+                        checked: self.showArcsSetting,
                         onClick: () => {
-                            self.toggleDrawArcs();
+                            self.setShowArcs(self.showArcsSetting);
                         },
                     },
                 ];

package/esm/MismatchParser/cigarToMismatches.d.ts

@@ -1,3 +1,2 @@
 import type { Mismatch } from '../shared/types';
-import type { Buffer } from 'buffer';
-export declare function cigarToMismatches(ops: string[], seq?: string, ref?: string, qual?: Buffer): Mismatch[];
+export declare function cigarToMismatches(ops: string[], seq?: string, ref?: string, qual?: Uint8Array): Mismatch[];

package/esm/MismatchParser/index.d.ts

@@ -1,8 +1,7 @@
 import type { Mismatch } from '../shared/types';
 import type { Feature } from '@jbrowse/core/util';
-import type { Buffer } from 'buffer';
 export declare function parseCigar(cigar?: string): string[];
-export declare function getMismatches(cigar?: string, md?: string, seq?: string, ref?: string, qual?: Buffer): Mismatch[];
+export declare function getMismatches(cigar?: string, md?: string, seq?: string, ref?: string, qual?: Uint8Array): Mismatch[];
 export declare function getOrientedCigar(flip: boolean, cigar: string[]): string[];
 export declare function getOrientedMismatches(flip: boolean, cigar: string): Mismatch[];
 export declare function getLengthOnRef(cigar: string): number;

package/esm/MismatchParser/mdToMismatches.d.ts

@@ -1,3 +1,2 @@
 import type { Mismatch } from '../shared/types';
-import type { Buffer } from 'buffer';
-export declare function mdToMismatches(mdstring: string, ops: string[], cigarMismatches: Mismatch[], seq: string, qual?: Buffer | number[] | null): Mismatch[];
+export declare function mdToMismatches(mdstring: string, ops: string[], cigarMismatches: Mismatch[], seq: string, qual?: Uint8Array): Mismatch[];

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -9,8 +9,8 @@ export default class PileupRenderer extends BoxRendererType {
     getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): {
         start: number;
         end: number;
-        reversed?: boolean | undefined;
         refName: string;
+        reversed?: boolean | undefined;
         assemblyName: string;
     };
     render(renderProps: RenderArgsDeserialized): Promise<{
@@ -21,7 +21,7 @@ export default class PileupRenderer extends BoxRendererType {
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -30,7 +30,7 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -40,7 +40,7 @@ export default class PileupRenderer extends BoxRendererType {
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
     createSession(args: PileupLayoutSessionProps): PileupLayoutSession;

package/esm/PileupRenderer/components/PileupRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
@@ -23,5 +22,5 @@ declare const PileupRendering: (props: {
         };
     };
     onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;