@vitessce/vit-s 3.4.14 → 3.5.1

package/dist/index.js

@@ -27921,7 +27921,8 @@ const ViewType$1 = {
   OBS_SET_FEATURE_VALUE_DISTRIBUTION: "obsSetFeatureValueDistribution",
   FEATURE_VALUE_HISTOGRAM: "featureValueHistogram",
   DOT_PLOT: "dotPlot",
-  FEATURE_BAR_PLOT: "featureBarPlot"
+  FEATURE_BAR_PLOT: "featureBarPlot",
+  BIOMARKER_SELECT: "biomarkerSelect"
 };
 const DataType$1 = {
   OBS_LABELS: "obsLabels",
@@ -28251,10 +28252,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.14";
-const date = "2024-10-07";
+const version = "3.5.1";
+const date = "2024-11-22";
 const branch = "changeset-release/main";
-const hash = "f416e01c";
+const hash = "233b667a";
 const META_VERSION = {
   note,
   version,
@@ -29282,7 +29283,7 @@ class VitessceConfigView {
    * @param {number} w The width of the view in the layout.
    * @param {number} h The height of the view in the layout.
    */
-  constructor(component, coordinationScopes, x, y, w, h) {
+  constructor(component, coordinationScopes, x, y, w, h, uid) {
     this.view = {
       component,
       coordinationScopes,
@@ -29291,7 +29292,8 @@ class VitessceConfigView {
       x,
       y,
       w,
-      h
+      h,
+      uid
     };
   }
   /**
@@ -29545,7 +29547,7 @@ class VitessceConfig {
    * @returns {VitessceConfigView} A new view instance.
    */
   addView(dataset, component, options) {
-    const { x = 0, y = 0, w = 1, h = 1, mapping = null } = options || {};
+    const { x = 0, y = 0, w = 1, h = 1, uid = void 0, mapping = null } = options || {};
     const datasetMatches = this.config.coordinationSpace[CoordinationType$1.DATASET] ? Object.entries(this.config.coordinationSpace[CoordinationType$1.DATASET]).filter(([scopeName, datasetScope2]) => datasetScope2.cValue === dataset.dataset.uid).map(([scopeName]) => scopeName) : [];
     let datasetScope;
     if (datasetMatches.length === 1) {
@@ -29556,7 +29558,7 @@ class VitessceConfig {
     const coordinationScopes = {
       [CoordinationType$1.DATASET]: datasetScope
     };
-    const newView = new VitessceConfigView(component, coordinationScopes, x, y, w, h);
+    const newView = new VitessceConfigView(component, coordinationScopes, x, y, w, h, uid);
     if (mapping) {
       const [etScope] = this.addCoordination(CoordinationType$1.EMBEDDING_TYPE);
       etScope.setValue(mapping);
@@ -29574,9 +29576,20 @@ class VitessceConfig {
   addCoordination(...args) {
     const cTypes = args;
     const result = [];
-    cTypes.forEach((cType) => {
-      const prevScopes = this.config.coordinationSpace[cType] ? Object.keys(this.config.coordinationSpace[cType]) : [];
-      const scope = new VitessceConfigCoordinationScope(cType, this.getNextScope(prevScopes));
+    cTypes.forEach((cTypeOrObj) => {
+      let cType;
+      let cScope;
+      let cValue;
+      if (typeof cTypeOrObj === "string") {
+        cType = cTypeOrObj;
+        const prevScopes = this.config.coordinationSpace[cType] ? Object.keys(this.config.coordinationSpace[cType]) : [];
+        cScope = this.getNextScope(prevScopes);
+      } else {
+        cType = cTypeOrObj.cType;
+        cScope = cTypeOrObj.cScope;
+        cValue = cTypeOrObj.cValue;
+      }
+      const scope = new VitessceConfigCoordinationScope(cType, cScope, cValue);
       if (!this.config.coordinationSpace[scope.cType]) {
         this.config.coordinationSpace[scope.cType] = {};
       }
@@ -29823,7 +29836,7 @@ class VitessceConfig {
       }
     });
     config2.layout.forEach((c) => {
-      const newView = new VitessceConfigView(c.component, c.coordinationScopes, c.x, c.y, c.w, c.h);
+      const newView = new VitessceConfigView(c.component, c.coordinationScopes, c.x, c.y, c.w, c.h, c.uid);
       vc.config.layout.push(newView);
     });
     return vc;
@@ -30776,6 +30789,9 @@ function useSetLoaders() {
 function useMergeCoordination() {
   return useViewConfigStore((state) => state.mergeCoordination);
 }
+function useViewConfig() {
+  return useViewConfigStore((state) => state.viewConfig);
+}
 function useSetViewConfig(viewConfigStoreApi) {
   const setViewConfigRef = useRef(viewConfigStoreApi.getState().setViewConfig);
   const setViewConfig = setViewConfigRef.current;
@@ -36713,6 +36729,36 @@ function resolveLayout(layout2) {
     components
   };
 }
+const AsyncFunctionsContext = createContext$1({
+  // {
+  //   asyncFunctions: { [functionType: string]: asyncFunction },
+  //   queryClient: QueryClient from react-query
+  // }
+  // asyncFunctions will be an object where keys are function types
+  // (as strings) and values are the async functions.
+});
+function useAsyncFunction(functionType2) {
+  var _a;
+  const context = useContext(AsyncFunctionsContext);
+  const origFunction = (_a = context == null ? void 0 : context.asyncFunctions) == null ? void 0 : _a[functionType2];
+  const queryClient = context == null ? void 0 : context.queryClient;
+  const partialFunction = (...args) => origFunction({ queryClient }, ...args);
+  return partialFunction;
+}
+const PageModeViewContext = createContext$1({
+  // Keys are view UIDs and values are
+  // the corresponding React components.
+});
+function ensureComponent(component) {
+  if (!component) {
+    return () => null;
+  }
+  return component;
+}
+function usePageModeView(uid) {
+  const context = useContext(PageModeViewContext);
+  return ensureComponent(context == null ? void 0 : context[uid]);
+}
 const ResponsiveGridLayout = reactGridLayoutWithLodashExports.WidthProvider(reactGridLayoutWithLodashExports.Responsive);
 class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
   componentDidUpdate(prevProps) {
@@ -36812,30 +36858,23 @@ function VitessceGridLayout(props) {
   const saveCurrentLayouts = useCallback(() => {
     setLastValidGridLayouts(gridLayouts);
   }, [gridLayouts]);
-  const layoutChildren = useMemo(() => {
+  const [layoutChildren, pageModeViews] = 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 contextValue = Object.fromEntries(gridComponentsValues.map((v) => {
+      const Component = getComponent(v.component);
+      return [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
+        }
+      ) }, v.uid)];
+    }));
+    return [gridComponentsValues.map((v) => {
       const Component = getComponent(v.component);
       const removeGridComponent = () => {
         onRemoveComponent(v.uid);
@@ -36851,9 +36890,9 @@ function VitessceGridLayout(props) {
           removeGridComponent
         }
       ) }, v.uid);
-    });
+    }), contextValue];
   }, [gridComponents, getComponent, onRemoveComponent, theme]);
-  return pageMode ? layoutChildren : gridLayouts && gridComponents && gridBreakpoints && gridCols && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return pageMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageModeViewContext.Provider, { value: pageModeViews, children: children2 }) : gridLayouts && gridComponents && gridBreakpoints && gridCols && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     style,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ResponsiveHeightGridLayout,
@@ -37236,18 +37275,22 @@ function useUint8ObsFeatureMatrix({ obsFeatureMatrix }) {
 }
 function useUint8FeatureSelection(expressionData) {
   return useMemo(() => {
-    if (expressionData && expressionData[0]) {
-      const extents = expressionData.map((arr) => extent(arr));
-      const normData = expressionData.map((arr, i) => {
-        const [min, max] = extents[i];
-        const ratio = 255 / (max - min);
-        return new Uint8Array(
-          arr.map((j) => Math.floor((j - min) * ratio))
-        );
-      });
-      return [normData, extents];
+    if ((expressionData == null ? void 0 : expressionData[0]) == null) {
+      return { normData: null, extents: null, missing: null };
     }
-    return [null, null];
+    const extents = expressionData.map((arr) => extent(arr));
+    const normData = expressionData.map((arr, i) => {
+      const [min, max] = extents[i];
+      const ratio = 255 / (max - min);
+      return new Uint8Array(
+        arr.map((j) => Math.floor((j - min) * ratio))
+      );
+    });
+    const missing = expressionData.map((arr) => {
+      const numMissing = arr.reduce((prev, curr) => Number.isNaN(curr) ? prev + 1 : prev, 0);
+      return numMissing / arr.length;
+    });
+    return { normData, extents, missing };
   }, [expressionData]);
 }
 function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, expressionData }) {
@@ -38007,14 +38050,6 @@ 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,
@@ -38049,14 +38084,6 @@ 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(() => {
@@ -38126,7 +38153,20 @@ function VitS(props) {
         retry: 2
       }
     }
+    // TODO: should the queryClient be shared? Or have an option to be shared
+    // (e.g., based on remountOnUidChange)?
   }), [configKey]);
+  const asyncFunctions = useMemo(
+    () => ({
+      queryClient,
+      asyncFunctions: 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, queryClient]
+  );
   useEffect(() => {
     if (success && !isEqual$1(configOrWarning, config2) && onConfigChange) {
       onConfigChange(configOrWarning);
@@ -40235,6 +40275,7 @@ export {
   useObsSegmentationsData,
   useObsSetsData,
   useObsSpotsData,
+  usePageModeView,
   useStyles as usePlotOptionsStyles,
   usePointMultiObsLabels,
   useReady,
@@ -40247,6 +40288,7 @@ export {
   useSegmentationMultiObsSets,
   useSetComponentHover,
   useSetComponentViewInfo,
+  useSetViewConfig,
   useSetWarning,
   useSpotMultiFeatureLabels,
   useSpotMultiFeatureSelection,
@@ -40255,6 +40297,7 @@ export {
   useUint8FeatureSelection,
   useUint8ObsFeatureMatrix,
   useUrls,
+  useViewConfig,
   useViewConfigStore,
   useViewConfigStoreApi,
   useVitessceContainer,

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

@@ -1 +1 @@
-{"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"}
+{"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,eAqNA"}

package/dist-tsc/VitS.js

@@ -54,11 +54,6 @@ export function VitS(props) {
     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
@@ -132,7 +127,17 @@ export function VitS(props) {
                 retry: 2,
             },
         },
+        // TODO: should the queryClient be shared? Or have an option to be shared
+        // (e.g., based on remountOnUidChange)?
     }), [configKey]);
+    const asyncFunctions = useMemo(() => ({
+        queryClient,
+        asyncFunctions: 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, queryClient]);
     // Emit the upgraded/initialized view config
     // to onConfigChange if necessary.
     useEffect(() => {

package/dist-tsc/contexts.d.ts

@@ -1,3 +1,5 @@
-export function useAsyncFunction(functionType: any): any;
+export function useAsyncFunction(functionType: any): (...args: any[]) => any;
+export function usePageModeView(uid: any): any;
 export const AsyncFunctionsContext: any;
+export const PageModeViewContext: any;
 //# sourceMappingURL=contexts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../src/contexts.js"],"names":[],"mappings":"AAQA,yDAGC;AARD,wCAGG"}
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../src/contexts.js"],"names":[],"mappings":"AAYA,6EAQC;AAcD,+CAKC;AApCD,wCAOG;AAYH,sCAGG"}

package/dist-tsc/contexts.js

@@ -1,10 +1,35 @@
 /* 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
+// {
+//   asyncFunctions: { [functionType: string]: asyncFunction },
+//   queryClient: QueryClient from react-query
+// }
+// asyncFunctions 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];
+    const origFunction = context?.asyncFunctions?.[functionType];
+    const queryClient = context?.queryClient;
+    // We use partial function application here, so that the caller
+    // does not need to worry about passing in the queryClient.
+    const partialFunction = (...args) => origFunction({ queryClient }, ...args);
+    return partialFunction;
+}
+export const PageModeViewContext = createContext({
+// Keys are view UIDs and values are
+// the corresponding React components.
+});
+function ensureComponent(component) {
+    if (!component) {
+        return () => null;
+    }
+    return component;
+}
+export function usePageModeView(uid) {
+    const context = useContext(PageModeViewContext);
+    // TODO: Is there any case where we would want to
+    // throw an error instead?
+    return ensureComponent(context?.[uid]);
 }

package/dist-tsc/hooks.d.ts

@@ -57,15 +57,24 @@ export function useUint8ObsFeatureMatrix({ obsFeatureMatrix }: {
 /**
  * Normalize a feature selection (data for selected
  * columns of an obsFeatureMatrix) to a Uint8Array.
- * @param {array|null} expressionData The expressionData
+ * @param {Float32Array[] | null} expressionData The expressionData
  * returned by the useFeatureSelection hook,
  * where each element corresponds to an
  * array of values for a selected feature.
- * @returns {array} A tuple [normData, extents] where
- * normData is an array of Uint8Arrays (or null), and extents is
- * an array of [min, max] values for each feature (or null).
+ * @returns {{
+ *  normData: Uint8Array[] | null,
+ *  extents: [number, number][] | null,
+ *  missing: number[]
+ * }} An object tuple {normData, extents, missing} where
+ * normData is an array of Uint8Arrays (or null),
+ * extents is an array of [min, max] values for each feature (or null), and
+ * missing is an array of numbers (between 0 and 1) for each feature (or null).
  */
-export function useUint8FeatureSelection(expressionData: array | null): array;
+export function useUint8FeatureSelection(expressionData: Float32Array[] | null): {
+    normData: Uint8Array[] | null;
+    extents: [number, number][] | null;
+    missing: number[];
+};
 export function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, expressionData }: {
     instanceObsIndex: any;
     matrixObsIndex: any;

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,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"}
+{"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;;;;;;;;;;;;;;;GAeG;AACH,yDAbW,YAAY,EAAE,GAAG,IAAI,GAInB;IACZ,QAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACjC,OAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACtC,OAAU,EAAE,MAAM,EAAE,CAAA;CACjB,CAwBH;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC"}

package/dist-tsc/hooks.js

@@ -185,26 +185,35 @@ export function useUint8ObsFeatureMatrix({ obsFeatureMatrix }) {
 /**
  * Normalize a feature selection (data for selected
  * columns of an obsFeatureMatrix) to a Uint8Array.
- * @param {array|null} expressionData The expressionData
+ * @param {Float32Array[] | null} expressionData The expressionData
  * returned by the useFeatureSelection hook,
  * where each element corresponds to an
  * array of values for a selected feature.
- * @returns {array} A tuple [normData, extents] where
- * normData is an array of Uint8Arrays (or null), and extents is
- * an array of [min, max] values for each feature (or null).
+ * @returns {{
+ *  normData: Uint8Array[] | null,
+ *  extents: [number, number][] | null,
+ *  missing: number[]
+ * }} An object tuple {normData, extents, missing} where
+ * normData is an array of Uint8Arrays (or null),
+ * extents is an array of [min, max] values for each feature (or null), and
+ * missing is an array of numbers (between 0 and 1) for each feature (or null).
  */
 export function useUint8FeatureSelection(expressionData) {
     return useMemo(() => {
-        if (expressionData && expressionData[0]) {
-            const extents = expressionData.map(arr => extent(arr));
-            const normData = expressionData.map((arr, i) => {
-                const [min, max] = extents[i];
-                const ratio = 255 / (max - min);
-                return new Uint8Array(arr.map(j => Math.floor((j - min) * ratio)));
-            });
-            return [normData, extents];
+        if (expressionData?.[0] == null) {
+            return { normData: null, extents: null, missing: null };
         }
-        return [null, null];
+        const extents = expressionData.map(arr => extent(arr));
+        const normData = expressionData.map((arr, i) => {
+            const [min, max] = extents[i];
+            const ratio = 255 / (max - min);
+            return new Uint8Array(arr.map(j => Math.floor((j - min) * ratio)));
+        });
+        const missing = expressionData.map((arr) => {
+            const numMissing = arr.reduce((prev, curr) => (Number.isNaN(curr) ? prev + 1 : prev), 0);
+            return numMissing / arr.length;
+        });
+        return { normData, extents, missing };
     }, [expressionData]);
 }
 export function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, expressionData }) {

package/dist-tsc/index.d.ts

@@ -3,12 +3,12 @@ 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 { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useViewConfig, useSetViewConfig, 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";
 export { usePointMultiObsLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useSegmentationMultiObsSets } from "./data-hooks-multilevel.js";
 export { AbstractLoader, AbstractTwoStepLoader, LoaderResult } from "./data/index.js";
 export { AbstractLoaderError, DatasetNotFoundError, LoaderNotFoundError, LoaderValidationError, DataSourceFetchError } from "./errors/index.js";
 export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles } from "./shared-plot-options/index.js";
+export { useAsyncFunction, usePageModeView } from "./contexts.js";
 //# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.js

@@ -3,7 +3,7 @@ export { TitleInfo } from './TitleInfo.js';
 export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
 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 { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useViewConfig, useSetViewConfig, 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';
 export { usePointMultiObsLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useSegmentationMultiObsSets, } from './data-hooks-multilevel.js';
 export { useHasLoader, } from './data-hook-utils.js';
@@ -11,4 +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';
+export { useAsyncFunction, usePageModeView } from './contexts.js';

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

@@ -222,6 +222,13 @@ export function useSetLoaders(): Function;
  * in the `useViewConfigStore` store.
  */
 export function useMergeCoordination(): Function;
+/**
+ * Obtain the current view config object from
+ * the global app state.
+ * @returns {object} The view config object
+ * in the `useViewConfigStore` store.
+ */
+export function useViewConfig(): object;
 /**
  * Obtain the view config setter function from
  * the global app state.

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,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;;;;aAPG,OAAO,kCAAkC,OAAO,sEAOO;AAC1D,mFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;mIAAwD;AACxD,kFAAwD;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,iCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,oEAIC;AAGD;;;;;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;AAvpCD;;;;aAPG,OAAO,kCAAkC,OAAO,sEAOO;AAC1D,mFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;mIAAwD;AACxD,kFAAwD;AAiIjD,yFA+KJ;AAOI,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}

package/dist-tsc/state/hooks.js

@@ -973,6 +973,15 @@ export function useSetLoaders() {
 export function useMergeCoordination() {
     return useViewConfigStore(state => state.mergeCoordination);
 }
+/**
+ * Obtain the current view config object from
+ * the global app state.
+ * @returns {object} The view config object
+ * in the `useViewConfigStore` store.
+ */
+export function useViewConfig() {
+    return useViewConfigStore(state => state.viewConfig);
+}
 /**
  * Obtain the view config setter function from
  * the global app state.

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,oDA8LC"}
+{"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAgBA,oDAwLC"}

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

@@ -3,6 +3,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
 import { isEqual } from 'lodash-es';
 import { getMaxRows, resolveLayout } from './layout-utils.js';
+import { PageModeViewContext } from '../contexts.js';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     componentDidUpdate(prevProps) {
@@ -97,38 +98,26 @@ export function VitessceGridLayout(props) {
     const saveCurrentLayouts = useCallback(() => {
         setLastValidGridLayouts(gridLayouts);
     }, [gridLayouts]);
-    const layoutChildren = useMemo(() => {
+    const [layoutChildren, pageModeViews] = 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 }) })));
-            });
-        }
+        const contextValue = Object.fromEntries(gridComponentsValues.map((v) => {
+            const Component = getComponent(v.component);
+            return [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 }) }, v.uid))];
+        }));
         // 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));
-        });
+        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));
+            }), contextValue];
     }, [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 })] }))));
+        ? (_jsx(PageModeViewContext.Provider, { value: pageModeViews, children: children })) : ((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/package.json

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

package/src/VitS.js

@@ -99,15 +99,6 @@ 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]);
 
@@ -196,8 +187,23 @@ export function VitS(props) {
         retry: 2,
       },
     },
+    // TODO: should the queryClient be shared? Or have an option to be shared
+    // (e.g., based on remountOnUidChange)?
   }), [configKey]);
 
+  const asyncFunctions = useMemo(
+    () => ({
+      queryClient,
+      asyncFunctions: 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, queryClient],
+  );
+
   // Emit the upgraded/initialized view config
   // to onConfigChange if necessary.
   useEffect(() => {

package/src/contexts.js

@@ -2,11 +2,39 @@
 import { createContext, useContext } from 'react';
 
 export const AsyncFunctionsContext = createContext({
-  // This will be an object where keys are function types
+  // {
+  //   asyncFunctions: { [functionType: string]: asyncFunction },
+  //   queryClient: QueryClient from react-query
+  // }
+  // asyncFunctions 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];
+  const origFunction = context?.asyncFunctions?.[functionType];
+  const queryClient = context?.queryClient;
+  // We use partial function application here, so that the caller
+  // does not need to worry about passing in the queryClient.
+  const partialFunction = (...args) => origFunction({ queryClient }, ...args);
+  return partialFunction;
+}
+
+export const PageModeViewContext = createContext({
+  // Keys are view UIDs and values are
+  // the corresponding React components.
+});
+
+function ensureComponent(component) {
+  if (!component) {
+    return () => null;
+  }
+  return component;
+}
+
+export function usePageModeView(uid) {
+  const context = useContext(PageModeViewContext);
+  // TODO: Is there any case where we would want to
+  // throw an error instead?
+  return ensureComponent(context?.[uid]);
 }

package/src/hooks.js

@@ -221,28 +221,37 @@ export function useUint8ObsFeatureMatrix({ obsFeatureMatrix }) {
 /**
  * Normalize a feature selection (data for selected
  * columns of an obsFeatureMatrix) to a Uint8Array.
- * @param {array|null} expressionData The expressionData
+ * @param {Float32Array[] | null} expressionData The expressionData
  * returned by the useFeatureSelection hook,
  * where each element corresponds to an
  * array of values for a selected feature.
- * @returns {array} A tuple [normData, extents] where
- * normData is an array of Uint8Arrays (or null), and extents is
- * an array of [min, max] values for each feature (or null).
+ * @returns {{
+ *  normData: Uint8Array[] | null,
+ *  extents: [number, number][] | null,
+ *  missing: number[]
+ * }} An object tuple {normData, extents, missing} where
+ * normData is an array of Uint8Arrays (or null),
+ * extents is an array of [min, max] values for each feature (or null), and
+ * missing is an array of numbers (between 0 and 1) for each feature (or null).
  */
 export function useUint8FeatureSelection(expressionData) {
   return useMemo(() => {
-    if (expressionData && expressionData[0]) {
-      const extents = expressionData.map(arr => extent(arr));
-      const normData = expressionData.map((arr, i) => {
-        const [min, max] = extents[i];
-        const ratio = 255 / (max - min);
-        return new Uint8Array(
-          arr.map(j => Math.floor((j - min) * ratio)),
-        );
-      });
-      return [normData, extents];
+    if (expressionData?.[0] == null) {
+      return { normData: null, extents: null, missing: null };
     }
-    return [null, null];
+    const extents = expressionData.map(arr => extent(arr));
+    const normData = expressionData.map((arr, i) => {
+      const [min, max] = extents[i];
+      const ratio = 255 / (max - min);
+      return new Uint8Array(
+        arr.map(j => Math.floor((j - min) * ratio)),
+      );
+    });
+    const missing = expressionData.map((arr) => {
+      const numMissing = arr.reduce((prev, curr) => (Number.isNaN(curr) ? prev + 1 : prev), 0);
+      return numMissing / arr.length;
+    });
+    return { normData, extents, missing };
   }, [expressionData]);
 }
 

package/src/index.js

@@ -35,6 +35,8 @@ export {
   useMatchingLoader,
   useViewConfigStore,
   useViewConfigStoreApi,
+  useViewConfig,
+  useSetViewConfig,
   useComponentHover,
   useSetComponentHover,
   useComponentViewInfo,
@@ -105,4 +107,4 @@ export {
   usePlotOptionsStyles,
 } from './shared-plot-options/index.js';
 export { logConfig } from './view-config-utils.js';
-export { useAsyncFunction } from './contexts.js';
+export { useAsyncFunction, usePageModeView } from './contexts.js';

package/src/state/hooks.js

@@ -1091,6 +1091,16 @@ export function useMergeCoordination() {
   return useViewConfigStore(state => state.mergeCoordination);
 }
 
+/**
+ * Obtain the current view config object from
+ * the global app state.
+ * @returns {object} The view config object
+ * in the `useViewConfigStore` store.
+ */
+export function useViewConfig() {
+  return useViewConfigStore(state => state.viewConfig);
+}
+
 /**
  * Obtain the view config setter function from
  * the global app state.
@@ -1103,6 +1113,7 @@ export function useSetViewConfig(viewConfigStoreApi) {
   return setViewConfig;
 }
 
+
 /**
  * Obtain the component hover value from
  * the global app state.

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

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
 import { isEqual } from 'lodash-es';
 import { getMaxRows, resolveLayout } from './layout-utils.js';
+import { PageModeViewContext } from '../contexts.js';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -122,37 +123,28 @@ export function VitessceGridLayout(props) {
     setLastValidGridLayouts(gridLayouts);
   }, [gridLayouts]);
 
-  const layoutChildren = useMemo(() => {
+  const [layoutChildren, pageModeViews] = 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>
-        ));
-      });
-    }
+
+    const contextValue = Object.fromEntries(gridComponentsValues.map((v) => {
+      const Component = getComponent(v.component);
+      return [v.uid, () => (
+        <div key={v.uid} 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) => {
+    return [gridComponentsValues.map((v) => {
       const Component = getComponent(v.component);
       const removeGridComponent = () => {
         onRemoveComponent(v.uid);
@@ -169,12 +161,15 @@ export function VitessceGridLayout(props) {
           />
         </div>
       );
-    });
+    }), contextValue];
   }, [gridComponents, getComponent, onRemoveComponent, theme]);
 
   return (pageMode
-    ? layoutChildren
-    : ((gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
+    ? (
+      <PageModeViewContext.Provider value={pageModeViews}>
+        {children}
+      </PageModeViewContext.Provider>
+    ) : ((gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
       <>
         {style}
         <ResponsiveHeightGridLayout