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

package/esm/FloatingLegend.js

@@ -223,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: () => {
@@ -239,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

@@ -30,11 +30,12 @@ export declare function axisCaptionY(axis: Pick<YAxis, 'ticks'>, bandTops: numbe
  */
 export declare function axisGutterWidth(axis: Pick<YAxis, 'ticks' | 'caption'>): number;
 /**
- * Px the export's left margin holds for these axes: the widest left-side axis
- * that draws, 0 when none does. A sidebar the export parks left of the figure
- * sits past this strip so the scalebars stay beside the plot.
+ * 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' | 'ticks' | 'caption' | 'height' | 'bandTops'>[]): number;
+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

@@ -48,14 +48,15 @@ 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: the widest left-side axis
- * that draws, 0 when none does. A sidebar the export parks left of the figure
- * sits past this strip so the scalebars stay beside the plot.
+ * 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 Math.max(0, ...axes
-        .filter(axis => axis.side !== 'right' && axisDrawn(axis))
-        .map(axisGutterWidth));
+    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/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.11",
+  "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": [
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^6.7.0",
-    "mobx": "^7.0.5",
+    "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.11"
+    "@jbrowse/core": "^5.0.0-beta.13"
   },
   "peerDependencies": {
     "react": ">=19.0.0",