@jbrowse/plugin-alignments 2.16.1 → 2.17.0

package/esm/CramAdapter/CramSlightlyLazyFeature.js

@@ -1,4 +1,5 @@
 import { readFeaturesToCIGAR, readFeaturesToMismatches } from './util';
+import { cacheGetter } from '../shared/util';
 export default class CramSlightlyLazyFeature {
     // uses parameter properties to automatically create fields on the class
     // https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties
@@ -6,98 +7,80 @@ export default class CramSlightlyLazyFeature {
         this.record = record;
         this._store = _store;
     }
-    _get_name() {
+    get name() {
         return this.record.readName;
     }
-    _get_start() {
+    get start() {
         return this.record.alignmentStart - 1;
     }
-    _get_end() {
+    get end() {
         var _a;
-        return this.record.alignmentStart + ((_a = this.record.lengthOnRef) !== null && _a !== void 0 ? _a : 1) - 1;
+        return this.start + ((_a = this.record.lengthOnRef) !== null && _a !== void 0 ? _a : 1);
     }
-    _get_cram_read_features() {
-        return this.record.readFeatures;
-    }
-    _get_type() {
-        return 'match';
-    }
-    _get_score() {
+    get score() {
         return this.record.mappingQuality;
     }
-    _get_flags() {
+    get flags() {
         return this.record.flags;
     }
-    _get_strand() {
+    get strand() {
         return this.record.isReverseComplemented() ? -1 : 1;
     }
-    _read_group_id() {
-        var _a;
-        return (_a = this._store.samHeader.readGroups) === null || _a === void 0 ? void 0 : _a[this.record.readGroupId];
-    }
-    _get_qual() {
+    get qual() {
         return (this.record.qualityScores || []).join(' ');
     }
-    qualRaw() {
+    get qualRaw() {
         return this.record.qualityScores;
     }
-    _get_refName() {
+    get refName() {
         return this._store.refIdToName(this.record.sequenceId);
     }
-    _get_is_paired() {
-        return !!this.record.mate;
-    }
-    _get_pair_orientation() {
+    get pair_orientation() {
         return this.record.isPaired() ? this.record.getPairOrientation() : undefined;
     }
-    _get_template_length() {
+    get template_length() {
         return this.record.templateLength || this.record.templateSize;
     }
-    _get_next_ref() {
+    get next_ref() {
         return this.record.mate
             ? this._store.refIdToName(this.record.mate.sequenceId)
             : undefined;
     }
-    _get_next_segment_position() {
+    get next_segment_position() {
         return this.record.mate
             ? `${this._store.refIdToName(this.record.mate.sequenceId)}:${this.record.mate.alignmentStart}`
             : undefined;
     }
-    _get_next_pos() {
+    get is_paired() {
+        return !!this.record.mate;
+    }
+    get next_pos() {
         var _a;
         return (_a = this.record.mate) === null || _a === void 0 ? void 0 : _a.alignmentStart;
     }
-    _get_tags() {
-        const RG = this._read_group_id();
-        const { tags } = this.record;
-        // avoids a tag copy if no RG, but just copy if there is one
-        return RG !== undefined ? { ...tags, RG } : tags;
+    get tags() {
+        var _a;
+        const RG = (_a = this._store.samHeader.readGroups) === null || _a === void 0 ? void 0 : _a[this.record.readGroupId];
+        return RG !== undefined ? { ...this.record.tags, RG } : this.record.tags;
     }
-    _get_seq() {
+    get seq() {
         return this.record.getReadBases();
     }
     // generate a CIGAR, based on code from jkbonfield
-    _get_CIGAR() {
+    get CIGAR() {
         return readFeaturesToCIGAR(this.record.readFeatures, this.record.alignmentStart, this.record.readLength, this.record._refRegion);
     }
-    tags() {
-        return Object.getOwnPropertyNames(CramSlightlyLazyFeature.prototype)
-            .filter(prop => prop.startsWith('_get_') &&
-            prop !== '_get_mismatches' &&
-            prop !== '_get_cram_read_features')
-            .map(methodName => methodName.replace('_get_', ''));
-    }
     id() {
         return `${this._store.id}-${this.record.uniqueId}`;
     }
     get(field) {
-        const methodName = `_get_${field}`;
-        // @ts-expect-error
-        if (this[methodName]) {
-            // @ts-expect-error
-            return this[methodName]();
-        }
-        return undefined;
+        return field === 'mismatches'
+            ? this.mismatches
+            : field === 'qual'
+                ? this.qual
+                : field === 'CIGAR'
+                    ? this.CIGAR
+                    : this.fields[field];
     }
     parent() {
         return undefined;
@@ -105,33 +88,51 @@ export default class CramSlightlyLazyFeature {
     children() {
         return undefined;
     }
-    set() { }
-    pairedFeature() {
-        return false;
-    }
-    _get_clipPos() {
-        const mismatches = this.get('mismatches');
-        if (mismatches.length) {
-            const record = this.get('strand') === -1 ? mismatches.at(-1) : mismatches[0];
-            const { type, cliplen } = record;
-            if (type === 'softclip' || type === 'hardclip') {
-                return cliplen;
-            }
-        }
-        return 0;
-    }
-    toJSON() {
+    get mismatches() {
+        return readFeaturesToMismatches(this.record.readFeatures, this.start, this.qualRaw);
+        // this commented code can try to resolve MD tags, xref https://github.com/galaxyproject/tools-iuc/issues/6523#issuecomment-2462927211 but put on hold
+        // return this.tags.MD && this.seq
+        //   ? mismatches.concat(
+        //       mdToMismatches(
+        //         this.tags.MD,
+        //         parseCigar(this.CIGAR),
+        //         mismatches,
+        //         this.seq,
+        //         this.qualRaw,
+        //       ),
+        //     )
+        //   : mismatches
+    }
+    get fields() {
         return {
-            ...Object.fromEntries(this.tags()
-                .map(t => [t, this.get(t)])
-                .filter(elt => elt[1] !== undefined)),
+            start: this.start,
+            name: this.name,
+            end: this.end,
+            score: this.score,
+            strand: this.strand,
+            template_length: this.template_length,
+            flags: this.flags,
+            tags: this.tags,
+            refName: this.refName,
+            seq: this.seq,
+            type: 'match',
+            pair_orientation: this.pair_orientation,
+            next_ref: this.next_ref,
+            next_pos: this.next_pos,
+            next_segment_position: this.next_segment_position,
             uniqueId: this.id(),
         };
     }
-    _get_mismatches() {
-        const readFeatures = this.record.readFeatures;
-        const qual = this.qualRaw();
-        const start = this.get('start');
-        return readFeaturesToMismatches(readFeatures, start, qual);
+    toJSON() {
+        return {
+            ...this.fields,
+            // lazy
+            CIGAR: this.CIGAR,
+            // lazy
+            qual: this.qual,
+        };
     }
 }
+cacheGetter(CramSlightlyLazyFeature, 'fields');
+cacheGetter(CramSlightlyLazyFeature, 'CIGAR');
+cacheGetter(CramSlightlyLazyFeature, 'mismatches');

package/esm/CramAdapter/util.d.ts

@@ -1,15 +1,6 @@
 import { CramRecord } from '@gmod/cram';
+import { Mismatch } from '../shared/types';
 type ReadFeatures = CramRecord['readFeatures'];
-export interface Mismatch {
-    qual?: number;
-    start: number;
-    length: number;
-    type: string;
-    base: string | undefined;
-    altbase?: string;
-    seq?: string;
-    cliplen?: number;
-}
 export declare function readFeaturesToMismatches(readFeatures: ReadFeatures, start: number, qual?: number[] | null): Mismatch[];
 export declare function readFeaturesToCIGAR(readFeatures: ReadFeatures, alignmentStart: number, readLen: number, refRegion?: {
     seq: string;

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

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

package/esm/LinearAlignmentsDisplay/index.js

@@ -1,7 +1,7 @@
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 // locals
-import configSchemaFactory from './models/configSchema';
-import modelFactory from './models/model';
+import configSchemaFactory from './configSchema';
+import modelFactory from './model';
 import ReactComponent from './components/AlignmentsDisplay';
 export default function LinearAlignmentsDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {

package/esm/LinearAlignmentsDisplay/{models/model.d.ts → model.d.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Instance, IStateTreeNode } from 'mobx-state-tree';
+import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { MenuItem } from '@jbrowse/core/ui';
 import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter';
-import { IFilter } from '../../shared';
+import { FilterBy } from '../shared/types';
 /**
  * #stateModel LinearAlignmentsDisplay
  * extends
@@ -83,6 +83,9 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
 } & {
+    /**
+     * #volatile
+     */
     scrollTop: number;
 } & {
     /**
@@ -151,7 +154,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     /**
      * #action
      */
-    setFilterBy(filter: IFilter): void;
+    setFilterBy(filter: FilterBy): void;
     /**
      * #action
      */

package/esm/LinearAlignmentsDisplay/{models/model.js → model.js}

@@ -9,9 +9,6 @@ import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearAlignmentsDisplayMixin } from './alignmentsModel';
 import { getLowerPanelDisplays } from './util';
 const minDisplayHeight = 20;
-function deepSnap(x1, x2) {
-    return deepEqual(x1 ? getSnapshot(x1) : undefined, x2 ? getSnapshot(x2) : undefined);
-}
 function preCheck(self) {
     const { PileupDisplay, SNPCoverageDisplay } = self;
     return (PileupDisplay ||
@@ -24,8 +21,10 @@ function propagateColorBy(self) {
     if (!preCheck(self) || !PileupDisplay.colorBy) {
         return;
     }
-    if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-        SNPCoverageDisplay.setColorBy(getSnapshot(PileupDisplay.colorBy));
+    if (!deepEqual(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
+        SNPCoverageDisplay.setColorScheme({
+            ...PileupDisplay.colorBy,
+        });
     }
 }
 function propagateFilterBy(self) {
@@ -33,8 +32,10 @@ function propagateFilterBy(self) {
     if (!preCheck(self) || !PileupDisplay.filterBy) {
         return;
     }
-    if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-        SNPCoverageDisplay.setFilterBy(getSnapshot(PileupDisplay.filterBy));
+    if (!deepEqual(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
+        SNPCoverageDisplay.setFilterBy({
+            ...PileupDisplay.filterBy,
+        });
     }
 }
 /**
@@ -47,6 +48,9 @@ function stateModelFactory(pluginManager, configSchema) {
     return types
         .compose('LinearAlignmentsDisplay', BaseDisplay, LinearAlignmentsDisplayMixin(pluginManager, configSchema))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         scrollTop: 0,
     }))
         .actions(self => ({

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -2,8 +2,7 @@ import { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { Feature } from '@jbrowse/core/util';
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
-import { IFilter } from '../shared';
-import { ExtraColorBy } from '../shared/color';
+import { ColorBy, FilterBy } from '../shared/types';
 /**
  * #stateModel SharedLinearPileupDisplayMixin
  * #category display
@@ -124,23 +123,11 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #property
      */
-    colorBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-        type: import("mobx-state-tree").ISimpleType<string>;
-        tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        extra: import("mobx-state-tree").IType<any, any, any>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    colorBy: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
     /**
      * #property
      */
-    filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
-        flagInclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-        flagExclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-        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").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]>;
+    filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<FilterBy, FilterBy, FilterBy>, [undefined]>;
     /**
      * #property
      */
@@ -296,11 +283,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #action
      */
-    setColorScheme(colorScheme: {
-        type: string;
-        tag?: string;
-        extra?: ExtraColorBy;
-    }): void;
+    setColorScheme(colorScheme: ColorBy): void;
     /**
      * #action
      */
@@ -325,7 +308,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #action
      */
-    setFilterBy(filter: IFilter): void;
+    setFilterBy(filter: FilterBy): void;
     /**
      * #action
      */
@@ -343,11 +326,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                 [x: string]: any;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-        } & import("mobx-state-tree" /**
-         * #stateModel SharedLinearPileupDisplayMixin
-         * #category display
-         * extends `BaseLinearDisplay`
-         */).IStateTreeNode<AnyConfigurationSchemaType>);
+        } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     /**

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -1,11 +1,11 @@
 import { lazy } from 'react';
 import { autorun, observable } from 'mobx';
-import { cast, types, addDisposer, getSnapshot } from 'mobx-state-tree';
+import { cast, types, addDisposer, isAlive } from 'mobx-state-tree';
 import copy from 'copy-to-clipboard';
 import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { getEnv, getSession, isSessionModelWithWidgets, getContainingView, SimpleFeature, getContainingTrack, } from '@jbrowse/core/util';
+import { getEnv, getSession, getContainingView, getContainingTrack, isSessionModelWithWidgets, SimpleFeature, } from '@jbrowse/core/util';
 import { BaseLinearDisplay, } from '@jbrowse/plugin-linear-genome-view';
 // icons
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
@@ -13,11 +13,11 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import FilterListIcon from '@mui/icons-material/ClearAll';
 // locals
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
-import { getUniqueTagValues, FilterModel } from '../shared';
 import { createAutorun } from '../util';
-import { ColorByModel } from '../shared/color';
+import { getUniqueTags } from '../shared/getUniqueTags';
+import { defaultFilterFlags } from '../shared/util';
 // lazies
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'));
+const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'));
 const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
 const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
@@ -57,11 +57,11 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         /**
          * #property
          */
-        colorBy: ColorByModel,
+        colorBy: types.frozen(),
         /**
          * #property
          */
-        filterBy: types.optional(FilterModel, {}),
+        filterBy: types.optional(types.frozen(), defaultFilterFlags),
         /**
          * #property
          */
@@ -109,8 +109,10 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
          * #action
          */
         setColorScheme(colorScheme) {
-            self.colorTagMap = observable.map({}); // clear existing mapping
-            self.colorBy = cast(colorScheme);
+            self.colorTagMap = observable.map({});
+            self.colorBy = {
+                ...colorScheme,
+            };
             if (colorScheme.tag) {
                 self.tagsReady = false;
             }
@@ -182,7 +184,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
          * #action
          */
         setFilterBy(filter) {
-            self.filterBy = cast(filter);
+            self.filterBy = {
+                ...filter,
+            };
         },
         /**
          * #action
@@ -296,8 +300,8 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     notReady: superProps.notReady || !self.renderReady(),
                     rpcDriverName,
                     displayModel: self,
-                    colorBy: colorBy ? getSnapshot(colorBy) : undefined,
-                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorBy,
+                    filterBy,
                     filters: self.filters,
                     colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
                     config: self.rendererConfig,
@@ -317,7 +321,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                                     layoutId: getContainingView(self).id,
                                     rendererType: 'PileupRenderer',
                                 }));
-                                if (feature) {
+                                if (isAlive(self) && feature) {
                                     self.selectFeature(new SimpleFeature(feature));
                                 }
                             }
@@ -367,37 +371,49 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     {
                         label: 'Normal',
                         onClick: () => {
-                            self.setColorScheme({ type: 'normal' });
+                            self.setColorScheme({
+                                type: 'normal',
+                            });
                         },
                     },
                     {
                         label: 'Mapping quality',
                         onClick: () => {
-                            self.setColorScheme({ type: 'mappingQuality' });
+                            self.setColorScheme({
+                                type: 'mappingQuality',
+                            });
                         },
                     },
                     {
                         label: 'Strand',
                         onClick: () => {
-                            self.setColorScheme({ type: 'strand' });
+                            self.setColorScheme({
+                                type: 'strand',
+                            });
                         },
                     },
                     {
                         label: 'Per-base quality',
                         onClick: () => {
-                            self.setColorScheme({ type: 'perBaseQuality' });
+                            self.setColorScheme({
+                                type: 'perBaseQuality',
+                            });
                         },
                     },
                     {
                         label: 'Per-base lettering',
                         onClick: () => {
-                            self.setColorScheme({ type: 'perBaseLettering' });
+                            self.setColorScheme({
+                                type: 'perBaseLettering',
+                            });
                         },
                     },
                     {
                         label: 'First-of-pair strand',
                         onClick: () => {
-                            self.setColorScheme({ type: 'stranded' });
+                            self.setColorScheme({
+                                type: 'stranded',
+                            });
                         },
                     },
                     {
@@ -497,14 +513,19 @@ 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({
+                    const vals = await getUniqueTags({
                         self,
                         tag: colorBy.tag,
                         blocks: staticBlocks,
                     });
-                    self.updateColorTagMap(vals);
+                    if (isAlive(self)) {
+                        self.updateColorTagMap(vals);
+                        self.setTagsReady(true);
+                    }
+                }
+                else {
+                    self.setTagsReady(true);
                 }
-                self.setTagsReady(true);
             }, { delay: 1000 });
             // autorun synchronizes featureUnderMouse with featureIdUnderMouse
             // asynchronously. this is needed due to how we do not serialize all
@@ -531,7 +552,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 (feature &&
+                            if (isAlive(self) &&
+                                feature &&
                                 self.featureIdUnderMouse === feature.uniqueId) {
                                 self.setFeatureUnderMouse(new SimpleFeature(feature));
                             }

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

@@ -1,10 +1,11 @@
 import React from 'react';
+interface Tag {
+    type: string;
+    tag: string;
+}
 declare const ColorByTagDialog: ({ model, handleClose, }: {
     model: {
-        setColorScheme: (arg: {
-            type: string;
-            tag: string;
-        }) => void;
+        setColorScheme: (arg: Tag) => void;
     };
     handleClose: () => void;
 }) => React.JSX.Element;

package/esm/LinearPileupDisplay/components/ColorByTagDialog.js

@@ -11,7 +11,9 @@ const ColorByTagDialog = observer(function ({ model, handleClose, }) {
             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" }),
+                }, 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 });

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -5,7 +5,7 @@ import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { getSnapshot } from 'mobx-state-tree';
 import { getContainingTrack, getContainingView, getSession, useDebounce, } from '@jbrowse/core/util';
 // locals
-import { getUniqueTagValues } from '../../shared';
+import { getUniqueTags } from '../../shared/getUniqueTags';
 function clone(c) {
     return JSON.parse(JSON.stringify(c));
 }
@@ -27,7 +27,7 @@ const GroupByTagDialog = observer(function (props) {
                 if (!isInvalid) {
                     setError(undefined);
                     setLoading(true);
-                    const vals = await getUniqueTagValues({
+                    const vals = await getUniqueTags({
                         self: model,
                         tag: debouncedTag,
                         blocks: getContainingView(model)
@@ -54,10 +54,12 @@ const GroupByTagDialog = observer(function (props) {
                     } }), label: "Make a new subtrack for undefined values of tag as well?" }),
             React.createElement(TextField, { value: tag, onChange: event => {
                     setTag(event.target.value);
-                }, placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                    'data-testid': 'group-tag-name-input',
-                }, error: isInvalid, helperText: isInvalid ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "group-tag-name" }),
+                }, 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 ",

package/esm/LinearPileupDisplay/components/SortByTagDialog.js

@@ -12,10 +12,12 @@ const SortByTagDialog = observer(function (props) {
             React.createElement(Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
             React.createElement(TextField, { value: tag, onChange: event => {
                     setTag(event.target.value);
-                }, placeholder: "Enter tag name", inputProps: {
-                    maxLength: 2,
-                    'data-testid': 'sort-tag-name-input',
-                }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', autoComplete: "off", "data-testid": "sort-tag-name" }),
+                }, 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);