@jbrowse/plugin-alignments 2.16.1 → 2.17.0

package/dist/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,9 +60,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         setLoading(abortController: AbortController): void;
         setMessage(messageText: string): void;
         setRendered(props: {
-            reactElement: React.ReactElement /**
-             * #action
-             */;
+            reactElement: React.ReactElement;
             features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;
@@ -107,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;
@@ -156,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<{
@@ -272,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: {
@@ -342,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;
 } & {
     /**
@@ -354,7 +341,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #action
      */
-    updateModificationColorMap(uniqueModifications: string[]): void;
+    updateVisibleModifications(uniqueModifications: ModificationType[]): void;
     /**
      * #action
      */
@@ -391,6 +378,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      */
     reload(): void;
 } & {
+    /**
+     * #getter
+     */
+    readonly visibleModificationTypes: string[];
     /**
      * #getter
      */
@@ -451,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/dist/LinearPileupDisplay/model.js

@@ -27,24 +27,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const mobx_1 = require("mobx");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const util_1 = require("@jbrowse/core/util");
-const shared_1 = require("../shared");
-const util_2 = require("../util");
 // icons
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
-const Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
+const SwapVert_1 = __importDefault(require("@mui/icons-material/SwapVert"));
 const Workspaces_1 = __importDefault(require("@mui/icons-material/Workspaces"));
 const ColorLens_1 = __importDefault(require("@mui/icons-material/ColorLens"));
 // locals
 const SharedLinearPileupDisplayMixin_1 = require("./SharedLinearPileupDisplayMixin");
-const mobx_1 = require("mobx");
+const util_2 = require("../util");
+const getUniqueModifications_1 = require("../shared/getUniqueModifications");
 // lazies
 const SortByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SortByTagDialog'))));
 const GroupByDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/GroupByDialog'))));
-const ModificationsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ColorByModificationsDialog'))));
 /**
  * #stateModel LinearPileupDisplay
  * #category display
@@ -73,18 +72,24 @@ function stateModelFactory(configSchema) {
         /**
          * #property
          */
-        sortedBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
-            type: mobx_state_tree_1.types.string,
-            pos: mobx_state_tree_1.types.number,
-            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-            refName: mobx_state_tree_1.types.string,
-            assemblyName: mobx_state_tree_1.types.string,
-        })),
+        sortedBy: mobx_state_tree_1.types.frozen(),
     }))
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         sortReady: false,
+        /**
+         * #volatile
+         */
         currSortBpPerPx: 0,
-        modificationTagMap: mobx_1.observable.map({}),
+        /**
+         * #volatile
+         */
+        visibleModifications: mobx_1.observable.map({}),
+        /**
+         * #volatile
+         */
         modificationsReady: false,
     }))
         .actions(self => ({
@@ -97,10 +102,13 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        updateModificationColorMap(uniqueModifications) {
+        updateVisibleModifications(uniqueModifications) {
             uniqueModifications.forEach(value => {
-                if (!self.modificationTagMap.has(value)) {
-                    self.modificationTagMap.set(value, util_2.modificationColors[value] || (0, util_2.randomColor)(value));
+                if (!self.visibleModifications.has(value.type)) {
+                    self.visibleModifications.set(value.type, {
+                        ...value,
+                        color: (0, util_2.getColorForModification)(value.type),
+                    });
                 }
             });
         },
@@ -180,6 +188,12 @@ function stateModelFactory(configSchema) {
         };
     })
         .views(self => ({
+        /**
+         * #getter
+         */
+        get visibleModificationTypes() {
+            return [...self.visibleModifications.keys()];
+        },
         /**
          * #getter
          */
@@ -224,13 +238,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()),
                 };
             },
             /**
@@ -252,7 +266,7 @@ function stateModelFactory(configSchema) {
                     ...superTrackMenuItems(),
                     {
                         label: 'Sort by...',
-                        icon: Sort_1.default,
+                        icon: SwapVert_1.default,
                         disabled: self.showSoftClipping,
                         subMenu: [
                             ...['Start location', 'Read strand', 'Base pair'].map(option => ({
@@ -288,25 +302,88 @@ function stateModelFactory(configSchema) {
                             {
                                 label: 'Pair orientation',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'pairOrientation' });
+                                    self.setColorScheme({
+                                        type: 'pairOrientation',
+                                    });
                                 },
                             },
                             {
-                                label: 'Modifications or methylation',
-                                onClick: () => {
-                                    (0, util_1.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 = util_2.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 = util_2.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(),
@@ -388,25 +465,25 @@ function stateModelFactory(configSchema) {
                         ...self.renderPropsPre(),
                     });
                 }
-                self.setCurrSortBpPerPx(bpPerPx);
-                self.setSortReady(true);
+                if ((0, mobx_state_tree_1.isAlive)(self)) {
+                    self.setCurrSortBpPerPx(bpPerPx);
+                    self.setSortReady(true);
+                }
             }, { delay: 1000 });
             (0, util_2.createAutorun)(self, async () => {
                 if (!self.autorunReady) {
                     return;
                 }
-                const { parentTrack, colorBy } = self;
                 const { staticBlocks } = (0, util_1.getContainingView)(self);
-                if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const adapter = (0, configuration_1.getConf)(parentTrack, ['adapter']);
-                    const vals = await (0, shared_1.getUniqueModificationValues)({
-                        self,
-                        adapterConfig: adapter,
-                        blocks: staticBlocks,
-                    });
-                    self.updateModificationColorMap(vals);
+                const vals = await (0, getUniqueModifications_1.getUniqueModifications)({
+                    self,
+                    adapterConfig: (0, configuration_1.getConf)(self.parentTrack, 'adapter'),
+                    blocks: staticBlocks,
+                });
+                if ((0, mobx_state_tree_1.isAlive)(self)) {
+                    self.updateVisibleModifications(vals);
+                    self.setModificationsReady(true);
                 }
-                self.setModificationsReady(true);
             });
         },
     }));

package/dist/LinearReadArcsDisplay/components/ReactComponent.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-const BaseDisplayComponent_1 = __importDefault(require("../../shared/BaseDisplayComponent"));
+const BaseDisplayComponent_1 = __importDefault(require("../../shared/components/BaseDisplayComponent"));
 const Arcs = (0, mobx_react_1.observer)(function ({ model, }) {
     const view = (0, util_1.getContainingView)(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);

package/dist/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/dist/LinearReadArcsDisplay/model.js

@@ -35,10 +35,9 @@ const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view"
 // icons
 const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
 const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
-// locals
-const shared_1 = require("../shared");
-// async
-const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTagDialog'))));
+const util_2 = require("../shared/util");
+// lazies
+const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/components/FilterByTagDialog'))));
 /**
  * #stateModel LinearReadArcsDisplay
  * the arc display is a non-block-based track, so draws to a single canvas and
@@ -62,7 +61,7 @@ function stateModelFactory(configSchema) {
         /**
          * #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_2.defaultFilterFlags),
         /**
          * #property
          */
@@ -74,11 +73,7 @@ function stateModelFactory(configSchema) {
         /**
          * #property
          */
-        colorBy: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.model({
-            type: mobx_state_tree_1.types.string,
-            tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
-            extra: mobx_state_tree_1.types.frozen(),
-        })),
+        colorBy: mobx_state_tree_1.types.frozen(),
         /**
          * #property
          */
@@ -131,8 +126,10 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        setColorScheme(s) {
-            self.colorBy = (0, mobx_state_tree_1.cast)(s);
+        setColorScheme(colorBy) {
+            self.colorBy = {
+                ...colorBy,
+            };
         },
         /**
          * #action
@@ -156,7 +153,9 @@ function stateModelFactory(configSchema) {
          * #action
          */
         setFilterBy(filter) {
-            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+            self.filterBy = {
+                ...filter,
+            };
         },
         /**
          * #action
@@ -332,7 +331,7 @@ function stateModelFactory(configSchema) {
          * #method
          */
         async renderSvg(opts) {
-            const { renderSvg } = await Promise.resolve().then(() => __importStar(require('../shared/renderSvg')));
+            const { renderSvg } = await Promise.resolve().then(() => __importStar(require('../shared/renderSvgUtil')));
             const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
             return renderSvg(self, opts, drawFeats);
         },

package/dist/LinearReadCloudDisplay/components/ReactComponent.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-const BaseDisplayComponent_1 = __importDefault(require("../../shared/BaseDisplayComponent"));
+const BaseDisplayComponent_1 = __importDefault(require("../../shared/components/BaseDisplayComponent"));
 const Cloud = (0, mobx_react_1.observer)(function ({ model, }) {
     const view = (0, util_1.getContainingView)(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);