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

package/src/LinearGenomeView/components/Cytobands.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-
-// core
-import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { ContentBlock } from '@jbrowse/core/util/blockTypes'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-
-// locals
-import { HEADER_OVERVIEW_HEIGHT } from '..'
-import { getCytobands } from './util'
-
-// rounded rect from https://stackoverflow.com/a/45889603/2129219
-// prettier-ignore
-function rightRoundedRect(x: number, y: number, width: number, height: number, radius: number) {
-  return "M" + x + "," + y
-       + "h" + (width - radius)
-       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
-       + "v" + (height - 2 * radius)
-       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
-       + "h" + (radius - width)
-       + "z";
-}
-
-// prettier-ignore
-function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
-  return "M" + (x + radius) + "," + y
-       + "h" + (width - radius)
-       + "v" + height
-       + "h" + (radius - width)
-       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
-       + "v" + (2 * radius - height)
-       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
-       + "z";
-}
-
-const colorMap: { [key: string]: string | undefined } = {
-  gneg: 'rgb(227,227,227)',
-  gpos25: 'rgb(142,142,142)',
-  gpos50: 'rgb(85,85,85)',
-  gpos100: 'rgb(0,0,0)',
-  gpos75: 'rgb(57,57,57)',
-  gvar: 'rgb(0,0,0)',
-  stalk: 'rgb(127,127,127)',
-  acen: '#800',
-}
-
-export default observer(function Cytobands({
-  overview,
-  block,
-  assembly,
-}: {
-  overview: Base1DViewModel
-  assembly?: Assembly
-  block: ContentBlock
-}) {
-  const { offsetPx, reversed } = block
-  const cytobands = getCytobands(assembly, block.refName)
-  const coords = cytobands.map(f => {
-    const { refName, start, end, type } = f
-    return [
-      overview.bpToPx({
-        refName,
-        coord: start,
-      }),
-      overview.bpToPx({
-        refName,
-        coord: end,
-      }),
-      type,
-    ]
-  })
-
-  const arr = cytobands || []
-  const lcap = reversed ? arr.length - 1 : 0
-  const rcap = reversed ? 0 : arr.length - 1
-
-  let firstCent = true
-  return (
-    <g transform={`translate(-${offsetPx})`}>
-      {coords.map(([start, end, type], index) => {
-        const key = `${start}-${end}-${type}`
-        if (type === 'acen' && firstCent) {
-          firstCent = false
-          return (
-            <polygon
-              key={key}
-              points={[
-                [start, 0],
-                [end, HEADER_OVERVIEW_HEIGHT / 2],
-                [start, HEADER_OVERVIEW_HEIGHT],
-              ].toString()}
-              fill={colorMap[type]}
-            />
-          )
-        }
-        if (type === 'acen' && !firstCent) {
-          return (
-            <polygon
-              key={key}
-              points={[
-                [start, HEADER_OVERVIEW_HEIGHT / 2],
-                [end, 0],
-                [end, HEADER_OVERVIEW_HEIGHT],
-              ].toString()}
-              fill={colorMap[type]}
-            />
-          )
-        }
-
-        if (lcap === index) {
-          return (
-            <path
-              key={key}
-              d={leftRoundedRect(
-                Math.min(start, end),
-                0,
-                Math.abs(end - start),
-                HEADER_OVERVIEW_HEIGHT,
-                8,
-              )}
-              fill={colorMap[type]}
-            />
-          )
-        } else if (rcap === index) {
-          return (
-            <path
-              key={key}
-              d={rightRoundedRect(
-                Math.min(start, end),
-                0,
-                Math.abs(end - start) - 2,
-                HEADER_OVERVIEW_HEIGHT,
-                8,
-              )}
-              fill={colorMap[type]}
-            />
-          )
-        } else {
-          return (
-            <rect
-              key={key}
-              x={Math.min(start, end)}
-              y={0}
-              width={Math.abs(end - start)}
-              height={HEADER_OVERVIEW_HEIGHT}
-              fill={colorMap[type]}
-            />
-          )
-        }
-      })}
-    </g>
-  )
-})

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)