react-msaview 5.9.0 → 6.0.0

package/src/components/header/settingsMenuItems.ts

@@ -1,41 +1,34 @@
 import type { MsaViewModel } from '../../model.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
+function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
+  return {
+    label,
+    type: 'checkbox' as const,
+    checked,
+    onClick: () => {
+      set(!checked)
+    },
+  }
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
-    {
-      label: 'Show column statistics on hover',
-      type: 'checkbox',
-      checked: showColumnStats,
-      onClick: () => {
-        model.setShowColumnStats(!showColumnStats)
-      },
-    },
-    {
-      label: 'Draw letters',
-      type: 'checkbox',
-      checked: drawMsaLetters,
-      onClick: () => {
-        model.setDrawMsaLetters(!drawMsaLetters)
-      },
-    },
-    {
-      label: 'Color letters instead of background of tiles',
-      type: 'checkbox',
-      checked: !bgColor,
-      onClick: () => {
-        model.setBgColor(!bgColor)
-      },
-    },
-    {
-      label: 'Enable hiding gappy columns?',
-      type: 'checkbox',
-      checked: hideGaps,
-      onClick: () => {
-        model.setHideGaps(!hideGaps)
-      },
-    },
+    toggle('Show column statistics on hover', showColumnStats, arg => {
+      model.setShowColumnStats(arg)
+    }),
+    toggle('Draw letters', drawMsaLetters, arg => {
+      model.setDrawMsaLetters(arg)
+    }),
+    // the checkbox reads as the inverse of the property it sets: bgColor draws
+    // the tile, and turning it off is what leaves the letter itself colored
+    toggle('Color letters instead of background of tiles', !bgColor, arg => {
+      model.setBgColor(!arg)
+    }),
+    toggle('Enable hiding gappy columns?', hideGaps, arg => {
+      model.setHideGaps(arg)
+    }),
   ]
 }
 
@@ -48,45 +41,20 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     drawLabels,
   } = model
   return [
-    {
-      label: 'Show branch length',
-      type: 'checkbox',
-      checked: showBranchLen,
-      onClick: () => {
-        model.setShowBranchLen(!showBranchLen)
-      },
-    },
-    {
-      label: 'Show tree',
-      type: 'checkbox',
-      checked: drawTree,
-      onClick: () => {
-        model.setDrawTree(!drawTree)
-      },
-    },
-    {
-      label: 'Draw clickable bubbles on tree branches',
-      type: 'checkbox',
-      checked: drawNodeBubbles,
-      onClick: () => {
-        model.setDrawNodeBubbles(!drawNodeBubbles)
-      },
-    },
-    {
-      label: 'Tree labels align right',
-      type: 'checkbox',
-      checked: labelsAlignRight,
-      onClick: () => {
-        model.setLabelsAlignRight(!labelsAlignRight)
-      },
-    },
-    {
-      label: 'Draw labels',
-      type: 'checkbox',
-      checked: drawLabels,
-      onClick: () => {
-        model.setDrawLabels(!drawLabels)
-      },
-    },
+    toggle('Show branch length', showBranchLen, arg => {
+      model.setShowBranchLen(arg)
+    }),
+    toggle('Show tree', drawTree, arg => {
+      model.setDrawTree(arg)
+    }),
+    toggle('Draw clickable bubbles on tree branches', drawNodeBubbles, arg => {
+      model.setDrawNodeBubbles(arg)
+    }),
+    toggle('Tree labels align right', labelsAlignRight, arg => {
+      model.setLabelsAlignRight(arg)
+    }),
+    toggle('Draw labels', drawLabels, arg => {
+      model.setDrawLabels(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,34 +1,36 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { useDragScroll } from '../../useDragScroll.ts'
+import ScrollbarThumb, { scrollbarThumbFill } from '../ScrollbarThumb.tsx'
 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 } = model
+  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(
+    model,
+    msaCanvasWidth,
+  )
 
-  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
@@ -38,30 +40,20 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           border: '1px solid #555',
         }}
       />
-      <div
+      <ScrollbarThumb
+        axis="x"
+        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 }
 }

package/src/components/msa/{DomainLegend.tsx → AnnotationLegend.tsx}

@@ -7,7 +7,11 @@ import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
+const AnnotationLegend = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const {
     actuallyShowDomains,
     visibleDomainTypes: visible,
@@ -41,7 +45,7 @@ const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
       >
         <IconButton
           size="small"
-          title={expanded ? 'Collapse domain key' : 'Expand domain key'}
+          title={expanded ? 'Collapse key' : 'Expand key'}
           onClick={() => {
             model.setShowDomainLegend(!expanded)
           }}
@@ -76,4 +80,4 @@ const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
   ) : null
 })
 
-export default DomainLegend
+export default AnnotationLegend

package/src/components/msa/MSACanvas.tsx

@@ -9,15 +9,8 @@ import MSACanvasBlock from './MSACanvasBlock.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const {
-    MSA,
-    verticalScrollbarWidth,
-    msaFilehandle,
-    height,
-    msaAreaWidth,
-    blocks2d,
-    scrollZoom,
-  } = model
+  const { MSA, msaFilehandle, height, msaCanvasWidth, blocks2d, scrollZoom } =
+    model
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
     (d: number) => {
@@ -61,7 +54,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         position: 'relative',
         height,
-        width: msaAreaWidth - verticalScrollbarWidth,
+        width: msaCanvasWidth,
         overflow: 'hidden',
       }}
     >