@jbrowse/plugin-alignments 2.13.0 → 2.14.0

package/esm/AlignmentsFeatureDetail/BreakendOptionDialog.js

@@ -26,15 +26,21 @@ const BreakendOptionDialog = observer(function ({ model, handleClose, f1, f2, })
     const [mirror, setMirror] = useState(true);
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Breakpoint split view options" },
         React.createElement(DialogContent, null,
-            React.createElement(Checkbox2, { checked: copyTracks, onChange: event => setCopyTracks(event.target.checked), label: "Copy tracks into the new view" }),
-            React.createElement(Checkbox2, { checked: mirror, onChange: event => setMirror(event.target.checked), label: "Mirror tracks vertically in vertically stacked view" })),
+            React.createElement(Checkbox2, { checked: copyTracks, onChange: event => {
+                    setCopyTracks(event.target.checked);
+                }, label: "Copy tracks into the new view" }),
+            React.createElement(Checkbox2, { checked: mirror, onChange: event => {
+                    setMirror(event.target.checked);
+                }, label: "Mirror tracks vertically in vertically stacked view" })),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => {
                     const { view } = model;
                     const session = getSession(model);
                     try {
                         const viewSnapshot = getBreakpointSplitView({ view, f1, f2 });
-                        const [view1, view2] = viewSnapshot.views;
+                        const views = viewSnapshot.views;
+                        const view1 = views[0];
+                        const view2 = views[1];
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
                         const viewTracks = getSnapshot(view.tracks);
                         session.addView('BreakpointSplitView', {
@@ -59,6 +65,8 @@ const BreakendOptionDialog = observer(function ({ model, handleClose, f1, f2, })
                     }
                     handleClose();
                 }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
-            React.createElement(Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
+            React.createElement(Button, { onClick: () => {
+                    handleClose();
+                }, color: "secondary", variant: "contained" }, "Cancel"))));
 });
 export default BreakendOptionDialog;

package/esm/AlignmentsFeatureDetail/Formatter.js

@@ -11,8 +11,12 @@ export default function Formatter({ value }) {
         React.createElement("button", { type: "button", onClick: () => {
                 copy(display);
                 setCopied(true);
-                setTimeout(() => setCopied(false), 700);
+                setTimeout(() => {
+                    setCopied(false);
+                }, 700);
             } }, copied ? 'Copied to clipboard' : 'Copy'),
-        React.createElement("button", { type: "button", onClick: () => setShow(val => !val) }, show ? 'Show less' : 'Show more'),
+        React.createElement("button", { type: "button", onClick: () => {
+                setShow(val => !val);
+            } }, show ? 'Show less' : 'Show more'),
         React.createElement("div", null, show ? display : `${display.slice(0, 100)}...`))) : (React.createElement("div", null, display));
 }

package/esm/AlignmentsFeatureDetail/SuppAlignmentsLocStrings.js

@@ -9,7 +9,7 @@ export default function SuppAlignmentsLocStrings({ tag, model, }) {
         React.createElement("ul", null, tag
             .split(';')
             .filter(SA => !!SA)
-            .map((SA, index) => {
+            .map((SA, idx) => {
             const [saRef, saStart, saStrand, saCigar] = SA.split(',');
             const saLength = getLengthOnRef(saCigar);
             const extra = Math.floor(saLength / 5);
@@ -21,7 +21,9 @@ export default function SuppAlignmentsLocStrings({ tag, model, }) {
             const displayStart = start.toLocaleString('en-US');
             const displayEnd = end.toLocaleString('en-US');
             const displayString = `${saRef}:${displayStart}-${displayEnd} (${saStrand}) [${saLength}bp]`;
-            return (React.createElement("li", { key: `${locString}-${index}` },
+            return (
+            /* biome-ignore lint/suspicious/noArrayIndexKey: */
+            React.createElement("li", { key: `${locString}-${idx}` },
                 React.createElement(Link, { href: "#", onClick: async (event) => {
                         event.preventDefault();
                         // eslint-disable-next-line @typescript-eslint/no-floating-promises

package/esm/AlignmentsFeatureDetail/getSAFeatures.js

@@ -9,9 +9,9 @@ export async function getSAFeatures({ view, feature, }) {
     const SA = getTag(feature, 'SA') || '';
     const readName = feature.get('name');
     const clipPos = getClip(cigar, 1);
-    // get the canonical refname for the read because if the
-    // read.get('refName') is chr1 and the actual fasta refName is 1 then no
-    // tracks can be opened on the top panel of the linear read vs ref
+    // get the canonical refname for the read because if the read.get('refName')
+    // is chr1 and the actual fasta refName is 1 then no tracks can be opened on
+    // the top panel of the linear read vs ref
     const assembly = await assemblyManager.waitForAssembly(view.assemblyNames[0]);
     if (!assembly) {
         throw new Error('assembly not found');
@@ -27,7 +27,7 @@ export async function getSAFeatures({ view, feature, }) {
     };
     const features = [feat, ...suppAlns];
     features.forEach((f, idx) => {
-        f.refName = (assembly === null || assembly === void 0 ? void 0 : assembly.getCanonicalRefName(f.refName)) || f.refName;
+        f.refName = assembly.getCanonicalRefName(f.refName) || f.refName;
         f.syntenyId = idx;
         f.mate.syntenyId = idx;
         f.mate.uniqueId = `${f.uniqueId}_mate`;

package/esm/AlignmentsFeatureDetail/launchBreakpointSplitView.js

@@ -12,7 +12,7 @@ export function getBreakpointSplitView({ f1, f2, view, }) {
     const topRegion = assembly.regions.find(f => f.refName === f1.refName);
     const bottomRegion = assembly.regions.find(f => f.refName === f2.refName);
     if (!topRegion || !bottomRegion) {
-        throw new Error(`unable to find the refName for the top or bottom of the breakpoint view`);
+        throw new Error('unable to find the refName for the top or bottom of the breakpoint view');
     }
     const topMarkedRegion = [{ ...topRegion }, { ...topRegion }];
     const bottomMarkedRegion = [{ ...bottomRegion }, { ...bottomRegion }];
@@ -41,6 +41,6 @@ export function getBreakpointSplitView({ f1, f2, view, }) {
                 offsetPx: (bottomRegion.start + e) / bpPerPx,
             },
         ],
-        displayName: `breakend split detail`,
+        displayName: 'breakend split detail',
     };
 }

package/esm/BamAdapter/BamAdapter.js

@@ -8,8 +8,8 @@ import { firstValueFrom } from 'rxjs';
 // locals
 import BamSlightlyLazyFeature from './BamSlightlyLazyFeature';
 export default class BamAdapter extends BaseFeatureDataAdapter {
-    // derived classes may not use the same configuration so a custom
-    // configure method allows derived classes to override this behavior
+    // derived classes may not use the same configuration so a custom configure
+    // method allows derived classes to override this behavior
     async configurePre() {
         const bamLocation = this.getConf('bamLocation');
         const location = this.getConf(['index', 'location']);
@@ -20,10 +20,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
             bamFilehandle: openLocation(bamLocation, pm),
             csiFilehandle: csi ? openLocation(location, pm) : undefined,
             baiFilehandle: !csi ? openLocation(location, pm) : undefined,
-            // chunkSizeLimit and fetchSizeLimit are more troublesome than
-            // helpful, and have given overly large values on the ultra long
-            // nanopore reads even with 500MB limits, so disabled with infinity
-            yieldThreadTime: Infinity,
+            yieldThreadTime: Number.POSITIVE_INFINITY,
         });
         const adapterConfig = this.getConf('sequenceAdapter');
         if (adapterConfig && this.getSubAdapter) {
@@ -33,13 +30,11 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
                 sequenceAdapter: dataAdapter,
             };
         }
-        else {
-            return { bam };
-        }
+        return { bam };
     }
     async configure() {
         if (!this.configureP) {
-            this.configureP = this.configurePre().catch(e => {
+            this.configureP = this.configurePre().catch((e) => {
                 this.configureP = undefined;
                 throw e;
             });
@@ -74,7 +69,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
     }
     async setup(opts) {
         if (!this.setupP) {
-            this.setupP = this.setupPre(opts).catch(e => {
+            this.setupP = this.setupPre(opts).catch((e) => {
                 this.setupP = undefined;
                 throw e;
             });
@@ -137,10 +132,11 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
                         continue;
                     }
                     if (tagFilter) {
-                        const v = record.get(tagFilter.tag);
-                        if (!(tagFilter.value === '*'
-                            ? v !== undefined
-                            : `${v}` === tagFilter.value)) {
+                        const readVal = record.get(tagFilter.tag);
+                        const filterVal = tagFilter.value;
+                        if (filterVal === '*'
+                            ? readVal !== undefined
+                            : `${readVal}` !== `${filterVal}`) {
                             continue;
                         }
                     }
@@ -161,9 +157,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
             const fetchSizeLimit = this.getConf('fetchSizeLimit');
             return { bytes, fetchSizeLimit };
         }
-        else {
-            return super.getMultiRegionFeatureDensityStats(regions, opts);
-        }
+        return super.getMultiRegionFeatureDensityStats(regions, opts);
     }
     freeResources( /* { region } */) { }
     // depends on setup being called before the BAM constructor

package/esm/BamAdapter/BamSlightlyLazyFeature.js

@@ -60,7 +60,6 @@ export default class BamSlightlyLazyFeature {
     id() {
         return `${this.adapter.id}-${this.record.id()}`;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get(field) {
         const methodName = `_get_${field}`;
         // @ts-expect-error

package/esm/CramAdapter/CramAdapter.d.ts

@@ -29,7 +29,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
     getRefNames(opts?: BaseOptions): Promise<string[]>;
     refNameToId(refName: string): number | undefined;
     refIdToName(refId: number): string | undefined;
-    refIdToOriginalName(refId: number): string;
+    refIdToOriginalName(refId: number): string | undefined;
     getFeatures(region: Region & {
         originalRefName?: string;
     }, opts?: BaseOptions & {

package/esm/CramAdapter/CramAdapter.js

@@ -39,7 +39,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
     }
     async configure() {
         if (!this.configureP) {
-            this.configureP = this.configurePre().catch(e => {
+            this.configureP = this.configurePre().catch((e) => {
                 this.configureP = undefined;
                 throw e;
             });
@@ -113,7 +113,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
     }
     async setup(opts) {
         if (!this.setupP) {
-            this.setupP = this.setupPre(opts).catch(e => {
+            this.setupP = this.setupPre(opts).catch((e) => {
                 this.setupP = undefined;
                 throw e;
             });
@@ -172,12 +172,13 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
                         continue;
                     }
                     if (tagFilter) {
-                        const v = tagFilter.tag === 'RG'
+                        const readVal = tagFilter.tag === 'RG'
                             ? (_a = samHeader.readGroups) === null || _a === void 0 ? void 0 : _a[record.readGroupId]
                             : record.tags[tagFilter.tag];
-                        if (!(tagFilter.value === '*'
-                            ? v !== undefined
-                            : `${v}` === tagFilter.value)) {
+                        const filterVal = tagFilter.value;
+                        if (filterVal === '*'
+                            ? readVal !== undefined
+                            : `${readVal}` !== `${filterVal}`) {
                             continue;
                         }
                     }

package/esm/CramAdapter/CramTestAdapters.js

@@ -12,7 +12,11 @@ export function parseSmallFasta(text) {
         const [id, ...descriptionLines] = defLine.split(' ');
         const description = descriptionLines.join(' ');
         const sequence = seqLines.join('').replaceAll(/\s/g, '');
-        return { id, description, sequence };
+        return {
+            id: id,
+            description,
+            sequence,
+        };
     });
 }
 export class FetchableSmallFasta {
@@ -63,7 +67,9 @@ export class SequenceAdapter extends BaseFeatureDataAdapter {
                 }));
                 observer.complete();
             })
-                .catch(e => observer.error(e));
+                .catch((e) => {
+                observer.error(e);
+            });
             return { unsubscribe: () => { } };
         });
     }

package/esm/GuessAlignmentsTypes/index.js

@@ -13,7 +13,7 @@ export default function GuessAlignmentsTypesF(pluginManager) {
             if (regexGuess.test(fileName) && !adapterHint) {
                 return obj;
             }
-            else if (adapterHint === adapterName) {
+            if (adapterHint === adapterName) {
                 return obj;
             }
             return adapterGuesser(file, index, adapterHint);
@@ -36,7 +36,7 @@ export default function GuessAlignmentsTypesF(pluginManager) {
             if (regexGuess.test(fileName) && !adapterHint) {
                 return obj;
             }
-            else if (adapterHint === adapterName) {
+            if (adapterHint === adapterName) {
                 return obj;
             }
             return adapterGuesser(file, index, adapterHint);

package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AlignmentsDisplayModel } from '../models/model';
+import { LinearAlignmentsDisplayModel } from '../models/model';
 declare const AlignmentsDisplay: ({ model, }: {
-    model: AlignmentsDisplayModel;
+    model: LinearAlignmentsDisplayModel;
 }) => React.JSX.Element | null;
 export default AlignmentsDisplay;

package/esm/LinearAlignmentsDisplay/models/model.d.ts

@@ -4,6 +4,7 @@ import { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core
 import PluginManager from '@jbrowse/core/PluginManager';
 import { MenuItem } from '@jbrowse/core/ui';
 import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { IFilter } from '../../shared';
 /**
  * #stateModel LinearAlignmentsDisplay
  * extends
@@ -46,7 +47,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             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<{
@@ -59,26 +60,14 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import(
-            /**
-             * #action
-             */
-            "mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree" /**
-             * #getter
-             */).ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree" /**
-             * #getter
-             */).IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import(
-        /**
-         * #getter
-         */
-        "mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -131,7 +120,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
      */
     readonly features: any;
     /**
-     * #getter
+     * #getteralignmentsdisplaymodel
      */
     readonly DisplayBlurb: any;
     /**
@@ -159,6 +148,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
      * #action
      */
     setHeight(n: number): number;
+    /**
+     * #action
+     */
+    setFilterBy(filter: IFilter): void;
     /**
      * #action
      */
@@ -195,5 +188,5 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     lowerPanelType: import("mobx-state-tree").IType<string | undefined, string, string>;
 }>>, import("mobx-state-tree")._NotCustomized>;
 export default stateModelFactory;
-export type AlignmentsDisplayStateModel = ReturnType<typeof stateModelFactory>;
-export type AlignmentsDisplayModel = Instance<AlignmentsDisplayStateModel>;
+export type LinearAlignmentsDisplayStateModel = ReturnType<typeof stateModelFactory>;
+export type LinearAlignmentsDisplayModel = Instance<LinearAlignmentsDisplayStateModel>;

package/esm/LinearAlignmentsDisplay/models/model.js

@@ -111,7 +111,7 @@ function stateModelFactory(pluginManager, configSchema) {
             return self.PileupDisplay.features;
         },
         /**
-         * #getter
+         * #getteralignmentsdisplaymodel
          */
         get DisplayBlurb() {
             var _a;
@@ -168,6 +168,13 @@ function stateModelFactory(pluginManager, configSchema) {
             self.heightPreConfig = Math.max(n, minDisplayHeight);
             return self.heightPreConfig;
         },
+        /**
+         * #action
+         */
+        setFilterBy(filter) {
+            self.PileupDisplay.setFilterBy(filter);
+            self.SNPCoverageDisplay.setFilterBy(filter);
+        },
         /**
          * #action
          */
@@ -239,7 +246,9 @@ function stateModelFactory(pluginManager, configSchema) {
                     type: 'radio',
                     label: d.displayName,
                     checked: d.name === self.PileupDisplay.type,
-                    onClick: () => self.setLowerPanelType(d.name),
+                    onClick: () => {
+                        self.setLowerPanelType(d.name);
+                    },
                 }));
                 return [
                     ...superTrackMenuItems(),
@@ -255,7 +264,7 @@ function stateModelFactory(pluginManager, configSchema) {
                     },
                     {
                         type: 'subMenu',
-                        label: `Replace lower panel with...`,
+                        label: 'Replace lower panel with...',
                         subMenu: extra,
                     },
                 ];
@@ -263,6 +272,7 @@ function stateModelFactory(pluginManager, configSchema) {
         };
     })
         .preProcessSnapshot(snap => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!snap) {
             return snap;
         }

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -138,7 +138,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         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]>;
     /**
@@ -168,7 +168,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             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: import("react").FC<{
@@ -181,7 +181,9 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            id: import("mobx-state-tree" /**
+             * #property
+             */).IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
@@ -284,7 +286,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #action
      */
-    setMaxHeight(n: number): void;
+    setMaxHeight(n?: number): void;
     /**
      * #action
      */
@@ -417,6 +419,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
+        priority: number;
         onClick: () => void;
     })[];
 } & {

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -16,11 +16,11 @@ import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
 import { getUniqueTagValues, FilterModel } from '../shared';
 import { createAutorun } from '../util';
 import { ColorByModel } from '../shared/color';
-// async
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTag'));
-const ColorByTagDialog = lazy(() => import('./components/ColorByTag'));
-const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeight'));
-const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeight'));
+// lazies
+const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'));
+const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'));
+const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
+const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
 // using a map because it preserves order
 const rendererTypes = new Map([
     ['pileup', 'PileupRenderer'],
@@ -262,18 +262,14 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                             icon: MenuOpenIcon,
                             onClick: () => {
                                 self.clearFeatureSelection();
-                                if (feat) {
-                                    self.selectFeature(feat);
-                                }
+                                self.selectFeature(feat);
                             },
                         },
                         {
                             label: 'Copy info to clipboard',
                             icon: ContentCopyIcon,
                             onClick: () => {
-                                if (feat) {
-                                    self.copyFeatureToClipboard(feat);
-                                }
+                                self.copyFeatureToClipboard(feat);
                             },
                         },
                     ]
@@ -366,27 +362,39 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 return [
                     {
                         label: 'Normal',
-                        onClick: () => self.setColorScheme({ type: 'normal' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'normal' });
+                        },
                     },
                     {
                         label: 'Mapping quality',
-                        onClick: () => self.setColorScheme({ type: 'mappingQuality' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'mappingQuality' });
+                        },
                     },
                     {
                         label: 'Strand',
-                        onClick: () => self.setColorScheme({ type: 'strand' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'strand' });
+                        },
                     },
                     {
                         label: 'Per-base quality',
-                        onClick: () => self.setColorScheme({ type: 'perBaseQuality' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'perBaseQuality' });
+                        },
                     },
                     {
                         label: 'Per-base lettering',
-                        onClick: () => self.setColorScheme({ type: 'perBaseLettering' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'perBaseLettering' });
+                        },
                     },
                     {
                         label: 'First-of-pair strand',
-                        onClick: () => self.setColorScheme({ type: 'stranded' }),
+                        onClick: () => {
+                            self.setColorScheme({ type: 'stranded' });
+                        },
                     },
                     {
                         label: 'Color by tag...',
@@ -406,8 +414,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Filter by',
+                        label: 'Filter by...',
                         icon: FilterListIcon,
+                        priority: -1,
                         onClick: () => {
                             getSession(self).queueDialog(doneCallback => [
                                 FilterByTagDialog,
@@ -416,7 +425,8 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                         },
                     },
                     {
-                        label: 'Set feature height',
+                        label: 'Set feature height...',
+                        priority: -1,
                         subMenu: [
                             {
                                 label: 'Normal',
@@ -471,7 +481,11 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 const { colorBy, tagsReady } = self;
                 const { staticBlocks } = view;
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
-                    const vals = await getUniqueTagValues(self, colorBy, staticBlocks);
+                    const vals = await getUniqueTagValues({
+                        self,
+                        tag: colorBy.tag,
+                        blocks: staticBlocks,
+                    });
                     self.updateColorTagMap(vals);
                 }
                 self.setTagsReady(true);
@@ -501,7 +515,8 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                             // feature.id that was returned e.g. that the user hasn't
                             // moused over to a new position during the async operation
                             // above
-                            if (self.featureIdUnderMouse === (feature === null || feature === void 0 ? void 0 : feature.uniqueId)) {
+                            if (feature &&
+                                self.featureIdUnderMouse === feature.uniqueId) {
                                 self.setFeatureUnderMouse(new SimpleFeature(feature));
                             }
                         }

package/esm/LinearPileupDisplay/components/{ColorByModifications.js → ColorByModificationsDialog.js}

@@ -29,6 +29,8 @@ const ColorByModificationsDialog = observer(function ({ model, handleClose, }) {
                         model.setColorScheme({ type: 'methylation' });
                         handleClose();
                     } }, "Methylation"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
+                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                        handleClose();
+                    } }, "Cancel")))));
 });
 export default ColorByModificationsDialog;

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

@@ -4,12 +4,14 @@ import { Button, DialogContent, DialogActions, TextField, Typography, } from '@m
 import { Dialog } from '@jbrowse/core/ui';
 const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     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: "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", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
+            React.createElement(TextField, { value: tag, onChange: event => {
+                    setTag(event.target.value);
+                }, placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off" }),
             React.createElement(DialogActions, null,
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });

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;