Allow changing filters at runtime

GMOD · May 21, 2024 · 4f16921 · 4f16921
1 parent 19be62f
commit 4f16921
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 44 deletions.
diff --git a/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts b/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts
@@ -93,6 +93,10 @@ export function SharedLinearPileupDisplayMixin(
          * #property
          */
         filterBy: types.optional(FilterModel, {}),
+        /**
+         * #property
+         */
+        jexlFilters: types.optional(types.array(types.string), []),
       }),
     )
     .volatile(() => ({
@@ -101,9 +105,6 @@ export function SharedLinearPileupDisplayMixin(
       tagsReady: false,
     }))
     .views(self => ({
-      /**
-       * #getter
-       */
       get autorunReady() {
         const view = getContainingView(self) as LGV
         return (

diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx
@@ -17,14 +17,7 @@ import { BaseBlock } from '@jbrowse/core/util/blockTypes'
 import CompositeMap from '@jbrowse/core/util/compositeMap'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { autorun } from 'mobx'
-import {
-  addDisposer,
-  isAlive,
-  types,
-  Instance,
-  cast,
-  getSnapshot,
-} from 'mobx-state-tree'
+import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
 
 // icons
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'

diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/models/configSchema.ts b/plugins/linear-genome-view/src/BaseLinearDisplay/models/configSchema.ts
@@ -52,11 +52,14 @@ const baseLinearDisplayConfigSchema = ConfigurationSchema(
     },
     /**
      * #slot
+     * config jexlFilters are deferred evaluated so they are prepended with
+     * jexl at runtime rather than being stored with jexl in the config
      */
     jexlFilters: {
-      type: 'string',
-      description: 'default set of jexl filters to apply to a track',
-      defaultValue: '',
+      type: 'stringArray',
+      description:
+        'default set of jexl filters to apply to a track. note: these do not use the jexl prefix because they have a deferred evaluation system',
+      defaultValue: [],
     },
   },
   {

diff --git a/plugins/linear-genome-view/src/LinearBasicDisplay/components/AddFiltersDialog.tsx b/plugins/linear-genome-view/src/LinearBasicDisplay/components/AddFiltersDialog.tsx
@@ -1,18 +1,15 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  Typography,
-  TextField,
-} from '@mui/material'
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()({
-  root: {
-    width: 500,
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
   },
 })
 
@@ -21,25 +18,41 @@ const AddFiltersDialog = observer(function ({
   handleClose,
 }: {
   model: {
-    maxHeight?: number
-    setMaxHeight: (arg?: number) => void
+    jexlFilters?: string[]
+    activeFilters: string[]
+    setJexlFilters: (arg?: string[]) => void
   }
   handleClose: () => void
 }) {
   const { classes } = useStyles()
-  const { jexlFilters = [] } = model
+  const { activeFilters } = model
+  const [data, setData] = useState(activeFilters.join('\n'))
 
   return (
-    <Dialog open onClose={handleClose} title="Set max height">
-      <DialogContent className={classes.root}>
-        {jexlFilters.map(f => (
-          <TextField
-            value={f}
-            onChange={event => {
-              model.setFilters(f)
-            }}
-          ></TextField>
-        ))}
+    <Dialog maxWidth="xl" open onClose={handleClose} title="Add track filters">
+      <DialogContent>
+        <div>
+          Add filters, in jexl format, one per line, starting with the string
+          jexl:. Example: <pre>jexl:get(feature,'name')=='BRCA1'</pre> to only
+          show the feature where the name attrivute is "BRCA1" in view
+        </div>
+
+        <TextField
+          variant="outlined"
+          multiline
+          minRows={5}
+          maxRows={10}
+          className={classes.dialogContent}
+          fullWidth
+          value={data}
+          onChange={event => setData(event.target.value)}
+          InputProps={{
+            readOnly: true,
+            classes: {
+              input: classes.textAreaFont,
+            },
+          }}
+        />
       </DialogContent>
       <DialogActions>
         <Button
@@ -48,6 +61,7 @@ const AddFiltersDialog = observer(function ({
           type="submit"
           autoFocus
           onClick={() => {
+            model.setJexlFilters(data.split('\n'))
             handleClose()
           }}
         >

diff --git a/plugins/linear-genome-view/src/LinearBasicDisplay/model.ts b/plugins/linear-genome-view/src/LinearBasicDisplay/model.ts
@@ -68,8 +68,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
        * #getter
        */
       get activeFilters() {
-        const ret = getConf(self, 'jexlFilters')
-        return self.jexlFilters ?? ret ? [`jexl:${ret}`] : undefined
+        // config jexlFilters are deferred evaluated so they are prepended with
+        // jexl at runtime rather than being stored with jexl in the config
+        return (
+          self.jexlFilters ??
+          getConf(self, 'jexlFilters').map((r: string) => `jexl:${r}`)
+        )
       },
       /**
        * #getter
@@ -136,7 +140,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setJexlFilters(f: string[]) {
+      setJexlFilters(f?: string[]) {
         self.jexlFilters = cast(f)
       },
       /**
@@ -178,11 +182,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           return {
             ...(superProps as Omit<typeof superProps, symbol>),
             config: self.rendererConfig,
-            filters: self.activeFilters
-              ? new SerializableFilterChain({
-                  filters: self.activeFilters,
-                })
-              : undefined,
+            filters: new SerializableFilterChain({
+              filters: self.activeFilters,
+            }),
           }
         },