@jbrowse/plugin-alignments 2.16.0 → 2.17.0

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);

package/esm/LinearPileupDisplay/model.d.ts

@@ -1,5 +1,6 @@
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import { ModificationType, ModificationTypeWithColor, SortedBy } from '../shared/types';
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -48,9 +49,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 message: React.ReactNode;
                 filled?: boolean;
                 status?: string;
-                reactElement? /**
-                 * #property
-                 */: React.ReactElement;
+                reactElement?: React.ReactElement;
             };
         }) => import("react").JSX.Element | undefined;
         renderProps: any;
@@ -61,11 +60,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: React.
-            /**
-             * #action
-             */
-            ReactElement;
+            reactElement: React.ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -109,33 +104,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     fadeLikelihood: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    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>>;
-    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]>;
+    colorBy: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
+    filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("../shared/types").FilterBy, import("../shared/types").FilterBy, import("../shared/types").FilterBy>, [undefined]>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearPileupDisplay">;
     configuration: AnyConfigurationSchemaType;
     showSoftClipping: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     mismatchAlpha: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
-    sortedBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-        type: import("mobx-state-tree").ISimpleType<string>;
-        pos: import("mobx-state-tree").ISimpleType<number>;
-        tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        refName: import("mobx-state-tree").ISimpleType<string>;
-        assemblyName: import("mobx-state-tree").ISimpleType<string>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    sortedBy: import("mobx-state-tree").IType<SortedBy | undefined, SortedBy | undefined, SortedBy | undefined>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -158,10 +135,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll? /**
          * #property
-         */)._NotCustomized>>;
-        onHorizontalScroll?: () => void;
+         */: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
@@ -181,9 +158,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree" /**
-         * #action
-         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -276,17 +251,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setMaxHeight(n?: number): void;
     setFeatureHeight(n?: number): void;
     setNoSpacing(flag?: boolean): void;
-    setColorScheme(colorScheme: {
-        type: string;
-        tag?: string;
-        extra?: import("../shared/color").ExtraColorBy;
-    }): void;
+    setColorScheme(colorScheme: import("../shared/types").ColorBy): void;
     updateColorTagMap(uniqueTag: string[]): void;
     setFeatureUnderMouse(feat?: import("@jbrowse/core/util").Feature): void;
     selectFeature(feature: import("@jbrowse/core/util").Feature): void;
     copyFeatureToClipboard(feature: import("@jbrowse/core/util").Feature): void;
     setConfig(conf: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
-    setFilterBy(filter: import("../shared").IFilter): void;
+    setFilterBy(filter: import("../shared/types").FilterBy): void;
     setJexlFilters(filters: string[]): void;
 } & {
     readonly rendererConfig: {
@@ -346,9 +317,21 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     afterAttach(): void;
 } & {
+    /**
+     * #volatile
+     */
     sortReady: boolean;
+    /**
+     * #volatile
+     */
     currSortBpPerPx: number;
-    modificationTagMap: import("mobx").ObservableMap<string, string>;
+    /**
+     * #volatile
+     */
+    visibleModifications: import("mobx").ObservableMap<string, ModificationTypeWithColor>;
+    /**
+     * #volatile
+     */
     modificationsReady: boolean;
 } & {
     /**
@@ -358,7 +341,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #action
      */
-    updateModificationColorMap(uniqueModifications: string[]): void;
+    updateVisibleModifications(uniqueModifications: ModificationType[]): void;
     /**
      * #action
      */
@@ -395,6 +378,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      */
     reload(): void;
 } & {
+    /**
+     * #getter
+     */
+    readonly visibleModificationTypes: string[];
     /**
      * #getter
      */
@@ -455,8 +442,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly label: "Pair orientation";
             readonly onClick: () => void;
         }, {
-            readonly label: "Modifications or methylation";
-            readonly onClick: () => void;
+            readonly label: "Modifications";
+            readonly type: "subMenu";
+            readonly subMenu: ({
+                label: string;
+                onClick: () => void;
+                type?: undefined;
+            } | {
+                type: string;
+                label?: undefined;
+                onClick?: undefined;
+            })[];
         }, {
             readonly label: "Insert size";
             readonly onClick: () => void;

package/esm/LinearPileupDisplay/model.js

@@ -1,22 +1,21 @@
 import { lazy } from 'react';
-import { types } from 'mobx-state-tree';
+import { observable } from 'mobx';
+import { types, isAlive } from 'mobx-state-tree';
 import { ConfigurationReference, readConfObject, getConf, } from '@jbrowse/core/configuration';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { getEnv, getSession, getContainingView } from '@jbrowse/core/util';
-import { getUniqueModificationValues } from '../shared';
-import { createAutorun, randomColor, modificationColors } from '../util';
 // icons
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import SortIcon from '@mui/icons-material/Sort';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
 import WorkspacesIcon from '@mui/icons-material/Workspaces';
 import ColorLensIcon from '@mui/icons-material/ColorLens';
 // locals
 import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
-import { observable } from 'mobx';
+import { createAutorun, getColorForModification, modificationData, } from '../util';
+import { getUniqueModifications } from '../shared/getUniqueModifications';
 // lazies
 const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
 const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
-const ModificationsDialog = lazy(() => import('./components/ColorByModificationsDialog'));
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -45,18 +44,24 @@ function stateModelFactory(configSchema) {
         /**
          * #property
          */
-        sortedBy: types.maybe(types.model({
-            type: types.string,
-            pos: types.number,
-            tag: types.maybe(types.string),
-            refName: types.string,
-            assemblyName: types.string,
-        })),
+        sortedBy: types.frozen(),
     }))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         sortReady: false,
+        /**
+         * #volatile
+         */
         currSortBpPerPx: 0,
-        modificationTagMap: observable.map({}),
+        /**
+         * #volatile
+         */
+        visibleModifications: observable.map({}),
+        /**
+         * #volatile
+         */
         modificationsReady: false,
     }))
         .actions(self => ({
@@ -69,10 +74,13 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        updateModificationColorMap(uniqueModifications) {
+        updateVisibleModifications(uniqueModifications) {
             uniqueModifications.forEach(value => {
-                if (!self.modificationTagMap.has(value)) {
-                    self.modificationTagMap.set(value, modificationColors[value] || randomColor());
+                if (!self.visibleModifications.has(value.type)) {
+                    self.visibleModifications.set(value.type, {
+                        ...value,
+                        color: getColorForModification(value.type),
+                    });
                 }
             });
         },
@@ -152,6 +160,12 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
+        /**
+         * #getter
+         */
+        get visibleModificationTypes() {
+            return [...self.visibleModifications.keys()];
+        },
         /**
          * #getter
          */
@@ -196,13 +210,13 @@ function stateModelFactory(configSchema) {
              * #method
              */
             renderPropsPre() {
-                const { sortedBy, showSoftClipping, modificationTagMap } = self;
+                const { sortedBy, showSoftClipping, visibleModifications } = self;
                 const superProps = superRenderPropsPre();
                 return {
                     ...superProps,
                     showSoftClip: showSoftClipping,
                     sortedBy,
-                    modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
+                    visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
                 };
             },
             /**
@@ -224,7 +238,7 @@ function stateModelFactory(configSchema) {
                     ...superTrackMenuItems(),
                     {
                         label: 'Sort by...',
-                        icon: SortIcon,
+                        icon: SwapVertIcon,
                         disabled: self.showSoftClipping,
                         subMenu: [
                             ...['Start location', 'Read strand', 'Base pair'].map(option => ({
@@ -260,25 +274,88 @@ function stateModelFactory(configSchema) {
                             {
                                 label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setColorScheme({
+                                        type: 'pairOrientation',
+                                    });
                                 },
                             },
                             {
-                                label: 'Modifications or methylation',
-                                onClick: () => {
-                                    getSession(self).queueDialog(doneCallback => [
-                                        ModificationsDialog,
+                                label: 'Modifications',
+                                type: 'subMenu',
+                                subMenu: self.modificationsReady
+                                    ? [
                                         {
-                                            model: self,
-                                            handleClose: doneCallback,
+                                            label: 'All modifications',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'modifications',
+                                                });
+                                            },
                                         },
-                                    ]);
-                                },
+                                        ...self.visibleModificationTypes.map(key => {
+                                            var _a;
+                                            return ({
+                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key}`,
+                                                onClick: () => {
+                                                    self.setColorScheme({
+                                                        type: 'modifications',
+                                                        modifications: {
+                                                            isolatedModification: key,
+                                                        },
+                                                    });
+                                                },
+                                            });
+                                        }),
+                                        { type: 'divider' },
+                                        {
+                                            label: 'All modifications (<50% prob colored blue)',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'modifications',
+                                                    modifications: {
+                                                        twoColor: true,
+                                                    },
+                                                });
+                                            },
+                                        },
+                                        ...self.visibleModificationTypes.map(key => {
+                                            var _a;
+                                            return ({
+                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key} (<50% prob colored blue)`,
+                                                onClick: () => {
+                                                    self.setColorScheme({
+                                                        type: 'modifications',
+                                                        modifications: {
+                                                            isolatedModification: key,
+                                                            twoColor: true,
+                                                        },
+                                                    });
+                                                },
+                                            });
+                                        }),
+                                        { type: 'divider' },
+                                        {
+                                            label: 'All reference CpGs',
+                                            onClick: () => {
+                                                self.setColorScheme({
+                                                    type: 'methylation',
+                                                });
+                                            },
+                                        },
+                                    ]
+                                    : [
+                                        {
+                                            label: 'Loading modifications...',
+                                            onClick: () => { },
+                                        },
+                                    ],
                             },
                             {
                                 label: 'Insert size',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.setColorScheme({
+                                        type: 'insertSize',
+                                    });
                                 },
                             },
                             ...superColorSchemeSubMenuItems(),
@@ -360,25 +437,25 @@ function stateModelFactory(configSchema) {
                         ...self.renderPropsPre(),
                     });
                 }
-                self.setCurrSortBpPerPx(bpPerPx);
-                self.setSortReady(true);
+                if (isAlive(self)) {
+                    self.setCurrSortBpPerPx(bpPerPx);
+                    self.setSortReady(true);
+                }
             }, { delay: 1000 });
             createAutorun(self, async () => {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { parentTrack, colorBy } = self;
                 const { staticBlocks } = getContainingView(self);
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = getConf(parentTrack, ['adapter']);
-                    const vals = await getUniqueModificationValues({
-                        self,
-                        adapterConfig: adapter,
-                        blocks: staticBlocks,
-                    });
-                    self.updateModificationColorMap(vals);
+                const vals = await getUniqueModifications({
+                    self,
+                    adapterConfig: getConf(self.parentTrack, 'adapter'),
+                    blocks: staticBlocks,
+                });
+                if (isAlive(self)) {
+                    self.updateVisibleModifications(vals);
+                    self.setModificationsReady(true);
                 }
-                self.setModificationsReady(true);
             });
         },
     }));

package/esm/LinearReadArcsDisplay/components/ReactComponent.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { observer } from 'mobx-react';
 import { getContainingView } from '@jbrowse/core/util';
-import BaseDisplayComponent from '../../shared/BaseDisplayComponent';
+import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
 const Arcs = observer(function ({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);

package/esm/LinearReadArcsDisplay/model.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { IFilter } from '../shared';
+import { ColorBy, FilterBy } from '../shared/types';
 import { ChainData } from '../shared/fetchChains';
 /**
  * #stateModel LinearReadArcsDisplay
@@ -24,22 +24,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearReadArcsDisplay">;
     configuration: AnyConfigurationSchemaType;
-    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]>;
     lineWidth: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     jitter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    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>;
     drawInter: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     drawLongRange: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
@@ -66,9 +54,17 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
-        blockState?: Record<string, any>;
+        blockState? /**
+         * #property
+         */: Record<string, any>;
     }>;
-    readonly DisplayBlurb: React.FC<{
+    readonly DisplayBlurb: React.
+    /**
+     * #property
+     */
+    FC /**
+     * #property
+     */<{
         model: {
             id: string;
             type: string;
@@ -79,7 +75,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             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]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
+            type: import("mobx-state-tree" /**
+             * #action
+             */).ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -91,7 +89,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly parentTrack: any;
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly DisplayMessageComponent: undefined | React.FC /**
+     * #action
+     * thin, bold, extrabold, etc
+     */<any>;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
@@ -165,7 +166,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #action
      */
-    setColorScheme(s: {
+    setColorScheme(colorBy: {
         type: string;
     }): void;
     /**
@@ -183,7 +184,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #action
      */
-    setFilterBy(filter: IFilter): void;
+    setFilterBy(filter: FilterBy): void;
     /**
      * #action
      * thin, bold, extrabold, etc

package/esm/LinearReadArcsDisplay/model.js

@@ -1,5 +1,5 @@
 import { lazy } from 'react';
-import { cast, types } from 'mobx-state-tree';
+import { types } from 'mobx-state-tree';
 import { ConfigurationReference, getConf, } from '@jbrowse/core/configuration';
 import { getSession } from '@jbrowse/core/util';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
@@ -7,10 +7,9 @@ import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-g
 // icons
 import PaletteIcon from '@mui/icons-material/Palette';
 import FilterListIcon from '@mui/icons-material/ClearAll';
-// locals
-import { FilterModel } from '../shared';
-// async
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'));
+import { defaultFilterFlags } from '../shared/util';
+// lazies
+const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 /**
  * #stateModel LinearReadArcsDisplay
  * the arc display is a non-block-based track, so draws to a single canvas and
@@ -34,7 +33,7 @@ function stateModelFactory(configSchema) {
         /**
          * #property
          */
-        filterBy: types.optional(FilterModel, {}),
+        filterBy: types.optional(types.frozen(), defaultFilterFlags),
         /**
          * #property
          */
@@ -46,11 +45,7 @@ function stateModelFactory(configSchema) {
         /**
          * #property
          */
-        colorBy: types.maybe(types.model({
-            type: types.string,
-            tag: types.maybe(types.string),
-            extra: types.frozen(),
-        })),
+        colorBy: types.frozen(),
         /**
          * #property
          */
@@ -103,8 +98,10 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        setColorScheme(s) {
-            self.colorBy = cast(s);
+        setColorScheme(colorBy) {
+            self.colorBy = {
+                ...colorBy,
+            };
         },
         /**
          * #action
@@ -128,7 +125,9 @@ function stateModelFactory(configSchema) {
          * #action
          */
         setFilterBy(filter) {
-            self.filterBy = cast(filter);
+            self.filterBy = {
+                ...filter,
+            };
         },
         /**
          * #action
@@ -304,7 +303,7 @@ function stateModelFactory(configSchema) {
          * #method
          */
         async renderSvg(opts) {
-            const { renderSvg } = await import('../shared/renderSvg');
+            const { renderSvg } = await import('../shared/renderSvgUtil');
             const { drawFeats } = await import('./drawFeats');
             return renderSvg(self, opts, drawFeats);
         },