react-msaview 2.1.4 → 3.0.0

package/src/components/ImportForm.tsx

@@ -1,192 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Container, Grid, Typography, Link } from '@mui/material'
-import { observer } from 'mobx-react'
-import { FileSelector } from '@jbrowse/core/ui'
-import { FileLocation } from '@jbrowse/core/util/types'
-
-// locals
-import { MsaViewModel } from '../model'
-import { smallTree, smallMSA, smallMSAOnly } from './data/seq2'
-
-async function load(
-  model: MsaViewModel,
-  msaFile?: FileLocation,
-  treeFile?: FileLocation,
-) {
-  model.setError(undefined)
-  try {
-    if (msaFile) {
-      await model.setMSAFilehandle(msaFile)
-    }
-    if (treeFile) {
-      await model.setTreeFilehandle(treeFile)
-    }
-  } catch (e) {
-    model.setError(e)
-  }
-}
-
-const ListItem = ({
-  onClick,
-  model,
-  children,
-}: {
-  onClick: () => void
-  model: MsaViewModel
-  children: React.ReactNode
-}) => (
-  <li>
-    <Link
-      onClick={event => {
-        model.setError(undefined)
-        event.preventDefault()
-        onClick()
-      }}
-      href="#"
-    >
-      <Typography display="inline">{children}</Typography>
-    </Link>
-  </li>
-)
-export default observer(({ model }: { model: MsaViewModel }) => {
-  const [msaFile, setMsaFile] = useState<FileLocation>()
-  const [treeFile, setTreeFile] = useState<FileLocation>()
-  const { error } = model
-
-  return (
-    <Container>
-      <div style={{ width: '50%' }}>
-        {error ? (
-          <div style={{ padding: 20 }}>
-            <Typography color="error">Error: {`${error}`}</Typography>
-          </div>
-        ) : null}
-        <Typography>
-          Open an MSA file (stockholm or clustal format) and/or a tree file
-          (newick format).
-        </Typography>
-        <Typography color="error">
-          Note: you can open up just an MSA or just a tree, both are not
-          required. Some MSA files e.g. stockholm format have an embedded tree
-          also and this is fine, and opening a separate tree file is not
-          required.
-        </Typography>
-      </div>
-
-      <Grid container spacing={10} justifyContent="center" alignItems="center">
-        <Grid item>
-          <Typography>MSA file or URL</Typography>
-          <FileSelector location={msaFile} setLocation={setMsaFile} />
-          <Typography>Tree file or URL</Typography>
-          <FileSelector location={treeFile} setLocation={setTreeFile} />
-        </Grid>
-
-        <Grid item>
-          <Button
-            onClick={() => load(model, msaFile, treeFile)}
-            variant="contained"
-            color="primary"
-            disabled={!msaFile && !treeFile}
-          >
-            Open
-          </Button>
-        </Grid>
-
-        <Grid item>
-          <Typography>Examples</Typography>
-          <ul>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(model, undefined, {
-                  uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
-                  locationType: 'UriLocation',
-                })
-              }
-            >
-              230k COVID-19 samples (tree only)
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() => {
-                model.setData({ msa: smallMSA, tree: smallTree })
-              }}
-            >
-              Small protein MSA+tree
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() => {
-                model.setData({ msa: smallMSAOnly })
-              }}
-            >
-              Small MSA only
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(model, {
-                  uri: 'https://ihh.github.io/abrowse/build/pfam-cov2.stock',
-                  locationType: 'UriLocation',
-                })
-              }
-            >
-              PFAM SARS-CoV2 multi-stockholm
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(model, {
-                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
-                  locationType: 'UriLocation',
-                })
-              }
-            >
-              Lysine stockholm file
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(model, {
-                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
-                  locationType: 'UriLocation',
-                })
-              }
-            >
-              PF01601 stockholm file (SARS-CoV2 spike protein)
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(model, {
-                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
-                  locationType: 'UriLocation',
-                })
-              }
-            >
-              Europe COVID full genomes (LR883044.1 and 199 other sequences)
-            </ListItem>
-            <ListItem
-              model={model}
-              onClick={() =>
-                load(
-                  model,
-                  {
-                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
-                    locationType: 'UriLocation',
-                  },
-                  {
-                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
-                    locationType: 'UriLocation',
-                  },
-                )
-              }
-            >
-              MAFFT+VeryFastTree(17.9k samples)
-            </ListItem>
-          </ul>
-        </Grid>
-      </Grid>
-    </Container>
-  )
-})

package/src/components/MSABlock.tsx

@@ -1,164 +0,0 @@
-import React, { useEffect, useRef, useMemo } from 'react'
-import { useTheme } from '@mui/material'
-import { observer } from 'mobx-react'
-
-// locals
-import { MsaViewModel } from '../model'
-import { colorContrast } from '../util'
-import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes'
-
-const MSABlock = observer(function ({
-  model,
-  offsetX,
-  offsetY,
-}: {
-  model: MsaViewModel
-  offsetX: number
-  offsetY: number
-}) {
-  const {
-    MSA,
-    colWidth,
-    bgColor,
-    columns,
-    rowHeight,
-    scrollY,
-    scrollX,
-    hierarchy,
-    colorScheme,
-    colorSchemeName,
-    blockSize,
-    highResScaleFactor,
-    colStats,
-  } = model
-  const theme = useTheme()
-
-  const contrastScheme = useMemo(
-    () => colorContrast(colorScheme, theme),
-    [colorScheme, theme],
-  )
-
-  const ref = useRef<HTMLCanvasElement>(null)
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, blockSize)
-    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
-
-    const leaves = hierarchy.leaves()
-    const b = blockSize
-
-    // slice vertical rows, e.g. tree leaves, avoid negative slice
-    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-    const yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight))
-
-    // slice horizontal visible letters, avoid negative slice
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-    const xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth))
-    const visibleLeaves = leaves.slice(yStart, yEnd)
-    for (const node of visibleLeaves) {
-      const {
-        // @ts-expect-error
-        x: y,
-        data: { name },
-      } = node
-
-      const str = columns[name]?.slice(xStart, xEnd)
-      for (let i = 0; i < str?.length; i++) {
-        const letter = str[i]
-        const color =
-          colorSchemeName === 'clustalx_protein_dynamic'
-            ? getClustalXColor(colStats[xStart + i], model, name, xStart + i)
-            : colorSchemeName === 'percent_identity_dynamic'
-            ? getPercentIdentityColor(
-                colStats[xStart + i],
-                model,
-                name,
-                xStart + i,
-              )
-            : colorScheme[letter.toUpperCase()]
-        if (bgColor) {
-          const x = i * colWidth + offsetX - (offsetX % colWidth)
-          ctx.fillStyle = color || 'white'
-          ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
-        }
-      }
-    }
-
-    if (rowHeight >= 5 && colWidth > rowHeight / 2) {
-      for (const node of visibleLeaves) {
-        const {
-          // @ts-expect-error
-          x: y,
-          data: { name },
-        } = node
-
-        const str = columns[name]?.slice(xStart, xEnd)
-        for (let i = 0; i < str?.length; i++) {
-          const letter = str[i]
-          const color = colorScheme[letter.toUpperCase()]
-          const contrast = contrastScheme[letter.toUpperCase()] || 'black'
-          const x = i * colWidth + offsetX - (offsetX % colWidth)
-
-          // note: -rowHeight/4 matches +rowHeight/4 in tree
-          ctx.fillStyle = bgColor ? contrast : color || 'black'
-          ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    MSA,
-    highResScaleFactor,
-    columns,
-    colorScheme,
-    contrastScheme,
-    bgColor,
-    rowHeight,
-    colWidth,
-    hierarchy,
-    offsetX,
-    offsetY,
-    blockSize,
-  ])
-  return (
-    <canvas
-      ref={ref}
-      onMouseMove={event => {
-        if (!ref.current) {
-          return
-        }
-        const { left, top } = ref.current.getBoundingClientRect()
-        const mouseX = event.clientX - left + offsetX
-        const mouseY = event.clientY - top + offsetY
-        model.setMousePos(
-          Math.floor(mouseX / colWidth) + 1,
-          Math.floor(mouseY / rowHeight),
-        )
-      }}
-      onMouseLeave={() => model.setMousePos()}
-      width={blockSize * highResScaleFactor}
-      height={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        top: scrollY + offsetY,
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: blockSize,
-      }}
-    />
-  )
-})
-
-export default MSABlock

package/src/components/MSAMouseoverCanvas.tsx

@@ -1,87 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { observer } from 'mobx-react'
-
-// locals
-import { MsaViewModel } from '../model'
-import { sum } from '@jbrowse/core/util'
-
-const MSAMouseoverCanvas = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  const {
-    height,
-    width,
-    treeAreaWidth,
-    resizeHandleWidth,
-    rulerHeight,
-    turnedOnTracks,
-    scrollX,
-    scrollY,
-    mouseCol,
-    mouseRow,
-    rowHeight,
-    colWidth,
-  } = model
-  const totalTrackAreaHeight = sum(turnedOnTracks.map(r => r.model.height))
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.clearRect(0, 0, width, height)
-
-    ctx.fillStyle = 'rgba(0,0,0,0.15)'
-    if (mouseCol !== undefined) {
-      const x =
-        (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-
-      ctx.fillRect(x, 0, colWidth, height)
-    }
-    if (mouseRow !== undefined) {
-      const y =
-        mouseRow * rowHeight + scrollY + rulerHeight + totalTrackAreaHeight
-      ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight)
-    }
-  }, [
-    mouseCol,
-    colWidth,
-    scrollY,
-    totalTrackAreaHeight,
-    mouseRow,
-    rowHeight,
-    rulerHeight,
-    scrollX,
-    height,
-    resizeHandleWidth,
-    treeAreaWidth,
-    width,
-  ])
-
-  return (
-    <canvas
-      ref={ref}
-      width={width}
-      height={height}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width,
-        height,
-        zIndex: 1000,
-        pointerEvents: 'none',
-      }}
-    />
-  )
-})
-
-export default MSAMouseoverCanvas

package/src/components/Ruler.tsx

@@ -1,123 +0,0 @@
-import React, { useRef } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-// locals
-import { MsaViewModel } from '../model'
-import { makeTicks, mathPower } from './util'
-
-const useStyles = makeStyles()({
-  majorTickLabel: {
-    fontSize: '11px',
-  },
-  majorTick: {
-    stroke: '#555',
-  },
-  minorTick: {
-    stroke: '#999',
-  },
-})
-
-function RulerBlock({
-  start,
-  end,
-  bpPerPx,
-  reversed,
-  major,
-  minor,
-}: {
-  start: number
-  end: number
-  bpPerPx: number
-  reversed?: boolean
-  major?: boolean
-  minor?: boolean
-}) {
-  const { classes } = useStyles()
-  const ticks = makeTicks(start, end, bpPerPx, major, minor)
-  return (
-    <>
-      {ticks.map(tick => {
-        const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
-        return (
-          <line
-            key={tick.base}
-            x1={x}
-            x2={x}
-            y1={11}
-            y2={tick.type === 'major' ? 11 + 6 : 11 + 4}
-            strokeWidth={1}
-            stroke={tick.type === 'major' ? '#555' : '#999'}
-            className={
-              tick.type === 'major' ? classes.majorTick : classes.minorTick
-            }
-            data-bp={tick.base}
-          />
-        )
-      })}
-      {ticks
-        .filter(tick => tick.type === 'major')
-        .map(tick => {
-          const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
-          return (
-            <text
-              x={x}
-              y={10}
-              key={`label-${tick.base}`}
-              textAnchor="middle"
-              style={{ fontSize: '11px' }}
-              className={classes.majorTickLabel}
-            >
-              {mathPower(tick.base + 1)}
-            </text>
-          )
-        })}
-    </>
-  )
-}
-
-const Ruler = observer(function ({ model }: { model: MsaViewModel }) {
-  const {
-    MSA,
-    colWidth,
-    msaAreaWidth,
-    rulerHeight,
-    resizeHandleWidth,
-    scrollX,
-    blocksX,
-    blockSize,
-  } = model
-  const ref = useRef<HTMLDivElement>(null)
-  const offsetX = blocksX[0]
-
-  return !MSA ? null : (
-    <div
-      ref={ref}
-      style={{
-        position: 'relative',
-        width: msaAreaWidth,
-        cursor: 'crosshair',
-        overflow: 'hidden',
-        height: rulerHeight,
-        background: '#ccc',
-      }}
-    >
-      <svg
-        style={{
-          width: blocksX.length * blockSize,
-          position: 'absolute',
-          left: scrollX + offsetX + resizeHandleWidth,
-          pointerEvents: 'none',
-        }}
-      >
-        <RulerBlock
-          key={offsetX}
-          start={offsetX / colWidth}
-          end={offsetX / colWidth + (blockSize * blocksX.length) / colWidth}
-          bpPerPx={1 / colWidth}
-        />
-      </svg>
-    </div>
-  )
-})
-
-export default Ruler