@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/shared/MultiVariantBaseModel.js

@@ -1,22 +1,27 @@
 import { lazy } from 'react';
+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 { stopStopToken } from '@jbrowse/core/util/stopToken';
+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 HeightIcon from '@mui/icons-material/Height';
 import SplitscreenIcon from '@mui/icons-material/Splitscreen';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import { ascending } from '@mui/x-charts-vendor/d3-array';
 import deepEqual from 'fast-deep-equal';
-import { cast, types } from 'mobx-state-tree';
-import { getSources } from './getSources';
-const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
-const MAFFilterDialog = lazy(() => import('./components/MAFFilterDialog'));
-const AddFiltersDialog = lazy(() => import('./components/AddFiltersDialog'));
-const ClusterDialog = lazy(() => import('./components/MultiVariantClusterDialog/ClusterDialog'));
-const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'));
+import { NO_CALL_COLOR, OTHER_ALT_COLOR, REFERENCE_COLOR, UNPHASED_COLOR, getAltColorForDosage, } from "./constants.js";
+import { getSources } from "./getSources.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 ClusterDialog = lazy(() => import("./components/MultiVariantClusterDialog/ClusterDialog.js"));
+const SetRowHeightDialog = lazy(() => import("./components/SetRowHeightDialog.js"));
 export default function MultiVariantBaseModelF(configSchema) {
     return types
         .compose('LinearVariantMatrixDisplay', linearBareDisplayStateModelFactory(configSchema), types.model({
@@ -24,13 +29,16 @@ export default function MultiVariantBaseModelF(configSchema) {
         layout: types.optional(types.frozen(), []),
         configuration: ConfigurationReference(configSchema),
         minorAlleleFrequencyFilter: types.optional(types.number, 0),
-        showSidebarLabelsSetting: true,
+        showSidebarLabelsSetting: types.optional(types.boolean, true),
+        showTree: types.optional(types.boolean, true),
         renderingMode: types.optional(types.string, 'alleleCount'),
-        rowHeightSetting: types.optional(types.number, 8),
-        autoHeight: true,
-        lengthCutoffFilter: Number.MAX_SAFE_INTEGER,
+        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: 'skip',
+        referenceDrawingMode: types.optional(types.string, 'skip'),
+        clusterTree: types.maybe(types.string),
+        treeAreaWidth: types.optional(types.number, 80),
+        lineZoneHeight: types.optional(types.number, 0),
     }))
         .volatile(() => ({
         sourcesLoadingStopToken: undefined,
@@ -41,37 +49,63 @@ export default function MultiVariantBaseModelF(configSchema) {
         hasPhased: false,
         sampleInfo: undefined,
         hoveredGenotype: undefined,
+        hoveredTreeNode: undefined,
+        treeCanvas: undefined,
+        mouseoverCanvas: undefined,
     }))
         .actions(self => ({
         setJexlFilters(f) {
             self.jexlFilters = cast(f);
         },
         setRowHeight(arg) {
-            self.rowHeightSetting = arg;
+            self.rowHeightMode = arg;
         },
         setHoveredGenotype(arg) {
             self.hoveredGenotype = arg;
         },
+        setHoveredTreeNode(node) {
+            self.hoveredTreeNode = node;
+        },
+        setTreeCanvasRef(ref) {
+            self.treeCanvas = ref || undefined;
+        },
+        setMouseoverCanvasRef(ref) {
+            self.mouseoverCanvas = ref || undefined;
+        },
+        setTreeAreaWidth(width) {
+            self.treeAreaWidth = width;
+        },
         setFeatures(f) {
             self.featuresVolatile = f;
         },
-        setLayout(layout) {
+        setLayout(layout, clearTree = true) {
+            const orderChanged = clearTree &&
+                self.clusterTree &&
+                self.layout.length === layout.length &&
+                self.layout.some((source, idx) => source.name !== layout[idx]?.name);
             self.layout = layout;
+            if (orderChanged) {
+                self.clusterTree = undefined;
+            }
         },
         clearLayout() {
             self.layout = [];
+            self.clusterTree = undefined;
         },
-        setSourcesLoading(str) {
+        setClusterTree(tree) {
+            self.clusterTree = tree;
+        },
+        setSourcesLoading(token) {
             if (self.sourcesLoadingStopToken) {
                 stopStopToken(self.sourcesLoadingStopToken);
             }
-            self.sourcesLoadingStopToken = str;
+            self.sourcesLoadingStopToken = token;
         },
-        setSimplifiedFeaturesLoading(str) {
+        setSimplifiedFeaturesLoading(token) {
             if (self.simplifiedFeaturesStopToken) {
                 stopStopToken(self.simplifiedFeaturesStopToken);
             }
-            self.simplifiedFeaturesStopToken = str;
+            self.simplifiedFeaturesStopToken = token;
         },
         setSources(sources) {
             if (!deepEqual(sources, self.sourcesVolatile)) {
@@ -84,11 +118,14 @@ export default function MultiVariantBaseModelF(configSchema) {
         setShowSidebarLabels(arg) {
             self.showSidebarLabelsSetting = arg;
         },
+        setShowTree(arg) {
+            self.showTree = arg;
+        },
         setPhasedMode(arg) {
             self.renderingMode = arg;
         },
-        setAutoHeight(arg) {
-            self.autoHeight = arg;
+        setAutoHeight(auto) {
+            self.rowHeightMode = auto ? 'auto' : 10;
         },
         setHasPhased(arg) {
             self.hasPhased = arg;
@@ -103,12 +140,12 @@ export default function MultiVariantBaseModelF(configSchema) {
         },
     }))
         .views(self => ({
-        get activeFilters() {
-            var _a;
-            return ((_a = self.jexlFilters) !== null && _a !== void 0 ? _a : getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        get autoHeight() {
+            return self.rowHeightMode === 'auto';
         },
-        get preSources() {
-            return self.layout.length ? self.layout : self.sourcesVolatile;
+        get activeFilters() {
+            return (self.jexlFilters ??
+                getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
         },
         get sourcesWithoutLayout() {
             return self.sourcesVolatile
@@ -131,39 +168,101 @@ export default function MultiVariantBaseModelF(configSchema) {
                 })
                 : undefined;
         },
+        get root() {
+            const newick = self.clusterTree;
+            if (!newick) {
+                return undefined;
+            }
+            const tree = fromNewick(newick);
+            return hierarchy(tree, (d) => d.children)
+                .sum((d) => (d.children ? 0 : 1))
+                .sort((a, b) => ascending(a.data.height || 1, b.data.height || 1));
+        },
     }))
         .views(self => {
-        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        const { renderProps: superRenderProps } = self;
         return {
             get sourceMap() {
                 return self.sources
                     ? Object.fromEntries(self.sources.map(source => [source.name, source]))
                     : undefined;
             },
+            get availableHeight() {
+                return self.height - self.lineZoneHeight;
+            },
+            get nrow() {
+                return self.sources?.length || 1;
+            },
             get rowHeight() {
-                const { sources, autoHeight, rowHeightSetting, height } = self;
-                return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
+                return self.rowHeightMode === 'auto'
+                    ? this.availableHeight / this.nrow
+                    : self.rowHeightMode;
+            },
+            get hierarchy() {
+                const r = self.root;
+                if (!r || !self.sources?.length) {
+                    return undefined;
+                }
+                const clust = cluster();
+                clust.size([this.rowHeight * this.nrow, self.treeAreaWidth]);
+                clust.separation(() => 1);
+                clust(r);
+                return r;
             },
             adapterProps() {
-                const superProps = superRenderProps();
                 return {
-                    ...superProps,
-                    rpcDriverName: self.rpcDriverName,
-                    displayModel: self,
+                    ...superRenderProps(),
                     config: self.rendererConfig,
                 };
             },
+        };
+    })
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Show sidebar labels',
+                        label: 'Show...',
                         icon: VisibilityIcon,
-                        type: 'checkbox',
-                        checked: self.showSidebarLabelsSetting,
-                        onClick: () => {
-                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
-                        },
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Show sidebar labels',
+                                type: 'checkbox',
+                                checked: self.showSidebarLabelsSetting,
+                                onClick: () => {
+                                    self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
+                                },
+                            },
+                            {
+                                label: 'Show tree',
+                                type: 'checkbox',
+                                checked: self.showTree,
+                                disabled: !self.clusterTree,
+                                onClick: () => {
+                                    self.setShowTree(!self.showTree);
+                                },
+                            },
+                            {
+                                label: 'Show reference alleles',
+                                helpText: 'When this setting is off, the background is colored solid grey and only ALT alleles are colored on top of it. This makes it easier to see potentially overlapping structural variants',
+                                type: 'checkbox',
+                                checked: self.referenceDrawingMode !== 'skip',
+                                onClick: () => {
+                                    self.setReferenceDrawingMode(self.referenceDrawingMode === 'skip' ? 'draw' : 'skip');
+                                },
+                            },
+                            {
+                                label: 'Show legend',
+                                type: 'checkbox',
+                                checked: self.showLegend,
+                                onClick: () => {
+                                    self.setShowLegend(!self.showLegend);
+                                },
+                            },
+                        ],
                     },
                     {
                         label: 'Row height',
@@ -197,7 +296,8 @@ export default function MultiVariantBaseModelF(configSchema) {
                         icon: SplitscreenIcon,
                         subMenu: [
                             {
-                                label: 'Allele count',
+                                label: 'Allele count (dosage)',
+                                helpText: 'Draws the color darker the more times this allele exists, so homozygous variants are darker than heterozygous. Works on polyploid also',
                                 type: 'radio',
                                 checked: self.renderingMode === 'alleleCount',
                                 onClick: () => {
@@ -208,6 +308,7 @@ export default function MultiVariantBaseModelF(configSchema) {
                                 label: `Phased${!self.hasPhased
                                     ? ' (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',
                                 type: 'radio',
@@ -217,28 +318,6 @@ export default function MultiVariantBaseModelF(configSchema) {
                             },
                         ],
                     },
-                    {
-                        label: 'Reference mode',
-                        type: 'subMenu',
-                        subMenu: [
-                            {
-                                label: 'Fill background grey, skip reference allele mouseovers (helps with large overlapping SVs)',
-                                type: 'radio',
-                                checked: self.referenceDrawingMode === 'skip',
-                                onClick: () => {
-                                    self.setReferenceDrawingMode('skip');
-                                },
-                            },
-                            {
-                                label: "Don't fill background grey, only draw actual reference alleles as grey",
-                                type: 'radio',
-                                checked: self.referenceDrawingMode === 'draw',
-                                onClick: () => {
-                                    self.setReferenceDrawingMode('draw');
-                                },
-                            },
-                        ],
-                    },
                     {
                         label: 'Filter by',
                         icon: FilterListIcon,
@@ -300,15 +379,29 @@ export default function MultiVariantBaseModelF(configSchema) {
     })
         .views(self => ({
         get canDisplayLabels() {
-            return self.rowHeight >= 8 && self.showSidebarLabelsSetting;
+            return self.rowHeight >= 6 && self.showSidebarLabelsSetting;
         },
         get totalHeight() {
-            var _a;
-            return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
+            return self.rowHeight * (self.sources?.length || 1);
         },
         get featuresReady() {
             return !!self.featuresVolatile;
         },
+        getPortableSettings() {
+            return {
+                minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                showSidebarLabelsSetting: self.showSidebarLabelsSetting,
+                showTree: self.showTree,
+                renderingMode: self.renderingMode,
+                lengthCutoffFilter: self.lengthCutoffFilter,
+                jexlFilters: self.jexlFilters,
+                referenceDrawingMode: self.referenceDrawingMode,
+                clusterTree: self.clusterTree,
+                treeAreaWidth: self.treeAreaWidth,
+                layout: self.layout,
+                height: self.height,
+            };
+        },
     }))
         .views(self => ({
         renderProps() {
@@ -330,5 +423,78 @@ export default function MultiVariantBaseModelF(configSchema) {
                 }),
             };
         },
-    }));
+        legendItems() {
+            if (self.renderingMode === 'phased') {
+                let maxAltAlleles = 1;
+                const features = self.featuresVolatile;
+                if (features) {
+                    for (const feature of features) {
+                        const alt = feature.get('ALT');
+                        if (alt && alt.length > maxAltAlleles) {
+                            maxAltAlleles = alt.length;
+                        }
+                    }
+                }
+                const items = [
+                    { color: REFERENCE_COLOR, label: 'Reference' },
+                    { color: set1[0], label: 'Alt allele 1' },
+                ];
+                if (maxAltAlleles >= 2) {
+                    items.push({ color: set1[1], label: 'Alt allele 2' });
+                }
+                if (maxAltAlleles >= 3) {
+                    items.push({ color: set1[2], label: 'Alt allele 3' });
+                }
+                items.push({ color: UNPHASED_COLOR, label: 'Unphased' });
+                return items;
+            }
+            return [
+                { color: REFERENCE_COLOR, label: 'Homozygous reference' },
+                { color: getAltColorForDosage(0.5), label: 'Heterozygous alt' },
+                { color: getAltColorForDosage(1), label: 'Homozygous alt' },
+                { color: OTHER_ALT_COLOR, label: 'Other alt allele' },
+                { color: NO_CALL_COLOR, label: 'No call' },
+            ];
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            ;
+            (async () => {
+                try {
+                    const { setupMultiVariantAutoruns } = await import("./setupMultiVariantAutoruns.js");
+                    setupMultiVariantAutoruns(self);
+                }
+                catch (e) {
+                    if (isAlive(self)) {
+                        console.error(e);
+                        getSession(self).notifyError(`${e}`, e);
+                    }
+                }
+            })();
+        },
+    }))
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { layout, minorAlleleFrequencyFilter, showSidebarLabelsSetting, showTree, renderingMode, rowHeightMode, lengthCutoffFilter, jexlFilters, referenceDrawingMode, clusterTree, treeAreaWidth, lineZoneHeight, ...rest } = snap;
+        return {
+            ...rest,
+            ...(layout.length ? { layout } : {}),
+            ...(minorAlleleFrequencyFilter ? { minorAlleleFrequencyFilter } : {}),
+            ...(!showSidebarLabelsSetting ? { showSidebarLabelsSetting } : {}),
+            ...(!showTree ? { showTree } : {}),
+            ...(renderingMode !== 'alleleCount' ? { renderingMode } : {}),
+            ...(rowHeightMode !== 'auto' ? { rowHeightMode } : {}),
+            ...(lengthCutoffFilter !== Number.MAX_SAFE_INTEGER
+                ? { lengthCutoffFilter }
+                : {}),
+            ...(jexlFilters?.length ? { jexlFilters } : {}),
+            ...(referenceDrawingMode !== 'skip' ? { referenceDrawingMode } : {}),
+            ...(clusterTree !== undefined ? { clusterTree } : {}),
+            ...(treeAreaWidth !== 80 ? { treeAreaWidth } : {}),
+            ...(lineZoneHeight ? { lineZoneHeight } : {}),
+        };
+    });
 }

package/esm/shared/SharedVariantConfigSchema.d.ts

@@ -1,42 +1,4 @@
-export default function sharedVariantConfigFactory(): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    autoscale: {
-        type: string;
-        defaultValue: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
-        description: string;
-    };
-    minimalTicks: {
-        type: string;
-        defaultValue: boolean;
-        description: string;
-    };
-    minScore: {
-        type: string;
-        defaultValue: number;
-        description: string;
-    };
-    maxScore: {
-        type: string;
-        description: string;
-        defaultValue: number;
-    };
-    numStdDev: {
-        type: string;
-        description: string;
-        defaultValue: number;
-    };
-    scaleType: {
-        type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
-        description: string;
-        defaultValue: string;
-    };
-    inverted: {
-        type: string;
-        description: string;
-        defaultValue: boolean;
-    };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+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<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -63,4 +25,4 @@ export default function sharedVariantConfigFactory(): import("@jbrowse/core/conf
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/shared/SharedVariantConfigSchema.js

@@ -1,52 +1,7 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
-import { types } from 'mobx-state-tree';
 export default function sharedVariantConfigFactory() {
-    return ConfigurationSchema('SharedVariantDisplay', {
-        autoscale: {
-            type: 'stringEnum',
-            defaultValue: 'local',
-            model: types.enumeration('Autoscale type', [
-                'global',
-                'local',
-                'globalsd',
-                'localsd',
-                'zscore',
-            ]),
-            description: 'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
-        },
-        minimalTicks: {
-            type: 'boolean',
-            defaultValue: false,
-            description: 'use the minimal amount of ticks',
-        },
-        minScore: {
-            type: 'number',
-            defaultValue: Number.MIN_VALUE,
-            description: 'minimum value for the y-scale',
-        },
-        maxScore: {
-            type: 'number',
-            description: 'maximum value for the y-scale',
-            defaultValue: Number.MAX_VALUE,
-        },
-        numStdDev: {
-            type: 'number',
-            description: 'number of standard deviations to use for autoscale types globalsd or localsd',
-            defaultValue: 3,
-        },
-        scaleType: {
-            type: 'stringEnum',
-            model: types.enumeration('Scale type', ['linear', 'log']),
-            description: 'The type of scale to use',
-            defaultValue: 'linear',
-        },
-        inverted: {
-            type: 'boolean',
-            description: 'draw upside down',
-            defaultValue: false,
-        },
-    }, {
+    return ConfigurationSchema('SharedVariantDisplay', {}, {
         baseConfiguration: baseLinearDisplayConfigSchema,
         explicitlyTyped: true,
     });

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

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

package/esm/shared/components/AddFiltersDialog.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useMemo, 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';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -17,30 +16,26 @@ const useStyles = makeStyles()({
         fontSize: '0.8em',
     },
 });
-function checkJexl(code) {
-    stringToJexlExpression(code);
+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;
+    }
 }
-const AddFiltersDialog = observer(function ({ model, handleClose, }) {
+export default function AddFiltersDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const { activeFilters } = model;
     const [data, setData] = useState(activeFilters.join('\n'));
-    const [error, setError] = useState();
-    useEffect(() => {
-        try {
-            data
-                .split('\n')
-                .map(line => line.trim())
-                .filter(line => !!line)
-                .map(line => {
-                checkJexl(line.trim());
-            });
-            setError(undefined);
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }, [data]);
+    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 => {
                             setData(event.target.value);
                         }, slotProps: {
@@ -52,8 +47,5 @@ const AddFiltersDialog = observer(function ({ 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" })] })] }));
-});
-export default AddFiltersDialog;
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }));
+}

package/esm/shared/components/{ui/SetColorDialog.d.ts → BaseSetColorDialog.d.ts}

@@ -4,10 +4,11 @@ interface SetColorDialogProps {
             name: string;
             [key: string]: unknown;
         }[];
+        clusterTree?: string;
         setLayout: (s: {
             name: string;
             [key: string]: unknown;
-        }[]) => void;
+        }[], clearTree?: boolean) => void;
         clearLayout: () => void;
     };
     handleClose: () => void;