react-msaview 8.0.0 → 8.1.0

package/src/components/Loading.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
-import { Button, Typography } from '@mui/material'
+import { Button, CircularProgress, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import MSAView from './MSAView.tsx'
@@ -16,35 +16,7 @@ const LoadingSpinner = observer(function ({ model }: { model: MsaViewModel }) {
     <div
       style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 20 }}
     >
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <style>
-          {`@keyframes spinner { to { transform: rotate(360deg); } }`}
-        </style>
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="#ccc"
-          strokeWidth="3"
-          fill="none"
-        />
-        <path
-          d="M12 2a10 10 0 0 1 10 10"
-          stroke="#1976d2"
-          strokeWidth="3"
-          fill="none"
-          strokeLinecap="round"
-          style={{
-            animation: 'spinner 1s linear infinite',
-            transformOrigin: 'center',
-          }}
-        />
-      </svg>
+      <CircularProgress size={24} />
       <Typography variant="h6">{status?.msg ?? 'Loading...'}</Typography>
       {status?.onCancel ? (
         <Button

package/src/components/SequenceTextArea.tsx

@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
   dialogContent: {
     background: theme.palette.action.selected,
     margin: 4,
-    minWidth: '80em',
   },
 }))
 

package/src/components/Track.tsx

@@ -78,6 +78,7 @@ const TrackLabel = observer(function TrackLabel({
       </span>
       <IconButton
         className={classes.button}
+        aria-label={`${name} track menu`}
         style={{
           width: trackLabelHeight,
           height: trackLabelHeight,
@@ -105,7 +106,7 @@ const TrackLabel = observer(function TrackLabel({
               closeMenu()
             }}
           >
-            Close
+            Hide track
           </MenuItem>
           <MenuItem
             dense

package/src/components/dialogs/AboutDialog.tsx

@@ -17,16 +17,33 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
       <DialogContent>
         <Typography>
           MSAView {version} (
-          <Link href="https://github.com/gmod/react-msaview">Github</Link>)
+          <Link
+            target="_blank"
+            rel="noopener"
+            href="https://github.com/gmod/react-msaview"
+          >
+            Github
+          </Link>
+          )
         </Typography>
 
         <ul>
           <li>
             <Typography>
               We use some color schemes from the{' '}
-              <Link href="https://github.com/biotite-dev/biotite">biotite</Link>{' '}
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://github.com/biotite-dev/biotite"
+              >
+                biotite
+              </Link>{' '}
               project, and their license is reproduced{' '}
-              <Link href="https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst"
+              >
                 here
               </Link>
             </Typography>
@@ -34,7 +51,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
           <li>
             <Typography>
               See this page for some information on jalview colorings{' '}
-              <Link href="https://www.jalview.org/help/html/colourSchemes/">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://www.jalview.org/help/html/colourSchemes/"
+              >
                 here
               </Link>
             </Typography>
@@ -43,7 +64,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
             <Typography>
               See this page for some info on the clustal, cinema, maeditor, and
               lesk color schemes{' '}
-              <Link href="http://www.bioinformatics.nl/~berndb/aacolour.html">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="http://www.bioinformatics.nl/~berndb/aacolour.html"
+              >
                 here
               </Link>
             </Typography>
@@ -51,7 +76,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
           <li>
             <Typography>
               See this paper about the flower color scheme{' '}
-              <Link href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/"
+              >
                 here
               </Link>
             </Typography>

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -126,7 +126,7 @@ const AnnotationFileDialog = observer(function ({
         <Button
           variant="contained"
           color="primary"
-          disabled={loading}
+          disabled={loading || (choice === 'file' ? !file : !url.trim())}
           onClick={() => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;(async () => {
@@ -154,6 +154,15 @@ const AnnotationFileDialog = observer(function ({
         >
           Open annotations
         </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
       </DialogActions>
     </Dialog>
   )

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -167,7 +167,7 @@ export default function ExportSVGDialog({
             })
           }}
         >
-          {exporting ? 'Exporting…' : 'Submit'}
+          {exporting ? 'Exporting…' : 'Export'}
         </Button>
         <Button
           variant="contained"

package/src/components/dialogs/FeatureDialog.tsx

@@ -47,10 +47,18 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
-  const { annotationTypes, annotations, fillPalette } = model
+  const { annotationTypes, annotations, featureColors, fillPalette } = model
   const counts = new Map<string, number>()
+  const swatches = new Map<string, string>()
   for (const annot of annotations) {
-    counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1)
+    const { accession } = annot
+    counts.set(accession, (counts.get(accession) ?? 0) + 1)
+    if (!swatches.has(accession)) {
+      swatches.set(
+        accession,
+        featureColors.get(annot)?.fill ?? fillPalette[accession]!,
+      )
+    }
   }
   return (
     <>
@@ -86,7 +94,7 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
                     style={{
                       width: 20,
                       height: 20,
-                      background: fillPalette[accession],
+                      background: swatches.get(accession),
                     }}
                   />
                 </TableCell>

package/src/components/header/Header.tsx

@@ -34,7 +34,7 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
     [model],
   )
   return (
-    <div ref={ref} style={{ display: 'flex' }}>
+    <div ref={ref} style={{ display: 'flex', flexWrap: 'wrap' }}>
       <FileMenu model={model} />
       <ColorSchemeMenu model={model} />
       <TreeSettingsMenu model={model} />

package/src/components/header/LoadWarnings.tsx

@@ -1,46 +1,33 @@
 import React from 'react'
 
-import { makeStyles } from '@jbrowse/core/util/tss-react'
 import Warning from '@mui/icons-material/Warning'
-import { Tooltip, Typography } from '@mui/material'
+import { Button, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const useStyles = makeStyles()(theme => ({
-  warning: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-    margin: 'auto',
-    marginLeft: 10,
-    whiteSpace: 'nowrap',
-    color: theme.palette.warning.main,
-    cursor: 'pointer',
-  },
-}))
-
 // A failed optional layer, such as a 404 on the annotations or row metadata
 // that is not JSON, shows here as a dismissible warning. Setting `error` would
 // clear dataInitialized and hide the loaded alignment.
 const LoadWarnings = observer(function ({ model }: { model: MsaViewModel }) {
   const { warnings } = model
-  const { classes } = useStyles()
   if (warnings.length === 0) {
     return null
   }
   return (
     <Tooltip title={`${warnings.join(' ')} (click to dismiss)`}>
-      <Typography
-        component="div"
-        className={classes.warning}
+      <Button
+        aria-label="Dismiss warnings"
+        color="warning"
+        size="small"
+        startIcon={<Warning fontSize="small" />}
+        style={{ margin: 'auto', marginLeft: 10, whiteSpace: 'nowrap' }}
         onClick={() => {
           model.clearWarnings()
         }}
       >
-        <Warning fontSize="small" />
         {warnings.length > 1 ? `${warnings.length} warnings` : 'Warning'}
-      </Typography>
+      </Button>
     </Tooltip>
   )
 })

package/src/components/header/settingsMenuItems.ts

@@ -12,7 +12,7 @@ function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
   }
 }
 
-// the only place in the UI to turn a closed track back on
+// the only place in the UI to turn a hidden 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 } }) =>
@@ -38,10 +38,10 @@ export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       model.setDrawMsaLetters(arg)
     }),
     // inverted: bgColor colors the tile, and off colors the letter
-    toggle('Color letters instead of background of tiles', !bgColor, arg => {
+    toggle('Color letters, not cells', !bgColor, arg => {
       model.setBgColor(!arg)
     }),
-    toggle('Enable hiding gappy columns?', hideGaps, arg => {
+    toggle('Hide gappy columns', hideGaps, arg => {
       model.setHideGaps(arg)
     }),
   ]

package/src/components/import/ImportForm.tsx

@@ -24,11 +24,9 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
           a tree file (Newick format).
         </Typography>
-        <Typography color="error">
-          Note: you can open up just an MSA or just a tree, both are not
-          required. Some MSA files e.g. stockholm format have an embedded tree
-          also and this is fine, and opening a separate tree file is not
-          required.
+        <Typography color="text.secondary">
+          An MSA alone or a tree alone is enough, and a Stockholm file with an
+          embedded tree needs no separate tree file.
         </Typography>
       </div>
 

package/src/components/msa/MSACanvas.tsx

@@ -54,9 +54,6 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       data-testid="msa_canvas"
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
-      onMouseLeave={event => {
-        event.preventDefault()
-      }}
       style={{
         position: 'relative',
         height,

package/src/components/msa/drawFeatureSpans.ts

@@ -1,3 +1,5 @@
+import { minFeatureLabelHeight } from '../../constants.ts'
+
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { Annotation, NodeWithIdsAndLength } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -25,8 +27,14 @@ export interface SpanLayout {
   height: (laneCount: number) => number
   /** the band's top edge, from its row baseline, its lane and its height */
   top: (y: number, lane: number, height: number) => number
-  /** how far a strand head reaches past the body */
+  /** how far back from the feature's end the head starts */
   headLength: (height: number) => number
+  /**
+   * how far the head rises above the band. A bar too thin to taper reads its
+   * direction off a head taller than itself, and the bar sits on the row's
+   * bottom edge, so the room is above.
+   */
+  headRise?: (height: number) => number
 }
 
 /** the rows of `bandsByRow` that `leaves` covers, in display order */
@@ -76,9 +84,26 @@ export function drawFeatureSpans<T extends SpanBand>({
   xMin: number
   xMax: number
 }) {
+  // one row's spans are drawn before any of its labels. Bands are ordered
+  // longest-first so a nested one lands on top, and drawing each label with its
+  // own span put the child's box over the parent's text: `S` covered `RBD`, and
+  // `RBD` read as `RB`. Reused across rows rather than allocated per row.
+  const placed: {
+    band: T
+    xStart: number
+    w: number
+    t: number
+    head: number
+    fill: string
+  }[] = []
+
   for (const { y, bands } of rows) {
     const h = layout.height(bands[0]!.laneCount)
     const headLen = layout.headLength(h)
+    const rise = layout.headRise?.(h) ?? 0
+    const labelled = labelOf !== undefined && h >= minFeatureLabelHeight
+    placed.length = 0
+
     for (const band of bands) {
       const [xStart, xEnd] = xOf(band)
       const w = xEnd - xStart
@@ -90,21 +115,33 @@ export function drawFeatureSpans<T extends SpanBand>({
       ctx.fillStyle = fill
       ctx.strokeStyle = stroke
       const { strand } = band.annotation
+      const head = strand === undefined ? 0 : Math.min(headLen, w)
       if (strand === undefined) {
         ctx.fillRect(xStart, t, w, h)
         ctx.strokeRect(xStart, t, w, h)
       } else {
-        drawGeneArrow({ ctx, x: xStart, t, w, h, headLen, strand })
+        drawGeneArrow({ ctx, x: xStart, t, w, h, head, rise, strand })
       }
-      const label = labelOf?.(band)
-      if (label !== undefined) {
-        const fontSize = Math.min(h - 2, 11)
-        ctx.font = `${fontSize}px sans-serif`
-        if (ctx.measureText(label).width + 2 <= w) {
+      if (labelled) {
+        placed.push({ band, xStart, w, t, head, fill })
+      }
+    }
+
+    if (placed.length > 0) {
+      ctx.font = `${Math.min(h - 2, 11)}px sans-serif`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      for (const { band, xStart, w, t, head, fill } of placed) {
+        // asking for the label here rather than in the pass above keeps the
+        // once-per-block segment numbering in drawing order
+        const label = labelOf!(band)
+        // the head narrows to a point, so only about half of it holds text
+        if (
+          label !== undefined &&
+          ctx.measureText(label).width + 2 <= w - head / 2
+        ) {
           labelDrawn?.(band)
           ctx.fillStyle = contrastText(fill)
-          ctx.textAlign = 'center'
-          ctx.textBaseline = 'middle'
           ctx.fillText(label, xStart + w / 2, t + h / 2)
         }
       }
@@ -112,19 +149,24 @@ export function drawFeatureSpans<T extends SpanBand>({
   }
 }
 
-// A gene arrow: a full-width rectangular body spanning the feature's
-// start..end columns, plus a triangular head that points *beyond* that end in
-// the strand direction (right for +, left for -). Keeping the body aligned to
-// the exact start/end columns means + and - strand features read as having the
-// same boundaries; the arrow lives outside them purely to show transcription
-// direction, preserving the column-by-column homology down the rows.
+/**
+ * A gene arrow, drawn the way gggenes and gggenomes draw one: the head is the
+ * last `head` pixels *of* the feature, tapering to a point at its end, and a
+ * feature shorter than the head is all head. The glyph therefore covers its
+ * start..end span and nothing else, so adjacent genes butt together instead of
+ * biting triangles out of each other, a neighbour never draws over a label, and
+ * a gene 20 columns wide reads as 20 columns wide.
+ *
+ * `rise` lifts the head above the band, for a bar too thin to taper.
+ */
 function drawGeneArrow({
   ctx,
   x,
   t,
   w,
   h,
-  headLen,
+  head,
+  rise,
   strand,
 }: {
   ctx: RenderCtx
@@ -132,18 +174,31 @@ function drawGeneArrow({
   t: number
   w: number
   h: number
-  headLen: number
+  head: number
+  rise: number
   strand: number
 }) {
-  const dir = strand > 0 ? 1 : -1
-  const bodyStart = strand > 0 ? x : x + w
-  const bodyEnd = strand > 0 ? x + w : x
+  const tip = strand > 0 ? x + w : x
+  const tail = strand > 0 ? x : x + w
+  const flange = strand > 0 ? tip - head : tip + head
+  const bottom = t + h
+  const crown = t - rise
+  const point = (crown + bottom) / 2
   ctx.beginPath()
-  ctx.moveTo(bodyStart, t)
-  ctx.lineTo(bodyEnd, t)
-  ctx.lineTo(bodyEnd + dir * headLen, t + h / 2)
-  ctx.lineTo(bodyEnd, t + h)
-  ctx.lineTo(bodyStart, t + h)
+  if (head >= w) {
+    ctx.moveTo(tail, crown)
+    ctx.lineTo(tip, point)
+    ctx.lineTo(tail, bottom)
+  } else {
+    ctx.moveTo(tail, t)
+    ctx.lineTo(flange, t)
+    if (rise > 0) {
+      ctx.lineTo(flange, crown)
+    }
+    ctx.lineTo(tip, point)
+    ctx.lineTo(flange, bottom)
+    ctx.lineTo(tail, bottom)
+  }
   ctx.closePath()
   ctx.fill()
   ctx.stroke()

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -60,16 +60,12 @@ export function renderBoxFeatureCanvasBlock({
   // out); when letters show, the alternating shades alone mark the boundaries
   // and a number would collide with the sequence. A featureLabel encoding names
   // what every span carries instead
-  const drawSegmentLabels =
-    !featureLabels && !showMsaLetters && !subFeatureRows && barHeight >= 9
+  const drawSegmentLabels = !featureLabels && !showMsaLetters && !subFeatureRows
   // a segment (exon) number labels its band once per block, on the topmost
   // visible row carrying that segment, so it reads as a column header for the
   // whole band. Keyed by accession rather than drawn on row 0, because the rows
   // carrying the gene model are often not the first ones in the alignment
   const labelled = drawSegmentLabels ? new Set<string>() : undefined
-  // gene arrow heads stick out up to a row height past the band, so pad the
-  // cull window enough that a band just outside the block still draws its head
-  const cull = rowHeight + colWidth
 
   drawFeatureSpans<DomainBand>({
     ctx,
@@ -88,9 +84,11 @@ export function renderBoxFeatureCanvasBlock({
         y -
         rowHeight +
         (subFeatureRows ? lane * h : domainUnderline ? rowHeight - h : 0),
-      // the head keeps its full size on an underline bar, since a head as short
-      // as the bar reads as a nub rather than as a direction
       headLength: h => (domainUnderline ? rowHeight / 2 : h),
+      // a head only as tall as an underline bar tapers over ten pixels of
+      // three, which reads as nothing; it takes the lower two fifths of the
+      // row instead, leaving the letters above it
+      headRise: h => (domainUnderline ? Math.max(0, rowHeight * 0.4 - h) : 0),
     },
     xOf: band => [band.startCol * colWidth, band.endCol * colWidth],
     colors: featureColors,
@@ -101,7 +99,7 @@ export function renderBoxFeatureCanvasBlock({
         : undefined),
     labelDrawn: band => labelled?.add(band.annotation.accession),
     contrastText: contrastTextFn(theme),
-    xMin: offsetX - cull,
-    xMax: offsetX + bx + cull,
+    xMin: offsetX,
+    xMax: offsetX + bx,
   })
 }

package/src/components/msa/renderMSABlock.ts

@@ -113,19 +113,18 @@ function drawTilesAndText({
     columns,
     colWidth,
     rowHeight,
+    fontSize,
     relativeTo,
     showMsaLetters,
     subFeatureRows,
     domainUnderline,
     domainBandsByStart,
+    featureColors,
   } = model
 
   const tiles = drawTiles && bgColor
   const paintTiles = tiles && !rasterTiles
   if (paintTiles || showMsaLetters) {
-    // a letter takes its color from the cell it lands on, so the scheme lookup
-    // is only waste when nothing draws letters
-    const needsColor = paintTiles || showMsaLetters
     const tileColor = tileColorFn(model)
     // Domain fills come from a categorical palette with no fixed lightness, and
     // a dynamic scheme colors a cell from its column, so a readable letter color
@@ -133,8 +132,10 @@ function drawTilesAndText({
     const contrastText = contrastTextFn(theme)
     const offsetXAligned = xStart * colWidth
     const halfColWidth = colWidth / 2
-    // note: -rowHeight/4 matches +rowHeight/4 in tree
-    const quarterRowHeight = rowHeight / 4
+    // the context is translated by rowHeight/2, so `y` is the row's bottom
+    // edge and the baseline lands fontSize/4 below the row center, where the
+    // tree puts its tip labels
+    const baselineOffset = rowHeight / 2 - fontSize / 4
     // with the tiles coming from the domain overlay instead, letters sit either
     // on a domain box or on the plain background; sub-row layout stacks the boxes
     // above the letters and letter-color mode shrinks them to a bar under the
@@ -148,7 +149,7 @@ function drawTilesAndText({
       const str = columns.get(name)?.slice(xStart, xEnd)
       if (str) {
         const tileY = y - rowHeight
-        const textY = y - quarterRowHeight
+        const textY = y - baselineOffset
         const bandAt = domainBandCursor(
           overDomains ? domainBandsByStart.get(name) : undefined,
         )
@@ -159,7 +160,7 @@ function drawTilesAndText({
           const x = j * colWidth + offsetXAligned
           const isMatchingReference =
             referenceSeq && name !== relativeTo && letter === referenceSeq[j]
-          const color = needsColor ? tileColor(col, letter) : undefined
+          const color = tileColor(col, letter)
 
           if (paintTiles) {
             ctx.fillStyle = isMatchingReference
@@ -172,7 +173,7 @@ function drawTilesAndText({
             const covering = bandAt(col)
             ctx.fillStyle = covering
               ? // on top of a domain box: contrast against the box fill
-                contrastText(model.fillPalette[covering.annotation.accession])
+                contrastText(featureColors.get(covering.annotation)?.fill)
               : isMatchingReference
                 ? // the dot sits on the faint reference-match wash, which is
                   // the theme's background with a little of its text color in it

package/src/components/tracks/drawTracks.ts

@@ -309,18 +309,9 @@ export function drawTrackBlock({
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
-  const {
-    blockSize,
-    bgColor,
-    colWidth,
-    colStats,
-    colorScheme: modelColorScheme,
-    fontSize,
-    rowHeight,
-    showMsaLetters,
-    alphabetMaxBits,
-    highResScaleFactor,
-  } = model
+  // an autorun tracks every model read here, so each kind reads only what it
+  // draws and a vertical zoom leaves the bar and arc canvases alone
+  const { blockSize, colWidth, highResScaleFactor } = model
   const {
     id,
     kind,
@@ -367,9 +358,9 @@ export function drawTrackBlock({
     case 'logo': {
       drawSequenceLogo({
         ctx,
-        colStats,
-        colorScheme: modelColorScheme,
-        maxBits: alphabetMaxBits,
+        colStats: model.colStats,
+        colorScheme: model.colorScheme,
+        maxBits: model.alphabetMaxBits,
         textColor,
         colWidth,
         trackHeight,
@@ -399,13 +390,14 @@ export function drawTrackBlock({
       break
     }
     case 'text': {
+      const { bgColor, fontSize, rowHeight, showMsaLetters } = model
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       setFontSize(ctx, fontSize)
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? modelColorScheme,
+        colorScheme: customColorScheme ?? model.colorScheme,
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,

package/src/components/tree/TreeBranchMenu.tsx

@@ -29,8 +29,7 @@ const TreeBranchMenu = observer(function ({
         top: node.y,
       }}
       transitionDuration={0}
-      keepMounted
-      open={Boolean(node)}
+      open
       onClose={onClose}
     >
       <MenuItem dense disabled>