@vitessce/config 3.0.0 → 3.1.0

package/dist-tsc/VitessceConfig.d.ts

@@ -12,6 +12,7 @@ export function hconcat(...views: (VitessceConfigView | VitessceConfigViewHConca
  * @returns {VitessceConfigViewVConcat} A new vertical view concatenation instance.
  */
 export function vconcat(...views: (VitessceConfigView | VitessceConfigViewHConcat | VitessceConfigViewVConcat)[]): VitessceConfigViewVConcat;
+export function CL(value: any): CoordinationLevel;
 /**
  * Class representing a file within a Vitessce config dataset.
  */
@@ -94,6 +95,7 @@ export class VitessceConfigView {
     view: {
         component: string;
         coordinationScopes: object;
+        coordinationScopesBy: undefined;
         x: number;
         y: number;
         w: number;
@@ -106,6 +108,13 @@ export class VitessceConfigView {
      * @returns {VitessceConfigView} This, to allow chaining.
      */
     useCoordination(...args: VitessceConfigCoordinationScope[]): VitessceConfigView;
+    useComplexCoordination(scopes: any): VitessceConfigView;
+    /**
+     * Attach meta coordination scopes to this view.
+     * @param {VitessceConfigMetaCoordinationScope} metaScope A meta coordination scope instance.
+     * @returns {VitessceConfigView} This, to allow chaining.
+     */
+    useMetaCoordination(metaScope: VitessceConfigMetaCoordinationScope): VitessceConfigView;
     /**
       * Set the x, y, w, h values for this view.
       * @param {number} x The x-coordinate of the view in the layout.
@@ -159,6 +168,36 @@ export class VitessceConfigCoordinationScope {
      */
     setValue(cValue: any): VitessceConfigCoordinationScope;
 }
+/**
+ * Class representing a pair of coordination scopes,
+ * for metaCoordinationScopes and metaCoordinationScopesBy,
+ * respectively, in the coordination space.
+ */
+export class VitessceConfigMetaCoordinationScope {
+    /**
+     * Construct a new coordination scope instance.
+     * @param {string} metaScope The name of the coordination scope for metaCoordinationScopes.
+     * @param {string} metaByScope The name of the coordination scope for metaCoordinationScopesBy.
+     */
+    constructor(metaScope: string, metaByScope: string);
+    metaScope: VitessceConfigCoordinationScope;
+    metaByScope: VitessceConfigCoordinationScope;
+    /**
+     * Attach coordination scopes to this meta scope.
+     * @param  {...VitessceConfigCoordinationScope} args A variable number of
+     * coordination scope instances.
+     * @returns {VitessceConfigMetaCoordinationScope} This, to allow chaining.
+     */
+    useCoordination(...args: VitessceConfigCoordinationScope[]): VitessceConfigMetaCoordinationScope;
+    useComplexCoordination(scopes: any): VitessceConfigMetaCoordinationScope;
+    /**
+     * Set the coordination value of the coordination scope.
+     * @param {any} cValue The value to set.
+     * @returns {VitessceConfigCoordinationScope} This, to allow chaining.
+     */
+    setValue(cValue: any): VitessceConfigCoordinationScope;
+    cValue: any;
+}
 /**
  * Class representing a Vitessce view config.
  */
@@ -232,6 +271,8 @@ export class VitessceConfig {
      * @returns {VitessceConfigCoordinationScope[]} An array of coordination scope instances.
      */
     addCoordination(...args: string[]): VitessceConfigCoordinationScope[];
+    addMetaCoordination(): VitessceConfigMetaCoordinationScope;
+    addComplexCoordination(input: any): {};
     /**
      * A convenience function for setting up new coordination scopes across a set of views.
      * @param {VitessceConfigView[]} views An array of view objects to link together.
@@ -254,4 +295,9 @@ export class VitessceConfig {
      */
     toJSON(): object;
 }
+declare class CoordinationLevel {
+    constructor(value: any);
+    value: any;
+}
+export {};
 //# sourceMappingURL=VitessceConfig.d.ts.map

package/dist-tsc/VitessceConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitessceConfig.d.ts","sourceRoot":"","sources":["../src/VitessceConfig.js"],"names":[],"mappings":"AAqMA;;;;;GAKG;AACH,kCAJe,CAAC,kBAAkB,GAAC,yBAAyB,GAAC,yBAAyB,CAAC,KAE1E,yBAAyB,CAKrC;AAED;;;;;GAKG;AACH,kCAJe,CAAC,kBAAkB,GAAC,yBAAyB,GAAC,yBAAyB,CAAC,KAE1E,yBAAyB,CAKrC;AAtND;;GAEG;AACH;IACE;;;;;;;;OAQG;IACH,iBAPW,MAAM,YAEN,MAAM,oCACN,MAAM,WAAO,IAAI,EAW3B;IANC;;;;;MAKC;IAGH;;OAEG;IACH,UAFa,MAAM,CAIlB;CACF;AAED;;GAEG;AACH;IACE;;;;;OAKG;IACH,iBAJW,MAAM,QACN,MAAM,eACN,MAAM,EAShB;IANC;;;;;MAKC;IAGH;;;;;;;;;;OAUG;IACH;QARoC,GAAG,EAA5B,MAAM,GAAC,SAAS;QACD,QAAQ,EAAvB,MAAM;QACmB,kBAAkB,EAA3C,MAAM,GAAC,SAAS;QACe,OAAO,EAAtC,MAAM,WAAO,SAAS;wBAGpB,qBAAqB,CA6BjC;IAED;;OAEG;IACH,UAFa,MAAM,CAOlB;CACF;AAED;;GAEG;AACH;IACE;;;;;;;;;OASG;IACH,uBARW,MAAM,sBACN,MAAM,KAEN,MAAM,KACN,MAAM,KACN,MAAM,KACN,MAAM,EAWhB;IARC;;;;;;;MAOC;IAGH;;;;;OAKG;IACH,yBAJe,+BAA+B,KAEjC,kBAAkB,CAQ9B;IAED;;;;;;;QAOI;IACJ,WANY,MAAM,KACN,MAAM,KACN,MAAM,KACN,MAAM,GACJ,kBAAkB,CAS/B;IAED;;;OAGG;IACH,sBAFa,kBAAkB,CAQ9B;IAED;;OAEG;IACH,UAFa,MAAM,CAIlB;CACF;AAED;;GAEG;AACH;IACE,wBAEC;IADC,WAAkB;CAErB;AAED;;GAEG;AACH;IACE,wBAEC;IADC,WAAkB;CAErB;AAwBD;;GAEG;AACH;IACE;;;;OAIG;IACH,mBAHW,MAAM,UACN,MAAM,EAMhB;IAHC,cAAkB;IAClB,eAAoB;IACpB,YAAkB;IAGpB;;;;OAIG;IACH,iBAHW,GAAG,GACD,+BAA+B,CAK3C;CACF;AAED;;GAEG;AACH;IAuNE;;;;;;OAMG;IACH,wBAJW,MAAM,GACJ,cAAc,CAiC1B;IA3PD;;;;;;OAMG;IACH;QAJ0B,aAAa,EAA5B,MAAM;QACS,IAAI,EAAnB,MAAM;QACmB,WAAW,EAApC,MAAM,GAAC,SAAS;uBAmC1B;IATC;;;;;;;;MAQC;IAGH;;;;;;;;OAQG;IACH,kBAPW,MAAM,gBACN,MAAM;QAEU,GAAG,EAAnB,MAAM;QAEJ,qBAAqB,CAWjC;IAED;;;;;;;;;;;;;OAaG;IACH,iBAZW,qBAAqB,aAErB,MAAM;QAEU,CAAC,EAAjB,MAAM;QACU,CAAC,EAAjB,MAAM;QACU,CAAC,EAAjB,MAAM;QACU,CAAC,EAAjB,MAAM;QACU,OAAO,EAAvB,MAAM;QAEJ,kBAAkB,CAmC9B;IAED;;;;;OAKG;IACH,yBAHc,MAAM,KACP,+BAA+B,EAAE,CAmB7C;IAED;;;;;;;OAOG;IACH,iBANW,kBAAkB,EAAE,UACpB,MAAM,EAAE,YACR,GAAG,EAAE,GAEH,cAAc,CAe1B;IAED;;;;;OAKG;IACH,mBAJW,kBAAkB,GAAC,yBAAyB,GAAC,yBAAyB,GAEpE,cAAc,CA0B1B;IAED;;;OAGG;IACH,UAFa,MAAM,CAmBlB;CAwCF"}
+{"version":3,"file":"VitessceConfig.d.ts","sourceRoot":"","sources":["../src/VitessceConfig.js"],"names":[],"mappings":"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"}

package/dist-tsc/VitessceConfig.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { CoordinationType } from '@vitessce/constants-internal';
 import { fromEntries, getNextScope } from '@vitessce/utils';
 /**
@@ -96,6 +97,131 @@ export class VitessceConfigDataset {
         };
     }
 }
+function useComplexCoordinationHelper(scopes, coordinationScopes, coordinationScopesBy) {
+    // Set this.coordinationScopes and this.coordinationScopesBy by recursion on `scopes`.
+    /*
+      // Destructured, `scopes` might look like:
+      const {
+        [CoordinationType.SPATIAL_IMAGE_LAYER]: [
+          {
+            scope: imageLayerScope,
+            children: {
+              [CoordinationType.IMAGE]: { scope: imageScope },
+              [CoordinationType.SPATIAL_LAYER_VISIBLE]: { scope: imageVisibleScope },
+              [CoordinationType.SPATIAL_LAYER_OPACITY]: { scope: imageOpacityScope },
+              [CoordinationType.SPATIAL_IMAGE_CHANNEL]: [
+                {
+                  scope: imageChannelScopeR,
+                  children: {
+                    [CoordinationType.SPATIAL_TARGET_C]: { scope: rTargetScope },
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: { scope: rColorScope },
+                  },
+                },
+                {
+                  scope: imageChannelScopeG,
+                  children: {
+                    [CoordinationType.SPATIAL_TARGET_C]: { scope: gTargetScope },
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: { scope: gColorScope },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+        // ...
+      } = scopes;
+  
+      // This would set the values to:
+      this.coordinationScopes = {
+        // Add the top-level coordination types to `coordinationScopes`.
+        [CoordinationType.SPATIAL_IMAGE_LAYER]: [imageLayerScope.cScope],
+      };
+      this.coordinationScopesBy = {
+        [CoordinationType.SPATIAL_IMAGE_LAYER]: {
+          [CoordinationType.IMAGE]: {
+            [imageLayerScope.cScope]: imageScope.cScope,
+          },
+          [CoordinationType.SPATIAL_LAYER_VISIBLE]: {
+            [imageLayerScope.cScope]: imageVisibleScope.cScope,
+          },
+          [CoordinationType.SPATIAL_LAYER_OPACITY]: {
+            [imageLayerScope.cScope]: imageOpacityScope.cScope,
+          },
+          [CoordinationType.SPATIAL_IMAGE_CHANNEL]: {
+            [imageLayerScope.cScope]: [imageChannelScopeR.cScope, imageChannelScopeG.cScope],
+          },
+        },
+        [CoordinationType.SPATIAL_IMAGE_CHANNEL]: {
+          [CoordinationType.SPATIAL_TARGET_C]: {
+            [imageChannelScopeR.cScope]: rTargetScope.cScope,
+            [imageChannelScopeG.cScope]: gTargetScope.cScope,
+          },
+          [CoordinationType.SPATIAL_CHANNEL_COLOR]: {
+            [imageChannelScopeR.cScope]: rColorScope.cScope,
+            [imageChannelScopeG.cScope]: gColorScope.cScope,
+          },
+        },
+      };
+     */
+    // Recursive inner function.
+    function processLevel(parentType, parentScope, levelType, levelVal) {
+        if (Array.isArray(levelVal)) {
+            // eslint-disable-next-line no-param-reassign
+            coordinationScopesBy[parentType] = {
+                ...(coordinationScopesBy[parentType] || {}),
+                [levelType]: {
+                    ...(coordinationScopesBy[parentType]?.[levelType] || {}),
+                    [parentScope.cScope]: levelVal.map(childVal => childVal.scope.cScope),
+                },
+            };
+            levelVal.forEach((childVal) => {
+                if (childVal.children) {
+                    // Continue recursion.
+                    Object.entries(childVal.children)
+                        .forEach(([nextLevelType, nextLevelVal]) => processLevel(levelType, childVal.scope, nextLevelType, nextLevelVal));
+                } // Else is the base case: no children
+            });
+        }
+        else {
+            // eslint-disable-next-line no-param-reassign
+            coordinationScopesBy[parentType] = {
+                ...(coordinationScopesBy[parentType] || {}),
+                [levelType]: {
+                    ...(coordinationScopesBy[parentType]?.[levelType] || {}),
+                    [parentScope.cScope]: levelVal.scope.cScope,
+                },
+            };
+            if (levelVal.children) {
+                // Continue recursion.
+                Object.entries(levelVal.children)
+                    .forEach(([nextLevelType, nextLevelVal]) => processLevel(levelType, levelVal.scope, nextLevelType, nextLevelVal));
+            } // Else is the base case: no children
+        }
+    }
+    Object.entries(scopes).forEach(([topLevelType, topLevelVal]) => {
+        if (Array.isArray(topLevelVal)) {
+            // eslint-disable-next-line no-param-reassign
+            coordinationScopes[topLevelType] = topLevelVal.map(levelVal => levelVal.scope.cScope);
+            topLevelVal.forEach((levelVal) => {
+                if (levelVal.children) {
+                    // Begin recursion.
+                    Object.entries(levelVal.children)
+                        .forEach(([nextLevelType, nextLevelVal]) => processLevel(topLevelType, levelVal.scope, nextLevelType, nextLevelVal));
+                }
+            });
+        }
+        else {
+            // eslint-disable-next-line no-param-reassign
+            coordinationScopes[topLevelType] = topLevelVal.scope.cScope;
+            if (topLevelVal.children) {
+                // Begin recursion.
+                Object.entries(topLevelVal.children)
+                    .forEach(([nextLevelType, nextLevelVal]) => processLevel(topLevelType, topLevelVal.scope, nextLevelType, nextLevelVal));
+            }
+        }
+    });
+    return [coordinationScopes, coordinationScopesBy];
+}
 /**
  * Class representing a view within a Vitessce layout.
  */
@@ -114,6 +240,7 @@ export class VitessceConfigView {
         this.view = {
             component,
             coordinationScopes,
+            coordinationScopesBy: undefined,
             x,
             y,
             w,
@@ -133,6 +260,37 @@ export class VitessceConfigView {
         });
         return this;
     }
+    useComplexCoordination(scopes) {
+        if (!this.view.coordinationScopes) {
+            this.view.coordinationScopes = {};
+        }
+        if (!this.view.coordinationScopesBy) {
+            this.view.coordinationScopesBy = {};
+        }
+        const [nextCoordinationScopes, nextCoordinationScopesBy] = useComplexCoordinationHelper(scopes, this.view.coordinationScopes, this.view.coordinationScopesBy);
+        this.view.coordinationScopes = nextCoordinationScopes;
+        this.view.coordinationScopesBy = nextCoordinationScopesBy;
+        return this;
+    }
+    /**
+     * Attach meta coordination scopes to this view.
+     * @param {VitessceConfigMetaCoordinationScope} metaScope A meta coordination scope instance.
+     * @returns {VitessceConfigView} This, to allow chaining.
+     */
+    useMetaCoordination(metaScope) {
+        if (!this.view.coordinationScopes) {
+            this.view.coordinationScopes = {};
+        }
+        this.view.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES] = [
+            ...(this.view.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES] || []),
+            metaScope.metaScope.cScope,
+        ];
+        this.view.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES_BY] = [
+            ...(this.view.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES_BY] || []),
+            metaScope.metaByScope.cScope,
+        ];
+        return this;
+    }
     /**
       * Set the x, y, w, h values for this view.
       * @param {number} x The x-coordinate of the view in the layout.
@@ -202,6 +360,15 @@ export function vconcat(...views) {
     const vcvvc = new VitessceConfigViewVConcat(views);
     return vcvvc;
 }
+// would import as CL for convenience
+class CoordinationLevel {
+    constructor(value) {
+        this.value = value;
+    }
+}
+export function CL(value) {
+    return new CoordinationLevel(value);
+}
 /**
  * Class representing a coordination scope in the coordination space.
  */
@@ -226,6 +393,58 @@ export class VitessceConfigCoordinationScope {
         return this;
     }
 }
+/**
+ * Class representing a pair of coordination scopes,
+ * for metaCoordinationScopes and metaCoordinationScopesBy,
+ * respectively, in the coordination space.
+ */
+export class VitessceConfigMetaCoordinationScope {
+    /**
+     * Construct a new coordination scope instance.
+     * @param {string} metaScope The name of the coordination scope for metaCoordinationScopes.
+     * @param {string} metaByScope The name of the coordination scope for metaCoordinationScopesBy.
+     */
+    constructor(metaScope, metaByScope) {
+        this.metaScope = new VitessceConfigCoordinationScope(CoordinationType.META_COORDINATION_SCOPES, metaScope);
+        this.metaByScope = new VitessceConfigCoordinationScope(CoordinationType.META_COORDINATION_SCOPES_BY, metaByScope);
+    }
+    /**
+     * Attach coordination scopes to this meta scope.
+     * @param  {...VitessceConfigCoordinationScope} args A variable number of
+     * coordination scope instances.
+     * @returns {VitessceConfigMetaCoordinationScope} This, to allow chaining.
+     */
+    useCoordination(...args) {
+        const cScopes = args;
+        const metaScopesVal = this.metaScope.cValue;
+        cScopes.forEach((cScope) => {
+            metaScopesVal[cScope.cType] = cScope.cScope;
+        });
+        this.metaScope.setValue(metaScopesVal);
+        return this;
+    }
+    useComplexCoordination(scopes) {
+        if (!this.metaScope.cValue) {
+            this.metaScope.setValue({});
+        }
+        if (!this.metaByScope.cValue) {
+            this.metaByScope.setValue({});
+        }
+        const [metaScopesVal, metaByScopesVal] = useComplexCoordinationHelper(scopes, this.metaScope.cValue, this.metaByScope.cValue);
+        this.metaScope.setValue(metaScopesVal);
+        this.metaByScope.setValue(metaByScopesVal);
+        return this;
+    }
+    /**
+     * Set the coordination value of the coordination scope.
+     * @param {any} cValue The value to set.
+     * @returns {VitessceConfigCoordinationScope} This, to allow chaining.
+     */
+    setValue(cValue) {
+        this.cValue = cValue;
+        return this;
+    }
+}
 /**
  * Class representing a Vitessce view config.
  */
@@ -356,6 +575,140 @@ export class VitessceConfig {
         });
         return result;
     }
+    addMetaCoordination() {
+        const prevMetaScopes = (this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES]
+            ? Object.keys(this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES])
+            : []);
+        const prevMetaByScopes = (this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES_BY]
+            ? Object.keys(this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES_BY])
+            : []);
+        const metaContainer = new VitessceConfigMetaCoordinationScope(getNextScope(prevMetaScopes), getNextScope(prevMetaByScopes));
+        if (!this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES]) {
+            this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES] = {};
+        }
+        if (!this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES_BY]) {
+            this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES_BY] = {};
+        }
+        // eslint-disable-next-line max-len
+        this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES][metaContainer.metaScope.cScope] = metaContainer.metaScope;
+        // eslint-disable-next-line max-len
+        this.config.coordinationSpace[CoordinationType.META_COORDINATION_SCOPES_BY][metaContainer.metaByScope.cScope] = metaContainer.metaByScope;
+        return metaContainer;
+    }
+    addComplexCoordination(input) {
+        /*
+          // The value for `input` might look like:
+          {
+            [CoordinationType.SPATIAL_IMAGE_LAYER]: CL([
+              {
+                [CoordinationType.IMAGE]: 'S-1905-017737_bf',
+                [CoordinationType.SPATIAL_LAYER_VISIBLE]: true,
+                [CoordinationType.SPATIAL_LAYER_OPACITY]: 1,
+                [CoordinationType.SPATIAL_IMAGE_CHANNEL]: CL([
+                  {
+                    [CoordinationType.SPATIAL_TARGET_C]: 0,
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: [255, 0, 0],
+                  },
+                  {
+                    [CoordinationType.SPATIAL_TARGET_C]: 1,
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: [0, 255, 0],
+                  },
+                ]),
+              },
+            ]),
+            [CoordinationType.SPATIAL_SEGMENTATION_LAYER]: CL([
+              {
+                [CoordinationType.IMAGE]: 'S-1905-017737',
+                [CoordinationType.SPATIAL_LAYER_VISIBLE]: true,
+                [CoordinationType.SPATIAL_LAYER_OPACITY]: 1,
+                [CoordinationType.SPATIAL_SEGMENTATION_CHANNEL]: CL([
+                  {
+                    [CoordinationType.OBS_TYPE]: 'Cortical Interstitia',
+                    [CoordinationType.SPATIAL_TARGET_C]: 0,
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: [255, 0, 0],
+                  },
+                  {
+                    [CoordinationType.OBS_TYPE]: 'Non-Globally Sclerotic Glomeruli',
+                    [CoordinationType.SPATIAL_TARGET_C]: 1,
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: [255, 0, 0],
+                  },
+                  {
+                    [CoordinationType.OBS_TYPE]: 'Globally Sclerotic Glomeruli',
+                    [CoordinationType.SPATIAL_TARGET_C]: 2,
+                    [CoordinationType.SPATIAL_CHANNEL_COLOR]: [255, 0, 0],
+                  },
+                ]),
+              },
+            ]),
+          }
+          // Which would correspond to this `output`,
+          // a valid input for `VitessceConfigMetaCoordinationScope.useComplexCoordination()`:
+          {
+            [CoordinationType.SPATIAL_IMAGE_LAYER]: [
+              {
+                scope: imageLayerScope,
+                children: {
+                  [CoordinationType.IMAGE]: { scope: imageScope },
+                  [CoordinationType.SPATIAL_LAYER_VISIBLE]: { scope: imageVisibleScope },
+                  [CoordinationType.SPATIAL_LAYER_OPACITY]: { scope: imageOpacityScope },
+                  [CoordinationType.SPATIAL_IMAGE_CHANNEL]: [
+                    {
+                      scope: imageChannelScopeR,
+                      children: {
+                        [CoordinationType.SPATIAL_TARGET_C]: { scope: rTargetScope },
+                        [CoordinationType.SPATIAL_CHANNEL_COLOR]: { scope: rColorScope },
+                      },
+                    },
+                    {
+                      scope: imageChannelScopeG,
+                      children: {
+                        [CoordinationType.SPATIAL_TARGET_C]: { scope: gTargetScope },
+                        [CoordinationType.SPATIAL_CHANNEL_COLOR]: { scope: gColorScope },
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            // ...
+          }
+        */
+        const processLevel = (level) => {
+            const result = {};
+            Object.entries(level).forEach(([cType, nextLevelOrInitialValue]) => {
+                // Check if value of object is instanceof CoordinationLevel
+                // (otherwise assume it is the coordination value).
+                if (nextLevelOrInitialValue instanceof CoordinationLevel) {
+                    const nextLevel = nextLevelOrInitialValue.value;
+                    if (Array.isArray(nextLevel)) {
+                        result[cType] = nextLevel.map((nextEl) => {
+                            const [dummyScope] = this.addCoordination(cType);
+                            // TODO: set a better initial value for dummy cases.
+                            dummyScope.setValue('__dummy__');
+                            return {
+                                scope: dummyScope,
+                                children: processLevel(nextEl),
+                            };
+                        });
+                    }
+                    else {
+                        throw new Error('Expected CoordinationLevel.value to be an array.');
+                    }
+                }
+                else {
+                    // Base case.
+                    const initialValue = nextLevelOrInitialValue;
+                    const [scope] = this.addCoordination(cType);
+                    scope.setValue(initialValue);
+                    result[cType] = { scope };
+                }
+            });
+            return result;
+        };
+        // Begin recursion.
+        const output = processLevel(input);
+        return output;
+    }
     /**
      * A convenience function for setting up new coordination scopes across a set of views.
      * @param {VitessceConfigView[]} views An array of view objects to link together.