@genome-spy/core 0.44.0 → 0.46.0

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;gBAF8B,OAAO,wBAAwB,EAAE,iBAAiB;iBAAW,MAAM;OAEnE;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,iCAqDC;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,sBA6CC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCA16BY,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, nothing, 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>}
+         * @type {Map<View, { status: import("./types/viewContext.js").DataLoadingStatus, detail?: string }>}
          */
         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,11 +246,13 @@ 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 = () =>
-            [...this._loadingViews.values()].some((v) => v);
+            [...this._loadingViews.values()].some(
+                (v) => v.status == "loading" || v.status == "error"
+            );
 
         for (const [view, status] of this._loadingViews) {
             const c = view.coords;
@@ -328,9 +265,18 @@ export default class GenomeSpy {
                 };
                 indicators.push(
                     html`<div style=${styleMap(style)}>
-                        <div class=${status ? "loading" : ""}>
-                            <img src="${SPINNER}" alt="" />
-                            <span>Loading...</span>
+                        <div class=${status.status}>
+                            ${status.status == "error"
+                                ? html`<span
+                                      >Loading
+                                      failed${status.detail
+                                          ? html`: ${status.detail}`
+                                          : nothing}</span
+                                  >`
+                                : html`
+                                      <img src="${SPINNER}" alt="" />
+                                      <span>Loading...</span>
+                                  `}
                         </div>
                     </div>`
                 );
@@ -339,6 +285,7 @@ export default class GenomeSpy {
 
         // Do some hacks to stop css animations of the loading indicators.
         // Otherwise they fire animation frames even when their opacity is zero.
+        // TODO: Instead of this, replace the animated spinners with static images.
         if (isSomethingVisible()) {
             this.loadingIndicatorsElement.style.display = "block";
         } else {
@@ -353,17 +300,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 +319,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 +340,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 +398,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 +413,8 @@ export default class GenomeSpy {
 
         this._glHelper.finalize();
 
+        this._inputBindingContainer?.remove();
+
         while (this.container.firstChild) {
             this.container.firstChild.remove();
         }
@@ -475,8 +442,6 @@ export default class GenomeSpy {
                 return self._glHelper.dpr;
             },
 
-            paramBroker: this._paramBroker,
-
             requestLayoutReflow: () => {
                 // placeholder
             },
@@ -484,8 +449,8 @@ export default class GenomeSpy {
             getNamedDataFromProvider: this.getNamedDataFromProvider.bind(this),
             getCurrentHover: () => this._currentHover,
 
-            setDataLoadingStatus: (view, status) => {
-                this._loadingViews.set(view, status);
+            setDataLoadingStatus: (view, status, detail) => {
+                this._loadingViews.set(view, { status, detail });
                 this._updateLoadingIndicators();
             },
 
@@ -571,6 +536,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 +555,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 +585,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 +634,7 @@ export default class GenomeSpy {
      */
     async launch() {
         try {
-            this._prepareContainer();
+            this.#prepareContainer();
 
             await this._prepareViewsAndData();
 
@@ -680,7 +653,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";
@@ -959,6 +932,10 @@ export default class GenomeSpy {
             Rectangle.create(0, 0, canvasSize.width, canvasSize.height)
         );
 
+        // The view coordinates may have not been known during the initial data loading.
+        // Thus, update them so that possible error messages are shown in the correct place.
+        this._updateLoadingIndicators();
+
         this.broadcast("layoutComputed");
     }
 
@@ -1016,3 +993,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,QAiB9D;CACJ;0BAjrCyB,WAAW"}

package/dist/src/marks/mark.js

@@ -40,7 +40,7 @@ import coalesceProperties from "../utils/propertyCoalescer.js";
 import { isScalar } from "../utils/variableTools.js";
 import { InternMap } from "internmap";
 import ViewError from "../view/viewError.js";
-import { isString } from "vega-util";
+import { isExprRef } from "../view/paramMediator.js";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -221,6 +221,49 @@ export default class Mark {
         return encoding;
     }
 
+    /**
+     * 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
+     */
+    setupExprRefsNeedingGraphicsUpdate(props) {
+        const channels = this.getSupportedChannels();
+        /** @type {Partial<MarkProps>} */
+        const exprProps = {};
+        for (const key of props) {
+            const prop = this.properties[key];
+            if (prop && isExprRef(prop)) {
+                const fn = this.unitView.paramMediator.createExpression(
+                    prop.expr
+                );
+                fn.addListener(() => {
+                    this.updateGraphicsData();
+                    this.unitView.context.animator.requestRender();
+                });
+                // @ts-ignore
+                if (!channels.includes(key)) {
+                    Object.defineProperty(exprProps, key, {
+                        get() {
+                            return fn();
+                        },
+                    });
+                } else {
+                    // Encoder takes care of evaluating the expression
+                    // N.B.: There are now two expression instances for the
+                    // same expression, which is no ideal
+                }
+            }
+        }
+        const originalProperties = this.properties;
+        // @ts-ignore
+        this.properties = coalesceProperties(
+            () => exprProps,
+            () => originalProperties
+        );
+    }
+
     /**
      * Returns the encoding spec supplemented with mark's default encodings
      *
@@ -644,10 +687,20 @@ export default class Mark {
      * @param {(x: Exclude<T, ExprRef>) => any} adjuster
      */
     registerMarkUniformValue(uniformName, propValue, adjuster = (x) => x) {
-        const setter = this.createMarkUniformSetter(uniformName);
+        const rawSetter = this.createMarkUniformSetter(uniformName);
+        const setter = (/** @type {any} */ value) => {
+            if (value == null) {
+                throw new Error(
+                    `Trying to set null/undefined value for uniform: ${uniformName}${
+                        isExprRef(propValue) ? `Expr: ${propValue.expr}` : ""
+                    }`
+                );
+            }
+            rawSetter(value);
+        };
 
         if (isExprRef(propValue)) {
-            const fn = this.unitView.context.paramBroker.createExpression(
+            const fn = this.unitView.paramMediator.createExpression(
                 propValue.expr
             );
 
@@ -1171,17 +1224,19 @@ class RangeMap extends InternMap {
      * @param {Map<K, import("../gl/dataToVertices.js").RangeEntry>} anotherMap
      */
     migrateEntries(anotherMap) {
+        for (const [key, value] of this.entries()) {
+            // Buffered draw calls maintain direct references to the range entries.
+            // Thus, they cannot just be deleted, but instead, their counts and offsets
+            // must be zeroed.
+            if (!anotherMap.has(key)) {
+                value.offset = 0;
+                value.count = 0;
+                value.xIndex = undefined;
+            }
+        }
+
         for (const [key, value] of anotherMap.entries()) {
             Object.assign(this.get(key), value);
         }
     }
 }
-
-// TODO: Find a better place for this function
-/**
- * @param {any} x
- * @returns {x is import("../spec/parameter.js").ExprRef}
- */
-export function isExprRef(x) {
-    return typeof x == "object" && x != null && "expr" in x && isString(x.expr);
-}

package/dist/src/marks/point.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform lowp float uMaxRelativePointDiameter;uniform mediump float uScaleFactor;uniform mediump float uMaxPointSize;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
+const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform mediump float uScaleFactor;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
 export default shader;

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

@@ -1,11 +1,8 @@
 export default class PointMark extends Mark {
     sampledSemanticScores: Float32Array;
     _getGeometricScaleFactor(): number;
-    /**
-     * Returns the maximum size of the points in the data, before any scaling
-     */
-    _getMaxPointSize(): import("../spec/channel.js").Scalar;
     getSemanticThreshold(): number;
+    #private;
 }
 import Mark from "./mark.js";
 //# sourceMappingURL=point.d.ts.map