@vitessce/vit-s 3.0.0 → 3.1.0

package/src/data-hook-utils.js

@@ -1,7 +1,12 @@
-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,
@@ -49,6 +54,31 @@ 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.
@@ -58,8 +88,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
@@ -68,54 +96,50 @@ 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,
+  dataType, loaders, dataset, isRequired,
   coordinationSetters, initialCoordinationValues, matchOn,
 ) {
-  const [data, setData] = useState({});
-  const [status, setStatus] = useState(STATUS.LOADING);
-
   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]);
+  }, [error, setWarning]);
 
-  return [data, status];
+  const dataStatus = isFetching ? STATUS.LOADING : status;
+  return [loadedData, dataStatus, urls];
 }
 
 /**
@@ -127,8 +151,6 @@ export function useDataType(
  * 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
@@ -142,51 +164,64 @@ export function useDataType(
  * number of items in the cells object.
  */
 export function useDataTypeMulti(
-  dataType, loaders, dataset, addUrl, isRequired,
+  dataType, loaders, dataset, isRequired,
   coordinationSetters, initialCoordinationValues, matchOnObj,
 ) {
-  const [data, setData] = useState({});
-  const [status, setStatus] = useState(STATUS.LOADING);
-
+  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);
-          });
-        }
+    dataQueries
+      .map(q => q.data?.coordinationValues)
+      .filter(v => Boolean(v))
+      .forEach((coordinationValues) => {
+        initCoordinationSpace(
+          coordinationValues,
+          coordinationSetters,
+          initialCoordinationValues,
+        );
       });
-    } else {
-      setData({});
-      if (isRequired) {
-        warn(new LoaderNotFoundError(loaders, dataset, dataType, matchOnObj), setWarning);
-        setStatus(STATUS.ERROR);
-      } else {
-        setStatus(STATUS.SUCCESS);
-      }
-    }
+  // Deliberate dependency omissions: use indirect dependencies for efficiency.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [matchingLoaders]);
+  }, [isSuccess]);
 
-  return [data, status];
+  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
+  }, [anyError, setWarning]);
+
+  // Convert data to object keyed by scopeKey.
+  const data = useMemo(() => fromEntries(
+    matchOnEntries.map(([scopeKey], i) => ([scopeKey, dataQueries[i].data?.data])),
+  // Deliberate dependency omissions: matchOnEntries, since dataQueries depends on it.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  ), [dataQueries]);
+  return [data, dataStatus];
 }
 
 export function useHasLoader(loaders, dataset, dataType, matchOn) {