react-msaview 8.0.0 → 8.2.0

package/dist/useWheelScroll.js

@@ -116,10 +116,6 @@ export function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, scrollZoom,
         };
     }, [mouseDragging, onScrollX, onScrollY]);
     function onMouseDown(event) {
-        const target = event.target;
-        if (target.draggable || target.dataset.resizer) {
-            return;
-        }
         if (event.button === 0) {
             prevX.current = event.clientX;
             prevY.current = event.clientY;

package/dist/useWheelScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWheelScroll.js","sourceRoot":"","sources":["../src/useWheelScroll.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useWheelScroll.js","sourceRoot":"","sources":["../src/useWheelScroll.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.0.0";
+export declare const version = "8.2.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '8.0.0';
+export const version = '8.2.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.0.0",
+    "@jbrowse/svgcanvas": "8.2.0",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.0.0"
+    "msa-parsers": "8.2.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/calculateBlocks.ts

@@ -1,7 +1,8 @@
 // Returns the block offsets (in pixels) needed to cover the viewport along one
 // axis. mapSize/viewportPos/viewportSize are all in pixels. The clamp pins the
-// block set to the content edge so an over-scroll past the end still fills the
-// viewport rather than leaving a gap.
+// block set to the content edge, so an over-scroll past the end still fills
+// the viewport, and content smaller than the viewport mounts only the blocks
+// it covers: none for a tree-only figure with zero columns.
 export function calculateBlocks({
   mapSize,
   blockSize,
@@ -14,8 +15,9 @@ export function calculateBlocks({
   viewportSize: number
 }) {
   const clamped = Math.max(0, Math.min(viewportPos, mapSize - viewportSize))
+  const end = Math.min(clamped + viewportSize, mapSize)
   const minTile = Math.floor(clamped / blockSize)
-  const maxTile = Math.floor((clamped + viewportSize - 1) / blockSize)
+  const maxTile = Math.ceil(end / blockSize) - 1
 
   const blocks = []
   for (let tile = minTile; tile <= maxTile; tile++) {

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