@jbrowse/plugin-variants 4.0.3 → 4.1.1

package/esm/shared/MultiVariantBaseModel.js

@@ -3,12 +3,13 @@ import { fromNewick } from '@gmod/hclust';
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { set1 } from '@jbrowse/core/ui/colors';
-import { getSession } from '@jbrowse/core/util';
+import { SimpleFeature, getContainingTrack, getSession, } from '@jbrowse/core/util';
 import { stopStopToken } from '@jbrowse/core/util/stopToken';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { cast, isAlive, types } from '@jbrowse/mobx-state-tree';
 import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view';
 import CategoryIcon from '@mui/icons-material/Category';
-import FilterListIcon from '@mui/icons-material/FilterList';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
 import HeightIcon from '@mui/icons-material/Height';
 import SplitscreenIcon from '@mui/icons-material/Splitscreen';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -16,10 +17,10 @@ import { ascending } from '@mui/x-charts-vendor/d3-array';
 import deepEqual from 'fast-deep-equal';
 import { NO_CALL_COLOR, OTHER_ALT_COLOR, REFERENCE_COLOR, UNPHASED_COLOR, getAltColorForDosage, } from "./constants.js";
 import { getSources } from "./getSources.js";
+import { createMAFFilterMenuItem } from "./mafFilterUtils.js";
 import { cluster, hierarchy } from "../d3-hierarchy2/index.js";
-const SetColorDialog = lazy(() => import("./components/SetColorDialog.js"));
-const MAFFilterDialog = lazy(() => import("./components/MAFFilterDialog.js"));
 const AddFiltersDialog = lazy(() => import("./components/AddFiltersDialog.js"));
+const SetColorDialog = lazy(() => import("./components/SetColorDialog.js"));
 const ClusterDialog = lazy(() => import("./components/MultiVariantClusterDialog/ClusterDialog.js"));
 const SetRowHeightDialog = lazy(() => import("./components/SetRowHeightDialog.js"));
 export default function MultiVariantBaseModelF(configSchema) {
@@ -28,14 +29,14 @@ export default function MultiVariantBaseModelF(configSchema) {
         type: types.literal('LinearVariantMatrixDisplay'),
         layout: types.optional(types.frozen(), []),
         configuration: ConfigurationReference(configSchema),
-        minorAlleleFrequencyFilter: types.optional(types.number, 0),
-        showSidebarLabelsSetting: types.optional(types.boolean, true),
-        showTree: types.optional(types.boolean, true),
-        renderingMode: types.optional(types.string, 'alleleCount'),
+        minorAlleleFrequencyFilterSetting: types.maybe(types.number),
+        showSidebarLabelsSetting: types.maybe(types.boolean),
+        showTreeSetting: types.maybe(types.boolean),
+        renderingModeSetting: types.maybe(types.string),
         rowHeightMode: types.optional(types.union(types.literal('auto'), types.number), 'auto'),
         lengthCutoffFilter: types.optional(types.number, Number.MAX_SAFE_INTEGER),
         jexlFilters: types.maybe(types.array(types.string)),
-        referenceDrawingMode: types.optional(types.string, 'skip'),
+        referenceDrawingModeSetting: types.maybe(types.string),
         clusterTree: types.maybe(types.string),
         treeAreaWidth: types.optional(types.number, 80),
         lineZoneHeight: types.optional(types.number, 0),
@@ -45,6 +46,7 @@ export default function MultiVariantBaseModelF(configSchema) {
         simplifiedFeaturesStopToken: undefined,
         featureUnderMouseVolatile: undefined,
         sourcesVolatile: undefined,
+        colorByApplied: false,
         featuresVolatile: undefined,
         hasPhased: false,
         sampleInfo: undefined,
@@ -52,6 +54,11 @@ export default function MultiVariantBaseModelF(configSchema) {
         hoveredTreeNode: undefined,
         treeCanvas: undefined,
         mouseoverCanvas: undefined,
+    }))
+        .views(self => ({
+        get renderingMode() {
+            return (self.renderingModeSetting ?? getConf(self, 'renderingMode'));
+        },
     }))
         .actions(self => ({
         setJexlFilters(f) {
@@ -78,6 +85,9 @@ export default function MultiVariantBaseModelF(configSchema) {
         setFeatures(f) {
             self.featuresVolatile = f;
         },
+        setColorByApplied(value) {
+            self.colorByApplied = value;
+        },
         setLayout(layout, clearTree = true) {
             const orderChanged = clearTree &&
                 self.clusterTree &&
@@ -113,16 +123,21 @@ export default function MultiVariantBaseModelF(configSchema) {
             }
         },
         setMafFilter(arg) {
-            self.minorAlleleFrequencyFilter = arg;
+            self.minorAlleleFrequencyFilterSetting = arg;
         },
         setShowSidebarLabels(arg) {
             self.showSidebarLabelsSetting = arg;
         },
         setShowTree(arg) {
-            self.showTree = arg;
+            self.showTreeSetting = arg;
         },
         setPhasedMode(arg) {
-            self.renderingMode = arg;
+            const currentMode = self.renderingModeSetting ?? getConf(self, 'renderingMode');
+            if (currentMode !== arg) {
+                self.layout = [];
+                self.clusterTree = undefined;
+            }
+            self.renderingModeSetting = arg;
         },
         setAutoHeight(auto) {
             self.rowHeightMode = auto ? 'auto' : 10;
@@ -136,14 +151,31 @@ export default function MultiVariantBaseModelF(configSchema) {
             }
         },
         setReferenceDrawingMode(arg) {
-            self.referenceDrawingMode = arg;
+            self.referenceDrawingModeSetting = arg;
         },
     }))
         .views(self => ({
         get autoHeight() {
             return self.rowHeightMode === 'auto';
         },
-        get activeFilters() {
+        get minorAlleleFrequencyFilter() {
+            return (self.minorAlleleFrequencyFilterSetting ??
+                getConf(self, 'minorAlleleFrequencyFilter'));
+        },
+        get showSidebarLabels() {
+            return (self.showSidebarLabelsSetting ?? getConf(self, 'showSidebarLabels'));
+        },
+        get showTree() {
+            return self.showTreeSetting ?? getConf(self, 'showTree');
+        },
+        get referenceDrawingMode() {
+            if (self.referenceDrawingModeSetting !== undefined) {
+                return self.referenceDrawingModeSetting;
+            }
+            const showRef = getConf(self, 'showReferenceAlleles');
+            return showRef ? 'draw' : 'skip';
+        },
+        activeFilters() {
             return (self.jexlFilters ??
                 getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
         },
@@ -157,12 +189,10 @@ export default function MultiVariantBaseModelF(configSchema) {
                 : undefined;
         },
         get sources() {
-            const sourcesWithLayout = self.layout.length
-                ? self.layout
-                : self.sourcesVolatile;
-            return sourcesWithLayout
+            return self.sourcesVolatile
                 ? getSources({
-                    sources: sourcesWithLayout,
+                    sources: self.sourcesVolatile,
+                    layout: self.layout.length ? self.layout : undefined,
                     renderingMode: self.renderingMode,
                     sampleInfo: self.sampleInfo,
                 })
@@ -184,7 +214,7 @@ export default function MultiVariantBaseModelF(configSchema) {
         return {
             get sourceMap() {
                 return self.sources
-                    ? Object.fromEntries(self.sources.map(source => [source.name, source]))
+                    ? Object.fromEntries(self.sources.map((source) => [source.name, source]))
                     : undefined;
             },
             get availableHeight() {
@@ -231,13 +261,13 @@ export default function MultiVariantBaseModelF(configSchema) {
                             {
                                 label: 'Show sidebar labels',
                                 type: 'checkbox',
-                                checked: self.showSidebarLabelsSetting,
+                                checked: self.showSidebarLabels,
                                 onClick: () => {
-                                    self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
+                                    self.setShowSidebarLabels(!self.showSidebarLabels);
                                 },
                             },
                             {
-                                label: 'Show tree',
+                                label: `Show tree${!self.clusterTree ? ' (run clustering first)' : ''}`,
                                 type: 'checkbox',
                                 checked: self.showTree,
                                 disabled: !self.clusterTree,
@@ -305,9 +335,11 @@ export default function MultiVariantBaseModelF(configSchema) {
                                 },
                             },
                             {
-                                label: `Phased${!self.hasPhased
-                                    ? ' (disabled, no phased variants found)'
-                                    : ''}`,
+                                label: `Phased${self.hasPhased
+                                    ? ''
+                                    : !self.featuresVolatile
+                                        ? ' (checking for phased variants...)'
+                                        : ' (disabled, no phased variants found)'}`,
                                 helpText: 'Phased mode splits each sample into multiple rows representing each haplotype, and the phasing of the variants is used to color the variant in the individual haplotype rows. For example, a diploid sample SAMPLE1 will generate two rows SAMPLE1-HP0 and SAMPLE1 HP1 and a variant 1|0 will draw a box in the top row but not the bottom row',
                                 disabled: !self.hasPhased,
                                 checked: self.renderingMode === 'phased',
@@ -320,20 +352,9 @@ export default function MultiVariantBaseModelF(configSchema) {
                     },
                     {
                         label: 'Filter by',
-                        icon: FilterListIcon,
+                        icon: ClearAllIcon,
                         subMenu: [
-                            {
-                                label: 'Minor allele frequency',
-                                onClick: () => {
-                                    getSession(self).queueDialog(handleClose => [
-                                        MAFFilterDialog,
-                                        {
-                                            model: self,
-                                            handleClose,
-                                        },
-                                    ]);
-                                },
-                            },
+                            createMAFFilterMenuItem(self),
                             {
                                 label: 'Edit filters',
                                 onClick: () => {
@@ -379,7 +400,7 @@ export default function MultiVariantBaseModelF(configSchema) {
     })
         .views(self => ({
         get canDisplayLabels() {
-            return self.rowHeight >= 6 && self.showSidebarLabelsSetting;
+            return self.rowHeight >= 6 && self.showSidebarLabels;
         },
         get totalHeight() {
             return self.rowHeight * (self.sources?.length || 1);
@@ -419,10 +440,36 @@ export default function MultiVariantBaseModelF(configSchema) {
                 scrollTop: self.scrollTop,
                 referenceDrawingMode: self.referenceDrawingMode,
                 filters: new SerializableFilterChain({
-                    filters: self.activeFilters,
+                    filters: self.activeFilters(),
                 }),
             };
         },
+        renderingProps() {
+            return {
+                displayModel: self,
+                async onFeatureClick(_, featureId) {
+                    const session = getSession(self);
+                    const { rpcManager } = session;
+                    try {
+                        const sessionId = getRpcSessionId(self);
+                        const track = getContainingTrack(self);
+                        const { feature } = (await rpcManager.call(sessionId, 'MultiVariantGetFeatureDetails', {
+                            featureId,
+                            sessionId,
+                            trackInstanceId: track.id,
+                            rendererType: self.rendererTypeName,
+                        }));
+                        if (isAlive(self) && feature) {
+                            self.selectFeature(new SimpleFeature(feature));
+                        }
+                    }
+                    catch (e) {
+                        console.error(e);
+                        session.notifyError(`${e}`, e);
+                    }
+                },
+            };
+        },
         legendItems() {
             if (self.renderingMode === 'phased') {
                 let maxAltAlleles = 1;
@@ -478,20 +525,26 @@ export default function MultiVariantBaseModelF(configSchema) {
         if (!snap) {
             return snap;
         }
-        const { layout, minorAlleleFrequencyFilter, showSidebarLabelsSetting, showTree, renderingMode, rowHeightMode, lengthCutoffFilter, jexlFilters, referenceDrawingMode, clusterTree, treeAreaWidth, lineZoneHeight, ...rest } = snap;
+        const { layout, minorAlleleFrequencyFilterSetting, showSidebarLabelsSetting, showTreeSetting, renderingModeSetting, rowHeightMode, lengthCutoffFilter, jexlFilters, referenceDrawingModeSetting, clusterTree, treeAreaWidth, lineZoneHeight, ...rest } = snap;
         return {
             ...rest,
             ...(layout.length ? { layout } : {}),
-            ...(minorAlleleFrequencyFilter ? { minorAlleleFrequencyFilter } : {}),
-            ...(!showSidebarLabelsSetting ? { showSidebarLabelsSetting } : {}),
-            ...(!showTree ? { showTree } : {}),
-            ...(renderingMode !== 'alleleCount' ? { renderingMode } : {}),
+            ...(minorAlleleFrequencyFilterSetting !== undefined
+                ? { minorAlleleFrequencyFilterSetting }
+                : {}),
+            ...(showSidebarLabelsSetting !== undefined
+                ? { showSidebarLabelsSetting }
+                : {}),
+            ...(showTreeSetting !== undefined ? { showTreeSetting } : {}),
+            ...(renderingModeSetting !== undefined ? { renderingModeSetting } : {}),
             ...(rowHeightMode !== 'auto' ? { rowHeightMode } : {}),
             ...(lengthCutoffFilter !== Number.MAX_SAFE_INTEGER
                 ? { lengthCutoffFilter }
                 : {}),
             ...(jexlFilters?.length ? { jexlFilters } : {}),
-            ...(referenceDrawingMode !== 'skip' ? { referenceDrawingMode } : {}),
+            ...(referenceDrawingModeSetting !== undefined
+                ? { referenceDrawingModeSetting }
+                : {}),
             ...(clusterTree !== undefined ? { clusterTree } : {}),
             ...(treeAreaWidth !== 80 ? { treeAreaWidth } : {}),
             ...(lineZoneHeight ? { lineZoneHeight } : {}),

package/esm/shared/SharedVariantConfigSchema.d.ts

@@ -1,4 +1,30 @@
-export default function sharedVariantConfigFactory(): import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+export default function sharedVariantConfigFactory(): import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+    showReferenceAlleles: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showSidebarLabels: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showTree: {
+        type: string;
+        defaultValue: boolean;
+    };
+    renderingMode: {
+        type: string;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        defaultValue: string;
+    };
+    minorAlleleFrequencyFilter: {
+        type: string;
+        defaultValue: number;
+    };
+    colorBy: {
+        type: string;
+        defaultValue: string;
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;

package/esm/shared/SharedVariantConfigSchema.js

@@ -1,7 +1,34 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from '@jbrowse/mobx-state-tree';
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
 export default function sharedVariantConfigFactory() {
-    return ConfigurationSchema('SharedVariantDisplay', {}, {
+    return ConfigurationSchema('SharedVariantDisplay', {
+        showReferenceAlleles: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        showSidebarLabels: {
+            type: 'boolean',
+            defaultValue: true,
+        },
+        showTree: {
+            type: 'boolean',
+            defaultValue: true,
+        },
+        renderingMode: {
+            type: 'stringEnum',
+            model: types.enumeration('RenderingMode', ['alleleCount', 'phased']),
+            defaultValue: 'alleleCount',
+        },
+        minorAlleleFrequencyFilter: {
+            type: 'number',
+            defaultValue: 0,
+        },
+        colorBy: {
+            type: 'string',
+            defaultValue: '',
+        },
+    }, {
         baseConfiguration: baseLinearDisplayConfigSchema,
         explicitlyTyped: true,
     });

package/esm/shared/VariantFeatureCache.d.ts

@@ -0,0 +1,27 @@
+import type { Feature } from '@jbrowse/core/util';
+export declare class VariantFeatureSession {
+    private features;
+    addFeatures(refName: string, features: Map<string, Feature>): void;
+    getDataByID(id: string): Feature | undefined;
+    discardRange(refName: string, start: number, end: number): void;
+}
+export declare class VariantFeatureCacheManager {
+    private sessions;
+    getSession(args: {
+        sessionId: string;
+        trackInstanceId: string;
+    }): VariantFeatureSession;
+    freeResources(args: {
+        sessionId: string;
+        trackInstanceId: string;
+        regions: {
+            refName: string;
+            start: number;
+            end: number;
+        }[];
+    }): void;
+    deleteSession(args: {
+        sessionId: string;
+        trackInstanceId: string;
+    }): void;
+}

package/esm/shared/VariantFeatureCache.js

@@ -0,0 +1,48 @@
+export class VariantFeatureSession {
+    features = new Map();
+    addFeatures(refName, features) {
+        for (const [id, feature] of features) {
+            this.features.set(id, feature);
+        }
+    }
+    getDataByID(id) {
+        return this.features.get(id);
+    }
+    discardRange(refName, start, end) {
+        for (const [id, feature] of this.features) {
+            const fRefName = feature.get('refName');
+            const fStart = feature.get('start');
+            const fEnd = feature.get('end');
+            if (fRefName === refName && fStart < end && fEnd > start) {
+                this.features.delete(id);
+            }
+        }
+    }
+}
+function getLayoutId(args) {
+    return `${args.sessionId}-${args.trackInstanceId}`;
+}
+export class VariantFeatureCacheManager {
+    sessions = {};
+    getSession(args) {
+        const key = getLayoutId(args);
+        if (!this.sessions[key]) {
+            this.sessions[key] = new VariantFeatureSession();
+        }
+        return this.sessions[key];
+    }
+    freeResources(args) {
+        const key = getLayoutId(args);
+        const session = this.sessions[key];
+        if (session) {
+            const region = args.regions[0];
+            if (region) {
+                session.discardRange(region.refName, region.start, region.end);
+            }
+        }
+    }
+    deleteSession(args) {
+        const key = getLayoutId(args);
+        delete this.sessions[key];
+    }
+}

package/esm/shared/VariantRendererType.d.ts

@@ -0,0 +1,23 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import { VariantFeatureCacheManager } from './VariantFeatureCache.ts';
+import type { Feature } from '@jbrowse/core/util';
+export default class VariantRendererType extends FeatureRendererType {
+    featureCacheManager: VariantFeatureCacheManager;
+    getFeatureById(featureId: string, args: {
+        sessionId: string;
+        trackInstanceId: string;
+    }): Feature | undefined;
+    freeResources(args: {
+        sessionId: string;
+        trackInstanceId: string;
+        regions: {
+            refName: string;
+            start: number;
+            end: number;
+        }[];
+    }): void;
+    protected cacheFeatures(args: {
+        sessionId: string;
+        trackInstanceId: string;
+    }, refName: string, features: Map<string, Feature>): void;
+}

package/esm/shared/VariantRendererType.js

@@ -0,0 +1,15 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import { VariantFeatureCacheManager } from "./VariantFeatureCache.js";
+export default class VariantRendererType extends FeatureRendererType {
+    featureCacheManager = new VariantFeatureCacheManager();
+    getFeatureById(featureId, args) {
+        return this.featureCacheManager.getSession(args).getDataByID(featureId);
+    }
+    freeResources(args) {
+        this.featureCacheManager.freeResources(args);
+    }
+    cacheFeatures(args, refName, features) {
+        const session = this.featureCacheManager.getSession(args);
+        session.addFeatures(refName, features);
+    }
+}

package/esm/shared/applyColorPalette.d.ts

@@ -0,0 +1,9 @@
+import type { Source } from './types.ts';
+export declare function applyColorPalette(sources: Source[], attribute: string): Source[] | {
+    color: string | undefined;
+    baseUri?: string;
+    name: string;
+    baseName?: string;
+    group?: string;
+    HP?: number;
+}[];

package/esm/shared/applyColorPalette.js

@@ -0,0 +1,23 @@
+import { set1 } from '@jbrowse/core/ui/colors';
+import { randomColor } from '@jbrowse/core/util/color';
+export function applyColorPalette(sources, attribute) {
+    if (!attribute || sources.length === 0) {
+        return sources;
+    }
+    const hasAttribute = sources.some(source => attribute in source);
+    if (!hasAttribute) {
+        return sources;
+    }
+    const counts = new Map();
+    for (const source of sources) {
+        const key = String(source[attribute] ?? '');
+        counts.set(key, (counts.get(key) || 0) + 1);
+    }
+    const colorMap = Object.fromEntries([...counts.entries()]
+        .sort((a, b) => a[1] - b[1])
+        .map(([key], idx) => [key, set1[idx] || randomColor(key)]));
+    return sources.map(source => ({
+        ...source,
+        color: colorMap[String(source[attribute] ?? '')],
+    }));
+}

package/esm/shared/colorByAutorun.d.ts

@@ -0,0 +1,10 @@
+import type { Source } from './types.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function setupColorByAutorun(self: {
+    configuration: AnyConfigurationModel;
+    sourcesVolatile: Source[] | undefined;
+    layout: Source[];
+    colorByApplied: boolean;
+    setLayout: (layout: Source[], clearTree?: boolean) => void;
+    setColorByApplied: (value: boolean) => void;
+}): void;

package/esm/shared/colorByAutorun.js

@@ -0,0 +1,39 @@
+import { getConf } from '@jbrowse/core/configuration';
+import { addDisposer, isAlive } from '@jbrowse/mobx-state-tree';
+import { autorun } from 'mobx';
+import { applyColorPalette } from "./applyColorPalette.js";
+export function setupColorByAutorun(self) {
+    addDisposer(self, autorun(() => {
+        if (!isAlive(self)) {
+            return;
+        }
+        if (self.colorByApplied) {
+            return;
+        }
+        const sources = self.sourcesVolatile;
+        if (!sources || sources.length === 0) {
+            return;
+        }
+        if (self.layout.length > 0) {
+            self.setColorByApplied(true);
+            return;
+        }
+        const colorBy = getConf(self, 'colorBy');
+        if (!colorBy) {
+            self.setColorByApplied(true);
+            return;
+        }
+        const hasAttribute = sources.some(source => colorBy in source);
+        if (!hasAttribute) {
+            console.warn(`colorBy attribute "${colorBy}" not found in sample metadata. ` +
+                `Available attributes: ${Object.keys(sources[0] || {}).join(', ')}`);
+            self.setColorByApplied(true);
+            return;
+        }
+        const coloredSources = applyColorPalette(sources, colorBy);
+        self.setLayout(coloredSources, false);
+        self.setColorByApplied(true);
+    }, {
+        name: 'ColorByAutorun',
+    }));
+}

package/esm/shared/components/AddFiltersDialog.d.ts

@@ -1,8 +1,8 @@
-export default function AddFiltersDialog({ model, handleClose, }: {
+declare const AddFiltersDialog: ({ model, handleClose, }: {
     model: {
         jexlFilters?: string[];
-        activeFilters: string[];
         setJexlFilters: (arg?: string[]) => void;
     };
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AddFiltersDialog;

package/esm/shared/components/AddFiltersDialog.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -16,27 +17,30 @@ const useStyles = makeStyles()({
         fontSize: '0.8em',
     },
 });
-function validateJexl(data) {
-    try {
-        for (const line of data
-            .split('\n')
-            .map(l => l.trim())
-            .filter(Boolean)) {
-            stringToJexlExpression(line);
-        }
-        return undefined;
-    }
-    catch (e) {
-        console.error(e);
-        return e;
-    }
+function checkJexl(code) {
+    stringToJexlExpression(code);
 }
-export default function AddFiltersDialog({ model, handleClose, }) {
+const AddFiltersDialog = observer(function AddFiltersDialog({ model, handleClose, }) {
     const { classes } = useStyles();
-    const { activeFilters } = model;
-    const [data, setData] = useState(activeFilters.join('\n'));
-    const error = useMemo(() => validateJexl(data), [data]);
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+    const { jexlFilters } = model;
+    const [data, setData] = useState((jexlFilters ?? []).join('\n'));
+    const [error, setError] = useState();
+    useEffect(() => {
+        try {
+            for (const line of data
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => !!line)) {
+                checkJexl(line);
+            }
+            setError(undefined);
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    }, [data]);
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:startsWith(get(feature,'name'),'PREFIX')" }), " - show only feature where the string 'PREFIX' is the prefix of feature name. endsWith also works"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:includes(get(feature,'name'),'PREFIX')" }), " - show only feature where the string 'PREFIX' is the prefix of feature name"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] }), _jsxs("p", { children: ["Please see", ' ', _jsx("a", { href: "https://jbrowse.org/jb2/docs/config_guides/jexl/", children: "Jexl" }), ' ', "documentation for more information"] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
                             setData(event.target.value);
                         }, slotProps: {
                             input: {
@@ -47,5 +51,8 @@ export default function AddFiltersDialog({ model, handleClose, }) {
                         } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
                             model.setJexlFilters(data.split('\n'));
                             handleClose();
-                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }));
-}
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+export default AddFiltersDialog;