react-msaview 1.3.2 → 2.1.0

package/src/components/BoxTrackBlock.tsx

@@ -0,0 +1,198 @@
+import React, { useRef, useMemo, useEffect } from 'react'
+import { observer } from 'mobx-react'
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
+
+// locals
+import { IBoxTrack, MsaViewModel } from '../model'
+import Layout from '../layout'
+
+interface Feat {
+  start: number
+  end: number
+}
+
+const BoxTrackBlock = observer(function ({
+  track,
+  model,
+  offsetX,
+}: {
+  track: IBoxTrack
+  model: MsaViewModel
+  offsetX: number
+}) {
+  const {
+    blockSize,
+    colWidth,
+    blanks,
+    rowHeight,
+    highResScaleFactor,
+    scrollX,
+  } = model
+  const { height, features, associatedRowName } = track.model
+
+  const feats: Feat[] = isStateTreeNode(features)
+    ? // @ts-expect-error
+      getSnapshot(features)
+    : features
+
+  const layout = useMemo(() => {
+    const temp = new Layout()
+
+    feats?.forEach((feature, index) => {
+      const { start, end } = feature
+      if (associatedRowName) {
+        const s = model.rowSpecificBpToPx(associatedRowName, start - 1)
+        const e = model.rowSpecificBpToPx(associatedRowName, end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      } else {
+        const s = model.globalBpToPx(start - 1)
+        const e = model.globalBpToPx(end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      }
+    })
+    return temp
+
+    // might convert to autorun based drawing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowHeight, feats, associatedRowName, model, blanks])
+
+  const ref = useRef<HTMLCanvasElement>(null)
+  const labelRef = useRef<HTMLCanvasElement>(null)
+  const mouseoverRef = 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, height)
+    ctx.translate(-offsetX, 0)
+    ctx.textAlign = 'center'
+    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+    ctx.fillStyle = 'goldenrod'
+    layout.rectangles.forEach(value => {
+      const { minX, maxX, minY, maxY } = value
+
+      const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+      const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+
+      if (x2 - x1 > 0) {
+        ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2)
+      }
+    })
+  }, [
+    associatedRowName,
+    blockSize,
+    colWidth,
+    layout.rectangles,
+    model,
+    rowHeight,
+    height,
+    offsetX,
+    highResScaleFactor,
+    features,
+    blanks,
+  ])
+
+  useEffect(() => {
+    if (!labelRef.current) {
+      return
+    }
+
+    const ctx = labelRef.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    // this logic is very similar to MSACanvas
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, blockSize, height)
+    ctx.translate(-offsetX, 0)
+    ctx.textAlign = 'center'
+    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    ctx.fillStyle = 'black'
+    ctx.textAlign = 'left'
+    for (const value of layout.rectangles.values()) {
+      const { minX, maxX, maxY, minY, data } = value
+
+      const x1 = minX * colWidth
+      const x2 = maxX * colWidth
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const feature = data as any
+
+      if (x2 - x1 > 0) {
+        const note = feature.attributes?.Note?.[0]
+        const name = feature.attributes?.Name?.[0]
+        const type = feature.type
+        ctx.fillText(
+          [type, name, note].filter(f => !!f).join(' - '),
+          Math.max(Math.min(-scrollX, x2), x1),
+          minY + (maxY - minY),
+        )
+      }
+    }
+  }, [
+    blockSize,
+    colWidth,
+    scrollX,
+    highResScaleFactor,
+    height,
+    layout.rectangles,
+    offsetX,
+    features,
+    model,
+    rowHeight,
+    blanks,
+  ])
+
+  return !features ? null : (
+    <>
+      <canvas
+        ref={ref}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={labelRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={mouseoverRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+    </>
+  )
+})
+
+export default BoxTrackBlock

package/src/components/Header.tsx

@@ -0,0 +1,106 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+
+// icons
+import FolderOpen from '@mui/icons-material/FolderOpen'
+import Settings from '@mui/icons-material/Settings'
+import Help from '@mui/icons-material/Help'
+import Assignment from '@mui/icons-material/Assignment'
+import List from '@mui/icons-material/List'
+import ZoomControls from './ZoomControls'
+import MultiAlignmentSelector from './MultiAlignmentSelector'
+
+const SettingsDialog = lazy(() => import('./dialogs/SettingsDlg'))
+const AboutDialog = lazy(() => import('./dialogs/AboutDlg'))
+const DetailsDialog = lazy(() => import('./dialogs/DetailsDlg'))
+const TracklistDialog = lazy(() => import('./dialogs/TracklistDlg'))
+
+const InfoArea = observer(({ model }: { model: MsaViewModel }) => {
+  const { mouseOverRowName, mouseCol } = model
+  return (
+    <div>
+      <Typography display="inline">Row name: {mouseOverRowName}</Typography>
+      <span style={{ marginLeft: 10 }} />
+      <Typography display="inline">Position: {mouseCol}</Typography>
+    </div>
+  )
+})
+
+const Header = observer(({ model }: { model: MsaViewModel }) => {
+  const [settingsDialogViz, setSettingsDialogViz] = useState(false)
+  const [aboutDialogViz, setAboutDialogViz] = useState(false)
+  const [detailsDialogViz, setDetailsDialogViz] = useState(false)
+  const [tracklistDialogViz, setTracklistDialogViz] = useState(false)
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <IconButton
+        onClick={async () => {
+          try {
+            model.setData({ tree: '', msa: '' })
+            await model.setTreeFilehandle(undefined)
+            await model.setMSAFilehandle(undefined)
+            model.setScrollY(0)
+            model.setScrollX(0)
+            model.setCurrentAlignment(0)
+          } catch (e) {
+            console.error(e)
+            model.setError(e)
+          }
+        }}
+      >
+        <FolderOpen />
+      </IconButton>
+      <IconButton onClick={() => setSettingsDialogViz(true)}>
+        <Settings />
+      </IconButton>
+      <IconButton onClick={() => setDetailsDialogViz(true)}>
+        <Assignment />
+      </IconButton>
+      <IconButton onClick={() => setTracklistDialogViz(true)}>
+        <List />
+      </IconButton>
+      <Suspense fallback={null}>
+        {settingsDialogViz ? (
+          <SettingsDialog
+            model={model}
+            onClose={() => setSettingsDialogViz(false)}
+          />
+        ) : null}
+        {aboutDialogViz ? (
+          <AboutDialog onClose={() => setAboutDialogViz(false)} />
+        ) : null}
+        {detailsDialogViz ? (
+          <DetailsDialog
+            model={model}
+            onClose={() => setDetailsDialogViz(false)}
+          />
+        ) : null}
+
+        {tracklistDialogViz ? (
+          <TracklistDialog
+            model={model}
+            onClose={() => setTracklistDialogViz(false)}
+          />
+        ) : null}
+      </Suspense>
+      <MultiAlignmentSelector model={model} />
+      <ZoomControls model={model} />
+      <InfoArea model={model} />
+      <Spacer />
+      <IconButton onClick={() => setAboutDialogViz(true)}>
+        <Help />
+      </IconButton>
+    </div>
+  )
+})
+
+function Spacer() {
+  return <div style={{ flex: 1 }} />
+}
+
+export default Header

package/src/components/ImportForm.tsx

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,164 @@
+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