react-msaview 2.0.0 → 2.1.0

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

package/src/components/MSACanvas.tsx

@@ -1,166 +1,11 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react'
-import { Typography, CircularProgress, useTheme } from '@mui/material'
+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 { 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)
-    visibleLeaves.forEach(node => {
-      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 >= 10 && colWidth >= rowHeight / 2) {
-      visibleLeaves.forEach(node => {
-        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
-        const mouseY = event.clientY - top
-        model.setMousePos(
-          Math.floor((mouseX + offsetX) / colWidth) + 1,
-          Math.floor((mouseY + offsetY) / rowHeight),
-        )
-      }}
-      onMouseLeave={() => model.setMousePos()}
-      width={blockSize * highResScaleFactor}
-      height={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        top: scrollY + offsetY,
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: blockSize,
-      }}
-    />
-  )
-})
+import MSABlock from './MSABlock'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model

package/src/components/MSAMouseoverCanvas.tsx

@@ -0,0 +1,87 @@
+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/MSAView.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { lazy, Suspense } from 'react'
 
 import { observer } from 'mobx-react'
 import { Typography } from '@mui/material'
@@ -12,61 +12,13 @@ import Ruler from './Ruler'
 import TreeRuler from './TreeRuler'
 import Header from './Header'
 import Track from './Track'
-import AnnotationDialog from './AnnotationDlg'
 
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
 import { MsaViewModel } from '../model'
+import MSAMouseoverCanvas from './MSAMouseoverCanvas'
 
-const MouseoverCanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const ref = useRef<HTMLCanvasElement>(null)
-  const {
-    height,
-    width,
-    treeAreaWidth,
-    resizeHandleWidth,
-    scrollX,
-    mouseCol,
-    colWidth,
-  } = model
+const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'))
 
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.clearRect(0, 0, width, height)
-
-    if (mouseCol !== undefined) {
-      const x =
-        (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-      ctx.fillStyle = 'rgba(100,100,100,0.5)'
-      ctx.fillRect(x, 0, colWidth, height)
-    }
-  }, [mouseCol, colWidth, 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 observer(function ({ model }: { model: MsaViewModel }) {
   const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model
 
@@ -102,7 +54,7 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
                   </div>
                   <VerticalResizeHandle model={model} />
                   <MSACanvas model={model} />
-                  <MouseoverCanvas model={model} />
+                  <MSAMouseoverCanvas model={model} />
                 </div>
               </div>
             </div>
@@ -112,20 +64,24 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
       )}
 
       {model.DialogComponent ? (
-        <model.DialogComponent
-          {...(model.DialogProps || {})}
-          onClose={() => {
-            model.setDialogComponent(undefined, undefined)
-          }}
-        />
+        <Suspense fallback={null}>
+          <model.DialogComponent
+            {...(model.DialogProps || {})}
+            onClose={() => {
+              model.setDialogComponent(undefined, undefined)
+            }}
+          />
+        </Suspense>
       ) : null}
 
       {model.annotPos ? (
-        <AnnotationDialog
-          data={model.annotPos}
-          model={model}
-          onClose={() => model.clearAnnotPos()}
-        />
+        <Suspense fallback={null}>
+          <AnnotationDialog
+            data={model.annotPos}
+            model={model}
+            onClose={() => model.clearAnnotPos()}
+          />
+        </Suspense>
       ) : null}
     </div>
   )

package/src/components/MultiAlignmentSelector.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Select } from '@mui/material'
+
+// locals
+import { MsaViewModel } from '../model'
+
+const MultiAlignmentSelector = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { currentAlignment, alignmentNames } = model
+  return alignmentNames.length > 0 ? (
+    <Select
+      native
+      value={currentAlignment}
+      size="small"
+      onChange={event => {
+        model.setCurrentAlignment(+(event.target.value as string))
+        model.setScrollX(0)
+        model.setScrollY(0)
+      }}
+    >
+      {alignmentNames.map((option, index) => (
+        <option key={`${option}-${index}`} value={index}>
+          {option}
+        </option>
+      ))}
+    </Select>
+  ) : null
+})
+export default MultiAlignmentSelector

package/src/components/Rubberband.tsx

@@ -142,7 +142,6 @@ function Rubberband({
     setCurrentX(undefined)
   }
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
   function handleMenuItemClick(_: unknown, callback: Function) {
     callback()
     handleClose()

package/src/components/Ruler.tsx

@@ -80,6 +80,7 @@ const Ruler = observer(function ({ model }: { model: MsaViewModel }) {
     MSA,
     colWidth,
     msaAreaWidth,
+    rulerHeight,
     resizeHandleWidth,
     scrollX,
     blocksX,
@@ -96,7 +97,7 @@ const Ruler = observer(function ({ model }: { model: MsaViewModel }) {
         width: msaAreaWidth,
         cursor: 'crosshair',
         overflow: 'hidden',
-        height: 20,
+        height: rulerHeight,
         background: '#ccc',
       }}
     >

package/src/components/Track.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect, lazy, Suspense } from 'react'
 import normalizeWheel from 'normalize-wheel'
 import { observer } from 'mobx-react'
 import { IconButton, Menu, MenuItem } from '@mui/material'
@@ -9,7 +9,8 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 
 // locals
 import { MsaViewModel } from '../model'
-import TrackInfoDialog from './TrackInfoDlg'
+
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDlg'))
 
 const useStyles = makeStyles()({
   button: {
@@ -84,10 +85,12 @@ export const TrackLabel = observer(function ({
         </Menu>
       ) : null}
       {trackInfoDlgOpen ? (
-        <TrackInfoDialog
-          model={track.model}
-          onClose={() => setTrackInfoDlgOpen(false)}
-        />
+        <Suspense fallback={null}>
+          <TrackInfoDialog
+            model={track.model}
+            onClose={() => setTrackInfoDlgOpen(false)}
+          />
+        </Suspense>
       ) : null}
     </div>
   )

package/src/components/TreeBranchMenu.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Menu, MenuItem } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+
+interface Node {
+  x: number
+  y: number
+  name: string
+  id: string
+}
+
+const TreeBranchMenu = observer(function ({
+  node,
+  model,
+  onClose,
+}: {
+  node: Node
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Menu
+      anchorReference="anchorPosition"
+      anchorPosition={{
+        left: node.x,
+        top: node.y,
+      }}
+      transitionDuration={0}
+      keepMounted
+      open={Boolean(node)}
+      onClose={onClose}
+    >
+      <MenuItem dense disabled>
+        {node.name}
+      </MenuItem>
+      <MenuItem
+        dense
+        onClick={() => {
+          model.toggleCollapsed(node.id)
+          onClose()
+        }}
+      >
+        {model.collapsed.includes(node.id)
+          ? 'Expand this node'
+          : 'Collapse this node'}
+      </MenuItem>
+      <MenuItem
+        dense
+        onClick={() => {
+          model.showOnly === node.id
+            ? model.setShowOnly(undefined)
+            : model.setShowOnly(node.id)
+          onClose()
+        }}
+      >
+        {model.showOnly === node.id
+          ? 'Disable show only this node'
+          : 'Show only this node'}
+      </MenuItem>
+    </Menu>
+  )
+})
+
+export default TreeBranchMenu