react-msaview 2.1.5 → 3.0.1

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/Loading.tsx

@@ -0,0 +1,16 @@
+import { CircularProgress, Typography } from '@mui/material'
+import React from 'react'
+export default function Loading() {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+      }}
+    >
+      <CircularProgress />
+      <Typography>Loading...</Typography>
+    </div>
+  )
+}

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}

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { Typography, CircularProgress } from '@mui/material'
 import { observer } from 'mobx-react'
 import normalizeWheel from 'normalize-wheel'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 import MSABlock from './MSABlock'
+import Loading from './Loading'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model
@@ -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

package/src/components/MSAPanel/MSAMouseoverCanvas.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react'
+import { observer } from 'mobx-react'
+import { autorun } from 'mobx'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { renderMouseover } from './renderMSAMouseover'
+
+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,158 @@
+// 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
+
+  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)
+      }
+    }
+  }
+}

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -0,0 +1,51 @@
+import { MsaViewModel } from '../../model'
+
+export 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)
+  console.log({ mouseCol })
+
+  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)
+  }
+}

package/src/components/MSAView.tsx

@@ -1,26 +1,21 @@
-import React, { lazy, Suspense } from 'react'
+import React, { Suspense } from 'react'
 
 import { observer } from 'mobx-react'
 import { Typography } from '@mui/material'
 
 // locals
 import ImportForm from './ImportForm'
-import Rubberband from './Rubberband'
-import TreeCanvas from './TreeCanvas'
-import MSACanvas from './MSACanvas'
-import Ruler from './Ruler'
-import TreeRuler from './TreeRuler'
+import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
-
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
 import { MsaViewModel } from '../model'
-import MSAMouseoverCanvas from './MSAMouseoverCanvas'
-
-const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'))
+import MSAPanel from './MSAPanel'
+import TreePanel from './TreePanel'
+import Minimap from './Minimap'
 
-export default observer(function ({ model }: { model: MsaViewModel }) {
-  const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model
+const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
+  const { done, initialized } = model
 
   return (
     <div>
@@ -29,58 +24,43 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
       ) : !done ? (
         <Typography variant="h4">Loading...</Typography>
       ) : (
-        <div>
-          <div style={{ height, overflow: 'hidden' }}>
-            <Header model={model} />
-            <div>
-              <div style={{ position: 'relative' }}>
-                <div style={{ display: 'flex' }}>
-                  <div style={{ flexShrink: 0, width: treeAreaWidth }}>
-                    <TreeRuler model={model} />
-                  </div>
+        <MSAView2 model={model} />
+      )}
+    </div>
+  )
+})
 
-                  <Rubberband
-                    model={model}
-                    ControlComponent={<Ruler model={model} />}
-                  />
-                </div>
-                {turnedOnTracks?.map(track => (
-                  <Track key={track.model.id} model={model} track={track} />
-                ))}
+const MSAView2 = observer(function ({ model }: { model: MsaViewModel }) {
+  const { height, turnedOnTracks, DialogComponent, DialogProps } = model
+  return (
+    <div>
+      <div style={{ height, overflow: 'hidden' }}>
+        <Header model={model} />
+        <div style={{ position: 'relative' }}>
+          <div style={{ display: 'flex' }}>
+            <TreeRuler model={model} />
+            <Minimap model={model} />
+          </div>
+          {turnedOnTracks?.map(track => (
+            <Track key={track.model.id} model={model} track={track} />
+          ))}
 
-                <div style={{ display: 'flex' }}>
-                  <div style={{ flexShrink: 0, width: treeAreaWidth }}>
-                    <TreeCanvas model={model} />
-                  </div>
-                  <VerticalResizeHandle model={model} />
-                  <MSACanvas model={model} />
-                  <MSAMouseoverCanvas model={model} />
-                </div>
-              </div>
-            </div>
+          <div style={{ display: 'flex' }}>
+            <TreePanel model={model} />
+            <VerticalResizeHandle model={model} />
+            <MSAPanel model={model} />
           </div>
-          <HorizontalResizeHandle model={model} />
         </div>
-      )}
+      </div>
+      <HorizontalResizeHandle model={model} />
 
-      {model.DialogComponent ? (
+      {DialogComponent ? (
         <Suspense fallback={null}>
-          <model.DialogComponent
-            {...(model.DialogProps || {})}
-            onClose={() => model.setDialogComponent()}
-          />
-        </Suspense>
-      ) : null}
-
-      {model.annotPos ? (
-        <Suspense fallback={null}>
-          <AnnotationDialog
-            data={model.annotPos}
-            model={model}
-            onClose={() => model.clearAnnotationClickBoundaries()}
-          />
+          <DialogComponent {...DialogProps} />
         </Suspense>
       ) : null}
     </div>
   )
 })
+
+export default MSAView