From 4f16921ec83b5d61d04012042488084df873633e Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Mon, 20 May 2024 20:07:02 -0400
Subject: [PATCH] Allow changing filters at runtime

---
 .../SharedLinearPileupDisplayMixin.ts         |  7 ++-
 .../models/BaseLinearDisplayModel.tsx         |  9 +--
 .../BaseLinearDisplay/models/configSchema.ts  |  9 ++-
 .../components/AddFiltersDialog.tsx           | 58 ++++++++++++-------
 .../src/LinearBasicDisplay/model.ts           | 18 +++---
 5 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts b/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts
index ac43fc8799..1fe0b669a8 100644
--- 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
index 3c122dd16a..a0ac0411b3 100644
--- 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
index 4b0b1a535e..70cbe6ce2d 100644
--- 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
index b47b27eeb0..df4d61a337 100644
--- 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
index e4d7c4e3e5..7ffdbc5db3 100644
--- 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,
+            }),
           }
         },