@vitessce/vit-s 2.0.3 → 3.0.1

package/src/VitS.js

@@ -1,36 +1,32 @@
-/* eslint-disable camelcase */
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
-  createGenerateClassName,
-} from '@material-ui/core/styles';
-import isEqual from 'lodash/isEqual';
-import { META_VERSION } from '@vitessce/constants-internal';
-import { muiTheme } from './shared-mui/styles';
+} from '@material-ui/core';
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import { isEqual } from 'lodash-es';
+import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
+import { muiTheme } from './shared-mui/styles.js';
 import {
   ViewConfigProvider,
   createViewConfigStore,
   AuxiliaryProvider,
   createAuxiliaryStore,
-} from './state/hooks';
+} from './state/hooks.js';
 
-import VitessceGrid from './VitessceGrid';
-import { Warning } from './Warning';
-import CallbackPublisher from './CallbackPublisher';
-import { getComponent } from './component-registry';
+import VitessceGrid from './VitessceGrid.js';
+import { Warning } from './Warning.js';
+import CallbackPublisher from './CallbackPublisher.js';
 import {
-  checkTypes,
   initialize,
-  upgradeAndValidate,
-} from './view-config-utils';
+  logConfig,
+} from './view-config-utils.js';
+import { createLoaders } from './vitessce-grid-utils.js';
+import { createGenerateClassName } from './mui-utils.js';
 
-function logConfig(config, name) {
-  console.groupCollapsed(`🚄 Vitessce (${META_VERSION.version}) ${name}`);
-  console.info(`data:,${JSON.stringify(config)}`);
-  console.info(JSON.stringify(config, null, 2));
-  console.groupEnd();
-}
 
 /**
  * The Vitessce component.
@@ -38,7 +34,7 @@ function logConfig(config, name) {
  * @param {object} props.config A Vitessce view config.
  * If the config is valid, the VitessceGrid will be rendered as a child.
  * If the config is invalid, a Warning will be rendered instead.
- * @param {number} props.rowHeight Row height for grid layout. Optional.
+ * @param {undefined|number} props.rowHeight Row height for grid layout. Optional.
  * @param {number} props.height Total height for grid layout. Optional.
  * @param {string} props.theme The theme, used for styling as
  * light or dark. Optional. By default, "dark"
@@ -47,12 +43,22 @@ function logConfig(config, name) {
  * updates. Optional.
  * @param {function} props.onLoaderChange A callback for loader
  * updates. Optional.
+ * @param {boolean} props.validateConfig Whether to validate or not. Only to be
+ * set to false in controlled component situations, where bypassing validation
+ * is required for performance, and the parent knows the config
+ * is already valid (e.g., it originated from onConfigChange). By default, true.
  * @param {boolean} props.validateOnConfigChange Whether to validate
  * against the view config schema when publishing changes. Use for debugging
  * purposes, as this may have a performance impact. By default, false.
- * @param {undefined|string} props.uid A unique identifier for this Vitessce instance,
+ * @param {null|string} props.uid A unique identifier for this Vitessce instance,
  * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
  * of a CSS class name string.
+ * @param {array} props.viewTypes Plugin view types.
+ * @param {array} props.fileTypes Plugin file types.
+ * @param {array} props.jointFileTypes Plugin joint file types.
+ * @param {array} props.coordinationTypes Plugin coordination types.
+ * @param {null|object} props.warning A warning to render within the Vitessce grid,
+ * provided by the parent.
  */
 export function VitS(props) {
   const {
@@ -63,18 +69,43 @@ export function VitS(props) {
     onWarn,
     onConfigChange,
     onLoaderChange,
+    validateConfig = true,
     validateOnConfigChange = false,
-    onConfigUpgrade,
     isBounded = false,
-    uid,
+    uid = null,
+    viewTypes: viewTypesProp,
+    fileTypes: fileTypesProp,
+    jointFileTypes: jointFileTypesProp,
+    coordinationTypes: coordinationTypesProp,
+    warning,
   } = props;
 
-  const generateClassName = useMemo(() => createGenerateClassName({
-    disableGlobal: false, // Class names need to be deterministic
-    // Avoid conflicts with portal-ui MUI class names,
-    // and allow setting a UID.
-    productionPrefix: (uid ? `vit${uid}` : 'vit'),
-  }), [uid]);
+  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]);
+
+  const configVersion = config?.version;
+
+  // If config.uid exists, then use it for hook dependencies to detect changes
+  // (controlled component case). If not, then use the config object itself
+  // and assume the un-controlled component case.
+  const configKey = config?.uid || config;
+
+  const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(
+    fileTypes,
+    jointFileTypes,
+    coordinationTypes,
+    viewTypes,
+  ), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
 
   // Process the view config and memoize the result:
   // - Validate.
@@ -82,46 +113,35 @@ export function VitS(props) {
   // - Validate after upgrade, if legacy schema.
   // - Initialize (based on initStrategy).
   const [configOrWarning, success] = useMemo(() => {
-    // If the config value is undefined, show a warning message.
-    if (!config) {
-      return [
-        {
-          title: 'No such dataset',
-          unformatted: 'The dataset configuration could not be found.',
-        },
-        false,
-      ];
-    }
-    // If the view config is missing a version, show a warning message.
-    if (!config.version) {
-      return [
-        {
-          title: 'Missing version',
-          unformatted:
-            'The dataset configuration is missing a version, preventing validation.',
-        },
-        false,
-      ];
+    if (warning) {
+      return [warning, false];
     }
     logConfig(config, 'input view config');
-    // Check if this is a "legacy" view config.
-    const [upgradedConfig, upgradeSuccess] = upgradeAndValidate(
-      config,
-      onConfigUpgrade,
-    );
-    if (upgradeSuccess) {
-      logConfig(upgradedConfig, 'upgraded view config');
+    if (!validateConfig) {
+      return [config, true];
+    }
+    const result = latestConfigSchema.safeParse(config);
+    if (result.success) {
+      const upgradedConfig = result.data;
+      logConfig(upgradedConfig, 'parsed view config');
+      // Perform second round of parsing against plugin-specific config schema.
+      const pluginSpecificResult = pluginSpecificConfigSchema.safeParse(upgradedConfig);
       // Initialize the view config according to the initStrategy.
-      const [typeCheckSuccess, typeCheckMessage] = checkTypes(upgradedConfig);
-      if (typeCheckSuccess) {
+      if (pluginSpecificResult.success) {
         try {
-          const initializedConfig = initialize(upgradedConfig);
+          const upgradedConfigWithValidPlugins = pluginSpecificResult.data;
+          const initializedConfig = initialize(
+            upgradedConfigWithValidPlugins,
+            jointFileTypes,
+            coordinationTypes,
+            viewTypes,
+          );
           logConfig(initializedConfig, 'initialized view config');
           return [initializedConfig, true];
         } catch (e) {
           return [
             {
-              title: 'View config initialization failed.',
+              title: 'Config initialization failed.',
               unformatted: e.message,
             },
             false,
@@ -130,14 +150,28 @@ export function VitS(props) {
       }
       return [
         {
-          title: 'View config checks failed.',
-          unformatted: typeCheckMessage,
+          title: 'Config validation failed on second pass.',
+          unformatted: pluginSpecificResult.error.message,
         },
         false,
       ];
     }
-    return [upgradedConfig, false];
-  }, [config, onConfigUpgrade]);
+    return [{
+      title: 'Config validation failed on first pass.',
+      unformatted: result.error.message,
+    }, result.success];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configKey, configVersion, pluginSpecificConfigSchema, warning]);
+
+  const queryClient = useMemo(() => new QueryClient({
+    // Reference: https://tanstack.com/query/latest/docs/react/guides/window-focus-refetching
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 2,
+      },
+    },
+  }), [configKey]);
 
   // Emit the upgraded/initialized view config
   // to onConfigChange if necessary.
@@ -145,29 +179,53 @@ export function VitS(props) {
     if (success && !isEqual(configOrWarning, config) && onConfigChange) {
       onConfigChange(configOrWarning);
     }
-  }, [success, config, configOrWarning, onConfigChange]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configKey, configOrWarning, onConfigChange]);
+
+  // Initialize the view config and loaders in the global state.
+  const createViewConfigStoreClosure = useCallback(() => {
+    if (success) {
+      const loaders = createLoaders(
+        configOrWarning.datasets,
+        configOrWarning.description,
+        fileTypes,
+        coordinationTypes,
+      );
+      return createViewConfigStore(loaders, configOrWarning);
+    }
+    // No config found, so clear the loaders.
+    return createViewConfigStore(null, null);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configKey]);
 
   return success ? (
     <StylesProvider generateClassName={generateClassName}>
       <ThemeProvider theme={muiTheme[theme]}>
-        <ViewConfigProvider createStore={createViewConfigStore}>
-          <AuxiliaryProvider createStore={createAuxiliaryStore}>
-            <VitessceGrid
-              config={configOrWarning}
-              getComponent={getComponent}
-              rowHeight={rowHeight}
-              height={height}
-              theme={theme}
-              isBounded={isBounded}
-            />
-            <CallbackPublisher
-              onWarn={onWarn}
-              onConfigChange={onConfigChange}
-              onLoaderChange={onLoaderChange}
-              validateOnConfigChange={validateOnConfigChange}
-            />
-          </AuxiliaryProvider>
-        </ViewConfigProvider>
+        <QueryClientProvider client={queryClient}>
+          <ViewConfigProvider createStore={createViewConfigStoreClosure}>
+            <AuxiliaryProvider createStore={createAuxiliaryStore}>
+              <VitessceGrid
+                success={success}
+                configKey={configKey}
+                viewTypes={viewTypes}
+                fileTypes={fileTypes}
+                coordinationTypes={coordinationTypes}
+                config={configOrWarning}
+                rowHeight={rowHeight}
+                height={height}
+                theme={theme}
+                isBounded={isBounded}
+              />
+              <CallbackPublisher
+                onWarn={onWarn}
+                onConfigChange={onConfigChange}
+                onLoaderChange={onLoaderChange}
+                validateOnConfigChange={validateOnConfigChange}
+                pluginSpecificConfigSchema={pluginSpecificConfigSchema}
+              />
+            </AuxiliaryProvider>
+          </ViewConfigProvider>
+        </QueryClientProvider>
       </ThemeProvider>
     </StylesProvider>
   ) : (

package/src/VitessceGrid.js

@@ -3,9 +3,9 @@ import React, {
   useCallback,
 } from 'react';
 import clsx from 'clsx';
-import { VITESSCE_CONTAINER } from './classNames';
-import { VitessceGridLayout } from './vitessce-grid-layout';
-import { useRowHeight, createLoaders } from './vitessce-grid-utils';
+import { VITESSCE_CONTAINER } from './classNames.js';
+import { VitessceGridLayout } from './vitessce-grid-layout/index.js';
+import { useRowHeight, createLoaders } from './vitessce-grid-utils.js';
 import {
   useViewConfigStoreApi,
   useSetViewConfig,
@@ -14,12 +14,12 @@ import {
   useRemoveComponent,
   useChangeLayout,
   useLayout,
-} from './state/hooks';
+} from './state/hooks.js';
 import {
   useClosestVitessceContainerSize,
-} from './hooks';
-import { useVitessceContainerStyles } from './shared-mui/container';
-import { useTitleStyles } from './TitleInfo';
+} from './hooks.js';
+import { useVitessceContainerStyles } from './shared-mui/container.js';
+import { useTitleStyles } from './title-styles.js';
 
 const padding = 10;
 const margin = 5;
@@ -29,20 +29,25 @@ const margin = 5;
  * @param {object} props
  * @param {number} props.rowHeight The height of each grid row. Optional.
  * @param {object} props.config The view config.
- * @param {function} props.getComponent A function that maps component names to their
- * React counterparts.
  * @param {string} props.theme The theme name.
  * @param {number} props.height Total height for grid. Optional.
  * @param {function} props.onWarn A callback for warning messages. Optional.
+ * @param {PluginViewType[]} props.viewTypes
+ * @param {PluginFileType[]} props.fileTypes
+ * @param {PluginCoordinationType[]} props.coordinationTypes
  */
 export default function VitessceGrid(props) {
   const {
+    success,
+    configKey,
     rowHeight: initialRowHeight,
     config,
-    getComponent,
     theme,
     height,
     isBounded,
+    viewTypes,
+    fileTypes,
+    coordinationTypes,
   } = props;
 
   const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
@@ -72,29 +77,38 @@ export default function VitessceGrid(props) {
   }, [changeLayout, componentWidth]);
 
   // Update the view config and loaders in the global state.
+  // This effect is needed for the controlled component case in which
+  // the store has already been initialized with a view config,
+  // and we want to replace it with a new view config.
   useEffect(() => {
-    if (config) {
-      setViewConfig(config);
-      const loaders = createLoaders(config.datasets, config.description);
-      setLoaders(loaders);
-    } else {
-      // No config found, so clear the loaders.
-      setLoaders({});
+    let newLoaders = null;
+    let newConfig = null;
+    if (success) {
+      newLoaders = createLoaders(
+        config.datasets,
+        config.description,
+        fileTypes,
+        coordinationTypes,
+      );
+      newConfig = config;
     }
-  }, [config, setViewConfig, setLoaders]);
+    setViewConfig(newConfig);
+    setLoaders(newLoaders);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configKey]);
 
   return (
     <div
       ref={containerRef}
       className={clsx(VITESSCE_CONTAINER, classes.vitessceContainer)}
     >
-      {layout && (
+      {layout ? (
         <VitessceGridLayout
           layout={layout}
           height={height}
           rowHeight={rowHeight}
           theme={theme}
-          getComponent={getComponent}
+          viewTypes={viewTypes}
           draggableHandle={titleClasses.title}
           margin={margin}
           padding={padding}
@@ -104,7 +118,7 @@ export default function VitessceGrid(props) {
           onResize={onResize}
           onResizeStop={onResize}
         />
-      )}
+      ) : null}
     </div>
   );
 }

package/src/VitessceGrid.test.jsx

@@ -1,15 +1,17 @@
+import { describe, it, expect, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react';
 
-import VitessceGrid from './VitessceGrid';
+import React from 'react';
+import { PluginViewType } from '@vitessce/plugins';
+import VitessceGrid from './VitessceGrid.js';
 import {
   ViewConfigProvider, createViewConfigStore,
   AuxiliaryProvider, createAuxiliaryStore,
-} from './state/hooks';
+} from './state/hooks.js';
 
 afterEach(() => {
-  cleanup()
+  cleanup();
 });
 
 describe('VitessceGrid.js', () => {
@@ -31,14 +33,27 @@ describe('VitessceGrid.js', () => {
         ],
       };
 
+      function createViewConfigStoreClosure() {
+        return createViewConfigStore(null, config);
+      }
+
       function FakeComponent() {
         return <p>FakeComponent!</p>;
       }
-      const getComponent = () => FakeComponent;
+      const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+      const fileTypes = [];
+      const coordinationTypes = [];
       render(
-        <ViewConfigProvider createStore={createViewConfigStore}>
+        <ViewConfigProvider createStore={createViewConfigStoreClosure}>
           <AuxiliaryProvider createStore={createAuxiliaryStore}>
-            <VitessceGrid config={config} getComponent={getComponent} />
+            <VitessceGrid
+              success
+              configKey={null}
+              config={config}
+              viewTypes={viewTypes}
+              fileTypes={fileTypes}
+              coordinationTypes={coordinationTypes}
+            />
           </AuxiliaryProvider>
         </ViewConfigProvider>,
       );

package/src/Warning.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import { VITESSCE_CONTAINER } from './classNames';
+import { makeStyles } from '@material-ui/core';
+import { VITESSCE_CONTAINER } from './classNames.js';
 
 const useStyles = makeStyles(theme => ({
   warningLayout: {
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   row: {
     flexGrow: '1',
   },
-  card: {
+  warningCard: {
     border: `1px solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
@@ -50,7 +50,7 @@ export function Warning(props) {
     <div className={VITESSCE_CONTAINER}>
       <div className={clsx(classes.warningLayout, classes.containerFluid)}>
         <div className={classes.row}>
-          <div className={classes.card}>
+          <div className={classes.warningCard}>
             <h1>{title}</h1>
             {preformatted ? (<pre>{preformatted}</pre>) : null}
             <p>{unformatted}</p>

package/src/data/AbstractLoader.js

@@ -1,7 +1,3 @@
-import Ajv from 'ajv';
-import { OptionsValidationError } from '../errors/index';
-import { emptySchema } from '../file-options-schemas';
-
 /**
  * A loader ancestor class containing a default constructor
  * and a stub for the required load() method.
@@ -18,29 +14,10 @@ export default class AbstractLoader {
     this.requestInit = requestInit;
     this.options = options;
     this.coordinationValues = coordinationValues;
-    this.optionsSchema = emptySchema;
-  }
-
-  validateOptions() {
-    const { optionsSchema, options } = this;
-    const validate = new Ajv().compile(optionsSchema);
-    const valid = validate(options || null);
-    if (!valid) {
-      return [false, validate.errors];
-    }
-    return [true, null];
   }
 
+  // eslint-disable-next-line class-methods-use-this
   load() {
-    const {
-      fileType, url, options,
-    } = this;
-    const [optionsAreValid, optionsFailureReason] = this.validateOptions();
-    if (!optionsAreValid) {
-      return Promise.reject(
-        new OptionsValidationError(fileType, url, options, optionsFailureReason),
-      );
-    }
-    return Promise.resolve(optionsAreValid);
+    return Promise.resolve(true);
   }
 }

package/src/data/AbstractTwoStepLoader.js

@@ -1,4 +1,4 @@
-import AbstractLoader from './AbstractLoader';
+import AbstractLoader from './AbstractLoader.js';
 
 export default class AbstractTwoStepLoader extends AbstractLoader {
   constructor(dataSource, params) {

package/src/data/LoaderResult.js

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

package/src/data/index.js

@@ -1,3 +1,3 @@
-export { default as AbstractLoader } from './AbstractLoader';
-export { default as AbstractTwoStepLoader } from './AbstractTwoStepLoader';
-export { default as LoaderResult } from './LoaderResult';
+export { default as AbstractLoader } from './AbstractLoader.js';
+export { default as AbstractTwoStepLoader } from './AbstractTwoStepLoader.js';
+export { default as LoaderResult } from './LoaderResult.js';

package/src/data/loader-registry.js

@@ -1,19 +1,28 @@
-import {
-  getLoaderClassesForPluginFileType,
-} from '../plugins';
-
-export const fileTypeToLoaderAndSource = {};
-
-export function getSourceAndLoaderFromFileType(type) {
-  if (fileTypeToLoaderAndSource[type]) {
-    return fileTypeToLoaderAndSource[type];
-  }
-  const pluginFileType = getLoaderClassesForPluginFileType(type);
-  if (pluginFileType) {
-    return pluginFileType;
+/**
+ * Get the data source and data loader class.
+ * @param {string} type The fileType name.
+ * @param {PluginFileType[]} fileTypes The array of file types.
+ * @returns {array} [dataSourceClass, dataLoaderClass].
+ */
+export function getSourceAndLoaderFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.getSourceAndLoader();
+    }
   }
   // Fallback to JSON.
   // TODO(monorepo)
   // return [JsonSource, JsonLoader];
   return [null, null];
 }
+
+export function getDataTypeFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.dataType;
+    }
+  }
+  return null;
+}