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

package/esm/trackControl/plainTrackControl.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { createPortal } from 'react-dom';
 import Tooltip from '../tooltip/Tooltip.js';
 import { useTrackControlMenu } from './useTrackControlMenu.js';
@@ -34,14 +35,14 @@ const ICON_PATHS = {
 // warning state exists precisely so the user sees it without hovering. Chosen to
 // stay legible on both a light and a dark track.
 const WARNING_COLOR = '#d97706';
-function Icon({ icon }) {
+const Icon = observer(function Icon({ icon }) {
     return (_jsx("svg", { viewBox: "0 0 16 16", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flex: 'none' }, children: _jsx("path", { d: ICON_PATHS[icon] }) }));
-}
+});
 // The ▾ after a label whose press opens a menu. Drawn like the icons, for the
 // same reason; smaller, because it qualifies the label rather than naming it.
-function Caret() {
+const Caret = observer(function Caret() {
     return (_jsx("svg", { viewBox: "0 0 8 8", width: 8, height: 8, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flex: 'none', marginLeft: -1 }, children: _jsx("path", { d: "M1.5 3l2.5 2.5L6.5 3" }) }));
-}
+});
 function triggerStyle(warning) {
     return {
         font: 'inherit',
@@ -78,7 +79,7 @@ function triggerStyle(warning) {
  * `plainChromeOverlays` — the two are a pair, and both are things you hand to a
  * provider rather than render yourself.
  */
-export default function PlainTrackControl({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }) {
+const PlainTrackControl = observer(function PlainTrackControl({ icon, tooltip, label, options, onClick, onMenuClose, onDelete, warning, }) {
     const { open, triggerProps, menuProps, getOptionProps } = useTrackControlMenu(onMenuClose);
     return (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx(Tooltip, { title: tooltip, children: _jsxs("button", { type: "button", "aria-label": tooltip, "data-testid": `track-control-${icon}`, ...(options ? triggerProps : undefined), style: {
                         ...triggerStyle(!!warning),
@@ -130,4 +131,5 @@ export default function PlainTrackControl({ icon, tooltip, label, options, onCli
                             border: 'none',
                         }, children: [option.selected ? '✓ ' : '', option.label] }, option.label))) }), document.body)
                 : null] }));
-}
+});
+export default PlainTrackControl;

package/esm/trackOverlay/TrackOverlaySlot.d.ts

@@ -6,7 +6,7 @@
  * A display's React tree is sealed in a `contain: strict` sandbox — that is what
  * isolates its paint, and dropping it is measured and rejected (ADR-058). A
  * stacking context comes with the isolation, so floating chrome a display draws
- * (a colour key, hi-c's overlay panel, maf's row labels) cannot out-z-index
+ * (a color key, hi-c's overlay panel, maf's row labels) cannot out-z-index
  * anything painted over the track stack from outside. The escape is a node
  * mounted *beside* the sandbox rather than inside it, published through
  * `TrackOverlayContext`; this component is that node, its context and the paint
@@ -40,7 +40,7 @@
  * `data-gesture-owner`, so anything that does is already exempt from the LGV's
  * click-drag pan.
  */
-export declare function TrackOverlaySlot({ children, zIndex, style, overlayStyle, }: {
+export declare const TrackOverlaySlot: ({ children, zIndex, style, overlayStyle, }: {
     children: React.ReactNode;
     /** Paint order for the overlay node, against whatever the caller draws over
      * the track stack. No default on purpose — see above. */
@@ -51,4 +51,4 @@ export declare function TrackOverlaySlot({ children, zIndex, style, overlayStyle
      * `left` to cancel its Paper border, so the node covers the canvas
      * edge-to-edge rather than leaving a sliver. */
     overlayStyle?: React.CSSProperties;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/trackOverlay/TrackOverlaySlot.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { observer } from 'mobx-react';
 import { TrackOverlayContext } from './TrackOverlayContext.js';
 /**
  * #api
@@ -9,7 +10,7 @@ import { TrackOverlayContext } from './TrackOverlayContext.js';
  * A display's React tree is sealed in a `contain: strict` sandbox — that is what
  * isolates its paint, and dropping it is measured and rejected (ADR-058). A
  * stacking context comes with the isolation, so floating chrome a display draws
- * (a colour key, hi-c's overlay panel, maf's row labels) cannot out-z-index
+ * (a color key, hi-c's overlay panel, maf's row labels) cannot out-z-index
  * anything painted over the track stack from outside. The escape is a node
  * mounted *beside* the sandbox rather than inside it, published through
  * `TrackOverlayContext`; this component is that node, its context and the paint
@@ -43,7 +44,7 @@ import { TrackOverlayContext } from './TrackOverlayContext.js';
  * `data-gesture-owner`, so anything that does is already exempt from the LGV's
  * click-drag pan.
  */
-export function TrackOverlaySlot({ children, zIndex, style, overlayStyle, }) {
+export const TrackOverlaySlot = observer(function TrackOverlaySlot({ children, zIndex, style, overlayStyle, }) {
     // element state rather than a ref, so consumers re-render once the portal
     // target mounts and the context value flips from null to the node
     const [overlayEl, setOverlayEl] = useState(null);
@@ -57,4 +58,4 @@ export function TrackOverlaySlot({ children, zIndex, style, overlayStyle, }) {
                     zIndex,
                     ...overlayStyle,
                 } })] }));
-}
+});

package/esm/valueScale.d.ts

@@ -16,7 +16,7 @@ export interface ValueScaleRule {
 /**
  * #api
  * A value scale a display places its y through, declared so the chrome can
- * derive the axis from it — the score axis's counterpart to a colour scale.
+ * derive the axis from it — the score axis's counterpart to a color scale.
  *
  * `domain` is the resolved `[min, max]`; `height` the band it rules and
  * `offset` the inset of the plot box inside that band (`axisPlotBox(height,
@@ -30,12 +30,12 @@ export interface ValueScaleRule {
  * the display stacks the same plot: the multi-wiggle's rows, a grouped
  * alignments track's coverage band per group, each projected through the
  * display's own scroll; the chrome drops the ones off screen. `[]` is a scale
- * the display maps to colour rather than to y (density rows each in their own
- * colour), which gets the `[min, max]` caption and no axis, as a scale whose
+ * the display maps to color rather than to y (density rows each in their own
+ * color), which gets the `[min, max]` caption and no axis, as a scale whose
  * bands are too short for one does. `side` and `left` are which of the band's
  * edges the display's own panels leave clear for a gutter: `right` where a
- * group label chip takes the left, `left: n` where a dendrogram takes the
- * first `n` px. `caption` is what the scale measures (`TLEN`), as a colour
+ * group label chip takes the left, `left: n` where a dendrogram and row
+ * labels take the first `n` px. `caption` is what the scale measures (`TLEN`), as a color
  * scale's `field` is; the chrome draws it once for the scale, beside the
  * bands on screen, however many it rules. `rules` are the reference lines the
  * scale declares and `grid` a line at every tick, both drawn across every

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.14",
   "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,10 +29,10 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.7.0",
+    "@jbrowse/mobx-state-tree": "^6.9.0",
     "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.13"
+    "@jbrowse/core": "^5.0.0-beta.14"
   },
   "peerDependencies": {
     "react": ">=19.0.0",