@vitessce/vit-s 3.5.6 → 3.5.8

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

@@ -2,8 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useState, useMemo, useCallback } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
 import { isEqual } from 'lodash-es';
+import { ErrorBoundary } from 'react-error-boundary';
 import { getMaxRows, resolveLayout } from './layout-utils.js';
 import { PageModeViewContext } from '../contexts.js';
+import { FallbackForView } from '../FallbackForView.js';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     componentDidUpdate(prevProps) {
@@ -102,9 +104,9 @@ export function VitessceGridLayout(props) {
         const gridComponentsValues = Object.values(gridComponents);
         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, 
-                        // Props used by LinkControllerSubscriber:
-                        viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }, v.uid))];
+            return [v.uid, () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsx(ErrorBoundary, { FallbackComponent: FallbackForView, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: null, 
+                            // Props used by LinkControllerSubscriber:
+                            viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }) }, v.uid))];
         }));
         // Not pageMode, so no children to render.
         // We render the grid components based on the layout information.
@@ -113,9 +115,9 @@ export function VitessceGridLayout(props) {
                 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, 
-                        // Props used by LinkControllerSubscriber:
-                        viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }, v.uid));
+                return (_jsx("div", { children: _jsx(ErrorBoundary, { FallbackComponent: FallbackForView, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent, 
+                            // Props used by LinkControllerSubscriber:
+                            viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }) }, v.uid));
             }), contextValue];
     }, [gridComponents, getComponent, onRemoveComponent, theme]);
     return (pageMode

package/dist-tsc/vitessce-grid-utils.js

@@ -3,6 +3,7 @@ import { InternMap } from 'internmap';
 import { isEqual, pick } from 'lodash-es';
 import { DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
 import { getSourceAndLoaderFromFileType, getDataTypeFromFileType } from '@vitessce/abstract';
+import { log } from '@vitessce/globals';
 /**
  * Return the bottom coordinate of the layout.
  * https://github.com/STRML/react-grid-layout/blob/20dac73f91274526034c00968b5bedb9c2ed36b9/lib/utils.js#L82
@@ -90,7 +91,7 @@ function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaul
     };
     if (!isEqual(coordinationValues, coordinationValuesWithDefaults)) {
         // eslint-disable-next-line max-len
-        console.warn(`Using coordination value defaults for file type ${fileType} in dataset ${datasetUid}\nBefore: ${JSON.stringify(coordinationValues)}\nAfter: ${JSON.stringify(coordinationValuesWithDefaults)}`);
+        log.warn(`Using coordination value defaults for file type ${fileType} in dataset ${datasetUid}\nBefore: ${JSON.stringify(coordinationValues)}\nAfter: ${JSON.stringify(coordinationValuesWithDefaults)}`);
     }
     return coordinationValuesWithDefaults;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.5.6",
+  "version": "3.5.8",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,13 +29,15 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/abstract": "3.5.6",
-    "@vitessce/constants-internal": "3.5.6",
-    "@vitessce/plugins": "3.5.6",
-    "@vitessce/schemas": "3.5.6",
-    "@vitessce/utils": "3.5.6",
-    "@vitessce/sets-utils": "3.5.6",
-    "@vitessce/config": "3.5.6"
+    "react-error-boundary": "^5.0.0",
+    "@vitessce/abstract": "3.5.8",
+    "@vitessce/constants-internal": "3.5.8",
+    "@vitessce/plugins": "3.5.8",
+    "@vitessce/schemas": "3.5.8",
+    "@vitessce/utils": "3.5.8",
+    "@vitessce/sets-utils": "3.5.8",
+    "@vitessce/config": "3.5.8",
+    "@vitessce/globals": "3.5.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -43,7 +45,7 @@
     "react": "^18.0.0",
     "vite": "^4.3.0",
     "vitest": "^0.32.2",
-    "@vitessce/types": "3.5.6"
+    "@vitessce/types": "3.5.8"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/src/CallbackPublisher.js

@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
+import { log } from '@vitessce/globals';
 import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks.js';
 
-
 function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
   // Need the try-catch here since Zustand will actually
   // just catch and ignore errors in its subscription callbacks.
   try {
     pluginSpecificConfigSchema.parse(viewConfig);
   } catch (e) {
-    console.error(e);
+    log.error(e);
   }
   // Do nothing if successful.
 }

package/src/DebugWindow.js

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import { useStyles } from './shared-warning-styles.js';
+import { VITESSCE_CONTAINER } from './classNames.js';
+
+export function DebugWindow({ debugErrors }) {
+  const classes = useStyles();
+  return (
+    <div className={VITESSCE_CONTAINER}>
+      <div className={clsx(classes.warningLayout, classes.containerFluid)}>
+        <div className={classes.row}>
+          <div className={classes.warningCard}>
+            {debugErrors.map((error, index) => (
+              <div key={error.message || index}>
+                {index === 0 && (
+                  <div>
+                    <h1>Error Type: {error.name}</h1>
+                    {Object.keys(error).map(
+                      key => key !== 'name'
+                        && key !== 'message' && (
+                          <p key={key}>
+                            {key.charAt(0).toUpperCase() + key.slice(1)}: {error[key]}
+                          </p>
+                      ),
+                    )}
+                  </div>
+                )}
+                <p>Error: {error.message}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/FallbackForView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getDebugMode } from '@vitessce/globals';
+
+// TODO: Improve styling - perhaps style similar to ./TitleInfo.js
+// TODO: Display different info depending on the type of error
+
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForView(props) {
+  const {
+    error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+  } = props;
+
+  return (
+    <div>
+      <p>A view-level error occurred.</p>
+      {getDebugMode() ? (
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+      ) : null}
+    </div>
+  );
+}

package/src/FallbackForVitS.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+// TODO: Improve styling - see ./DebugWindow.js
+// TODO: Display different info depending on the type of error
+
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForVitS(props) {
+  const {
+    error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+  } = props;
+
+
+  return (
+    <div>
+      <p>Error:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+}

package/src/VitS.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
@@ -9,6 +9,10 @@ import {
 } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
+import {
+  setLogLevel, setDebugMode,
+  DEFAULT_LOG_LEVEL, DEFAULT_DEBUG_MODE,
+} from '@vitessce/globals';
 import { muiTheme } from './shared-mui/styles.js';
 import {
   ViewConfigProvider,
@@ -19,6 +23,7 @@ import {
 
 import VitessceGrid from './VitessceGrid.js';
 import { Warning } from './Warning.js';
+import { DebugWindow } from './DebugWindow.js';
 import CallbackPublisher from './CallbackPublisher.js';
 import {
   initialize,
@@ -62,6 +67,8 @@ import { AsyncFunctionsContext } from './contexts.js';
  * @param {array} props.coordinationTypes Plugin coordination types.
  * @param {null|object} props.warning A warning to render within the Vitessce grid,
  * @param {boolean} props.pageMode Whether to render in page mode. By default, false.
+ * @param {boolean} props.debugMode Whether to display the debugWindow. By default, false.
+ * @param {null|string} props.logLevel To set the log level in the console.
  * provided by the parent.
  */
 export function VitS(props) {
@@ -87,8 +94,12 @@ export function VitS(props) {
     warning,
     pageMode = false,
     children,
+    debugMode = DEFAULT_DEBUG_MODE,
+    logLevel = DEFAULT_LOG_LEVEL,
   } = props;
 
+  // eslint-disable-next-line no-unused-vars
+  const [debugErrors, setDebugErrors] = useState([]);
   const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
   const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
   const jointFileTypes = useMemo(
@@ -99,9 +110,15 @@ export function VitS(props) {
     () => (coordinationTypesProp || []),
     [coordinationTypesProp],
   );
-
   const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
 
+  // Set error handling-related globals.
+  useLayoutEffect(() => {
+    setLogLevel(logLevel);
+  }, [logLevel]);
+  useLayoutEffect(() => {
+    setDebugMode(debugMode);
+  }, [debugMode]);
   const configVersion = config?.version;
 
   // If config.uid exists, then use it for hook dependencies to detect changes
@@ -230,6 +247,18 @@ export function VitS(props) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [success, configKey]);
 
+  // TODO: use in ErrorBoundary fallback.
+  // Will probably need to move a lot to a child of VitS
+  // so that when the child throws errors the parent can catch.
+  if (debugMode && debugErrors.length > 0) {
+    return (
+      <StylesProvider generateClassName={generateClassName}>
+        <ThemeProvider theme={muiTheme[theme]}>
+          <DebugWindow debugErrors={debugErrors} />
+        </ThemeProvider>
+      </StylesProvider>
+    );
+  }
   return success ? (
     <StylesProvider generateClassName={generateClassName}>
       <ThemeProvider theme={muiTheme[theme]}>

package/src/VitSContainer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FallbackForVitS } from './FallbackForVitS.js';
+import { VitS } from './VitS.js';
+
+/**
+ * This serves as a way to wrap VitS in a React ErrorBoundary.
+ * Since there is a lot of logic within the VitS component,
+ * we want the ErrorBoundary to be a parent (as opposed to a child)
+ * of the VitS component.
+ * @param {*} props All props will be passed down to VitS.
+ */
+export function VitSContainer(props) {
+  return (
+    <ErrorBoundary FallbackComponent={FallbackForVitS}>
+      <VitS {...props} />
+    </ErrorBoundary>
+  );
+}

package/src/Warning.js

@@ -1,44 +1,7 @@
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
+import { useStyles } from './shared-warning-styles.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
 
-const useStyles = makeStyles(theme => ({
-  warningLayout: {
-    backgroundColor: theme.palette.gridLayoutBackground,
-    position: 'absolute',
-    width: '100%',
-    height: '100vh',
-  },
-  containerFluid: {
-    width: '100%',
-    padding: '15px',
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    boxSizing: 'border-box',
-    display: 'flex',
-  },
-  row: {
-    flexGrow: '1',
-  },
-  warningCard: {
-    border: `1px solid ${theme.palette.cardBorder}`,
-    flex: '1 1 auto',
-    minHeight: '1px',
-    padding: '12px',
-    marginTop: '8px',
-    marginBottom: '8px',
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: '0',
-    wordWrap: 'break-word',
-    backgroundClip: 'border-box',
-    borderRadius: '4px',
-    backgroundColor: theme.palette.primaryBackground,
-    color: theme.palette.primaryForeground,
-  },
-}));
-
 export function Warning(props) {
   const {
     title,

package/src/data-hook-utils.js

@@ -4,6 +4,7 @@ import {
   capitalize,
   getInitialCoordinationScopePrefix,
 } from '@vitessce/utils';
+import { log } from '@vitessce/globals';
 import { STATUS } from '@vitessce/constants-internal';
 import {
   AbstractLoaderError,
@@ -22,8 +23,8 @@ import {
  */
 export function warn(error, setWarning) {
   setWarning(error.message);
-  console.warn(error.message);
-  console.error(error.stack);
+  log.warn(error.message);
+  log.error(error.stack);
   if (error instanceof AbstractLoaderError) {
     error.warnInConsole();
   }

package/src/data-hooks.js

@@ -219,6 +219,17 @@ export function useNeighborhoodsData(
   );
 }
 
+export function useComparisonMetadata(
+  loaders, dataset, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  return useDataType(
+    DataType.COMPARISON_METADATA,
+    loaders, dataset, isRequired,
+    coordinationSetters, initialCoordinationValues, matchOn,
+  );
+}
+
 /**
  * Get data from the expression matrix data type loader for a given gene selection.
  * Throw warnings if the data is marked as required.
@@ -313,6 +324,117 @@ export function useFeatureSelection(
   return [geneData, loadedGeneName, dataStatus];
 }
 
+/**
+ * Utility hook function which can be used to define
+ * dataType-specific data hooks which call a loader.loadMulti
+ * method to obtain multiple data frames resulting from
+ * multiple comparative analyses.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} matchOn Coordination values used to obtain a matching loader.
+ * @param {object} volcanoOptions Options to pass to the loadMulti function of the loader.
+ * @param {string} dataType A data type.
+ * @returns {array} [{ df, metadata }] Array of dataframes and their metadata, where
+ * df is an object in which each column is stored as an array like { col1: arr1, col2: arr2 }.
+ */
+export function useComparativeDataType(
+  loaders, dataset, isRequired, matchOn, volcanoOptions, dataType,
+) {
+  const setWarning = useSetWarning();
+  const placeholderObject = useMemo(() => ({}), []);
+  const statsQuery = useQuery({
+    // TODO: only enable once `loaders` is available?
+    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, volcanoOptions, 'useComparativeData'],
+    // TODO: use TypeScript to type the return value?
+    queryFn: async (ctx) => {
+      const loader = getMatchingLoader(
+        ctx.meta.loaders, ctx.queryKey[0], ctx.queryKey[1], ctx.queryKey[2],
+      );
+      if (loader) {
+        // FeatureStats loader has a special loadMulti function
+        // that depends on coordination values such as sampleSetSelection.
+        const implementsLoadAttrs = typeof loader.loadMulti === 'function';
+        if (implementsLoadAttrs) {
+          // Has loadMulti function.
+          const payload = await loader.loadMulti(volcanoOptions);
+          if (!payload) return placeholderObject;
+          const { data: payloadData } = payload;
+
+          return {
+            data: payloadData,
+            urls: null,
+          };
+        }
+        // No loadAttrs function.
+        const payload = await loader.load();
+        if (!payload) return placeholderObject;
+        const { data: payloadData } = payload;
+        return {
+          data: payloadData,
+          urls: null,
+        };
+      }
+      // No loader was found.
+      if (isRequired) {
+        // Status: error
+        throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+      } else {
+        // Status: success
+        return { data: placeholderObject, dataKey: null };
+      }
+    },
+    meta: { loaders },
+  });
+  const { data, status, isFetching, error } = statsQuery;
+  const loadedData = data?.data || placeholderObject;
+
+  const dataStatus = isFetching ? STATUS.LOADING : status;
+  const urls = data?.urls;
+
+  useEffect(() => {
+    if (error) {
+      setWarning(error.message);
+    }
+  }, [error, setWarning]);
+
+  return [loadedData, dataStatus, urls];
+}
+
+export function useFeatureStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.FEATURE_STATS,
+  );
+}
+
+export function useFeatureSetStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.FEATURE_SET_STATS,
+  );
+}
+
+export function useObsSetStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.OBS_SET_STATS,
+  );
+}
+
 /**
  * Get the attributes for the expression matrix data type loader,
  * i.e names of cells and genes.

package/src/hooks.js

@@ -6,8 +6,8 @@ import { extent } from 'd3-array';
 import { useQuery } from '@tanstack/react-query';
 import { capitalize } from '@vitessce/utils';
 import { STATUS, AsyncFunctionType } from '@vitessce/constants-internal';
-import { useGridResize, useEmitGridResize } from './state/hooks.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
+import { useGridResize, useEmitGridResize } from './state/hooks.js';
 import { useAsyncFunction } from './contexts.js';
 
 
@@ -370,3 +370,34 @@ export function useExpandedFeatureLabelsMap(featureType, featureLabelsMap, optio
   );
   return [updatedFeatureLabelsMap, dataStatus];
 }
+
+/**
+ * Using a loader object's options,
+ * return a mapping from group name to column name.
+ * @param {*} loader obsSets or sampleSets loader class
+ * @param {[boolean]} reverse Optionally, reverse
+ * (so, return column name to group name mapping).
+ * @returns {Record<string, string>} Mapping from group name to column name.
+ */
+export function useColumnNameMapping(loader, reverse = false) {
+  return useMemo(() => {
+    const result = {};
+    if (loader?.options) {
+      const optionsArray = loader.options.obsSets
+        ? loader.options.obsSets
+        : loader.options.sampleSets;
+      optionsArray.forEach((optionObject) => {
+        const { name, path } = optionObject;
+        const columnName = path.split('/').at(-1);
+        result[name] = columnName;
+      });
+    }
+    if (reverse) {
+      return Object.fromEntries(
+        Object.entries(result)
+          .map(([k, v]) => ([v, k])),
+      );
+    }
+    return result;
+  }, [loader]);
+}

package/src/index.js

@@ -1,4 +1,5 @@
 export { VitS } from './VitS.js';
+export { VitSContainer } from './VitSContainer.js';
 export { TitleInfo } from './TitleInfo.js';
 export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
@@ -16,6 +17,7 @@ export {
   useWindowDimensions,
   useGridItemSize,
   useExpandedFeatureLabelsMap,
+  useColumnNameMapping,
 } from './hooks.js';
 export {
   useCoordinationScopes,
@@ -76,6 +78,11 @@ export {
   useObsFeatureMatrixData,
   useFeatureLabelsData,
   useGenomicProfilesData,
+
+  useComparisonMetadata,
+  useFeatureStatsData,
+  useFeatureSetStatsData,
+  useObsSetStatsData,
 } from './data-hooks.js';
 export {
   usePointMultiObsLabels,

package/src/shared-warning-styles.js

@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useStyles = makeStyles(theme => ({
+  warningLayout: {
+    backgroundColor: theme.palette.gridLayoutBackground,
+    position: 'absolute',
+    width: '100%',
+    height: '100vh',
+  },
+  containerFluid: {
+    width: '100%',
+    padding: '15px',
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    boxSizing: 'border-box',
+    display: 'flex',
+  },
+  row: {
+    flexGrow: '1',
+  },
+  warningCard: {
+    border: `1px solid ${theme.palette.cardBorder}`,
+    flex: '1 1 auto',
+    minHeight: '1px',
+    padding: '12px',
+    marginTop: '8px',
+    marginBottom: '8px',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '0',
+    wordWrap: 'break-word',
+    backgroundClip: 'border-box',
+    borderRadius: '4px',
+    backgroundColor: theme.palette.primaryBackground,
+    color: theme.palette.primaryForeground,
+  },
+}));

package/src/view-config-utils.js

@@ -2,16 +2,19 @@
 /* eslint-disable camelcase */
 import { cloneDeep } from 'lodash-es';
 import { getNextScope } from '@vitessce/utils';
+import { atLeastLogLevel, LogLevel } from '@vitessce/globals';
 import {
   AUTO_INDEPENDENT_COORDINATION_TYPES,
   META_VERSION,
 } from '@vitessce/constants-internal';
 
 export function logConfig(config, name) {
-  console.groupCollapsed(`🚄 VitS (${META_VERSION.version}) ${name}`);
-  console.info(`data:,${JSON.stringify(config)}`);
-  console.info(JSON.stringify(config, null, 2));
-  console.groupEnd();
+  if (atLeastLogLevel(LogLevel.INFO)) {
+    console.groupCollapsed(`🚄 VitS (${META_VERSION.version}) ${name}`);
+    console.info(`data:,${JSON.stringify(config)}`);
+    console.info(JSON.stringify(config, null, 2));
+    console.groupEnd();
+  }
 }
 
 /**