@genome-spy/core 0.45.0 → 0.46.0

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

@@ -124,6 +124,11 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     description?: string | string[];
 
+    /**
+     * Optional base URL for constructing request URLs. When set, all views
+     * deeper in the hierarchy inherit this base URL, using it for importing
+     * loading data and importing specifications.
+     */
     baseUrl?: string;
 
     /**
@@ -151,6 +156,12 @@ export interface ViewSpecBase extends ResolveSpec {
      * **Default:** `false` for children of `layer`, `true` for others.
      */
     configurableVisibility?: boolean;
+
+    /**
+     * Templates that can be reused within the view specification by importing
+     * them with the template key.
+     */
+    templates?: Record<string, ViewSpec>;
 }
 
 export interface UnitSpec extends ViewSpecBase, AggregateSamplesSpec {
@@ -165,7 +176,7 @@ export interface AggregateSamplesSpec {
 
 export interface LayerSpec extends ViewSpecBase, AggregateSamplesSpec {
     view?: ViewBackground;
-    layer: (LayerSpec | UnitSpec)[];
+    layer: (LayerSpec | UnitSpec | ImportSpec)[];
 }
 
 export interface FacetSpec extends ViewSpecBase {
@@ -218,39 +229,71 @@ export type ViewSpec =
     | ConcatSpec
     | SampleSpec;
 
-export interface ImportParams {
-    url?: string;
+export interface UrlImport {
+    /**
+     * Imports a specification from the specified URL.
+     */
+    url: string;
+}
+
+export interface TemplateImport {
+    /**
+     * Imports a specification from the current view hierarchy, searching
+     * first in the current view, then ascending through ancestors.
+     */
+    template: string;
+}
 
+export interface ImportSpec {
     /**
-     * Name for the imported view. Overrides the name defined in the imported spec.
+     * The name given to the imported view. This property overrides the name
+     * specified in the imported specification.
      */
     name?: string;
 
     /**
-     * Dynamic variables that parameterize a visualization. Parameters defined here
-     * override the parameters defined in the imported spec.
+     * Dynamic variables that parameterize a visualization. Parameters defined
+     * here override the parameters defined in the imported specification.
      */
     params?: VariableParameter[] | Record<string, any>;
-}
 
-export interface ImportSpec {
-    import: ImportParams;
+    /**
+     * The method to import a specification.
+     */
+    import: UrlImport | TemplateImport;
 }
 
 export interface ConcatBase extends ViewSpecBase {
+    /**
+     * The gap between the views, in pixels.
+     */
     spacing?: number;
 }
 
 export interface VConcatSpec extends ConcatBase {
+    /**
+     * Specifies views that will be concatenated vertically.
+     */
     vconcat: (ViewSpec | ImportSpec)[];
 }
 
 export interface HConcatSpec extends ConcatBase {
+    /**
+     * Specifies views that will be concatenated horizontally.
+     */
     hconcat: (ViewSpec | ImportSpec)[];
 }
 
 export interface ConcatSpec extends ConcatBase {
+    /**
+     * Specifies views that will be concatenated into a grid that wraps when
+     * the specified number of columns are used.
+     */
     concat: (ViewSpec | ImportSpec)[];
+
+    /**
+     * The number of columns in the grid.
+     */
     columns: number;
 }
 

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

@@ -1,3 +1,3 @@
 export default css;
-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";
+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.error {\n  opacity: 0.8;\n  color: firebrick;\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,6iIA4LE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,yoIAgME"}

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

@@ -67,6 +67,10 @@ const css = `
 .genome-spy .loading-indicators div > div.loading {
   opacity: 0.5;
 }
+.genome-spy .loading-indicators div > div.error {
+  opacity: 0.8;
+  color: firebrick;
+}
 .genome-spy .loading-indicators div > div > * {
   display: block;
 }

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

@@ -88,6 +88,11 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
                     opacity: 0.5;
                 }
 
+                &.error {
+                    opacity: 0.8;
+                    color: firebrick;
+                }
+
                 > * {
                     display: block;
                 }

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

@@ -18,6 +18,8 @@ export interface Hover {
     datum: Datum;
 }
 
+export type DataLoadingStatus = "loading" | "complete" | "error";
+
 /**
  * ViewContext provides essential data and interfaces to View classes.
  */
@@ -74,9 +76,14 @@ export default interface ViewContext {
      * The status is shown in the UI somewhere within or near the view.
      *
      * @param view The view where the data source is located.
-     * @param status true if loading, false if not loading.
+     * @param status
+     * @param detail Details about the error, if any.
      */
-    setDataLoadingStatus: (view: View, status: boolean) => void;
+    setDataLoadingStatus: (
+        view: View,
+        status: DataLoadingStatus,
+        detail?: string
+    ) => void;
 
     /**
      * Returns true if the view is configured to be visible.

package/dist/src/utils/expression.js

@@ -49,7 +49,7 @@ function buildFunctions(codegen) {
 
 const cg = codegenExpression({
     forbidden: [],
-    allowed: ["datum"],
+    allowed: ["datum", "undefined"],
     globalvar: "globalObject",
     fieldvar: "datum",
     functions: buildFunctions,

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

@@ -52,10 +52,11 @@ export default class ParamMediator {
      *
      * @param {string} paramName
      * @param {T} initialValue
+     * @param {boolean} [passive] If true, the setter will not notify listeners when the value changes.
      * @returns {(value: T) => void}
      * @template T
      */
-    allocateSetter<T>(paramName: string, initialValue: T): (value: T) => void;
+    allocateSetter<T>(paramName: string, initialValue: T, passive?: boolean): (value: T) => void;
     /**
      * Gets an existing setter for a parameter. Throws if the setter is not found.
      * @param {string} paramName

package/dist/src/view/paramMediator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AAsQA;;;GAGG;AACH,6BAHW,GAAG,+CAKb;AAED;;;;;;;GAOG;AACH,oFASC;AAED;;;;;;;;;;GAUG;AACH,mFANW,aAAa,+CAEW,IAAI,KAwCtC;AA7UD;;;;;GAKG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,IAAI,MAAM,EAAE,IAAI,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,gFAzCqB,GAAG,KAAK,IAAI,CAkEhC;IAED;;;;;;OAMG;IACH,6BALW,MAAM,kCAEU,IAAI,CA8B9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WA9Fc,GAAG,KAAK,IAAI,CAsG1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,0FAIC;IAED;;;;;OAKG;IACH,0CAJW,MAAM,GACJ,aAAa,CASzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBA4EhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;;CACJ;;;;;;4BA7P4F,MAAM,IAAI,KAAK,IAAI;gBAAc,MAAM,IAAI;gBAAc,MAAM,MAAM"}
+{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AAuQA;;;GAGG;AACH,6BAHW,GAAG,+CAKb;AAED;;;;;;;GAOG;AACH,oFASC;AAED;;;;;;;;;;GAUG;AACH,mFANW,aAAa,+CAEW,IAAI,KAwCtC;AA9UD;;;;;GAKG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,IAAI,MAAM,EAAE,IAAI,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,gFAzCqB,GAAG,KAAK,IAAI,CAkEhC;IAED;;;;;;;OAOG;IACH,6BANW,MAAM,6BAEN,OAAO,iBACS,IAAI,CA8B9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WA/Fc,GAAG,KAAK,IAAI,CAuG1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,0FAIC;IAED;;;;;OAKG;IACH,0CAJW,MAAM,GACJ,aAAa,CASzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBA4EhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;;CACJ;;;;;;4BA9P4F,MAAM,IAAI,KAAK,IAAI;gBAAc,MAAM,IAAI;gBAAc,MAAM,MAAM"}

package/dist/src/view/paramMediator.js

@@ -82,10 +82,11 @@ export default class ParamMediator {
      *
      * @param {string} paramName
      * @param {T} initialValue
+     * @param {boolean} [passive] If true, the setter will not notify listeners when the value changes.
      * @returns {(value: T) => void}
      * @template T
      */
-    allocateSetter(paramName, initialValue) {
+    allocateSetter(paramName, initialValue, passive = false) {
         if (this.#allocatedSetters.has(paramName)) {
             throw new Error(
                 "Setter already allocated for parameter: " + paramName
@@ -99,7 +100,7 @@ export default class ParamMediator {
                 this.#paramValues.set(paramName, value);
 
                 const listeners = this.paramListeners.get(paramName);
-                if (listeners) {
+                if (listeners && !passive) {
                     for (const listener of listeners) {
                         listener();
                     }

package/dist/src/view/paramMediator.test.js

@@ -55,6 +55,19 @@ describe("Single-level ParamMediator", () => {
         expect(calls).toBe(2);
     });
 
+    test("Passive parameter does not trigger listeners", () => {
+        const pm = new ParamMediator();
+        const setter = pm.allocateSetter("foo", 42, true);
+        const expr = pm.createExpression("foo");
+
+        let result = expr();
+
+        expr.addListener(() => (result = expr()));
+
+        setter(50);
+        expect(result).toBe(42);
+    });
+
     test("Expression invalidation", () => {
         const pm = new ParamMediator();
         const setter = pm.allocateSetter("foo", 42);

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

@@ -55,7 +55,7 @@ export function isSampleSpec(spec: import("../spec/view.js").ViewSpec): spec is
 export const VIEW_ROOT_NAME: "viewRoot";
 /**
  * @typedef {object} ViewFactoryOptions
- * @property {boolean} [allowImport]
+ * @property {boolean} [allowImport] allows imports from urls
  * @property {boolean} [wrapRoot]
  */
 /**
@@ -102,6 +102,9 @@ export class ViewFactory {
     #private;
 }
 export type ViewFactoryOptions = {
+    /**
+     * allows imports from urls
+     */
     allowImport?: boolean;
     wrapRoot?: boolean;
 };

package/dist/src/view/viewFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewFactory.d.ts","sourceRoot":"","sources":["../../../src/view/viewFactory.js"],"names":[],"mappings":"AAoPA;;;;GAIG;AACH,iHAEC;AAED;;;;GAIG;AACH,mHAEC;AAED;;;;GAIG;AACH,mHAOC;AAED;;;;GAIG;AACH,yIAMC;AAED;;;;GAIG;AACH,mCAHW,MAAM,gDAKhB;AAED;;;;GAIG;AACH,uHAEC;AAED;;;;GAIG;AACH,6FAEC;AAED;;;;GAIG;AACH,qHAEC;AAED;;;;GAIG;AACH,2HAOC;AAtUD,wCAAyC;AAEzC;;;;GAIG;AAEH;;GAEG;AACH;IAiBI;;OAEG;IACH,sBAFW,kBAAkB,EAoC5B;IAjCG,2CAA2C;IAC3C,SADW,SAAS,kBAAkB,CAAC,CAKtC;IA8BL;;;OAGG;IACH,qEAlDiC,OAAO,yHAC2B,OAAO,oBAAoB,EAAE,OAAO,eAAe,OAAO,WAAW,EAAE,OAAO,gBAAgB,MAAM,KAAK,IAAI,QAmD/K;IAED;;;;;;OAMG;IACH,wHAJW,OAAO,oBAAoB,EAAE,OAAO,eACpC,OAAO,WAAW,EAAE,OAAO,gBAC3B,MAAM,QAmBhB;IAED;;;;OAIG;IACH,iGAQC;IAED;;;;;;;;;;OAUG;IACH,uKALW,OAAO,oBAAoB,EAAE,OAAO,eACpC,OAAO,WAAW,EAAE,OAAO,gBAC3B,MAAM,4DACc,IAAI,iBA8DlC;;CACJ;;kBAxLa,OAAO;eACP,OAAO;;iBAfJ,WAAW"}
+{"version":3,"file":"viewFactory.d.ts","sourceRoot":"","sources":["../../../src/view/viewFactory.js"],"names":[],"mappings":"AAgRA;;;;GAIG;AACH,iHAEC;AAED;;;;GAIG;AACH,mHAEC;AAED;;;;GAIG;AACH,mHAOC;AAED;;;;GAIG;AACH,yIAMC;AAED;;;;GAIG;AACH,mCAHW,MAAM,gDAKhB;AAED;;;;GAIG;AACH,uHAEC;AAED;;;;GAIG;AACH,6FAEC;AAED;;;;GAIG;AACH,qHAEC;AAED;;;;GAIG;AACH,2HAOC;AAlWD,wCAAyC;AAEzC;;;;GAIG;AAEH;;GAEG;AACH;IAiBI;;OAEG;IACH,sBAFW,kBAAkB,EAoC5B;IAjCG,2CAA2C;IAC3C,SADW,SAAS,kBAAkB,CAAC,CAKtC;IA8BL;;;OAGG;IACH,qEAlDiC,OAAO,yHAC2B,OAAO,oBAAoB,EAAE,OAAO,eAAe,OAAO,WAAW,EAAE,OAAO,gBAAgB,MAAM,KAAK,IAAI,QAmD/K;IAED;;;;;;OAMG;IACH,wHAJW,OAAO,oBAAoB,EAAE,OAAO,eACpC,OAAO,WAAW,EAAE,OAAO,gBAC3B,MAAM,QAmBhB;IAED;;;;OAIG;IACH,iGAQC;IAED;;;;;;;;;;OAUG;IACH,uKALW,OAAO,oBAAoB,EAAE,OAAO,eACpC,OAAO,WAAW,EAAE,OAAO,gBAC3B,MAAM,4DACc,IAAI,iBAuElC;;CACJ;;;;;kBAjMa,OAAO;eACP,OAAO;;iBAfJ,WAAW"}

package/dist/src/view/viewFactory.js

@@ -13,7 +13,7 @@ export const VIEW_ROOT_NAME = "viewRoot";
 
 /**
  * @typedef {object} ViewFactoryOptions
- * @property {boolean} [allowImport]
+ * @property {boolean} [allowImport] allows imports from urls
  * @property {boolean} [wrapRoot]
  */
 
@@ -148,24 +148,33 @@ export class ViewFactory {
         let viewSpec;
 
         if (isImportSpec(spec)) {
-            if (this.options.allowImport) {
-                viewSpec = await loadExternalViewSpec(
-                    spec,
-                    dataParent.getBaseUrl(),
-                    context
-                );
+            /** @type {ViewSpec} */
+            let importedSpec;
 
-                if (validator) {
-                    validator(viewSpec);
+            if ("url" in spec.import) {
+                if (this.options.allowImport) {
+                    importedSpec = await loadExternalViewSpec(
+                        spec,
+                        dataParent.getBaseUrl(),
+                        context
+                    );
+                } else {
+                    throw new ViewError(
+                        "Importing views is not allowed!",
+                        layoutParent
+                    );
                 }
-
-                applyParamsToImportedSpec(viewSpec, spec.import);
+            } else if ("template" in spec.import) {
+                importedSpec = findTemplate(spec.import.template, dataParent);
             } else {
-                throw new ViewError(
-                    "Importing views is not allowed!",
-                    layoutParent
-                );
+                throw new Error("Invalid import: " + JSON.stringify(spec));
             }
+
+            validator?.(importedSpec);
+
+            applyParamsToImportedSpec(importedSpec, spec);
+
+            viewSpec = importedSpec;
         } else {
             viewSpec = spec;
         }
@@ -200,19 +209,38 @@ export class ViewFactory {
 }
 
 /**
- *
+ * @param {string} name
+ * @param {View} view Start searching from this view, then search within its parent, etc.
+ */
+function findTemplate(name, view) {
+    const template = view.spec?.templates?.[name];
+    if (template) {
+        // Ensure that the template is not altered
+        return structuredClone(template);
+    }
+
+    if (view.dataParent) {
+        return findTemplate(name, view.dataParent);
+    } else {
+        throw new Error(
+            `Cannot find template "${name}" in current view or its ancestors!`
+        );
+    }
+}
+
+/**
  * @param {ViewSpec} importedSpec
- * @param {import("../spec/view.js").ImportParams} importParams
+ * @param {import("../spec/view.js").ImportSpec} importSpec
  */
-function applyParamsToImportedSpec(importedSpec, importParams) {
-    if (importParams.name != null) {
-        importedSpec.name = importParams.name;
+function applyParamsToImportedSpec(importedSpec, importSpec) {
+    if (importSpec.name != null) {
+        importedSpec.name = importSpec.name;
     }
 
-    const params = isArray(importParams.params)
-        ? importParams.params
-        : isObject(importParams.params)
-        ? Object.entries(importParams.params).map(([name, value]) => ({
+    const params = isArray(importSpec.params)
+        ? importSpec.params
+        : isObject(importSpec.params)
+        ? Object.entries(importSpec.params).map(([name, value]) => ({
               name,
               value,
           }))

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

@@ -10,12 +10,6 @@ export function isFacetFieldDef(def: import("../spec/channel.js").ChannelDef | i
  * @returns {spec is FacetMapping}
  */
 export function isFacetMapping(def: import("../spec/channel.js").FacetFieldDef | import("../spec/view.js").FacetMapping): spec is FacetMapping;
-/**
- *
- * @param {object} config
- * @returns {config is ImportConfig}
- */
-export function isImportConfig(config: object): config is ImportConfig;
 /**
  * Returns all marks in the order (DFS) they are rendered
  * @param {View} root
@@ -60,8 +54,9 @@ export function findEncodedFields(view: View): {
  * @param {import("../spec/view.js").ImportSpec} spec
  * @param {string} baseUrl
  * @param {import("../types/viewContext.js").default} viewContext
+ * @returns {Promise<import("../spec/view.js").ViewSpec>}
  */
-export function loadExternalViewSpec(spec: import("../spec/view.js").ImportSpec, baseUrl: string, viewContext: import("../types/viewContext.js").default): Promise<any>;
+export function loadExternalViewSpec(spec: import("../spec/view.js").ImportSpec, baseUrl: string, viewContext: import("../types/viewContext.js").default): Promise<import("../spec/view.js").ViewSpec>;
 /**
  * @param {function(View, View[]):void} visitor
  */

package/dist/src/view/viewUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewUtils.d.ts","sourceRoot":"","sources":["../../../src/view/viewUtils.js"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,qCAHW,OAAO,oBAAoB,EAAE,UAAU,GAAG,OAAO,iBAAiB,EAAE,YAAY,yBAK1F;AAED;;;;GAIG;AACH,oCAHW,OAAO,oBAAoB,EAAE,aAAa,GAAG,OAAO,iBAAiB,EAAE,YAAY,wBAQ7F;AAED;;;;GAIG;AACH,uCAHW,MAAM,0BAKhB;AAED;;;GAGG;AACH,+BAFW,IAAI,wCAMd;AAED;;;;GAIG;AACH,wCAFW,IAAI,UASd;AAED;;GAEG;AACH,kDAFW,IAAI,QAiBd;AAED;;;;;;;GAOG;AACH,4CAFW,IAAI,QAUd;AAED;;;;GAIG;AACH,qCAJW,IAAI,iBACJ,OAAO,qBAAqB,EAAE,OAAO,CAAC,IAAI,CAAC,wDAcrD;AAED;;;GAGG;AACH,wCAFW,IAAI;UAGO,QAAQ;aAAW,OAAO,oBAAoB,EAAE,OAAO;WAAS,OAAO,oBAAoB,EAAE,KAAK;UAAQ,OAAO,oBAAoB,EAAE,IAAI;IAqBhK;AAED;;;;GAIG;AACH,2CAJW,OAAO,iBAAiB,EAAE,UAAU,WACpC,MAAM,eACN,OAAO,yBAAyB,EAAE,OAAO,gBA8BnD;AAED;;GAEG;AACH,gDAFoB,IAAI,QAAE,IAAI,EAAE,KAAE,IAAI,+BAkBrC;AAED;;;;;;GAMG;AACH,4CAJW,IAAI,QACJ,MAAM,GACJ,IAAI,EAAE,CAalB;AAED;;;GAGG;AACH,0CAFW,IAAI,eAqBd;AAOD;;GAEG;AACH,gDAFW,IAAI,mDAId;AAED;;GAEG;AACH,kDAFW,OAAO,wBAAwB,EAAE,cAAc;;;EAczD;AAxBM,uCAFI,MAAM,WAE0D;iBAxP9B,WAAW;qBAFnC,eAAe"}
+{"version":3,"file":"viewUtils.d.ts","sourceRoot":"","sources":["../../../src/view/viewUtils.js"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,qCAHW,OAAO,oBAAoB,EAAE,UAAU,GAAG,OAAO,iBAAiB,EAAE,YAAY,yBAK1F;AAED;;;;GAIG;AACH,oCAHW,OAAO,oBAAoB,EAAE,aAAa,GAAG,OAAO,iBAAiB,EAAE,YAAY,wBAQ7F;AAED;;;GAGG;AACH,+BAFW,IAAI,wCAMd;AAED;;;;GAIG;AACH,wCAFW,IAAI,UASd;AAED;;GAEG;AACH,kDAFW,IAAI,QAiBd;AAED;;;;;;;GAOG;AACH,4CAFW,IAAI,QAUd;AAED;;;;GAIG;AACH,qCAJW,IAAI,iBACJ,OAAO,qBAAqB,EAAE,OAAO,CAAC,IAAI,CAAC,wDAcrD;AAED;;;GAGG;AACH,wCAFW,IAAI;UAGO,QAAQ;aAAW,OAAO,oBAAoB,EAAE,OAAO;WAAS,OAAO,oBAAoB,EAAE,KAAK;UAAQ,OAAO,oBAAoB,EAAE,IAAI;IAqBhK;AAED;;;;;GAKG;AACH,2CALW,OAAO,iBAAiB,EAAE,UAAU,WACpC,MAAM,eACN,OAAO,yBAAyB,EAAE,OAAO,GACvC,QAAQ,OAAO,iBAAiB,EAAE,QAAQ,CAAC,CA6BvD;AAED;;GAEG;AACH,gDAFoB,IAAI,QAAE,IAAI,EAAE,KAAE,IAAI,+BAkBrC;AAED;;;;;;GAMG;AACH,4CAJW,IAAI,QACJ,MAAM,GACJ,IAAI,EAAE,CAalB;AAED;;;GAGG;AACH,0CAFW,IAAI,eAqBd;AAOD;;GAEG;AACH,gDAFW,IAAI,mDAId;AAED;;GAEG;AACH,kDAFW,OAAO,wBAAwB,EAAE,cAAc;;;EAczD;AAxBM,uCAFI,MAAM,WAE0D;iBA/O9B,WAAW;qBAFnC,eAAe"}

package/dist/src/view/viewUtils.js

@@ -30,15 +30,6 @@ export function isFacetMapping(def) {
     );
 }
 
-/**
- *
- * @param {object} config
- * @returns {config is ImportConfig}
- */
-export function isImportConfig(config) {
-    return "name" in config || "url" in config;
-}
-
 /**
  * Returns all marks in the order (DFS) they are rendered
  * @param {View} root
@@ -151,34 +142,34 @@ export function findEncodedFields(view) {
  * @param {import("../spec/view.js").ImportSpec} spec
  * @param {string} baseUrl
  * @param {import("../types/viewContext.js").default} viewContext
+ * @returns {Promise<import("../spec/view.js").ViewSpec>}
  */
 export async function loadExternalViewSpec(spec, baseUrl, viewContext) {
-    if (!spec.import.url) {
-        throw new Error(
-            "Cannot import, not an import spec: " + JSON.stringify(spec)
-        );
-    }
+    const importParam = spec.import;
+    if ("url" in importParam) {
+        const loader = vegaLoader({ baseURL: baseUrl });
+        const url = importParam.url;
 
-    const loader = vegaLoader({ baseURL: baseUrl });
-    const url = spec.import.url;
+        const importedSpec = JSON.parse(
+            await loader.load(url).catch((/** @type {Error} */ e) => {
+                throw new Error(
+                    `Could not load imported view spec: ${url} \nReason: ${e.message}`
+                );
+            })
+        );
 
-    const importedSpec = JSON.parse(
-        await loader.load(url).catch((/** @type {Error} */ e) => {
+        if (viewContext.isViewSpec(importedSpec)) {
+            importedSpec.baseUrl = url.match(/^[^?#]*\//)?.[0];
+            return importedSpec;
+        } else {
             throw new Error(
-                `Could not load imported view spec: ${url} \nReason: ${e.message}`
+                `The imported spec "${url}" is not a view spec: ${JSON.stringify(
+                    spec
+                )}`
             );
-        })
-    );
-
-    if (viewContext.isViewSpec(importedSpec)) {
-        importedSpec.baseUrl = url.match(/^[^?#]*\//)?.[0];
-        return importedSpec;
+        }
     } else {
-        throw new Error(
-            `The imported spec "${url}" is not a view spec: ${JSON.stringify(
-                spec
-            )}`
-        );
+        throw new Error("Not an url import: " + JSON.stringify(importParam));
     }
 }
 

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -64,5 +64,5 @@
     "vega-scale": "^7.3.1",
     "vega-util": "^1.17.2"
   },
-  "gitHead": "7b6de39e856c85c755b2134bf451780c8b7922bb"
+  "gitHead": "cb5df0a9b0ea35b7325e148d34d0184a6384da85"
 }