@jbrowse/plugin-alignments 2.18.0 → 3.0.1

package/esm/LinearAlignmentsDisplay/model.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { FilterBy } from '../shared/types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
@@ -104,7 +103,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     afterAttach(): void;
     renderSvg(opts: {
         rasterizeLayers?: boolean;
-    }): Promise<React.JSX.Element>;
+    }): Promise<import("react/jsx-runtime").JSX.Element>;
 } & {
     trackMenuItems(): MenuItem[];
 }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{

package/esm/LinearAlignmentsDisplay/model.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import deepEqual from 'fast-deep-equal';
@@ -160,12 +160,10 @@ function stateModelFactory(pluginManager, configSchema) {
             const pileupHeight = self.height - self.SNPCoverageDisplay.height;
             await when(() => !self.PileupDisplay.renderProps().notReady &&
                 !self.SNPCoverageDisplay.renderProps().notReady);
-            return (React.createElement(React.Fragment, null,
-                React.createElement("g", null, await self.SNPCoverageDisplay.renderSvg(opts)),
-                React.createElement("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})` }, await self.PileupDisplay.renderSvg({
-                    ...opts,
-                    overrideHeight: pileupHeight,
-                }))));
+            return (_jsxs(_Fragment, { children: [_jsx("g", { children: await self.SNPCoverageDisplay.renderSvg(opts) }), _jsx("g", { transform: `translate(0 ${self.SNPCoverageDisplay.height})`, children: await self.PileupDisplay.renderSvg({
+                            ...opts,
+                            overrideHeight: pileupHeight,
+                        }) })] }));
         },
     }))
         .views(self => {

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -38,7 +38,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -88,6 +88,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, 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>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -179,13 +180,13 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
 } & {
     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 | 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;
@@ -212,7 +213,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     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>;
@@ -223,6 +224,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     readonly filterBy: any;
 } & {
     readonly autorunReady: boolean;
+    readonly hideSmallIndels: boolean | undefined;
 } & {
     setTagsReady(flag: boolean): void;
     setMaxHeight(n?: number): void;
@@ -236,6 +238,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     setConfig(conf: AnyConfigurationModel): void;
     setFilterBy(filter: FilterBy): void;
     setJexlFilters(filters: string[]): void;
+    setHideSmallIndels(arg: boolean): void;
 } & {
     readonly rendererConfig: {
         [x: string]: any;
@@ -271,18 +274,28 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         model: {
             sortedBy?: import("../shared/types").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;
@@ -323,7 +336,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -373,6 +386,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, 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>>;
 }>>, {
     id: string;
     type: string;

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -32,6 +32,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         colorBySetting: types.frozen(),
         filterBySetting: types.frozen(),
         jexlFilters: types.optional(types.array(types.string), []),
+        hideSmallIndelsSetting: types.maybe(types.boolean),
     }))
         .volatile(() => ({
         colorTagMap: observable.map({}),
@@ -53,6 +54,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
             const view = getContainingView(self);
             return view.initialized && self.statsReadyAndRegionNotTooLarge;
         },
+        get hideSmallIndels() {
+            return self.hideSmallIndelsSetting;
+        },
     }))
         .actions(self => ({
         setTagsReady(flag) {
@@ -128,18 +132,20 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         setJexlFilters(filters) {
             self.jexlFilters = cast(filters);
         },
+        setHideSmallIndels(arg) {
+            self.hideSmallIndelsSetting = arg;
+        },
     }))
         .views(self => ({
         get rendererConfig() {
-            const { featureHeight, noSpacing, trackMaxHeight, rendererTypeName } = self;
+            const { featureHeight: height, noSpacing, hideSmallIndels, trackMaxHeight: maxHeight, rendererTypeName, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
             return self.rendererType.configSchema.create({
                 ...configBlob,
-                ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+                ...(hideSmallIndels !== undefined ? { hideSmallIndels } : {}),
+                ...(height !== undefined ? { height } : {}),
                 ...(noSpacing !== undefined ? { noSpacing } : {}),
-                ...(trackMaxHeight !== undefined
-                    ? { maxHeight: trackMaxHeight }
-                    : {}),
+                ...(maxHeight !== undefined ? { maxHeight } : {}),
             }, getEnv(self));
         },
     }))
@@ -365,6 +371,15 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                             },
                         ],
                     },
+                    {
+                        label: 'Hide small indels (<10bp)',
+                        priority: -1,
+                        type: 'checkbox',
+                        checked: self.hideSmallIndels,
+                        onClick: () => {
+                            self.setHideSmallIndels(!self.hideSmallIndels);
+                        },
+                    },
                     {
                         label: 'Set max height...',
                         priority: -1,
@@ -459,11 +474,11 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
     }))
         .preProcessSnapshot(snap => {
         if (snap) {
-            const { colorBy, filterBy, ...rest } = snap;
+            const { colorBy, colorBySetting, filterBySetting, filterBy, ...rest } = snap;
             return {
                 ...rest,
-                filterBySetting: filterBy,
-                colorBySetting: colorBy,
+                filterBySetting: filterBySetting || filterBy,
+                colorBySetting: colorBySetting || colorBy,
             };
         }
         return snap;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 interface Tag {
     type: string;
     tag: string;
@@ -8,5 +7,5 @@ declare const ColorByTagDialog: ({ model, handleClose, }: {
         setColorScheme: (arg: Tag) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ColorByTagDialog;

package/esm/LinearPileupDisplay/components/ColorByTagDialog.js

@@ -1,24 +1,18 @@
-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';
 const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     const [tag, setTag] = useState('');
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Color by tag" },
-        React.createElement(DialogContent, { style: { overflowX: 'hidden' } },
-            React.createElement(Typography, null, "Enter tag to color by: "),
-            React.createElement(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.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", slotProps: {
-                    htmlInput: { maxLength: 2 },
-                } }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
-                        model.setColorScheme({ type: 'tag', tag });
-                        handleClose();
-                    }, disabled: !validTag }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Color by tag", children: _jsxs(DialogContent, { style: { overflowX: 'hidden' }, children: [_jsx(Typography, { children: "Enter tag to color by: " }), _jsx(Typography, { color: "textSecondary", children: "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." }), _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", slotProps: {
+                        htmlInput: { maxLength: 2 },
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                                model.setColorScheme({ type: 'tag', tag });
+                                handleClose();
+                            }, disabled: !validTag, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }) }));
 });
 export default ColorByTagDialog;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { IAnyStateTreeNode } from 'mobx-state-tree';
 declare const GroupByTagDialog: (props: {
@@ -7,5 +6,5 @@ declare const GroupByTagDialog: (props: {
         configuration: AnyConfigurationModel;
     } & IAnyStateTreeNode;
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default GroupByTagDialog;

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { getContainingTrack, getContainingView, getSession, useDebounce, } from '@jbrowse/core/util';
 import { Button, DialogActions, DialogContent, MenuItem, TextField, Typography, } from '@mui/material';
@@ -41,41 +42,54 @@ const GroupByTagDialog = observer(function (props) {
             }
         })();
     }, [model, isInvalid, debouncedTag]);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Group by" },
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null, "NOTE: this will create new session tracks with the \"filter by\" set to the values chosen here rather than affecting the current track state"),
-            React.createElement(TextField, { fullWidth: true, value: type, onChange: event => {
-                    setType(event.target.value);
-                }, label: "Group by...", select: true },
-                React.createElement(MenuItem, { value: "strand" }, "Strand"),
-                React.createElement(MenuItem, { value: "tag" }, "Tag")),
-            type === 'tag' ? (React.createElement(React.Fragment, null,
-                React.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
-                React.createElement(TextField, { value: tag, onChange: event => {
-                        setGroupByTag(event.target.value);
-                    }, placeholder: "Enter tag name", error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name", slotProps: {
-                        htmlInput: {
-                            maxLength: 2,
-                            'data-testid': 'group-tag-name-input',
-                        },
-                    } }),
-                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)) : 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 = structuredClone(getSnapshot(track.configuration));
-                    const session = getSession(model);
-                    const view = getContainingView(model);
-                    if (type === 'tag') {
-                        if (tagSet) {
-                            const ret = [...tagSet, undefined];
-                            for (const tagValue of ret) {
-                                const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`;
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Group by", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "NOTE: this will create new session tracks with the \"filter by\" set to the values chosen here rather than affecting the current track state" }), _jsxs(TextField, { fullWidth: true, value: type, onChange: event => {
+                            setType(event.target.value);
+                        }, label: "Group by...", select: true, children: [_jsx(MenuItem, { value: "strand", children: "Strand" }), _jsx(MenuItem, { value: "tag", children: "Tag" })] }), type === 'tag' ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "textSecondary", children: "Examples: HP for haplotype, RG for read group, etc." }), _jsx(TextField, { value: tag, onChange: event => {
+                                    setGroupByTag(event.target.value);
+                                }, placeholder: "Enter tag name", error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name", slotProps: {
+                                    htmlInput: {
+                                        maxLength: 2,
+                                        'data-testid': 'group-tag-name-input',
+                                    },
+                                } }), error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                            const track = getContainingTrack(model);
+                            const trackConf = structuredClone(getSnapshot(track.configuration));
+                            const session = getSession(model);
+                            const view = getContainingView(model);
+                            if (type === 'tag') {
+                                if (tagSet) {
+                                    const ret = [...tagSet, undefined];
+                                    for (const tagValue of ret) {
+                                        const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`;
+                                        session.addTrackConf({
+                                            ...trackConf,
+                                            trackId: t1,
+                                            name: `${trackConf.name} (${tag}:${tagValue})`,
+                                            displays: [
+                                                {
+                                                    displayId: `${t1}-LinearAlignmentsDisplay`,
+                                                    type: 'LinearAlignmentsDisplay',
+                                                    pileupDisplay: {
+                                                        displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                                        type: 'LinearPileupDisplay',
+                                                        filterBy: {
+                                                            ...defaultFilterFlags,
+                                                            tagFilter: {
+                                                                tag,
+                                                                value: tagValue,
+                                                            },
+                                                        },
+                                                    },
+                                                },
+                                            ],
+                                        });
+                                        view.showTrack(t1);
+                                    }
+                                }
+                            }
+                            else if (type === 'strand') {
+                                const t1 = `${trackConf.trackId}-${tag}:(-)-${+Date.now()}-sessionTrack`;
+                                const t2 = `${trackConf.trackId}-${tag}:(+)-${+Date.now()}-sessionTrack`;
                                 session.addTrackConf({
                                     ...trackConf,
                                     trackId: t1,
@@ -87,73 +101,43 @@ const GroupByTagDialog = observer(function (props) {
                                             pileupDisplay: {
                                                 displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
                                                 type: 'LinearPileupDisplay',
-                                                filterBy: {
-                                                    ...defaultFilterFlags,
-                                                    tagFilter: {
-                                                        tag,
-                                                        value: tagValue,
-                                                    },
-                                                },
+                                                filterBy: negFlags,
                                             },
                                         },
+                                        {
+                                            displayId: `${t1}-LinearSNPCoverageDisplay`,
+                                            type: 'LinearSNPCoverageDisplay',
+                                            filterBy: negFlags,
+                                        },
+                                    ],
+                                });
+                                session.addTrackConf({
+                                    ...trackConf,
+                                    trackId: t2,
+                                    name: `${trackConf.name} (+)`,
+                                    displays: [
+                                        {
+                                            displayId: `${t2}-LinearAlignmentsDisplay`,
+                                            type: 'LinearAlignmentsDisplay',
+                                            pileupDisplay: {
+                                                displayId: `${t2}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                                                type: 'LinearPileupDisplay',
+                                                filterBy: posFlags,
+                                            },
+                                        },
+                                        {
+                                            displayId: `${t2}-LinearSNPCoverageDisplay`,
+                                            type: 'LinearSNPCoverageDisplay',
+                                            filterBy: posFlags,
+                                        },
                                     ],
                                 });
                                 view.showTrack(t1);
+                                view.showTrack(t2);
                             }
-                        }
-                    }
-                    else if (type === 'strand') {
-                        const t1 = `${trackConf.trackId}-${tag}:(-)-${+Date.now()}-sessionTrack`;
-                        const t2 = `${trackConf.trackId}-${tag}:(+)-${+Date.now()}-sessionTrack`;
-                        session.addTrackConf({
-                            ...trackConf,
-                            trackId: t1,
-                            name: `${trackConf.name} (-)`,
-                            displays: [
-                                {
-                                    displayId: `${t1}-LinearAlignmentsDisplay`,
-                                    type: 'LinearAlignmentsDisplay',
-                                    pileupDisplay: {
-                                        displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
-                                        type: 'LinearPileupDisplay',
-                                        filterBy: negFlags,
-                                    },
-                                },
-                                {
-                                    displayId: `${t1}-LinearSNPCoverageDisplay`,
-                                    type: 'LinearSNPCoverageDisplay',
-                                    filterBy: negFlags,
-                                },
-                            ],
-                        });
-                        session.addTrackConf({
-                            ...trackConf,
-                            trackId: t2,
-                            name: `${trackConf.name} (+)`,
-                            displays: [
-                                {
-                                    displayId: `${t2}-LinearAlignmentsDisplay`,
-                                    type: 'LinearAlignmentsDisplay',
-                                    pileupDisplay: {
-                                        displayId: `${t2}-LinearAlignmentsDisplay-LinearPileupDisplay`,
-                                        type: 'LinearPileupDisplay',
-                                        filterBy: posFlags,
-                                    },
-                                },
-                                {
-                                    displayId: `${t2}-LinearSNPCoverageDisplay`,
-                                    type: 'LinearSNPCoverageDisplay',
-                                    filterBy: posFlags,
-                                },
-                            ],
-                        });
-                        view.showTrack(t1);
-                        view.showTrack(t2);
-                    }
-                    handleClose();
-                } }, "Submit"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"))));
+                            handleClose();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
 });
 export default GroupByTagDialog;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { SortedBy } from '../../shared/types';
 declare const LinearPileupDisplayBlurb: ({ model, }: {
     model: {
         sortedBy?: SortedBy;
     };
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default LinearPileupDisplayBlurb;

package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -1,10 +1,9 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 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" }, `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`))) : null;
+    return sortedBy ? (_jsx("div", { "data-testid": `blurb-${sortedBy}`, children: _jsx(Typography, { color: "secondary", variant: "caption", children: `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/SetFeatureHeightDialog.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const SetFeatureHeightDialog: (props: {
     model: {
         setFeatureHeight: (arg?: number) => void;
@@ -7,5 +6,5 @@ declare const SetFeatureHeightDialog: (props: {
         noSpacing?: boolean;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SetFeatureHeightDialog;

package/esm/LinearPileupDisplay/components/SetFeatureHeightDialog.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, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -8,23 +9,16 @@ const SetFeatureHeightDialog = observer(function (props) {
     const [height, setHeight] = useState(`${featureHeightSetting}`);
     const [noSpacing, setNoSpacing] = useState(noSpacingSetting);
     const ok = height !== '' && !Number.isNaN(+height);
-    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(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")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set feature height", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "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." }), _jsx(TextField, { value: height, helperText: "Feature height", onChange: event => {
+                        setHeight(event.target.value);
+                    } }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !!noSpacing, onChange: () => {
+                            setNoSpacing(val => !val);
+                        } }), label: "Remove spacing between features in y-direction?" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
+                                model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
+                                model.setNoSpacing(noSpacing);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 export default SetFeatureHeightDialog;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const SetMaxHeightDialog: (props: {
     model: {
         maxHeight?: number;
         setMaxHeight: (arg?: number) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SetMaxHeightDialog;

package/esm/LinearPileupDisplay/components/SetMaxHeightDialog.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';
@@ -13,19 +14,13 @@ 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: "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, 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")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set max height", children: _jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, autoFocus: true, onChange: event => {
+                        setMax(event.target.value);
+                    }, placeholder: "Enter max height for layout" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                                model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 export default SetMaxHeightDialog;