@vitessce/vit-s 2.0.3 → 3.0.0

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

@@ -0,0 +1,141 @@
+import { useState, useEffect, useRef, } from 'react';
+import { InternMap } from 'internmap';
+import { isEqual, pick } from 'lodash-es';
+import { fromEntries } from '@vitessce/utils';
+import { DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
+import { getSourceAndLoaderFromFileType, getDataTypeFromFileType } from './data/loader-registry.js';
+/**
+ * Return the bottom coordinate of the layout.
+ * https://github.com/STRML/react-grid-layout/blob/20dac73f91274526034c00968b5bedb9c2ed36b9/lib/utils.js#L82
+ * @param  {array} layout react-grid-layout layout array.
+ * @returns {number} Bottom coordinate.
+ */
+function getNumRows(layout) {
+    let max = 0;
+    let bottomY;
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0, len = layout.length; i < len; i++) {
+        bottomY = layout[i].y + layout[i].h;
+        if (bottomY > max)
+            max = bottomY;
+    }
+    return max;
+}
+/**
+ * Compute the row height based on the container height, number of rows,
+ * and margin/padding. Basically the reverse of the react-grid-layout's
+ * `.containerHeight()` function.
+ * https://github.com/STRML/react-grid-layout/blob/83251e5e682abfa3252ff89d4bacf47fdc1f4270/lib/ReactGridLayout.jsx#L223
+ * @param {number} containerHeight The height of the .vitessce-container element.
+ * @param {number} numRows The number of rows in the layout.
+ * @param {number} margin The margin value that will be passed to VitessceGrid.
+ * @param {number} padding The padding value that will be passed to VitessceGrid.
+ * @returns {number} The new row height value.
+ */
+function getRowHeight(containerHeight, numRows, margin, padding) {
+    const effectiveContainerHeight = containerHeight - 2 * padding - (numRows - 1) * margin;
+    return effectiveContainerHeight / numRows;
+}
+export function useRowHeight(config, initialRowHeight, height, margin, padding) {
+    const [containerHeight, setContainerHeight] = useState(height);
+    const [rowHeight, setRowHeight] = useState(initialRowHeight);
+    const containerRef = useRef();
+    // Detect when the `config` or `containerHeight` variables
+    // have changed, and update `rowHeight` in response.
+    useEffect(() => {
+        const numRows = getNumRows(config.layout);
+        const newRowHeight = getRowHeight(containerHeight, numRows, margin, padding);
+        setRowHeight(newRowHeight);
+    }, [containerHeight, config, margin, padding]);
+    // Update the `containerHeight` state when the `height` prop has changed.
+    useEffect(() => {
+        if (height !== null && height !== undefined) {
+            setContainerHeight(height);
+        }
+    }, [height]);
+    // If no height prop has been provided, set the `containerHeight`
+    // using height of the `.vitessce-container` element.
+    // Check the container element height whenever the window has been
+    // resized, as it may change if `.vitessce-container` should be
+    // sized relative to its parent (and by extension, potentially the window).
+    useEffect(() => {
+        if (height !== null && height !== undefined) {
+            // eslint will complain if the return value is inconsistent,
+            // so return a no-op function.
+            return () => { };
+        }
+        function onWindowResize() {
+            if (!containerRef.current)
+                return;
+            const containerRect = containerRef.current.getBoundingClientRect();
+            setContainerHeight(containerRect.height);
+        }
+        window.addEventListener('resize', onWindowResize);
+        onWindowResize();
+        return () => {
+            window.removeEventListener('resize', onWindowResize);
+        };
+    }, [containerRef, height]);
+    return [rowHeight, containerRef];
+}
+function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaultCoordinationValues) {
+    const defaultKeys = DATA_TYPE_COORDINATION_VALUE_USAGE[dataType]
+        .filter(k => (Object.keys(defaultCoordinationValues).includes(k)
+        && defaultCoordinationValues[k]
+        && !Object.keys(coordinationValues).includes(k)));
+    const defaultValues = pick(defaultCoordinationValues, defaultKeys);
+    const coordinationValuesWithDefaults = {
+        ...defaultValues,
+        // The user-provided values should take precedence.
+        ...coordinationValues,
+    };
+    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)}`);
+    }
+    return coordinationValuesWithDefaults;
+}
+/**
+ * Create a mapping from dataset ID to loader objects by data type.
+ * @param {object[]} datasets The datasets array from the view config.
+ * @param {string} configDescription The top-level description in the
+ * @param {PluginFileType[]} fileTypes
+ * @param {PluginCoordinationType[]} coordinationTypes
+ * view config.
+ * @returns {object} Mapping from dataset ID to data type to loader
+ * instance.
+ */
+export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
+    const result = {};
+    const dataSources = {};
+    const defaultCoordinationValues = fromEntries(coordinationTypes.map(ct => ([ct.name, ct.defaultValue])));
+    datasets.forEach((dataset) => {
+        const datasetLoaders = {
+            name: dataset.name,
+            description: dataset.description || configDescription,
+            loaders: {},
+        };
+        dataset.files.forEach((file) => {
+            const { url, options, requestInit, fileType, coordinationValues = {}, } = file;
+            const dataType = getDataTypeFromFileType(fileType, fileTypes);
+            const coordinationValuesWithDefaults = withDefaults(coordinationValues, dataType, fileType, dataset.uid, defaultCoordinationValues);
+            const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
+            // Create _one_ DataSourceClass instance per URL. Derived loaders share this object.
+            const fileId = url || JSON.stringify(options);
+            if (!(fileId in dataSources)) {
+                dataSources[fileId] = new DataSourceClass({ url, requestInit });
+            }
+            const loader = new LoaderClass(dataSources[fileId], file);
+            if (datasetLoaders.loaders[dataType]) {
+                datasetLoaders.loaders[dataType].set(coordinationValuesWithDefaults, loader);
+            }
+            else {
+                datasetLoaders.loaders[dataType] = new InternMap([
+                    [coordinationValuesWithDefaults, loader],
+                ], JSON.stringify);
+            }
+        });
+        result[dataset.uid] = datasetLoaders;
+    });
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,30 +8,36 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "@material-ui/icons": "~4.11.2",
-    "ajv": "^6.10.0",
     "clsx": "^1.1.1",
+    "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
     "internmap": "^2.0.3",
     "jss-plugin-global": "^10.9.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react-grid-layout-with-lodash": "^1.3.5",
-    "uuid": "^3.3.2",
+    "uuid": "^9.0.0",
     "zustand": "^3.5.10",
-    "@vitessce/constants-internal": "2.0.3",
-    "@vitessce/utils": "2.0.3"
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/plugins": "3.0.0",
+    "@vitessce/schemas": "3.0.0",
+    "@vitessce/utils": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.3.0",
+    "vitest": "^0.23.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -39,5 +45,12 @@
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/CallbackPublisher.js

@@ -1,17 +1,12 @@
 import { useEffect } from 'react';
-import { SCHEMA_HANDLERS, LATEST_VERSION } from './view-config-versions';
-import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks';
+import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks.js';
 
-function validateViewConfig(viewConfig) {
+
+function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
   // Need the try-catch here since Zustand will actually
   // just catch and ignore errors in its subscription callbacks.
   try {
-    const validate = SCHEMA_HANDLERS[LATEST_VERSION][0];
-    const valid = validate(viewConfig);
-    if (!valid) {
-      const failureReason = JSON.stringify(validate.errors, null, 2);
-      throw new Error(`Config validation failed: ${failureReason}`);
-    }
+    pluginSpecificConfigSchema.parse(viewConfig);
   } catch (e) {
     console.error(e);
   }
@@ -36,6 +31,7 @@ export default function CallbackPublisher(props) {
     onConfigChange,
     onLoaderChange,
     validateOnConfigChange,
+    pluginSpecificConfigSchema,
   } = props;
 
   const warning = useWarning();
@@ -51,7 +47,7 @@ export default function CallbackPublisher(props) {
     // The function to run on each publish.
     (viewConfig) => {
       if (validateOnConfigChange && viewConfig) {
-        validateViewConfig(viewConfig);
+        validateViewConfig(viewConfig, pluginSpecificConfigSchema);
       }
       if (onConfigChange && viewConfig) {
         onConfigChange(viewConfig);
@@ -60,7 +56,7 @@ export default function CallbackPublisher(props) {
     // The function to specify which part of the store
     // we want to subscribe to.
     state => state.viewConfig,
-  ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi]);
+  ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi, pluginSpecificConfigSchema]);
 
   // Emit updates to the warning message.
   useEffect(() => {

package/src/LoadingIndicator.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, CircularProgress } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   loadingIndicatorBackdrop: {

package/src/TitleInfo.js

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
-import MenuItem from '@material-ui/core/MenuItem';
-import IconButton from '@material-ui/core/IconButton';
-import Link from '@material-ui/core/Link';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
-import SettingsIcon from '@material-ui/icons/Settings';
-import CloseIcon from '@material-ui/icons/Close';
+import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
+import {
+  CloudDownload as CloudDownloadIcon,
+  ArrowDropDown as ArrowDropDownIcon,
+  ArrowDropUp as ArrowDropUpIcon,
+  Settings as SettingsIcon,
+  Close as CloseIcon,
+} from '@material-ui/icons';
 
-import { TOOLTIP_ANCESTOR } from './classNames';
-import LoadingIndicator from './LoadingIndicator';
-import { PopperMenu } from './shared-mui/components';
+import { TOOLTIP_ANCESTOR } from './classNames.js';
+import LoadingIndicator from './LoadingIndicator.js';
+import { PopperMenu } from './shared-mui/components.js';
+import { useTitleStyles } from './title-styles.js';
 
 const useStyles = makeStyles(theme => ({
   iconButton: {
@@ -117,79 +117,6 @@ function ClosePaneButton(props) {
   );
 }
 
-export const useTitleStyles = makeStyles(theme => ({
-  title: {
-    color: theme.palette.primaryForeground,
-    overflowX: 'hidden',
-    display: 'flex',
-    flexDirection: 'row',
-    flexShrink: '0',
-  },
-  titleLeft: {
-    flexShrink: '1',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  titleInfo: {
-    width: '100%',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontSize: '80% !important',
-    opacity: '.8',
-    padding: '0 4px',
-    justifyContent: 'center',
-    lineHeight: '25px !important',
-    flexShrink: '1',
-    textAlign: 'right !important',
-  },
-  titleButtons: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexGrow: '1',
-    flexShrink: '0',
-    justifyContent: 'right',
-    '& div': {
-      display: 'inline-block',
-    },
-  },
-  card: {
-    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',
-  },
-  noScrollCard: {
-    backgroundColor: theme.palette.secondaryBackground,
-    color: theme.palette.secondaryForeground,
-  },
-  scrollCard: {
-    backgroundColor: theme.palette.primaryBackground,
-    color: theme.palette.primaryForeground,
-    '& a': {
-      color: theme.palette.primaryForegroundActive,
-    },
-    overflowY: 'auto',
-  },
-  spatialCard: {
-    backgroundColor: theme.palette.black,
-    color: theme.palette.white,
-    '& a': {
-      color: theme.palette.white,
-    },
-  },
-}));
-
-
 export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,

package/src/VitS.js

@@ -1,29 +1,26 @@
-/* eslint-disable camelcase */
 import React, { useEffect, useMemo } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
   createGenerateClassName,
-} from '@material-ui/core/styles';
-import isEqual from 'lodash/isEqual';
+} from '@material-ui/core/es/styles/index.js';
+import { isEqual } from 'lodash-es';
 import { META_VERSION } from '@vitessce/constants-internal';
-import { muiTheme } from './shared-mui/styles';
+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';
+} from './view-config-utils.js';
 
 function logConfig(config, name) {
   console.groupCollapsed(`🚄 Vitessce (${META_VERSION.version}) ${name}`);
@@ -38,7 +35,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"
@@ -53,6 +50,12 @@ function logConfig(config, name) {
  * @param {undefined|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 {
@@ -64,11 +67,26 @@ export function VitS(props) {
     onConfigChange,
     onLoaderChange,
     validateOnConfigChange = false,
-    onConfigUpgrade,
     isBounded = false,
     uid,
+    viewTypes: viewTypesProp,
+    fileTypes: fileTypesProp,
+    jointFileTypes: jointFileTypesProp,
+    coordinationTypes: coordinationTypesProp,
+    warning,
   } = props;
 
+  const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
+  const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
+  const jointFileTypes = useMemo(
+    () => (jointFileTypesProp || []),
+    [jointFileTypesProp],
+  );
+  const coordinationTypes = useMemo(
+    () => (coordinationTypesProp || []),
+    [coordinationTypesProp],
+  );
+
   const generateClassName = useMemo(() => createGenerateClassName({
     disableGlobal: false, // Class names need to be deterministic
     // Avoid conflicts with portal-ui MUI class names,
@@ -76,52 +94,48 @@ export function VitS(props) {
     productionPrefix: (uid ? `vit${uid}` : 'vit'),
   }), [uid]);
 
+  const configUid = config?.uid;
+  const configVersion = config?.version;
+
+  const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(
+    fileTypes,
+    jointFileTypes,
+    coordinationTypes,
+    viewTypes,
+  ), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
+
   // Process the view config and memoize the result:
   // - Validate.
   // - Upgrade, if legacy schema.
   // - 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) {
+    const result = latestConfigSchema.safeParse(config);
+    if (result.success) {
+      const upgradedConfig = result.data;
       logConfig(upgradedConfig, 'upgraded 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 +144,18 @@ 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
+  }, [configUid, configVersion, pluginSpecificConfigSchema, warning]);
 
   // Emit the upgraded/initialized view config
   // to onConfigChange if necessary.
@@ -145,7 +163,8 @@ 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, configUid, configOrWarning, onConfigChange]);
 
   return success ? (
     <StylesProvider generateClassName={generateClassName}>
@@ -153,8 +172,10 @@ export function VitS(props) {
         <ViewConfigProvider createStore={createViewConfigStore}>
           <AuxiliaryProvider createStore={createAuxiliaryStore}>
             <VitessceGrid
+              viewTypes={viewTypes}
+              fileTypes={fileTypes}
+              coordinationTypes={coordinationTypes}
               config={configOrWarning}
-              getComponent={getComponent}
               rowHeight={rowHeight}
               height={height}
               theme={theme}
@@ -165,6 +186,7 @@ export function VitS(props) {
               onConfigChange={onConfigChange}
               onLoaderChange={onLoaderChange}
               validateOnConfigChange={validateOnConfigChange}
+              pluginSpecificConfigSchema={pluginSpecificConfigSchema}
             />
           </AuxiliaryProvider>
         </ViewConfigProvider>

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,23 @@ 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 {
     rowHeight: initialRowHeight,
     config,
-    getComponent,
     theme,
     height,
     isBounded,
+    viewTypes,
+    fileTypes,
+    coordinationTypes,
   } = props;
 
   const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
@@ -75,13 +78,18 @@ export default function VitessceGrid(props) {
   useEffect(() => {
     if (config) {
       setViewConfig(config);
-      const loaders = createLoaders(config.datasets, config.description);
+      const loaders = createLoaders(
+        config.datasets,
+        config.description,
+        fileTypes,
+        coordinationTypes,
+      );
       setLoaders(loaders);
     } else {
       // No config found, so clear the loaders.
       setLoaders({});
     }
-  }, [config, setViewConfig, setLoaders]);
+  }, [config, setViewConfig, setLoaders, fileTypes, coordinationTypes]);
 
   return (
     <div
@@ -94,7 +102,7 @@ export default function VitessceGrid(props) {
           height={height}
           rowHeight={rowHeight}
           theme={theme}
-          getComponent={getComponent}
+          viewTypes={viewTypes}
           draggableHandle={titleClasses.title}
           margin={margin}
           padding={padding}