@vitessce/vit-s 3.4.6 → 3.4.7

package/dist/index.js

@@ -21274,7 +21274,7 @@ class ParseStatus {
         status.dirty();
       if (value.status === "dirty")
         status.dirty();
-      if (typeof value.value !== "undefined" || pair.alwaysSet) {
+      if (key.value !== "__proto__" && (typeof value.value !== "undefined" || pair.alwaysSet)) {
         finalObject[key.value] = value.value;
       }
     }
@@ -21377,6 +21377,7 @@ class ZodType {
     this.catch = this.catch.bind(this);
     this.describe = this.describe.bind(this);
     this.pipe = this.pipe.bind(this);
+    this.readonly = this.readonly.bind(this);
     this.isNullable = this.isNullable.bind(this);
     this.isOptional = this.isOptional.bind(this);
   }
@@ -21584,6 +21585,9 @@ class ZodType {
   pipe(target) {
     return ZodPipeline.create(this, target);
   }
+  readonly() {
+    return ZodReadonly.create(this);
+  }
   isOptional() {
     return this.safeParse(void 0).success;
   }
@@ -21593,10 +21597,11 @@ class ZodType {
 }
 const cuidRegex = /^c[^\s-]{8,}$/i;
 const cuid2Regex = /^[a-z][a-z0-9]*$/;
-const ulidRegex = /[0-9A-HJKMNP-TV-Z]{26}/;
-const uuidRegex = /^([a-f0-9]{8}-[a-f0-9]{4}-[1-5][a-f0-9]{3}-[a-f0-9]{4}-[a-f0-9]{12}|00000000-0000-0000-0000-000000000000)$/i;
-const emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\])|(\[IPv6:(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))\])|([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])*(\.[A-Za-z]{2,})+))$/;
-const emojiRegex = /^(\p{Extended_Pictographic}|\p{Emoji_Component})+$/u;
+const ulidRegex = /^[0-9A-HJKMNP-TV-Z]{26}$/;
+const uuidRegex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/i;
+const emailRegex = /^(?!\.)(?!.*\.\.)([A-Z0-9_+-\.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9\-]*\.)+[A-Z]{2,}$/i;
+const _emojiRegex = `^(\\p{Extended_Pictographic}|\\p{Emoji_Component})+$`;
+let emojiRegex;
 const ipv4Regex = /^(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))$/;
 const ipv6Regex = /^(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))$/;
 const datetimeRegex = (args) => {
@@ -21630,27 +21635,6 @@ function isValidIP(ip, version2) {
   return false;
 }
 class ZodString extends ZodType {
-  constructor() {
-    super(...arguments);
-    this._regex = (regex, validation, message) => this.refinement((data) => regex.test(data), {
-      validation,
-      code: ZodIssueCode.invalid_string,
-      ...errorUtil.errToObj(message)
-    });
-    this.nonempty = (message) => this.min(1, errorUtil.errToObj(message));
-    this.trim = () => new ZodString({
-      ...this._def,
-      checks: [...this._def.checks, { kind: "trim" }]
-    });
-    this.toLowerCase = () => new ZodString({
-      ...this._def,
-      checks: [...this._def.checks, { kind: "toLowerCase" }]
-    });
-    this.toUpperCase = () => new ZodString({
-      ...this._def,
-      checks: [...this._def.checks, { kind: "toUpperCase" }]
-    });
-  }
   _parse(input) {
     if (this._def.coerce) {
       input.data = String(input.data);
@@ -21735,6 +21719,9 @@ class ZodString extends ZodType {
           status.dirty();
         }
       } else if (check.kind === "emoji") {
+        if (!emojiRegex) {
+          emojiRegex = new RegExp(_emojiRegex, "u");
+        }
         if (!emojiRegex.test(input.data)) {
           ctx = this._getOrReturnCtx(input, ctx);
           addIssueToContext(ctx, {
@@ -21871,6 +21858,13 @@ class ZodString extends ZodType {
     }
     return { status: status.value, value: input.data };
   }
+  _regex(regex, validation, message) {
+    return this.refinement((data) => regex.test(data), {
+      validation,
+      code: ZodIssueCode.invalid_string,
+      ...errorUtil.errToObj(message)
+    });
+  }
   _addCheck(check) {
     return new ZodString({
       ...this._def,
@@ -21968,6 +21962,31 @@ class ZodString extends ZodType {
       ...errorUtil.errToObj(message)
     });
   }
+  /**
+   * @deprecated Use z.string().min(1) instead.
+   * @see {@link ZodString.min}
+   */
+  nonempty(message) {
+    return this.min(1, errorUtil.errToObj(message));
+  }
+  trim() {
+    return new ZodString({
+      ...this._def,
+      checks: [...this._def.checks, { kind: "trim" }]
+    });
+  }
+  toLowerCase() {
+    return new ZodString({
+      ...this._def,
+      checks: [...this._def.checks, { kind: "toLowerCase" }]
+    });
+  }
+  toUpperCase() {
+    return new ZodString({
+      ...this._def,
+      checks: [...this._def.checks, { kind: "toUpperCase" }]
+    });
+  }
   get isDatetime() {
     return !!this._def.checks.find((ch) => ch.kind === "datetime");
   }
@@ -23559,6 +23578,12 @@ class ZodRecord extends ZodType {
   }
 }
 class ZodMap extends ZodType {
+  get keySchema() {
+    return this._def.keyType;
+  }
+  get valueSchema() {
+    return this._def.valueType;
+  }
   _parse(input) {
     const { status, ctx } = this._processInputParams(input);
     if (ctx.parsedType !== ZodParsedType.map) {
@@ -23753,27 +23778,29 @@ class ZodFunction extends ZodType {
     const params = { errorMap: ctx.common.contextualErrorMap };
     const fn = ctx.data;
     if (this._def.returns instanceof ZodPromise) {
-      return OK(async (...args) => {
+      const me = this;
+      return OK(async function(...args) {
         const error = new ZodError([]);
-        const parsedArgs = await this._def.args.parseAsync(args, params).catch((e) => {
+        const parsedArgs = await me._def.args.parseAsync(args, params).catch((e) => {
           error.addIssue(makeArgsIssue(args, e));
           throw error;
         });
-        const result = await fn(...parsedArgs);
-        const parsedReturns = await this._def.returns._def.type.parseAsync(result, params).catch((e) => {
+        const result = await Reflect.apply(fn, this, parsedArgs);
+        const parsedReturns = await me._def.returns._def.type.parseAsync(result, params).catch((e) => {
           error.addIssue(makeReturnsIssue(result, e));
           throw error;
         });
         return parsedReturns;
       });
     } else {
-      return OK((...args) => {
-        const parsedArgs = this._def.args.safeParse(args, params);
+      const me = this;
+      return OK(function(...args) {
+        const parsedArgs = me._def.args.safeParse(args, params);
         if (!parsedArgs.success) {
           throw new ZodError([makeArgsIssue(args, parsedArgs.error)]);
         }
-        const result = fn(...parsedArgs.data);
-        const parsedReturns = this._def.returns.safeParse(result, params);
+        const result = Reflect.apply(fn, this, parsedArgs.data);
+        const parsedReturns = me._def.returns.safeParse(result, params);
         if (!parsedReturns.success) {
           throw new ZodError([makeReturnsIssue(result, parsedReturns.error)]);
         }
@@ -23995,8 +24022,28 @@ class ZodEffects extends ZodType {
   _parse(input) {
     const { status, ctx } = this._processInputParams(input);
     const effect = this._def.effect || null;
+    const checkCtx = {
+      addIssue: (arg) => {
+        addIssueToContext(ctx, arg);
+        if (arg.fatal) {
+          status.abort();
+        } else {
+          status.dirty();
+        }
+      },
+      get path() {
+        return ctx.path;
+      }
+    };
+    checkCtx.addIssue = checkCtx.addIssue.bind(checkCtx);
     if (effect.type === "preprocess") {
-      const processed = effect.transform(ctx.data);
+      const processed = effect.transform(ctx.data, checkCtx);
+      if (ctx.common.issues.length) {
+        return {
+          status: "dirty",
+          value: ctx.data
+        };
+      }
       if (ctx.common.async) {
         return Promise.resolve(processed).then((processed2) => {
           return this._def.schema._parseAsync({
@@ -24013,20 +24060,6 @@ class ZodEffects extends ZodType {
         });
       }
     }
-    const checkCtx = {
-      addIssue: (arg) => {
-        addIssueToContext(ctx, arg);
-        if (arg.fatal) {
-          status.abort();
-        } else {
-          status.dirty();
-        }
-      },
-      get path() {
-        return ctx.path;
-      }
-    };
-    checkCtx.addIssue = checkCtx.addIssue.bind(checkCtx);
     if (effect.type === "refinement") {
       const executeRefinement = (acc) => {
         const result = effect.refinement(acc, checkCtx);
@@ -24310,6 +24343,22 @@ class ZodPipeline extends ZodType {
     });
   }
 }
+class ZodReadonly extends ZodType {
+  _parse(input) {
+    const result = this._def.innerType._parse(input);
+    if (isValid(result)) {
+      result.value = Object.freeze(result.value);
+    }
+    return result;
+  }
+}
+ZodReadonly.create = (type3, params) => {
+  return new ZodReadonly({
+    innerType: type3,
+    typeName: ZodFirstPartyTypeKind.ZodReadonly,
+    ...processCreateParams(params)
+  });
+};
 const custom = (check, params = {}, fatal) => {
   if (check)
     return ZodAny.create().superRefine((data, ctx) => {
@@ -24363,6 +24412,7 @@ var ZodFirstPartyTypeKind;
   ZodFirstPartyTypeKind2["ZodPromise"] = "ZodPromise";
   ZodFirstPartyTypeKind2["ZodBranded"] = "ZodBranded";
   ZodFirstPartyTypeKind2["ZodPipeline"] = "ZodPipeline";
+  ZodFirstPartyTypeKind2["ZodReadonly"] = "ZodReadonly";
 })(ZodFirstPartyTypeKind || (ZodFirstPartyTypeKind = {}));
 const instanceOfType = (cls, params = {
   message: `Input not instance of ${cls.name}`
@@ -24477,6 +24527,7 @@ var z = /* @__PURE__ */ Object.freeze({
   BRAND,
   ZodBranded,
   ZodPipeline,
+  ZodReadonly,
   custom,
   Schema: ZodType,
   ZodSchema: ZodType,
@@ -24791,7 +24842,7 @@ for (let i = 0; i < 256; ++i) {
   byteToHex.push((i + 256).toString(16).slice(1));
 }
 function unsafeStringify(arr, offset2 = 0) {
-  return (byteToHex[arr[offset2 + 0]] + byteToHex[arr[offset2 + 1]] + byteToHex[arr[offset2 + 2]] + byteToHex[arr[offset2 + 3]] + "-" + byteToHex[arr[offset2 + 4]] + byteToHex[arr[offset2 + 5]] + "-" + byteToHex[arr[offset2 + 6]] + byteToHex[arr[offset2 + 7]] + "-" + byteToHex[arr[offset2 + 8]] + byteToHex[arr[offset2 + 9]] + "-" + byteToHex[arr[offset2 + 10]] + byteToHex[arr[offset2 + 11]] + byteToHex[arr[offset2 + 12]] + byteToHex[arr[offset2 + 13]] + byteToHex[arr[offset2 + 14]] + byteToHex[arr[offset2 + 15]]).toLowerCase();
+  return byteToHex[arr[offset2 + 0]] + byteToHex[arr[offset2 + 1]] + byteToHex[arr[offset2 + 2]] + byteToHex[arr[offset2 + 3]] + "-" + byteToHex[arr[offset2 + 4]] + byteToHex[arr[offset2 + 5]] + "-" + byteToHex[arr[offset2 + 6]] + byteToHex[arr[offset2 + 7]] + "-" + byteToHex[arr[offset2 + 8]] + byteToHex[arr[offset2 + 9]] + "-" + byteToHex[arr[offset2 + 10]] + byteToHex[arr[offset2 + 11]] + byteToHex[arr[offset2 + 12]] + byteToHex[arr[offset2 + 13]] + byteToHex[arr[offset2 + 14]] + byteToHex[arr[offset2 + 15]];
 }
 const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 const native = {
@@ -27829,6 +27880,7 @@ const ViewType$1 = {
   OBS_SET_SIZES: "obsSetSizes",
   OBS_SET_FEATURE_VALUE_DISTRIBUTION: "obsSetFeatureValueDistribution",
   FEATURE_VALUE_HISTOGRAM: "featureValueHistogram",
+  DOT_PLOT: "dotPlot",
   FEATURE_BAR_PLOT: "featureBarPlot"
 };
 const DataType$1 = {
@@ -28018,6 +28070,7 @@ const CoordinationType$1 = {
   GATING_FEATURE_SELECTION_X: "gatingFeatureSelectionX",
   GATING_FEATURE_SELECTION_Y: "gatingFeatureSelectionY",
   FEATURE_VALUE_TRANSFORM_COEFFICIENT: "featureValueTransformCoefficient",
+  FEATURE_VALUE_POSITIVITY_THRESHOLD: "featureValuePositivityThreshold",
   TOOLTIPS_VISIBLE: "tooltipsVisible",
   FILE_UID: "fileUid",
   IMAGE_LAYER: "imageLayer",
@@ -28065,7 +28118,14 @@ const CoordinationType$1 = {
   SPATIAL_CHANNEL_LABEL_SIZE: "spatialChannelLabelSize",
   // Multi-sample / comparative
   SAMPLE_TYPE: "sampleType",
-  SAMPLE_SET_SELECTION: "sampleSetSelection"
+  SAMPLE_SET_SELECTION: "sampleSetSelection",
+  SAMPLE_SET_COLOR: "sampleSetColor",
+  EMBEDDING_POINTS_VISIBLE: "embeddingPointsVisible",
+  EMBEDDING_CONTOURS_VISIBLE: "embeddingContoursVisible",
+  EMBEDDING_CONTOURS_FILLED: "embeddingContoursFilled",
+  EMBEDDING_CONTOUR_PERCENTILES: "embeddingContourPercentiles",
+  CONTOUR_COLOR_ENCODING: "contourColorEncoding",
+  CONTOUR_COLOR: "contourColor"
 };
 const STATUS = {
   LOADING: "loading",
@@ -28134,10 +28194,10 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
   CoordinationType$1.EMBEDDING_OBS_OPACITY
 ];
 const note = "This file is autogenerated by .changeset/post-changelog.mjs.";
-const version = "3.4.6";
-const date = "2024-05-24";
+const version = "3.4.7";
+const date = "2024-07-25";
 const branch = "changeset-release/main";
-const hash = "fa783284";
+const hash = "efed9951";
 const META_VERSION = {
   note,
   version,
@@ -28462,6 +28522,7 @@ const annDataConvenienceObsEmbeddingItem = z.object({
 });
 const annDataObsLabels = annDataObs;
 const annDataFeatureLabels = annDataObs;
+const annDataSampleEdges = annDataObs;
 const annDataObsFeatureMatrix = z.object({
   path: z.string(),
   featureFilterPath: z.string().optional().describe("If the feature index should be filtered, put a boolean column here (analogous to the previous geneFilter option). e.g., var/in_obsm_X_small_matrix"),
@@ -28618,7 +28679,8 @@ z.object({
   obsEmbedding: z.union([
     annDataObsEmbedding,
     z.array(annDataConvenienceObsEmbeddingItem)
-  ])
+  ]),
+  sampleEdges: annDataSampleEdges
 }).partial();
 z.object({
   // TODO: should `image` be a special schema
@@ -36595,7 +36657,9 @@ function VitessceGridLayout(props) {
     height: height2,
     onRemoveComponent,
     onLayoutChange: onLayoutChangeProp,
-    isBounded
+    isBounded,
+    pageMode,
+    children: children2
   } = props;
   const getComponent = useCallback((viewType) => {
     if (Array.isArray(viewTypes)) {
@@ -36670,24 +36734,48 @@ function VitessceGridLayout(props) {
   const saveCurrentLayouts = useCallback(() => {
     setLastValidGridLayouts(gridLayouts);
   }, [gridLayouts]);
-  const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
-    const Component = getComponent(v.component);
-    const removeGridComponent = () => {
-      onRemoveComponent(v.uid);
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Component,
-      {
-        ...v.props,
-        uuid: v.uid,
-        coordinationScopes: v.coordinationScopes,
-        coordinationScopesBy: v.coordinationScopesBy,
-        theme,
-        removeGridComponent
-      }
-    ) }, v.uid);
-  }), [gridComponents, getComponent, onRemoveComponent, theme]);
-  return gridLayouts && gridComponents && gridBreakpoints && gridCols && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const layoutChildren = useMemo(() => {
+    const gridComponentsValues = Object.values(gridComponents);
+    if (pageMode) {
+      return children2.map((child) => {
+        const childId = child.props.id;
+        const v = gridComponentsValues.find((el2) => el2.uid === childId);
+        if (!v) {
+          return child;
+        }
+        const Component = getComponent(v.component);
+        return React__default.cloneElement(child, { key: v.uid }, /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Component,
+          {
+            ...v.props,
+            uuid: v.uid,
+            coordinationScopes: v.coordinationScopes,
+            coordinationScopesBy: v.coordinationScopesBy,
+            theme,
+            removeGridComponent: null
+          }
+        ) }));
+      });
+    }
+    return gridComponentsValues.map((v) => {
+      const Component = getComponent(v.component);
+      const removeGridComponent = () => {
+        onRemoveComponent(v.uid);
+      };
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Component,
+        {
+          ...v.props,
+          uuid: v.uid,
+          coordinationScopes: v.coordinationScopes,
+          coordinationScopesBy: v.coordinationScopesBy,
+          theme,
+          removeGridComponent
+        }
+      ) }, v.uid);
+    });
+  }, [gridComponents, getComponent, onRemoveComponent, theme]);
+  return pageMode ? layoutChildren : gridLayouts && gridComponents && gridBreakpoints && gridCols && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     style,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ResponsiveHeightGridLayout,
@@ -37467,7 +37555,9 @@ function VitessceGrid(props) {
     viewTypes,
     fileTypes,
     coordinationTypes,
-    stores
+    stores,
+    pageMode,
+    children: children2
   } = props;
   const [rowHeight, containerRef] = useRowHeight(config2, initialRowHeight, height2, margin, padding);
   const onResize = useEmitGridResize();
@@ -37515,6 +37605,7 @@ function VitessceGrid(props) {
       children: layout2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         VitessceGridLayout,
         {
+          pageMode,
           role: "group",
           layout: layout2,
           height: height2,
@@ -37528,7 +37619,8 @@ function VitessceGrid(props) {
           onLayoutChange: changeLayoutPostMount,
           isBounded,
           onResize,
-          onResizeStop: onResize
+          onResizeStop: onResize,
+          children: children2
         }
       ) : null
     }
@@ -37836,6 +37928,14 @@ function createGenerateClassName(customPrefix) {
     return `${seedPrefix}${ruleKey}`;
   };
 }
+const AsyncFunctionsContext = createContext$1({
+  // This will be an object where keys are function types
+  // (as strings) and values are the async functions.
+});
+function useAsyncFunction(functionType2) {
+  const context = useContext(AsyncFunctionsContext);
+  return context == null ? void 0 : context[functionType2];
+}
 function VitS(props) {
   const {
     config: config2,
@@ -37855,7 +37955,10 @@ function VitS(props) {
     fileTypes: fileTypesProp,
     jointFileTypes: jointFileTypesProp,
     coordinationTypes: coordinationTypesProp,
-    warning: warning2
+    asyncFunctions: asyncFunctionsProp,
+    warning: warning2,
+    pageMode = false,
+    children: children2
   } = props;
   const viewTypes = useMemo(() => viewTypesProp || [], [viewTypesProp]);
   const fileTypes = useMemo(() => fileTypesProp || [], [fileTypesProp]);
@@ -37867,6 +37970,14 @@ function VitS(props) {
     () => coordinationTypesProp || [],
     [coordinationTypesProp]
   );
+  const asyncFunctions = useMemo(
+    () => Object.fromEntries(
+      // Convert the array of PluginAsyncFunction instances to a mapping
+      // from function type strings to async functions.
+      (asyncFunctionsProp == null ? void 0 : asyncFunctionsProp.map((p) => [p.functionType, p.asyncFunction])) || []
+    ),
+    [asyncFunctionsProp]
+  );
   const generateClassName2 = useMemo(() => createGenerateClassName(uid), [uid]);
   const configVersion = config2 == null ? void 0 : config2.version;
   const configKey = useMemo(() => {
@@ -37960,10 +38071,11 @@ function VitS(props) {
     {
       createStore: createViewConfigStoreClosure,
       ...remountOnUidChange ? { key: configKey } : {},
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           VitessceGrid,
           {
+            pageMode,
             success,
             configKey,
             viewTypes,
@@ -37974,7 +38086,8 @@ function VitS(props) {
             height: height2,
             theme,
             isBounded,
-            stores
+            stores,
+            children: children2
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -37987,7 +38100,7 @@ function VitS(props) {
             pluginSpecificConfigSchema
           }
         )
-      ] })
+      ] }) })
     }
   ) }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StylesProvider, { generateClassName: generateClassName2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: muiTheme[theme], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Warning, { ...configOrWarning }) }) });
 }
@@ -38230,7 +38343,7 @@ function TitleInfo(props) {
               urls
             }
           ) : null,
-          closeButtonVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          closeButtonVisible && removeGridComponent ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ClosePaneButton,
             {
               removeGridComponent
@@ -38717,14 +38830,14 @@ function useFeatureSelection(loaders, dataset, isRequired, selection, matchOn) {
   const anyError = featureQueries.some((q) => q.isError);
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const isSuccess = dataStatus === STATUS.SUCCESS;
-  const geneData = isSuccess ? featureQueries.map((q) => {
+  const geneData = useMemo(() => isSuccess ? featureQueries.map((q) => {
     var _a;
     return ((_a = q.data) == null ? void 0 : _a.data) || null;
-  }) : null;
-  const loadedGeneName = isSuccess ? featureQueries.map((q) => {
+  }) : null, [isSuccess, selection, dataset]);
+  const loadedGeneName = useMemo(() => isSuccess ? featureQueries.map((q) => {
     var _a;
     return ((_a = q.data) == null ? void 0 : _a.dataKey) || null;
-  }) : null;
+  }) : null, [isSuccess, selection, dataset]);
   useEffect(() => {
     featureQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
       warn(error, setWarning);
@@ -39955,6 +40068,7 @@ export {
   VitS,
   logConfig,
   useAddImageChannelInMetaCoordinationScopes,
+  useAsyncFunction,
   useAuxiliaryCoordination,
   useClosestVitessceContainerSize,
   useComplexCoordination,

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

@@ -1 +1 @@
-{"version":3,"file":"CallbackPublisher.d.ts","sourceRoot":"","sources":["../src/CallbackPublisher.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;GAWG;AACH;IAP2B,cAAc;IAEd,cAAc;IAEf,sBAAsB,EAArC,OAAO;SAoDjB"}
+{"version":3,"file":"CallbackPublisher.d.ts","sourceRoot":"","sources":["../src/CallbackPublisher.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;GAWG;AACH,iDAPG;IAAwB,cAAc;IAEd,cAAc;IAEf,sBAAsB,EAArC,OAAO;CAEjB,QAkDA"}

package/dist-tsc/TitleInfo.js

@@ -66,7 +66,7 @@ export function TitleInfo(props) {
     const classes = useTitleStyles();
     return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, closeButtonVisible ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,

package/dist-tsc/VitS.d.ts

@@ -30,6 +30,7 @@
  * @param {array} props.jointFileTypes Plugin joint file types.
  * @param {array} props.coordinationTypes Plugin coordination types.
  * @param {null|object} props.warning A warning to render within the Vitessce grid,
+ * @param {boolean} props.pageMode Whether to render in page mode. By default, false.
  * provided by the parent.
  */
 export function VitS(props: {
@@ -49,5 +50,6 @@ export function VitS(props: {
     jointFileTypes: array;
     coordinationTypes: array;
     warning: null | object;
+    pageMode: boolean;
 }): JSX.Element;
 //# sourceMappingURL=VitS.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IA/ByB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGI,kBAAkB,EAAjC,OAAO;IAEM,SAAS;IACT,SAAS;IACT,cAAc;IACd,iBAAiB;IACX,OAAO,EAA1B,IAAI,GAAC,MAAM;gBAgMrB"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,4BAhCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGI,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;CAEjB,eA+MA"}

package/dist-tsc/VitS.js

@@ -12,6 +12,7 @@ import CallbackPublisher from './CallbackPublisher.js';
 import { initialize, logConfig, } from './view-config-utils.js';
 import { createLoaders } from './vitessce-grid-utils.js';
 import { createGenerateClassName } from './mui-utils.js';
+import { AsyncFunctionsContext } from './contexts.js';
 /**
  * The Vitessce component.
  * @param {object} props
@@ -44,14 +45,20 @@ import { createGenerateClassName } from './mui-utils.js';
  * @param {array} props.jointFileTypes Plugin joint file types.
  * @param {array} props.coordinationTypes Plugin coordination types.
  * @param {null|object} props.warning A warning to render within the Vitessce grid,
+ * @param {boolean} props.pageMode Whether to render in page mode. By default, false.
  * provided by the parent.
  */
 export function VitS(props) {
-    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, warning, } = props;
+    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, } = props;
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
     const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
     const jointFileTypes = useMemo(() => (jointFileTypesProp || []), [jointFileTypesProp]);
     const coordinationTypes = useMemo(() => (coordinationTypesProp || []), [coordinationTypesProp]);
+    const asyncFunctions = useMemo(() => Object.fromEntries(
+    // Convert the array of PluginAsyncFunction instances to a mapping
+    // from function type strings to async functions.
+    asyncFunctionsProp?.map(p => ([p.functionType, p.asyncFunction]))
+        || []), [asyncFunctionsProp]);
     const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
     const configVersion = config?.version;
     // If config.uid exists, then use it for hook dependencies to detect changes
@@ -144,5 +151,5 @@ export function VitS(props) {
         return createViewConfigStore(null, null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [success, configKey]);
-    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, ...(remountOnUidChange ? ({ key: configKey }) : {}), children: _jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [_jsx(VitessceGrid, { success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
+    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, ...(remountOnUidChange ? ({ key: configKey }) : {}), children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores, children: children }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
 }

package/dist-tsc/VitessceGrid.d.ts

@@ -9,6 +9,7 @@
  * @param {PluginViewType[]} props.viewTypes
  * @param {PluginFileType[]} props.fileTypes
  * @param {PluginCoordinationType[]} props.coordinationTypes
+ * @param {boolean} props.pageMode
  */
 export default function VitessceGrid(props: {
     rowHeight: number;
@@ -19,5 +20,6 @@ export default function VitessceGrid(props: {
     viewTypes: PluginViewType[];
     fileTypes: PluginFileType[];
     coordinationTypes: PluginCoordinationType[];
+    pageMode: boolean;
 }): JSX.Element;
 //# sourceMappingURL=VitessceGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;GAWG;AACH;IATyB,SAAS,EAAvB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACU,MAAM;IACE,SAAS,EAAjC,gBAAgB;IACQ,SAAS,EAAjC,gBAAgB;IACgB,iBAAiB,EAAjD,wBAAwB;gBA8FlC"}
+{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;GAYG;AACH,4CAVG;IAAsB,SAAS,EAAvB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACU,MAAM;IACE,SAAS,EAAjC,cAAc,EAAE;IACQ,SAAS,EAAjC,cAAc,EAAE;IACgB,iBAAiB,EAAjD,sBAAsB,EAAE;IACT,QAAQ,EAAvB,OAAO;CACjB,eAkGA"}

package/dist-tsc/VitessceGrid.js

@@ -22,9 +22,10 @@ const margin = 5;
  * @param {PluginViewType[]} props.viewTypes
  * @param {PluginFileType[]} props.fileTypes
  * @param {PluginCoordinationType[]} props.coordinationTypes
+ * @param {boolean} props.pageMode
  */
 export default function VitessceGrid(props) {
-    const { success, configKey, rowHeight: initialRowHeight, config, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, stores, } = props;
+    const { success, configKey, rowHeight: initialRowHeight, config, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, stores, pageMode, children, } = props;
     const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
     const onResize = useEmitGridResize();
     const [componentWidth] = useClosestVitessceContainerSize(containerRef);
@@ -61,5 +62,5 @@ export default function VitessceGrid(props) {
         setLoaders(newLoaders);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [success, configKey]);
-    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), role: "group", "aria-label": altText, children: layout ? (_jsx(VitessceGridLayout, { role: "group", layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize })) : null }));
+    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), role: "group", "aria-label": altText, children: layout ? (_jsx(VitessceGridLayout, { pageMode: pageMode, role: "group", layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize, children: children })) : null }));
 }

package/dist-tsc/contexts.d.ts

@@ -0,0 +1,3 @@
+export function useAsyncFunction(functionType: any): any;
+export const AsyncFunctionsContext: any;
+//# sourceMappingURL=contexts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../src/contexts.js"],"names":[],"mappings":"AAQA,yDAGC;AARD,wCAGG"}

package/dist-tsc/contexts.js

@@ -0,0 +1,10 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext } from 'react';
+export const AsyncFunctionsContext = createContext({
+// This will be an object where keys are function types
+// (as strings) and values are the async functions.
+});
+export function useAsyncFunction(functionType) {
+    const context = useContext(AsyncFunctionsContext);
+    return context?.[functionType];
+}

package/dist-tsc/data/AbstractLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractLoader.d.ts","sourceRoot":"","sources":["../../src/data/AbstractLoader.js"],"names":[],"mappings":"AAGA,sDAAsD;AAEtD;;;GAGG;AACH;IACE;;;OAGG;IACH,8FAcC;IANC,iBAAwB;IACxB,aAAgB;IAChB,wBAAc;IACd,qCAA8B;IAC9B,aAAsB;IACtB;;kBAA4C;IAG9C;;;OAGG;IAEH,QAHa,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAOtC;CACF;yBAvCwB,mBAAmB;kCAEV,iBAAiB"}
+{"version":3,"file":"AbstractLoader.d.ts","sourceRoot":"","sources":["../../src/data/AbstractLoader.js"],"names":[],"mappings":"AAGA,sDAAsD;AAEtD;;;GAGG;AACH;IACE;;;OAGG;IACH,gFAFW,YAAY,EAgBtB;IANC,iBAAwB;IACxB,aAAgB;IAChB,wBAAc;IACd,qCAA8B;IAC9B,aAAsB;IACtB;;kBAA4C;IAG9C;;;OAGG;IAEH,QAHa,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAOtC;CACF;yBAvCwB,mBAAmB;kCAEV,iBAAiB"}

package/dist-tsc/data/AbstractTwoStepLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractTwoStepLoader.d.ts","sourceRoot":"","sources":["../../src/data/AbstractTwoStepLoader.js"],"names":[],"mappings":"AAGA,sDAAsD;AAEtD;;GAEG;AACH,2CAGa,cAAc;IAFzB;;;;OAIG;IACH,wBAHW,cAAc,wBAMxB;IADC,2BAA4B;CAE/B;2BAjB0B,qBAAqB;kCAEd,iBAAiB"}
+{"version":3,"file":"AbstractTwoStepLoader.d.ts","sourceRoot":"","sources":["../../src/data/AbstractTwoStepLoader.js"],"names":[],"mappings":"AAGA,sDAAsD;AAEtD;;GAEG;AACH,2CAFa,cAAc;IAGzB;;;;OAIG;IACH,wBAHW,cAAc,UACd,YAAY,EAKtB;IADC,2BAA4B;CAE/B;2BAjB0B,qBAAqB;kCAEd,iBAAiB"}

package/dist-tsc/data/LoaderResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderResult.d.ts","sourceRoot":"","sources":["../../src/data/LoaderResult.js"],"names":[],"mappings":"AAEA;;GAEG;AACH,kCAEa,cAAc;IADzB;;;;;OAKG;IACH,kBALW,cAAc,OACd,MAAM,EAAE,GAAC,MAAM,GAAC,IAAI,uBACpB,MAAM,GAAC,IAAI,gBACX,WAAW,GAAC,IAAI,EAO1B;IAJC,qBAAgB;IAChB,8BAAc;IACd,kCAA4C;IAC5C,gCAA8B;CAEjC"}
+{"version":3,"file":"LoaderResult.d.ts","sourceRoot":"","sources":["../../src/data/LoaderResult.js"],"names":[],"mappings":"AAEA;;GAEG;AACH,kCAFmB,cAAc;IAG/B;;;;;OAKG;IACH,kBALW,cAAc,OACd,MAAM,EAAE,GAAC,MAAM,GAAC,IAAI,uBACpB,MAAM,GAAC,IAAI,gBACX,WAAW,GAAC,IAAI,EAO1B;IAJC,qBAAgB;IAChB,8BAAc;IACd,kCAA4C;IAC5C,gCAA8B;CAEjC"}

package/dist-tsc/data/loader-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader-registry.d.ts","sourceRoot":"","sources":["../../src/data/loader-registry.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qDAJW,MAAM,aACN,gBAAgB,SAc1B;AAED,wEAQC"}
+{"version":3,"file":"loader-registry.d.ts","sourceRoot":"","sources":["../../src/data/loader-registry.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qDAJW,MAAM,aACN,cAAc,EAAE,GACd,KAAK,CAajB;AAED,wEAQC"}

package/dist-tsc/data-hook-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-hook-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-utils.js"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AAGD,oDAuBC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,uBAoDhB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,gEAyFhB;AAED,+FAGC;oCArPM,mBAAmB"}
+{"version":3,"file":"data-hook-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-utils.js"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AAGD,oDAuBC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAiDjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,0DAGJ,KAAK,CAsFjB;AAED,+FAGC;oCArPM,mBAAmB"}

package/dist-tsc/data-hooks-multilevel-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-hooks-multilevel-utils.d.ts","sourceRoot":"","sources":["../src/data-hooks-multilevel-utils.js"],"names":[],"mappings":"AA+CA;;;;;;;;;;;;;GAaG;AACH,mEAPW,MAAM,cACN,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAmBhB;AA8BD;;;;;;;;;;;;GAYG;AACH,gEANW,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAiBhB;AA+BD;;;;;;;;;;;;GAYG;AACH,mDANW,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAiBhB;AAuBD;;;;;;;;;;GAUG;AACH,oDALW,MAAM,EAAE,WACR,MAAM,+BAOhB;AAED;;;;;;GAMG;AACH,0GAUC;AAED;;;;;;GAMG;AACH,0FAYC;AA+DD,gJA6DC;AAuCD,sIAuDC;AAyDD,2HAQC;AAED,sHAQC;AAED,wHAQC"}
+{"version":3,"file":"data-hooks-multilevel-utils.d.ts","sourceRoot":"","sources":["../src/data-hooks-multilevel-utils.js"],"names":[],"mappings":"AA+CA;;;;;;;;;;;;;GAaG;AACH,mEAPW,MAAM,cACN,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAmBhB;AA8BD;;;;;;;;;;;;GAYG;AACH,gEANW,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAiBhB;AA+BD;;;;;;;;;;;;GAYG;AACH,mDANW,MAAM,SACN,MAAM,WACN,MAAM,YACN,MAAM,wBAiBhB;AAuBD;;;;;;;;;;GAUG;AACH,oDALW,MAAM,EAAE,WACR,MAAM,+BAOhB;AAED;;;;;;GAMG;AACH,sEALW,KAAK,oBACL,KAAK,MAcf;AAED;;;;;;GAMG;AACH,sDALW,KAAK,oBACL,KAAK,MAgBf;AA+DD,gJA6DC;AAuCD,sIAuDC;AAyDD,2HAQC;AAED,sHAQC;AAED,wHAQC"}

package/dist-tsc/data-hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-hooks.d.ts","sourceRoot":"","sources":["../src/data-hooks.js"],"names":[],"mappings":"AAkBA;;;;;;;;GAQG;AACH,wCAPW,MAAM,WAEN,MAAM,SAsBhB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,6CAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,uBAgBhB;AAED,4JASC;AAED,6JASC;AAED,gKASC;AAED,6JASC;AAED,oKASC;AAED,2JASC;AAED,8JASC;AAED,+JASC;AAED,oKASC;AAED,iKASC;AAED,yJASC;AAED,mKASC;AAED,iKASC;AAED;;;;;;;;;;;;;GAaG;AACH,6CAVW,MAAM,WAEN,MAAM,cAEN,OAAO,aAEP,OAAO,uBA4EjB;AAED;;;;;;;;;;;;;GAaG;AACH,oDARW,MAAM,WAEN,MAAM,cAEN,OAAO,iBAEL,MAAM,CA2ElB;AAED,+JAuBC;AAED,8JAuBC;AAED,2HAsBC;AAGD,iIAsBC;AAGD,4GAmBC;AAED,sKA2BC;AAED,4JAyBC"}
+{"version":3,"file":"data-hooks.d.ts","sourceRoot":"","sources":["../src/data-hooks.js"],"names":[],"mappings":"AAkBA;;;;;;;;GAQG;AACH,wCAPW,MAAM,WAEN,MAAM,GAEJ,KAAK,CAoBjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,6CAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAajB;AAED,4JASC;AAED,6JASC;AAED,gKASC;AAED,6JASC;AAED,oKASC;AAED,2JASC;AAED,8JASC;AAED,+JASC;AAED,oKASC;AAED,iKASC;AAED,yJASC;AAED,mKASC;AAED,iKASC;AAED;;;;;;;;;;;;;GAaG;AACH,6CAVW,MAAM,WAEN,MAAM,cAEN,OAAO,aAEP,OAAO,iBACL,KAAK,CAiFjB;AAED;;;;;;;;;;;;;GAaG;AACH,oDARW,MAAM,WAEN,MAAM,cAEN,OAAO,iBAEL,MAAM,CA2ElB;AAED,+JAuBC;AAED,8JAuBC;AAED,2HAsBC;AAGD,iIAsBC;AAGD,4GAmBC;AAED,sKA2BC;AAED,4JAyBC"}

package/dist-tsc/data-hooks.js

@@ -156,10 +156,12 @@ export function useFeatureSelection(loaders, dataset, isRequired, selection, mat
     const anyLoading = featureQueries.some(q => q.isFetching);
     const anyError = featureQueries.some(q => q.isError);
     // eslint-disable-next-line no-nested-ternary
-    const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
+    const dataStatus = anyLoading
+        ? STATUS.LOADING
+        : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
     const isSuccess = dataStatus === STATUS.SUCCESS;
-    const geneData = isSuccess ? featureQueries.map(q => q.data?.data || null) : null;
-    const loadedGeneName = isSuccess ? featureQueries.map(q => q.data?.dataKey || null) : null;
+    const geneData = useMemo(() => (isSuccess ? featureQueries.map(q => q.data?.data || null) : null), [isSuccess, selection, dataset]);
+    const loadedGeneName = useMemo(() => (isSuccess ? featureQueries.map(q => q.data?.dataKey || null) : null), [isSuccess, selection, dataset]);
     useEffect(() => {
         featureQueries
             .map(q => q.error)

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAkBA,oDAOC;AAED;;;;GAIG;AACH,6CAgBC;AAED;;;;GAIG;AACH,yCAiCC;AAED;;;;;GAKG;AACH,2CAiCC;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,SAa3B;AAED;;;;;;GAMG;AACH,iEAuBC;AAED;;;;;;;;;;GAUG;AACH;IAR0B,gBAAgB,EAA/B,MAAM;UAqBhB;AAED;;;;;;;;;;GAUG;AACH,yDARW,QAAM,IAAI,SAuBpB;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAkBA,oDAOC;AAED;;;;GAIG;AACH,uCAHa,KAAK,CAmBjB;AAED;;;;GAIG;AACH,mCAHa,KAAK,CAoCjB;AAED;;;;;GAKG;AACH,qCAJa,KAAK,CAqCjB;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,GACf,KAAK,CAYjB;AAED;;;;;;GAMG;AACH,qDAJW,GAAG,GACD,KAAK,CA0BjB;AAED;;;;;;;;;;GAUG;AACH,+DARG;IAAuB,gBAAgB,EAA/B,MAAM;CAEd,GAAU,KAAK,CAmBjB;AAED;;;;;;;;;;GAUG;AACH,yDARW,KAAK,GAAC,IAAI,GAIR,KAAK,CAmBjB;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC"}

package/dist-tsc/index.d.ts

@@ -3,6 +3,7 @@ export { TitleInfo } from "./TitleInfo.js";
 export { PopperMenu } from "./shared-mui/components.js";
 export { useHasLoader } from "./data-hook-utils.js";
 export { logConfig } from "./view-config-utils.js";
+export { useAsyncFunction } from "./contexts.js";
 export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize } from "./hooks.js";
 export { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes } from "./state/hooks.js";
 export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData } from "./data-hooks.js";

package/dist-tsc/index.js

@@ -11,3 +11,4 @@ export { AbstractLoader, AbstractTwoStepLoader, LoaderResult, } from './data/ind
 export { AbstractLoaderError, DatasetNotFoundError, LoaderNotFoundError, LoaderValidationError, DataSourceFetchError, } from './errors/index.js';
 export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles, } from './shared-plot-options/index.js';
 export { logConfig } from './view-config-utils.js';
+export { useAsyncFunction } from './contexts.js';

package/dist-tsc/state/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AAmCA;;;;;;GAMG;AACH,oEAFa,MAAM,GAAC,SAAS,CA4B5B;AAED;;;;;;;GAOG;AACH,mGAFa,MAAM,GAAC,SAAS,CA0C5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,4BAEJ,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,oFAGJ,MAAM,GAAC,SAAS,CAc5B;AA4RD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,SAqChB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED,yFAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,SA6EhB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,SAYhB;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,SAkChB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,oEAIC;AAED;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AA5oCD;;;;+NAA0D;AAC1D,sFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;+NAAwD;AACxD,qFAAwD;AAiIjD,yFA+KJ;AAOI,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AAmCA;;;;;;GAMG;AACH,8CAJW,GAAC,mBAEC,MAAM,GAAC,SAAS,CA4B5B;AAED;;;;;;;GAOG;AACH,gDALW,GAAC,wBACD,GAAC,qBAEC,MAAM,GAAC,SAAS,CA0C5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,sBACN,GAAC,GACC,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,mDACN,GAAC,wBACD,GAAC,GACC,MAAM,GAAC,SAAS,CAc5B;AA4RD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAmCjB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED,yFAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,GAEJ,KAAK,CA2EjB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,GAEJ,KAAK,CAUjB;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAgCjB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,oEAIC;AAED;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AA5oCD;;;;+NAA0D;AAC1D,sFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;+NAAwD;AACxD,qFAAwD;AAiIjD,yFA+KJ;AAOI,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}

package/dist-tsc/state/spatial-reducers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spatial-reducers.d.ts","sourceRoot":"","sources":["../../src/state/spatial-reducers.js"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,yFAHW,MAAM,GACJ,MAAM,GAAC,SAAS,CAuB5B;AAED;;;;;;;;;;GAUG;AACH,6FALW,MAAM,aACN,MAAM,WACN,MAAM,GACJ,MAAM,GAAC,SAAS,CAuB5B;AAGD,8JA4DC;AAED,wIA6JC"}
+{"version":3,"file":"spatial-reducers.d.ts","sourceRoot":"","sources":["../../src/state/spatial-reducers.js"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,iDALW,GAAC,qBACD,GAAC,aACD,MAAM,GACJ,MAAM,GAAC,SAAS,CAuB5B;AAED;;;;;;;;;;GAUG;AACH,mDAPW,GAAC,qBACD,GAAC,eACD,MAAM,aACN,MAAM,WACN,MAAM,GACJ,MAAM,GAAC,SAAS,CAuB5B;AAGD,8JA4DC;AAED,wIA6JC"}

package/dist-tsc/view-config-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AASA,wDAKC;AAED;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,qBAAqB,qBACrB,wBAAwB,aACxB,gBAAgB;;;EAY1B"}
+{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AASA,wDAKC;AAED;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,mBAAmB,EAAE,qBACrB,sBAAsB,EAAE,aACxB,cAAc,EAAE;;;EAY1B"}

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAeA,oDA8JC"}
+{"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAeA,oDA8LC"}

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.js

@@ -12,7 +12,7 @@ class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     }
 }
 export function VitessceGridLayout(props) {
-    const { layout, viewTypes, padding, margin: marginProp, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, } = props;
+    const { layout, viewTypes, padding, margin: marginProp, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, pageMode, children, } = props;
     const getComponent = useCallback((viewType) => {
         if (Array.isArray(viewTypes)) {
             const matchingViewType = viewTypes.find(v => v.name === viewType);
@@ -97,16 +97,38 @@ export function VitessceGridLayout(props) {
     const saveCurrentLayouts = useCallback(() => {
         setLastValidGridLayouts(gridLayouts);
     }, [gridLayouts]);
-    const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
-        const Component = getComponent(v.component);
-        const removeGridComponent = () => {
-            onRemoveComponent(v.uid);
-        };
-        return (_jsx("div", { children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent }) }, v.uid));
-    }), [gridComponents, getComponent, onRemoveComponent, theme]);
-    return (gridLayouts && gridComponents && gridBreakpoints && gridCols) && (_jsxs(_Fragment, { children: [style, _jsx(ResponsiveHeightGridLayout, { className: "layout", cols: gridCols, layouts: tempGridLayouts || gridLayouts, breakpoints: gridBreakpoints, height: height, rowHeight: rowHeight
-                    || ((window.innerHeight - 2 * padding - (maxRows - 1) * margin)
-                        / maxRows), containerPadding: containerPadding, margin: margin, draggableHandle: draggableHandle, onLayoutChange: onLayoutChange, isBounded: isBounded, onResizeStart: saveCurrentLayouts, onDragStart: saveCurrentLayouts, onResize: onResize, onResizeStop: onResizeStop, children: layoutChildren })] }));
+    const layoutChildren = useMemo(() => {
+        const gridComponentsValues = Object.values(gridComponents);
+        if (pageMode) {
+            // This is pageMode, so we render based on the children.
+            return children.map((child) => {
+                const childId = child.props.id;
+                const v = gridComponentsValues.find(el => el.uid === childId);
+                if (!v) {
+                    // The child did not map to any view in the config, so return as-is.
+                    return child;
+                }
+                // The child mapped to a view in the config,
+                // so we want to render the corresponding component as a subchild.
+                const Component = getComponent(v.component);
+                return React.cloneElement(child, { key: v.uid }, (_jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: null }) })));
+            });
+        }
+        // Not pageMode, so no children to render.
+        // We render the grid components based on the layout information.
+        return gridComponentsValues.map((v) => {
+            const Component = getComponent(v.component);
+            const removeGridComponent = () => {
+                onRemoveComponent(v.uid);
+            };
+            return (_jsx("div", { children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent }) }, v.uid));
+        });
+    }, [gridComponents, getComponent, onRemoveComponent, theme]);
+    return (pageMode
+        ? layoutChildren
+        : ((gridLayouts && gridComponents && gridBreakpoints && gridCols) && (_jsxs(_Fragment, { children: [style, _jsx(ResponsiveHeightGridLayout, { className: "layout", cols: gridCols, layouts: tempGridLayouts || gridLayouts, breakpoints: gridBreakpoints, height: height, rowHeight: rowHeight
+                        || ((window.innerHeight - 2 * padding - (maxRows - 1) * margin)
+                            / maxRows), containerPadding: containerPadding, margin: margin, draggableHandle: draggableHandle, onLayoutChange: onLayoutChange, isBounded: isBounded, onResizeStart: saveCurrentLayouts, onDragStart: saveCurrentLayouts, onResize: onResize, onResizeStop: onResizeStop, children: layoutChildren })] }))));
 }
 VitessceGridLayout.defaultProps = {
     padding: 10,

package/dist-tsc/vitessce-grid-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vitessce-grid-utils.d.ts","sourceRoot":"","sources":["../src/vitessce-grid-utils.js"],"names":[],"mappings":"AAyCA,gHA6CC;AA4BD;;;;;;;;;;GAUG;AACH,wCATW,MAAM,EAAE,qBACR,MAAM,aAEN,gBAAgB,qBAChB,wBAAwB,UACxB,MAAM,GACJ,MAAM,CA6DlB"}
+{"version":3,"file":"vitessce-grid-utils.d.ts","sourceRoot":"","sources":["../src/vitessce-grid-utils.js"],"names":[],"mappings":"AAyCA,gHA6CC;AA4BD;;;;;;;;;;GAUG;AACH,wCATW,MAAM,EAAE,qBACR,MAAM,aAEN,cAAc,EAAE,qBAChB,sBAAsB,EAAE,UACxB,MAAM,GACJ,MAAM,CA6DlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,11 +29,12 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/plugins": "3.4.6",
-    "@vitessce/schemas": "3.4.6",
-    "@vitessce/utils": "3.4.6",
-    "@vitessce/constants-internal": "3.4.6",
-    "@vitessce/config": "3.4.6"
+    "@vitessce/constants-internal": "3.4.7",
+    "@vitessce/plugins": "3.4.7",
+    "@vitessce/schemas": "3.4.7",
+    "@vitessce/utils": "3.4.7",
+    "@vitessce/sets-utils": "3.4.7",
+    "@vitessce/config": "3.4.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -41,7 +42,7 @@
     "react": "^18.0.0",
     "vite": "^4.3.0",
     "vitest": "^0.32.2",
-    "@vitessce/types": "3.4.6"
+    "@vitessce/types": "3.4.7"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/src/TitleInfo.js

@@ -150,7 +150,7 @@ export function TitleInfo(props) {
               urls={urls}
             />
           ) : null}
-          {closeButtonVisible ? (
+          {closeButtonVisible && removeGridComponent ? (
             <ClosePaneButton
               removeGridComponent={removeGridComponent}
             />

package/src/VitS.js

@@ -26,6 +26,7 @@ import {
 } from './view-config-utils.js';
 import { createLoaders } from './vitessce-grid-utils.js';
 import { createGenerateClassName } from './mui-utils.js';
+import { AsyncFunctionsContext } from './contexts.js';
 
 
 /**
@@ -60,6 +61,7 @@ import { createGenerateClassName } from './mui-utils.js';
  * @param {array} props.jointFileTypes Plugin joint file types.
  * @param {array} props.coordinationTypes Plugin coordination types.
  * @param {null|object} props.warning A warning to render within the Vitessce grid,
+ * @param {boolean} props.pageMode Whether to render in page mode. By default, false.
  * provided by the parent.
  */
 export function VitS(props) {
@@ -81,7 +83,10 @@ export function VitS(props) {
     fileTypes: fileTypesProp,
     jointFileTypes: jointFileTypesProp,
     coordinationTypes: coordinationTypesProp,
+    asyncFunctions: asyncFunctionsProp,
     warning,
+    pageMode = false,
+    children,
   } = props;
 
   const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
@@ -94,6 +99,15 @@ export function VitS(props) {
     () => (coordinationTypesProp || []),
     [coordinationTypesProp],
   );
+  const asyncFunctions = useMemo(
+    () => Object.fromEntries(
+      // Convert the array of PluginAsyncFunction instances to a mapping
+      // from function type strings to async functions.
+      asyncFunctionsProp?.map(p => ([p.functionType, p.asyncFunction]))
+      || [],
+    ),
+    [asyncFunctionsProp],
+  );
 
   const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
 
@@ -219,26 +233,31 @@ export function VitS(props) {
             {...(remountOnUidChange ? ({ key: configKey }) : {})}
           >
             <AuxiliaryProvider createStore={createAuxiliaryStore}>
-              <VitessceGrid
-                success={success}
-                configKey={configKey}
-                viewTypes={viewTypes}
-                fileTypes={fileTypes}
-                coordinationTypes={coordinationTypes}
-                config={configOrWarning}
-                rowHeight={rowHeight}
-                height={height}
-                theme={theme}
-                isBounded={isBounded}
-                stores={stores}
-              />
-              <CallbackPublisher
-                onWarn={onWarn}
-                onConfigChange={onConfigChange}
-                onLoaderChange={onLoaderChange}
-                validateOnConfigChange={validateOnConfigChange}
-                pluginSpecificConfigSchema={pluginSpecificConfigSchema}
-              />
+              <AsyncFunctionsContext.Provider value={asyncFunctions}>
+                <VitessceGrid
+                  pageMode={pageMode}
+                  success={success}
+                  configKey={configKey}
+                  viewTypes={viewTypes}
+                  fileTypes={fileTypes}
+                  coordinationTypes={coordinationTypes}
+                  config={configOrWarning}
+                  rowHeight={rowHeight}
+                  height={height}
+                  theme={theme}
+                  isBounded={isBounded}
+                  stores={stores}
+                >
+                  {children}
+                </VitessceGrid>
+                <CallbackPublisher
+                  onWarn={onWarn}
+                  onConfigChange={onConfigChange}
+                  onLoaderChange={onLoaderChange}
+                  validateOnConfigChange={validateOnConfigChange}
+                  pluginSpecificConfigSchema={pluginSpecificConfigSchema}
+                />
+              </AsyncFunctionsContext.Provider>
             </AuxiliaryProvider>
           </ViewConfigProvider>
         </QueryClientProvider>

package/src/VitessceGrid.js

@@ -37,6 +37,7 @@ const margin = 5;
  * @param {PluginViewType[]} props.viewTypes
  * @param {PluginFileType[]} props.fileTypes
  * @param {PluginCoordinationType[]} props.coordinationTypes
+ * @param {boolean} props.pageMode
  */
 export default function VitessceGrid(props) {
   const {
@@ -51,6 +52,8 @@ export default function VitessceGrid(props) {
     fileTypes,
     coordinationTypes,
     stores,
+    pageMode,
+    children,
   } = props;
 
   const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
@@ -112,6 +115,7 @@ export default function VitessceGrid(props) {
     >
       {layout ? (
         <VitessceGridLayout
+          pageMode={pageMode}
           role="group"
           layout={layout}
           height={height}
@@ -126,7 +130,9 @@ export default function VitessceGrid(props) {
           isBounded={isBounded}
           onResize={onResize}
           onResizeStop={onResize}
-        />
+        >
+          {children}
+        </VitessceGridLayout>
       ) : null}
     </div>
   );

package/src/contexts.js

@@ -0,0 +1,12 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext } from 'react';
+
+export const AsyncFunctionsContext = createContext({
+  // This will be an object where keys are function types
+  // (as strings) and values are the async functions.
+});
+
+export function useAsyncFunction(functionType) {
+  const context = useContext(AsyncFunctionsContext);
+  return context?.[functionType];
+}

package/src/data-hooks.js

@@ -288,10 +288,16 @@ export function useFeatureSelection(
   const anyLoading = featureQueries.some(q => q.isFetching);
   const anyError = featureQueries.some(q => q.isError);
   // eslint-disable-next-line no-nested-ternary
-  const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
+  const dataStatus = anyLoading
+    ? STATUS.LOADING
+    : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
   const isSuccess = dataStatus === STATUS.SUCCESS;
-  const geneData = isSuccess ? featureQueries.map(q => q.data?.data || null) : null;
-  const loadedGeneName = isSuccess ? featureQueries.map(q => q.data?.dataKey || null) : null;
+  const geneData = useMemo(() => (
+    isSuccess ? featureQueries.map(q => q.data?.data || null) : null
+  ), [isSuccess, selection, dataset]);
+  const loadedGeneName = useMemo(() => (
+    isSuccess ? featureQueries.map(q => q.data?.dataKey || null) : null
+  ), [isSuccess, selection, dataset]);
 
   useEffect(() => {
     featureQueries

package/src/index.js

@@ -105,3 +105,4 @@ export {
   usePlotOptionsStyles,
 } from './shared-plot-options/index.js';
 export { logConfig } from './view-config-utils.js';
+export { useAsyncFunction } from './contexts.js';

package/src/vitessce-grid-layout/VitessceGridLayout.js

@@ -20,6 +20,7 @@ export function VitessceGridLayout(props) {
     onResize, onResizeStop, rowHeight, theme, height,
     onRemoveComponent, onLayoutChange: onLayoutChangeProp,
     isBounded,
+    pageMode, children,
   } = props;
 
   const getComponent = useCallback((viewType) => {
@@ -121,56 +122,87 @@ export function VitessceGridLayout(props) {
     setLastValidGridLayouts(gridLayouts);
   }, [gridLayouts]);
 
-  const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
-    const Component = getComponent(v.component);
-
-    const removeGridComponent = () => {
-      onRemoveComponent(v.uid);
-    };
-
-    return (
-      <div key={v.uid}>
-        <Component
-          {... v.props}
-          uuid={v.uid}
-          coordinationScopes={v.coordinationScopes}
-          coordinationScopesBy={v.coordinationScopesBy}
-          theme={theme}
-          removeGridComponent={removeGridComponent}
-        />
-      </div>
-    );
-  }), [gridComponents, getComponent, onRemoveComponent, theme]);
-
-  return (gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
-    <>
-      {style}
-      <ResponsiveHeightGridLayout
-        className="layout"
-        cols={gridCols}
-        layouts={tempGridLayouts || gridLayouts}
-        breakpoints={gridBreakpoints}
-        height={height}
-        rowHeight={
+  const layoutChildren = useMemo(() => {
+    const gridComponentsValues = Object.values(gridComponents);
+    if (pageMode) {
+      // This is pageMode, so we render based on the children.
+      return children.map((child) => {
+        const childId = child.props.id;
+        const v = gridComponentsValues.find(el => el.uid === childId);
+        if (!v) {
+          // The child did not map to any view in the config, so return as-is.
+          return child;
+        }
+        // The child mapped to a view in the config,
+        // so we want to render the corresponding component as a subchild.
+        const Component = getComponent(v.component);
+        return React.cloneElement(child, { key: v.uid }, (
+          <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+            <Component
+              {... v.props}
+              uuid={v.uid}
+              coordinationScopes={v.coordinationScopes}
+              coordinationScopesBy={v.coordinationScopesBy}
+              theme={theme}
+              removeGridComponent={null}
+            />
+          </div>
+        ));
+      });
+    }
+    // Not pageMode, so no children to render.
+    // We render the grid components based on the layout information.
+    return gridComponentsValues.map((v) => {
+      const Component = getComponent(v.component);
+      const removeGridComponent = () => {
+        onRemoveComponent(v.uid);
+      };
+      return (
+        <div key={v.uid}>
+          <Component
+            {... v.props}
+            uuid={v.uid}
+            coordinationScopes={v.coordinationScopes}
+            coordinationScopesBy={v.coordinationScopesBy}
+            theme={theme}
+            removeGridComponent={removeGridComponent}
+          />
+        </div>
+      );
+    });
+  }, [gridComponents, getComponent, onRemoveComponent, theme]);
+
+  return (pageMode
+    ? layoutChildren
+    : ((gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
+      <>
+        {style}
+        <ResponsiveHeightGridLayout
+          className="layout"
+          cols={gridCols}
+          layouts={tempGridLayouts || gridLayouts}
+          breakpoints={gridBreakpoints}
+          height={height}
+          rowHeight={
           rowHeight
           || (
             (window.innerHeight - 2 * padding - (maxRows - 1) * margin)
             / maxRows
           )}
-        containerPadding={containerPadding}
-        margin={margin}
-        draggableHandle={draggableHandle}
-        onLayoutChange={onLayoutChange}
-        isBounded={isBounded}
-        onResizeStart={saveCurrentLayouts}
-        onDragStart={saveCurrentLayouts}
-        onResize={onResize}
-        onResizeStop={onResizeStop}
-      >
-        {layoutChildren}
-      </ResponsiveHeightGridLayout>
-    </>
-  );
+          containerPadding={containerPadding}
+          margin={margin}
+          draggableHandle={draggableHandle}
+          onLayoutChange={onLayoutChange}
+          isBounded={isBounded}
+          onResizeStart={saveCurrentLayouts}
+          onDragStart={saveCurrentLayouts}
+          onResize={onResize}
+          onResizeStop={onResizeStop}
+        >
+          {layoutChildren}
+        </ResponsiveHeightGridLayout>
+      </>
+    )));
 }
 
 VitessceGridLayout.defaultProps = {