@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.2

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { Button, DialogActions, DialogContent, Divider } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-export default function HelpDialog({
-  handleClose,
-}: {
-  handleClose: () => void
-}) {
-  return (
-    <Dialog
-      open
-      maxWidth="xl"
-      onClose={handleClose}
-      title="Using the search box"
-    >
-      <DialogContent>
-        <h3>Searching</h3>
-        <ul>
-          <li>
-            Jump to a feature or reference sequence by typing its name in the
-            location box and pressing Enter.
-          </li>
-          <li>
-            Jump to a specific region by typing the region into the location box
-            as: <code>ref:start..end</code> or <code>ref:start-end</code>.
-            Commas are allowed in the start and end coordinates. A
-            space-separated list of locstrings can be used to open up multiple
-            chromosomes at a time
-          </li>
-        </ul>
-        <h3>Example Searches</h3>
-        <ul>
-          <li>
-            <code>BRCA</code> - searches for the feature named BRCA
-          </li>
-          <li>
-            <code>chr4</code> - jumps to chromosome 4
-          </li>
-          <li>
-            <code>chr4:79,500,000..80,000,000</code> - jumps the region on
-            chromosome 4 between 79.5Mb and 80Mb.
-          </li>
-          <li>
-            <code>chr1:1-100 chr2:1-100</code> - create a split view of
-            chr1:1-100 and chr2:1-100
-          </li>
-          <li>
-            <code>chr1 chr2 chr3</code> - open up multiple chromosomes at once
-          </li>
-          <li>
-            <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
-            in the horizontally flipped orientation
-          </li>
-          <li>
-            <code>chr1 100 200</code> - use whitespace separated refname, start,
-            end
-          </li>
-        </ul>
-      </DialogContent>
-      <Divider />
-      <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -1,217 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-import {
-  Button,
-  FormControl,
-  Container,
-  Grid,
-  CircularProgress,
-} from '@mui/material'
-import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-
-// icons
-import CloseIcon from '@mui/icons-material/Close'
-
-// locals
-import RefNameAutocomplete from './RefNameAutocomplete'
-import { fetchResults, splitLast } from './util'
-import { LinearGenomeViewModel } from '..'
-
-const useStyles = makeStyles()(theme => ({
-  importFormContainer: {
-    padding: theme.spacing(2),
-  },
-  button: {
-    margin: theme.spacing(2),
-  },
-  container: {
-    padding: theme.spacing(4),
-  },
-}))
-
-type LGV = LinearGenomeViewModel
-
-export default observer(function ({ model }: { model: LGV }) {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { assemblyNames, assemblyManager, textSearchManager } = session
-  const { rankSearchResults, error } = model
-  const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [option, setOption] = useState<BaseResult>()
-  const searchScope = model.searchScope(selectedAsm)
-  const assembly = assemblyManager.get(selectedAsm)
-  const assemblyError = assemblyNames.length
-    ? assembly?.error
-    : 'No configured assemblies'
-  const displayError = assemblyError || error
-  const [value, setValue] = useState('')
-  const regions = assembly?.regions
-  const assemblyLoaded = !!regions
-  const r0 = regions ? regions[0]?.refName : ''
-
-  // useEffect resets to an "initial state" of displaying first region from
-  // assembly after assembly change. needs to react to selectedAsm as well as
-  // r0 because changing assembly will run setValue('') and then r0 may not
-  // change if assembly names are the same across assemblies, but it still
-  // needs to be reset
-  useEffect(() => {
-    setValue(r0)
-  }, [r0, selectedAsm])
-
-  async function navToOption(option: BaseResult) {
-    const location = option.getLocation()
-    const trackId = option.getTrackId()
-    if (location) {
-      await model.navToLocString(location, selectedAsm)
-      if (trackId) {
-        model.showTrack(trackId)
-      }
-    }
-  }
-
-  // gets a string as input, or use stored option results from previous query,
-  // then re-query and
-  // 1) if it has multiple results: pop a dialog
-  // 2) if it's a single result navigate to it
-  // 3) else assume it's a locstring and navigate to it
-  async function handleSelectedRegion(input: string) {
-    try {
-      if (option?.getDisplayString() === input && option.hasLocation()) {
-        await navToOption(option)
-      } else if (option?.results?.length) {
-        model.setSearchResults(option.results, option.getLabel(), selectedAsm)
-      } else {
-        const [ref, rest] = splitLast(input, ':')
-        const allRefs = assembly?.allRefNamesWithLowerCase || []
-        if (
-          allRefs.includes(input) ||
-          (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10)))
-        ) {
-          await model.navToLocString(input, selectedAsm)
-        } else {
-          const results = await fetchResults({
-            queryString: input,
-            searchType: 'exact',
-            searchScope,
-            rankSearchResults,
-            textSearchManager,
-            assembly,
-          })
-
-          if (results.length > 1) {
-            model.setSearchResults(results, input.toLowerCase(), selectedAsm)
-          } else if (results.length === 1) {
-            await navToOption(results[0])
-          } else {
-            await model.navToLocString(input, selectedAsm)
-          }
-        }
-      }
-    } catch (e) {
-      console.error(e)
-      session.notify(`${e}`, 'warning')
-    }
-  }
-
-  // implementation notes:
-  // having this wrapped in a form allows intuitive use of enter key to submit
-  return (
-    <div className={classes.container}>
-      {displayError ? <ErrorMessage error={displayError} /> : null}
-      <Container className={classes.importFormContainer}>
-        <form
-          onSubmit={async event => {
-            event.preventDefault()
-            model.setError(undefined)
-            if (value) {
-              // has it's own error handling
-              await handleSelectedRegion(value)
-            }
-          }}
-        >
-          <Grid
-            container
-            spacing={1}
-            justifyContent="center"
-            alignItems="center"
-          >
-            <Grid item>
-              <FormControl>
-                <AssemblySelector
-                  onChange={val => setSelectedAsm(val)}
-                  localStorageKey="lgv"
-                  session={session}
-                  selected={selectedAsm}
-                />
-              </FormControl>
-            </Grid>
-            <Grid item>
-              {selectedAsm ? (
-                assemblyError ? (
-                  <CloseIcon style={{ color: 'red' }} />
-                ) : assemblyLoaded ? (
-                  <FormControl>
-                    <RefNameAutocomplete
-                      fetchResults={queryString =>
-                        fetchResults({
-                          queryString,
-                          assembly,
-                          textSearchManager,
-                          rankSearchResults,
-                          searchScope,
-                        })
-                      }
-                      model={model}
-                      assemblyName={selectedAsm}
-                      value={value}
-                      minWidth={270}
-                      onChange={str => setValue(str)}
-                      onSelect={val => setOption(val)}
-                      TextFieldProps={{
-                        variant: 'outlined',
-                        helperText:
-                          'Enter sequence name, feature name, or location',
-                      }}
-                    />
-                  </FormControl>
-                ) : (
-                  <CircularProgress size={20} disableShrink />
-                )
-              ) : null}
-            </Grid>
-            <Grid item>
-              <FormControl>
-                <Button
-                  type="submit"
-                  disabled={!value}
-                  className={classes.button}
-                  variant="contained"
-                  color="primary"
-                >
-                  Open
-                </Button>
-              </FormControl>
-              <FormControl>
-                <Button
-                  disabled={!value}
-                  className={classes.button}
-                  onClick={() => {
-                    model.setError(undefined)
-                    model.showAllRegionsInAssembly(selectedAsm)
-                  }}
-                  variant="contained"
-                  color="secondary"
-                >
-                  Show all regions in assembly
-                </Button>
-              </FormControl>
-            </Grid>
-          </Grid>
-        </form>
-      </Container>
-    </div>
-  )
-})

package/src/LinearGenomeView/components/LinearGenomeView.test.tsx

@@ -1,167 +0,0 @@
-import React from 'react'
-import { fireEvent, render, waitFor } from '@testing-library/react'
-import { createTestSession } from '@jbrowse/web/src/rootModel'
-import 'requestidlecallback-polyfill'
-
-// locals
-import LinearGenomeView from './LinearGenomeView'
-
-// mock
-jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
-
-const assemblyConf = {
-  name: 'volMyt1',
-  sequence: {
-    trackId: 'sequenceConfigId',
-    type: 'ReferenceSequenceTrack',
-    adapter: {
-      type: 'FromConfigSequenceAdapter',
-      features: [
-        {
-          refName: 'ctgA',
-          uniqueId: 'firstId',
-          start: 0,
-          end: 10,
-          seq: 'cattgttgcg',
-        },
-      ],
-    },
-  },
-}
-
-test('renders setup wizard', async () => {
-  const session = createTestSession()
-  session.addAssemblyConf(assemblyConf)
-  session.addView('LinearGenomeView', { id: 'lgv' })
-  const model = session.views[0]
-  model.setWidth(800)
-  const { findByText } = render(<LinearGenomeView model={model} />)
-  expect(model.displayedRegions.length).toEqual(0)
-  const elt = await findByText('Open')
-  await waitFor(() => expect(elt.getAttribute('disabled')).toBe(null))
-  fireEvent.click(elt)
-  await waitFor(() => expect(model.displayedRegions.length).toEqual(1), {
-    timeout: 15000,
-  })
-}, 15000)
-
-test('renders one track, one region', async () => {
-  const session = createTestSession()
-  session.addAssemblyConf(assemblyConf)
-  session.addTrackConf({
-    trackId: 'testConfig',
-    assemblyNames: ['volMyt1'],
-    name: 'Foo Track',
-    type: 'BasicTrack',
-    adapter: { type: 'FromConfigAdapter', features: [] },
-  })
-  session.addView('LinearGenomeView', {
-    type: 'LinearGenomeView',
-    id: 'lgv',
-    offsetPx: 0,
-    bpPerPx: 1,
-    tracks: [
-      {
-        id: 'foo',
-        type: 'BasicTrack',
-        height: 20,
-        configuration: 'testConfig',
-        displays: [
-          {
-            type: 'LinearBareDisplay',
-            configuration: 'testConfig-LinearBareDisplay',
-          },
-        ],
-      },
-    ],
-    displayedRegions: [
-      { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
-    ],
-  })
-  const model = session.views[0]
-  model.setWidth(800)
-  const { container, queryAllByTestId, getByPlaceholderText, findByText } =
-    render(<LinearGenomeView model={model} />)
-  await findByText('Foo Track')
-  // test needs to wait until it's updated to display 100 bp in the header to
-  // make snapshot pass
-  await findByText('100bp')
-
-  await waitFor(() => {
-    expect(
-      (getByPlaceholderText('Search for location') as HTMLInputElement).value,
-    ).toEqual('ctgA:1..100')
-  })
-  await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(1))
-  // snapshot has no features rendered
-  expect(container).toMatchSnapshot()
-})
-
-test('renders two tracks, two regions', async () => {
-  const session = createTestSession()
-  session.addAssemblyConf(assemblyConf)
-  session.addTrackConf({
-    trackId: 'testConfig',
-    name: 'Foo Track',
-    assemblyNames: ['volMyt1'],
-    type: 'BasicTrack',
-    adapter: { type: 'FromConfigAdapter', features: [] },
-  })
-
-  session.addTrackConf({
-    trackId: 'testConfig2',
-    name: 'Bar Track',
-    assemblyNames: ['volMyt1'],
-    type: 'BasicTrack',
-    adapter: { type: 'FromConfigAdapter', features: [] },
-  })
-  session.addView('LinearGenomeView', {
-    id: 'lgv',
-    offsetPx: 0,
-    bpPerPx: 1,
-    displayedRegions: [
-      { assemblyName: 'volMyt1', refName: 'ctgA', start: 0, end: 100 },
-      {
-        assemblyName: 'volMyt1',
-        refName: 'ctgB',
-        start: 1000,
-        end: 2000,
-      },
-    ],
-    tracks: [
-      {
-        id: 'foo',
-        type: 'BasicTrack',
-        height: 20,
-        configuration: 'testConfig',
-        displays: [
-          {
-            type: 'LinearBareDisplay',
-            configuration: 'testConfig-LinearBareDisplay',
-          },
-        ],
-      },
-      {
-        id: 'bar',
-        type: 'BasicTrack',
-        height: 20,
-        configuration: 'testConfig2',
-        displays: [
-          {
-            type: 'LinearBareDisplay',
-            configuration: 'testConfig2-LinearBareDisplay',
-          },
-        ],
-      },
-    ],
-  })
-  const model = session.views[0]
-  model.setWidth(800)
-  const { container, findByText, queryAllByTestId } = render(
-    <LinearGenomeView model={model} />,
-  )
-  await findByText('Foo Track')
-  await findByText('798bp')
-  await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(4))
-  expect(container).toMatchSnapshot()
-}, 15000)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import { Button, Paper, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-import TrackContainer from './TrackContainer'
-import TracksContainer from './TracksContainer'
-import ImportForm from './ImportForm'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => ({
-  note: {
-    textAlign: 'center',
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-  },
-}))
-
-const LinearGenomeView = observer(({ model }: { model: LGV }) => {
-  const { tracks, error, initialized, hasDisplayedRegions } = model
-  const { classes } = useStyles()
-
-  if (!initialized && !error) {
-    return <LoadingEllipses variant="h6" />
-  }
-  if (!hasDisplayedRegions || error) {
-    return <ImportForm model={model} />
-  }
-
-  const MiniControlsComponent = model.MiniControlsComponent()
-  const HeaderComponent = model.HeaderComponent()
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <HeaderComponent model={model} />
-      <MiniControlsComponent model={model} />
-      <TracksContainer model={model}>
-        {!tracks.length ? (
-          <Paper variant="outlined" className={classes.note}>
-            {!model.hideNoTracksActive ? (
-              <>
-                <Typography>No tracks active.</Typography>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={model.activateTrackSelector}
-                  style={{ zIndex: 1000 }}
-                  startIcon={<TrackSelectorIcon />}
-                >
-                  Open track selector
-                </Button>
-              </>
-            ) : (
-              <div style={{ height: '48px' }}></div>
-            )}
-          </Paper>
-        ) : (
-          tracks.map(track => (
-            <TrackContainer key={track.id} model={model} track={track} />
-          ))
-        )}
-      </TracksContainer>
-    </div>
-  )
-})
-
-export default LinearGenomeView

package/src/LinearGenomeView/components/MiniControls.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { IconButton, Paper } from '@mui/material'
-import Menu from '@jbrowse/core/ui/Menu'
-
-// icons
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomOut from '@mui/icons-material/ZoomOut'
-import ArrowDown from '@mui/icons-material/KeyboardArrowDown'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-
-const MiniControls = observer((props: { model: LinearGenomeViewModel }) => {
-  const { model } = props
-  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
-  const [anchorEl, setAnchorEl] = useState<HTMLElement>()
-
-  return hideHeader ? (
-    <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
-      <Paper style={{ background: '#aaa7' }}>
-        <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
-          <ArrowDown fontSize="small" />
-        </IconButton>
-
-        <IconButton
-          data-testid="zoom_out"
-          onClick={() => model.zoom(bpPerPx * 2)}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomOut fontSize="small" />
-        </IconButton>
-        <IconButton
-          data-testid="zoom_in"
-          onClick={() => model.zoom(model.bpPerPx / 2)}
-          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomIn fontSize="small" />
-        </IconButton>
-        <Menu
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onMenuItemClick={(_, callback) => {
-            callback()
-            setAnchorEl(undefined)
-          }}
-          onClose={() => setAnchorEl(undefined)}
-          menuItems={model.menuItems()}
-        />
-      </Paper>
-    </div>
-  ) : null
-})
-
-export default MiniControls