@jbrowse/plugin-alignments 2.16.0 → 2.17.0

package/dist/CramAdapter/CramSlightlyLazyFeature.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("./util");
+const util_2 = require("../shared/util");
 class CramSlightlyLazyFeature {
     // uses parameter properties to automatically create fields on the class
     // https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties
@@ -8,98 +9,80 @@ 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 (0, util_1.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;
@@ -107,34 +90,52 @@ 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 (0, util_1.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 (0, util_1.readFeaturesToMismatches)(readFeatures, start, qual);
+    toJSON() {
+        return {
+            ...this.fields,
+            // lazy
+            CIGAR: this.CIGAR,
+            // lazy
+            qual: this.qual,
+        };
     }
 }
 exports.default = CramSlightlyLazyFeature;
+(0, util_2.cacheGetter)(CramSlightlyLazyFeature, 'fields');
+(0, util_2.cacheGetter)(CramSlightlyLazyFeature, 'CIGAR');
+(0, util_2.cacheGetter)(CramSlightlyLazyFeature, 'mismatches');

package/dist/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/dist/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/dist/LinearAlignmentsDisplay/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LinearAlignmentsDisplayF;
 const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
 // locals
-const configSchema_1 = __importDefault(require("./models/configSchema"));
-const model_1 = __importDefault(require("./models/model"));
+const configSchema_1 = __importDefault(require("./configSchema"));
+const model_1 = __importDefault(require("./model"));
 const AlignmentsDisplay_1 = __importDefault(require("./components/AlignmentsDisplay"));
 function LinearAlignmentsDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {

package/dist/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/dist/LinearAlignmentsDisplay/{models/model.js → model.js}

@@ -14,9 +14,6 @@ const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const alignmentsModel_1 = require("./alignmentsModel");
 const util_1 = require("./util");
 const minDisplayHeight = 20;
-function deepSnap(x1, x2) {
-    return (0, fast_deep_equal_1.default)(x1 ? (0, mobx_state_tree_1.getSnapshot)(x1) : undefined, x2 ? (0, mobx_state_tree_1.getSnapshot)(x2) : undefined);
-}
 function preCheck(self) {
     const { PileupDisplay, SNPCoverageDisplay } = self;
     return (PileupDisplay ||
@@ -29,8 +26,10 @@ function propagateColorBy(self) {
     if (!preCheck(self) || !PileupDisplay.colorBy) {
         return;
     }
-    if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-        SNPCoverageDisplay.setColorBy((0, mobx_state_tree_1.getSnapshot)(PileupDisplay.colorBy));
+    if (!(0, fast_deep_equal_1.default)(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
+        SNPCoverageDisplay.setColorScheme({
+            ...PileupDisplay.colorBy,
+        });
     }
 }
 function propagateFilterBy(self) {
@@ -38,8 +37,10 @@ function propagateFilterBy(self) {
     if (!preCheck(self) || !PileupDisplay.filterBy) {
         return;
     }
-    if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-        SNPCoverageDisplay.setFilterBy((0, mobx_state_tree_1.getSnapshot)(PileupDisplay.filterBy));
+    if (!(0, fast_deep_equal_1.default)(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
+        SNPCoverageDisplay.setFilterBy({
+            ...PileupDisplay.filterBy,
+        });
     }
 }
 /**
@@ -52,6 +53,9 @@ function stateModelFactory(pluginManager, configSchema) {
     return mobx_state_tree_1.types
         .compose('LinearAlignmentsDisplay', models_1.BaseDisplay, (0, alignmentsModel_1.LinearAlignmentsDisplayMixin)(pluginManager, configSchema))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         scrollTop: 0,
     }))
         .actions(self => ({

package/dist/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/dist/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -42,11 +42,11 @@ const MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
 const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
 // locals
 const LinearPileupDisplayBlurb_1 = __importDefault(require("./components/LinearPileupDisplayBlurb"));
-const shared_1 = require("../shared");
 const util_2 = require("../util");
-const color_1 = require("../shared/color");
+const getUniqueTags_1 = require("../shared/getUniqueTags");
+const util_3 = require("../shared/util");
 // lazies
-const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTagDialog'))));
+const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/components/FilterByTagDialog'))));
 const ColorByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByTagDialog'))));
 const SetFeatureHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetFeatureHeightDialog'))));
 const SetMaxHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetMaxHeightDialog'))));
@@ -86,11 +86,11 @@ function SharedLinearPileupDisplayMixin(configSchema) {
         /**
          * #property
          */
-        colorBy: color_1.ColorByModel,
+        colorBy: mobx_state_tree_1.types.frozen(),
         /**
          * #property
          */
-        filterBy: mobx_state_tree_1.types.optional(shared_1.FilterModel, {}),
+        filterBy: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), util_3.defaultFilterFlags),
         /**
          * #property
          */
@@ -138,8 +138,10 @@ function SharedLinearPileupDisplayMixin(configSchema) {
          * #action
          */
         setColorScheme(colorScheme) {
-            self.colorTagMap = mobx_1.observable.map({}); // clear existing mapping
-            self.colorBy = (0, mobx_state_tree_1.cast)(colorScheme);
+            self.colorTagMap = mobx_1.observable.map({});
+            self.colorBy = {
+                ...colorScheme,
+            };
             if (colorScheme.tag) {
                 self.tagsReady = false;
             }
@@ -211,7 +213,9 @@ function SharedLinearPileupDisplayMixin(configSchema) {
          * #action
          */
         setFilterBy(filter) {
-            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+            self.filterBy = {
+                ...filter,
+            };
         },
         /**
          * #action
@@ -325,8 +329,8 @@ function SharedLinearPileupDisplayMixin(configSchema) {
                     notReady: superProps.notReady || !self.renderReady(),
                     rpcDriverName,
                     displayModel: self,
-                    colorBy: colorBy ? (0, mobx_state_tree_1.getSnapshot)(colorBy) : undefined,
-                    filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    colorBy,
+                    filterBy,
                     filters: self.filters,
                     colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
                     config: self.rendererConfig,
@@ -346,7 +350,7 @@ function SharedLinearPileupDisplayMixin(configSchema) {
                                     layoutId: (0, util_1.getContainingView)(self).id,
                                     rendererType: 'PileupRenderer',
                                 }));
-                                if (feature) {
+                                if ((0, mobx_state_tree_1.isAlive)(self) && feature) {
                                     self.selectFeature(new util_1.SimpleFeature(feature));
                                 }
                             }
@@ -396,37 +400,49 @@ 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',
+                            });
                         },
                     },
                     {
@@ -526,14 +542,19 @@ function SharedLinearPileupDisplayMixin(configSchema) {
                 const { colorBy, tagsReady } = self;
                 const { staticBlocks } = view;
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
-                    const vals = await (0, shared_1.getUniqueTagValues)({
+                    const vals = await (0, getUniqueTags_1.getUniqueTags)({
                         self,
                         tag: colorBy.tag,
                         blocks: staticBlocks,
                     });
-                    self.updateColorTagMap(vals);
+                    if ((0, mobx_state_tree_1.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
@@ -560,7 +581,8 @@ 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 ((0, mobx_state_tree_1.isAlive)(self) &&
+                                feature &&
                                 self.featureIdUnderMouse === feature.uniqueId) {
                                 self.setFeatureUnderMouse(new util_1.SimpleFeature(feature));
                             }

package/dist/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/dist/LinearPileupDisplay/components/ColorByTagDialog.js

@@ -36,7 +36,9 @@ const ColorByTagDialog = (0, mobx_react_1.observer)(function ({ model, handleClo
             react_1.default.createElement(material_1.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_1.default.createElement(material_1.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_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
                         model.setColorScheme({ type: 'tag', tag });

package/dist/LinearPileupDisplay/components/GroupByDialog.js

@@ -30,7 +30,7 @@ const ui_1 = require("@jbrowse/core/ui");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 // locals
-const shared_1 = require("../../shared");
+const getUniqueTags_1 = require("../../shared/getUniqueTags");
 function clone(c) {
     return JSON.parse(JSON.stringify(c));
 }
@@ -52,7 +52,7 @@ const GroupByTagDialog = (0, mobx_react_1.observer)(function (props) {
                 if (!isInvalid) {
                     setError(undefined);
                     setLoading(true);
-                    const vals = await (0, shared_1.getUniqueTagValues)({
+                    const vals = await (0, getUniqueTags_1.getUniqueTags)({
                         self: model,
                         tag: debouncedTag,
                         blocks: (0, util_1.getContainingView)(model)
@@ -79,10 +79,12 @@ const GroupByTagDialog = (0, mobx_react_1.observer)(function (props) {
                     } }), label: "Make a new subtrack for undefined values of tag as well?" }),
             react_1.default.createElement(material_1.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_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(ui_1.LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (react_1.default.createElement("div", null,
                 react_1.default.createElement("div", null,
                     "Found unique ",

package/dist/LinearPileupDisplay/components/SortByTagDialog.js

@@ -37,10 +37,12 @@ const SortByTagDialog = (0, mobx_react_1.observer)(function (props) {
             react_1.default.createElement(material_1.Typography, { color: "textSecondary" }, "Examples: HP for haplotype, RG for read group, etc."),
             react_1.default.createElement(material_1.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_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                         model.setSortedBy('tag', tag);