@jbrowse/core 4.3.0 → 5.0.0-beta.2

package/esm/util/colorRamp.js

@@ -0,0 +1,93 @@
+import { COLOR_RAMP_LUT_ENTRIES } from '@jbrowse/render-core/colorRampLut';
+// Viridis full 256-color hex spec, kept whole so a LUT built from these stops
+// carries the smooth perceptually-uniform gradient rather than an
+// interpolation over a subset. Lived in the hic plugin until wiggle density
+// gained the same named ramp; both build their 256×1 GPU/Canvas2D LUTs from
+// this one table.
+const VIRIDIS_HEX_SPEC = '44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725';
+function viridisStopsFromHex() {
+    const out = [];
+    for (let i = 0; i < 256; i++) {
+        const hex = VIRIDIS_HEX_SPEC.slice(i * 6, i * 6 + 6);
+        out.push([
+            Number.parseInt(hex.slice(0, 2), 16),
+            Number.parseInt(hex.slice(2, 4), 16),
+            Number.parseInt(hex.slice(4, 6), 16),
+            255,
+        ]);
+    }
+    return out;
+}
+/**
+ * #api
+ * The 256 viridis stops, fully opaque. Feed them to {@link buildColorRampLut}
+ * for the texture/fillStyle form, or to {@link sampleColorRamp} for legend
+ * stops.
+ */
+export const VIRIDIS_STOPS = viridisStopsFromHex();
+function lerp8(a, b, t) {
+    return Math.round(a * (1 - t) + b * t);
+}
+/**
+ * #api
+ * The color at `t` in `[0, 1]` across a list of EVENLY SPACED stops, linearly
+ * interpolated per channel. `t` is clamped, so the ends are the end stops
+ * rather than an extrapolation past them, and a one-stop ramp is that stop
+ * everywhere.
+ */
+export function sampleColorRamp(stops, t) {
+    const position = Math.max(0, Math.min(1, t)) * (stops.length - 1);
+    const lower = Math.floor(position);
+    const lo = stops[lower];
+    const hi = stops[Math.min(lower + 1, stops.length - 1)];
+    const frac = position - lower;
+    return [
+        lerp8(lo[0], hi[0], frac),
+        lerp8(lo[1], hi[1], frac),
+        lerp8(lo[2], hi[2], frac),
+        lerp8(lo[3], hi[3], frac),
+    ];
+}
+/**
+ * #api
+ * An RGBA lookup table over {@link sampleColorRamp}, laid out as the Nx1
+ * texture both GPU backends upload and the Canvas2D twins index — entry `i` is
+ * the color at `t = i / (N - 1)`. N comes off the shader that samples it, so
+ * the table and `rampColor`'s texel mapping cannot disagree.
+ */
+export function buildColorRampLut(stops) {
+    const last = COLOR_RAMP_LUT_ENTRIES - 1;
+    const data = new Uint8Array(COLOR_RAMP_LUT_ENTRIES * 4);
+    for (let i = 0; i < COLOR_RAMP_LUT_ENTRIES; i++) {
+        const [r, g, b, a] = sampleColorRamp(stops, i / last);
+        data[i * 4] = r;
+        data[i * 4 + 1] = g;
+        data[i * 4 + 2] = b;
+        data[i * 4 + 3] = a;
+    }
+    return data;
+}
+/**
+ * #api
+ * `n` evenly spaced legend stops read straight out of a
+ * {@link buildColorRampLut} byte table — the same 256×1 RGBA array
+ * `uploadColorRampLut` hands the GPU and the Canvas2D fillStyle LUTs index —
+ * formatted for `SvgGradientLegend`. It holds one claim by construction: the
+ * swatch at bar fraction `t` is byte-identical to the ramp entry at `t` on
+ * both backends. Alpha rides `opacity` (the juicebox fade), never baked into
+ * the color string.
+ */
+export function stopsFromRampLut(lut, n) {
+    const lastEntry = lut.length / 4 - 1;
+    const out = [];
+    for (let i = 0; i < n; i++) {
+        const t = n === 1 ? 0 : i / (n - 1);
+        const o = Math.round(t * lastEntry) * 4;
+        out.push({
+            offset: `${+(t * 100).toFixed(2)}%`,
+            color: `rgb(${lut[o]},${lut[o + 1]},${lut[o + 2]})`,
+            opacity: lut[o + 3] / 255,
+        });
+    }
+    return out;
+}

package/esm/util/colord.d.ts

@@ -1,3 +1,9 @@
+interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
 interface HSLA {
     h: number;
     s: number;
@@ -8,6 +14,7 @@ export interface Colord {
     alpha(): number;
     alpha(value: number): Colord;
     toHex(): string;
+    toRgb(): RGBA;
     toRgbString(): string;
     toHsl(): HSLA;
     toHslString(): string;
@@ -20,4 +27,5 @@ export declare function colord(input: string | {
     s: number;
     l: number;
 }): Colord;
+export declare function hexToGLrgb(hex: string): [number, number, number];
 export {};

package/esm/util/colord.js

@@ -1,231 +1,83 @@
-import { namedColorToHex } from "./color/cssColorsLevel4.js";
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
+import { blend, alpha as cbAlpha, formatHEX, formatHEXA, getAlpha, getBlue, getGreen, getRed, newColor, parse, toGLrgb, toHSLA, toRGBA, } from './color-bits/index.js';
+import { parseCssColorOr } from './colorBits.js';
+import { clamp } from './numericUtils.js';
 function round(value, precision = 0) {
     const mult = 10 ** precision;
     return Math.round(value * mult) / mult;
 }
-function parseHex(hex) {
-    const match = /^#([0-9a-f]{3,8})$/i.exec(hex);
-    if (!match) {
-        return null;
-    }
-    const hexStr = match[1];
-    if (hexStr.length === 3) {
-        return {
-            r: parseInt(hexStr[0] + hexStr[0], 16),
-            g: parseInt(hexStr[1] + hexStr[1], 16),
-            b: parseInt(hexStr[2] + hexStr[2], 16),
-            a: 1,
-        };
-    }
-    if (hexStr.length === 4) {
-        return {
-            r: parseInt(hexStr[0] + hexStr[0], 16),
-            g: parseInt(hexStr[1] + hexStr[1], 16),
-            b: parseInt(hexStr[2] + hexStr[2], 16),
-            a: parseInt(hexStr[3] + hexStr[3], 16) / 255,
-        };
-    }
-    if (hexStr.length === 6) {
-        return {
-            r: parseInt(hexStr.slice(0, 2), 16),
-            g: parseInt(hexStr.slice(2, 4), 16),
-            b: parseInt(hexStr.slice(4, 6), 16),
-            a: 1,
-        };
-    }
-    if (hexStr.length === 8) {
-        return {
-            r: parseInt(hexStr.slice(0, 2), 16),
-            g: parseInt(hexStr.slice(2, 4), 16),
-            b: parseInt(hexStr.slice(4, 6), 16),
-            a: parseInt(hexStr.slice(6, 8), 16) / 255,
-        };
-    }
-    return null;
-}
-function parseRgb(str) {
-    const match = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(str);
-    if (match) {
-        return {
-            r: parseInt(match[1], 10),
-            g: parseInt(match[2], 10),
-            b: parseInt(match[3], 10),
-            a: match[4] ? parseFloat(match[4]) : 1,
-        };
-    }
-    return null;
+function hslShiftLightness(c, amount) {
+    const hsla = toHSLA(c);
+    const newL = clamp(hsla.l + amount, 0, 100);
+    const parsed = parse(`hsl(${hsla.h}, ${hsla.s}%, ${newL}%)`);
+    return cbAlpha(parsed, getAlpha(c) / 255);
 }
-function parseHsl(str) {
-    const match = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(str);
-    if (match) {
-        const h = parseFloat(match[1]);
-        const s = parseFloat(match[2]) / 100;
-        const l = parseFloat(match[3]) / 100;
-        const a = match[4] ? parseFloat(match[4]) : 1;
-        return { ...hslToRgb(h, s, l), a };
-    }
-    return null;
-}
-function hslToRgb(h, s, l) {
-    h = ((h % 360) + 360) % 360;
-    const c = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-    const m = l - c / 2;
-    let r = 0;
-    let g = 0;
-    let b = 0;
-    if (h < 60) {
-        r = c;
-        g = x;
-    }
-    else if (h < 120) {
-        r = x;
-        g = c;
-    }
-    else if (h < 180) {
-        g = c;
-        b = x;
-    }
-    else if (h < 240) {
-        g = x;
-        b = c;
-    }
-    else if (h < 300) {
-        r = x;
-        b = c;
-    }
-    else {
-        r = c;
-        b = x;
-    }
-    return {
-        r: Math.round((r + m) * 255),
-        g: Math.round((g + m) * 255),
-        b: Math.round((b + m) * 255),
-    };
-}
-function rgbToHsl(r, g, b) {
-    r /= 255;
-    g /= 255;
-    b /= 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    const l = (max + min) / 2;
-    if (max === min) {
-        return { h: 0, s: 0, l };
-    }
-    const d = max - min;
-    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    let h = 0;
-    if (max === r) {
-        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-    }
-    else if (max === g) {
-        h = ((b - r) / d + 2) / 6;
-    }
-    else {
-        h = ((r - g) / d + 4) / 6;
-    }
-    return { h: h * 360, s, l };
-}
-function parseColor(input) {
+function parseInput(input) {
     if (typeof input === 'object') {
         const { h, s, l } = input;
-        return { ...hslToRgb(h, s / 100, l / 100), a: 1 };
-    }
-    const str = input.trim().toLowerCase();
-    const namedHex = namedColorToHex(str);
-    if (namedHex) {
-        return parseHex(namedHex);
-    }
-    if (str === 'transparent') {
-        return { r: 0, g: 0, b: 0, a: 0 };
+        return parse(`hsl(${h}, ${s}%, ${l}%)`);
     }
-    const hex = parseHex(str);
-    if (hex) {
-        return hex;
-    }
-    const rgb = parseRgb(str);
-    if (rgb) {
-        return rgb;
-    }
-    const hsl = parseHsl(str);
-    if (hsl) {
-        return hsl;
-    }
-    return { r: 0, g: 0, b: 0, a: 1 };
-}
-function toHex2(n) {
-    return Math.round(clamp(n, 0, 255))
-        .toString(16)
-        .padStart(2, '0');
+    return parseCssColorOr(input, newColor(0, 0, 0, 255));
 }
-function createColord(rgba) {
+function createColord(c) {
     const obj = {
         alpha(value) {
             if (value === undefined) {
-                return rgba.a;
+                return getAlpha(c) / 255;
             }
-            return createColord({ ...rgba, a: clamp(value, 0, 1) });
+            return createColord(cbAlpha(c, value));
         },
         toHex() {
-            const { r, g, b, a } = rgba;
-            if (a < 1) {
-                return `#${toHex2(r)}${toHex2(g)}${toHex2(b)}${toHex2(a * 255)}`;
+            if (getAlpha(c) < 255) {
+                return formatHEXA(c);
             }
-            return `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+            return formatHEX(c);
+        },
+        toRgb() {
+            const rgba = toRGBA(c);
+            return { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a / 255 };
         },
         toRgbString() {
-            const { r, g, b, a } = rgba;
+            const a = getAlpha(c) / 255;
             if (a < 1) {
-                return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${round(a, 3)})`;
+                return `rgba(${getRed(c)}, ${getGreen(c)}, ${getBlue(c)}, ${round(a, 3)})`;
             }
-            return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+            return `rgb(${getRed(c)}, ${getGreen(c)}, ${getBlue(c)})`;
         },
         toHsl() {
-            const { h, s, l } = rgbToHsl(rgba.r, rgba.g, rgba.b);
+            const hsla = toHSLA(c);
             return {
-                h: round(h, 1),
-                s: round(s * 100, 1),
-                l: round(l * 100, 1),
-                a: rgba.a,
+                h: round(hsla.h, 1),
+                s: round(hsla.s, 1),
+                l: round(hsla.l, 1),
+                a: getAlpha(c) / 255,
             };
         },
         toHslString() {
-            const { h, s, l } = rgbToHsl(rgba.r, rgba.g, rgba.b);
-            if (rgba.a < 1) {
-                return `hsla(${round(h, 1)}, ${round(s * 100, 1)}%, ${round(l * 100, 1)}%, ${round(rgba.a, 3)})`;
+            const hsla = toHSLA(c);
+            const a = getAlpha(c) / 255;
+            if (a < 1) {
+                return `hsla(${round(hsla.h, 1)}, ${round(hsla.s, 1)}%, ${round(hsla.l, 1)}%, ${round(a, 3)})`;
             }
-            return `hsl(${round(h, 1)}, ${round(s * 100, 1)}%, ${round(l * 100, 1)}%)`;
+            return `hsl(${round(hsla.h, 1)}, ${round(hsla.s, 1)}%, ${round(hsla.l, 1)}%)`;
         },
         mix(color2, ratio = 0.5) {
             const c2 = typeof color2 === 'string'
-                ? parseColor(color2)
-                : parseColor(color2.toHex());
-            const r = rgba.r + (c2.r - rgba.r) * ratio;
-            const g = rgba.g + (c2.g - rgba.g) * ratio;
-            const b = rgba.b + (c2.b - rgba.b) * ratio;
-            const a = rgba.a + (c2.a - rgba.a) * ratio;
-            return createColord({ r, g, b, a });
+                ? parseInput(color2)
+                : parseInput(color2.toHex());
+            return createColord(blend(c, c2, ratio));
         },
         darken(amount = 0.1) {
-            const { h, s, l } = rgbToHsl(rgba.r, rgba.g, rgba.b);
-            const newL = clamp(l - amount, 0, 1);
-            const rgb = hslToRgb(h, s, newL);
-            return createColord({ ...rgb, a: rgba.a });
+            return createColord(hslShiftLightness(c, -amount * 100));
         },
         lighten(amount = 0.1) {
-            const { h, s, l } = rgbToHsl(rgba.r, rgba.g, rgba.b);
-            const newL = clamp(l + amount, 0, 1);
-            const rgb = hslToRgb(h, s, newL);
-            return createColord({ ...rgb, a: rgba.a });
+            return createColord(hslShiftLightness(c, amount * 100));
         },
     };
     return obj;
 }
 export function colord(input) {
-    return createColord(parseColor(input));
+    return createColord(parseInput(input));
+}
+export function hexToGLrgb(hex) {
+    return toGLrgb(parse(hex));
 }

package/esm/util/convertCodingSequenceToPeptides.d.ts

@@ -1,6 +1,20 @@
-import type { Feat } from '../BaseFeatureWidget/util.tsx';
-export declare function convertCodingSequenceToPeptides({ cds, sequence, codonTable, }: {
-    cds: Feat[];
+import type { TranslExcept } from './geneticCodes.ts';
+export declare function translExceptProteinPositions({ cds, translExcept, }: {
+    cds: {
+        start: number;
+        end: number;
+        phase?: number;
+    }[];
+    translExcept?: TranslExcept[];
+}): Set<number>;
+export declare function convertCodingSequenceToPeptides({ cds, sequence, codonTable, starts, translExcept, }: {
+    cds: {
+        start: number;
+        end: number;
+        phase?: number;
+    }[];
     sequence: string;
     codonTable: Record<string, string>;
+    starts?: string[];
+    translExcept?: TranslExcept[];
 }): string;

package/esm/util/convertCodingSequenceToPeptides.js

@@ -1,10 +1,57 @@
-import { stitch } from "../BaseFeatureWidget/util.js";
-export function convertCodingSequenceToPeptides({ cds, sequence, codonTable, }) {
+import { stitch } from './seqUtils.js';
+// Maps a single position (in the same coordinate system as the cds array) to its
+// codon index within the stitched CDS string. Returns undefined if the position
+// falls outside all CDS segments or before the phase offset.
+function posToCodonIndex(pos, cds, phase) {
+    let offset = 0;
+    for (const seg of cds) {
+        if (pos >= seg.start && pos < seg.end) {
+            const stitchedPos = offset + (pos - seg.start);
+            if (stitchedPos < phase) {
+                return undefined;
+            }
+            return Math.floor((stitchedPos - phase) / 3);
+        }
+        offset += seg.end - seg.start;
+    }
+    return undefined;
+}
+// phase > 0 prepends a leading '&' to the protein, shifting every codon's index
+// in the protein string by one.
+function proteinIndexShift(phase) {
+    return phase > 0 ? 1 : 0;
+}
+// Maps each in-range transl_except to its codon index within the stitched CDS.
+function translExceptCodonOverrides(cds, translExcept, phase) {
+    const overrides = new Map();
+    for (const ex of translExcept) {
+        const idx = posToCodonIndex(ex.start, cds, phase);
+        if (idx !== undefined) {
+            overrides.set(idx, ex.aa);
+        }
+    }
+    return overrides;
+}
+// Returns the 0-indexed positions in the final protein string where translExcept
+// overrides were applied. Position 0 = first character of the returned protein string
+// (which may be '&' if phase > 0). Callers use this to highlight those characters.
+export function translExceptProteinPositions({ cds, translExcept = [], }) {
+    const phase = cds[0]?.phase ?? 0;
+    const shift = proteinIndexShift(phase);
+    const codonIndexes = translExceptCodonOverrides(cds, translExcept, phase).keys();
+    return new Set([...codonIndexes].map(idx => idx + shift));
+}
+export function convertCodingSequenceToPeptides({ cds, sequence, codonTable, starts, translExcept = [], }) {
     const phase = cds[0]?.phase ?? 0;
     const str = stitch(cds, sequence);
+    const overrides = translExceptCodonOverrides(cds, translExcept, phase);
     let protein = phase > 0 ? '&' : '';
-    for (let i = phase; i < str.length; i += 3) {
-        protein += codonTable[str.slice(i, i + 3)] || '&';
+    let codonIdx = 0;
+    for (let i = phase; i < str.length; i += 3, codonIdx++) {
+        const codon = str.slice(i, i + 3);
+        const isStart = codonIdx === 0 && phase === 0 && starts?.includes(codon.toUpperCase());
+        protein +=
+            overrides.get(codonIdx) ?? (isStart ? 'M' : codonTable[codon]) ?? '&';
     }
     return protein;
 }

package/esm/util/copyText.d.ts

@@ -0,0 +1,18 @@
+import type { CopyOptions } from './copyToClipboard.ts';
+import type { AbstractSessionModel } from './types/index.ts';
+import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
+/**
+ * Copy `text` to the clipboard, confirming it in a snackbar (`what` names what
+ * landed — "read name", "EDEN.1:c.93+1", "feature info") and surfacing a failure
+ * rather than silently doing nothing.
+ *
+ * Every display that offered a copy item had grown its own copy of this wrapper,
+ * and they had drifted on both the wording and whether an error reached the user
+ * at all. Take this when you hold a session; `copyText` when you hold a model.
+ */
+export declare function copyTextWithSession(session: Pick<AbstractSessionModel, 'notify' | 'notifyError'>, text: string, what: string, options?: CopyOptions): Promise<void>;
+/**
+ * `copyTextWithSession` for a menu item on a model, which is what a display has
+ * in hand.
+ */
+export declare function copyText(node: IAnyStateTreeNode, text: string, what: string, options?: CopyOptions): Promise<void>;

package/esm/util/copyText.js

@@ -0,0 +1,30 @@
+import copyToClipboard from './copyToClipboard.js';
+import { getSession } from './mstUtils.js';
+/**
+ * Copy `text` to the clipboard, confirming it in a snackbar (`what` names what
+ * landed — "read name", "EDEN.1:c.93+1", "feature info") and surfacing a failure
+ * rather than silently doing nothing.
+ *
+ * Every display that offered a copy item had grown its own copy of this wrapper,
+ * and they had drifted on both the wording and whether an error reached the user
+ * at all. Take this when you hold a session; `copyText` when you hold a model.
+ */
+export async function copyTextWithSession(session, text, what, options) {
+    try {
+        // awaited: copyToClipboard reports a rejected write by throwing, so without
+        // this the snackbar confirms a copy that never landed
+        await copyToClipboard(text, options);
+        session.notify(`Copied ${what} to clipboard`, 'success');
+    }
+    catch (e) {
+        console.error(e);
+        session.notifyError(`${e}`, e);
+    }
+}
+/**
+ * `copyTextWithSession` for a menu item on a model, which is what a display has
+ * in hand.
+ */
+export async function copyText(node, text, what, options) {
+    return copyTextWithSession(getSession(node), text, what, options);
+}

package/esm/util/copyToClipboard.d.ts

@@ -0,0 +1,4 @@
+export interface CopyOptions {
+    format?: string;
+}
+export default function copyToClipboard(text: string, options?: CopyOptions): Promise<void>;

package/esm/util/copyToClipboard.js

@@ -0,0 +1,58 @@
+// Throws when the write did not happen, which is the only signal the async API
+// gives (it reports a denied permission or an unfocused document by rejecting).
+// A caller that reports success must therefore await this, or it confirms a copy
+// that never landed.
+export default async function copyToClipboard(text, options = {}) {
+    const format = options.format ?? 'text/plain';
+    // navigator.clipboard is only present in secure contexts; isSecureContext is
+    // the real gate, so insecure http:// falls through to execCommand below
+    if (format === 'text/plain' && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+    }
+    else if (!execCommandCopy(text, format)) {
+        throw new Error('the browser rejected the clipboard write');
+    }
+}
+function execCommandCopy(text, format) {
+    const selection = document.getSelection();
+    const previousRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : undefined;
+    // offscreen span carrying the text, with whitespace preserved
+    const span = document.createElement('span');
+    span.textContent = text;
+    span.style.whiteSpace = 'pre';
+    span.style.position = 'fixed';
+    span.style.top = '0';
+    span.style.left = '0';
+    span.style.opacity = '0';
+    document.body.append(span);
+    const listener = (e) => {
+        if (e.clipboardData) {
+            e.clipboardData.clearData();
+            e.clipboardData.setData(format, text);
+        }
+        e.preventDefault();
+    };
+    document.addEventListener('copy', listener);
+    let success = false;
+    try {
+        const range = document.createRange();
+        range.selectNodeContents(span);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        // execCommand is deprecated but is the only clipboard write available in
+        // non-secure (http://) contexts, which JBrowse must support
+        success = document.execCommand('copy');
+    }
+    catch (e) {
+        console.error(e);
+    }
+    finally {
+        document.removeEventListener('copy', listener);
+        selection?.removeAllRanges();
+        if (previousRange) {
+            selection?.addRange(previousRange);
+        }
+        span.remove();
+    }
+    return success;
+}