@vitessce/vit-s 3.6.7 → 3.6.8

package/src/TitleInfo.js

@@ -1,12 +1,19 @@
 import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
-import { makeStyles, MenuItem, IconButton, Link,
+import {
+  makeStyles,
+  MenuItem,
+  IconButton,
+  Link,
+  List,
+  Alert,
   CloudDownload as CloudDownloadIcon,
   ArrowDropDown as ArrowDropDownIcon,
   ArrowDropUp as ArrowDropUpIcon,
   Settings as SettingsIcon,
   Close as CloseIcon,
   Help as HelpIcon,
+  Warning as WarningIcon,
 } from '@vitessce/styles';
 
 import { TOOLTIP_ANCESTOR } from './classNames.js';
@@ -54,6 +61,18 @@ const useStyles = makeStyles()(theme => ({
     boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
     border: '10px solid grey',
   },
+  errorList: {
+    width: '100%',
+    maxWidth: 300,
+    padding: '0 4px',
+  },
+  errorListAlert: {
+    marginTop: '2px',
+    marginBottom: '2px',
+  },
+  errorListItemText: {
+    fontSize: '12px',
+  },
 }));
 
 function SettingsIconWithArrow({ open }) {
@@ -78,6 +97,7 @@ function PlotOptions(props) {
       buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
+      title="Plot Options"
       aria-label="Open plot options menu"
     >
       {options}
@@ -106,6 +126,7 @@ function DownloadOptions(props) {
       buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
+      title="Download Options"
       aria-label="Open download options menu"
     >
       {urls.map(({ url, name }) => (
@@ -130,6 +151,7 @@ function HelpButton(props) {
       buttonIcon={<HelpIcon />}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
+      title="Help Info"
       aria-label="Open help info"
       withPaper={false}
     >
@@ -138,6 +160,38 @@ function HelpButton(props) {
   );
 }
 
+function ErrorInfo(props) {
+  const { errors } = props;
+  const [open, setOpen] = useState(false);
+  const { classes } = useStyles();
+  return (
+    <PopperMenu
+      open={open}
+      setOpen={setOpen}
+      buttonIcon={<WarningIcon color="error" />}
+      buttonClassName={classes.iconButton}
+      placement="bottom-end"
+      title="View Errors"
+      aria-label="Open error info"
+    >
+      <List className={classes.errorList}>
+        {errors.map((error, index) => (
+          <Alert
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${index}-${error.name}-${error.message}`}
+            severity="error"
+            className={classes.errorListAlert}
+            slots={{ message: 'span' }}
+            slotProps={{ message: { className: classes.errorListItemText } }}
+          >
+            {error.name}: {error.message}
+          </Alert>
+        ))}
+      </List>
+    </PopperMenu>
+  );
+}
+
 
 function ClosePaneButton(props) {
   const { removeGridComponent } = props;
@@ -147,7 +201,7 @@ function ClosePaneButton(props) {
       onClick={removeGridComponent}
       size="small"
       className={classes.iconButton}
-      title="close"
+      title="Close View"
       aria-label="Close panel button"
     >
       <CloseIcon />
@@ -159,9 +213,11 @@ export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,
     isReady, options, closeButtonVisible = true, downloadButtonVisible = true,
-    helpText, withPadding = true,
+    helpText, withPadding = true, errors: errorsProp,
   } = props;
 
+  const errors = errorsProp?.filter(Boolean);
+
   const { classes } = useTitleStyles();
 
   return (
@@ -183,6 +239,11 @@ export function TitleInfo(props) {
               urls={urls}
             />
           ) : null}
+          {Array.isArray(errors) && errors.length > 0 ? (
+            <ErrorInfo
+              errors={errors}
+            />
+          ) : null}
           {helpText ? (
             <HelpButton
               helpText={helpText}

package/src/VitS.js

@@ -5,12 +5,14 @@ import {
   createCache,
 } from '@vitessce/styles';
 import {
+  QueryCache,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
 import {
+  log,
   setLogLevel, setDebugMode,
   DEFAULT_LOG_LEVEL, DEFAULT_DEBUG_MODE,
 } from '@vitessce/globals';
@@ -21,7 +23,6 @@ import {
   AuxiliaryProvider,
   createAuxiliaryStore,
 } from './state/hooks.js';
-
 import VitessceGrid from './VitessceGrid.js';
 import { Warning } from './Warning.js';
 import { DebugWindow } from './DebugWindow.js';
@@ -206,6 +207,15 @@ export function VitS(props) {
         retry: 2,
       },
     },
+    // Reference: https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks
+    queryCache: new QueryCache({
+      onError: (error) => {
+        log.error(error);
+        if (onWarn) {
+          onWarn(error.message);
+        }
+      },
+    }),
     // TODO: should the queryClient be shared? Or have an option to be shared
     // (e.g., based on remountOnUidChange)?
   }), [configKey]);

package/src/data-hook-utils.js

@@ -4,32 +4,15 @@ import {
   capitalize,
   getInitialCoordinationScopePrefix,
 } from '@vitessce/utils';
-import { log } from '@vitessce/globals';
 import { STATUS } from '@vitessce/constants-internal';
 import {
-  AbstractLoaderError,
   LoaderNotFoundError,
-} from '@vitessce/abstract';
+} from '@vitessce/error';
 import {
   getMatchingLoader,
   useMatchingLoader,
-  useSetWarning,
 } from './state/hooks.js';
 
-/**
- * Warn via publishing to the console
- * and to the global warning store.
- * @param {AbstractLoaderError} error An error instance.
- */
-export function warn(error, setWarning) {
-  setWarning(error.message);
-  log.warn(error.message);
-  log.error(error.stack);
-  if (error instanceof AbstractLoaderError) {
-    error.warnInConsole();
-  }
-}
-
 /**
  * Initialize values in the coordination space.
  * @param {object} values Object where
@@ -76,7 +59,7 @@ export async function dataQueryFn(ctx) {
   // No loader was found.
   if (isRequired) {
     // Status: error
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     // Status: success
     return { data: placeholderObject };
@@ -100,7 +83,7 @@ export async function dataQueryFn(ctx) {
  * @param {object} initialCoordinationValues Object where
  * keys are coordination type names with the prefix 'initialize',
  * values are initialization preferences as boolean values.
- * @returns {array} [data, status, urls] where
+ * @returns {array} [data, status, urls, error] where
  * cells is an object and cellsCount is the
  * number of items in the cells object.
  */
@@ -108,7 +91,6 @@ export function useDataType(
   dataType, loaders, dataset, isRequired,
   coordinationSetters, initialCoordinationValues, matchOn,
 ) {
-  const setWarning = useSetWarning();
   const placeholderObject = useMemo(() => ({}), []);
   const dataQuery = useQuery({
     // TODO: only enable when loaders has been initialized?
@@ -130,8 +112,6 @@ export function useDataType(
 
   const coordinationValues = data?.coordinationValues;
   const urls = data?.urls;
-  const requestInit = data?.requestInit;
-
 
   useEffect(() => {
     initCoordinationSpace(
@@ -141,14 +121,8 @@ export function useDataType(
     );
   }, [coordinationValues]);
 
-  useEffect(() => {
-    if (error) {
-      warn(error, setWarning);
-    }
-  }, [error, setWarning]);
-
   const dataStatus = isFetching ? STATUS.LOADING : status;
-  return [loadedData, dataStatus, urls, requestInit];
+  return [loadedData, dataStatus, urls, error];
 }
 
 /**
@@ -168,9 +142,10 @@ export function useDataType(
  * @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
- * cells is an object and cellsCount is the
- * number of items in the cells object.
+ * @param {object} matchOnObj Coordination values used to obtain a matching loader.
+ * @param {function} mergeCoordination Function to merge coordination values.
+ * @param {string} viewUid The view UID to use for merging coordination values.
+ * @returns {array} [data, status, urls, errors]
  */
 export function useDataTypeMulti(
   dataType, loaders, dataset, isRequired,
@@ -178,8 +153,6 @@ export function useDataTypeMulti(
   mergeCoordination, viewUid,
 ) {
   const placeholderObject = useMemo(() => ({}), []);
-  const setWarning = useSetWarning();
-
   const matchOnEntries = matchOnObj ? Object.entries(matchOnObj) : [];
   const dataQueries = useQueries({
     // eslint-disable-next-line no-unused-vars
@@ -201,6 +174,7 @@ export function useDataTypeMulti(
 
   const anyLoading = dataQueries.some(q => q.isFetching);
   const anyError = dataQueries.some(q => q.isError);
+  const errors = anyError ? dataQueries.filter(q => q.isError).map(q => q.error) : [];
   // eslint-disable-next-line no-nested-ternary
   const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
   const isSuccess = dataStatus === STATUS.SUCCESS;
@@ -229,14 +203,6 @@ export function useDataTypeMulti(
   // 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
-  }, [anyError, setWarning]);
-
   // Convert data to object keyed by scopeKey.
   const data = useMemo(() => Object.fromEntries(
     matchOnEntries.map(([scopeKey], i) => ([scopeKey, dataQueries[i].data?.data])),
@@ -253,7 +219,7 @@ export function useDataTypeMulti(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   ), [dataQueries]);
 
-  return [data, dataStatus, urls];
+  return [data, dataStatus, urls, errors];
 }
 
 export function useHasLoader(loaders, dataset, dataType, matchOn) {

package/src/data-hooks-multilevel-utils.js

@@ -1,16 +1,14 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from '@tanstack/react-query';
 import { extent } from 'd3-array';
 import { DataType, STATUS } from '@vitessce/constants-internal';
 import {
   LoaderNotFoundError,
-} from '@vitessce/abstract';
+} from '@vitessce/error';
 import {
   getMatchingLoader,
-  useSetWarning,
 } from './state/hooks.js';
 import {
-  warn,
   dataQueryFn,
 } from './data-hook-utils.js';
 
@@ -324,18 +322,26 @@ async function featureSelectionQueryFn(ctx) {
   }
   // No loader was found.
   if (isRequired) {
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     return { data: null, dataKey: null };
   }
 }
 
+/**
+ * Get feature values for a multi-level feature selection.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {array} selections
+ * @param {number} depth
+ * @returns [data, geneName, extents, normData, status, errors]
+ */
 export function useFeatureSelectionMultiLevel(
   loaders, dataset, isRequired, matchOnObj, selections,
   depth,
 ) {
-  const setWarning = useSetWarning();
-
   // Create a flat list of tuples (queryKey, scopeInfo).
   const queryKeyScopeTuples = useMemo(() => getFeatureSelectionQueryKeyScopeTuples(
     selections, matchOnObj, depth, dataset, DataType.OBS_FEATURE_MATRIX, isRequired,
@@ -353,6 +359,7 @@ export function useFeatureSelectionMultiLevel(
 
   const anyLoading = featureQueries.some(q => q.isFetching);
   const anyError = featureQueries.some(q => q.isError);
+  const errors = anyError ? featureQueries.filter(q => q.isError).map(q => q.error) : [];
   // eslint-disable-next-line no-nested-ternary
   const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
   const flatGeneData = featureQueries.map(q => q.data?.data || null);
@@ -360,17 +367,6 @@ export function useFeatureSelectionMultiLevel(
   const flatExtents = featureQueries.map(q => q.data?.dataExtent || null);
   const flatNormData = featureQueries.map(q => q.data?.normData || null);
 
-  useEffect(() => {
-    featureQueries
-      .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]);
-
   // Need to re-nest the geneData and the loadedGeneName info.
   const [geneData, loadedGeneName, extents, normData] = useMemo(() => {
     const nestedGeneData = nestFeatureSelectionQueryResults(queryKeyScopeTuples, flatGeneData);
@@ -390,7 +386,7 @@ export function useFeatureSelectionMultiLevel(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [featureQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
-  return [geneData, loadedGeneName, extents, normData, dataStatus];
+  return [geneData, loadedGeneName, extents, normData, dataStatus, errors];
 }
 
 async function matrixIndicesQueryFn(ctx) {
@@ -424,18 +420,25 @@ async function matrixIndicesQueryFn(ctx) {
   }
   // No loader was found.
   if (isRequired) {
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     return { data: null, dataKey: null };
   }
 }
 
+/**
+ * Get matrix indices for a multi-level coordination.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @returns [data, dataStatus, errors]
+ */
 export function useObsFeatureMatrixIndicesMultiLevel(
   loaders, dataset, isRequired, matchOnObj,
   depth,
 ) {
-  const setWarning = useSetWarning();
-
   // Create a flat list of tuples (queryKey, scopeInfo).
   const queryKeyScopeTuples = useMemo(() => getMatrixIndicesQueryKeyScopeTuples(
     matchOnObj, depth, dataset, DataType.OBS_FEATURE_MATRIX, isRequired,
@@ -453,21 +456,11 @@ export function useObsFeatureMatrixIndicesMultiLevel(
 
   const anyLoading = indicesQueries.some(q => q.isFetching);
   const anyError = indicesQueries.some(q => q.isError);
+  const errors = anyError ? indicesQueries.filter(q => q.isError).map(q => q.error) : [];
   // eslint-disable-next-line no-nested-ternary
   const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
   const flatIndicesData = indicesQueries.map(q => q.data?.data || null);
 
-  useEffect(() => {
-    indicesQueries
-      .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]);
-
   // Need to re-nest the geneData and the loadedGeneName info.
   const indicesData = useMemo(() => {
     const nestedIndicesData = nestQueryResults(queryKeyScopeTuples, flatIndicesData);
@@ -484,15 +477,23 @@ export function useObsFeatureMatrixIndicesMultiLevel(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [indicesQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
-  return [indicesData, dataStatus];
+  return [indicesData, dataStatus, errors];
 }
 
+/**
+ * Get data for multi-level coordination.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @param {string} dataType
+ * @returns {array} [data, status, errors]
+ */
 function useDataTypeMultiLevel(
   loaders, dataset, isRequired, matchOnObj,
   depth, dataType,
 ) {
-  const setWarning = useSetWarning();
-
   // Create a flat list of tuples (queryKey, scopeInfo).
   const queryKeyScopeTuples = useMemo(() => getQueryKeyScopeTuples(
     matchOnObj, depth, dataset, dataType, isRequired,
@@ -510,21 +511,11 @@ function useDataTypeMultiLevel(
 
   const anyLoading = locationsQueries.some(q => q.isFetching);
   const anyError = locationsQueries.some(q => q.isError);
+  const errors = anyError ? locationsQueries.filter(q => q.isError).map(q => q.error) : [];
   // eslint-disable-next-line no-nested-ternary
   const dataStatus = anyLoading ? STATUS.LOADING : (anyError ? STATUS.ERROR : STATUS.SUCCESS);
   const flatIndicesData = locationsQueries.map(q => q.data?.data || null);
 
-  useEffect(() => {
-    locationsQueries
-      .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]);
-
   // Need to re-nest the geneData and the loadedGeneName info.
   const locationsData = useMemo(() => {
     const nestedIndicesData = nestQueryResults(queryKeyScopeTuples, flatIndicesData);
@@ -539,9 +530,18 @@ function useDataTypeMultiLevel(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locationsQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
-  return [locationsData, dataStatus];
+  return [locationsData, dataStatus, errors];
 }
 
+/**
+ * Wrapper around useDataTypeMultiLevel.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @returns {array} [data, status, errors]
+ */
 export function useObsLocationsMultiLevel(
   loaders, dataset, isRequired, matchOnObj,
   depth,
@@ -552,6 +552,15 @@ export function useObsLocationsMultiLevel(
   );
 }
 
+/**
+ * Wrapper around useDataTypeMultiLevel.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @returns {array} [data, status, errors]
+ */
 export function useObsSetsMultiLevel(
   loaders, dataset, isRequired, matchOnObj,
   depth,
@@ -562,6 +571,15 @@ export function useObsSetsMultiLevel(
   );
 }
 
+/**
+ * Wrapper around useDataTypeMultiLevel.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @returns {array} [data, status, errors]
+ */
 export function useObsLabelsMultiLevel(
   loaders, dataset, isRequired, matchOnObj,
   depth,