@jbrowse/core 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/util/bezierConnector.d.ts

@@ -1,5 +1,25 @@
+/**
+ * A symmetric cubic's extreme sits 3/4 of the way from its baseline to its
+ * controls; the sashimi labels solve the same equation in the other direction.
+ */
 export declare const CUBIC_APEX_RATIO = 0.75;
+/**
+ * How far a curve can stray outside the band between its two endpoints, which
+ * a culler pads its viewport test by.
+ */
 export declare const BEZIER_CONNECTOR_MAX_REACH_PX = 110;
+/**
+ * One horizontal-tangent connector curve as an SVG path: the read and
+ * breakpoint connector BreakpointSplitView's AlignmentConnections draws, and
+ * the alignments display draws as render-core's `connector` mark. The
+ * geometry is that shader's own, through its JS twin, so the two views cannot
+ * drift in which way a connection leaves its read.
+ *
+ * A discordant connection dips below its ends instead of bowing up over them,
+ * so the two classes read apart at a glance. How deep is the caller's call:
+ * only it knows the band the ink has to survive in, and `discordantDipPx`
+ * (@jbrowse/sv-core) is the law the two views share.
+ */
 export declare function bezierConnectorPath({ x1, y1, x2, y2, s1, s2, leadingEnd2, reversed1, reversed2, maxHandlePx, dipPx, }: {
     x1: number;
     y1: number;

package/esm/util/bezierConnector.js

@@ -1,105 +1,39 @@
-// One horizontal-tangent "oval" connector curve, shared by the alignments
-// linked-read bezier overlay (PileupBezierOverlay) and BreakpointSplitView's
-// AlignmentConnections so the two renderers draw a connection identically. Both
-// describe the same thing — two read endpoints (from the shared
-// connectionEndpoints rule), each segment's strand, and whether the second end
-// is a split junction's 5' edge — and this owns the curve geometry, so the
-// direction logic can't drift between them.
-// A handle or bow larger than the endpoints' own separation folds the cubic
-// back over itself: the curve leaves along its tangent, overshoots the far
-// endpoint, and has to curl back to arrive — the "loop-de-loop"/squiggle seen
-// on tightly-spaced reads. So every shaping term stays under this fraction of
-// the span the curve actually has to cover. Endpoints that nearly touch
-// therefore get no shaping at all and draw as the straight line they should be.
-const SPAN_FACTOR = 0.3;
-// Ceiling on the control-handle length. The span budget is what actually scales
-// the handle — it resolves below this for any connection whose endpoints are
-// closer than ~667px apart, which is nearly all of them — so this only bites on
-// very wide arcs. There it bounds the fold-back hook that an inversion draws at
-// its leading end: unbounded, that hook grows with the arc, and a full-width
-// inversion flings a ~500px curl back across unrelated reads.
-const MAX_HANDLE_PX = 200;
-// The handles are horizontal, so a tall vertical gap (stacked split-view
-// panels) only widens the sideways bulge; past this height it earns no more.
-const MAX_VERTICAL_SPAN_PX = 150;
-// A symmetric cubic's extreme sits 3/4 of the way from its baseline to its
-// control points, so an arc asked to reach a given apex puts its controls 4/3
-// past it. Exported because the sashimi overlay solves the same equation in the
-// other direction, and the two spellings drifting apart would put the insert-
-// size ruler's labels at heights nothing plots at.
-export const CUBIC_APEX_RATIO = 0.75;
-// Vertical bow applied to a connection whose two endpoints share (or nearly
-// share) a row — e.g. a chain whose split segments are all laid out on one
-// pileup row. Without it the horizontal-only handles collapse the cubic to a
-// flat, invisible line lying on the row; the bow lifts the control points so
-// the curve arcs into a visible hump. This is the control-point lift, not the
-// height the curve reaches.
-const MAX_BOW_PX = 30;
-// A discordant connection bows *down* instead of up, so the two classes read
-// apart at a glance. Both renderers follow this: BreakpointSplitView dips its
-// same-level discordant links, and the pileup overlay dips every discordant
-// curve it draws (a normal-orientation pair is a plain line, or bows up over its
-// row where a hidden-segment one would lie on a chain's connecting line). Keep
-// it that way — a renderer that opts out makes "below the reads" mean two
-// different things in two views of the same data.
-//
-// HOW DEEP is the renderer's call, not this file's. Depth is the mark's one free
-// channel, and only the renderer knows the band the ink has to survive in — the
-// pileup clips each section at its band bottom, and the split view bleeds a
-// too-deep dip into the panel below. So callers pass the depth they want and
-// `discordantDipPx` (@jbrowse/sv-core) is the law the two of them share.
-// How far a curve can stray outside the band between its two endpoints. The dip
-// is the deeper of the two shaping terms, so this is a ceiling on it, applied
-// here rather than trusted to a caller: a culler pads its viewport test by this,
-// and the shaping is applied to the *control points*, so a curve whose two
-// endpoints both sit just outside the viewport can still have a visible body.
-export const BEZIER_CONNECTOR_MAX_REACH_PX = 110;
-// Sign (+1/-1) of an endpoint's horizontal control handle. The handle leaves a
-// trailing (3') endpoint along the read's reading direction (`strand`); at a
-// split junction's leading (5') endpoint it flips, so the curve arrives flowing
-// *into* the next segment (a fwd→rev inversion folds back instead of cutting
-// straight across). `reversed` flips screen-x for a reverse-complemented region.
-function tangentSign(strand, leading, reversed) {
-    return strand * (leading ? -1 : 1) * (reversed ? -1 : 1);
-}
-// How much shaping (handle length, bow height) this curve may spend: a fraction
-// of the distance it has to cover.
-function shapingBudget(p1, p2) {
-    const dy = Math.min(Math.abs(p2.y - p1.y), MAX_VERTICAL_SPAN_PX);
-    return Math.hypot(p2.x - p1.x, dy) * SPAN_FACTOR;
-}
-// Fades to zero as the endpoints' rows separate, since a cross-row curve
-// already has vertical extent — and via the budget as they close in
-// horizontally, since a short connector is legible without a hump.
-function bowHeight(p1, p2, budget) {
-    return Math.min(budget, Math.max(0, MAX_BOW_PX - Math.abs(p2.y - p1.y)));
-}
-function cubicPath(from, ctrl1, ctrl2, to) {
-    return `M ${from.x} ${from.y} C ${ctrl1.x} ${ctrl1.y} ${ctrl2.x} ${ctrl2.y} ${to.x} ${to.y}`;
-}
+import { connectorBudgetPx, connectorHandlePx, connectorLiftPx, connectorTangent, } from '@jbrowse/render-core/shaders/connectorMark';
+import { CONNECTOR_APEX_RATIO, CONNECTOR_BOW, CONNECTOR_MAX_HANDLE_PX, CONNECTOR_MAX_REACH_PX, } from '@jbrowse/render-core/shaders/connectorMarkConsts';
+/**
+ * A symmetric cubic's extreme sits 3/4 of the way from its baseline to its
+ * controls; the sashimi labels solve the same equation in the other direction.
+ */
+export const CUBIC_APEX_RATIO = CONNECTOR_APEX_RATIO;
+/**
+ * How far a curve can stray outside the band between its two endpoints, which
+ * a culler pads its viewport test by.
+ */
+export const BEZIER_CONNECTOR_MAX_REACH_PX = CONNECTOR_MAX_REACH_PX;
+/**
+ * One horizontal-tangent connector curve as an SVG path: the read and
+ * breakpoint connector BreakpointSplitView's AlignmentConnections draws, and
+ * the alignments display draws as render-core's `connector` mark. The
+ * geometry is that shader's own, through its JS twin, so the two views cannot
+ * drift in which way a connection leaves its read.
+ *
+ * A discordant connection dips below its ends instead of bowing up over them,
+ * so the two classes read apart at a glance. How deep is the caller's call:
+ * only it knows the band the ink has to survive in, and `discordantDipPx`
+ * (@jbrowse/sv-core) is the law the two views share.
+ */
 export function bezierConnectorPath({ x1, y1, x2, y2, s1, s2, 
 // The second endpoint is a split junction's 5' leading edge (its handle flips
 // to fold the curve into the next segment); false for a paired mate's 3' edge.
-leadingEnd2 = false, reversed1 = false, reversed2 = false, maxHandlePx = MAX_HANDLE_PX, 
-// Depth, in px, of the dip a discordant connection draws instead of the bow a
-// concordant one gets — aberrant pair orientation, or a split junction's
-// strand flip, so the two classes are tellable apart by shape alone. It is
-// the depth of the curve's APEX — what a caller can bound by the room it has —
-// and CUBIC_APEX_RATIO converts it to the control-point drop that puts the ink
-// there. Leave it out to bow up.
+leadingEnd2 = false, reversed1 = false, reversed2 = false, maxHandlePx = CONNECTOR_MAX_HANDLE_PX, 
+// Depth, in px, of the APEX of the dip a discordant connection draws instead
+// of the bow a concordant one gets. Leave it out to bow up.
 dipPx, }) {
-    const from = { x: x1, y: y1 };
-    const to = { x: x2, y: y2 };
-    const budget = shapingBudget(from, to);
-    const handle = Math.min(maxHandlePx, budget);
-    // The dip is deliberately not clamped to the budget, unlike the bow. The
-    // budget stops the cubic folding back over itself, and only the horizontal
-    // handles can do that — a vertical offset leaves x(t) monotonic however deep
-    // it goes, so a big event squeezed into a few px draws a narrow trough rather
-    // than a squiggle. Pinned by 'a dipped connection never overshoots its
-    // endpoints in x'.
-    const bow = dipPx === undefined
-        ? bowHeight(from, to, budget)
-        : -Math.min(dipPx, BEZIER_CONNECTOR_MAX_REACH_PX) / CUBIC_APEX_RATIO;
-    return cubicPath(from, { x: x1 + handle * tangentSign(s1, false, reversed1), y: y1 - bow }, { x: x2 + handle * tangentSign(s2, leadingEnd2, reversed2), y: y2 - bow }, to);
+    const dy = y2 - y1;
+    const budget = connectorBudgetPx(x2 - x1, dy);
+    const handle = connectorHandlePx(budget, maxHandlePx);
+    const lift = connectorLiftPx(budget, dy, dipPx ?? CONNECTOR_BOW);
+    const c1x = x1 + handle * connectorTangent(s1, 0, reversed1 ? 1 : 0);
+    const c2x = x2 + handle * connectorTangent(s2, leadingEnd2 ? 1 : 0, reversed2 ? 1 : 0);
+    return `M ${x1} ${y1} C ${c1x} ${y1 - lift} ${c2x} ${y2 - lift} ${x2} ${y2}`;
 }

package/esm/util/cacheBudgets.d.ts

@@ -51,5 +51,8 @@ import { SharedBudget } from '@gmod/shared-read-cache';
  * why this used to be two budgets named for their units: a million records
  * could not be added to bytes, and never bound long-read data either, where a
  * 6 MB slice counted as 37.
+ *
+ * `@jbrowse/tables` lowers the limit for a host such as R, which keeps no
+ * track open to pan (`packages/tables/src/cache.ts`).
  */
 export declare const decompressedBytesBudget: SharedBudget;

package/esm/util/cacheBudgets.js

@@ -51,5 +51,8 @@ import { SharedBudget } from '@gmod/shared-read-cache';
  * why this used to be two budgets named for their units: a million records
  * could not be added to bytes, and never bound long-read data either, where a
  * 6 MB slice counted as 37.
+ *
+ * `@jbrowse/tables` lowers the limit for a host such as R, which keeps no
+ * track open to pan (`packages/tables/src/cache.ts`).
  */
 export const decompressedBytesBudget = new SharedBudget(1024 * 2 ** 20);

package/esm/util/categoricalField.d.ts

@@ -41,7 +41,7 @@ export interface CategoricalField {
 }
 /**
  * #api
- * What a key names each of `keys`, from a colour object's `labels`: one each in
+ * What a key names each of `keys`, from a color object's `labels`: one each in
  * order, an empty or missing entry leaving that key its own name. Every key
  * that takes `labels` reads them through this, so a config means one thing by
  * them everywhere.
@@ -63,7 +63,7 @@ export declare function categoricalField(field: string, { domain, range, labels,
 }): CategoricalField;
 /**
  * #api
- * Deals `keys` their colours in `field.compare` order, so the colours a set
+ * Deals `keys` their colors in `field.compare` order, so the colors a set
  * of keys first seen together takes do not depend on the order they arrive
  * in. A no-op for a field that deals nothing.
  */

package/esm/util/categoricalField.js

@@ -18,7 +18,7 @@ export const SV_TYPE_FIELD = 'svType';
 export const NO_VALUE_LABEL = '(no value)';
 /**
  * #api
- * What a key names each of `keys`, from a colour object's `labels`: one each in
+ * What a key names each of `keys`, from a color object's `labels`: one each in
  * order, an empty or missing entry leaving that key its own name. Every key
  * that takes `labels` reads them through this, so a config means one thing by
  * them everywhere.
@@ -44,7 +44,7 @@ export function keyNames(keys, labels = []) {
  */
 export function categoricalField(field, { domain = [], range = [], labels = [], held, } = {}) {
     // a field with a vocabulary of its own reads it on every channel, a facet's
-    // sections as well as a colour's key
+    // sections as well as a color's key
     const vocabulary = universalPresetOf(field);
     const ownOrder = vocabulary?.domain ?? [];
     const order = domain.length > 0 ? domain : ownOrder;
@@ -76,7 +76,7 @@ export function categoricalField(field, { domain = [], range = [], labels = [],
 }
 /**
  * #api
- * Deals `keys` their colours in `field.compare` order, so the colours a set
+ * Deals `keys` their colors in `field.compare` order, so the colors a set
  * of keys first seen together takes do not depend on the order they arrive
  * in. A no-op for a field that deals nothing.
  */

package/esm/util/color/index.d.ts

@@ -78,7 +78,7 @@ export declare function relight(color: string, lightnessShift: number, chromaSca
  * once per feature, and what a reader saw was every unlabelled feature in one
  * strong color: a large fake category, drawn over the real ones. Grey says the
  * only true thing about a feature with no value for the attribute you asked to
- * colour by.
+ * color by.
  *
  * @param str - The string to generate a color from
  * @returns A CSS hex color string

package/esm/util/color/index.js

@@ -82,7 +82,7 @@ export { CSS_COLOR_NAMES, isNamedColor, namedColorToHex, } from './cssColorsLeve
 // has to read as "not in a category" beside a palette whose every member is
 // equally light and equally colorful, so it cannot be one more hue.
 export const NO_CATEGORY_COLOR = '#afafaf';
-// What a colour declaration paints where it reads nothing it can colour, so a
+// What a color declaration paints where it reads nothing it can color, so a
 // misconfiguration surfaces rather than passing for the no-category grey.
 export const MISCONFIGURED_COLOR = '#808080';
 const RANDOM_COLOR_TIERS = [
@@ -185,7 +185,7 @@ export function relight(color, lightnessShift, chromaScale = 1) {
  * once per feature, and what a reader saw was every unlabelled feature in one
  * strong color: a large fake category, drawn over the real ones. Grey says the
  * only true thing about a feature with no value for the attribute you asked to
- * colour by.
+ * color by.
  *
  * @param str - The string to generate a color from
  * @returns A CSS hex color string

package/esm/util/color-bits/bit.js

@@ -32,6 +32,6 @@ export function clampByte(n) {
     // against NaN is false, and an unclamped NaN shifts to 0 anyway — silently,
     // one channel at a time. `jexl:alpha(color, get(feature,'opacity'))` on a
     // non-numeric attribute is the reachable one, and it drew the feature at
-    // alpha 0 instead of reaching the invalid-colour sentinel.
+    // alpha 0 instead of reaching the invalid-color sentinel.
     return n > 0 ? (n > 255 ? 255 : n) : 0;
 }

package/esm/util/color-bits/parse.js

@@ -9,15 +9,15 @@ const E = 'e'.charCodeAt(0);
 /**
  * Approximative CSS colorspace string pattern, e.g. rgb(), color()
  *
- * **Anchored**, because the whole string has to be a colour for this to be one.
- * Unanchored it matched a colour sitting anywhere inside anything, so
+ * **Anchored**, because the whole string has to be a color for this to be one.
+ * Unanchored it matched a color sitting anywhere inside anything, so
  * `parseCssColor('foo rgb(1,2,3) bar')` answered `[1,2,3]` — and a config slot
- * holding prose, a jexl expression that did not evaluate, or two colours by
- * mistake read as a plausible colour instead of reaching the invalid-colour
+ * holding prose, a jexl expression that did not evaluate, or two colors by
+ * mistake read as a plausible color instead of reaching the invalid-color
  * sentinel. That sentinel is a contract (`colorBits.test.ts`: a broken config
- * reads as magenta, never as a plausible wrong colour), and it was unreachable
+ * reads as magenta, never as a plausible wrong color), and it was unreachable
  * for every such string. Surrounding whitespace is still tolerated: a slot with
- * a trailing space is a formatting slip, not a different colour.
+ * a trailing space is a formatting slip, not a different color.
  */
 const PATTERN = (() => {
     const NAME = String.raw `(\w+)`;

package/esm/util/colorBits.d.ts

@@ -13,12 +13,13 @@ export type { Color } from './color-bits/index.ts';
  * rendering as the magenta invalid-color sentinel. Takes the raw value so it
  * stays dependency-free and directly testable.
  */
-export declare function featureItemRgb(raw: unknown): string | undefined;
+export declare function featureItemRgb(raw: unknown, itemRgbOn?: boolean): string | undefined;
 /**
- * The BED color a feature declares for itself, under either column name, or
- * undefined if it declares none.
+ * The BED color a feature declares for itself, under any column name, or
+ * undefined if it declares none. `itemRgbOn` reads "0,0,0" as black and a
+ * packed integer as UCSC does.
  */
-export declare function featureBedColor(feature: Feature): string | undefined;
+export declare function featureBedColor(feature: Feature, itemRgbOn?: boolean): string | undefined;
 export declare function parseCssColor(color: string | undefined | null): number;
 export declare function cssColorToNormalizedRgb(color: string): [number, number, number];
 export declare function cssColorToRgb(color: string): [number, number, number];
@@ -36,4 +37,14 @@ export declare function abgrRed(c: number): number;
 export declare function abgrGreen(c: number): number;
 export declare function abgrBlue(c: number): number;
 export declare function abgrAlpha(c: number): number;
+/** An ABGR-packed color as lowercase `#rrggbb`, its alpha dropped. */
+export declare function abgrToHex(c: number): string;
+/** Any CSS color as lowercase `#rrggbb`, its alpha dropped. */
+export declare function cssColorToHex(color: string): string;
+/** A 0..1 normalized RGB triple as lowercase `#rrggbb`. */
+export declare function normalizedRgbToHex([r, g, b]: readonly [
+    number,
+    number,
+    number
+]): string;
 export declare function cssColorToNormalizedRgba(color: string): [number, number, number, number];

package/esm/util/colorBits.js

@@ -10,13 +10,18 @@ export { alpha, blend, darken, formatHEX, formatHEXA, formatRGBA, getAlpha, getB
 // Returning magenta makes the bad slot visually obvious without breaking the
 // rest of the render.
 const INVALID_COLOR = newColor(255, 0, 255, 255);
-// UCSC's convention is that a color of "0" means "no color specified", and plain
-// BED12 files fill the column with that placeholder (often spelled as the
-// all-zero triple) rather than omitting it — every itemRgb in our own
-// volvox-bed12 fixture is "0,0,0". Honoring those literally would paint an
-// ordinary BED12 track solid black, so read them as absent. A file that really
-// wants black can say so with an explicit `color` slot.
-const BED_TRIPLE_UNSET = /^0(,0,0)?$/;
+// Plain BED12 files fill itemRgb with "0,0,0" rather than omitting it (every
+// itemRgb in the volvox-bed12 fixture is one), and UCSC ignores the column
+// unless trackDb says `itemRgb on`. So the triple reads as absent unless the
+// caller passes `itemRgbOn`. Under it, UCSC also reads a comma-free value as a
+// packed 0xRRGGBB integer, and paints 0 its track color, black by default.
+const BED_TRIPLE_UNSET = '0,0,0';
+function packedRgb(raw) {
+    const n = typeof raw === 'string' && /^\d+$/.test(raw.trim()) ? Number(raw) : raw;
+    return typeof n === 'number' && Number.isInteger(n) && n >= 0 && n <= 0xffffff
+        ? `${n >> 16},${(n >> 8) & 255},${n & 255}`
+        : undefined;
+}
 /**
  * One raw attribute value as a usable BED color, or undefined when it isn't
  * one. Deliberately strict: this feeds an *automatic* coloring path, so a value
@@ -26,11 +31,13 @@ const BED_TRIPLE_UNSET = /^0(,0,0)?$/;
  * rendering as the magenta invalid-color sentinel. Takes the raw value so it
  * stays dependency-free and directly testable.
  */
-export function featureItemRgb(raw) {
+export function featureItemRgb(raw, itemRgbOn = false) {
     const triple = typeof raw === 'string' ? bedTriple(raw) : undefined;
-    return triple !== undefined && !BED_TRIPLE_UNSET.test(triple)
-        ? triple
-        : undefined;
+    return itemRgbOn
+        ? (triple ?? packedRgb(raw))
+        : triple !== BED_TRIPLE_UNSET
+            ? triple
+            : undefined;
 }
 // The names the BED color column goes by, most specific first.
 //
@@ -51,13 +58,14 @@ export function featureItemRgb(raw) {
 // write) keeps working, and can now just be deleted.
 const BED_COLOR_FIELDS = ['itemRgb', 'reserved', 'field8'];
 /**
- * The BED color a feature declares for itself, under either column name, or
- * undefined if it declares none.
+ * The BED color a feature declares for itself, under any column name, or
+ * undefined if it declares none. `itemRgbOn` reads "0,0,0" as black and a
+ * packed integer as UCSC does.
  */
-export function featureBedColor(feature) {
+export function featureBedColor(feature, itemRgbOn = false) {
     let found;
     for (const field of BED_COLOR_FIELDS) {
-        found ??= featureItemRgb(feature.get(field));
+        found ??= featureItemRgb(feature.get(field), itemRgbOn);
     }
     return found;
 }
@@ -144,6 +152,21 @@ export function abgrBlue(c) {
 export function abgrAlpha(c) {
     return (c >>> 24) & 0xff;
 }
+function hexByte(n) {
+    return n.toString(16).padStart(2, '0');
+}
+/** An ABGR-packed color as lowercase `#rrggbb`, its alpha dropped. */
+export function abgrToHex(c) {
+    return `#${hexByte(abgrRed(c))}${hexByte(abgrGreen(c))}${hexByte(abgrBlue(c))}`;
+}
+/** Any CSS color as lowercase `#rrggbb`, its alpha dropped. */
+export function cssColorToHex(color) {
+    return abgrToHex(cssColorToABGR(color));
+}
+/** A 0..1 normalized RGB triple as lowercase `#rrggbb`. */
+export function normalizedRgbToHex([r, g, b]) {
+    return abgrToHex(normalizedRgbToABGR(r, g, b));
+}
 export function cssColorToNormalizedRgba(color) {
     const c = parseCssColor(color);
     return [

package/esm/util/colorRamp.d.ts

@@ -17,7 +17,7 @@ export declare const VIRIDIS_STOPS: readonly ColorRampStop[];
 export declare function darkAtLowEnd(scheme: ColorSchemeName): boolean;
 /**
  * #api
- * The domain a continuous colour scale spans: each end `min` or `max` pins,
+ * The domain a continuous color scale spans: each end `min` or `max` pins,
  * else the extent's, ascending, since a span has no direction and `reverse`
  * is the ramp's. An open end stops at a pinned one rather than crossing it,
  * and an extent holding no value (`[Infinity, -Infinity]`) spans [0, 1].
@@ -25,7 +25,7 @@ export declare function darkAtLowEnd(scheme: ColorSchemeName): boolean;
 export declare function rampDomain(min: number | undefined, max: number | undefined, extent: readonly [number, number]): [number, number];
 /**
  * #api
- * The stops a continuous colour scale samples: `range`'s CSS colours where it
+ * The stops a continuous color scale samples: `range`'s CSS colors where it
  * lists any, else the named `scheme`, viridis while that is unset, turned
  * round under `reverse`.
  */
@@ -53,7 +53,7 @@ export declare function sampleColorRamp(stops: readonly ColorRampStop[], t: numb
 export declare function buildColorRampLut(stops: readonly ColorRampStop[]): Uint8Array<ArrayBuffer>;
 /**
  * #api
- * A continuous colour scale's ramp as a config declares it.
+ * A continuous color scale's ramp as a config declares it.
  */
 export interface RampDeclaration {
     range?: readonly string[];

package/esm/util/colorRamp.js

@@ -95,6 +95,17 @@ const REDGREYBLUE_STOPS = [
     [140, 140, 140, 255],
     [47, 102, 176, 255],
 ];
+const BLUEYELLOWRED_STOPS = [
+    [69, 117, 180, 255],
+    [116, 173, 209, 255],
+    [171, 217, 233, 255],
+    [224, 243, 248, 255],
+    [255, 255, 191, 255],
+    [254, 224, 144, 255],
+    [253, 174, 97, 255],
+    [244, 109, 67, 255],
+    [215, 48, 39, 255],
+];
 const SCHEME_STOPS = {
     viridis: VIRIDIS_STOPS,
     juicebox: JUICEBOX_STOPS,
@@ -107,6 +118,7 @@ const SCHEME_STOPS = {
     redblue: REDBLUE_STOPS,
     purpleorange: PURPLEORANGE_STOPS,
     redgreyblue: REDGREYBLUE_STOPS,
+    blueyellowred: BLUEYELLOWRED_STOPS,
 };
 function luminanceOverWhite([r, g, b, a]) {
     const over = (c) => 255 + (c - 255) * (a / 255);
@@ -124,7 +136,7 @@ export function darkAtLowEnd(scheme) {
 const EMPTY_EXTENT_DOMAIN = [0, 1];
 /**
  * #api
- * The domain a continuous colour scale spans: each end `min` or `max` pins,
+ * The domain a continuous color scale spans: each end `min` or `max` pins,
  * else the extent's, ascending, since a span has no direction and `reverse`
  * is the ramp's. An open end stops at a pinned one rather than crossing it,
  * and an extent holding no value (`[Infinity, -Infinity]`) spans [0, 1].
@@ -144,7 +156,7 @@ export function rampDomain(min, max, extent) {
 }
 /**
  * #api
- * The stops a continuous colour scale samples: `range`'s CSS colours where it
+ * The stops a continuous color scale samples: `range`'s CSS colors where it
  * lists any, else the named `scheme`, viridis while that is unset, turned
  * round under `reverse`.
  */