@genome-spy/core 0.44.0 → 0.45.0

package/dist/src/encoder/encoder.js

@@ -1,13 +1,11 @@
 import { isDiscrete } from "vega-scale";
 import createIndexer from "../utils/indexer.js";
 import scaleNull from "../utils/scaleNull.js";
-import { isExprRef } from "../marks/mark.js";
+import { isExprRef } from "../view/paramMediator.js";
 
 /**
  * Creates an object that contains encoders for every channel of a mark
  *
- * TODO: This should actually receive the mark as parameter
- *
  * TODO: This method should have a test. But how to mock Mark...
  *
  * @param {import("../marks/mark.js").default} mark
@@ -41,6 +39,7 @@ export default function createEncoders(mark, encoding) {
         const resolution = mark.unitView.getScaleResolution(channelWithScale);
 
         encoders[channel] = createEncoder(
+            mark,
             encoding[channel],
             resolution?.scale,
             mark.unitView.getAccessor(channel),
@@ -52,14 +51,14 @@ export default function createEncoders(mark, encoding) {
 }
 
 /**
- *
+ * @param {import("../marks/mark.js").default} mark
  * @param {import("../spec/channel.js").ChannelDef} channelDef
  * @param {any} scale
  * @param {Accessor} accessor
  * @param {Channel} channel
  * @returns {Encoder}
  */
-export function createEncoder(channelDef, scale, accessor, channel) {
+export function createEncoder(mark, channelDef, scale, accessor, channel) {
     /**
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../types/encoder.js").Encoder} Encoder
@@ -71,9 +70,10 @@ export function createEncoder(channelDef, scale, accessor, channel) {
 
     if (isValueDef(channelDef)) {
         if (isExprRef(channelDef.value)) {
-            // TODO: Should get the value expression as the accessor
-            encoder = /** @type {Encoder} */ ((datum) => undefined);
-            //encoder = /** @type {Encoder} */ (/** @type {any} */ (accessor));
+            const fn = mark.unitView.paramMediator.createExpression(
+                channelDef.value.expr
+            );
+            encoder = /** @type {Encoder} */ ((datum) => fn(null));
             encoder.constant = true;
             encoder.constantValue = false;
             encoder.accessor = accessor;

package/dist/src/encoder/encoder.test.js

@@ -29,6 +29,7 @@ describe("Encoder", () => {
         const encoders = {};
         for (const [channel, channelDef] of Object.entries(encoding)) {
             encoders[channel] = createEncoder(
+                null, // TODO: stub the mark
                 channelDef,
                 scales[channel],
                 accessorFactory.createAccessor(encodingSpecs[channel]),
@@ -95,4 +96,6 @@ describe("Encoder", () => {
     });
 
     // TODO: Test indexer
+
+    // TODO: Text ExprRef
 });

package/dist/src/genomeSpy.d.ts

@@ -13,6 +13,7 @@ export default class GenomeSpy {
      */
     constructor(container: HTMLElement, spec: import("./spec/root.js").RootSpec, options?: import("./types/embedApi.js").EmbedOptions);
     container: HTMLElement;
+    options: import("./types/embedApi.js").EmbedOptions;
     /** @type {(() => void)[]} */
     _destructionCallbacks: (() => void)[];
     /** Root level configuration object */
@@ -69,13 +70,16 @@ export default class GenomeSpy {
     tooltipHandlers: Record<string, import("./tooltip/tooltipHandler.js").TooltipHandler>;
     /** @type {View} */
     viewRoot: import("./view/view.js").default;
-    _paramBroker: ParamBroker;
     /**
      * Views that are currently loading data using lazy sources.
      *
      * @type {Map<View, boolean>}
      */
     _loadingViews: Map<import("./view/view.js").default, boolean>;
+    /**
+     * @type {HTMLElement}
+     */
+    _inputBindingContainer: HTMLElement;
     /**
      *
      * @param {(name: string) => any[]} provider
@@ -103,10 +107,9 @@ export default class GenomeSpy {
      * animations with html elements than with WebGL.
      */
     _updateLoadingIndicators(): void;
-    _prepareContainer(): void;
     _glHelper: WebGLHelper;
-    loadingMessageElement: HTMLDivElement;
-    loadingIndicatorsElement: HTMLDivElement;
+    loadingMessageElement: HTMLElement;
+    loadingIndicatorsElement: HTMLElement;
     tooltip: Tooltip;
     /**
      * Unregisters all listeners, removes all created dom elements, removes all css classes from the container
@@ -151,7 +154,6 @@ import Animator from "./utils/animator.js";
 import GenomeStore from "./genome/genomeStore.js";
 import BufferedViewRenderingContext from "./view/renderingContext/bufferedViewRenderingContext.js";
 import Inertia from "./utils/inertia.js";
-import ParamBroker from "./paramBroker.js";
 import WebGLHelper from "./gl/webGLHelper.js";
 import Tooltip from "./utils/ui/tooltip.js";
 import UnitView from "./view/unitView.js";

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

@@ -1 +1 @@
-{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA+CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA0FpD;IAvFG,uBAA0B;IAE1B,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAM/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB,0BAAqC;IAGrC;;;;OAIG;IACH,8DAA8B;IA4GlC;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAyCC;IAED,0BA0EC;IAtEG,uBAOC;IAyCD,sCAA0D;IAS1D,yCAA6D;IAI7D,iBAA0C;IAW9C;;OAEG;IACH,gBAmBC;IAED,sCAwMC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BA6IC;IAjIe,iCAAoC;IAmIpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAiEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBAyCC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCAh8BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAlC7C,uBAAuB;4BA0BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAMvC,kBAAkB;wBApBlB,qBAAqB;oBAVzB,uBAAuB;qBAQtB,oBAAoB"}
+{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA8CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA2FpD;IAxFG,uBAA0B;IAC1B,oDAAsB;IAItB,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAE/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB;;;;OAIG;IACH,8DAA8B;IAE9B;;OAEG;IACH,wBAFU,WAAW,CAEkB;IA2C3C;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAyCC;IA0DG,uBAOC;IAGD,mCAGE;IAOF,sCAEE;IAGF,iBAAyC;IAW7C;;OAEG;IACH,gBAuBC;IAED,sCA8MC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BA6IC;IAjIe,iCAAoC;IAmIpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAiEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBAyCC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCA15BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAjC7C,uBAAuB;4BA2BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAdvC,qBAAqB;oBAXzB,uBAAuB;qBAStB,oBAAoB"}

package/dist/src/genomeSpy.js

@@ -1,5 +1,5 @@
 import { formats as vegaFormats } from "vega-loader";
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import SPINNER from "./img/90-ring-with-bg.svg";
 
@@ -11,6 +11,7 @@ import {
     checkForDuplicateScaleNames,
     setImplicitScaleNames,
     calculateCanvasSize,
+    calculateViewRootSize,
 } from "./view/viewUtils.js";
 import UnitView from "./view/unitView.js";
 
@@ -34,9 +35,7 @@ import dataTooltipHandler from "./tooltip/dataTooltipHandler.js";
 import { invalidatePrefix } from "./utils/propertyCacher.js";
 import { VIEW_ROOT_NAME, ViewFactory } from "./view/viewFactory.js";
 import { reconfigureScales } from "./view/scaleResolution.js";
-import ParamBroker from "./paramBroker.js";
-import { debounce } from "./utils/debounce.js";
-import { tickStep } from "d3-array";
+import createBindingInputs from "./utils/inputBinding.js";
 
 /**
  * Events that are broadcasted to all views.
@@ -61,14 +60,13 @@ export default class GenomeSpy {
      */
     constructor(container, spec, options = {}) {
         this.container = container;
+        this.options = options;
+
+        options.inputBindingContainer ??= "default";
 
         /** @type {(() => void)[]} */
         this._destructionCallbacks = [];
 
-        const styleElement = document.createElement("style");
-        styleElement.innerHTML = css;
-        container.appendChild(styleElement);
-
         /** Root level configuration object */
         this.spec = spec;
 
@@ -138,118 +136,55 @@ export default class GenomeSpy {
         /** @type {View} */
         this.viewRoot = undefined;
 
-        this._paramBroker = new ParamBroker();
-        this.#initializeParameters();
-
         /**
          * Views that are currently loading data using lazy sources.
          *
          * @type {Map<View, boolean>}
          */
         this._loadingViews = new Map();
+
+        /**
+         * @type {HTMLElement}
+         */
+        this._inputBindingContainer = undefined;
     }
 
-    #initializeParameters() {
-        /** @type {import("lit-html").TemplateResult[]} */
-        const inputs = [];
+    get #canvasWrapper() {
+        return /** @type {HTMLElement} */ (
+            this.container.querySelector(".canvas-wrapper")
+        );
+    }
 
-        for (const param of this.spec.params ?? []) {
-            const { name, value, bind } = param;
-            const setter = this._paramBroker.allocateSetter(name);
+    #initializeParameterBindings() {
+        /** @type {import("lit").TemplateResult[]} */
+        const inputs = [];
 
-            if (value != null) {
-                setter(value);
-            }
+        this.viewRoot.visit((view) => {
+            const mediator = view.paramMediator;
+            inputs.push(...createBindingInputs(mediator));
+        });
+        const ibc = this.options.inputBindingContainer;
 
-            // TODO: Implement two-way data binding, e.g. when an external agent changes
-            // the parameter value, the UI components should be updated.
-
-            if (bind && "input" in bind) {
-                const debouncedSetter = bind.debounce
-                    ? debounce(setter, bind.debounce, false)
-                    : setter;
-
-                if (bind.input == "range") {
-                    // TODO: Show the value next to the slider
-                    inputs.push(
-                        html`<label
-                            >${bind.name ?? name}
-                            <input
-                                type="range"
-                                min=${bind.min ?? 0}
-                                max=${bind.max ?? 100}
-                                step=${bind.step ??
-                                tickStep(bind.min, bind.max, 100)}
-                                .value=${value}
-                                @input=${(/** @type {any} */ e) =>
-                                    debouncedSetter(e.target.valueAsNumber)}
-                        /></label>`
-                    );
-                } else if (bind.input == "checkbox") {
-                    inputs.push(
-                        html`<label
-                            >${bind.name ?? name}
-                            <input
-                                type="checkbox"
-                                ?checked=${value}
-                                @input=${(/** @type {any} */ e) =>
-                                    debouncedSetter(e.target.checked)}
-                        /></label>`
-                    );
-                } else if (bind.input == "radio") {
-                    inputs.push(
-                        html`<span class="label">${bind.name ?? name}</span>
-                            ${bind.options.map(
-                                (option, i) => html`<label>
-                                    <input
-                                        type="radio"
-                                        name=${name}
-                                        value=${option}
-                                        .checked=${value == option}
-                                        @input=${(/** @type {any} */ e) =>
-                                            debouncedSetter(e.target.value)}
-                                    />${bind.labels?.[i] ?? option}</label
-                                >`
-                            )}`
-                    );
-                } else if (bind.input == "select") {
-                    inputs.push(
-                        html`<label
-                            >${bind.name ?? name}
-                            <select
-                                @input=${(/** @type {any} */ e) =>
-                                    debouncedSetter(e.target.value)}
-                            >
-                                ${bind.options.map(
-                                    (option, i) => html`<option
-                                        value=${option}
-                                        ?selected=${value == option}
-                                    >
-                                        ${bind.labels?.[i] ?? option}
-                                    </option>`
-                                )}
-                            </select></label
-                        >`
-                    );
-                } else {
-                    // TODO: Support other types: "text", "number", "color".
-                    throw new Error("Unsupported input type: " + bind.input);
-                }
-            }
+        if (!ibc || ibc == "none" || !inputs.length) {
+            return;
         }
 
-        if (inputs.length) {
-            const inputsDiv = document.createElement("div");
-            this.container.appendChild(inputsDiv);
+        this._inputBindingContainer = element("div", {
+            className: "gs-input-bindings",
+        });
 
-            // TODO: Move to css
-            // @ts-ignore
-            inputsDiv.style =
-                "position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); padding: 10px; z-index: 1; border: 1px solid lightgray";
+        if (ibc == "default") {
+            this.container.appendChild(this._inputBindingContainer);
+        } else if (ibc instanceof HTMLElement) {
+            ibc.appendChild(this._inputBindingContainer);
+        } else {
+            throw new Error("Invalid inputBindingContainer");
+        }
 
+        if (inputs.length) {
             render(
-                html`${inputs.map((input) => html`<div>${input}</div>`)}`,
-                inputsDiv
+                html`<div class="gs-input-binding">${inputs}</div>`,
+                this._inputBindingContainer
             );
         }
     }
@@ -311,7 +246,7 @@ export default class GenomeSpy {
      * animations with html elements than with WebGL.
      */
     _updateLoadingIndicators() {
-        /** @type {import("lit-html").TemplateResult[]} */
+        /** @type {import("lit").TemplateResult[]} */
         const indicators = [];
 
         const isSomethingVisible = () =>
@@ -353,17 +288,10 @@ export default class GenomeSpy {
         render(indicators, this.loadingIndicatorsElement);
     }
 
-    _prepareContainer() {
-        this.container.classList.add("genome-spy");
-        this.container.classList.add("loading");
-
-        this._glHelper = new WebGLHelper(
-            this.container,
-            () =>
-                this.viewRoot
-                    ? calculateCanvasSize(this.viewRoot)
-                    : { width: undefined, height: undefined },
-            this.spec.background
+    #setupDpr() {
+        const dprSetter = this.viewRoot.paramMediator.allocateSetter(
+            "devicePixelRatio",
+            window.devicePixelRatio
         );
 
         const resizeCallback = () => {
@@ -379,9 +307,6 @@ export default class GenomeSpy {
         resizeObserver.observe(this.container);
         this._destructionCallbacks.push(() => resizeObserver.disconnect());
 
-        const dprSetter = this._paramBroker.allocateSetter("devicePixelRatio");
-        dprSetter(window.devicePixelRatio);
-
         /** @type {() => void} */
         let remove = null;
 
@@ -403,22 +328,48 @@ export default class GenomeSpy {
         if (remove) {
             this._destructionCallbacks.push(remove);
         }
+    }
+
+    #prepareContainer() {
+        this.container.classList.add("genome-spy");
+
+        const styleElement = document.createElement("style");
+        styleElement.innerHTML = css;
+        this.container.appendChild(styleElement);
+
+        const canvasWrapper = element("div", {
+            class: "canvas-wrapper",
+        });
+        this.container.appendChild(canvasWrapper);
+
+        canvasWrapper.classList.add("loading");
+
+        this._glHelper = new WebGLHelper(
+            canvasWrapper,
+            () =>
+                this.viewRoot
+                    ? calculateCanvasSize(calculateViewRootSize(this.viewRoot))
+                    : { width: undefined, height: undefined },
+            this.spec.background
+        );
 
         // The initial loading message that is shown until the first frame is rendered
-        this.loadingMessageElement = document.createElement("div");
-        this.loadingMessageElement.className = "loading-message";
-        this.loadingMessageElement.innerHTML = `<div class="message">Loading<span class="ellipsis">...</span></div>`;
-        this.container.appendChild(this.loadingMessageElement);
+        this.loadingMessageElement = element("div", {
+            class: "loading-message",
+            innerHTML: `<div class="message">Loading<span class="ellipsis">...</span></div>`,
+        });
+        canvasWrapper.appendChild(this.loadingMessageElement);
 
         // A container for loading indicators (for lazy data sources.)
         // These could alternatively be included in the view hierarchy,
         // but it's easier this way – particularly if we want to show
         // some fancy animated spinners.
-        this.loadingIndicatorsElement = document.createElement("div");
-        this.loadingIndicatorsElement.className = "loading-indicators";
-        this.container.appendChild(this.loadingIndicatorsElement);
+        this.loadingIndicatorsElement = element("div", {
+            class: "loading-indicators",
+        });
+        canvasWrapper.appendChild(this.loadingIndicatorsElement);
 
-        this.tooltip = new Tooltip(this.container);
+        this.tooltip = new Tooltip(canvasWrapper);
 
         this.loadingMessageElement
             .querySelector(".message")
@@ -435,8 +386,10 @@ export default class GenomeSpy {
     destroy() {
         // TODO: There's a memory leak somewhere
 
+        const canvasWrapper = this.#canvasWrapper;
+
         this.container.classList.remove("genome-spy");
-        this.container.classList.remove("loading");
+        canvasWrapper.classList.remove("loading");
 
         for (const [type, listeners] of this._keyboardListeners) {
             for (const listener of listeners) {
@@ -448,6 +401,8 @@ export default class GenomeSpy {
 
         this._glHelper.finalize();
 
+        this._inputBindingContainer?.remove();
+
         while (this.container.firstChild) {
             this.container.firstChild.remove();
         }
@@ -475,8 +430,6 @@ export default class GenomeSpy {
                 return self._glHelper.dpr;
             },
 
-            paramBroker: this._paramBroker,
-
             requestLayoutReflow: () => {
                 // placeholder
             },
@@ -571,6 +524,11 @@ export default class GenomeSpy {
             VIEW_ROOT_NAME
         );
 
+        this.#canvasWrapper.style.flexGrow =
+            calculateViewRootSize(this.viewRoot).height.grow > 0 ? "1" : "0";
+
+        this.#initializeParameterBindings();
+
         checkForDuplicateScaleNames(this.viewRoot);
 
         setImplicitScaleNames(this.viewRoot);
@@ -585,6 +543,7 @@ export default class GenomeSpy {
         // We should now have a complete view hierarchy. Let's update the canvas size
         // and ensure that the loading message is visible.
         this._glHelper.invalidateSize();
+        this.#setupDpr();
 
         // Collect all unit views to a list because they need plenty of initialization
         const unitViews = /** @type {UnitView[]} */ (
@@ -614,12 +573,14 @@ export default class GenomeSpy {
                 view.mark.initializeData();
                 // Update WebGL buffers
                 view.mark.updateGraphicsData();
+                context.animator.requestRender();
             }, view);
         }
 
         // Have to wait until asynchronous font loading is complete.
         // Text mark's geometry builder needs font metrics before data can be
         // converted into geometries.
+        // TODO: Make updateGraphicsData async and await font loading there.
         await context.fontManager.waitUntilReady();
 
         // Find all data sources and initiate loading
@@ -661,7 +622,7 @@ export default class GenomeSpy {
      */
     async launch() {
         try {
-            this._prepareContainer();
+            this.#prepareContainer();
 
             await this._prepareViewsAndData();
 
@@ -680,7 +641,7 @@ export default class GenomeSpy {
 
             return false;
         } finally {
-            this.container.classList.remove("loading");
+            this.#canvasWrapper.classList.remove("loading");
             // Transition listener doesn't appear to work on observablehq
             window.setTimeout(() => {
                 this.loadingMessageElement.style.display = "none";
@@ -1016,3 +977,19 @@ function createMessageBox(container, message) {
     messageBox.appendChild(messageText);
     container.appendChild(messageBox);
 }
+
+/**
+ * @param {string} tag
+ * @param {Record<string, any>} attrs
+ */
+function element(tag, attrs) {
+    const el = document.createElement(tag);
+    for (const [key, value] of Object.entries(attrs)) {
+        if (["innerHTML", "innerText", "className"].includes(key)) {
+            // @ts-ignore
+            el[key] = value;
+        }
+        el.setAttribute(key, value);
+    }
+    return el;
+}

package/dist/src/gl/glslScaleGenerator.js

@@ -18,7 +18,7 @@ import {
 } from "../encoder/encoder.js";
 import { asArray, peek } from "../utils/arrayUtils.js";
 import { InternMap } from "internmap";
-import { isExprRef } from "../marks/mark.js";
+import { isExprRef } from "../view/paramMediator.js";
 import scaleNull from "../utils/scaleNull.js";
 
 export const ATTRIBUTE_PREFIX = "attr_";

package/dist/src/index.d.ts

@@ -8,7 +8,7 @@ export function embed(el: string | HTMLElement, spec: string | import("./spec/ro
  */
 export function loadSpec(url: string): Promise<any>;
 import GenomeSpy from "./genomeSpy.js";
-import { html } from "lit-html";
+import { html } from "lit";
 import icon from "./img/bowtie.svg";
 import favIcon from "./img/genomespy-favicon.svg";
 export { GenomeSpy, html, icon, favIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";AAamB,mMAGnB;AAyFA;;;;;GAKG;AACH,8BAFW,MAAM,gBAmBhB;sBA5HqB,gBAAgB;qBAFjB,UAAU;iBAGd,kBAAkB;oBACf,6BAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":";AAawB,mMAGnB;AAyFL;;;;;GAKG;AACH,8BAFW,MAAM,gBAmBhB;sBA5HqB,gBAAgB;qBAFjB,KAAK;iBAGT,kBAAkB;oBACf,6BAA6B"}

package/dist/src/index.js

@@ -1,6 +1,6 @@
 import { isObject, isString } from "vega-util";
 import { loader as vegaLoader } from "vega-loader";
-import { html } from "lit-html";
+import { html } from "lit";
 
 import GenomeSpy from "./genomeSpy.js";
 import icon from "./img/bowtie.svg";

package/dist/src/marks/mark.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="external-typings/internmap.js" />
-/**
- * @param {any} x
- * @returns {x is import("../spec/parameter.js").ExprRef}
- */
-export function isExprRef(x: any): x is import("../spec/parameter.js").ExprRef;
 export const SAMPLE_FACET_UNIFORM: "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE: "SAMPLE_FACET_TEXTURE";
 /**
@@ -90,6 +85,14 @@ export default class Mark {
      * @returns {Encoding}
      */
     fixEncoding(encoding: import("../spec/channel.js").Encoding<string>): import("../spec/channel.js").Encoding<string>;
+    /**
+     * Handles dynamic properties that are not bound to uniforms but need
+     * to trigger a graphics update, i.e., rebuild the vertex buffer.
+     *
+     * @param {(keyof MarkProps)[]} props
+     * @protected
+     */
+    protected setupExprRefsNeedingGraphicsUpdate(props: (keyof import("../spec/mark.js").MarkProps)[]): void;
     /**
      * Returns the encoding spec supplemented with mark's default encodings
      *

package/dist/src/marks/mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AA4CA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IAgBI;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EAkF/C;IA/EG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB,0FAA0F;IAC1F,YADW,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAC7C;IAE3B,0DAA0D;IAC1D,aADW,OAAO,SAAS,EAAE,WAAW,CACZ;IAE5B,8DAA8D;IAC9D,iBADW,OAAO,SAAS,EAAE,eAAe,CACZ;IAEhC,+DAA+D;IAC/D,mBADW,OAAO,SAAS,EAAE,gBAAgB,CACX;IAElC,+DAA+D;IAC/D,iBADW,OAAO,SAAS,EAAE,gBAAgB,CACb;IAEhC;;;OAGG;IACH,iBAFU,OAAO,SAAS,EAAE,gBAAgB,CAEZ;IAEhC;;;;;OAKG;IACH,uCAA+B;IAE/B,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,wBAAwB;IACxB,uDAqBC;IAED;;;;;;;;OAQG;IACH,kEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;;;OAMG;IACH,yGAkCC;IAED;;;;OAIG;IACH,8DAiDC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;;OAMG;IAEH,6CANW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA8NlB;IALG;;;;;;MAIC;IAGL;;;;;;OAMG;IACH,uCA6CC;IAED;;;;;;OAMG;IACH,+CAHW,MAAM,UACK,GAAG,KAAE,IAAI,CAe9B;IAED;;;;;;;;;;OAUG;IACH,mDAJW,MAAM,sFAEsB,GAAG,QA6BzC;IAED;;OAEG;IACH,2BAiBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAoCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;OAEG;IACH,4CAOC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CAsF1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;;CACJ;+BAznCY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAmnCjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAM9D;CACJ;0BAtqCyB,WAAW"}