@genome-spy/core 0.43.3 → 0.45.0

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

@@ -9,6 +9,7 @@
  */
 
 import { Align, Baseline, FontStyle, FontWeight } from "./font.js";
+import { ExprRef } from "./parameter.js";
 
 export type TitleOrient = "none" | "left" | "right" | "top" | "bottom";
 export type TitleAnchor = null | "start" | "middle" | "end";
@@ -18,7 +19,7 @@ export interface Title {
     /**
      * The title text.
      */
-    text: string;
+    text: string | ExprRef;
 
     /**
      * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
@@ -54,7 +55,7 @@ export interface Title {
     /**
      * Angle in degrees of title and subtitle text.
      */
-    angle?: number;
+    angle?: number | ExprRef;
 
     /**
      * Vertical text baseline for title and subtitle text. One of `"alphabetic"` (default), `"top"`, `"middle"`, or `"bottom"`.
@@ -75,7 +76,7 @@ export interface Title {
     /**
      * Text color for title text.
      */
-    color?: string;
+    color?: string | ExprRef;
 
     /**
      * Font name for title text.
@@ -87,7 +88,7 @@ export interface Title {
      *
      * @minimum 0
      */
-    fontSize?: number;
+    fontSize?: number | ExprRef;
 
     /**
      * Font style for title text.

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

@@ -7,14 +7,15 @@ import {
     PrimaryPositionalChannel,
 } from "./channel.js";
 import {
-    ExprRef,
     FillAndStrokeProps,
     MarkConfigAndType,
     MarkType,
     RectProps,
 } from "./mark.js";
+import { ExprRef } from "./parameter.js";
 import { Title } from "./title.js";
 import { SampleSpec } from "./sampleView.js";
+import { VariableParameter } from "./parameter.js";
 
 export interface SizeDef {
     /** Size in pixels */
@@ -108,6 +109,11 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     padding?: PaddingConfig;
 
+    /**
+     * Dynamic variables that parameterize a visualization.
+     */
+    params?: VariableParameter[];
+
     data?: Data;
     transform?: TransformParams[];
     encoding?: Encoding;
@@ -212,14 +218,23 @@ export type ViewSpec =
     | ConcatSpec
     | SampleSpec;
 
-export interface ImportConfig {
-    name?: string;
+export interface ImportParams {
     url?: string;
-    params?: object;
+
+    /**
+     * Name for the imported view. Overrides the name defined in the imported spec.
+     */
+    name?: string;
+
+    /**
+     * Dynamic variables that parameterize a visualization. Parameters defined here
+     * override the parameters defined in the imported spec.
+     */
+    params?: VariableParameter[] | Record<string, any>;
 }
 
 export interface ImportSpec {
-    import: ImportConfig;
+    import: ImportParams;
 }
 
 export interface ConcatBase extends ViewSpecBase {

package/dist/src/styles/genome-spy.css.d.ts

@@ -1,3 +1,3 @@
 export default css;
-declare const css: ".genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n}\n.genome-spy canvas {\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy.loading canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy.loading .loading-message .message {\n  opacity: 1;\n}\n.genome-spy.loading .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .loading-indicators {\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n}\n.genome-spy .loading-indicators div {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-indicators div > div {\n  font-size: 11px;\n  transition: opacity 0.2s;\n  background: white;\n  padding: 2px 5px;\n  display: flex;\n  border-radius: 3px;\n  gap: 0.5em;\n  opacity: 0;\n}\n.genome-spy .loading-indicators div > div.loading {\n  opacity: 0.5;\n}\n.genome-spy .loading-indicators div > div > * {\n  display: block;\n}\n.genome-spy .loading-indicators div > div img {\n  width: 1.5em;\n  height: 1.5em;\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}";
+declare const css: "\n.genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.genome-spy .canvas-wrapper {\n  position: relative;\n  flex-grow: 1;\n  overflow: hidden;\n}\n.genome-spy canvas {\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy .loading > canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy .loading > .loading-message .message {\n  opacity: 1;\n}\n.genome-spy .loading > .loading-message .message .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .loading-indicators {\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n}\n.genome-spy .loading-indicators div {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-indicators div > div {\n  font-size: 11px;\n  transition: opacity 0.2s;\n  background: white;\n  padding: 2px 5px;\n  display: flex;\n  border-radius: 3px;\n  gap: 0.5em;\n  opacity: 0;\n}\n.genome-spy .loading-indicators div > div.loading {\n  opacity: 0.5;\n}\n.genome-spy .loading-indicators div > div > * {\n  display: block;\n}\n.genome-spy .loading-indicators div > div img {\n  width: 1.5em;\n  height: 1.5em;\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}\n\n.gs-input-binding {\n  display: grid;\n  grid-template-columns: max-content max-content;\n  column-gap: 1em;\n  row-gap: 0.3em;\n  justify-items: start;\n}\n.gs-input-binding > select,\n.gs-input-binding > input:not([type=checkbox]) {\n  width: 100%;\n}\n.gs-input-binding input[type=range] + span {\n  display: inline-block;\n  margin-left: 0.3em;\n  min-width: 2.2em;\n  font-variant-numeric: tabular-nums;\n}\n.gs-input-binding input[type=range],\n.gs-input-binding input[type=radio] {\n  vertical-align: text-bottom;\n}\n.gs-input-binding .radio-group {\n  display: flex;\n  align-items: center;\n}\n.gs-input-binding .description {\n  max-width: 26em;\n  grid-column: 1/-1;\n  color: #777;\n  font-size: 90%;\n  margin-top: -0.5em;\n}\n\n.gs-input-bindings {\n  flex-basis: content;\n  font-size: 14px;\n  padding: 10px;\n}\n";
 //# sourceMappingURL=genome-spy.css.d.ts.map

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0jGA4IG"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,6iIA4LE"}

package/dist/src/styles/genome-spy.css.js

@@ -1,6 +1,14 @@
-const css = `.genome-spy {
+const css = `
+.genome-spy {
   font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.genome-spy .canvas-wrapper {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
 }
 .genome-spy canvas {
   transform: scale(1, 1);
@@ -19,14 +27,14 @@ const css = `.genome-spy {
   opacity: 0;
   transition: opacity 0.7s;
 }
-.genome-spy.loading canvas {
+.genome-spy .loading > canvas {
   transform: scale(0.95, 0.95);
   opacity: 0;
 }
-.genome-spy.loading .loading-message .message {
+.genome-spy .loading > .loading-message .message {
   opacity: 1;
 }
-.genome-spy.loading .ellipsis {
+.genome-spy .loading > .loading-message .message .ellipsis {
   animation: blinker 1s linear infinite;
 }
 @keyframes blinker {
@@ -138,6 +146,45 @@ const css = `.genome-spy {
   border: 1px solid red;
   padding: 10px;
   background: #fff0f0;
-}`;
+}
+
+.gs-input-binding {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 1em;
+  row-gap: 0.3em;
+  justify-items: start;
+}
+.gs-input-binding > select,
+.gs-input-binding > input:not([type=checkbox]) {
+  width: 100%;
+}
+.gs-input-binding input[type=range] + span {
+  display: inline-block;
+  margin-left: 0.3em;
+  min-width: 2.2em;
+  font-variant-numeric: tabular-nums;
+}
+.gs-input-binding input[type=range],
+.gs-input-binding input[type=radio] {
+  vertical-align: text-bottom;
+}
+.gs-input-binding .radio-group {
+  display: flex;
+  align-items: center;
+}
+.gs-input-binding .description {
+  max-width: 26em;
+  grid-column: 1/-1;
+  color: #777;
+  font-size: 90%;
+  margin-top: -0.5em;
+}
 
+.gs-input-bindings {
+  flex-basis: content;
+  font-size: 14px;
+  padding: 10px;
+}
+`;
 export default css;

package/dist/src/styles/genome-spy.scss

@@ -10,6 +10,15 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
 
     position: relative;
 
+    display: flex;
+    flex-direction: column;
+
+    .canvas-wrapper {
+        position: relative;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
     canvas {
         transform: scale(1, 1);
         opacity: 1;
@@ -31,23 +40,23 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         }
     }
 
-    &.loading {
-        canvas {
+    .loading {
+        > canvas {
             transform: scale(0.95, 0.95);
             opacity: 0;
         }
 
-        .loading-message .message {
+        > .loading-message .message {
             opacity: 1;
-        }
 
-        .ellipsis {
-            animation: blinker 1s linear infinite;
-        }
+            .ellipsis {
+                animation: blinker 1s linear infinite;
+            }
 
-        @keyframes blinker {
-            50% {
-                opacity: 0;
+            @keyframes blinker {
+                50% {
+                    opacity: 0;
+                }
             }
         }
     }
@@ -187,3 +196,47 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         }
     }
 }
+
+.gs-input-binding {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    column-gap: 1em;
+    row-gap: 0.3em;
+    justify-items: start;
+
+    > select,
+    > input:not([type="checkbox"]) {
+        width: 100%;
+    }
+
+    input[type="range"] + span {
+        display: inline-block;
+        margin-left: 0.3em;
+        min-width: 2.2em;
+        font-variant-numeric: tabular-nums;
+    }
+
+    input[type="range"],
+    input[type="radio"] {
+        vertical-align: text-bottom;
+    }
+
+    .radio-group {
+        display: flex;
+        align-items: center;
+    }
+
+    .description {
+        max-width: 26em;
+        grid-column: 1 / -1;
+        color: #777;
+        font-size: 90%;
+        margin-top: -0.5em;
+    }
+}
+
+.gs-input-bindings {
+    flex-basis: content;
+    font-size: 14px;
+    padding: $basic-spacing;
+}

package/dist/src/styles/update.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+echo "const css = \`" > genome-spy.css.js
+sass genome-spy.scss >> genome-spy.css.js
+echo "\`;" >> genome-spy.css.js 
+echo "export default css;" >> genome-spy.css.js 
+

package/dist/src/tooltip/dataTooltipHandler.js

@@ -1,4 +1,4 @@
-import { html } from "lit-html";
+import { html } from "lit";
 import formatObject from "../utils/formatObject.js";
 
 /**

package/dist/src/tooltip/refseqGeneTooltipHandler.js

@@ -1,5 +1,5 @@
 import { debounce } from "../utils/debounce.js";
-import { html } from "lit-html";
+import { html } from "lit";
 
 /*
  * https://www.ncbi.nlm.nih.gov/books/NBK25500/

package/dist/src/tooltip/tooltipHandler.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit-html";
+import { TemplateResult } from "lit";
 import Mark from "../marks/mark.js";
 /**
  * Converts a datum to tooltip (HTMLElement or lit's TemplateResult).

package/dist/src/tooltip/tooltipHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,IAAI,EAAE,IAAI;AACV,sDAAsD;AACtD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC3B,OAAO,CAAC,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC"}
+{"version":3,"file":"tooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,IAAI,EAAE,IAAI;AACV,sDAAsD;AACtD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC3B,OAAO,CAAC,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC"}

package/dist/src/tooltip/tooltipHandler.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit-html";
+import { TemplateResult } from "lit";
 import Mark from "../marks/mark.js";
 
 /**

package/dist/src/types/embedApi.d.ts

@@ -27,6 +27,12 @@ export interface EmbedOptions {
      * Custom tooltip handlers. Use `"default"` to override the default handler
      */
     tooltipHandlers?: Record<string, TooltipHandler>;
+
+    /**
+     * Where to put the input binding elements. The default is `"default"`, which means that
+     * the input binding elements are placed in the same container as the GenomeSpy instance.
+     */
+    inputBindingContainer?: HTMLElement | "none" | "default";
 }
 
 /**

package/dist/src/types/scaleResolutionApi.d.ts

@@ -1,8 +1,9 @@
 import { ComplexDomain, NumericDomain } from "../spec/scale.js";
 import ScaleResolution from "../view/scaleResolution.js";
 
+export type ScaleResolutionEventType = "domain" | "range";
 export interface ScaleResolutionEvent {
-    type: "domain";
+    type: ScaleResolutionEventType;
 
     scaleResolution: ScaleResolution;
 }
@@ -13,10 +14,13 @@ export type ScaleResolutionListener = (event: ScaleResolutionEvent) => void;
  * A public API for ScaleResolution
  */
 export interface ScaleResolutionApi {
-    addEventListener(type: "domain", listener: ScaleResolutionListener): void;
+    addEventListener(
+        type: ScaleResolutionEventType,
+        listener: ScaleResolutionListener
+    ): void;
 
     removeEventListener(
-        type: "domain",
+        type: ScaleResolutionEventType,
         listener: ScaleResolutionListener
     ): void;
 

package/dist/src/types/viewContext.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit-html";
+import { TemplateResult } from "lit";
 import View, { BroadcastMessage } from "../view/view.js";
 import DataFlow from "../data/dataFlow.js";
 import AccessorFactory from "../encoder/accessor.js";
@@ -11,7 +11,7 @@ import { Datum } from "../data/flowNode.js";
 import { ImportSpec, ViewSpec } from "../spec/view.js";
 import ContainerView from "./containerView.js";
 import { BroadcastEventType } from "../genomeSpy.js";
-import ParamBroker from "../paramBroker.js";
+import ParamMediator from "../view/paramMediator.js";
 
 export interface Hover {
     mark: Mark;
@@ -29,7 +29,6 @@ export default interface ViewContext {
     genomeStore?: GenomeStore;
     fontManager: BmFontManager;
 
-    paramBroker: ParamBroker;
     devicePixelRatio: number;
 
     requestLayoutReflow: () => void;

package/dist/src/utils/debounce.d.ts

@@ -1,8 +1,8 @@
 /**
  * @param {(...args:T) => R} func
- * @param {number} wait
+ * @param {number | (() => number)} wait
  * @template {any[]} T
  * @template R
  */
-export function debounce<T extends any[], R>(func: (...args: T) => R, wait: number, rejectOnDebounce?: boolean): (...args: T) => Promise<R>;
+export function debounce<T extends any[], R>(func: (...args: T) => R, wait: number | (() => number), rejectOnDebounce?: boolean): (...args: T) => Promise<R>;
 //# sourceMappingURL=debounce.d.ts.map

package/dist/src/utils/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../src/utils/debounce.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,4EAJW,MAAM,0DAkChB"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../src/utils/debounce.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,4EAJW,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,0DAqCjC"}

package/dist/src/utils/debounce.js

@@ -1,6 +1,6 @@
 /**
  * @param {(...args:T) => R} func
- * @param {number} wait
+ * @param {number | (() => number)} wait
  * @template {any[]} T
  * @template R
  */
@@ -29,7 +29,10 @@ export function debounce(func, wait, rejectOnDebounce = true) {
             clearTimeout(timeout);
 
             rejectPrevious = reject;
-            timeout = window.setTimeout(later, wait);
+            timeout = window.setTimeout(
+                later,
+                typeof wait == "function" ? wait() : wait
+            );
         });
     };
 

package/dist/src/utils/expression.d.ts

@@ -4,7 +4,7 @@
  * @prop { string[] } globals
  * @prop { string } code
  *
- * @typedef { ((x: object) => any) & ExpressionProps } ExpressionFunction
+ * @typedef { ((datum?: object) => any) & ExpressionProps } ExpressionFunction
  *
  * @param {string} expr
  * @returns {ExpressionFunction}
@@ -15,5 +15,5 @@ export type ExpressionProps = {
     globals: string[];
     code: string;
 };
-export type ExpressionFunction = ((x: object) => any) & ExpressionProps;
+export type ExpressionFunction = ((datum?: object) => any) & ExpressionProps;
 //# sourceMappingURL=expression.d.ts.map

package/dist/src/utils/expression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAyDA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAyB9B;;YAhCU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;sCAEE,MAAM,KAAK,GAAG"}
+{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAyDA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAyB9B;;YAhCU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;2CAEO,MAAM,KAAK,GAAG"}

package/dist/src/utils/expression.js

@@ -61,7 +61,7 @@ const cg = codegenExpression({
  * @prop { string[] } globals
  * @prop { string } code
  *
- * @typedef { ((x: object) => any) & ExpressionProps } ExpressionFunction
+ * @typedef { ((datum?: object) => any) & ExpressionProps } ExpressionFunction
  *
  * @param {string} expr
  * @returns {ExpressionFunction}
@@ -79,8 +79,8 @@ export default function createFunction(expr, globalObject = {}) {
         ).bind(functionContext);
 
         /** @type { ExpressionFunction } */
-        const exprFunction = /** @param {object} x */ (x) =>
-            fn(x, globalObject);
+        const exprFunction = /** @param {object} datum */ (datum) =>
+            fn(datum, globalObject);
         exprFunction.fields = generatedCode.fields;
         exprFunction.globals = generatedCode.globals;
         exprFunction.code = generatedCode.code;

package/dist/src/utils/formatObject.d.ts

@@ -1,7 +1,7 @@
 /**
  *
  * @param {any} object Object to format
- * @returns {string | import("lit-html").TemplateResult}
+ * @returns {string | import("lit").TemplateResult}
  */
-export default function formatObject(object: any): string | import("lit-html").TemplateResult;
+export default function formatObject(object: any): string | import("lit").TemplateResult;
 //# sourceMappingURL=formatObject.d.ts.map

package/dist/src/utils/formatObject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatObject.d.ts","sourceRoot":"","sources":["../../../src/utils/formatObject.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,6CAHW,GAAG,GACD,MAAM,GAAG,OAAO,UAAU,EAAE,cAAc,CA0BtD"}
+{"version":3,"file":"formatObject.d.ts","sourceRoot":"","sources":["../../../src/utils/formatObject.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,6CAHW,GAAG,GACD,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,CA0BjD"}

package/dist/src/utils/formatObject.js

@@ -1,6 +1,6 @@
 import { isNumber, isString, isBoolean, isArray } from "vega-util";
 import { format as d3format } from "d3-format";
-import { html, nothing } from "lit-html";
+import { html, nothing } from "lit";
 
 const numberFormat = d3format(".4~r");
 const exponentNumberFormat = d3format(".4~e");
@@ -8,7 +8,7 @@ const exponentNumberFormat = d3format(".4~e");
 /**
  *
  * @param {any} object Object to format
- * @returns {string | import("lit-html").TemplateResult}
+ * @returns {string | import("lit").TemplateResult}
  */
 export default function formatObject(object) {
     if (object === null || object === undefined) {

package/dist/src/utils/inputBinding.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {import("../view/paramMediator.js").default} mediator
+ */
+export default function createBindingInputs(mediator: import("../view/paramMediator.js").default): import("lit-html").TemplateResult<2 | 1>[];
+//# sourceMappingURL=inputBinding.d.ts.map

package/dist/src/utils/inputBinding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CA6GpD"}

package/dist/src/utils/inputBinding.js

@@ -0,0 +1,115 @@
+import { html } from "lit";
+import { debounce } from "./debounce.js";
+import { tickStep } from "d3-array";
+
+/**
+ * @param {import("../view/paramMediator.js").default} mediator
+ */
+export default function createBindingInputs(mediator) {
+    const random = Math.floor(Math.random() * 0xffffff).toString(16);
+
+    /** @type {import("lit").TemplateResult[]} */
+    const inputs = [];
+
+    for (const param of mediator.paramConfigs.values()) {
+        const bind = param.bind;
+        if (!bind || !("input" in bind)) {
+            continue;
+        }
+
+        const name = param.name;
+        const setter = mediator.getSetter(name);
+        const value = mediator.getValue(name);
+        const label = bind.name ?? name;
+
+        // TODO: Implement two-way data binding, e.g. when an external agent changes
+        // the parameter value, the UI components should be updated.
+
+        const debouncedSetter = bind.debounce
+            ? debounce(setter, bind.debounce, false)
+            : setter;
+
+        const id = `${random}-param-${name}`;
+
+        if (bind.input == "range") {
+            // TODO: Show the value next to the slider
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <div>
+                        <input
+                            id=${id}
+                            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);
+                                e.target.nextElementSibling.textContent =
+                                    e.target.valueAsNumber;
+                            }}
+                        /><span>${value}</span>
+                    </div>`
+            );
+        } else if (bind.input == "checkbox") {
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <input
+                        id=${id}
+                        type="checkbox"
+                        ?checked=${value}
+                        @input=${(/** @type {any} */ e) =>
+                            debouncedSetter(e.target.checked)}
+                    />`
+            );
+        } else if (bind.input == "radio") {
+            inputs.push(
+                html`<span class="label">${label}</span>
+                    <div class="radio-group">
+                        ${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
+                            >`
+                        )}
+                    </div>`
+            );
+        } else if (bind.input == "select") {
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <select
+                        id=${id}
+                        @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> `
+            );
+        } else {
+            // TODO: Support other types: "text", "number", "color".
+            throw new Error("Unsupported input type: " + bind.input);
+        }
+
+        if (bind.description) {
+            inputs.push(
+                html`<div class="description">${bind.description}</div>`
+            );
+        }
+    }
+
+    return inputs;
+}

package/dist/src/utils/ui/tooltip.js

@@ -1,5 +1,5 @@
 import clientPoint from "../point.js";
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { peek } from "../arrayUtils.js";
 
 export const SUPPRESS_TOOLTIP_CLASS_NAME = "gs-suppress-tooltip";