@genome-spy/core 0.43.3 → 0.45.0

package/dist/src/data/sources/sequenceSource.js

@@ -1,3 +1,7 @@
+import {
+    activateExprRefProps,
+    withoutExprRef,
+} from "../../view/paramMediator.js";
 import DataSource from "./dataSource.js";
 
 /**
@@ -16,7 +20,11 @@ export default class SequenceSource extends DataSource {
      */
     constructor(params, view) {
         super();
-        this.sequence = params.sequence;
+        this.sequence = activateExprRefProps(
+            view.paramMediator,
+            params.sequence,
+            () => this.loadSynchronously()
+        );
 
         if (!("start" in this.sequence)) {
             throw new Error("'start' is missing from sequence parameters!");
@@ -27,14 +35,15 @@ export default class SequenceSource extends DataSource {
     }
 
     loadSynchronously() {
-        const as = this.sequence.as || "data";
-        const step = this.sequence.step || 1;
-        const stop = this.sequence.stop;
+        const as = withoutExprRef(this.sequence.as) ?? "data";
+        const start = withoutExprRef(this.sequence.start) ?? 0;
+        const step = withoutExprRef(this.sequence.step) ?? 1;
+        const stop = withoutExprRef(this.sequence.stop);
 
         this.reset();
         this.beginBatch({ type: "file" });
 
-        for (let x = this.sequence.start; x < stop; x += step) {
+        for (let x = start; x < stop; x += step) {
             this._propagate({ [as]: x });
         }
 

package/dist/src/data/sources/sequenceSource.test.js

@@ -14,10 +14,18 @@ async function collectSource(source) {
     return [...collector.getData()];
 }
 
+const viewStub = {
+    paramMediator: {
+        registerParam: () => {},
+        allocateSetter: () => {},
+        createExpression: () => {},
+    },
+};
+
 test("SequenceSource generates a sequence", async () => {
     expect(
         await collectSource(
-            new SequenceSource({ sequence: { start: 0, stop: 3 } })
+            new SequenceSource({ sequence: { start: 0, stop: 3 } }, viewStub)
         )
     ).toEqual([{ data: 0 }, { data: 1 }, { data: 2 }]);
 });
@@ -25,7 +33,10 @@ test("SequenceSource generates a sequence", async () => {
 test("SequenceSource generates a sequence with a custom step", async () => {
     expect(
         await collectSource(
-            new SequenceSource({ sequence: { start: 0, stop: 5, step: 2 } })
+            new SequenceSource(
+                { sequence: { start: 0, stop: 5, step: 2 } },
+                viewStub
+            )
         )
     ).toEqual([{ data: 0 }, { data: 2 }, { data: 4 }]);
 });
@@ -33,14 +44,21 @@ test("SequenceSource generates a sequence with a custom step", async () => {
 test("SequenceSource generates a sequence with a custom field name", async () => {
     expect(
         await collectSource(
-            new SequenceSource({ sequence: { start: 0, stop: 3, as: "x" } })
+            new SequenceSource(
+                { sequence: { start: 0, stop: 3, as: "x" } },
+                viewStub
+            )
         )
     ).toEqual([{ x: 0 }, { x: 1 }, { x: 2 }]);
 });
 
 test("SequenceSource throws on missing 'start' parameter", () => {
-    expect(() => new SequenceSource({ sequence: { stop: 3 } })).toThrow();
+    expect(
+        () => new SequenceSource({ sequence: { stop: 3 } }, viewStub)
+    ).toThrow();
 });
 test("SequenceSource throws on missing 'stop' parameter", () => {
-    expect(() => new SequenceSource({ sequence: { start: 0 } })).toThrow();
+    expect(
+        () => new SequenceSource({ sequence: { start: 0 } }, viewStub)
+    ).toThrow();
 });

package/dist/src/data/sources/urlSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"urlSource.d.ts","sourceRoot":"","sources":["../../../../src/data/sources/urlSource.js"],"names":[],"mappings":"AAIA;;;GAGG;AACH,gCAHW,QAAQ,OAAO,oBAAoB,EAAE,IAAI,CAAC,gDAKpD;AAED;IACI;;;OAGG;IACH,oBAHW,OAAO,oBAAoB,EAAE,OAAO,QACpC,OAAO,oBAAoB,EAAE,OAAO,EAO9C;IAFG,6CAAoB;IACpB,gBAAiC;CAoDxC;uBAvEsB,iBAAiB"}
+{"version":3,"file":"urlSource.d.ts","sourceRoot":"","sources":["../../../../src/data/sources/urlSource.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,gCAHW,QAAQ,OAAO,oBAAoB,EAAE,IAAI,CAAC,gDAKpD;AAED;IACI;;;OAGG;IACH,oBAHW,OAAO,oBAAoB,EAAE,OAAO,QACpC,OAAO,oBAAoB,EAAE,OAAO,EAU9C;IALG,6CAEC;IAED,gBAAiC;CA0DxC;uBApFsB,iBAAiB"}

package/dist/src/data/sources/urlSource.js

@@ -1,6 +1,10 @@
 import { loader as vegaLoader, read } from "vega-loader";
 import { getFormat } from "./dataUtils.js";
 import DataSource from "./dataSource.js";
+import {
+    activateExprRefProps,
+    withoutExprRef,
+} from "../../view/paramMediator.js";
 
 /**
  * @param {Partial<import("../../spec/data.js").Data>} data
@@ -18,7 +22,10 @@ export default class UrlSource extends DataSource {
     constructor(params, view) {
         super();
 
-        this.params = params;
+        this.params = activateExprRefProps(view.paramMediator, params, () =>
+            this.load()
+        );
+
         this.baseUrl = view?.getBaseUrl();
     }
 
@@ -27,11 +34,17 @@ export default class UrlSource extends DataSource {
     }
 
     async load() {
-        const url = this.params.url;
+        const url = withoutExprRef(this.params.url);
 
         /** @type {string[]} */
         const urls = Array.isArray(url) ? url : [url];
 
+        if (urls.length === 0 || !urls[0]) {
+            this.reset();
+            this.complete();
+            return;
+        }
+
         /** @param {string} url */
         const load = async (url) =>
             // TODO: Support chunked loading

package/dist/src/data/transforms/aggregate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aggregate.d.ts","sourceRoot":"","sources":["../../../../src/data/transforms/aggregate.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH;IAKI;;OAEG;IACH,oBAFW,OAAO,yBAAyB,EAAE,eAAe,EAQ3D;IAJG,0DAAoB;IAEpB,oBAAoB;IACpB,QADW,GAAG,EAAE,CACA;CAyCvB;qBAjEyC,gBAAgB"}
+{"version":3,"file":"aggregate.d.ts","sourceRoot":"","sources":["../../../../src/data/transforms/aggregate.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH;IAKI;;OAEG;IACH,oBAFW,OAAO,yBAAyB,EAAE,eAAe,EAQ3D;IAJG,0DAAoB;IAEpB,oBAAoB;IACpB,QADW,GAAG,EAAE,CACA;CA4CvB;qBApEyC,gBAAgB"}

package/dist/src/data/transforms/aggregate.js

@@ -46,8 +46,11 @@ export default class AggregateTransform extends FlowNode {
         const groupFieldAccessors = groupby.map((f) => field(f));
 
         // TODO: Fix case where no group fields are specified
-        // @ts-expect-error
-        const groups = d3group(this.buffer, ...groupFieldAccessors);
+
+        // There's something strange in d3-array's typings
+        const groups = /** @type {Map<any, any>} */ /** @type {any} */ (
+            d3group(this.buffer, ...groupFieldAccessors)
+        );
 
         for (const [group, data] of iterateNestedMaps(groups)) {
             /** @type {any} */

package/dist/src/data/transforms/filterScoredLabels.js

@@ -75,7 +75,7 @@ export default class FilterScoredLabelsTransform extends FlowNode {
     _filterAndPropagate() {
         super.reset();
 
-        const scale = this.resolution.getScale();
+        const scale = this.resolution.scale;
         const rangeSpan =
             this.resolution.members[0].view.coords?.[
                 this.channel == "x" ? "width" : "height"

package/dist/src/encoder/encoder.d.ts

@@ -1,8 +1,6 @@
 /**
  * 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
@@ -11,14 +9,14 @@
  */
 export default function createEncoders(mark: import("../marks/mark.js").default, encoding?: import("../spec/channel.js").Encoding): Partial<Record<import("../spec/channel.js").Channel, import("../types/encoder.js").Encoder>>;
 /**
- *
+ * @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: import("../spec/channel.js").ChannelDef, scale: any, accessor: import("../types/encoder.js").Accessor, channel: import("../spec/channel.js").Channel): import("../types/encoder.js").Encoder;
+export function createEncoder(mark: import("../marks/mark.js").default, channelDef: import("../spec/channel.js").ChannelDef, scale: any, accessor: import("../types/encoder.js").Accessor, channel: import("../spec/channel.js").Channel): import("../types/encoder.js").Encoder;
 /**
  * TODO: Move to a more generic place
  *

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

@@ -1 +1 @@
-{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAsC/C;AAED;;;;;;;GAOG;AACH,0CANW,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IA2Fb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,27CAS9C;AAED;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAsBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAmBhC;AA7LD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}
+{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAuC/C;AAED;;;;;;;GAOG;AACH,oCAPW,OAAO,kBAAkB,EAAE,OAAO,cAClC,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IAqGb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,27CAS9C;AAED;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAsBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAmBhC;AA7LD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}

package/dist/src/encoder/encoder.js

@@ -1,12 +1,11 @@
 import { isDiscrete } from "vega-scale";
 import createIndexer from "../utils/indexer.js";
 import scaleNull from "../utils/scaleNull.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
@@ -40,8 +39,9 @@ export default function createEncoders(mark, encoding) {
         const resolution = mark.unitView.getScaleResolution(channelWithScale);
 
         encoders[channel] = createEncoder(
+            mark,
             encoding[channel],
-            resolution?.getScale(),
+            resolution?.scale,
             mark.unitView.getAccessor(channel),
             channel
         );
@@ -51,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
@@ -69,11 +69,21 @@ export function createEncoder(channelDef, scale, accessor, channel) {
     let encoder;
 
     if (isValueDef(channelDef)) {
-        const value = channelDef.value;
-        encoder = /** @type {Encoder} */ ((datum) => value);
-        encoder.constant = true;
-        encoder.constantValue = true;
-        encoder.accessor = undefined;
+        if (isExprRef(channelDef.value)) {
+            const fn = mark.unitView.paramMediator.createExpression(
+                channelDef.value.expr
+            );
+            encoder = /** @type {Encoder} */ ((datum) => fn(null));
+            encoder.constant = true;
+            encoder.constantValue = false;
+            encoder.accessor = accessor;
+        } else {
+            const value = channelDef.value;
+            encoder = /** @type {Encoder} */ ((datum) => value);
+            encoder.constant = true;
+            encoder.constantValue = true;
+            encoder.accessor = undefined;
+        }
     } else if (accessor) {
         if (channel == "text") {
             // TODO: Define somewhere channels that don't use a scale

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
@@ -139,6 +142,7 @@ export default class GenomeSpy {
     renderPickingFramebuffer(): void;
     getSearchableViews(): UnitView[];
     getNamedScaleResolutions(): Map<string, import("./view/scaleResolution.js").default>;
+    #private;
 }
 /**
  * Events that are broadcasted to all views.
@@ -150,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":"AA6CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EAyFpD;IAtFG,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;IAErC;;;;OAIG;IACH,8DAA8B;IAGlC;;;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,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;;;;iCA51BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAhC7C,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,7 +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 createBindingInputs from "./utils/inputBinding.js";
 
 /**
  * Events that are broadcasted to all views.
@@ -59,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;
 
@@ -136,14 +136,57 @@ export default class GenomeSpy {
         /** @type {View} */
         this.viewRoot = undefined;
 
-        this._paramBroker = new ParamBroker();
-
         /**
          * Views that are currently loading data using lazy sources.
          *
          * @type {Map<View, boolean>}
          */
         this._loadingViews = new Map();
+
+        /**
+         * @type {HTMLElement}
+         */
+        this._inputBindingContainer = undefined;
+    }
+
+    get #canvasWrapper() {
+        return /** @type {HTMLElement} */ (
+            this.container.querySelector(".canvas-wrapper")
+        );
+    }
+
+    #initializeParameterBindings() {
+        /** @type {import("lit").TemplateResult[]} */
+        const inputs = [];
+
+        this.viewRoot.visit((view) => {
+            const mediator = view.paramMediator;
+            inputs.push(...createBindingInputs(mediator));
+        });
+        const ibc = this.options.inputBindingContainer;
+
+        if (!ibc || ibc == "none" || !inputs.length) {
+            return;
+        }
+
+        this._inputBindingContainer = element("div", {
+            className: "gs-input-bindings",
+        });
+
+        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`<div class="gs-input-binding">${inputs}</div>`,
+                this._inputBindingContainer
+            );
+        }
     }
 
     /**
@@ -203,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 = () =>
@@ -245,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 = () => {
@@ -271,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;
 
@@ -295,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")
@@ -327,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) {
@@ -340,6 +401,8 @@ export default class GenomeSpy {
 
         this._glHelper.finalize();
 
+        this._inputBindingContainer?.remove();
+
         while (this.container.firstChild) {
             this.container.firstChild.remove();
         }
@@ -367,8 +430,6 @@ export default class GenomeSpy {
                 return self._glHelper.dpr;
             },
 
-            paramBroker: this._paramBroker,
-
             requestLayoutReflow: () => {
                 // placeholder
             },
@@ -463,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);
@@ -477,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[]} */ (
@@ -506,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
@@ -533,12 +602,6 @@ export default class GenomeSpy {
 
         await graphicsInitialized;
 
-        this.viewRoot.visit((view) => {
-            for (const resolution of Object.values(view.resolutions.scale)) {
-                this._glHelper.createRangeTexture(resolution);
-            }
-        });
-
         for (const view of unitViews) {
             view.mark.finalizeGraphicsInitialization();
         }
@@ -559,7 +622,7 @@ export default class GenomeSpy {
      */
     async launch() {
         try {
-            this._prepareContainer();
+            this.#prepareContainer();
 
             await this._prepareViewsAndData();
 
@@ -578,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";
@@ -914,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;
+}