@vitessce/vit-s 3.5.5 → 3.5.7

package/dist/index.js

@@ -25125,6 +25125,291 @@ function createPrefixedGetNextScopeNumeric(prefix2) {
 function getInitialCoordinationScopePrefix(datasetUid, dataType) {
   return `init_${datasetUid}_${dataType}_`;
 }
+var loglevel = { exports: {} };
+(function(module2) {
+  (function(root2, definition) {
+    if (module2.exports) {
+      module2.exports = definition();
+    } else {
+      root2.log = definition();
+    }
+  })(commonjsGlobal, function() {
+    var noop3 = function() {
+    };
+    var undefinedType2 = "undefined";
+    var isIE2 = typeof window !== undefinedType2 && typeof window.navigator !== undefinedType2 && /Trident\/|MSIE /.test(window.navigator.userAgent);
+    var logMethods = [
+      "trace",
+      "debug",
+      "info",
+      "warn",
+      "error"
+    ];
+    var _loggersByName = {};
+    var defaultLogger2 = null;
+    function bindMethod(obj, methodName) {
+      var method = obj[methodName];
+      if (typeof method.bind === "function") {
+        return method.bind(obj);
+      } else {
+        try {
+          return Function.prototype.bind.call(method, obj);
+        } catch (e) {
+          return function() {
+            return Function.prototype.apply.apply(method, [obj, arguments]);
+          };
+        }
+      }
+    }
+    function traceForIE() {
+      if (console.log) {
+        if (console.log.apply) {
+          console.log.apply(console, arguments);
+        } else {
+          Function.prototype.apply.apply(console.log, [console, arguments]);
+        }
+      }
+      if (console.trace)
+        console.trace();
+    }
+    function realMethod(methodName) {
+      if (methodName === "debug") {
+        methodName = "log";
+      }
+      if (typeof console === undefinedType2) {
+        return false;
+      } else if (methodName === "trace" && isIE2) {
+        return traceForIE;
+      } else if (console[methodName] !== void 0) {
+        return bindMethod(console, methodName);
+      } else if (console.log !== void 0) {
+        return bindMethod(console, "log");
+      } else {
+        return noop3;
+      }
+    }
+    function replaceLoggingMethods() {
+      var level = this.getLevel();
+      for (var i = 0; i < logMethods.length; i++) {
+        var methodName = logMethods[i];
+        this[methodName] = i < level ? noop3 : this.methodFactory(methodName, level, this.name);
+      }
+      this.log = this.debug;
+      if (typeof console === undefinedType2 && level < this.levels.SILENT) {
+        return "No console available for logging";
+      }
+    }
+    function enableLoggingWhenConsoleArrives(methodName) {
+      return function() {
+        if (typeof console !== undefinedType2) {
+          replaceLoggingMethods.call(this);
+          this[methodName].apply(this, arguments);
+        }
+      };
+    }
+    function defaultMethodFactory(methodName, _level, _loggerName) {
+      return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments);
+    }
+    function Logger(name, factory) {
+      var self2 = this;
+      var inheritedLevel;
+      var defaultLevel;
+      var userLevel;
+      var storageKey = "loglevel";
+      if (typeof name === "string") {
+        storageKey += ":" + name;
+      } else if (typeof name === "symbol") {
+        storageKey = void 0;
+      }
+      function persistLevelIfPossible(levelNum) {
+        var levelName = (logMethods[levelNum] || "silent").toUpperCase();
+        if (typeof window === undefinedType2 || !storageKey)
+          return;
+        try {
+          window.localStorage[storageKey] = levelName;
+          return;
+        } catch (ignore) {
+        }
+        try {
+          window.document.cookie = encodeURIComponent(storageKey) + "=" + levelName + ";";
+        } catch (ignore) {
+        }
+      }
+      function getPersistedLevel() {
+        var storedLevel;
+        if (typeof window === undefinedType2 || !storageKey)
+          return;
+        try {
+          storedLevel = window.localStorage[storageKey];
+        } catch (ignore) {
+        }
+        if (typeof storedLevel === undefinedType2) {
+          try {
+            var cookie = window.document.cookie;
+            var cookieName = encodeURIComponent(storageKey);
+            var location = cookie.indexOf(cookieName + "=");
+            if (location !== -1) {
+              storedLevel = /^([^;]+)/.exec(
+                cookie.slice(location + cookieName.length + 1)
+              )[1];
+            }
+          } catch (ignore) {
+          }
+        }
+        if (self2.levels[storedLevel] === void 0) {
+          storedLevel = void 0;
+        }
+        return storedLevel;
+      }
+      function clearPersistedLevel() {
+        if (typeof window === undefinedType2 || !storageKey)
+          return;
+        try {
+          window.localStorage.removeItem(storageKey);
+        } catch (ignore) {
+        }
+        try {
+          window.document.cookie = encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+        } catch (ignore) {
+        }
+      }
+      function normalizeLevel(input) {
+        var level = input;
+        if (typeof level === "string" && self2.levels[level.toUpperCase()] !== void 0) {
+          level = self2.levels[level.toUpperCase()];
+        }
+        if (typeof level === "number" && level >= 0 && level <= self2.levels.SILENT) {
+          return level;
+        } else {
+          throw new TypeError("log.setLevel() called with invalid level: " + input);
+        }
+      }
+      self2.name = name;
+      self2.levels = {
+        "TRACE": 0,
+        "DEBUG": 1,
+        "INFO": 2,
+        "WARN": 3,
+        "ERROR": 4,
+        "SILENT": 5
+      };
+      self2.methodFactory = factory || defaultMethodFactory;
+      self2.getLevel = function() {
+        if (userLevel != null) {
+          return userLevel;
+        } else if (defaultLevel != null) {
+          return defaultLevel;
+        } else {
+          return inheritedLevel;
+        }
+      };
+      self2.setLevel = function(level, persist) {
+        userLevel = normalizeLevel(level);
+        if (persist !== false) {
+          persistLevelIfPossible(userLevel);
+        }
+        return replaceLoggingMethods.call(self2);
+      };
+      self2.setDefaultLevel = function(level) {
+        defaultLevel = normalizeLevel(level);
+        if (!getPersistedLevel()) {
+          self2.setLevel(level, false);
+        }
+      };
+      self2.resetLevel = function() {
+        userLevel = null;
+        clearPersistedLevel();
+        replaceLoggingMethods.call(self2);
+      };
+      self2.enableAll = function(persist) {
+        self2.setLevel(self2.levels.TRACE, persist);
+      };
+      self2.disableAll = function(persist) {
+        self2.setLevel(self2.levels.SILENT, persist);
+      };
+      self2.rebuild = function() {
+        if (defaultLogger2 !== self2) {
+          inheritedLevel = normalizeLevel(defaultLogger2.getLevel());
+        }
+        replaceLoggingMethods.call(self2);
+        if (defaultLogger2 === self2) {
+          for (var childName in _loggersByName) {
+            _loggersByName[childName].rebuild();
+          }
+        }
+      };
+      inheritedLevel = normalizeLevel(
+        defaultLogger2 ? defaultLogger2.getLevel() : "WARN"
+      );
+      var initialLevel = getPersistedLevel();
+      if (initialLevel != null) {
+        userLevel = normalizeLevel(initialLevel);
+      }
+      replaceLoggingMethods.call(self2);
+    }
+    defaultLogger2 = new Logger();
+    defaultLogger2.getLogger = function getLogger(name) {
+      if (typeof name !== "symbol" && typeof name !== "string" || name === "") {
+        throw new TypeError("You must supply a name when creating a logger.");
+      }
+      var logger = _loggersByName[name];
+      if (!logger) {
+        logger = _loggersByName[name] = new Logger(
+          name,
+          defaultLogger2.methodFactory
+        );
+      }
+      return logger;
+    };
+    var _log2 = typeof window !== undefinedType2 ? window.log : void 0;
+    defaultLogger2.noConflict = function() {
+      if (typeof window !== undefinedType2 && window.log === defaultLogger2) {
+        window.log = _log2;
+      }
+      return defaultLogger2;
+    };
+    defaultLogger2.getLoggers = function getLoggers() {
+      return _loggersByName;
+    };
+    defaultLogger2["default"] = defaultLogger2;
+    return defaultLogger2;
+  });
+})(loglevel);
+var loglevelExports = loglevel.exports;
+const log$3 = /* @__PURE__ */ getDefaultExportFromCjs(loglevelExports);
+const LogLevel = {
+  SILENT: "silent",
+  INFO: "info",
+  WARN: "warn",
+  ERROR: "error",
+  DEBUG: "debug",
+  TRACE: "trace"
+  // default value
+};
+const OrderedLogLevels = [
+  LogLevel.TRACE,
+  LogLevel.DEBUG,
+  LogLevel.INFO,
+  LogLevel.WARN,
+  LogLevel.ERROR
+];
+const DEFAULT_DEBUG_MODE = false;
+const DEFAULT_LOG_LEVEL = LogLevel.TRACE;
+function getLogLevel() {
+  return log$3.getLevel();
+}
+function setLogLevel(level) {
+  if (Object.values(LogLevel).includes(level)) {
+    log$3.setLevel(level);
+  } else {
+    log$3.warn("Log level is not valid");
+  }
+}
+function atLeastLogLevel(someLevel) {
+  const currLevel = getLogLevel();
+  const numericTarget = OrderedLogLevels.indexOf(someLevel);
+  return currLevel <= numericTarget;
+}
 configSchema1_0_0.shape.coordinationSpace.unwrap();
 configSchema1_0_0.shape.layout.element.shape.coordinationScopes.unwrap();
 function upgradeReplaceViewProp(prefix2, view, coordinationSpace) {
@@ -25542,7 +25827,7 @@ function upgradeFrom1_0_14(config2) {
     Object.entries(propAnalogies).forEach(([oldProp, newType]) => {
       var _a;
       if ((_a = viewDef.props) == null ? void 0 : _a[oldProp]) {
-        console.warn(`Warning: the '${oldProp}' prop on the ${viewDef.component} view is deprecated. Please use the '${newType}' coordination type instead.`);
+        log$3.warn(`Warning: the '${oldProp}' prop on the ${viewDef.component} view is deprecated. Please use the '${newType}' coordination type instead.`);
       }
     });
   });
@@ -25565,7 +25850,7 @@ function upgradeFrom1_0_15(config2) {
       Object.entries(coordinationScopes).forEach(([coordinationType, coordinationScope]) => {
         if (!Array.isArray(coordinationScope) && typeof coordinationScope === "object") {
           if (coordinationType === "dataset") {
-            console.error("Expected coordinationScopes.dataset value to be either string or string[], but got object.");
+            log$3.error("Expected coordinationScopes.dataset value to be either string or string[], but got object.");
           }
           coordinationScopesBy.dataset[coordinationType] = coordinationScope;
         } else if (Array.isArray(coordinationScope) || typeof coordinationScope === "string") {
@@ -27777,7 +28062,9 @@ const ViewType$1 = {
   DOT_PLOT: "dotPlot",
   FEATURE_BAR_PLOT: "featureBarPlot",
   BIOMARKER_SELECT: "biomarkerSelect",
-  LINK_CONTROLLER: "linkController"
+  LINK_CONTROLLER: "linkController",
+  DUAL_SCATTERPLOT: "dualScatterplot",
+  TREEMAP: "treemap"
 };
 const DataType$1 = {
   OBS_LABELS: "obsLabels",
@@ -27853,6 +28140,7 @@ const FileType$1 = {
   OBS_LABELS_ANNDATA_ZARR: "obsLabels.anndata.zarr",
   FEATURE_LABELS_ANNDATA_ZARR: "featureLabels.anndata.zarr",
   SAMPLE_EDGES_ANNDATA_ZARR: "sampleEdges.anndata.zarr",
+  SAMPLE_SETS_ANNDATA_ZARR: "sampleSets.anndata.zarr",
   // AnnData - zipped
   OBS_FEATURE_MATRIX_ANNDATA_ZARR_ZIP: "obsFeatureMatrix.anndata.zarr.zip",
   OBS_FEATURE_COLUMNS_ANNDATA_ZARR_ZIP: "obsFeatureColumns.anndata.zarr.zip",
@@ -27865,6 +28153,7 @@ const FileType$1 = {
   OBS_LABELS_ANNDATA_ZARR_ZIP: "obsLabels.anndata.zarr.zip",
   FEATURE_LABELS_ANNDATA_ZARR_ZIP: "featureLabels.anndata.zarr.zip",
   SAMPLE_EDGES_ANNDATA_ZARR_ZIP: "sampleEdges.anndata.zarr.zip",
+  SAMPLE_SETS_ANNDATA_ZARR_ZIP: "sampleSets.anndata.zarr.zip",
   // AnnData - h5ad via reference spec
   OBS_FEATURE_MATRIX_ANNDATA_H5AD: "obsFeatureMatrix.anndata.h5ad",
   OBS_FEATURE_COLUMNS_ANNDATA_H5AD: "obsFeatureColumns.anndata.h5ad",
@@ -27877,6 +28166,7 @@ const FileType$1 = {
   OBS_LABELS_ANNDATA_H5AD: "obsLabels.anndata.h5ad",
   FEATURE_LABELS_ANNDATA_H5AD: "featureLabels.anndata.h5ad",
   SAMPLE_EDGES_ANNDATA_H5AD: "sampleEdges.anndata.h5ad",
+  SAMPLE_SETS_ANNDATA_H5AD: "sampleSets.anndata.h5ad",
   // SpatialData
   IMAGE_SPATIALDATA_ZARR: "image.spatialdata.zarr",
   LABELS_SPATIALDATA_ZARR: "labels.spatialdata.zarr",
@@ -27978,15 +28268,23 @@ const CoordinationType$1 = {
   HEATMAP_ZOOM_Y: "heatmapZoomY",
   HEATMAP_TARGET_X: "heatmapTargetX",
   HEATMAP_TARGET_Y: "heatmapTargetY",
-  OBS_FILTER: "obsFilter",
   OBS_HIGHLIGHT: "obsHighlight",
+  OBS_SELECTION: "obsSelection",
   OBS_SET_SELECTION: "obsSetSelection",
+  OBS_SELECTION_MODE: "obsSelectionMode",
+  OBS_FILTER: "obsFilter",
+  OBS_SET_FILTER: "obsSetFilter",
+  OBS_FILTER_MODE: "obsFilterMode",
   OBS_SET_HIGHLIGHT: "obsSetHighlight",
   OBS_SET_EXPANSION: "obsSetExpansion",
   OBS_SET_COLOR: "obsSetColor",
-  FEATURE_FILTER: "featureFilter",
   FEATURE_HIGHLIGHT: "featureHighlight",
   FEATURE_SELECTION: "featureSelection",
+  FEATURE_SET_SELECTION: "featureSetSelection",
+  FEATURE_SELECTION_MODE: "featureSelectionMode",
+  FEATURE_FILTER: "featureFilter",
+  FEATURE_SET_FILTER: "featureSetFilter",
+  FEATURE_FILTER_MODE: "featureFilterMode",
   FEATURE_VALUE_COLORMAP: "featureValueColormap",
   FEATURE_VALUE_TRANSFORM: "featureValueTransform",
   FEATURE_VALUE_COLORMAP_RANGE: "featureValueColormapRange",
@@ -28053,14 +28351,22 @@ const CoordinationType$1 = {
   SPATIAL_CHANNEL_LABEL_SIZE: "spatialChannelLabelSize",
   // Multi-sample / comparative
   SAMPLE_TYPE: "sampleType",
+  SAMPLE_SELECTION: "sampleSelection",
   SAMPLE_SET_SELECTION: "sampleSetSelection",
+  SAMPLE_SELECTION_MODE: "sampleSelectionMode",
+  SAMPLE_FILTER: "sampleFilter",
+  SAMPLE_SET_FILTER: "sampleSetFilter",
+  SAMPLE_FILTER_MODE: "sampleFilterMode",
   SAMPLE_SET_COLOR: "sampleSetColor",
+  SAMPLE_HIGHLIGHT: "sampleHighlight",
   EMBEDDING_POINTS_VISIBLE: "embeddingPointsVisible",
   EMBEDDING_CONTOURS_VISIBLE: "embeddingContoursVisible",
   EMBEDDING_CONTOURS_FILLED: "embeddingContoursFilled",
   EMBEDDING_CONTOUR_PERCENTILES: "embeddingContourPercentiles",
   CONTOUR_COLOR_ENCODING: "contourColorEncoding",
-  CONTOUR_COLOR: "contourColor"
+  CONTOUR_COLOR: "contourColor",
+  // Treemap
+  HIERARCHY_LEVELS: "hierarchyLevels"
 };
 const STATUS = {
   LOADING: "loading",
@@ -28129,10 +28435,10 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
   CoordinationType$1.EMBEDDING_OBS_OPACITY
 ];
 const note = "This file is autogenerated by .changeset/post-changelog.mjs.";
-const version = "3.5.5";
-const date = "2025-01-17";
+const version = "3.5.7";
+const date = "2025-02-19";
 const branch = "changeset-release/main";
-const hash = "fe1f84e9";
+const hash = "a4bc3a6a";
 const META_VERSION = {
   note,
   version,
@@ -28306,7 +28612,7 @@ function makeConstantWithDeprecationMessage(currObj, oldObj) {
       const oldKeys = Object.keys(oldObj);
       const propKey = String(prop);
       if (oldKeys.includes(propKey)) {
-        console.warn(`Notice about the constant mapping ${propKey}: '${oldObj[propKey][0]}':
+        log$3.warn(`Notice about the constant mapping ${propKey}: '${oldObj[propKey][0]}':
 ${oldObj[propKey][1]}`);
         return oldObj[propKey];
       }
@@ -28475,6 +28781,9 @@ const annDataObsSetsArr = z.array(z.object({
 z.object({
   obsSets: annDataObsSetsArr
 });
+z.object({
+  sampleSets: annDataObsSetsArr
+});
 const annDataObsFeatureColumnsArr = z.array(z.object({
   path: z.string()
 }));
@@ -36882,14 +37191,11 @@ class LoaderNotFoundError extends AbstractLoaderError {
     this.dataset = dataset;
     this.fileType = fileType;
     this.viewCoordinationValues = viewCoordinationValues;
+    this.message = `Expected to match on { ${Object.entries(viewCoordinationValues || {}).map(([k, v]) => `${k}: ${v ?? "null"}`).join(", ")} }`;
   }
   warnInConsole() {
-    const { loaders, viewCoordinationValues } = this;
-    console.warn(
-      // eslint-disable-next-line prefer-template
-      `Expected to match on { ${Object.entries(viewCoordinationValues).map(([k, v]) => k + ": " + v).join(", ")} }`,
-      loaders
-    );
+    const { loaders, message } = this;
+    log$3.warn(message, loaders);
   }
 }
 function getSourceAndLoaderFromFileType(type3, fileTypes) {
@@ -36966,7 +37272,7 @@ function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaul
     ...coordinationValues
   };
   if (!isEqual$1(coordinationValues, coordinationValuesWithDefaults)) {
-    console.warn(`Using coordination value defaults for file type ${fileType} in dataset ${datasetUid}
+    log$3.warn(`Using coordination value defaults for file type ${fileType} in dataset ${datasetUid}
 Before: ${JSON.stringify(coordinationValues)}
 After: ${JSON.stringify(coordinationValuesWithDefaults)}`);
   }
@@ -37749,11 +38055,33 @@ function Warning(props) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: unformatted })
   ] }) }) }) });
 }
+function DebugWindow({ debugErrors }) {
+  const classes = useStyles$4();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: VITESSCE_CONTAINER, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.row, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.warningCard, children: debugErrors.map((error, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    index === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { children: [
+        "Error Type: ",
+        error.name
+      ] }),
+      Object.keys(error).map(
+        (key) => key !== "name" && key !== "message" && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+          key.charAt(0).toUpperCase() + key.slice(1),
+          ": ",
+          error[key]
+        ] }, key)
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+      "Error: ",
+      error.message
+    ] })
+  ] }, error.message || index)) }) }) }) });
+}
 function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
   try {
     pluginSpecificConfigSchema.parse(viewConfig);
   } catch (e) {
-    console.error(e);
+    log$3.error(e);
   }
 }
 function CallbackPublisher(props) {
@@ -37794,10 +38122,12 @@ function CallbackPublisher(props) {
   return null;
 }
 function logConfig(config2, name) {
-  console.groupCollapsed(`🚄 VitS (${META_VERSION.version}) ${name}`);
-  console.info(`data:,${JSON.stringify(config2)}`);
-  console.info(JSON.stringify(config2, null, 2));
-  console.groupEnd();
+  if (atLeastLogLevel(LogLevel.INFO)) {
+    console.groupCollapsed(`🚄 VitS (${META_VERSION.version}) ${name}`);
+    console.info(`data:,${JSON.stringify(config2)}`);
+    console.info(JSON.stringify(config2, null, 2));
+    console.groupEnd();
+  }
 }
 function getExistingScopesForCoordinationType(config2, coordinationType) {
   var _a;
@@ -38024,8 +38354,11 @@ function VitS(props) {
     asyncFunctions: asyncFunctionsProp,
     warning: warning2,
     pageMode = false,
-    children: children2
+    children: children2,
+    debugMode = DEFAULT_DEBUG_MODE,
+    logLevel = DEFAULT_LOG_LEVEL
   } = props;
+  const [debugErrors, setDebugErrors] = useState([]);
   const viewTypes = useMemo(() => viewTypesProp || [], [viewTypesProp]);
   const fileTypes = useMemo(() => fileTypesProp || [], [fileTypesProp]);
   const jointFileTypes = useMemo(
@@ -38037,6 +38370,11 @@ function VitS(props) {
     [coordinationTypesProp]
   );
   const generateClassName2 = useMemo(() => createGenerateClassName(uid), [uid]);
+  useLayoutEffect(() => {
+    setLogLevel(logLevel);
+  }, [logLevel]);
+  useLayoutEffect(() => {
+  }, [debugMode]);
   const configVersion = config2 == null ? void 0 : config2.version;
   const configKey = useMemo(() => {
     if (config2 == null ? void 0 : config2.uid) {
@@ -38137,6 +38475,9 @@ function VitS(props) {
     }
     return createViewConfigStore(null, null);
   }, [success, configKey]);
+  if (debugMode && debugErrors.length > 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(StylesProvider, { generateClassName: generateClassName2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: muiTheme[theme], children: /* @__PURE__ */ jsxRuntimeExports.jsx(DebugWindow, { debugErrors }) }) });
+  }
   return success ? /* @__PURE__ */ jsxRuntimeExports.jsx(StylesProvider, { generateClassName: generateClassName2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: muiTheme[theme], children: /* @__PURE__ */ jsxRuntimeExports.jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ViewConfigProvider,
     {
@@ -38487,8 +38828,8 @@ function TitleInfo(props) {
 }
 function warn(error, setWarning) {
   setWarning(error.message);
-  console.warn(error.message);
-  console.error(error.stack);
+  log$3.warn(error.message);
+  log$3.error(error.stack);
   if (error instanceof AbstractLoaderError) {
     error.warnInConsole();
   }

package/dist-tsc/CallbackPublisher.js

@@ -1,4 +1,5 @@
 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
@@ -7,7 +8,7 @@ function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
         pluginSpecificConfigSchema.parse(viewConfig);
     }
     catch (e) {
-        console.error(e);
+        log.error(e);
     }
     // Do nothing if successful.
 }

package/dist-tsc/DebugWindow.d.ts

@@ -0,0 +1,4 @@
+export function DebugWindow({ debugErrors }: {
+    debugErrors: any;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DebugWindow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;gCA8BC"}

package/dist-tsc/DebugWindow.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx("div", { className: VITESSCE_CONTAINER, children: _jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: _jsx("div", { className: classes.row, children: _jsx("div", { className: classes.warningCard, children: debugErrors.map((error, index) => (_jsxs("div", { children: [index === 0 && (_jsxs("div", { children: [_jsxs("h1", { children: ["Error Type: ", error.name] }), Object.keys(error).map(key => key !== 'name'
+                                        && key !== 'message' && (_jsxs("p", { children: [key.charAt(0).toUpperCase() + key.slice(1), ": ", error[key]] }, key)))] })), _jsxs("p", { children: ["Error: ", error.message] })] }, error.message || index))) }) }) }) }));
+}

package/dist-tsc/VitS.d.ts

@@ -31,6 +31,8 @@
  * @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: {
@@ -51,5 +53,7 @@ export function VitS(props: {
     coordinationTypes: array;
     warning: null | object;
     pageMode: boolean;
+    debugMode: boolean;
+    logLevel: null | string;
 }): JSX.Element;
 //# sourceMappingURL=VitS.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,4BAhCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGI,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;CAEjB,eAqNA"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,4BAlCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGI,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eA2OA"}

package/dist-tsc/VitS.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { ThemeProvider, StylesProvider, } from '@material-ui/core';
 import { QueryClient, QueryClientProvider, } 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, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks.js';
 import VitessceGrid from './VitessceGrid.js';
 import { Warning } from './Warning.js';
+import { DebugWindow } from './DebugWindow.js';
 import CallbackPublisher from './CallbackPublisher.js';
 import { initialize, logConfig, } from './view-config-utils.js';
 import { createLoaders } from './vitessce-grid-utils.js';
@@ -46,15 +48,26 @@ 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) {
-    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, } = props;
+    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, 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(() => (jointFileTypesProp || []), [jointFileTypesProp]);
     const coordinationTypes = useMemo(() => (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
     // (controlled component case). If not, then use the config object itself
@@ -156,5 +169,11 @@ export function VitS(props) {
         return createViewConfigStore(null, null);
         // 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 (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(DebugWindow, { debugErrors: debugErrors }) }) }));
+    }
     return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, ...(remountOnUidChange ? ({ key: configKey }) : {}), children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores, children: children }), _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 }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAyCA,iEAoBC"}
+{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,iEAoBC"}

package/dist-tsc/Warning.js

@@ -1,43 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, preformatted, unformatted, } = props;
     const classes = useStyles();

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":"AAiBA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AAGD,oDAuBC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAiDjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,0DAGJ,KAAK,CAsFjB;AAED,+FAGC;oCA1PM,oBAAoB"}
+{"version":3,"file":"data-hook-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-utils.js"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,4BAFW,mBAAmB,yBAS7B;AAED;;;;;;;;;;GAUG;AACH,8CATW,MAAM,WAGN,MAAM,iBAGN,MAAM,QAiBhB;AAGD,oDAuBC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAiDjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,yDAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,0DAGJ,KAAK,CAsFjB;AAED,+FAGC;oCA1PM,oBAAoB"}

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { useQuery, useQueries } from '@tanstack/react-query';
 import { capitalize, getInitialCoordinationScopePrefix, } from '@vitessce/utils';
+import { log } from '@vitessce/globals';
 import { STATUS } from '@vitessce/constants-internal';
 import { AbstractLoaderError, LoaderNotFoundError, } from '@vitessce/abstract';
 import { getMatchingLoader, useMatchingLoader, useSetWarning, } from './state/hooks.js';
@@ -11,8 +12,8 @@ import { getMatchingLoader, useMatchingLoader, useSetWarning, } from './state/ho
  */
 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/dist-tsc/hooks.js

@@ -4,8 +4,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';
 function getWindowDimensions() {
     const { innerWidth: width, innerHeight: height } = window;

package/dist-tsc/shared-warning-styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+//# sourceMappingURL=shared-warning-styles.d.ts.map

package/dist-tsc/shared-warning-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-warning-styles.d.ts","sourceRoot":"","sources":["../src/shared-warning-styles.js"],"names":[],"mappings":"AAEA,2GAmCI"}

package/dist-tsc/shared-warning-styles.js

@@ -0,0 +1,37 @@
+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/dist-tsc/view-config-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AASA,wDAKC;AAED;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,mBAAmB,EAAE,qBACrB,sBAAsB,EAAE,aACxB,cAAc,EAAE;;;EAY1B"}
+{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AAUA,wDAOC;AAED;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,mBAAmB,EAAE,qBACrB,sBAAsB,EAAE,aACxB,cAAc,EAAE;;;EAY1B"}

package/dist-tsc/view-config-utils.js

@@ -2,12 +2,15 @@
 /* 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();
+    }
 }
 /**
  * Get a list of all unique scope names for a

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.5",
+  "version": "3.5.7",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,13 +29,14 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/abstract": "3.5.5",
-    "@vitessce/constants-internal": "3.5.5",
-    "@vitessce/plugins": "3.5.5",
-    "@vitessce/schemas": "3.5.5",
-    "@vitessce/utils": "3.5.5",
-    "@vitessce/sets-utils": "3.5.5",
-    "@vitessce/config": "3.5.5"
+    "@vitessce/abstract": "3.5.7",
+    "@vitessce/constants-internal": "3.5.7",
+    "@vitessce/plugins": "3.5.7",
+    "@vitessce/schemas": "3.5.7",
+    "@vitessce/utils": "3.5.7",
+    "@vitessce/sets-utils": "3.5.7",
+    "@vitessce/config": "3.5.7",
+    "@vitessce/globals": "3.5.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -43,7 +44,7 @@
     "react": "^18.0.0",
     "vite": "^4.3.0",
     "vitest": "^0.32.2",
-    "@vitessce/types": "3.5.5"
+    "@vitessce/types": "3.5.7"
   },
   "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/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/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/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';
 
 

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();
+  }
 }
 
 /**

package/src/vitessce-grid-utils.js

@@ -5,7 +5,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
@@ -107,7 +107,7 @@ function withDefaults(
   };
   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;
 }