react-msaview 2.0.0 → 2.1.1

package/src/components/Header.tsx

@@ -1,20 +1,23 @@
-import React, { useState } from 'react'
-import { IconButton, Select, Typography } from '@mui/material'
+import React, { Suspense, lazy, useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
 import { MsaViewModel } from '../model'
-import SettingsDialog from './SettingsDlg'
-import AboutDialog from './AboutDlg'
-import DetailsDialog from './DetailsDlg'
-import TracklistDialog from './TracklistDlg'
 
 // icons
-import FolderOpenIcon from '@mui/icons-material/FolderOpen'
-import SettingsIcon from '@mui/icons-material/Settings'
-import HelpIcon from '@mui/icons-material/Help'
-import AssignmentIcon from '@mui/icons-material/Assignment'
-import ListIcon from '@mui/icons-material/List'
+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
@@ -32,7 +35,6 @@ const Header = observer(({ model }: { model: MsaViewModel }) => {
   const [aboutDialogViz, setAboutDialogViz] = useState(false)
   const [detailsDialogViz, setDetailsDialogViz] = useState(false)
   const [tracklistDialogViz, setTracklistDialogViz] = useState(false)
-  const { currentAlignment, alignmentNames } = model
 
   return (
     <div style={{ display: 'flex' }}>
@@ -51,67 +53,54 @@ const Header = observer(({ model }: { model: MsaViewModel }) => {
           }
         }}
       >
-        <FolderOpenIcon />
+        <FolderOpen />
       </IconButton>
       <IconButton onClick={() => setSettingsDialogViz(true)}>
-        <SettingsIcon />
+        <Settings />
       </IconButton>
       <IconButton onClick={() => setDetailsDialogViz(true)}>
-        <AssignmentIcon />
+        <Assignment />
       </IconButton>
       <IconButton onClick={() => setTracklistDialogViz(true)}>
-        <ListIcon />
+        <List />
       </IconButton>
-      {settingsDialogViz ? (
-        <SettingsDialog
-          open
-          model={model}
-          onClose={() => setSettingsDialogViz(false)}
-        />
-      ) : null}
-      {aboutDialogViz ? (
-        <AboutDialog open onClose={() => setAboutDialogViz(false)} />
-      ) : null}
-      {detailsDialogViz ? (
-        <DetailsDialog
-          open
-          model={model}
-          onClose={() => setDetailsDialogViz(false)}
-        />
-      ) : null}
+      <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
-          open
-          model={model}
-          onClose={() => setTracklistDialogViz(false)}
-        />
-      ) : null}
-      {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}
+        {tracklistDialogViz ? (
+          <TracklistDialog
+            model={model}
+            onClose={() => setTracklistDialogViz(false)}
+          />
+        ) : null}
+      </Suspense>
+      <MultiAlignmentSelector model={model} />
+      <ZoomControls model={model} />
       <InfoArea model={model} />
-      <div style={{ flex: 1 }} />
+      <Spacer />
       <IconButton onClick={() => setAboutDialogViz(true)}>
-        <HelpIcon />
+        <Help />
       </IconButton>
     </div>
   )
 })
 
+function Spacer() {
+  return <div style={{ flex: 1 }} />
+}
+
 export default Header

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>
   )