@jbrowse/display-ui 5.0.0-beta.10 → 5.0.0-beta.13

package/esm/FloatingLegend.js

@@ -37,20 +37,9 @@ const useStyles = makeStyles()(theme => ({
         // rendered inline, where events already pass through)
         pointerEvents: 'auto',
     },
-    // A plain <button>, not MUI's IconButton, and the glyph is `×` rather than
-    // the Material Close icon.
-    //
-    // This component is rendered by canvas, alignments, variants and multi-wiggle
-    // displays *directly*, behind neither bring-your-own seam, so a Material
-    // widget here reaches an embedder who has opted out of both — and the
-    // build-your-own site's zero-MUI census, which no page currently trips only
-    // because no page turns on a colorBy that raises a legend. Same call
-    // `BaseTooltip` made in 2026-08: what it needed was colors, and colors have a
-    // toolkit-free home already. See DISPLAYCHROME.md, "a third seam was
-    // considered for the tooltip and rejected".
-    //
-    // `×` is what `SvgColorLegend` already draws for this control, so the
-    // exported legend and the on-screen one now agree.
+    // A plain <button> with a `×` glyph, not MUI: displays render this legend
+    // directly, behind neither bring-your-own seam. See DISPLAYCHROME.md, "The
+    // bring-your-own seams".
     closeButton: {
         position: 'absolute',
         top: 0,
@@ -234,7 +223,7 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
                 }
                 const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.swatches, style: { minWidth: columns * SWATCH + (columns - 1) * 2 }, children: legendSwatches(item).map(swatch => (_jsx("svg", { width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, `${swatch.shape}-${swatch.color}`))) }), _jsx("span", { className: classes.label, children: item.label })] }));
                 const itemClass = cx(classes.item, item.hidden && classes.hiddenItem);
-                return onItemClick ? (_jsx("button", { type: "button", className: cx(itemClass, classes.itemButton), title: "Show only these rows", onClick: () => {
+                return onItemClick && legendSwatches(item).length > 0 ? (_jsx("button", { type: "button", className: cx(itemClass, classes.itemButton), title: "Show only these rows", onClick: () => {
                         onItemClick(item);
                     }, children: row }, `${item.label}-${i}`)) : (_jsx("div", { className: itemClass, children: row }, `${item.label}-${i}`));
             }), collapsible ? (_jsx("button", { type: "button", className: classes.toggle, onClick: () => {
@@ -250,6 +239,10 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
 // `onItemClick` makes the rows of a section declaring `focusesRows` act —
 // clicking an entry focuses the rows it names. A section coloring features or
 // cells stays inert text beside it.
+//
+// The key covers data at the lane's top right, an overlap Colin accepted on
+// 2026-09-30. A lane shorter than the key scrolls it rather than clipping it,
+// which a still cannot show, so a figure gives that lane more height.
 const FloatingLegend = observer(function FloatingLegend({ sections, title, onDismiss, onDismissSection, onItemClick, maxItems = DEFAULT_MAX_ITEMS, maxWidth = DEFAULT_MAX_WIDTH, top = FLOATING_LEGEND_TOP_PX, right = FLOATING_LEGEND_RIGHT_PX, }) {
     const { classes } = useStyles();
     const nonEmpty = nonEmptyLegendSections(sections);

package/esm/FloatingText.d.ts

@@ -34,8 +34,9 @@ export declare function FloatingText({ x, y, color, fontSize, halo, style, child
  * The same line in an SVG export: two `<text>`s at the baseline `y`, a stroke
  * in the surface colour under the glyphs, since SVG paints stroke over fill
  * and a thick stroke beneath a second copy is how a halo is drawn there. Both
- * carry the size and family explicitly, because a `<text>` with neither takes
- * SVG's 16px default in a saved file.
+ * carry the size, because a `<text>` without one takes SVG's 16px default in a
+ * saved file. An export leaves `fontFamily` out, so the label inherits the
+ * family the export dialog put on the root.
  */
 export declare function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fontFamily, anchor, children, }: {
     x: number;
@@ -44,7 +45,7 @@ export declare function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fon
     halo: string;
     haloWidth: number | string;
     fontSize: number;
-    fontFamily: string;
+    fontFamily?: string;
     anchor?: 'start' | 'middle' | 'end';
     children: ReactNode;
 }): import("react").JSX.Element;

package/esm/FloatingText.js

@@ -39,8 +39,9 @@ export function FloatingText({ x, y, color, fontSize, halo, style, children, ...
  * The same line in an SVG export: two `<text>`s at the baseline `y`, a stroke
  * in the surface colour under the glyphs, since SVG paints stroke over fill
  * and a thick stroke beneath a second copy is how a halo is drawn there. Both
- * carry the size and family explicitly, because a `<text>` with neither takes
- * SVG's 16px default in a saved file.
+ * carry the size, because a `<text>` without one takes SVG's 16px default in a
+ * saved file. An export leaves `fontFamily` out, so the label inherits the
+ * family the export dialog put on the root.
  */
 export function SvgHaloText({ x, y, fill, halo, haloWidth, fontSize, fontFamily, anchor = 'start', children, }) {
     const attrs = { x, y, fontSize, fontFamily, textAnchor: anchor };

package/esm/axisPlacement.d.ts

@@ -29,6 +29,13 @@ export declare function axisCaptionY(axis: Pick<YAxis, 'ticks'>, bandTops: numbe
  * beside the spine.
  */
 export declare function axisGutterWidth(axis: Pick<YAxis, 'ticks' | 'caption'>): number;
+/**
+ * Px the export's left margin holds for these axes, 0 when no left-side axis
+ * draws. `axisGutterLeft` puts every left axis's outer edge this far out, a
+ * wider gutter growing inward over the plot, so a sidebar the export parks left
+ * of the figure sits past this strip.
+ */
+export declare function leftAxisGutterWidth(axes: readonly Pick<YAxis, 'side' | 'height' | 'bandTops'>[]): 0 | 50;
 /** How far in from the plot's right edge a right-side gutter ends in an export. */
 export declare const AXIS_RIGHT_INSET_PX = 4;
 /**

package/esm/axisPlacement.js

@@ -47,6 +47,17 @@ export function axisGutterWidth(axis) {
     }
     return Math.max(AXIS_GUTTER_WIDTH_PX, Math.ceil(CAPTION_BAND_PX + widest + TICK_LABEL_X_PX));
 }
+/**
+ * Px the export's left margin holds for these axes, 0 when no left-side axis
+ * draws. `axisGutterLeft` puts every left axis's outer edge this far out, a
+ * wider gutter growing inward over the plot, so a sidebar the export parks left
+ * of the figure sits past this strip.
+ */
+export function leftAxisGutterWidth(axes) {
+    return axes.some(axis => axis.side !== 'right' && axisDrawn(axis))
+        ? AXIS_GUTTER_WIDTH_PX
+        : 0;
+}
 /** How far in from the plot's right edge a right-side gutter ends in an export. */
 export const AXIS_RIGHT_INSET_PX = 4;
 /**

package/esm/index.d.ts

@@ -29,7 +29,7 @@ export type { AxisSide, ValueScale, ValueScaleRule, YAxis, } from './valueScale.
 export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.ts';
 export type { YScaleTicks } from './yScaleTicks.ts';
 export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.ts';
-export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.ts';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, leftAxisGutterWidth, } from './axisPlacement.ts';
 export { default as AxisGutter } from './AxisGutter.tsx';
 export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.tsx';
 export { default as YScaleBar } from './YScaleBar.tsx';

package/esm/index.js

@@ -64,7 +64,7 @@ export { isLiveModel } from './isLiveModel.js';
 export { BOTTOM_RIGHT_CONTROLS_ORDER, BottomRightCornerContext, } from './bottomRightCorner.js';
 export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.js';
 export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.js';
-export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.js';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, leftAxisGutterWidth, } from './axisPlacement.js';
 export { default as AxisGutter } from './AxisGutter.js';
 export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.js';
 export { default as YScaleBar } from './YScaleBar.js';

package/esm/plainChromeOverlays.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRegionTooLargeError } from '@jbrowse/core/rpc/byteBudget';
 // the subpath, not the `@jbrowse/core/ui` barrel: this file is the MUI-free
 // chrome, and gpuFallback.ts is React-free for exactly that reason
 import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from '@jbrowse/core/ui/gpuFallback';
@@ -137,9 +138,13 @@ const PlainTooLarge = observer(function PlainTooLarge({ model, }) {
                 }, children: "Force load" })] }));
 });
 const PlainErrorBar = observer(function PlainErrorBar({ model, visible, }) {
-    return visible && model.error ? (_jsx("div", { style: overlayBox, role: "alert", children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(model.error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: () => {
+    const { error } = model;
+    if (!visible || !error) {
+        return null;
+    }
+    return isRegionTooLargeError(error) ? (_jsx("div", { style: overlayBox, role: "status", children: _jsx("div", { style: chip, children: _jsx("span", { style: { wordBreak: 'break-word' }, children: error.message }) }) })) : (_jsx("div", { style: overlayBox, role: "alert", children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: () => {
                         model.reload();
-                    }, children: "Retry" })] }) })) : null;
+                    }, children: "Retry" })] }) }));
 });
 // No anti-flash delay here, unlike the MUI set: that timing is a product
 // judgment JBrowse made for its own UI, and an embedder pacing their own

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "5.0.0-beta.10",
+  "version": "5.0.0-beta.13",
   "type": "module",
   "description": "The UI a display draws that is not data: the swappable chrome contract, its toolkit-free implementations, and the track overlay layer",
   "keywords": [
@@ -29,9 +29,10 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.6.1",
+    "@jbrowse/mobx-state-tree": "^6.7.0",
+    "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.10"
+    "@jbrowse/core": "^5.0.0-beta.13"
   },
   "peerDependencies": {
     "react": ">=19.0.0",