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

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -1,149 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Checkbox,
-  CircularProgress,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
-import { getSession, useLocalStorage } from '@jbrowse/core/util'
-
-// locals
-import { ExportSvgOptions } from '..'
-
-function LoadingMessage() {
-  return (
-    <div>
-      <CircularProgress size={20} style={{ marginRight: 20 }} />
-      <Typography display="inline">Creating SVG</Typography>
-    </div>
-  )
-}
-
-function useSvgLocal<T>(key: string, val: T) {
-  return useLocalStorage('svg-' + key, val)
-}
-
-export default function ExportSvgDlg({
-  model,
-  handleClose,
-}: {
-  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
-  handleClose: () => void
-}) {
-  const session = getSession(model)
-  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
-  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<unknown>()
-  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
-  const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset')
-  const [themeName, setThemeName] = useSvgLocal(
-    'theme',
-    session.themeName || 'default',
-  )
-  return (
-    <Dialog open onClose={handleClose} title="Export SVG">
-      <DialogContent>
-        {error ? (
-          <ErrorMessage error={error} />
-        ) : loading ? (
-          <LoadingMessage />
-        ) : null}
-        <TextField
-          helperText="filename"
-          value={filename}
-          onChange={event => setFilename(event.target.value)}
-        />
-        <br />
-        <TextField
-          select
-          label="Track label positioning"
-          variant="outlined"
-          style={{ width: 150 }}
-          value={trackLabels}
-          onChange={event => setTrackLabels(event.target.value)}
-        >
-          <MenuItem value="offset">Offset</MenuItem>
-          <MenuItem value="overlay">Overlay</MenuItem>
-          <MenuItem value="left">Left</MenuItem>
-          <MenuItem value="none">None</MenuItem>
-        </TextField>
-        <br />
-        {session.allThemes ? (
-          <TextField
-            select
-            label="Theme"
-            variant="outlined"
-            value={themeName}
-            onChange={event => setThemeName(event.target.value)}
-          >
-            {Object.entries(session.allThemes()).map(([key, val]) => (
-              <MenuItem key={key} value={key}>
-                {
-                  // @ts-expect-error
-                  val.name || '(Unknown name)'
-                }
-              </MenuItem>
-            ))}
-          </TextField>
-        ) : null}
-
-        {offscreenCanvas ? (
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={rasterizeLayers}
-                onChange={() => setRasterizeLayers(val => !val)}
-              />
-            }
-            label="Rasterize canvas based tracks? File may be much larger if this is turned off"
-          />
-        ) : (
-          <Typography>
-            Note: rasterizing layers not yet supported in this browser, so SVG
-            size may be large
-          </Typography>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={() => handleClose()}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          type="submit"
-          onClick={async () => {
-            setLoading(true)
-            setError(undefined)
-            try {
-              await model.exportSvg({
-                rasterizeLayers,
-                filename,
-                trackLabels,
-                themeName,
-              })
-              handleClose()
-            } catch (e) {
-              console.error(e)
-              setError(e)
-              setLoading(false)
-            }
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -1,269 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import {
-  Button,
-  Checkbox,
-  CircularProgress,
-  Container,
-  DialogActions,
-  DialogContent,
-  FormGroup,
-  FormControlLabel,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { saveAs } from 'file-saver'
-import { getConf } from '@jbrowse/core/configuration'
-import copy from 'copy-to-clipboard'
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  getSession,
-  reverse,
-  complement,
-  Feature,
-  Region,
-} from '@jbrowse/core/util'
-import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
-
-// icons
-import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
-import GetAppIcon from '@mui/icons-material/GetApp'
-
-// locals
-import { LinearGenomeViewModel } from '..'
-
-const useStyles = makeStyles()({
-  dialogContent: {
-    width: '80em',
-  },
-  textAreaFont: {
-    fontFamily: 'Courier New',
-  },
-})
-
-type LGV = LinearGenomeViewModel
-
-/**
- * Fetches and returns a list features for a given list of regions
- */
-async function fetchSequence(
-  model: LGV,
-  regions: Region[],
-  signal?: AbortSignal,
-) {
-  const session = getSession(model)
-  const { leftOffset, rightOffset } = model
-
-  if (!leftOffset || !rightOffset) {
-    throw new Error('no offsets on model to use for range')
-  }
-
-  if (leftOffset.assemblyName !== rightOffset.assemblyName) {
-    throw new Error('not able to fetch sequences from multiple assemblies')
-  }
-  const { rpcManager, assemblyManager } = session
-  const assemblyName = leftOffset.assemblyName || rightOffset.assemblyName || ''
-  const assembly = assemblyManager.get(assemblyName)
-  if (!assembly) {
-    throw new Error(`assembly ${assemblyName} not found`)
-  }
-  const adapterConfig = getConf(assembly, ['sequence', 'adapter'])
-
-  const sessionId = 'getSequence'
-  return rpcManager.call(sessionId, 'CoreGetFeatures', {
-    adapterConfig,
-    regions,
-    sessionId,
-    signal,
-  }) as Promise<Feature[]>
-}
-
-function SequenceDialog({
-  model,
-  handleClose,
-}: {
-  model: LGV
-  handleClose: () => void
-}) {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const [error, setError] = useState<unknown>()
-  const [sequenceChunks, setSequenceChunks] = useState<Feature[]>()
-  const [rev, setReverse] = useState(false)
-  const [copied, setCopied] = useState(false)
-  const [comp, setComplement] = useState(false)
-  const { leftOffset, rightOffset } = model
-  const loading = Boolean(sequenceChunks === undefined)
-
-  useEffect(() => {
-    let active = true
-    const controller = new AbortController()
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        // random note: the current selected region can't be a computed because
-        // it uses action on base1dview even though it's on the ephemeral
-        // base1dview
-        const selection = model.getSelectedRegions(leftOffset, rightOffset)
-        if (selection.length === 0) {
-          throw new Error('Selected region is out of bounds')
-        }
-        const chunks = await fetchSequence(model, selection, controller.signal)
-        if (active) {
-          setSequenceChunks(chunks)
-        }
-      } catch (e) {
-        console.error(e)
-        if (active) {
-          setError(e)
-        }
-      }
-    })()
-
-    return () => {
-      controller.abort()
-      active = false
-    }
-  }, [model, session, leftOffset, rightOffset])
-
-  const sequence = sequenceChunks
-    ? formatSeqFasta(
-        sequenceChunks
-          .filter(f => !!f)
-          .map(chunk => {
-            let chunkSeq = chunk.get('seq')
-            const chunkRefName = chunk.get('refName')
-            const chunkStart = chunk.get('start') + 1
-            const chunkEnd = chunk.get('end')
-            const loc = `${chunkRefName}:${chunkStart}-${chunkEnd}`
-            if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
-              throw new Error(
-                `${loc} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
-                  chunkEnd - chunkStart
-                ).toLocaleString()}`,
-              )
-            }
-
-            if (rev) {
-              chunkSeq = reverse(chunkSeq)
-            }
-            if (comp) {
-              chunkSeq = complement(chunkSeq)
-            }
-            return {
-              header: loc + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
-              seq: chunkSeq,
-            }
-          }),
-      )
-    : ''
-
-  const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
-
-  return (
-    <Dialog
-      maxWidth="xl"
-      open
-      onClose={() => {
-        handleClose()
-        model.setOffsets()
-      }}
-      title="Reference sequence"
-    >
-      <DialogContent>
-        {error ? (
-          <Typography color="error">{`${error}`}</Typography>
-        ) : loading ? (
-          <Container>
-            Retrieving reference sequence...
-            <CircularProgress
-              style={{ marginLeft: 10 }}
-              size={20}
-              disableShrink
-            />
-          </Container>
-        ) : null}
-        <TextField
-          data-testid="rubberband-sequence"
-          variant="outlined"
-          multiline
-          minRows={5}
-          maxRows={10}
-          disabled={sequenceTooLarge}
-          className={classes.dialogContent}
-          fullWidth
-          value={
-            sequenceTooLarge
-              ? 'Reference sequence too large to display, use the download FASTA button'
-              : sequence
-          }
-          InputProps={{
-            readOnly: true,
-            classes: {
-              input: classes.textAreaFont,
-            },
-          }}
-        />
-        <FormGroup>
-          <FormControlLabel
-            control={
-              <Checkbox
-                value={rev}
-                onChange={event => setReverse(event.target.checked)}
-              />
-            }
-            label="Reverse sequence"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                value={comp}
-                onChange={event => setComplement(event.target.checked)}
-              />
-            }
-            label="Complement sequence"
-          />
-        </FormGroup>
-        <Typography style={{ margin: 10 }}>
-          Note: Check both boxes for the "reverse complement"
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => {
-            copy(sequence)
-            setCopied(true)
-            setTimeout(() => setCopied(false), 500)
-          }}
-          disabled={loading || !!error || sequenceTooLarge}
-          color="primary"
-          startIcon={<ContentCopyIcon />}
-        >
-          {copied ? 'Copied' : 'Copy to clipboard'}
-        </Button>
-        <Button
-          onClick={() => {
-            saveAs(
-              new Blob([sequence || ''], {
-                type: 'text/x-fasta;charset=utf-8',
-              }),
-              'jbrowse_ref_seq.fa',
-            )
-          }}
-          disabled={loading || !!error}
-          color="primary"
-          startIcon={<GetAppIcon />}
-        >
-          Download FASTA
-        </Button>
-        <Button onClick={handleClose} variant="contained">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(SequenceDialog)

package/src/LinearGenomeView/components/Gridlines.tsx

@@ -1,119 +0,0 @@
-import React from 'react'
-import {
-  ContentBlock,
-  ElidedBlock,
-  InterRegionPaddingBlock,
-} from '@jbrowse/core/util/blockTypes'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { LinearGenomeViewModel } from '..'
-import {
-  ContentBlock as ContentBlockComponent,
-  ElidedBlock as ElidedBlockComponent,
-  InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
-} from '../../BaseLinearDisplay/components/Block'
-
-import { makeTicks } from '../util'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => ({
-  verticalGuidesZoomContainer: {
-    position: 'absolute',
-    height: '100%',
-    width: '100%',
-    zIndex: 1,
-    pointerEvents: 'none',
-  },
-  verticalGuidesContainer: {
-    position: 'absolute',
-    height: '100%',
-    zIndex: 1,
-    pointerEvents: 'none',
-    display: 'flex',
-  },
-  tick: {
-    position: 'absolute',
-    height: '100%',
-    width: 1,
-  },
-  majorTick: {
-    background: theme.palette.action.disabled,
-  },
-  minorTick: {
-    background: theme.palette.divider,
-  },
-}))
-const RenderedVerticalGuides = observer(({ model }: { model: LGV }) => {
-  const { classes, cx } = useStyles()
-  return (
-    <>
-      {model.staticBlocks.map((block, index) => {
-        if (block instanceof ContentBlock) {
-          const ticks = makeTicks(block.start, block.end, model.bpPerPx)
-          return (
-            <ContentBlockComponent key={`${block.key}-${index}`} block={block}>
-              {ticks.map(tick => {
-                const x =
-                  (block.reversed
-                    ? block.end - tick.base
-                    : tick.base - block.start) / model.bpPerPx
-                return (
-                  <div
-                    key={tick.base}
-                    className={cx(
-                      classes.tick,
-                      tick.type === 'major' || tick.type === 'labeledMajor'
-                        ? classes.majorTick
-                        : classes.minorTick,
-                    )}
-                    style={{ left: x }}
-                  />
-                )
-              })}
-            </ContentBlockComponent>
-          )
-        }
-        if (block instanceof ElidedBlock) {
-          return <ElidedBlockComponent key={block.key} width={block.widthPx} />
-        }
-        if (block instanceof InterRegionPaddingBlock) {
-          return (
-            <InterRegionPaddingBlockComponent
-              key={block.key}
-              width={block.widthPx}
-              boundary={block.variant === 'boundary'}
-            />
-          )
-        }
-        return null
-      })}
-    </>
-  )
-})
-function VerticalGuides({ model }: { model: LGV }) {
-  const { classes } = useStyles()
-  // find the block that needs pinning to the left side for context
-  const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx
-  return (
-    <div
-      className={classes.verticalGuidesZoomContainer}
-      style={{
-        transform:
-          model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
-      }}
-    >
-      <div
-        className={classes.verticalGuidesContainer}
-        style={{
-          left: offsetLeft,
-          width: model.staticBlocks.totalWidthPx,
-        }}
-      >
-        <RenderedVerticalGuides model={model} />
-      </div>
-    </div>
-  )
-}
-
-export default observer(VerticalGuides)

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