react-msaview 5.10.0 → 6.1.0

package/src/components/header/FileMenu.tsx

@@ -7,7 +7,7 @@ import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import { observer } from 'mobx-react'
 
-import { getDomainMenu } from './getDomainsMenu.ts'
+import { getAnnotationsMenu } from './getAnnotationsMenu.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -41,9 +41,9 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
           },
         },
         {
-          label: 'Domain settings',
+          label: 'Annotations',
           type: 'subMenu',
-          subMenu: getDomainMenu({
+          subMenu: getAnnotationsMenu({
             model,
           }),
         },

package/src/components/header/GappynessSlider.tsx

@@ -16,8 +16,11 @@ const GappynessSlider = observer(function GappynessSlider({
   }
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      {/* the threshold is inclusive: blanks are columns whose gap count is at
+          least ceil(allowedGappyness% of the rows), so at 100 it hides the
+          columns that are entirely gaps rather than nothing */}
       <Typography style={{ whiteSpace: 'nowrap' }}>
-        Hide columns w/ &gt;{allowedGappyness}% gaps
+        Hide columns w/ &ge;{allowedGappyness}% gaps
       </Typography>
       <Slider
         // Named, because the class alone is not enough to find it from outside.

package/src/components/header/{getDomainsMenu.ts → getAnnotationsMenu.ts}

@@ -9,22 +9,23 @@ import Visibility from '@mui/icons-material/Visibility'
 import type { MsaViewModel } from '../../model.ts'
 
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
-const UserProvidedDomainsDialog = lazy(
-  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
+const InterProScanFileDialog = lazy(
+  () => import('../dialogs/InterProScanFileDialog.tsx'),
 )
 const InterProScanDialog = lazy(
   () => import('../dialogs/InterProScanDialog.tsx'),
 )
 
-export function getDomainMenu({ model }: { model: MsaViewModel }) {
+export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
   const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
+  const noneLoaded = noDomains ? ' (none loaded)' : ''
   return [
     {
-      label: 'Open domains...',
+      label: 'Open InterProScan results...',
       icon: FolderOpen,
       onClick: () => {
         model.queueDialog(handleClose => [
-          UserProvidedDomainsDialog,
+          InterProScanFileDialog,
           {
             handleClose,
             model,
@@ -33,7 +34,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: 'Query InterProScan for domains...',
+      label: 'Query InterProScan...',
       icon: Search,
       onClick: () => {
         model.queueDialog(handleClose => [
@@ -46,7 +47,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Show annotations${noneLoaded}`,
       disabled: noDomains,
       icon: Visibility,
       checked: actuallyShowDomains,
@@ -56,7 +57,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Use sub-row layout${noneLoaded}`,
       disabled: noDomains,
       checked: actuallyShowDomains ? subFeatureRows : false,
       icon: Sort,
@@ -66,7 +67,7 @@ export function getDomainMenu({ model }: { model: MsaViewModel }) {
       },
     },
     {
-      label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
+      label: `Filter annotations${noneLoaded}`,
       icon: FilterAlt,
       disabled: noDomains,
       onClick: () => {

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/import/ImportForm.tsx

@@ -50,7 +50,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
             <FileSelector location={treeFile} setLocation={setTreeFile} />
           </div>
           <div>
-            <Typography>InterProScan GFF file or URL (optional)</Typography>
+            <Typography>Annotation GFF file or URL (optional)</Typography>
             <FileSelector location={gffFile} setLocation={setGffFile} />
           </div>
         </div>

package/src/components/import/ImportFormExamples.tsx

@@ -8,149 +8,98 @@ import { load } from './util.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-function ListItem({
-  onClick,
-  model,
-  children,
-}: {
-  onClick: () => void
-  model: MsaViewModel
-  children: React.ReactNode
-}) {
-  return (
-    <li>
-      <Link
-        onClick={event => {
-          model.setError(undefined)
-          event.preventDefault()
-          onClick()
-        }}
-        href="#"
-      >
-        <Typography component="span">{children}</Typography>
-      </Link>
-    </li>
-  )
+const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
+const TREES = 'https://jbrowse.org/genomes/newicktrees'
+
+// each example either points at remote files (msa/tree/gff urls) or carries its
+// data inline, which is what the two bundled small ones do
+interface Example {
+  label: string
+  msa?: string
+  tree?: string
+  gff?: string
+  inline?: { msa: string; tree?: string }
 }
 
-const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
+const examples: Example[] = [
+  {
+    label: '230k COVID-19 samples (tree only)',
+    tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
+  },
+  {
+    label: 'Small protein MSA+tree',
+    inline: { msa: smallMSA, tree: smallTree },
+  },
+  {
+    label: 'Small MSA only',
+    inline: { msa: smallMSAOnly },
+  },
+  {
+    label: 'PFAM SARS-CoV2 multi-stockholm',
+    msa: `${BASE}/pfam-cov2.stock`,
+  },
+  {
+    label: 'PFAM SARS-CoV2 multi-stockholm w/ domains loaded',
+    msa: `${BASE}/pfam-cov2.stock`,
+    gff: `${BASE}/pfam-cov2-domains.gff`,
+  },
+  {
+    label: 'Lysine stockholm file',
+    msa: `${BASE}/Lysine.stock`,
+  },
+  {
+    label: 'PF01601 stockholm file (SARS-CoV2 spike protein)',
+    msa: `${BASE}/PF01601_full.txt`,
+  },
+  {
+    label: 'Europe COVID full genomes (LR883044.1 and 199 other sequences)',
+    msa: `${BASE}/europe_covid.fa`,
+  },
+  {
+    label: 'MAFFT+VeryFastTree(17.9k samples)',
+    msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
+    tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
+  },
+  {
+    label: 'Human BLAST results mfa',
+    msa: 'https://jbrowse.org/demos/ttc39a.mfa',
+  },
+]
+
+function uri(url?: string) {
+  return url ? { uri: url, locationType: 'UriLocation' as const } : undefined
+}
 
 const ImportFormExamples = observer(function ({
   model,
 }: {
   model: MsaViewModel
 }) {
-  function loadUris({
-    msa,
-    tree,
-    gff,
-  }: {
-    msa?: string
-    tree?: string
-    gff?: string
-  }) {
-    try {
-      load(
-        model,
-        msa ? { uri: msa, locationType: 'UriLocation' } : undefined,
-        tree ? { uri: tree, locationType: 'UriLocation' } : undefined,
-        gff ? { uri: gff, locationType: 'UriLocation' } : undefined,
-      )
-    } catch (e) {
-      console.error(e)
-      model.setError(e)
-    }
-  }
   return (
     <ul>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({
-            tree: 'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
-          })
-        }}
-      >
-        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={() => {
-          loadUris({ msa: `${BASE}/pfam-cov2.stock` })
-        }}
-      >
-        PFAM SARS-CoV2 multi-stockholm
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({
-            msa: `${BASE}/pfam-cov2.stock`,
-            gff: `${BASE}/pfam-cov2-domains.gff`,
-          })
-        }}
-      >
-        PFAM SARS-CoV2 multi-stockholm w/ domains loaded
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({ msa: `${BASE}/Lysine.stock` })
-        }}
-      >
-        Lysine stockholm file
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({ msa: `${BASE}/PF01601_full.txt` })
-        }}
-      >
-        PF01601 stockholm file (SARS-CoV2 spike protein)
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({ msa: `${BASE}/europe_covid.fa` })
-        }}
-      >
-        Europe COVID full genomes (LR883044.1 and 199 other sequences)
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({
-            msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
-            tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
-          })
-        }}
-      >
-        MAFFT+VeryFastTree(17.9k samples)
-      </ListItem>
-      <ListItem
-        model={model}
-        onClick={() => {
-          loadUris({ msa: 'https://jbrowse.org/demos/ttc39a.mfa' })
-        }}
-      >
-        Human BLAST results mfa
-      </ListItem>
+      {examples.map(({ label, msa, tree, gff, inline }) => (
+        <li key={label}>
+          <Link
+            href="#"
+            onClick={event => {
+              event.preventDefault()
+              model.setError(undefined)
+              try {
+                if (inline) {
+                  model.setData(inline)
+                } else {
+                  load(model, uri(msa), uri(tree), uri(gff))
+                }
+              } catch (e) {
+                console.error(e)
+                model.setError(e)
+              }
+            }}
+          >
+            <Typography component="span">{label}</Typography>
+          </Link>
+        </li>
+      ))}
     </ul>
   )
 })

package/src/components/minimap/Minimap.tsx

@@ -1,67 +1,102 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../../useDragScroll.ts'
+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 [hovered, setHovered] = useState(false)
-  const { minimapHeight } = model
-  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
-  const fill = 'rgba(66, 119, 127, 0.3)'
+  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 { startDrag } = useDragScroll(
-    'x',
-    useCallback(
-      (delta: number, startScroll: number) => {
-        model.setScrollX(startScroll - delta / unit)
-      },
-      [model, unit],
-    ),
+  const onDrag = useCallback(
+    (delta: number, startScroll: number) => {
+      model.setScrollX(startScroll - delta / unit)
+    },
+    [model, unit],
   )
 
   return (
+    // sized and placed to match the alignment canvas exactly: a minimap that
+    // spans a different width than the columns it maps puts its viewport
+    // rectangle over the wrong ones
     <div
       style={{
         position: 'relative',
         height: minimapHeight,
-        width: '100%',
+        width: msaCanvasWidth,
+        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',
         }}
       />
-      <div
+      <DragHandle
+        axis="x"
+        variant="thumb"
+        getStart={() => model.scrollX}
+        onDrag={onDrag}
         style={{
-          position: 'absolute',
           top: 0,
           left: Math.max(0, s),
-          background: hovered ? 'rgba(66,119,127,0.6)' : fill,
-          cursor: 'pointer',
           height: MINIMAP_BAR_HEIGHT,
           width: w,
-          zIndex: 100,
-        }}
-        onMouseOver={() => {
-          setHovered(true)
-        }}
-        onMouseOut={() => {
-          setHovered(false)
-        }}
-        onMouseDown={event => {
-          startDrag(event, model.scrollX)
         }}
       />
 
-      <svg height={polygonHeight} style={{ width: '100%' }}>
-        <polygon fill={fill} points={polygonPoints} />
+      <svg height={polygonHeight} width={msaCanvasWidth}>
+        <polygon fill={scrollbarThumbFill} points={polygonPoints} />
       </svg>
     </div>
   )

package/src/components/minimap/MinimapSVG.tsx

@@ -6,40 +6,41 @@ import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
-  const { msaAreaWidth } = model
-  const { s, w, polygonPoints } = getMinimapLayout(model)
-  const fillColor = 'rgb(66, 119, 127)'
-  const fillOpacity = 0.3
+const MinimapSVG = observer(
+  ({ model, width }: { model: MsaViewModel; width: number }) => {
+    const { s, w, polygonPoints } = getMinimapLayout(model, width)
+    const fillColor = 'rgb(66, 119, 127)'
+    const fillOpacity = 0.3
 
-  return (
-    <>
-      <rect
-        x={0}
-        y={0}
-        width={msaAreaWidth}
-        height={MINIMAP_BAR_HEIGHT}
-        stroke="#555"
-        fill="none"
-      />
-      <rect
-        x={Math.max(0, s)}
-        y={0}
-        width={w}
-        height={MINIMAP_BAR_HEIGHT}
-        fill={fillColor}
-        fillOpacity={fillOpacity}
-        stroke="#555"
-      />
-      <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
-        <polygon
+    return (
+      <>
+        <rect
+          x={0}
+          y={0}
+          width={width}
+          height={MINIMAP_BAR_HEIGHT}
+          stroke="#555"
+          fill="none"
+        />
+        <rect
+          x={Math.max(0, s)}
+          y={0}
+          width={w}
+          height={MINIMAP_BAR_HEIGHT}
           fill={fillColor}
           fillOpacity={fillOpacity}
-          points={polygonPoints}
+          stroke="#555"
         />
-      </g>
-    </>
-  )
-})
+        <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
+          <polygon
+            fill={fillColor}
+            fillOpacity={fillOpacity}
+            points={polygonPoints}
+          />
+        </g>
+      </>
+    )
+  },
+)
 
 export default MinimapSVG

package/src/components/minimap/minimapLayout.test.ts

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import { expect, test } from 'vitest'
+
+import MSAModelF from '../../model.ts'
+import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+
+// wide enough to overflow horizontally, tall enough to raise the vertical
+// scrollbar — which takes 20px out of the width the alignment actually draws on
+function makeModel() {
+  const names = Array.from({ length: 60 }, (_, i) => `s${i}`)
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    data: { msa: names.map(n => `>${n}\n${'ACGT'.repeat(50)}`).join('\n') },
+  })
+  model.setWidth(1000)
+  return model
+}
+
+test('the viewport rectangle scales by the canvas width, not the msa area', () => {
+  const model = makeModel()
+  expect(model.showVerticalScrollbar).toBe(true)
+  expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
+
+  const { unit, s, w } = getMinimapLayout(model, model.msaCanvasWidth)
+  expect(unit).toBeCloseTo(model.msaCanvasWidth / model.totalWidth)
+  // unscrolled, the rectangle starts at the left edge and covers the fraction
+  // of the alignment on screen. Sizing it by msaAreaWidth instead overstated
+  // that fraction by the scrollbar's width.
+  expect(s).toBeCloseTo(0)
+  expect(w).toBeCloseTo(
+    (model.msaCanvasWidth / model.totalWidth) * model.msaCanvasWidth,
+  )
+})
+
+test('the rectangle tracks scrollX and the trapezoid spans the given width', () => {
+  const model = makeModel()
+  model.setScrollX(-300)
+
+  const width = 400
+  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model, width)
+  expect(s).toBeCloseTo((300 / model.totalWidth) * width)
+  expect(polygonHeight).toBe(model.minimapHeight - MINIMAP_BAR_HEIGHT)
+  // bottom edge spans the full minimap, top edge is the viewport rectangle
+  expect(
+    polygonPoints.endsWith(`0,${polygonHeight} ${width},${polygonHeight}`),
+  ).toBe(true)
+})
+
+test('an empty alignment collapses to a zero-width unit instead of dividing by zero', () => {
+  const model = MSAModelF().create({ type: 'MsaView' })
+  model.setWidth(1000)
+  expect(model.totalWidth).toBe(0)
+  const { unit, s, w } = getMinimapLayout(model, 400)
+  expect(unit).toBe(0)
+  expect(s).toBeCloseTo(0)
+  // still clamped to the minimum grabbable width
+  expect(w).toBe(20)
+})

package/src/components/minimap/minimapLayout.ts

@@ -2,16 +2,21 @@ import type { MsaViewModel } from '../../model.ts'
 
 export const MINIMAP_BAR_HEIGHT = 12
 
-// viewport-rectangle and trapezoid geometry shared by the interactive Minimap
-// and the static MinimapSVG (used for SVG export)
-export function getMinimapLayout(model: MsaViewModel) {
-  const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
-  const unit = msaAreaWidth / numColumns / colWidth
-  const left = -scrollX
-  const s = left * unit
-  const e = (left + msaAreaWidth) * unit
-  const w = Math.max(e - s, 20)
+/**
+ * Viewport-rectangle and trapezoid geometry for a minimap drawn `minimapWidth`
+ * pixels wide, shared by the interactive Minimap and the static MinimapSVG.
+ *
+ * The width is a parameter rather than read off the model because the two
+ * differ: on screen the minimap sits over the alignment canvas, while the SVG
+ * export lays the whole figure out on its own grid. What the rectangle *marks*
+ * is always the on-screen viewport, so that part comes from the model.
+ */
+export function getMinimapLayout(model: MsaViewModel, minimapWidth: number) {
+  const { scrollX, minimapHeight, totalWidth, msaCanvasWidth } = model
+  const unit = totalWidth > 0 ? minimapWidth / totalWidth : 0
+  const s = -scrollX * unit
+  const w = Math.max(msaCanvasWidth * unit, 20)
   const polygonHeight = minimapHeight - MINIMAP_BAR_HEIGHT
-  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaAreaWidth},${polygonHeight}`
+  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${minimapWidth},${polygonHeight}`
   return { unit, s, w, polygonHeight, polygonPoints }
 }