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

package/src/LinearGenomeView/components/Header.tsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Button, IconButton, FormGroup, Typography, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getBpDisplayStr } from '@jbrowse/core/util'
-
-// icons
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-
-// locals
-import { LinearGenomeViewModel, SPACING } from '..'
-import OverviewScalebar from './OverviewScalebar'
-import ZoomControls from './ZoomControls'
-import SearchBox from './SearchBox'
-
-type LGV = LinearGenomeViewModel
-const useStyles = makeStyles()(theme => ({
-  headerBar: {
-    display: 'flex',
-  },
-  headerForm: {
-    flexWrap: 'nowrap',
-    marginRight: 7,
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-
-  panButton: {
-    background: alpha(theme.palette.background.paper, 0.8),
-    color: theme.palette.text.primary,
-    margin: SPACING,
-  },
-  bp: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 5,
-  },
-  toggleButton: {
-    height: 44,
-    border: 'none',
-    marginLeft: theme.spacing(4),
-  },
-  buttonSpacer: {
-    marginRight: theme.spacing(2),
-  },
-}))
-
-const HeaderButtons = observer(({ model }: { model: LGV }) => {
-  const { classes } = useStyles()
-  return (
-    <IconButton
-      onClick={model.activateTrackSelector}
-      className={classes.toggleButton}
-      title="Open track selector"
-      value="track_select"
-    >
-      <TrackSelectorIcon className={classes.buttonSpacer} />
-    </IconButton>
-  )
-})
-
-function PanControls({ model }: { model: LGV }) {
-  const { classes } = useStyles()
-  return (
-    <>
-      <Button
-        variant="outlined"
-        className={classes.panButton}
-        onClick={() => model.slide(-0.9)}
-      >
-        <ArrowBackIcon />
-      </Button>
-      <Button
-        variant="outlined"
-        className={classes.panButton}
-        onClick={() => model.slide(0.9)}
-      >
-        <ArrowForwardIcon />
-      </Button>
-    </>
-  )
-}
-
-const RegionWidth = observer(({ model }: { model: LGV }) => {
-  const { classes } = useStyles()
-  const { coarseTotalBp } = model
-  return (
-    <Typography variant="body2" color="textSecondary" className={classes.bp}>
-      {getBpDisplayStr(coarseTotalBp)}
-    </Typography>
-  )
-})
-
-const Controls = ({ model }: { model: LGV }) => {
-  const { classes } = useStyles()
-  return (
-    <div className={classes.headerBar}>
-      <HeaderButtons model={model} />
-      <div className={classes.spacer} />
-      <FormGroup row className={classes.headerForm}>
-        <PanControls model={model} />
-        <SearchBox model={model} />
-      </FormGroup>
-      <RegionWidth model={model} />
-      <ZoomControls model={model} />
-      <div className={classes.spacer} />
-    </div>
-  )
-}
-
-const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
-  return !model.hideHeader ? (
-    model.hideHeaderOverview ? (
-      <Controls model={model} />
-    ) : (
-      <OverviewScalebar model={model}>
-        <Controls model={model} />
-      </OverviewScalebar>
-    )
-  ) : null
-})
-
-export default LinearGenomeViewHeader

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, findByDisplayValue, findByText, queryAllByTestId } =
-    render(<LinearGenomeView model={model} />)
-  await findByText('Foo Track')
-  await findByText('798bp')
-  await findByDisplayValue('ctgA:1..100 ctgB:1,001..1,698')
-  await waitFor(() => expect(queryAllByTestId('svgfeatures').length).toBe(4))
-  expect(container).toMatchSnapshot()
-}, 15000)

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,75 +0,0 @@
-import React, { lazy } from 'react'
-import { Button, Paper, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-
-// icons
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-import TrackContainer from './TrackContainer'
-import TracksContainer from './TracksContainer'
-
-const ImportForm = lazy(() => import('./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,54 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { IconButton, Paper } from '@mui/material'
-
-// 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 '..'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()(theme => ({
-  bg: {
-    position: 'absolute',
-    right: 0,
-    zIndex: 1001,
-    background: theme.palette.background.paper,
-  },
-}))
-
-const MiniControls = observer(function ({
-  model,
-}: {
-  model: LinearGenomeViewModel
-}) {
-  const { classes } = useStyles()
-  const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model
-  return hideHeader ? (
-    <Paper className={classes.bg}>
-      <CascadingMenuButton menuItems={model.menuItems()}>
-        <ArrowDown fontSize="small" />
-      </CascadingMenuButton>
-      <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>
-    </Paper>
-  ) : null
-})
-
-export default MiniControls