@vitessce/vit-s 3.0.0 → 3.1.0

package/dist-tsc/VitS.d.ts

@@ -13,10 +13,14 @@
  * updates. Optional.
  * @param {function} props.onLoaderChange A callback for loader
  * updates. Optional.
+ * @param {boolean} props.validateConfig Whether to validate or not. Only to be
+ * set to false in controlled component situations, where bypassing validation
+ * is required for performance, and the parent knows the config
+ * is already valid (e.g., it originated from onConfigChange). By default, true.
  * @param {boolean} props.validateOnConfigChange Whether to validate
  * against the view config schema when publishing changes. Use for debugging
  * purposes, as this may have a performance impact. By default, false.
- * @param {undefined|string} props.uid A unique identifier for this Vitessce instance,
+ * @param {null|string} props.uid A unique identifier for this Vitessce instance,
  * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
  * of a CSS class name string.
  * @param {array} props.viewTypes Plugin view types.
@@ -34,8 +38,9 @@ export function VitS(props: {
     onWarn: Function;
     onConfigChange: Function;
     onLoaderChange: Function;
+    validateConfig: boolean;
     validateOnConfigChange: boolean;
-    uid: undefined | string;
+    uid: null | string;
     viewTypes: array;
     fileTypes: array;
     jointFileTypes: array;

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

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;IAzByB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,sBAAsB,EAArC,OAAO;IAGiB,GAAG,EAA3B,SAAS,GAAC,MAAM;IAGH,SAAS;IACT,SAAS;IACT,cAAc;IACd,iBAAiB;IACX,OAAO,EAA1B,IAAI,GAAC,MAAM;gBAiJrB"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH;IA7ByB,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;IAGE,SAAS;IACT,SAAS;IACT,cAAc;IACd,iBAAiB;IACX,OAAO,EAA1B,IAAI,GAAC,MAAM;gBAkLrB"}

package/dist-tsc/VitS.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo } from 'react';
-import { ThemeProvider, StylesProvider, createGenerateClassName, } from '@material-ui/core/es/styles/index.js';
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { ThemeProvider, StylesProvider, } from '@material-ui/core';
+import { QueryClient, QueryClientProvider, } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
-import { META_VERSION } from '@vitessce/constants-internal';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
 import { muiTheme } from './shared-mui/styles.js';
 import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks.js';
 import VitessceGrid from './VitessceGrid.js';
 import { Warning } from './Warning.js';
 import CallbackPublisher from './CallbackPublisher.js';
-import { initialize, } from './view-config-utils.js';
-function logConfig(config, name) {
-    console.groupCollapsed(`🚄 Vitessce (${META_VERSION.version}) ${name}`);
-    console.info(`data:,${JSON.stringify(config)}`);
-    console.info(JSON.stringify(config, null, 2));
-    console.groupEnd();
-}
+import { initialize, logConfig, } from './view-config-utils.js';
+import { createLoaders } from './vitessce-grid-utils.js';
+import { createGenerateClassName } from './mui-utils.js';
 /**
  * The Vitessce component.
  * @param {object} props
@@ -31,10 +27,14 @@ function logConfig(config, name) {
  * updates. Optional.
  * @param {function} props.onLoaderChange A callback for loader
  * updates. Optional.
+ * @param {boolean} props.validateConfig Whether to validate or not. Only to be
+ * set to false in controlled component situations, where bypassing validation
+ * is required for performance, and the parent knows the config
+ * is already valid (e.g., it originated from onConfigChange). By default, true.
  * @param {boolean} props.validateOnConfigChange Whether to validate
  * against the view config schema when publishing changes. Use for debugging
  * purposes, as this may have a performance impact. By default, false.
- * @param {undefined|string} props.uid A unique identifier for this Vitessce instance,
+ * @param {null|string} props.uid A unique identifier for this Vitessce instance,
  * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
  * of a CSS class name string.
  * @param {array} props.viewTypes Plugin view types.
@@ -45,19 +45,17 @@ function logConfig(config, name) {
  * provided by the parent.
  */
 export function VitS(props) {
-    const { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateOnConfigChange = false, isBounded = false, uid, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, warning, } = props;
+    const { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, warning, } = props;
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
     const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
     const jointFileTypes = useMemo(() => (jointFileTypesProp || []), [jointFileTypesProp]);
     const coordinationTypes = useMemo(() => (coordinationTypesProp || []), [coordinationTypesProp]);
-    const generateClassName = useMemo(() => createGenerateClassName({
-        disableGlobal: false,
-        // Avoid conflicts with portal-ui MUI class names,
-        // and allow setting a UID.
-        productionPrefix: (uid ? `vit${uid}` : 'vit'),
-    }), [uid]);
-    const configUid = config?.uid;
+    const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
     const configVersion = config?.version;
+    // If config.uid exists, then use it for hook dependencies to detect changes
+    // (controlled component case). If not, then use the config object itself
+    // and assume the un-controlled component case.
+    const configKey = config?.uid || config;
     const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(fileTypes, jointFileTypes, coordinationTypes, viewTypes), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
     // Process the view config and memoize the result:
     // - Validate.
@@ -69,10 +67,13 @@ export function VitS(props) {
             return [warning, false];
         }
         logConfig(config, 'input view config');
+        if (!validateConfig) {
+            return [config, true];
+        }
         const result = latestConfigSchema.safeParse(config);
         if (result.success) {
             const upgradedConfig = result.data;
-            logConfig(upgradedConfig, 'upgraded view config');
+            logConfig(upgradedConfig, 'parsed view config');
             // Perform second round of parsing against plugin-specific config schema.
             const pluginSpecificResult = pluginSpecificConfigSchema.safeParse(upgradedConfig);
             // Initialize the view config according to the initStrategy.
@@ -106,7 +107,16 @@ export function VitS(props) {
                 unformatted: result.error.message,
             }, result.success];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configUid, configVersion, pluginSpecificConfigSchema, warning]);
+    }, [configKey, configVersion, pluginSpecificConfigSchema, warning]);
+    const queryClient = useMemo(() => new QueryClient({
+        // Reference: https://tanstack.com/query/latest/docs/react/guides/window-focus-refetching
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: 2,
+            },
+        },
+    }), [configKey]);
     // Emit the upgraded/initialized view config
     // to onConfigChange if necessary.
     useEffect(() => {
@@ -114,6 +124,16 @@ export function VitS(props) {
             onConfigChange(configOrWarning);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [success, configUid, configOrWarning, onConfigChange]);
-    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(ViewConfigProvider, { createStore: createViewConfigStore, children: _jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [_jsx(VitessceGrid, { viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded }), _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 }) }) }));
+    }, [success, configKey, configOrWarning, onConfigChange]);
+    // Initialize the view config and loaders in the global state.
+    const createViewConfigStoreClosure = useCallback(() => {
+        if (success) {
+            const loaders = createLoaders(configOrWarning.datasets, configOrWarning.description, fileTypes, coordinationTypes);
+            return createViewConfigStore(loaders, configOrWarning);
+        }
+        // No config found, so clear the loaders.
+        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, 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 }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }, configKey) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA0BA;;;;;;;;;;;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;gBAiFlC"}
+{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA0BA;;;;;;;;;;;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;gBAuFlC"}

package/dist-tsc/VitessceGrid.js

@@ -23,7 +23,7 @@ const margin = 5;
  * @param {PluginCoordinationType[]} props.coordinationTypes
  */
 export default function VitessceGrid(props) {
-    const { rowHeight: initialRowHeight, config, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, } = props;
+    const { success, configKey, rowHeight: initialRowHeight, config, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, } = props;
     const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
     const onResize = useEmitGridResize();
     const [componentWidth] = useClosestVitessceContainerSize(containerRef);
@@ -45,16 +45,19 @@ export default function VitessceGrid(props) {
         }
     }, [changeLayout, componentWidth]);
     // Update the view config and loaders in the global state.
+    // This effect is needed for the controlled component case in which
+    // the store has already been initialized with a view config,
+    // and we want to replace it with a new view config.
     useEffect(() => {
-        if (config) {
-            setViewConfig(config);
-            const loaders = createLoaders(config.datasets, config.description, fileTypes, coordinationTypes);
-            setLoaders(loaders);
+        let newLoaders = null;
+        let newConfig = null;
+        if (success) {
+            newLoaders = createLoaders(config.datasets, config.description, fileTypes, coordinationTypes);
+            newConfig = config;
         }
-        else {
-            // No config found, so clear the loaders.
-            setLoaders({});
-        }
-    }, [config, setViewConfig, setLoaders, fileTypes, coordinationTypes]);
-    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), children: layout && (_jsx(VitessceGridLayout, { 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 })) }));
+        setViewConfig(newConfig);
+        setLoaders(newLoaders);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [success, configKey]);
+    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), children: layout ? (_jsx(VitessceGridLayout, { 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 }));
 }

package/dist-tsc/VitessceGrid.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach } from 'vitest';
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
 import VitessceGrid from './VitessceGrid.js';
@@ -27,13 +27,16 @@ describe('VitessceGrid.js', () => {
                     },
                 ],
             };
+            function createViewConfigStoreClosure() {
+                return createViewConfigStore(null, config);
+            }
             function FakeComponent() {
                 return _jsx("p", { children: "FakeComponent!" });
             }
             const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
             const fileTypes = [];
             const coordinationTypes = [];
-            render(_jsx(ViewConfigProvider, { createStore: createViewConfigStore, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsx(VitessceGrid, { config: config, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes }) }) }));
+            render(_jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsx(VitessceGrid, { success: true, configKey: null, config: config, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes }) }) }));
             expect(await screen.findByText('FakeComponent!'));
         });
     });

package/dist-tsc/Warning.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
     row: {
         flexGrow: '1',
     },
-    card: {
+    warningCard: {
         border: `1px solid ${theme.palette.cardBorder}`,
         flex: '1 1 auto',
         minHeight: '1px',
@@ -41,5 +41,5 @@ const useStyles = makeStyles(theme => ({
 export function Warning(props) {
     const { title, preformatted, unformatted, } = props;
     const classes = useStyles();
-    return (_jsx("div", { className: VITESSCE_CONTAINER, children: _jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: _jsx("div", { className: classes.row, children: _jsxs("div", { className: classes.card, children: [_jsx("h1", { children: title }), preformatted ? (_jsx("pre", { children: preformatted })) : null, _jsx("p", { children: unformatted })] }) }) }) }));
+    return (_jsx("div", { className: VITESSCE_CONTAINER, children: _jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: _jsx("div", { className: classes.row, children: _jsxs("div", { className: classes.warningCard, children: [_jsx("h1", { children: title }), preformatted ? (_jsx("pre", { children: preformatted })) : null, _jsx("p", { children: unformatted })] }) }) }) }));
 }

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

@@ -1,7 +1,12 @@
 export default class LoaderResult {
-    constructor(data: any, url: any, coordinationValues?: null);
+    /**
+     * @param {*} data
+     * @param {object[]|string|null} url Single URL or array of { url, name } objects.
+     * @param {object} coordinationValues
+     */
+    constructor(data: any, url: object[] | string | null, coordinationValues?: object);
     data: any;
-    url: any;
-    coordinationValues: any;
+    url: string | object[] | null;
+    coordinationValues: object;
 }
 //# sourceMappingURL=LoaderResult.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoaderResult.d.ts","sourceRoot":"","sources":["../../src/data/LoaderResult.js"],"names":[],"mappings":"AACA;IACE,4DAIC;IAHC,UAAgB;IAChB,SAAc;IACd,wBAA4C;CAE/C"}
+{"version":3,"file":"LoaderResult.d.ts","sourceRoot":"","sources":["../../src/data/LoaderResult.js"],"names":[],"mappings":"AACA;IACE;;;;OAIG;IACH,4BAHW,MAAM,EAAE,GAAC,MAAM,GAAC,IAAI,uBACpB,MAAM,EAMhB;IAHC,UAAgB;IAChB,8BAAc;IACd,2BAA4C;CAE/C"}

package/dist-tsc/data/LoaderResult.js

@@ -1,4 +1,9 @@
 export default class LoaderResult {
+    /**
+     * @param {*} data
+     * @param {object[]|string|null} url Single URL or array of { url, name } objects.
+     * @param {object} coordinationValues
+     */
     constructor(data, url, coordinationValues = null) {
         this.data = data;
         this.url = url;

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

@@ -25,8 +25,6 @@ export function initCoordinationSpace(values: object, setters: object, initialVa
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @param {object} coordinationSetters Object where
@@ -35,11 +33,11 @@ export function initCoordinationSpace(values: object, setters: object, initialVa
  * @param {object} initialCoordinationValues Object where
  * keys are coordination type names with the prefix 'initialize',
  * values are initialization preferences as boolean values.
- * @returns {array} [cells, cellsCount] where
+ * @returns {array} [data, status, urls] where
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
-export function useDataType(dataType: any, loaders: object, dataset: string, addUrl: Function, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOn: any): array;
+export function useDataType(dataType: any, loaders: object, dataset: string, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOn: any): array;
 /**
  * Get data from a cells data type loader,
  * updating "ready" and URL state appropriately.
@@ -49,8 +47,6 @@ export function useDataType(dataType: any, loaders: object, dataset: string, add
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @param {object} coordinationSetters Object where
@@ -63,7 +59,7 @@ export function useDataType(dataType: any, loaders: object, dataset: string, add
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
-export function useDataTypeMulti(dataType: any, loaders: object, dataset: string, addUrl: Function, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOnObj: any): array;
+export function useDataTypeMulti(dataType: any, loaders: object, dataset: string, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOnObj: any): array;
 export function useHasLoader(loaders: any, dataset: any, dataType: any, matchOn: any): boolean;
 import { AbstractLoaderError } from "./errors/index.js";
 //# sourceMappingURL=data-hook-utils.d.ts.map

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":"AASA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AAGD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,oDAlBW,MAAM,WAEN,MAAM,gCAIN,OAAO,uBAEP,MAAM,6BAGN,MAAM,uBAmDhB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,yDAlBW,MAAM,WAEN,MAAM,gCAIN,OAAO,uBAEP,MAAM,6BAGN,MAAM,0BAqDhB;AAED,+FAGC"}
+{"version":3,"file":"data-hook-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-utils.js"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AA4BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,uBA+ChB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,0BAkEhB;AAED,+FAGC"}

package/dist-tsc/data-hook-utils.js

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
-import { capitalize } from '@vitessce/utils';
+import { useEffect, useMemo } from 'react';
+import { capitalize, fromEntries } from '@vitessce/utils';
 import { STATUS } from '@vitessce/constants-internal';
-import { useMatchingLoader, useMatchingLoaders, useSetWarning } from './state/hooks.js';
+import { useQuery, useQueries } from '@tanstack/react-query';
+import { getMatchingLoader, useMatchingLoader, useSetWarning, } from './state/hooks.js';
 import { AbstractLoaderError, LoaderNotFoundError, } from './errors/index.js';
 /**
  * Warn via publishing to the console
@@ -42,6 +43,32 @@ export function initCoordinationSpace(values, setters, initialValues) {
         }
     });
 }
+async function dataQueryFn(ctx) {
+    const { placeholderObject, loaders } = ctx.meta;
+    // This ordering of the queryKey must match.
+    const [dataset, dataType, matchOn, isRequired] = ctx.queryKey;
+    const loader = getMatchingLoader(loaders, dataset, dataType, matchOn);
+    if (loader) {
+        // TODO: can cacheing logic be removed from all loaders?
+        const payload = await loader.load();
+        if (!payload)
+            return placeholderObject; // TODO: throw error instead?
+        const { data, url, coordinationValues } = payload;
+        // Status: success
+        // Array of objects like  { url, name }.
+        const urls = Array.isArray(url) ? url : [{ url, name: dataType }];
+        return { data, coordinationValues, urls };
+    }
+    // No loader was found.
+    if (isRequired) {
+        // Status: error
+        throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    }
+    else {
+        // Status: success
+        return { data: placeholderObject };
+    }
+}
 /**
  * Get data from a cells data type loader,
  * updating "ready" and URL state appropriately.
@@ -51,8 +78,6 @@ export function initCoordinationSpace(values, setters, initialValues) {
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @param {object} coordinationSetters Object where
@@ -61,48 +86,39 @@ export function initCoordinationSpace(values, setters, initialValues) {
  * @param {object} initialCoordinationValues Object where
  * keys are coordination type names with the prefix 'initialize',
  * values are initialization preferences as boolean values.
- * @returns {array} [cells, cellsCount] where
+ * @returns {array} [data, status, urls] where
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
-export function useDataType(dataType, loaders, dataset, addUrl, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
-    const [data, setData] = useState({});
-    const [status, setStatus] = useState(STATUS.LOADING);
+export function useDataType(dataType, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
     const setWarning = useSetWarning();
-    const loader = useMatchingLoader(loaders, dataset, dataType, matchOn);
+    const placeholderObject = useMemo(() => ({}), []);
+    const dataQuery = useQuery({
+        // TODO: only enable when loaders has been initialized?
+        structuralSharing: false,
+        placeholderData: placeholderObject,
+        // Include the hook name in the queryKey to prevent the case in which an identical queryKey
+        // in a different hook would cause an accidental cache hit.
+        queryKey: [dataset, dataType, matchOn, isRequired, 'useDataType'],
+        // Query function should return an object
+        // { data, dataKey } where dataKey is the loaded gene selection.
+        queryFn: dataQueryFn,
+        meta: { loaders, placeholderObject },
+    });
+    const { data, status, isFetching, error } = dataQuery;
+    const loadedData = data?.data || placeholderObject;
+    const coordinationValues = data?.coordinationValues;
+    const urls = data?.urls;
     useEffect(() => {
-        if (loader) {
-            setStatus(STATUS.LOADING);
-            loader.load().catch(e => warn(e, setWarning)).then((payload) => {
-                if (!payload)
-                    return;
-                const { data: payloadData, url, coordinationValues } = payload;
-                setData(payloadData);
-                if (Array.isArray(url)) {
-                    url.forEach(([val, name]) => {
-                        addUrl(val, name);
-                    });
-                }
-                else if (url) {
-                    addUrl(url, dataType);
-                }
-                initCoordinationSpace(coordinationValues, coordinationSetters, initialCoordinationValues);
-                setStatus(STATUS.SUCCESS);
-            });
-        }
-        else {
-            setData({});
-            if (isRequired) {
-                warn(new LoaderNotFoundError(loaders, dataset, dataType, matchOn), setWarning);
-                setStatus(STATUS.ERROR);
-            }
-            else {
-                setStatus(STATUS.SUCCESS);
-            }
+        initCoordinationSpace(coordinationValues, coordinationSetters, initialCoordinationValues);
+    }, [coordinationValues]);
+    useEffect(() => {
+        if (error) {
+            warn(error, setWarning);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [loader]);
-    return [data, status];
+    }, [error, setWarning]);
+    const dataStatus = isFetching ? STATUS.LOADING : status;
+    return [loadedData, dataStatus, urls];
 }
 /**
  * Get data from a cells data type loader,
@@ -113,8 +129,6 @@ export function useDataType(dataType, loaders, dataset, addUrl, isRequired, coor
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @param {object} coordinationSetters Object where
@@ -127,45 +141,49 @@ export function useDataType(dataType, loaders, dataset, addUrl, isRequired, coor
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
-export function useDataTypeMulti(dataType, loaders, dataset, addUrl, isRequired, coordinationSetters, initialCoordinationValues, matchOnObj) {
-    const [data, setData] = useState({});
-    const [status, setStatus] = useState(STATUS.LOADING);
+export function useDataTypeMulti(dataType, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOnObj) {
+    const placeholderObject = useMemo(() => ({}), []);
     const setWarning = useSetWarning();
-    const matchingLoaders = useMatchingLoaders(loaders, dataset, dataType, matchOnObj);
+    const matchOnEntries = matchOnObj ? Object.entries(matchOnObj) : [];
+    const dataQueries = useQueries({
+        // eslint-disable-next-line no-unused-vars
+        queries: matchOnEntries.map(([scopeKey, matchOn]) => ({
+            structuralSharing: false,
+            placeholderData: placeholderObject,
+            // Query key should match useDataType for shared cacheing
+            // and correctness of dataQueryFn.
+            queryKey: [dataset, dataType, matchOn, isRequired, 'useDataType'],
+            // Query function should return an object
+            // { data, dataKey } where dataKey is the loaded gene selection.
+            queryFn: dataQueryFn,
+            meta: { loaders, placeholderObject },
+        })),
+    });
+    const anyLoading = dataQueries.some(q => q.isFetching);
+    const anyError = dataQueries.some(q => q.isError);
+    // eslint-disable-next-line no-nested-ternary
+    const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
+    const isSuccess = dataStatus === STATUS.SUCCESS;
     useEffect(() => {
-        if (matchingLoaders) {
-            setStatus(STATUS.LOADING);
-            Object.entries(matchingLoaders).forEach(([scopeKey, loader]) => {
-                if (loader) {
-                    loader.load().catch(e => warn(e, setWarning)).then((payload) => {
-                        if (!payload)
-                            return;
-                        const { data: payloadData, url, coordinationValues } = payload;
-                        setData((prev) => {
-                            // eslint-disable-next-line no-param-reassign
-                            prev[scopeKey] = payloadData;
-                            return prev;
-                        });
-                        addUrl(url, dataType);
-                        initCoordinationSpace(coordinationValues, coordinationSetters, initialCoordinationValues);
-                        setStatus(STATUS.SUCCESS);
-                    });
-                }
-            });
-        }
-        else {
-            setData({});
-            if (isRequired) {
-                warn(new LoaderNotFoundError(loaders, dataset, dataType, matchOnObj), setWarning);
-                setStatus(STATUS.ERROR);
-            }
-            else {
-                setStatus(STATUS.SUCCESS);
-            }
-        }
+        dataQueries
+            .map(q => q.data?.coordinationValues)
+            .filter(v => Boolean(v))
+            .forEach((coordinationValues) => {
+            initCoordinationSpace(coordinationValues, coordinationSetters, initialCoordinationValues);
+        });
+        // Deliberate dependency omissions: use indirect dependencies for efficiency.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSuccess]);
+    useEffect(() => {
+        dataQueries.map(q => q.error).filter(e => Boolean(e)).forEach((error) => {
+            warn(error, setWarning);
+        });
+        // Deliberate dependency omissions: use indirect dependencies for efficiency.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchingLoaders]);
-    return [data, status];
+    }, [anyError, setWarning]);
+    // Convert data to object keyed by scopeKey.
+    const data = useMemo(() => fromEntries(matchOnEntries.map(([scopeKey], i) => ([scopeKey, dataQueries[i].data?.data]))), [dataQueries]);
+    return [data, dataStatus];
 }
 export function useHasLoader(loaders, dataset, dataType, matchOn) {
     const loader = useMatchingLoader(loaders, dataset, dataType, matchOn);

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

@@ -17,8 +17,6 @@ export function useDescription(loaders: object, dataset: string): array;
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @param {object} coordinationSetters Object where
@@ -31,16 +29,16 @@ export function useDescription(loaders: object, dataset: string): array;
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
-export function useObsEmbeddingData(loaders: object, dataset: string, addUrl: Function, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOn: any): array;
-export function useObsLocationsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useObsLabelsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useObsSegmentationsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useObsSetsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useObsFeatureMatrixData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useFeatureLabelsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useImageData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useGenomicProfilesData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
-export function useNeighborhoodsData(loaders: any, dataset: any, addUrl: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useObsEmbeddingData(loaders: object, dataset: string, isRequired: boolean, coordinationSetters: object, initialCoordinationValues: object, matchOn: any): array;
+export function useObsLocationsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useObsLabelsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useObsSegmentationsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useObsSetsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useObsFeatureMatrixData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useFeatureLabelsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useImageData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useGenomicProfilesData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useNeighborhoodsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
 /**
  * Get data from the expression matrix data type loader for a given gene selection.
  * Throw warnings if the data is marked as required.
@@ -66,12 +64,10 @@ export function useFeatureSelection(loaders: object, dataset: string, isRequired
  * datasets and data types to loader instances.
  * @param {string} dataset The key for a dataset,
  * used to identify which loader to use.
- * @param {function} addUrl A function to call to update
- * the URL list.
  * @param {boolean} isRequired Should a warning be thrown if
  * loading is unsuccessful?
  * @returns {object} [attrs] { rows, cols } object containing cell and gene names.
  */
-export function useObsFeatureMatrixIndices(loaders: object, dataset: string, addUrl: Function, isRequired: boolean, matchOn: any): object;
-export function useMultiObsLabels(coordinationScopes: any, obsType: any, loaders: any, dataset: any, addUrl: any): any[];
+export function useObsFeatureMatrixIndices(loaders: object, dataset: string, isRequired: boolean, matchOn: any): object;
+export function useMultiObsLabels(coordinationScopes: any, obsType: any, loaders: any, dataset: any): any[];
 //# sourceMappingURL=data-hooks.d.ts.map

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":"AAaA;;;;;;;;GAQG;AACH,wCAPW,MAAM,WAEN,MAAM,SAsBhB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,6CAlBW,MAAM,WAEN,MAAM,gCAIN,OAAO,uBAEP,MAAM,6BAGN,MAAM,uBAgBhB;AAED,6KASC;AAED,0KASC;AAED,iLASC;AAED,wKASC;AAED,iLASC;AAED,8KASC;AAED,sKASC;AAED,gLASC;AAED,8KASC;AAED;;;;;;;;;;;;;GAaG;AACH,6CAVW,MAAM,WAEN,MAAM,cAEN,OAAO,aAEP,OAAO,uBA8EjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,oDAVW,MAAM,WAEN,MAAM,gCAIN,OAAO,iBAEL,MAAM,CAsDlB;AAED,yHAmBC"}
+{"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,gKASC;AAED,6JASC;AAED,oKASC;AAED,2JASC;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,CAyElB;AAED,4GAoBC"}