react-msaview 6.1.1 → 6.2.1

package/dist/renderToSvg.js

@@ -2,9 +2,12 @@
 import React from 'react';
 import { renderToStaticMarkup } from '@jbrowse/core/util';
 import { when } from 'mobx';
+import { visibleRowRange } from './components/getVisibleLeaves.js';
 import MinimapSVG from './components/minimap/MinimapSVG.js';
+import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.js';
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.js';
 import { renderMSABlock } from './components/msa/renderMSABlock.js';
+import { visibleColRange } from './components/msa/visibleColRange.js';
 import { renderAllTracks } from './components/tracks/drawTracks.js';
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.js';
 import { colorContrast } from './util.js';
@@ -15,26 +18,35 @@ const LEGEND_ROW_H = 16;
 const LEGEND_SWATCH = 12;
 const LEGEND_FONT = 12;
 const LEGEND_CHAR_W = 7;
+const LEGEND_MAX_W = 360;
+const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6;
 function getLegendWidth(model) {
-    const names = model.visibleDomainTypes.map(d => d.name);
-    const maxLen = Math.max(0, ...names.map(n => n.length));
-    const w = LEGEND_PAD * 2 + LEGEND_SWATCH + 6 + maxLen * LEGEND_CHAR_W;
-    return Math.min(360, Math.max(120, w));
+    const maxLen = model.visibleDomainTypes.reduce((a, d) => Math.max(a, d.name.length), 0);
+    const w = LEGEND_TEXT_X + LEGEND_PAD + maxLen * LEGEND_CHAR_W;
+    return Math.min(LEGEND_MAX_W, Math.max(120, w));
 }
 function getLayout(model, opts) {
-    const { width, height, scrollX, scrollY, totalWidth, totalHeight, treeAreaWidth, totalTrackAreaHeight, minimapHeight, } = model;
+    const { scrollX, scrollY, totalWidth, totalHeight, treeAreaWidth, totalTrackAreaHeight, minimapHeight, msaAreaHeight, msaCanvasWidth, showHorizontalScrollbar, } = model;
     const trackHeight = opts.includeTracks ? totalTrackAreaHeight : 0;
     // the minimap reflects the live viewport scroll position, so it's only
-    // meaningful for a viewport export, never for the entire alignment
-    const includeMinimap = opts.exportType === 'viewport' && !!opts.includeMinimap;
+    // meaningful for a viewport export, never for the entire alignment -- and
+    // only when the live view shows one at all, since a minimap over an alignment
+    // that already fits marks a viewport wider than the bar
+    const includeMinimap = opts.exportType === 'viewport' &&
+        !!opts.includeMinimap &&
+        showHorizontalScrollbar;
     const legendWidth = model.actuallyShowDomains && model.visibleDomainTypes.length > 0
         ? getLegendWidth(model)
         : 0;
-    // width stays content-only (the renderers derive msaAreaWidth from it); the
-    // legend occupies an extra column added at the svg root in MsaSvg
+    // width stays content-only; the legend occupies an extra column added at the
+    // svg root in MsaSvg. The viewport export takes the alignment canvas's own
+    // size rather than the widget's -- the widget box also covers the header, the
+    // resize handle and the scrollbars, and rendering that box exports rows and
+    // columns the scrollbars hide on screen
     return opts.exportType === 'entire'
         ? {
             width: totalWidth + treeAreaWidth,
+            msaAreaWidth: totalWidth,
             height: totalHeight + trackHeight,
             contentHeight: totalHeight,
             trackHeight,
@@ -44,9 +56,10 @@ function getLayout(model, opts) {
             legendWidth,
         }
         : {
-            width,
-            height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
-            contentHeight: height,
+            width: msaCanvasWidth + treeAreaWidth,
+            msaAreaWidth: msaCanvasWidth,
+            height: msaAreaHeight + (includeMinimap ? minimapHeight : 0) + trackHeight,
+            contentHeight: msaAreaHeight,
             trackHeight,
             offsetX: -scrollX,
             offsetY: -scrollY,
@@ -64,38 +77,43 @@ function MsaSvg({ model, theme, Context, layout, }) {
     const { treeAreaWidth, minimapHeight } = model;
     const totalWidth = width + legendWidth;
     const legendTop = includeMinimap ? minimapHeight : 0;
+    const contrastScheme = colorContrast(model.colorScheme, theme);
+    const props = { Context, model, theme, layout, contrastScheme };
     const body = (React.createElement(React.Fragment, null,
-        trackHeight > 0 ? (React.createElement(TrackRendering, { Context: Context, model: model, theme: theme, layout: layout })) : null,
+        trackHeight > 0 ? React.createElement(TrackRendering, { ...props }) : null,
         React.createElement("g", { transform: trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined },
-            React.createElement(CoreRendering, { Context: Context, model: model, theme: theme, layout: layout }))));
+            React.createElement(CoreRendering, { ...props }))));
     return (React.createElement("svg", { width: totalWidth, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${totalWidth} ${height}` },
-        React.createElement("rect", { width: "100%", height: "100%", fill: "white" }),
+        React.createElement("rect", { width: "100%", height: "100%", fill: theme.palette.background.default }),
         includeMinimap ? (React.createElement(React.Fragment, null,
             React.createElement("g", { transform: `translate(${treeAreaWidth} 0)` },
-                React.createElement(MinimapSVG, { model: model, width: width - treeAreaWidth })),
+                React.createElement(MinimapSVG, { model: model, theme: theme })),
             React.createElement("g", { transform: `translate(0 ${minimapHeight})` }, body))) : (body),
         legendWidth > 0 ? (React.createElement("g", { transform: `translate(${width} ${legendTop})` },
-            React.createElement(LegendSVG, { model: model, width: legendWidth }))) : null));
+            React.createElement(LegendSVG, { model: model, theme: theme, width: legendWidth }))) : null));
 }
 // the domain color key drawn as a reserved column to the right of the
 // alignment, mirroring the on-screen AnnotationLegend overlay
-function LegendSVG({ model, width }) {
+function LegendSVG({ model, theme, width, }) {
     const { visibleDomainTypes, fillPalette, strokePalette } = model;
     const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H;
+    // the column is capped at LEGEND_MAX_W, so a name too long for it has to be
+    // clipped here -- text that overruns the reserved width runs off the figure
+    const maxChars = Math.floor((width - LEGEND_TEXT_X - LEGEND_PAD) / LEGEND_CHAR_W);
     return (React.createElement("g", null,
-        React.createElement("rect", { x: 0, y: 0, width: width - 4, height: boxHeight, fill: "white", stroke: "#ccc", rx: 2 }),
+        React.createElement("rect", { x: 0, y: 0, width: width - 4, height: boxHeight, fill: theme.palette.background.paper, stroke: "#ccc", rx: 2 }),
         visibleDomainTypes.map((d, i) => {
             const y = LEGEND_PAD + i * LEGEND_ROW_H;
             return (React.createElement("g", { key: d.accession },
                 React.createElement("rect", { x: LEGEND_PAD, y: y, width: LEGEND_SWATCH, height: LEGEND_SWATCH, fill: fillPalette[d.accession], stroke: strokePalette[d.accession] }),
-                React.createElement("text", { x: LEGEND_PAD + LEGEND_SWATCH + 6, y: y + LEGEND_SWATCH - 1, fontSize: LEGEND_FONT }, d.name)));
+                React.createElement("text", { x: LEGEND_TEXT_X, y: y + LEGEND_SWATCH - 1, fontSize: LEGEND_FONT, fill: theme.palette.text.primary }, d.name.length > maxChars
+                    ? `${d.name.slice(0, Math.max(1, maxChars - 1))}…`
+                    : d.name)));
         })));
 }
-function CoreRendering({ model, theme, layout, Context, }) {
-    const { contentHeight, offsetX, offsetY, width } = layout;
-    const { treeAreaWidth, colorScheme, id } = model;
-    const msaAreaWidth = width - treeAreaWidth;
-    const contrastScheme = colorContrast(colorScheme, theme);
+function CoreRendering({ model, theme, layout, Context, contrastScheme, }) {
+    const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout;
+    const { treeAreaWidth, id } = model;
     const treeCtx = new Context(treeAreaWidth, contentHeight);
     renderTreeCanvas({
         model,
@@ -105,6 +123,7 @@ function CoreRendering({ model, theme, layout, Context, }) {
         blockSizeYOverride: contentHeight,
         highResScaleFactorOverride: 1,
     });
+    const raster = rasterBackground({ model, theme, layout });
     const msaCtx = new Context(msaAreaWidth, contentHeight);
     renderBoxFeatureCanvasBlock({
         model,
@@ -127,16 +146,54 @@ function CoreRendering({ model, theme, layout, Context, }) {
         blockSizeXOverride: msaAreaWidth,
         blockSizeYOverride: contentHeight,
         highResScaleFactorOverride: 1,
+        rasterTiles: !!raster,
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(ClipGroup, { clipId: `tree-${id}`, width: treeAreaWidth, height: contentHeight, ctx: treeCtx }),
-        React.createElement(ClipGroup, { clipId: `msa-${id}`, width: msaAreaWidth, height: contentHeight, transform: `translate(${treeAreaWidth} 0)`, ctx: msaCtx })));
+        React.createElement(ClipGroup, { clipId: `msa-${id}`, width: msaAreaWidth, height: contentHeight, transform: `translate(${treeAreaWidth} 0)`, ctx: msaCtx, underlay: raster })));
 }
-function TrackRendering({ model, theme, layout, Context, }) {
-    const { trackHeight, offsetX, width } = layout;
-    const { treeAreaWidth, colorScheme, id } = model;
-    const msaAreaWidth = width - treeAreaWidth;
-    const contrastScheme = colorContrast(colorScheme, theme);
+/**
+ * The alignment background as a single <image>, on the same terms the live
+ * canvas uses it: no domain overlay painting its own boxes, background coloring
+ * on, and a canvas we can actually read back.
+ *
+ * One node replaces the <rect>-per-cell the vector path emits, which is what
+ * lets an export of a real alignment finish at all. The image is one pixel per
+ * cell drawn across the cells' own rectangle, so it upscales by whole cells --
+ * image-rendering keeps those edges hard rather than smearing them, making it
+ * pixel-for-pixel what the rects drew.
+ */
+function rasterBackground({ model, theme, layout, }) {
+    const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout;
+    const { colWidth, rowHeight, actuallyShowDomains, bgColor } = model;
+    if (actuallyShowDomains || !bgColor || !rasterSupported()) {
+        return undefined;
+    }
+    const { xStart, xEnd } = visibleColRange({
+        offsetX,
+        blockWidth: msaAreaWidth,
+        colWidth,
+    });
+    const { yStart, yEnd } = visibleRowRange({
+        model,
+        offsetY,
+        blockSizeY: contentHeight,
+    });
+    const numCols = Math.min(xEnd, model.numColumns) - xStart;
+    const numRows = Math.min(yEnd, model.leaves.length) - yStart;
+    const href = rasterImageHref({
+        model,
+        theme,
+        col0: xStart,
+        row0: yStart,
+        numCols,
+        numRows,
+    });
+    return href ? (React.createElement("image", { href: href, x: xStart * colWidth - offsetX, y: yStart * rowHeight - offsetY, width: numCols * colWidth, height: numRows * rowHeight, imageRendering: "pixelated", preserveAspectRatio: "none" })) : undefined;
+}
+function TrackRendering({ model, theme, layout, Context, contrastScheme, }) {
+    const { trackHeight, offsetX, msaAreaWidth } = layout;
+    const { treeAreaWidth, id } = model;
     const ctx = new Context(msaAreaWidth, trackHeight);
     renderAllTracks({
         model,
@@ -147,16 +204,38 @@ function TrackRendering({ model, theme, layout, Context, }) {
         blockSizeXOverride: msaAreaWidth,
         highResScaleFactorOverride: 1,
     });
-    return (React.createElement("g", { transform: `translate(${treeAreaWidth} 0)` },
-        React.createElement(ClipGroup, { clipId: `tracks-${id}`, width: msaAreaWidth, height: trackHeight, ctx: ctx })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TrackLabelsSVG, { model: model, theme: theme }),
+        React.createElement("g", { transform: `translate(${treeAreaWidth} 0)` },
+            React.createElement(ClipGroup, { clipId: `tracks-${id}`, width: msaAreaWidth, height: trackHeight, ctx: ctx }))));
+}
+// Each track's name in the tree-width column beside it, where the live view puts
+// it (see TrackLabel). Without these the figure has an unlabeled bar chart and
+// an unlabeled logo, and nothing says which is which.
+function TrackLabelsSVG({ model, theme, }) {
+    const { turnedOnTracks, treeAreaWidth, fontSize, drawLabels } = model;
+    if (!drawLabels) {
+        return null;
+    }
+    let y = 0;
+    return (React.createElement(React.Fragment, null, turnedOnTracks.map(track => {
+        const { id, name, height } = track.model;
+        const size = Math.min(height, fontSize);
+        const baseline = y + height / 2 + size / 3;
+        y += height;
+        return size < 5 ? null : (React.createElement("text", { key: id, x: treeAreaWidth - 4, y: baseline, fontSize: size, textAnchor: "end", fill: theme.palette.text.primary }, name));
+    })));
 }
 // Clips a svgcanvas Context to its box and injects its markup verbatim (it is
-// already serialized SVG, not React).
-function ClipGroup({ clipId, width, height, transform, ctx, }) {
+// already serialized SVG, not React). `underlay` draws beneath that markup,
+// inside the same clip, for the parts of a layer React emits directly.
+function ClipGroup({ clipId, width, height, transform, ctx, underlay, }) {
     return (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
             React.createElement("clipPath", { id: clipId },
                 React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-        React.createElement("g", { clipPath: `url(#${clipId})`, transform: transform, dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML } })));
+        React.createElement("g", { clipPath: `url(#${clipId})`, transform: transform },
+            underlay,
+            React.createElement("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML } }))));
 }
 //# sourceMappingURL=renderToSvg.js.map

package/dist/renderToSvg.js.map

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

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "6.1.1";
+export declare const version = "6.2.1";

package/dist/version.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "6.1.1",
+  "version": "6.2.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -43,8 +43,8 @@
     "@gmod/newick": "^1.0.0",
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "6.1.1",
-    "msa-parsers": "6.1.1"
+    "msa-parsers": "6.2.1",
+    "@jbrowse/svgcanvas": "6.2.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -4,6 +4,7 @@ import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
   Alert,
   Button,
+  CircularProgress,
   DialogActions,
   DialogContent,
   FormControl,
@@ -19,6 +20,16 @@ import Checkbox2 from '../Checkbox2.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// Run after the browser has painted. A requestAnimationFrame callback still
+// runs *before* the frame it was queued for, so one alone hands the main thread
+// to the render with the spinner not yet on screen; the second fires once that
+// frame is out.
+function afterPaint(fn: () => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(fn)
+  })
+}
+
 export default function ExportSVGDialog({
   model,
   onClose,
@@ -32,6 +43,7 @@ export default function ExportSVGDialog({
     'viewport',
   )
   const [error, setError] = useState<unknown>()
+  const [exporting, setExporting] = useState(false)
   const theme = useTheme()
   const {
     totalWidth,
@@ -39,12 +51,20 @@ export default function ExportSVGDialog({
     treeAreaWidth,
     turnedOnTracks,
     totalTrackAreaHeight,
+    numColumns,
+    leaves,
+    showMsaLetters,
   } = model
   const hasTracks = turnedOnTracks.length > 0
   const entireWidth = totalWidth + treeAreaWidth
   const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0)
-  const isLargeExport =
-    exportType === 'entire' && (entireWidth > 10000 || entireHeight > 10000)
+  // the background is one raster image whatever its size, so what the figure
+  // actually costs is its residue letters: each is an svg element of its own.
+  // Past roughly this many the export runs to tens of seconds and can exhaust
+  // the tab's memory outright
+  const glyphs =
+    showMsaLetters && exportType === 'entire' ? numColumns * leaves.length : 0
+  const isLargeExport = glyphs > 100_000
   return (
     <Dialog
       onClose={() => {
@@ -100,8 +120,11 @@ export default function ExportSVGDialog({
         </div>
         {isLargeExport ? (
           <Alert severity="warning" style={{ marginTop: 8 }}>
-            The entire MSA is very large ({Math.round(entireWidth)}x
-            {Math.round(entireHeight)} pixels). Export may be slow or fail.
+            The entire MSA is {Math.round(entireWidth)}x
+            {Math.round(entireHeight)} pixels and draws{' '}
+            {Math.round(glyphs / 1000)}k residue letters, each its own SVG
+            element. Export may be slow or fail — zooming out far enough to hide
+            the letters exports the same alignment as an image instead.
           </Alert>
         ) : null}
       </DialogContent>
@@ -109,25 +132,37 @@ export default function ExportSVGDialog({
         <Button
           variant="contained"
           color="primary"
+          // rendering runs on the main thread and a large figure holds it for
+          // seconds; without this the button stays live through the freeze and
+          // a second click starts a second export
+          disabled={exporting}
+          startIcon={
+            exporting ? <CircularProgress size={16} color="inherit" /> : null
+          }
           onClick={() => {
-            void model
-              .exportSVG({
-                theme,
-                includeMinimap:
-                  exportType === 'entire' ? false : includeMinimap,
-                includeTracks: hasTracks && includeTracks,
-                exportType,
-              })
-              .then(() => {
-                onClose()
-              })
-              .catch((e: unknown) => {
-                console.error(e)
-                setError(e)
-              })
+            setExporting(true)
+            afterPaint(() => {
+              void model
+                .exportSVG({
+                  theme,
+                  includeMinimap,
+                  includeTracks: hasTracks && includeTracks,
+                  exportType,
+                })
+                .then(() => {
+                  onClose()
+                })
+                .catch((e: unknown) => {
+                  console.error(e)
+                  setError(e)
+                })
+                .finally(() => {
+                  setExporting(false)
+                })
+            })
           }}
         >
-          Submit
+          {exporting ? 'Exporting…' : 'Submit'}
         </Button>
         <Button
           variant="contained"

package/src/components/getVisibleLeaves.ts

@@ -1,7 +1,28 @@
 import type { MsaViewModel } from '../model.ts'
 
-// The slice of leaves whose rows intersect a block of height blockSizeY at
-// vertical offset offsetY, padded by one row on each side.
+// The half-open range of rows [yStart, yEnd) whose leaves intersect a block of
+// height blockSizeY at vertical offset offsetY, padded by one row on each side.
+// Y-axis counterpart to visibleColRange.
+export function visibleRowRange({
+  model,
+  offsetY,
+  blockSizeY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  blockSizeY: number
+}) {
+  const { rowHeight } = model
+  return {
+    yStart: Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight)),
+    yEnd: Math.max(
+      0,
+      Math.ceil((offsetY + blockSizeY + rowHeight) / rowHeight),
+    ),
+  }
+}
+
+// The leaves in that range.
 export function getVisibleLeaves({
   model,
   offsetY,
@@ -11,11 +32,6 @@ export function getVisibleLeaves({
   offsetY: number
   blockSizeY: number
 }) {
-  const { leaves, rowHeight } = model
-  const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-  const yEnd = Math.max(
-    0,
-    Math.ceil((offsetY + blockSizeY + rowHeight) / rowHeight),
-  )
-  return leaves.slice(yStart, yEnd)
+  const { yStart, yEnd } = visibleRowRange({ model, offsetY, blockSizeY })
+  return model.leaves.slice(yStart, yEnd)
 }

package/src/components/minimap/Minimap.tsx

@@ -13,10 +13,7 @@ import type { MsaViewModel } from '../../model.ts'
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
   const theme = useTheme()
-  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(
-    model,
-    msaCanvasWidth,
-  )
+  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
 
   // 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

package/src/components/minimap/MinimapSVG.tsx

@@ -1,46 +1,61 @@
 import React from 'react'
 
-import { observer } from 'mobx-react'
-
+import { scrollbarThumbFill } from '../DragHandle.tsx'
+import { canvasHref, msaThumbnail } from '../msa/msaRaster.ts'
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { Theme } from '@mui/material'
 
-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
+// The static counterpart to Minimap, for the SVG export. renderToSvg drives it
+// through renderToStaticMarkup, so it reads the model once and never re-renders
+// -- no observer wrapper.
+export default function MinimapSVG({
+  model,
+  theme,
+}: {
+  model: MsaViewModel
+  theme: Theme
+}) {
+  const { msaCanvasWidth } = model
+  const { s, w, polygonPoints } = getMinimapLayout(model)
+  // the same downsampled alignment the live minimap draws behind its thumb;
+  // undefined wherever a canvas cannot be read back, leaving a bare outline
+  const href = canvasHref(
+    msaThumbnail({ model, theme, height: MINIMAP_BAR_HEIGHT }),
+  )
 
-    return (
-      <>
-        <rect
+  return (
+    <>
+      {href ? (
+        <image
+          href={href}
           x={0}
           y={0}
-          width={width}
+          width={msaCanvasWidth}
           height={MINIMAP_BAR_HEIGHT}
-          stroke="#555"
-          fill="none"
+          preserveAspectRatio="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
-            fill={fillColor}
-            fillOpacity={fillOpacity}
-            points={polygonPoints}
-          />
-        </g>
-      </>
-    )
-  },
-)
-
-export default MinimapSVG
+      ) : null}
+      <rect
+        x={0}
+        y={0}
+        width={msaCanvasWidth}
+        height={MINIMAP_BAR_HEIGHT}
+        stroke="#555"
+        fill="none"
+      />
+      <rect
+        x={Math.max(0, s)}
+        y={0}
+        width={w}
+        height={MINIMAP_BAR_HEIGHT}
+        fill={scrollbarThumbFill}
+        stroke="#555"
+      />
+      <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
+        <polygon fill={scrollbarThumbFill} points={polygonPoints} />
+      </g>
+    </>
+  )
+}

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

@@ -23,7 +23,7 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   expect(model.showVerticalScrollbar).toBe(true)
   expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
 
-  const { unit, s, w } = getMinimapLayout(model, model.msaCanvasWidth)
+  const { unit, s, w } = getMinimapLayout(model)
   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
@@ -34,12 +34,12 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   )
 })
 
-test('the rectangle tracks scrollX and the trapezoid spans the given width', () => {
+test('the rectangle tracks scrollX and the trapezoid spans the bar', () => {
   const model = makeModel()
   model.setScrollX(-300)
 
-  const width = 400
-  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model, width)
+  const { msaCanvasWidth: width } = model
+  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model)
   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
@@ -48,11 +48,22 @@ test('the rectangle tracks scrollX and the trapezoid spans the given width', ()
   ).toBe(true)
 })
 
+test('an alignment that already fits never overflows the bar', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa: '>a\nACGT\n>b\nACGT' },
+  })
+  model.setWidth(1000)
+  expect(model.totalWidth).toBeLessThan(model.msaCanvasWidth)
+  expect(getMinimapLayout(model).w).toBe(model.msaCanvasWidth)
+})
+
 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)
+  const { unit, s, w } = getMinimapLayout(model)
   expect(unit).toBe(0)
   expect(s).toBeCloseTo(0)
   // still clamped to the minimum grabbable width