Add filtering to LinearApolloDisplay

packages/apollo-cli/README.md

@@ -16,7 +16,7 @@ $ npm install -g @apollo-annotation/cli
 $ apollo COMMAND
 running command...
 $ apollo (--version)
-@apollo-annotation/cli/0.1.20 linux-x64 node-v20.17.0
+@apollo-annotation/cli/0.1.20 darwin-x64 node-v20.10.0
 $ apollo --help [COMMAND]
 USAGE
   $ apollo COMMAND

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/base.ts

@@ -17,11 +17,12 @@ import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 // import type LinearGenomeViewPlugin from '@jbrowse/plugin-linear-genome-view'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { autorun } from 'mobx'
-import { addDisposer, getRoot, types } from 'mobx-state-tree'
+import { addDisposer, cast, getRoot, types, getSnapshot } from 'mobx-state-tree'
 
 import { ApolloInternetAccountModel } from '../../ApolloInternetAccount/model'
 import { ApolloSessionModel } from '../../session'
 import { ApolloRootModel } from '../../types'
+import { FilterFeatures } from '../../components/FilterFeatures'
 
 const minDisplayHeight = 20
 
@@ -42,6 +43,7 @@ export function baseModelFactory(
           (n) => n >= minDisplayHeight,
         ),
       ),
+      filteredFeatureTypes: types.optional(types.array(types.string), ['gene']),
     })
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self
@@ -162,6 +164,9 @@ export function baseModelFactory(
         self.graphical = true
         self.table = true
       },
+      updateFilteredFeatureTypes(types: string[]) {
+        self.filteredFeatureTypes = cast(types)
+      },
     }))
     .views((self) => {
       const { trackMenuItems: superTrackMenuItems } = self
@@ -200,6 +205,28 @@ export function baseModelFactory(
                 },
               ],
             },
+            {
+              label: 'Filter features by type',
+              onClick: () => {
+                const session = self.session as unknown as ApolloSessionModel
+                ;(self.session as unknown as AbstractSessionModel).queueDialog(
+                  (doneCallback) => [
+                    FilterFeatures,
+                    {
+                      session,
+                      handleClose: () => {
+                        doneCallback()
+                      },
+                      // eslint-disable-next-line unicorn/consistent-destructuring
+                      featureTypes: getSnapshot(self.filteredFeatureTypes),
+                      onUpdate: (types: string[]) => {
+                        self.updateFilteredFeatureTypes(types)
+                      },
+                    },
+                  ],
+                )
+              },
+            },
           ]
         },
       }

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -226,7 +226,9 @@ export function layoutsModelFactory(
                       feature.min,
                       feature.max,
                     ) &&
-                    !self.seenFeatures.has(feature._id)
+                    !self.seenFeatures.has(feature._id) &&
+                    self.filteredFeatureTypes &&
+                    self.filteredFeatureTypes.includes(feature.type)
                   ) {
                     self.addSeenFeature(feature)
                   }

packages/jbrowse-plugin-apollo/src/components/FilterFeatures.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import { ApolloSessionModel } from '../session'
+import { Dialog } from './Dialog'
+import {
+  Box,
+  Button,
+  Chip,
+  DialogContent,
+  DialogContentText,
+  Grid,
+  TextField,
+} from '@mui/material'
+import { isOntologyClass } from '../OntologyManager'
+import { OntologyTermAutocomplete } from './OntologyTermAutocomplete'
+import { observer } from 'mobx-react'
+
+interface FilterFeaturesProps {
+  onUpdate: (types: string[]) => void
+  featureTypes: string[]
+  handleClose: () => void
+  session: ApolloSessionModel
+}
+
+export const FilterFeatures = observer(function FilterFeatures({
+  featureTypes,
+  handleClose,
+  onUpdate,
+  session,
+}: FilterFeaturesProps) {
+  const [type, setType] = useState('')
+  const [selectedFeatureTypes, setSelectedFeatureTypes] =
+    useState<string[]>(featureTypes)
+  const handleChange = (value: string): void => {
+    setType(value)
+  }
+  const handleAddFeatureType = () => {
+    if (type) {
+      if (selectedFeatureTypes.includes(type)) {
+        return
+      }
+      onUpdate([...selectedFeatureTypes, type])
+      setSelectedFeatureTypes([...selectedFeatureTypes, type])
+    }
+  }
+  const handleFeatureTypeDelete = (value: string) => {
+    const newTypes = selectedFeatureTypes.filter((type) => type !== value)
+    onUpdate(newTypes)
+    setSelectedFeatureTypes(newTypes)
+  }
+
+  return (
+    <Dialog
+      open
+      maxWidth={false}
+      data-testid="filter-features-dialog"
+      title="Filter features by type"
+      handleClose={handleClose}
+    >
+      <DialogContent>
+        <DialogContentText>
+          Select the feature types you want to display in the apollo track
+        </DialogContentText>
+        <Grid container spacing={2}>
+          <Grid item xs={7}>
+            <OntologyTermAutocomplete
+              session={session}
+              ontologyName="Sequence Ontology"
+              style={{ width: '100%' }}
+              value={type}
+              filterTerms={isOntologyClass}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Feature type"
+                  variant="outlined"
+                  fullWidth
+                />
+              )}
+              onChange={(oldValue, newValue) => {
+                if (newValue) {
+                  handleChange(newValue)
+                }
+              }}
+            />
+          </Grid>
+          <Grid item xs={5}>
+            <Button
+              variant="contained"
+              onClick={handleAddFeatureType}
+              disabled={!type}
+              style={{ marginTop: 9 }}
+              size="medium"
+            >
+              Add
+            </Button>
+          </Grid>
+        </Grid>
+        {selectedFeatureTypes.length > 0 && (
+          <div style={{ width: 300 }}>
+            <hr />
+            <DialogContentText>Selected feature types:</DialogContentText>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {selectedFeatureTypes.map((value) => (
+                <Chip
+                  key={value}
+                  label={value}
+                  onDelete={() => {
+                    handleFeatureTypeDelete(value)
+                  }}
+                />
+              ))}
+            </Box>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+})