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

package/src/LinearGenomeView/components/Scalebar.tsx

@@ -1,199 +0,0 @@
-import { Paper, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  ContentBlock,
-  ElidedBlock,
-  InterRegionPaddingBlock,
-} from '@jbrowse/core/util/blockTypes'
-import { observer } from 'mobx-react'
-import React from 'react'
-import { LinearGenomeViewModel } from '..'
-import {
-  ContentBlock as ContentBlockComponent,
-  ElidedBlock as ElidedBlockComponent,
-  InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
-} from '../../BaseLinearDisplay/components/Block'
-import { makeTicks } from '../util'
-import { getTickDisplayStr } from '@jbrowse/core/util'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => ({
-  scalebarContainer: {
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  scalebarZoomContainer: {
-    position: 'relative',
-    zIndex: 1,
-  },
-  scalebar: {
-    position: 'absolute',
-    display: 'flex',
-    pointerEvents: 'none',
-  },
-  majorTickLabel: {
-    fontSize: '11px',
-    zIndex: 1,
-    background: theme.palette.background.paper,
-    lineHeight: 'normal',
-    pointerEvents: 'none',
-  },
-  tick: {
-    position: 'absolute',
-    width: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    pointerEvents: 'none',
-  },
-  refLabel: {
-    fontSize: '11px',
-    position: 'absolute',
-    left: '2px',
-    top: '-1px',
-    fontWeight: 'bold',
-    lineHeight: 'normal',
-    zIndex: 1,
-    pointerEvents: 'none',
-    background: theme.palette.background.paper,
-  },
-}))
-
-const RenderedRefNameLabels = observer(({ model }: { model: LGV }) => {
-  const { classes } = useStyles()
-
-  // find the block that needs pinning to the left side for context
-  let lastLeftBlock = 0
-  model.staticBlocks.forEach((block, i) => {
-    if (block.offsetPx - model.offsetPx < 0) {
-      lastLeftBlock = i
-    }
-  })
-  return (
-    <>
-      {model.staticBlocks.map((block, index) => {
-        return block instanceof ContentBlock &&
-          (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (
-          <Typography
-            key={`refLabel-${block.key}-${index}`}
-            style={{
-              left:
-                index === lastLeftBlock
-                  ? Math.max(0, -model.offsetPx)
-                  : block.offsetPx - model.offsetPx - 1,
-              paddingLeft: index === lastLeftBlock ? 0 : 1,
-            }}
-            className={classes.refLabel}
-            data-testid={`refLabel-${block.refName}`}
-          >
-            {block.refName}
-          </Typography>
-        ) : null
-      })}
-    </>
-  )
-})
-
-const RenderedScalebarLabels = observer(({ model }: { model: LGV }) => {
-  const { classes } = useStyles()
-  const { bpPerPx, staticBlocks } = model
-
-  return (
-    <>
-      {staticBlocks.map((block, index) => {
-        const { reversed, start, end, key, widthPx } = block
-        if (block instanceof ContentBlock) {
-          const ticks = makeTicks(start, end, bpPerPx, true, false)
-
-          return (
-            <ContentBlockComponent key={`${key}-${index}`} block={block}>
-              {ticks.map(tick => {
-                if (tick.type === 'major') {
-                  const x =
-                    (reversed ? end - tick.base : tick.base - start) / bpPerPx
-                  const baseNumber = tick.base + 1
-                  return (
-                    <div
-                      key={tick.base}
-                      className={classes.tick}
-                      style={{ left: x }}
-                    >
-                      {baseNumber ? (
-                        <Typography className={classes.majorTickLabel}>
-                          {getTickDisplayStr(baseNumber, bpPerPx)}
-                        </Typography>
-                      ) : null}
-                    </div>
-                  )
-                }
-                return null
-              })}
-            </ContentBlockComponent>
-          )
-        }
-        if (block instanceof ElidedBlock) {
-          return <ElidedBlockComponent key={key} width={widthPx} />
-        }
-        if (block instanceof InterRegionPaddingBlock) {
-          return (
-            <InterRegionPaddingBlockComponent
-              key={key}
-              width={widthPx}
-              style={{ background: 'none' }}
-              boundary={block.variant === 'boundary'}
-            />
-          )
-        }
-        return null
-      })}
-    </>
-  )
-})
-
-interface ScalebarProps {
-  model: LGV
-  style?: React.CSSProperties
-  className?: string
-}
-
-const Scalebar = React.forwardRef<HTMLDivElement, ScalebarProps>(
-  ({ model, style, className, ...other }, ref) => {
-    const { classes, cx } = useStyles()
-
-    const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx
-    return (
-      <Paper
-        data-resizer="true" // used to avoid click-and-drag scrolls on trackscontainer
-        className={cx(classes.scalebarContainer, className)}
-        variant="outlined"
-        ref={ref}
-        style={style}
-        {...other}
-      >
-        <div
-          className={classes.scalebarZoomContainer}
-          style={{
-            transform:
-              model.scaleFactor !== 1
-                ? `scaleX(${model.scaleFactor})`
-                : undefined,
-          }}
-        >
-          <div
-            className={classes.scalebar}
-            style={{
-              left: offsetLeft - 1,
-              width: model.staticBlocks.totalWidthPx,
-              ...style,
-            }}
-          >
-            <RenderedScalebarLabels model={model} />
-          </div>
-        </div>
-        <RenderedRefNameLabels model={model} />
-      </Paper>
-    )
-  },
-)
-
-export default observer(Scalebar)

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -1,123 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { useTheme, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getSession } from '@jbrowse/core/util'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-
-// locals
-import RefNameAutocomplete from './RefNameAutocomplete'
-import { fetchResults, splitLast } from './util'
-import { LinearGenomeViewModel, SPACING, WIDGET_HEIGHT } from '..'
-
-const useStyles = makeStyles()(() => ({
-  headerRefName: {
-    minWidth: 100,
-  },
-}))
-
-function SearchBox({
-  model,
-  showHelp,
-}: {
-  showHelp?: boolean
-  model: LinearGenomeViewModel
-}) {
-  const { classes } = useStyles()
-  const theme = useTheme()
-  const session = getSession(model)
-
-  const { textSearchManager, assemblyManager } = session
-  const { assemblyNames, rankSearchResults } = model
-  const assemblyName = assemblyNames[0]
-  const assembly = assemblyManager.get(assemblyName)
-  const searchScope = model.searchScope(assemblyName)
-
-  async function navToOption(option: BaseResult) {
-    const location = option.getLocation()
-    const trackId = option.getTrackId()
-    if (location) {
-      await model.navToLocString(location, assemblyName)
-      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(option: BaseResult) {
-    try {
-      if (option.hasLocation()) {
-        await navToOption(option)
-      } else if (option.results?.length) {
-        model.setSearchResults(option.results, option.getLabel())
-      } else {
-        const input = option.getLabel()
-        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, assemblyName)
-        } else {
-          const results = await fetchResults({
-            queryString: input,
-            searchType: 'exact',
-            searchScope,
-            rankSearchResults,
-            textSearchManager,
-            assembly,
-          })
-
-          if (results.length > 1) {
-            model.setSearchResults(results, input.toLowerCase())
-          } else if (results.length === 1) {
-            await navToOption(results[0])
-          } else {
-            await model.navToLocString(input, assemblyName)
-          }
-        }
-      }
-    } catch (e) {
-      console.error(e)
-      session.notify(`${e}`, 'warning')
-    }
-  }
-  return (
-    <RefNameAutocomplete
-      showHelp={showHelp}
-      onSelect={handleSelectedRegion}
-      assemblyName={assemblyName}
-      fetchResults={queryString =>
-        fetchResults({
-          queryString,
-          searchScope,
-          rankSearchResults,
-          textSearchManager,
-          assembly,
-        })
-      }
-      model={model}
-      minWidth={175}
-      TextFieldProps={{
-        variant: 'outlined',
-        className: classes.headerRefName,
-        style: { margin: SPACING },
-        InputProps: {
-          style: {
-            padding: 0,
-            height: WIDGET_HEIGHT,
-            background: alpha(theme.palette.background.paper, 0.8),
-          },
-        },
-      }}
-    />
-  )
-}
-
-export default observer(SearchBox)

package/src/LinearGenomeView/components/SearchResultsDialog.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  Divider,
-  Typography,
-} from '@mui/material'
-
-import { LinearGenomeViewModel } from '../..'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import SearchResultsTable from './SearchResultsTable'
-
-export default function SearchResultsDialog({
-  model,
-  assemblyName,
-  searchQuery,
-  searchResults,
-  handleClose,
-}: {
-  model: LinearGenomeViewModel
-  assemblyName?: string
-  searchQuery: string
-  searchResults?: BaseResult[]
-  handleClose: () => void
-}) {
-  return (
-    <Dialog open maxWidth="xl" onClose={handleClose} title="Search results">
-      <DialogContent>
-        {!searchResults?.length ? (
-          <Typography>
-            No results found for <b>{searchQuery}</b>
-          </Typography>
-        ) : (
-          <>
-            <Typography>
-              Showing results for <b>{searchQuery}</b>
-            </Typography>
-            <SearchResultsTable
-              model={model}
-              handleClose={handleClose}
-              assemblyName={assemblyName}
-              searchResults={searchResults}
-            />
-          </>
-        )}
-      </DialogContent>
-      <Divider />
-      <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/LinearGenomeView/components/SearchResultsTable.tsx

@@ -1,121 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from '@mui/material'
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
-import { getRoot, resolveIdentifier } from 'mobx-state-tree'
-import { getEnv, getSession } from '@jbrowse/core/util'
-
-// locals
-import { LinearGenomeViewModel } from '../..'
-
-export default function SearchResultsTable({
-  searchResults,
-  assemblyName: optAssemblyName,
-  model,
-  handleClose,
-}: {
-  searchResults: BaseResult[]
-  assemblyName?: string
-  model: LinearGenomeViewModel
-  handleClose: () => void
-}) {
-  const session = getSession(model)
-  const { pluginManager } = getEnv(session)
-  const { assemblyManager } = session
-  const assemblyName =
-    optAssemblyName || model.displayedRegions[0]?.assemblyName
-
-  const assembly = assemblyManager.get(assemblyName)
-  if (!assembly) {
-    throw new Error(`assembly ${assemblyName} not found`)
-  }
-  if (!assembly.regions) {
-    throw new Error(`assembly ${assemblyName} regions not loaded`)
-  }
-
-  function getTrackName(trackId: string | undefined) {
-    if (trackId) {
-      const schema = pluginManager.pluggableConfigSchemaType('track')
-      const configuration = resolveIdentifier(schema, getRoot(model), trackId)
-      return configuration?.name?.value || ''
-    }
-    return ''
-  }
-  async function handleClick(location: string) {
-    try {
-      const newRegion = assembly?.regions?.find(
-        region => location === region.refName,
-      )
-      if (newRegion) {
-        model.setDisplayedRegions([newRegion])
-        // we use showAllRegions after setDisplayedRegions to make the entire
-        // region visible, xref #1703
-        model.showAllRegions()
-      } else {
-        await model.navToLocString(location, assemblyName)
-      }
-    } catch (e) {
-      console.warn(e)
-      session.notify(`${e}`, 'warning')
-    }
-  }
-  return (
-    <TableContainer component={Paper}>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Name</TableCell>
-            <TableCell align="right">Location</TableCell>
-            <TableCell align="right">Track</TableCell>
-            <TableCell align="right" />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {searchResults.map(result => (
-            <TableRow key={`${result.getId()}`}>
-              <TableCell component="th" scope="row">
-                {result.getLabel()}
-              </TableCell>
-              <TableCell align="right">{result.getLocation()}</TableCell>
-              <TableCell align="right">
-                {getTrackName(result.getTrackId()) || 'N/A'}
-              </TableCell>
-              <TableCell align="right">
-                <Button
-                  onClick={async () => {
-                    try {
-                      const location = result.getLocation()
-                      if (location) {
-                        await handleClick(location)
-                        const resultTrackId = result.getTrackId()
-                        if (resultTrackId) {
-                          model.showTrack(resultTrackId)
-                        }
-                      }
-                    } catch (e) {
-                      console.error(e)
-                      session.notify(`${e}`, 'error')
-                    }
-                    handleClose()
-                  }}
-                  color="primary"
-                  variant="contained"
-                >
-                  Go
-                </Button>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}

package/src/LinearGenomeView/components/SequenceSearchDialog.tsx

@@ -1,136 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Checkbox,
-  DialogActions,
-  DialogContent,
-  FormGroup,
-  FormControlLabel,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { getSnapshot } from 'mobx-state-tree'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()({
-  dialogContent: {
-    width: '40em',
-  },
-})
-
-function SequenceDialog({
-  model,
-  handleClose,
-}: {
-  model: { assemblyNames: string[]; toggleTrack(trackId: string): void }
-  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} title="Sequence search">
-      <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)