@jbrowse/plugin-alignments 2.6.3 → 2.7.1

package/esm/CramAdapter/CramAdapter.js

@@ -5,6 +5,7 @@ import { openLocation } from '@jbrowse/core/util/io';
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { toArray } from 'rxjs/operators';
 import { firstValueFrom } from 'rxjs';
+// locals
 import CramSlightlyLazyFeature from './CramSlightlyLazyFeature';
 export default class CramAdapter extends BaseFeatureDataAdapter {
     constructor() {
@@ -49,7 +50,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
         }
         return this.configureP;
     }
-    async getHeader(opts) {
+    async getHeader(_opts) {
         const { cram } = await this.configure();
         return cram.cram.getHeaderText();
     }

package/esm/CramAdapter/util.js

@@ -8,9 +8,7 @@ export function readFeaturesToMismatches(readFeatures, start, qual) {
     let refPos = 0;
     let sublen = 0;
     let lastPos = start;
-    for (let i = 0; i < readFeatures.length; i++) {
-        const f = readFeatures[i];
-        const { code, pos, data, sub, ref } = f;
+    for (const { refPos: p, code, pos, data, sub, ref } of readFeatures) {
         sublen = refPos - lastPos;
         lastPos = refPos;
         if (sublen && insLen > 0) {
@@ -22,7 +20,7 @@ export function readFeaturesToMismatches(readFeatures, start, qual) {
             };
             insLen = 0;
         }
-        refPos = f.refPos - 1 - start;
+        refPos = p - 1 - start;
         if (code === 'X') {
             // substitution
             mismatches[j++] = {
@@ -130,8 +128,7 @@ export function readFeaturesToCIGAR(readFeatures, alignmentStart, readLen, refRe
     let sublen = 0;
     let insLen = 0;
     if (readFeatures !== undefined) {
-        for (let i = 0; i < readFeatures.length; i++) {
-            const { code, refPos, sub, data } = readFeatures[i];
+        for (const { code, refPos, sub, data } of readFeatures) {
             sublen = refPos - lastPos;
             seq += ref.slice(lastPos - refStart, refPos - refStart);
             lastPos = refPos;

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

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

package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles()({
         zIndex: 2,
     },
 });
-function AlignmentsDisplay({ model }) {
+const AlignmentsDisplay = observer(function AlignmentsDisplay({ model, }) {
     var _a;
     const { PileupDisplay, SNPCoverageDisplay } = model;
     const { classes } = useStyles();
@@ -30,5 +30,5 @@ function AlignmentsDisplay({ model }) {
                 top,
             } },
             React.createElement(PileupDisplay.RenderingComponent, { model: PileupDisplay }))));
-}
-export default observer(AlignmentsDisplay);
+});
+export default AlignmentsDisplay;

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

@@ -55,10 +55,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined; /**
-             * #property
-             * refers to LinearPileupDisplay sub-display model
-             */
+            message: string | undefined;
         } & IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
@@ -69,14 +66,13 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
-    readonly adapterConfig: any; /**
-     * #stateModel LinearAlignmentsDisplay
-     * extends `BaseDisplay`
-     */
+    readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: React.FC<any> | undefined;
+    readonly DisplayMessageComponent: React.FC<any> | undefined; /**
+     * #action
+     */
     trackMenuItems(): MenuItem[];
     readonly viewMenuActions: MenuItem[];
     regionCannotBeRendered(): null;

package/esm/LinearAlignmentsDisplay/models/model.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react';
 import { autorun, when } from 'mobx';
 import { addDisposer, getSnapshot, isAlive, types, } from 'mobx-state-tree';

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -1,17 +1,10 @@
 /// <reference types="react" />
 import { AnyConfigurationModel, AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+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';
-export interface Filter {
-    flagInclude: number;
-    flagExclude: number;
-    readName?: string;
-    tagFilter?: {
-        tag: string;
-        value: string;
-    };
-}
 /**
  * #stateModel SharedLinearPileupDisplayMixin
  * #category display
@@ -61,17 +54,20 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #action
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            /**
+             * #action
+             */
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
         } | undefined): void;
-        setError(error: unknown): void;
+        setError(error: unknown): void; /**
+         * #action
+         */
         reload(): void;
         beforeDestroy(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -139,6 +135,10 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
             value: 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]>;
+    /**
+     * #property
+     */
+    jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -173,11 +173,11 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined; /**
+            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]>; /**
              * #property
              */
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            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>>;
         }, {
@@ -233,9 +233,14 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
-    featureIdUnderMouse: string | undefined;
+    featureIdUnderMouse: string | undefined; /**
+     * #property
+     */
     contextMenuFeature: Feature | undefined;
 } & {
+    /**
+     * #property
+     */
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
@@ -250,10 +255,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
     searchFeatureByID(id: string): [number, number, number, number] | undefined;
 } & {
-    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void; /**
-     * #action
-     * uses copy-to-clipboard and generates notification
-     */
+    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
     selectFeature(feature: Feature): void;
     clearFeatureSelection(): void;
@@ -323,7 +325,11 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #action
      */
-    setFilterBy(filter: Filter): void;
+    setFilterBy(filter: IFilter): void;
+    /**
+     * #action
+     */
+    setJexlFilters(filters: string[]): void;
 } & {
     /**
      * #getter
@@ -350,6 +356,10 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
      * #getter
      */
     renderReady(): boolean;
+    /**
+     * #getter
+     */
+    readonly filters: SerializableFilterChain;
 } & {
     /**
      * #getter
@@ -372,7 +382,16 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     /**
      * #getter
      */
-    readonly DisplayBlurb: (props: import("./components/LinearPileupDisplayBlurb").LinearPileupDisplayBlurbProps) => import("react").JSX.Element | null;
+    readonly DisplayBlurb: ({ model, }: {
+        model: {
+            sortedBy?: {
+                pos: number;
+                refName: number;
+                type: string;
+                tag?: string | undefined;
+            } | undefined;
+        };
+    }) => import("react").JSX.Element | null;
     /**
      * #method
      */
@@ -444,17 +463,20 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #action
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            /**
+             * #action
+             */
             features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
         } | undefined): void;
-        setError(error: unknown): void;
+        setError(error: unknown): void; /**
+         * #action
+         */
         reload(): void;
         beforeDestroy(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -3,6 +3,7 @@ import { autorun, observable } from 'mobx';
 import { cast, types, addDisposer, getSnapshot } 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, } from '@jbrowse/core/util';
 import { BaseLinearDisplay, } from '@jbrowse/plugin-linear-genome-view';
@@ -61,6 +62,10 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
          * #property
          */
         filterBy: types.optional(FilterModel, {}),
+        /**
+         * #property
+         */
+        jexlFilters: types.optional(types.array(types.string), []),
     }))
         .volatile(() => ({
         colorTagMap: observable.map({}),
@@ -175,6 +180,12 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         setFilterBy(filter) {
             self.filterBy = cast(filter);
         },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = cast(filters);
+        },
     }))
         .views(self => ({
         /**
@@ -218,6 +229,12 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
         renderReady() {
             return self.tagsReady;
         },
+        /**
+         * #getter
+         */
+        get filters() {
+            return new SerializableFilterChain({ filters: self.jexlFilters });
+        },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
@@ -281,6 +298,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     displayModel: self,
                     colorBy: colorBy ? getSnapshot(colorBy) : undefined,
                     filterBy: JSON.parse(JSON.stringify(filterBy)),
+                    filters: self.filters,
                     colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
                     config: self.rendererConfig,
                     async onFeatureClick(_, featureId) {
@@ -450,9 +468,9 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { colorBy } = self;
+                const { colorBy, tagsReady } = self;
                 const { staticBlocks } = view;
-                if (colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) {
+                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) && !tagsReady) {
                     const vals = await getUniqueTagValues(self, colorBy, staticBlocks);
                     self.updateColorTagMap(vals);
                 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ObservableMap } from 'mobx';
-declare function ColorByTagDlg(props: {
+declare const ColorByModificationsDialog: ({ model, handleClose, }: {
     model: {
         setColorScheme: (arg: {
             type: string;
@@ -8,9 +8,8 @@ declare function ColorByTagDlg(props: {
         modificationTagMap: ObservableMap<string, string>;
         colorBy?: {
             type: string;
-        };
+        } | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByModificationsDialog;

package/esm/LinearPileupDisplay/components/ColorByModifications.js

@@ -3,8 +3,7 @@ import { observer } from 'mobx-react';
 import { Button, CircularProgress, DialogActions, DialogContent, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
 import ModificationTable from './ModificationsTable';
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByModificationsDialog = observer(function ({ model, handleClose, }) {
     const { colorBy, modificationTagMap } = model;
     const modifications = [...modificationTagMap.entries()];
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Color by modifications" },
@@ -31,5 +30,5 @@ function ColorByTagDlg(props) {
                         handleClose();
                     } }, "Methylation"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(ColorByTagDlg);
+});
+export default ColorByModificationsDialog;

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

@@ -1,9 +1,11 @@
 import React from 'react';
-declare function ColorByTagDlg(props: {
+declare const ColorByTagDialog: ({ model, handleClose, }: {
     model: {
-        setColorScheme: Function;
+        setColorScheme: (arg: {
+            type: string;
+            tag: string;
+        }) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default ColorByTagDialog;

package/esm/LinearPileupDisplay/components/ColorByTag.js

@@ -2,22 +2,19 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-function ColorByTagDlg(props) {
-    const { model, handleClose } = props;
+const ColorByTagDialog = observer(function ({ model, handleClose, }) {
     const [tag, setTag] = useState('');
     const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
     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 });
                         handleClose();
                     }, disabled: !validTag }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel")))));
-}
-export default observer(ColorByTagDlg);
+});
+export default ColorByTagDialog;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface LinearPileupDisplayBlurbProps {
+declare const LinearPileupDisplayBlurb: ({ model, }: {
     model: {
         sortedBy?: {
             pos: number;
@@ -8,6 +8,5 @@ export interface LinearPileupDisplayBlurbProps {
             tag?: string;
         };
     };
-}
-declare const _default: (props: LinearPileupDisplayBlurbProps) => React.JSX.Element | null;
-export default _default;
+}) => React.JSX.Element | null;
+export default LinearPileupDisplayBlurb;

package/esm/LinearPileupDisplay/components/LinearPileupDisplayBlurb.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Typography } from '@mui/material';
-export default observer(function LinearPileupDisplayBlurb(props) {
+const LinearPileupDisplayBlurb = observer(function ({ model, }) {
     var _a;
-    const { model } = props;
     const { sortedBy } = model;
     return sortedBy ? (React.createElement("div", { "data-testid": `blurb-${sortedBy}` },
         React.createElement(Typography, { color: "secondary", variant: "caption" }, sortedBy
             ? `Sorted by ${(_a = sortedBy.tag) !== null && _a !== void 0 ? _a : sortedBy.type} at ${sortedBy.refName}:${sortedBy.pos}`
             : null))) : null;
 });
+export default LinearPileupDisplayBlurb;

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

@@ -1,12 +1,11 @@
 import React from 'react';
-declare function SetFeatureHeightDlg(props: {
+declare const SetFeatureHeightDialog: (props: {
     model: {
         setFeatureHeight: (arg?: number) => void;
         setNoSpacing: (arg?: boolean) => void;
         featureHeightSetting: number;
-        noSpacing?: boolean;
+        noSpacing?: boolean | undefined;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetFeatureHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetFeatureHeightDialog;

package/esm/LinearPileupDisplay/components/SetFeatureHeight.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-function SetFeatureHeightDlg(props) {
+const SetFeatureHeightDialog = observer(function (props) {
     const { model, handleClose } = props;
     const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
     const [height, setHeight] = useState(`${featureHeightSetting}`);
@@ -20,5 +20,5 @@ function SetFeatureHeightDlg(props) {
                         handleClose();
                     } }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(SetFeatureHeightDlg);
+});
+export default SetFeatureHeightDialog;

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

@@ -1,10 +1,9 @@
 import React from 'react';
-declare function SetMaxHeightDlg(props: {
+declare const SetMaxHeightDialog: (props: {
     model: {
         maxHeight?: number;
         setMaxHeight: Function;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetMaxHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetMaxHeightDialog;

package/esm/LinearPileupDisplay/components/SetMaxHeight.js

@@ -8,7 +8,7 @@ const useStyles = makeStyles()({
         width: 500,
     },
 });
-function SetMaxHeightDlg(props) {
+const SetMaxHeightDialog = observer(function (props) {
     const { model, handleClose } = props;
     const { classes } = useStyles();
     const { maxHeight = '' } = model;
@@ -23,5 +23,5 @@ function SetMaxHeightDlg(props) {
                         handleClose();
                     } }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(SetMaxHeightDlg);
+});
+export default SetMaxHeightDialog;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-declare function SortByTagDlg(props: {
+declare const SortByTagDialog: (props: {
     model: {
         setSortedBy: Function;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SortByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SortByTagDialog;

package/esm/LinearPileupDisplay/components/SortByTag.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-function SortByTagDlg(props) {
+const SortByTagDialog = observer(function (props) {
     const { model, handleClose } = props;
     const [tag, setTag] = useState('');
     const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
@@ -20,5 +20,5 @@ function SortByTagDlg(props) {
                         handleClose();
                     } }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(SortByTagDlg);
+});
+export default SortByTagDialog;