react-msaview 2.1.5 → 3.0.0

package/src/components/ImportForm/ImportFormExamples.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { smallTree, smallMSA, smallMSAOnly } from './data/seq2'
+import { load } from './util'
+
+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>
+)
+
+const ImportFormExamples = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  return (
+    <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://jbrowse.org/genomes/multiple_sequence_alignments/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: '/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>
+  )
+})
+
+export default ImportFormExamples

package/src/components/ImportForm/index.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import { Button, Container, Grid, Typography } from '@mui/material'
+import { FileSelector } from '@jbrowse/core/ui'
+import { FileLocation } from '@jbrowse/core/util/types'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { load } from './util'
+import ImportFormExamples from './ImportFormExamples'
+
+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>
+          <ImportFormExamples model={model} />
+        </Grid>
+      </Grid>
+    </Container>
+  )
+})

package/src/components/ImportForm/util.ts

@@ -0,0 +1,20 @@
+import { FileLocation } from '@jbrowse/core/util'
+import { MsaViewModel } from '../../model'
+
+export 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)
+  }
+}

package/src/components/MSAPanel/MSABlock.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef, useMemo } from 'react'
+import { autorun } from 'mobx'
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { renderBlock } from './renderMSABlock'
+import { MsaViewModel } from '../../model'
+import { colorContrast } from '../../util'
+
+const MSABlock = observer(function ({
+  model,
+  offsetX,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+}) {
+  const {
+    colWidth,
+    rowHeight,
+    scrollY,
+    scrollX,
+    colorScheme,
+    blockSize,
+    highResScaleFactor,
+  } = model
+  const theme = useTheme()
+
+  const contrastScheme = useMemo(
+    () => colorContrast(colorScheme, theme),
+    [colorScheme, theme],
+  )
+
+  const ref = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+    return autorun(() => {
+      renderBlock({
+        ctx,
+        offsetX,
+        offsetY,
+        contrastScheme,
+        model,
+      })
+    })
+  }, [model, offsetX, offsetY, contrastScheme])
+  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/{MSACanvas.tsx → MSAPanel/MSACanvas.tsx}

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react'
 import normalizeWheel from 'normalize-wheel'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 import MSABlock from './MSABlock'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
@@ -121,10 +121,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       }}
     >
       {!MSA && !msaFilehandle ? null : !MSA ? (
-        <div style={{ position: 'absolute', left: '50%', top: '50%' }}>
-          <CircularProgress />
-          <Typography>Loading...</Typography>
-        </div>
+        <Loading />
       ) : (
         blocks2d.map(([bx, by]) => (
           <MSABlock
@@ -139,4 +136,19 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
+function Loading() {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+      }}
+    >
+      <CircularProgress />
+      <Typography>Loading...</Typography>
+    </div>
+  )
+}
+
 export default MSACanvas

package/src/components/MSAPanel/MSAMouseoverCanvas.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { autorun } from 'mobx'
+
+function renderMouseover({
+  ctx,
+  model,
+}: {
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+}) {
+  const {
+    mouseCol,
+    colWidth,
+    treeAreaWidth,
+    resizeHandleWidth,
+    width,
+    height,
+    rowHeight,
+    scrollX,
+    scrollY,
+    mouseRow,
+    // @ts-expect-error
+    mouseCol2,
+    minimapHeight,
+    totalTrackAreaHeight,
+  } = model
+  ctx.resetTransform()
+  ctx.clearRect(0, 0, width, height)
+
+  if (mouseCol !== undefined) {
+    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    const x =
+      (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
+
+    ctx.fillRect(x, minimapHeight, colWidth, height)
+  }
+
+  if (mouseRow !== undefined) {
+    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    const y =
+      mouseRow * rowHeight + scrollY + minimapHeight + totalTrackAreaHeight
+    ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight)
+  }
+  if (mouseCol2 !== undefined) {
+    ctx.fillStyle = 'rgba(255,255,0,0.2)'
+    const x =
+      (mouseCol2 - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
+
+    ctx.fillRect(x, 0, colWidth, height)
+  }
+}
+
+const MSAMouseoverCanvas = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const { height, width } = model
+  useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+    return autorun(() => {
+      renderMouseover({ ctx, model })
+    })
+  }, [model])
+
+  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/MSAPanel/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import MSACanvas from './MSACanvas'
+import MSAMouseoverCanvas from './MSAMouseoverCanvas'
+import { MsaViewModel } from '../../model'
+
+export default function MSAPanel({ model }: { model: MsaViewModel }) {
+  return (
+    <>
+      <MSACanvas model={model} />
+      <MSAMouseoverCanvas model={model} />
+    </>
+  )
+}

package/src/components/MSAPanel/renderMSABlock.ts

@@ -0,0 +1,160 @@
+// locals
+import { MsaViewModel } from '../../model'
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
+import { NodeWithIdsAndLength } from '../../util'
+import { HierarchyNode } from 'd3-hierarchy'
+
+export function renderBlock({
+  model,
+  offsetX,
+  offsetY,
+  contrastScheme,
+  ctx,
+}: {
+  offsetX: number
+  offsetY: number
+  model: MsaViewModel
+  contrastScheme: Record<string, string>
+  ctx: CanvasRenderingContext2D
+}) {
+  const {
+    hierarchy,
+    colWidth,
+    blockSize,
+    rowHeight,
+    fontSize,
+    highResScaleFactor,
+  } = model
+  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/, `${fontSize}px`)
+
+  const leaves = hierarchy.leaves()
+  const b = blockSize
+
+  const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
+  const yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight))
+  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)
+
+  drawTiles({
+    model,
+    ctx,
+    offsetX,
+    offsetY,
+    xStart,
+    xEnd,
+    visibleLeaves,
+  })
+  drawText({
+    model,
+    ctx,
+    offsetX,
+    contrastScheme,
+    xStart,
+    xEnd,
+    visibleLeaves,
+  })
+}
+
+function drawTiles({
+  model,
+  offsetX,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+}: {
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+}) {
+  const {
+    bgColor,
+    colorSchemeName,
+    colorScheme,
+    colStats,
+    columns,
+    colWidth,
+    rowHeight,
+  } = model
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  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)
+      }
+    }
+  }
+}
+
+function drawText({
+  model,
+  offsetX,
+  contrastScheme,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+}: {
+  offsetX: number
+  model: MsaViewModel
+  contrastScheme: Record<string, string>
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+}) {
+  const { bgColor, colorScheme, columns, colWidth, rowHeight } = model
+  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)
+      }
+    }
+  }
+}