@genome-spy/core 0.74.0 → 0.76.0

package/dist/src/scales/scaleResolution.js

@@ -28,15 +28,17 @@ import {
     isPrimaryPositionalChannel,
     isSecondaryChannel,
 } from "../encoder/encoder.js";
+import { isExprRef } from "../paramRuntime/paramUtils.js";
 import { NominalDomain } from "../utils/domainArray.js";
 import { shallowArrayEquals } from "../utils/arrayUtils.js";
 import createIndexer from "../utils/indexer.js";
 import { getCachedOrCall, invalidate } from "../utils/propertyCacher.js";
 import { resolveUrl } from "../utils/url.js";
+import { orderResolutionMembers } from "./resolutionMemberOrder.js";
 import {
     findIntervalSelectionBindingOwners,
+    getIntervalSelection,
     normalizeIntervalForSelection,
-    requireIntervalSelection,
 } from "./selectionDomainUtils.js";
 import { toExternalIndexLikeInterval } from "./indexLikeDomainUtils.js";
 
@@ -100,6 +102,9 @@ export default class ScaleResolution {
     /** @type {Set<ScaleResolutionMember>} */
     #dataDomainMembers = new Set();
 
+    /** @type {ScaleResolutionMember[] | undefined} */
+    #orderedMembers;
+
     /**
      * @type {Record<ScaleResolutionEventType, Set<ScaleResolutionListener>>}
      */
@@ -127,15 +132,28 @@ export default class ScaleResolution {
 
     #selectionReverseSyncSuppressionDepth = 0;
 
+    /** @type {(() => void)[]} */
+    #configuredDomainExprUnsubscribers = [];
+
     #ignoreSelectionInitial = false;
 
     /** @type {[number, number] | null | undefined} */
     #lastLinkedSelectionInterval = undefined;
 
+    /** @type {import("../view/view.js").default | undefined} */
+    #hostView;
+
+    #resolvingScaleProps = 0;
+
+    #memberRegistrationBatchDepth = 0;
+
+    #membersDirty = false;
+
     /**
      * @param {Channel} channel
+     * @param {import("../view/view.js").default} [hostView]
      */
-    constructor(channel) {
+    constructor(channel, hostView) {
         this.channel = channel;
         /** @type {import("../spec/channel.js").Type} Data type (quantitative, nominal, etc...) */
         this.type = null;
@@ -143,8 +161,10 @@ export default class ScaleResolution {
         /** @type {string} An optional unique identifier for the scale */
         this.name = undefined;
 
+        this.#hostView = hostView;
+
         this.#domainAggregator = new DomainPlanner({
-            getMembers: () => this.#getActiveMembers(),
+            getActiveMembers: () => this.#getActiveMembers(),
             getAllMembers: () => this.#members,
             getDataMembers: () =>
                 this.#getActiveMembers(this.#dataDomainMembers),
@@ -154,7 +174,7 @@ export default class ScaleResolution {
         });
 
         this.#scaleManager = new ScaleInstanceManager({
-            getParamRuntime: () => this.#firstMemberView.paramRuntime,
+            getParamRuntime: () => this.#resolutionView.paramRuntime,
             onRangeChange: () => this.#notifyListeners("range"),
             onDomainChange: () => this.#notifyListeners("domain"),
             getGenomeStore: () => this.#viewContext.genomeStore,
@@ -182,6 +202,10 @@ export default class ScaleResolution {
         return first.view;
     }
 
+    get #resolutionView() {
+        return this.#hostView ?? this.#firstMemberView;
+    }
+
     /**
      * @param {Set<ScaleResolutionMember>} [members]
      */
@@ -206,7 +230,7 @@ export default class ScaleResolution {
     }
 
     get #viewContext() {
-        return this.#firstMemberView.context;
+        return this.#resolutionView.context;
     }
 
     get zoomExtent() {
@@ -300,10 +324,13 @@ export default class ScaleResolution {
             return;
         }
 
-        const selection = requireIntervalSelection(
+        const selection = getIntervalSelection(
             linkInfo.runtime.getValue(linkInfo.param),
             linkInfo.param
         );
+        if (!selection) {
+            return;
+        }
 
         const interval = this.#normalizeDomainIntervalForLinkedSelection(
             this.getScale().domain()
@@ -372,9 +399,15 @@ export default class ScaleResolution {
      * @returns {boolean}
      */
     #hasConfiguredDomain() {
-        return this.#domainAggregator.hasConfiguredDomain({
-            includeSelectionInitial: this.#shouldIncludeSelectionInitial(),
-        });
+        for (const member of this.#members) {
+            if (
+                member.contributesToDomain &&
+                member.channelDef.scale?.domain !== undefined
+            ) {
+                return true;
+            }
+        }
+        return false;
     }
 
     /**
@@ -382,10 +415,13 @@ export default class ScaleResolution {
      * @returns {[number, number] | null}
      */
     #getCurrentLinkedSelectionInterval(linkInfo) {
-        const selection = requireIntervalSelection(
+        const selection = getIntervalSelection(
             linkInfo.runtime.getValue(linkInfo.param),
             linkInfo.param
         );
+        if (!selection) {
+            return null;
+        }
         const interval = selection.intervals[linkInfo.encoding];
         return interval && interval.length === 2
             ? /** @type {[number, number]} */ (interval)
@@ -484,9 +520,53 @@ export default class ScaleResolution {
         if (member.contributesToDomain) {
             this.#dataDomainMembers.add(member);
         }
+        return member;
+    }
+
+    #syncMembers() {
+        this.#membersDirty = false;
+        this.#invalidateOrderedMembers();
         this.#invalidateConfiguredDomain();
         this.#refreshSelectionDomainParamSubscriptions();
-        return member;
+        this.#refreshConfiguredDomainExprSubscriptions();
+    }
+
+    #markMembersDirty() {
+        if (this.#memberRegistrationBatchDepth > 0) {
+            this.#membersDirty = true;
+        } else {
+            this.#syncMembers();
+        }
+    }
+
+    /**
+     * Executes a group of member registrations without refreshing derived
+     * membership state until the callback completes.
+     *
+     * @template T
+     * @param {Iterable<ScaleResolution>} resolutions
+     * @param {() => T} callback
+     * @returns {T}
+     */
+    static registerInBatch(resolutions, callback) {
+        const batchedResolutions = Array.from(resolutions);
+        for (const resolution of batchedResolutions) {
+            resolution.#memberRegistrationBatchDepth++;
+        }
+
+        try {
+            return callback();
+        } finally {
+            for (const resolution of batchedResolutions) {
+                resolution.#memberRegistrationBatchDepth--;
+                if (
+                    resolution.#memberRegistrationBatchDepth === 0 &&
+                    resolution.#membersDirty
+                ) {
+                    resolution.#syncMembers();
+                }
+            }
+        }
     }
 
     /**
@@ -495,12 +575,12 @@ export default class ScaleResolution {
      */
     registerMember(member) {
         const registeredMember = this.#addMember(member);
+        this.#markMembersDirty();
         return () => {
             const removed = this.#members.delete(registeredMember);
             if (removed) {
                 this.#dataDomainMembers.delete(registeredMember);
-                this.#invalidateConfiguredDomain();
-                this.#refreshSelectionDomainParamSubscriptions();
+                this.#markMembersDirty();
             }
             return removed && this.#members.size === 0;
         };
@@ -508,6 +588,7 @@ export default class ScaleResolution {
 
     dispose() {
         this.#clearSelectionDomainParamSubscriptions();
+        this.#clearConfiguredDomainExprSubscriptions();
         this.#listeners.domain.clear();
         this.#listeners.range.clear();
         this.#scaleManager.dispose();
@@ -521,6 +602,13 @@ export default class ScaleResolution {
         this.#lastLinkedSelectionInterval = undefined;
     }
 
+    #clearConfiguredDomainExprSubscriptions() {
+        for (const unsubscribe of this.#configuredDomainExprUnsubscribers) {
+            unsubscribe();
+        }
+        this.#configuredDomainExprUnsubscribers = [];
+    }
+
     #refreshSelectionDomainParamSubscriptions() {
         this.#clearSelectionDomainParamSubscriptions();
 
@@ -552,6 +640,33 @@ export default class ScaleResolution {
         );
     }
 
+    #refreshConfiguredDomainExprSubscriptions() {
+        this.#clearConfiguredDomainExprSubscriptions();
+
+        if (this.#members.size === 0) {
+            return;
+        }
+
+        const listener = () => {
+            this.#invalidateConfiguredDomain();
+            this.reconfigureDomain();
+        };
+
+        for (const member of this.#members) {
+            if (!member.contributesToDomain) {
+                continue;
+            }
+            const domain = member.channelDef.scale?.domain;
+            if (!isExprRef(domain)) {
+                continue;
+            }
+
+            const expr = member.view.paramRuntime.createExpression(domain.expr);
+            const unsubscribe = expr.subscribe(listener);
+            this.#configuredDomainExprUnsubscribers.push(unsubscribe);
+        }
+    }
+
     #hasRenderedMember() {
         for (const member of this.#members) {
             if (member.view.hasRendered()) {
@@ -637,9 +752,9 @@ export default class ScaleResolution {
             const props = resolveScalePropsBase({
                 channel: this.channel,
                 dataType: this.type,
-                members: this.#members,
+                orderedMembers: this.#getOrderedMembers(),
                 isExplicitDomain: this.isDomainDefinedExplicitly(),
-                configScopes: this.#firstMemberView.getConfigScopes(),
+                configScopes: this.#resolutionView.getConfigScopes(),
             });
             this.#validateLinkedSelectionConfiguration(props);
             return props;
@@ -650,6 +765,26 @@ export default class ScaleResolution {
         invalidate(this, "mergedScaleProps");
     }
 
+    #invalidateOrderedMembers() {
+        this.#orderedMembers = undefined;
+    }
+
+    /**
+     * Returns the participating members in a stable order.
+     *
+     * The membership set changes rarely, so cache the sorted order separately
+     * from merged scale props. That keeps parameter-driven domain updates from
+     * re-running the same path-based sort work.
+     *
+     * @returns {ScaleResolutionMember[]}
+     */
+    #getOrderedMembers() {
+        if (!this.#orderedMembers) {
+            this.#orderedMembers = orderResolutionMembers(this.#members);
+        }
+        return this.#orderedMembers;
+    }
+
     #invalidateConfiguredDomain() {
         this.#domainAggregator.invalidateConfiguredDomain();
         this.#invalidateMergedScaleProps();
@@ -736,10 +871,18 @@ export default class ScaleResolution {
 
         const resolvedProps = { ...props };
 
-        const domain = this.#getConfiguredOrDefaultDomain(
-            extractDataDomain,
-            resolvedProps.type === LOCUS ? resolvedProps.assembly : undefined
-        );
+        this.#resolvingScaleProps += 1;
+        let domain;
+        try {
+            domain = this.#getConfiguredOrDefaultDomain(
+                extractDataDomain,
+                resolvedProps.type === LOCUS
+                    ? resolvedProps.assembly
+                    : undefined
+            );
+        } finally {
+            this.#resolvingScaleProps -= 1;
+        }
 
         if (isDiscrete(resolvedProps.type)) {
             const isExplicit = this.isDomainDefinedExplicitly();
@@ -833,7 +976,6 @@ export default class ScaleResolution {
      */
     reconfigureDomain() {
         this.#withSelectionReverseSyncSuppressed(() => {
-            this.#invalidateMergedScaleProps();
             const state = this.#computeScaleState(true, true);
             if (!state) {
                 return;
@@ -946,6 +1088,11 @@ export default class ScaleResolution {
             return;
         }
 
+        if (scale.props.domainTransition === false) {
+            this.#notifyListeners("domain");
+            return;
+        }
+
         const newDomain = scale.domain();
         const action = this.#interactionController.getDomainChangeAction(
             previousDomain,
@@ -1005,6 +1152,11 @@ export default class ScaleResolution {
      * @returns {ScaleWithProps}
      */
     getScale() {
+        if (this.#resolvingScaleProps > 0) {
+            throw new Error(
+                `Scale resolution for channel "${this.channel}" cannot read its own scale while its domain is being resolved.`
+            );
+        }
         return this.#scaleManager.scale ?? this.initializeScale();
     }
 
@@ -1025,6 +1177,13 @@ export default class ScaleResolution {
     }
 
     getDomain() {
+        if (this.#resolvingScaleProps > 0) {
+            throw new Error(
+                `Scale resolution for channel "${this.channel}" cannot read its own domain while its domain is being resolved.`
+            );
+        }
+        // The underlying scale getter returns a fresh array. Treat this as a
+        // read-only snapshot rather than a mutable backing store.
         return this.getScale().domain();
     }
 
@@ -1058,7 +1217,7 @@ export default class ScaleResolution {
             return;
         }
 
-        const root = this.#firstMemberView.getLayoutAncestors().at(-1);
+        const root = this.#resolutionView.getLayoutAncestors().at(-1);
         const persist = root
             ? findIntervalSelectionBindingOwners(
                   root,

package/dist/src/scales/selectionDomainUtils.d.ts

@@ -10,6 +10,16 @@ export function requireParamRuntime(paramRuntime: {
  * @param {string} paramName
  */
 export function requireIntervalSelection(selection: any, paramName: string): import("../types/selectionTypes.js").IntervalSelection;
+/**
+ * Returns an interval selection when the value exists and is of the correct
+ * type. Missing values are treated as empty so selection-linked domains can
+ * initialize before a pushed outer selection has been seeded.
+ *
+ * @param {any} selection
+ * @param {string} paramName
+ * @returns {import("../types/selectionTypes.js").IntervalSelection | undefined}
+ */
+export function getIntervalSelection(selection: any, paramName: string): import("../types/selectionTypes.js").IntervalSelection | undefined;
 /**
  * Resolves the runtime-backed interval selection binding used by a linked
  * domain. Matching is based on the actual resolved runtime slot instead of

package/dist/src/scales/selectionDomainUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectionDomainUtils.d.ts","sourceRoot":"","sources":["../../../src/scales/selectionDomainUtils.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH,kDAHW;IAAE,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAA;CAAE,aAC9C,MAAM,OAUhB;AAED;;;GAGG;AACH,oDAHW,GAAG,aACH,MAAM,0DAgBhB;AAED;;;;;;;;GAQG;AACH,sDAJW,OAAO,iBAAiB,EAAE,OAAO,aACjC,MAAM,YACN,GAAG,GAAG,GAAG;;;EAiBnB;AAED;;;;;GAKG;AACH,yDALW,OAAO,iBAAiB,EAAE,OAAO,WACjC,GAAG,aACH,MAAM,YACN,GAAG,GAAG,GAAG;UAGG,OAAO,iBAAiB,EAAE,OAAO;WAAS,OAAO,sBAAsB,EAAE,kBAAkB;IAuBjH;AAED;;;;;GAKG;AACH,yDALW,OAAO,iBAAiB,EAAE,OAAO,WACjC,GAAG,aACH,MAAM,YACN,GAAG,GAAG,GAAG,WA8CnB;AAED;;;;;GAKG;AACH,wDALW,MAAM,EAAE,cACR,MAAM,EAAE,YACR;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3B,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAsCxC"}
+{"version":3,"file":"selectionDomainUtils.d.ts","sourceRoot":"","sources":["../../../src/scales/selectionDomainUtils.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH,kDAHW;IAAE,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAA;CAAE,aAC9C,MAAM,OAUhB;AAED;;;GAGG;AACH,oDAHW,GAAG,aACH,MAAM,0DAgBhB;AAED;;;;;;;;GAQG;AACH,gDAJW,GAAG,aACH,MAAM,GACJ,OAAO,4BAA4B,EAAE,iBAAiB,GAAG,SAAS,CAc9E;AAED;;;;;;;;GAQG;AACH,sDAJW,OAAO,iBAAiB,EAAE,OAAO,aACjC,MAAM,YACN,GAAG,GAAG,GAAG;;;EAiBnB;AAED;;;;;GAKG;AACH,yDALW,OAAO,iBAAiB,EAAE,OAAO,WACjC,GAAG,aACH,MAAM,YACN,GAAG,GAAG,GAAG;UAQG,OAAO,iBAAiB,EAAE,OAAO;WAAS,OAAO,sBAAsB,EAAE,kBAAkB;IAuBjH;AAED;;;;;GAKG;AACH,yDALW,OAAO,iBAAiB,EAAE,OAAO,WACjC,GAAG,aACH,MAAM,YACN,GAAG,GAAG,GAAG,WA+CnB;AAED;;;;;GAKG;AACH,wDALW,MAAM,EAAE,cACR,MAAM,EAAE,YACR;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,GAC3B,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAsCxC"}

package/dist/src/scales/selectionDomainUtils.js

@@ -39,6 +39,29 @@ export function requireIntervalSelection(selection, paramName) {
     return selection;
 }
 
+/**
+ * Returns an interval selection when the value exists and is of the correct
+ * type. Missing values are treated as empty so selection-linked domains can
+ * initialize before a pushed outer selection has been seeded.
+ *
+ * @param {any} selection
+ * @param {string} paramName
+ * @returns {import("../types/selectionTypes.js").IntervalSelection | undefined}
+ */
+export function getIntervalSelection(selection, paramName) {
+    if (!selection) {
+        return;
+    }
+
+    if (!isIntervalSelection(selection)) {
+        throw new Error(
+            `Selection domain parameter "${paramName}" must be an interval selection.`
+        );
+    }
+
+    return selection;
+}
+
 /**
  * Resolves the runtime-backed interval selection binding used by a linked
  * domain. Matching is based on the actual resolved runtime slot instead of
@@ -52,7 +75,7 @@ export function resolveIntervalSelectionBinding(view, paramName, encoding) {
     const runtime = view.paramRuntime.findRuntimeForParam
         ? requireParamRuntime(view.paramRuntime, paramName)
         : view.paramRuntime;
-    const selection = requireIntervalSelection(
+    const selection = getIntervalSelection(
         runtime.getValue
             ? runtime.getValue(paramName)
             : view.paramRuntime.findValue(paramName),
@@ -71,7 +94,12 @@ export function resolveIntervalSelectionBinding(view, paramName, encoding) {
  * @param {string} paramName
  * @param {"x" | "y"} encoding
  */
-export function findIntervalSelectionBindingOwners(root, runtime, paramName, encoding) {
+export function findIntervalSelectionBindingOwners(
+    root,
+    runtime,
+    paramName,
+    encoding
+) {
     /** @type {{ view: import("../view/view.js").default, param: import("../spec/parameter.js").SelectionParameter }[]} */
     const owners = [];
 
@@ -124,7 +152,8 @@ export function hasIntervalSelectionBindingInScope(
 
             seen.add(candidateView);
 
-            const param = candidateView.paramRuntime?.paramConfigs?.get(paramName);
+            const param =
+                candidateView.paramRuntime?.paramConfigs?.get(paramName);
             if (!param || !isSelectionParameter(param)) {
                 continue;
             }

package/dist/src/screenshotExport.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @param {{ width: number | undefined, height: number | undefined }} renderedBounds
+ * @param {{ width: number, height: number }} logicalSize
+ */
+export function resolveExportSize(renderedBounds: {
+    width: number | undefined;
+    height: number | undefined;
+}, logicalSize: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+};
+/**
+ * Returns the smallest DPR that yields at least 400 physical pixels vertically.
+ *
+ * Fractional DPRs are rounded upward to the nearest 0.5.
+ *
+ * @param {number} logicalHeight
+ */
+export function resolveCaptureDevicePixelRatio(logicalHeight: number): number;
+//# sourceMappingURL=screenshotExport.d.ts.map

package/dist/src/screenshotExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshotExport.d.ts","sourceRoot":"","sources":["../../src/screenshotExport.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,kDAHW;IAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,eACzD;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;;;EAiB3C;AAED;;;;;;GAMG;AACH,8DAFW,MAAM,UAehB"}

package/dist/src/screenshotExport.js

@@ -0,0 +1,44 @@
+const MIN_VERTICAL_RESOLUTION = 400;
+
+/**
+ * @param {{ width: number | undefined, height: number | undefined }} renderedBounds
+ * @param {{ width: number, height: number }} logicalSize
+ */
+export function resolveExportSize(renderedBounds, logicalSize) {
+    return {
+        width:
+            Number.isFinite(renderedBounds.width) && renderedBounds.width > 0
+                ? Math.ceil(renderedBounds.width)
+                : Number.isFinite(logicalSize.width) && logicalSize.width > 0
+                  ? logicalSize.width
+                  : 500,
+        height:
+            Number.isFinite(renderedBounds.height) && renderedBounds.height > 0
+                ? Math.ceil(renderedBounds.height)
+                : Number.isFinite(logicalSize.height) && logicalSize.height > 0
+                  ? logicalSize.height
+                  : 280,
+    };
+}
+
+/**
+ * Returns the smallest DPR that yields at least 400 physical pixels vertically.
+ *
+ * Fractional DPRs are rounded upward to the nearest 0.5.
+ *
+ * @param {number} logicalHeight
+ */
+export function resolveCaptureDevicePixelRatio(logicalHeight) {
+    if (!Number.isFinite(logicalHeight) || logicalHeight <= 0) {
+        throw new Error(
+            `Expected a positive logical height, got ${logicalHeight}.`
+        );
+    }
+
+    if (logicalHeight >= MIN_VERTICAL_RESOLUTION) {
+        return 1;
+    }
+
+    const requiredDevicePixelRatio = MIN_VERTICAL_RESOLUTION / logicalHeight;
+    return Math.ceil(requiredDevicePixelRatio * 2) / 2;
+}

package/dist/src/screenshotHarness.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshotHarness.d.ts","sourceRoot":"","sources":["../../src/screenshotHarness.js"],"names":[],"mappings":"8BAQa;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,OAAO,CAAC;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC5F;+BAIS,MAAM,GAAG,OAAO,UAAU,GAAG;IAAE,qBAAqB,EAAE,eAAe,CAAA;CAAE"}
+{"version":3,"file":"screenshotHarness.d.ts","sourceRoot":"","sources":["../../src/screenshotHarness.js"],"names":[],"mappings":"8BAYa;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,OAAO,CAAC;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC5F;+BAIS,MAAM,GAAG,OAAO,UAAU,GAAG;IAAE,qBAAqB,EAAE,eAAe,CAAA;CAAE"}

package/dist/src/screenshotHarness.js

@@ -1,8 +1,12 @@
 import { embed, loadSpec } from "./index.js";
-
-const DEFAULT_CONTAINER_WIDTH = 600;
-const DEFAULT_CONTAINER_HEIGHT = 320;
-const DEFAULT_LAZY_READY_TIMEOUT_MS = 30_000;
+import {
+    resolveCaptureDevicePixelRatio,
+    resolveExportSize,
+} from "./screenshotExport.js";
+
+const DEFAULT_CONTAINER_WIDTH = 500;
+const DEFAULT_CONTAINER_HEIGHT = 300;
+const DEFAULT_LAZY_READY_TIMEOUT_MS = 10_000;
 const READY_DELAY_MS = 100;
 
 /**
@@ -89,29 +93,41 @@ async function initializeHarness(url) {
             api.getRenderedBounds(),
             api.getLogicalCanvasSize()
         );
+        const devicePixelRatio = resolveCaptureDevicePixelRatio(
+            logicalSize.height
+        );
 
         screenshotWindow.__genomeSpyScreenshot = {
             status: "ready",
-            detail: `Ready (${logicalSize.width}x${logicalSize.height}, DPR 1)`,
+            detail: `Ready (${logicalSize.width}x${logicalSize.height}, DPR ${formatDevicePixelRatio(
+                devicePixelRatio
+            )})`,
             error: "",
             async capture() {
                 const currentSize = resolveExportSize(
                     api.getRenderedBounds(),
                     api.getLogicalCanvasSize()
                 );
+                const currentDevicePixelRatio = resolveCaptureDevicePixelRatio(
+                    currentSize.height
+                );
                 return {
                     logicalSize: currentSize,
                     dataUrl: api.exportCanvas(
                         currentSize.width,
                         currentSize.height,
-                        1,
+                        currentDevicePixelRatio,
                         "white"
                     ),
                 };
             },
         };
 
-        setStatus(`Ready (${logicalSize.width}x${logicalSize.height}, DPR 1)`);
+        setStatus(
+            `Ready (${logicalSize.width}x${logicalSize.height}, DPR ${formatDevicePixelRatio(
+                devicePixelRatio
+            )})`
+        );
     } catch (error) {
         setFailure(error instanceof Error ? error.message : String(error));
     }
@@ -184,24 +200,10 @@ function parseTimeoutMs(value, fallback) {
 }
 
 /**
- * @param {{ width: number | undefined, height: number | undefined }} renderedBounds
- * @param {{ width: number, height: number }} logicalSize
+ * @param {number} value
  */
-function resolveExportSize(renderedBounds, logicalSize) {
-    return {
-        width:
-            Number.isFinite(renderedBounds.width) && renderedBounds.width > 0
-                ? Math.ceil(renderedBounds.width)
-                : Number.isFinite(logicalSize.width) && logicalSize.width > 0
-                  ? logicalSize.width
-                  : DEFAULT_CONTAINER_WIDTH,
-        height:
-            Number.isFinite(renderedBounds.height) && renderedBounds.height > 0
-                ? Math.ceil(renderedBounds.height)
-                : Number.isFinite(logicalSize.height) && logicalSize.height > 0
-                  ? logicalSize.height
-                  : DEFAULT_CONTAINER_HEIGHT,
-    };
+function formatDevicePixelRatio(value) {
+    return value.toFixed(3).replace(/\.?0+$/, "");
 }
 
 /**

package/dist/src/spec/axis.d.ts

@@ -113,9 +113,9 @@ export interface Axis extends BaseAxis, ZIndexProps {
     format?: string;
 
     /**
-     * A title for the axis (none by default).
+     * A title for the axis (none by default). Set to `null` to remove it.
      */
-    title?: string;
+    title?: string | null;
 
     /**
      * The orthogonal offset in pixels by which to displace the axis from its position along the edge of the chart.