@jbrowse/plugin-linear-genome-view 2.1.0 → 2.1.3

package/src/LinearGenomeView/components/SequenceSearchDialog.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  FormGroup,
+  FormControlLabel,
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { getSnapshot } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { getSession } from '@jbrowse/core/util'
+
+// icons
+import CloseIcon from '@mui/icons-material/Close'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+
+const useStyles = makeStyles()(theme => ({
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+  dialogContent: {
+    width: '40em',
+  },
+}))
+
+function SequenceDialog({
+  model,
+  handleClose,
+}: {
+  model: LinearGenomeViewModel
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const [value, setValue] = useState('')
+  const [searchForward, setSearchForward] = useState(true)
+  const [searchReverse, setSearchReverse] = useState(true)
+  const [caseInsensitive, setCaseInsensitive] = useState(true)
+
+  let error
+
+  try {
+    new RegExp(value)
+  } catch (e) {
+    error = e
+  }
+
+  return (
+    <Dialog maxWidth="xl" open onClose={handleClose}>
+      <DialogTitle>
+        Sequence search
+        {handleClose ? (
+          <IconButton
+            className={classes.closeButton}
+            onClick={() => handleClose()}
+            size="large"
+          >
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <Divider />
+
+      <DialogContent className={classes.dialogContent}>
+        <Typography>
+          Supply a sequence to search for. A track will be created with the
+          resulting matches once submitted. You can also supply regex style
+          expressions e.g. AACT(C|T).
+        </Typography>
+        <TextField
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          helperText="Sequence search pattern"
+        />
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={searchForward}
+                onChange={event => setSearchForward(event.target.checked)}
+              />
+            }
+            label="Search forward strand"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={searchReverse}
+                onChange={event => setSearchReverse(event.target.checked)}
+              />
+            }
+            label="Search reverse strand"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={caseInsensitive}
+                onChange={event => setCaseInsensitive(event.target.checked)}
+              />
+            }
+            label="Case insensitive"
+          />
+        </FormGroup>
+        {error ? <Typography color="error">{`${error}`}</Typography> : null}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            if (value) {
+              const trackId = `sequence_search_${+Date.now()}`
+              const session = getSession(model)
+              const { assemblyManager } = session
+              const assemblyName = model.assemblyNames[0]
+              session.addTrackConf({
+                trackId,
+                name: `Sequence search ${value}`,
+                assemblyNames: [assemblyName],
+                type: 'FeatureTrack',
+                adapter: {
+                  type: 'SequenceSearchAdapter',
+                  search: value,
+                  searchForward,
+                  searchReverse,
+                  caseInsensitive,
+                  sequenceAdapter: getSnapshot(
+                    assemblyManager.get(assemblyName)?.configuration.sequence
+                      .adapter,
+                  ),
+                },
+              })
+              model.toggleTrack(trackId)
+            }
+            handleClose()
+          }}
+          variant="contained"
+          color="primary"
+        >
+          Submit
+        </Button>
+
+        <Button
+          onClick={() => handleClose()}
+          variant="contained"
+          color="secondary"
+        >
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default observer(SequenceDialog)

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -72,7 +72,9 @@ function getTrackName(
     return (
       trackName ||
       (asm
-        ? `Reference Sequence (${readConfObject(asm, 'name')})`
+        ? `Reference Sequence (${
+            readConfObject(asm, 'displayName') || readConfObject(asm, 'name')
+          })`
         : 'Reference Sequence')
     )
   }

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -90,7 +90,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -117,7 +117,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -137,7 +137,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             />
           </button>
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -157,7 +157,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             />
           </button>
           <div
-            class="MuiAutocomplete-root css-16awh2u-MuiAutocomplete-root"
+            class="MuiAutocomplete-root css-1qqsdnr-MuiAutocomplete-root"
             data-testid="autocomplete"
             style="width: 200px;"
           >
@@ -166,7 +166,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               style="margin: 7px; min-width: 175px;"
             >
               <div
-                class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                 style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
               >
                 <input
@@ -175,7 +175,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                   id="refNameAutocomplete-lgv"
                   placeholder="Search for location"
                   role="combobox"
@@ -265,7 +265,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
             </svg>
           </button>
           <span
-            class="MuiSlider-colorPrimary MuiSlider-sizeSmall MuiSlider-root tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
+            class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
           >
             <span
               class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -275,7 +275,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               style="left: 0%; width: 0%;"
             />
             <span
-              class="MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall MuiSlider-thumb css-14gf62f-MuiSlider-thumb"
+              class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall css-14gf62f-MuiSlider-thumb"
               data-focusvisible="false"
               data-index="0"
               style="left: 0%;"
@@ -655,7 +655,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         class="tss-ig8oez-headerBar"
       >
         <button
-          class="MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium tss-19jxj46-toggleButton css-1d3f8j8-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           title="Open track selector"
           type="button"
@@ -682,7 +682,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
           class="MuiFormGroup-root MuiFormGroup-row tss-4gub8h-headerForm css-qfz70r-MuiFormGroup-root"
         >
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -702,7 +702,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <button
-            class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium tss-7ktir1-panButton css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -722,7 +722,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <div
-            class="MuiAutocomplete-root css-16awh2u-MuiAutocomplete-root"
+            class="MuiAutocomplete-root css-1qqsdnr-MuiAutocomplete-root"
             data-testid="autocomplete"
             style="width: 255.27500000000003px;"
           >
@@ -731,7 +731,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               style="margin: 7px; min-width: 175px;"
             >
               <div
-                class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
                 style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
               >
                 <input
@@ -740,7 +740,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                   id="refNameAutocomplete-lgv"
                   placeholder="Search for location"
                   role="combobox"
@@ -832,7 +832,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             />
           </button>
           <span
-            class="MuiSlider-colorPrimary MuiSlider-sizeSmall MuiSlider-root tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
+            class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall tss-1c03ro5-slider css-53tbrc-MuiSlider-root"
           >
             <span
               class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -842,7 +842,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               style="left: 0%; width: 9.774680693120512%;"
             />
             <span
-              class="MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall MuiSlider-thumb css-14gf62f-MuiSlider-thumb"
+              class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeSmall css-14gf62f-MuiSlider-thumb"
               data-focusvisible="false"
               data-index="0"
               style="left: 9.774680693120512%;"

package/src/LinearGenomeView/components/util.ts

@@ -51,3 +51,15 @@ export async function fetchResults({
     elt => elt.getId(),
   )
 }
+
+// splits on the last instance of a character
+export function splitLast(str: string, split: string): [string, string] {
+  const lastIndex = str.lastIndexOf(split)
+  if (lastIndex === -1) {
+    return [str, '']
+  } else {
+    const before = str.slice(0, lastIndex)
+    const after = str.slice(lastIndex + 1)
+    return [before, after]
+  }
+}

package/src/LinearGenomeView/index.tsx

@@ -1,3 +1,4 @@
+import { lazy } from 'react'
 import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { Region } from '@jbrowse/core/util/types'
@@ -53,6 +54,10 @@ import RefNameAutocomplete from './components/RefNameAutocomplete'
 import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
 
+const SequenceSearchDialog = lazy(
+  () => import('./components/SequenceSearchDialog'),
+)
+
 export interface BpOffset {
   refName?: string
   index: number
@@ -396,21 +401,18 @@ export function stateModelFactory(pluginManager: PluginManager) {
         return newBpPerPx
       },
 
-      setOffsets(left: undefined | BpOffset, right: undefined | BpOffset) {
+      setOffsets(left?: BpOffset, right?: BpOffset) {
         // sets offsets used in the get sequence dialog
         self.leftOffset = left
         self.rightOffset = right
       },
 
-      setSearchResults(
-        results: BaseResult[] | undefined,
-        query: string | undefined,
-      ) {
+      setSearchResults(results?: BaseResult[], query?: string) {
         self.searchResults = results
         self.searchQuery = query
       },
 
-      setSequenceDialogOpen(open: boolean) {
+      setGetSequenceDialogOpen(open: boolean) {
         self.seqDialogDisplayed = open
       },
 
@@ -561,8 +563,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
       getSelectedRegions(leftOffset?: BpOffset, rightOffset?: BpOffset) {
         const snap = getSnapshot(self)
         const simView = Base1DView.create({
-          // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
-          ...(snap as Omit<typeof self, symbol>),
+          ...snap,
           interRegionPaddingWidth: self.interRegionPaddingWidth,
         })
 
@@ -718,6 +719,15 @@ export function stateModelFactory(pluginManager: PluginManager) {
             },
             icon: FolderOpenIcon,
           },
+          {
+            label: 'Sequence search',
+            onClick: () => {
+              getSession(self).queueDialog(handleClose => [
+                SequenceSearchDialog,
+                { model: self, handleClose },
+              ])
+            },
+          },
           {
             label: 'Export SVG',
             icon: PhotoCameraIcon,
@@ -774,12 +784,23 @@ export function stateModelFactory(pluginManager: PluginManager) {
             onClick: self.toggleNoTracksActive,
           },
           {
-            label: 'Show gridlines',
+            label: 'Show guidelines',
             icon: VisibilityIcon,
             type: 'checkbox',
             checked: self.showGridlines,
             onClick: self.toggleShowGridlines,
           },
+          ...(canShowCytobands
+            ? [
+                {
+                  label: 'Show ideogram',
+                  icon: VisibilityIcon,
+                  type: 'checkbox' as const,
+                  checked: self.showCytobands,
+                  onClick: () => self.setShowCytobands(!showCytobands),
+                },
+              ]
+            : []),
           {
             label: 'Track labels',
             icon: LabelIcon,
@@ -807,16 +828,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
               },
             ],
           },
-          ...(canShowCytobands
-            ? [
-                {
-                  label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
-                  onClick: () => {
-                    self.setShowCytobands(!showCytobands)
-                  },
-                },
-              ]
-            : []),
         ]
 
         // add track's view level menu options
@@ -826,9 +837,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
               { type: 'divider' },
               { type: 'subHeader', label: key },
             )
-            value.forEach(action => {
-              menuItems.push(action)
-            })
+            value.forEach(action => menuItems.push(action))
           }
         }
 
@@ -1164,9 +1173,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
           {
             label: 'Get sequence',
             icon: MenuOpenIcon,
-            onClick: () => {
-              self.setSequenceDialogOpen(true)
-            },
+            onClick: () => self.setGetSequenceDialogOpen(true),
           },
         ]
       },