react-msaview 6.0.0 → 6.1.0

package/src/components/ResizeHandles.tsx

@@ -1,53 +1,11 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../useDragScroll.ts'
+import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
-
-const handleBg = 'rgba(200,200,200)'
-const handleBgHover = 'rgba(150,150,150)'
-
-/**
- * A draggable divider. `getStart` is read at mousedown and handed back to
- * `onDrag` alongside the pixel delta since, so each handle below only has to say
- * which model dimension it resizes and where it sits.
- */
-function ResizeHandle({
-  axis,
-  getStart,
-  onDrag,
-  style,
-}: {
-  axis: 'x' | 'y'
-  getStart: () => number
-  onDrag: (delta: number, startValue: number) => void
-  style: React.CSSProperties
-}) {
-  const [hovered, setHovered] = useState(false)
-  const { startDrag } = useDragScroll(axis, onDrag)
-
-  return (
-    <div
-      onMouseDown={event => {
-        startDrag(event, getStart())
-      }}
-      onMouseEnter={() => {
-        setHovered(true)
-      }}
-      onMouseLeave={() => {
-        setHovered(false)
-      }}
-      style={{
-        position: 'relative',
-        cursor: axis === 'x' ? 'ew-resize' : 'ns-resize',
-        background: hovered ? handleBgHover : handleBg,
-        ...style,
-      }}
-    />
-  )
-}
+import type { TrackKind } from '../types.ts'
 
 export const VerticalResizeHandle = observer(function ({
   model,
@@ -61,8 +19,9 @@ export const VerticalResizeHandle = observer(function ({
     [model],
   )
   return (
-    <ResizeHandle
+    <DragHandle
       axis="x"
+      variant="resizer"
       getStart={() => model.treeAreaWidth}
       onDrag={onDrag}
       style={{ width: model.resizeHandleWidth }}
@@ -82,8 +41,9 @@ export const HorizontalResizeHandle = observer(function ({
     [model],
   )
   return (
-    <ResizeHandle
+    <DragHandle
       axis="y"
+      variant="resizer"
       getStart={() => model.height}
       onDrag={onDrag}
       style={{ width: '100%', height: model.resizeHandleWidth }}
@@ -91,21 +51,53 @@ export const HorizontalResizeHandle = observer(function ({
   )
 })
 
-export const ConservationTrackResizeHandle = observer(function ({
+// The height behind each resizable track kind. Both bar tracks read one height
+// so conservation and property conservation stay directly comparable; the logo
+// keeps its own, being taller by default. Text tracks are absent: they are one
+// alignment row tall and follow rowHeight, so the zoom controls already size
+// them.
+const trackHeights: Partial<
+  Record<
+    TrackKind,
+    {
+      get: (model: MsaViewModel) => number
+      set: (model: MsaViewModel, height: number) => void
+    }
+  >
+> = {
+  bar: {
+    get: model => model.conservationTrackHeight,
+    set: (model, height) => {
+      model.setConservationTrackHeight(height)
+    },
+  },
+  logo: {
+    get: model => model.sequenceLogoTrackHeight,
+    set: (model, height) => {
+      model.setSequenceLogoTrackHeight(height)
+    },
+  },
+}
+
+export const TrackResizeHandle = observer(function ({
   model,
+  kind,
 }: {
   model: MsaViewModel
+  kind: TrackKind
 }) {
+  const height = trackHeights[kind]
   const onDrag = useCallback(
     (delta: number, startHeight: number) => {
-      model.setConservationTrackHeight(Math.max(10, startHeight + delta))
+      height?.set(model, Math.max(10, startHeight + delta))
     },
-    [model],
+    [model, height],
   )
-  return (
-    <ResizeHandle
+  return height ? (
+    <DragHandle
       axis="y"
-      getStart={() => model.conservationTrackHeight}
+      variant="resizer"
+      getStart={() => height.get(model)}
       onDrag={onDrag}
       style={{
         position: 'absolute',
@@ -116,5 +108,5 @@ export const ConservationTrackResizeHandle = observer(function ({
         zIndex: 1,
       }}
     />
-  )
+  ) : null
 })

package/src/components/VerticalScrollbar.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import ScrollbarThumb from './ScrollbarThumb.tsx'
+import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
@@ -32,8 +32,9 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
         boxSizing: 'border-box',
       }}
     >
-      <ScrollbarThumb
+      <DragHandle
         axis="y"
+        variant="thumb"
         getStart={() => model.scrollY}
         onDrag={onDrag}
         style={{

package/src/components/dialogs/InterProScanDialog.tsx

@@ -10,6 +10,57 @@ import { launchInterProScan } from '../../launchInterProScan.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const FAMILIES = 'Families, domains, sites & repeats'
+const FEATURES = 'Other sequence features'
+const STRUCTURAL = 'Structural domains'
+const OTHER = 'Other category'
+
+// The analyses the EBI iprscan5 endpoint accepts, all on by default. Static, so
+// it lives out here rather than being rebuilt on every render of the dialog.
+const interProScanPrograms = [
+  {
+    name: 'NCBIfam',
+    category: FAMILIES,
+    description: 'NCBI RefSeq FAMs including TIGRFAMs',
+  },
+  {
+    name: 'SFLD',
+    category: FAMILIES,
+    description: 'Structure function linkage database',
+  },
+  {
+    name: 'Phobius',
+    category: FEATURES,
+    description:
+      'A combined transmembrane topology and signal peptide predictor',
+  },
+  { name: 'SignalP', category: FEATURES },
+  { name: 'SignalP_EUK', category: OTHER },
+  { name: 'SignalP_GRAM_POSITIVE', category: OTHER },
+  { name: 'SignalP_GRAM_NEGATIVE', category: OTHER },
+  { name: 'SuperFamily', category: STRUCTURAL },
+  { name: 'Panther', category: FAMILIES },
+  { name: 'Gene3d', category: STRUCTURAL },
+  { name: 'HAMAP', category: FAMILIES },
+  { name: 'PrositeProfiles', category: FAMILIES },
+  { name: 'PrositePatterns', category: FAMILIES },
+  { name: 'Coils', category: FEATURES },
+  { name: 'SMART', category: FAMILIES },
+  {
+    name: 'CDD',
+    category: FAMILIES,
+    description: 'Conserved Domains Database',
+  },
+  { name: 'PRINTS', category: FAMILIES },
+  { name: 'PfamA', category: FAMILIES },
+  { name: 'MobiDBLite', category: FEATURES },
+  { name: 'PIRSF', category: OTHER },
+  { name: 'TMHMM', category: FEATURES },
+  { name: 'AntiFam', category: OTHER },
+  { name: 'FunFam', category: OTHER },
+  { name: 'PIRSR', category: FAMILIES },
+].map(program => ({ ...program, checked: true }))
+
 const InterProScanDialog = observer(function ({
   handleClose,
   model,
@@ -17,134 +68,7 @@ const InterProScanDialog = observer(function ({
   handleClose: () => void
   model: MsaViewModel
 }) {
-  const [vals, setVals] = useState([
-    {
-      name: 'NCBIfam',
-      description: 'NCBI RefSeq FAMs including TIGRFAMs',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'SFLD',
-      description: 'Structure function linkage database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Phobius',
-      checked: true,
-      description:
-        'A combined transmembrane topology and signal peptide predictor',
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'SignalP_EUK',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_POSITIVE',
-      category: 'Other category',
-      checked: true,
-    },
-    {
-      name: 'SignalP_GRAM_NEGATIVE',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'SuperFamily',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'Panther',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Gene3d',
-      category: 'Structural domains',
-      checked: true,
-    },
-    {
-      name: 'HAMAP',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositeProfiles',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PrositePatterns',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'Coils',
-      category: 'Other sequence features',
-      checked: true,
-    },
-    {
-      name: 'SMART',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'CDD',
-      description: 'Conserved Domains Database',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PRINTS',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'PfamA',
-      category: 'Families, domains, sites & repeats',
-      checked: true,
-    },
-    {
-      name: 'MobiDBLite',
-      checked: true,
-      category: 'Other sequence features',
-    },
-    {
-      name: 'PIRSF',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'TMHMM',
-      checked: true,
-      category: 'Other sequence features',
-    },
-
-    {
-      name: 'AntiFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'FunFam',
-      checked: true,
-      category: 'Other category',
-    },
-    {
-      name: 'PIRSR',
-      checked: true,
-      category: 'Families, domains, sites & repeats',
-    },
-  ])
+  const [vals, setVals] = useState(interProScanPrograms)
 
   const programs = vals.filter(e => e.checked).map(e => e.name)
   const [show, setShow] = useState(false)
@@ -197,12 +121,11 @@ const InterProScanDialog = observer(function ({
               <tbody>
                 {vals
                   .toSorted((a, b) => a.category.localeCompare(b.category))
-                  .map(({ name, checked, category }) => (
+                  .map(({ name, checked, category, description }) => (
                     <tr key={name}>
                       <td>
                         <input
                           type="checkbox"
-                          key={name}
                           checked={checked}
                           onChange={() => {
                             setVals(
@@ -215,7 +138,7 @@ const InterProScanDialog = observer(function ({
                           }}
                         />
                       </td>
-                      <td>{name}</td>
+                      <td title={description}>{name}</td>
                       <td>{category}</td>
                     </tr>
                   ))}

package/src/components/header/settingsMenuItems.ts

@@ -12,9 +12,27 @@ function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
   }
 }
 
+// Every track the alignment can show, with its current state. Without this the
+// "Close" item on a track's own dropdown is a one-way door -- there is nowhere
+// else in the UI to turn a track back on.
+function tracksSubMenu(model: MsaViewModel): MenuItem[] {
+  const shown = new Set(model.turnedOnTracks.map(t => t.model.id))
+  return model.tracks.map(({ model: { id, name } }) =>
+    toggle(name, shown.has(id), () => {
+      model.toggleTrack(id)
+    }),
+  )
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
+    {
+      label: 'Tracks',
+      type: 'subMenu' as const,
+      subMenu: tracksSubMenu(model),
+    },
+    { type: 'divider' as const },
     toggle('Show column statistics on hover', showColumnStats, arg => {
       model.setShowColumnStats(arg)
     }),

package/src/components/minimap/Minimap.tsx

@@ -1,19 +1,56 @@
 import React, { useCallback } from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import ScrollbarThumb, { scrollbarThumbFill } from '../ScrollbarThumb.tsx'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
+import DragHandle, { scrollbarThumbFill } from '../DragHandle.tsx'
+import { msaThumbnail } from '../msa/msaRaster.ts'
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const { minimapHeight, msaCanvasWidth } = model
+  const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
+  const theme = useTheme()
   const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(
     model,
     msaCanvasWidth,
   )
 
+  // the whole alignment, sampled down to the bar: it says where the conserved
+  // blocks and the gappy stretches are, which is what a scroll aims at
+  const barWidth = Math.round(msaCanvasWidth * highResScaleFactor)
+  const barHeight = Math.round(MINIMAP_BAR_HEIGHT * highResScaleFactor)
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, barWidth, barHeight)
+      const thumbnail = msaThumbnail({
+        model,
+        theme,
+        height: MINIMAP_BAR_HEIGHT,
+      })
+      if (thumbnail) {
+        ctx.imageSmoothingEnabled = true
+        ctx.drawImage(
+          thumbnail,
+          0,
+          0,
+          thumbnail.width,
+          thumbnail.height,
+          0,
+          0,
+          barWidth,
+          barHeight,
+        )
+      }
+    },
+    width: barWidth,
+    height: barHeight,
+    deps: [model, theme],
+  })
+
   const onDrag = useCallback(
     (delta: number, startScroll: number) => {
       model.setScrollX(startScroll - delta / unit)
@@ -33,15 +70,21 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
         flexShrink: 0,
       }}
     >
-      <div
+      <canvas
+        ref={ref}
+        width={barWidth}
+        height={barHeight}
         style={{
+          display: 'block',
+          width: msaCanvasWidth,
           height: MINIMAP_BAR_HEIGHT,
           boxSizing: 'border-box',
           border: '1px solid #555',
         }}
       />
-      <ScrollbarThumb
+      <DragHandle
         axis="x"
+        variant="thumb"
         getStart={() => model.scrollX}
         onDrag={onDrag}
         style={{

package/src/components/msa/MSACanvas.tsx

@@ -9,8 +9,16 @@ import MSACanvasBlock from './MSACanvasBlock.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const { MSA, msaFilehandle, height, msaCanvasWidth, blocks2d, scrollZoom } =
-    model
+  const {
+    MSA,
+    msaFilehandle,
+    height,
+    msaCanvasWidth,
+    blocks2d,
+    scrollZoom,
+    scrollX,
+    scrollY,
+  } = model
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
     (d: number) => {
@@ -59,14 +67,26 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       }}
     >
       {!MSA && !msaFilehandle ? null : MSA ? (
-        blocks2d.map(([bx, by]) => (
-          <MSACanvasBlock
-            key={`${bx}_${by}`}
-            model={model}
-            offsetX={bx}
-            offsetY={by}
-          />
-        ))
+        // one transform for the whole block set, so a scroll frame is a
+        // compositor move rather than a style write per block
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `translate(${scrollX}px, ${scrollY}px)`,
+            willChange: 'transform',
+          }}
+        >
+          {blocks2d.map(([bx, by]) => (
+            <MSACanvasBlock
+              key={`${bx}_${by}`}
+              model={model}
+              offsetX={bx}
+              offsetY={by}
+            />
+          ))}
+        </div>
       ) : (
         <Loading />
       )}

package/src/components/msa/MSACanvasBlock.tsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useColorContrast } from '../../useColorContrast.ts'
 import ColumnStats from './ColumnStats.tsx'
+import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
 import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
@@ -21,7 +22,7 @@ const MSACanvasBlock = observer(function ({
   offsetX: number
   offsetY: number
 }) {
-  const { scrollY, scrollX, colorScheme, blockSize, highResScaleFactor } = model
+  const { colorScheme, blockSize, highResScaleFactor } = model
   const { theme, contrastScheme } = useColorContrast(colorScheme)
   const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
     {
@@ -42,6 +43,14 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         model,
       })
+      // the alignment background comes from zoom-independent raster tiles; the
+      // domain overlay paints its own boxes instead, and letter-color mode has
+      // no background to paint
+      const rasterTiles =
+        !model.actuallyShowDomains && model.bgColor && rasterSupported()
+      if (rasterTiles) {
+        drawMsaRaster({ ctx, model, theme, offsetX, offsetY })
+      }
       renderMSABlock({
         ctx,
         theme,
@@ -49,6 +58,7 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         contrastScheme,
         model,
+        rasterTiles,
       })
     },
     width: canvasSize,
@@ -79,8 +89,8 @@ const MSACanvasBlock = observer(function ({
         height={canvasSize}
         style={{
           position: 'absolute',
-          top: scrollY + offsetY,
-          left: scrollX + offsetX,
+          top: offsetY,
+          left: offsetX,
           width: blockSize,
           height: blockSize,
         }}