@vitessce/vit-s 2.0.3-beta.0 → 2.0.3

package/src/vitessce-grid-utils.js

@@ -0,0 +1,160 @@
+import {
+  useState, useEffect, useRef,
+} from 'react';
+import { InternMap } from 'internmap';
+import isEqual from 'lodash/isEqual';
+import pick from 'lodash/pick';
+import { DEFAULT_COORDINATION_VALUES, DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
+import { getSourceAndLoaderFromFileType } from './data/loader-registry';
+import { getFileTypeDataTypeMapping } from './plugins';
+
+/**
+ * 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) {
+  const defaultKeys = DATA_TYPE_COORDINATION_VALUE_USAGE[dataType]
+    .filter(k => (
+      Object.keys(DEFAULT_COORDINATION_VALUES).includes(k)
+      && DEFAULT_COORDINATION_VALUES[k]
+      && !Object.keys(coordinationValues).includes(k)
+    ));
+  const defaultValues = pick(DEFAULT_COORDINATION_VALUES, 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
+ * view config.
+ * @returns {object} Mapping from dataset ID to data type to loader
+ * instance.
+ */
+export function createLoaders(datasets, configDescription) {
+  const result = {};
+  const dataSources = {};
+  const fileTypeDataTypeMapping = getFileTypeDataTypeMapping();
+  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 = fileTypeDataTypeMapping[fileType];
+      const coordinationValuesWithDefaults = withDefaults(
+        coordinationValues, dataType,
+        fileType, dataset.uid,
+      );
+      const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType);
+      // 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/dist/CallbackPublisher.js

@@ -1,68 +0,0 @@
-import { useEffect } from 'react';
-import { SCHEMA_HANDLERS, LATEST_VERSION } from './view-config-versions';
-import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks';
-function validateViewConfig(viewConfig) {
-    // 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}`);
-        }
-    }
-    catch (e) {
-        console.error(e);
-    }
-    // Do nothing if successful.
-}
-/**
- * This is a dummy component which handles
- * publishing new view configs and loaders to
- * the provided callbacks on changes.
- * @param {object} props
- * @param {function} props.onConfigChange A callback function
- * to execute on each change of the Vitessce view config.
- * @param {function} props.onLoaderChange A callback function
- * to execute on each change of the loaders object.
- * @param {boolean} props.validateOnConfigChange Whether to validate
- * against the view config schema when publishing changes.
- */
-export default function CallbackPublisher(props) {
-    const { onWarn, onConfigChange, onLoaderChange, validateOnConfigChange, } = props;
-    const warning = useWarning();
-    const loaders = useLoaders();
-    const viewConfigStoreApi = useViewConfigStoreApi();
-    // View config updates are often-occurring, so
-    // we want to use the "transient update" approach
-    // to subscribe to view config changes.
-    // Reference: https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes
-    useEffect(() => viewConfigStoreApi.subscribe(
-    // The function to run on each publish.
-    (viewConfig) => {
-        if (validateOnConfigChange && viewConfig) {
-            validateViewConfig(viewConfig);
-        }
-        if (onConfigChange && viewConfig) {
-            onConfigChange(viewConfig);
-        }
-    }, 
-    // The function to specify which part of the store
-    // we want to subscribe to.
-    state => state.viewConfig), [onConfigChange, validateOnConfigChange, viewConfigStoreApi]);
-    // Emit updates to the warning message.
-    useEffect(() => {
-        if (onWarn && warning) {
-            onWarn(warning);
-        }
-    }, [warning, onWarn]);
-    // Emit updates to the loaders.
-    useEffect(() => {
-        if (onLoaderChange && loaders) {
-            onLoaderChange(loaders);
-        }
-    }, [loaders, onLoaderChange]);
-    // Render nothing.
-    return null;
-}

package/dist/LoadingIndicator.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
-const useStyles = makeStyles(() => ({
-    loadingIndicatorBackdrop: {
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        zIndex: '1040',
-        width: '100%',
-        height: '100%',
-        borderRadius: '4px',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    loadingIndicatorContainer: {
-        display: 'grid',
-        placeItems: 'center',
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-    },
-}));
-export default function LoadingIndicator() {
-    const classes = useStyles();
-    return (_jsx("div", { className: classes.loadingIndicatorBackdrop, children: _jsx("div", { className: classes.loadingIndicatorContainer, children: _jsx(CircularProgress, {}) }) }));
-}

package/dist/TitleInfo.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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 { TOOLTIP_ANCESTOR } from './classNames';
-import LoadingIndicator from './LoadingIndicator';
-import { PopperMenu } from './shared-mui/components';
-const useStyles = makeStyles(theme => ({
-    iconButton: {
-        border: 'none',
-        marginLeft: 0,
-        background: 'none',
-        color: theme.palette.primaryForeground,
-        paddingLeft: '0.25em',
-        paddingRight: '0.25em',
-        borderRadius: '2px',
-        '&:hover': {
-            backgroundColor: theme.palette.primaryBackgroundLight,
-        },
-        '&:first-child': {
-            marginLeft: '0.25em',
-        },
-        '&:last-child': {
-            marginRight: '0.25em',
-        },
-        '& svg': {
-            width: '0.7em',
-            height: '0.7em',
-            verticalAlign: 'middle',
-            overflow: 'visible',
-        },
-    },
-    downloadLink: {
-        color: theme.palette.primaryForeground,
-    },
-}));
-function SettingsIconWithArrow({ open }) {
-    return (_jsxs(_Fragment, { children: [_jsx(SettingsIcon, {}), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }));
-}
-function PlotOptions(props) {
-    const { options } = props;
-    const [open, setOpen] = useState(false);
-    const classes = useStyles();
-    return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(SettingsIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", children: options })) : null);
-}
-function CloudDownloadIconWithArrow({ open }) {
-    return (_jsxs(_Fragment, { children: [_jsx(CloudDownloadIcon, {}), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }));
-}
-function DownloadOptions(props) {
-    const { urls } = props;
-    const [open, setOpen] = useState(false);
-    const classes = useStyles();
-    return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(CloudDownloadIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, children: _jsxs(Link, { underline: "none", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
-}
-function ClosePaneButton(props) {
-    const { removeGridComponent } = props;
-    const classes = useStyles();
-    return (_jsx(IconButton, { onClick: removeGridComponent, size: "small", className: classes.iconButton, title: "close", children: _jsx(CloseIcon, {}) }));
-}
-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, isReady, options, } = props;
-    const classes = useTitleStyles();
-    return (
-    // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleLeft, children: title }), _jsx("div", { className: classes.titleInfo, title: info, children: info }), _jsxs("div", { className: classes.titleButtons, children: [_jsx(PlotOptions, { options: options }), _jsx(DownloadOptions, { urls: urls }), _jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
-                    [classes.scrollCard]: isScroll,
-                    [classes.spatialCard]: isSpatial,
-                    [classes.noScrollCard]: !isScroll && !isSpatial,
-                }), children: [!isReady && _jsx(LoadingIndicator, {}), children] })] })
-    // "pl-2" only matters when the window is very narrow.
-    );
-}

package/dist/VitS.js

@@ -1,117 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable camelcase */
-import React, { useEffect, useMemo } 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';
-import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks';
-import VitessceGrid from './VitessceGrid';
-import { Warning } from './Warning';
-import CallbackPublisher from './CallbackPublisher';
-import { getComponent } from './component-registry';
-import { checkTypes, initialize, upgradeAndValidate, } from './view-config-utils';
-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.
- * @param {object} props
- * @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 {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"
- * @param {function} props.onWarn A callback for warning messages. Optional.
- * @param {function} props.onConfigChange A callback for view config
- * updates. Optional.
- * @param {function} props.onLoaderChange A callback for loader
- * updates. Optional.
- * @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,
- * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
- * of a CSS class name string.
- */
-export function VitS(props) {
-    const { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateOnConfigChange = false, onConfigUpgrade, isBounded = false, uid, } = props;
-    const generateClassName = useMemo(() => createGenerateClassName({
-        disableGlobal: false,
-        // Avoid conflicts with portal-ui MUI class names,
-        // and allow setting a UID.
-        productionPrefix: (uid ? `vit${uid}` : 'vit'),
-    }), [uid]);
-    // 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,
-            ];
-        }
-        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');
-            // Initialize the view config according to the initStrategy.
-            const [typeCheckSuccess, typeCheckMessage] = checkTypes(upgradedConfig);
-            if (typeCheckSuccess) {
-                try {
-                    const initializedConfig = initialize(upgradedConfig);
-                    logConfig(initializedConfig, 'initialized view config');
-                    return [initializedConfig, true];
-                }
-                catch (e) {
-                    return [
-                        {
-                            title: 'View config initialization failed.',
-                            unformatted: e.message,
-                        },
-                        false,
-                    ];
-                }
-            }
-            return [
-                {
-                    title: 'View config checks failed.',
-                    unformatted: typeCheckMessage,
-                },
-                false,
-            ];
-        }
-        return [upgradedConfig, false];
-    }, [config, onConfigUpgrade]);
-    // Emit the upgraded/initialized view config
-    // to onConfigChange if necessary.
-    useEffect(() => {
-        if (success && !isEqual(configOrWarning, config) && onConfigChange) {
-            onConfigChange(configOrWarning);
-        }
-    }, [success, config, configOrWarning, onConfigChange]);
-    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(ViewConfigProvider, { createStore: createViewConfigStore, children: _jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [_jsx(VitessceGrid, { config: configOrWarning, getComponent: getComponent, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange })] }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
-}

package/dist/Vitessce.integration.test.js

@@ -1,36 +0,0 @@
-"use strict";
-/* eslint-disable max-len */
-// import React from 'react';
-// import Adapter from 'enzyme-adapter-react-16';
-// import { mount, configure } from 'enzyme';
-// import Ajv from 'ajv';
-// import expect from 'expect';
-// import Vitessce from './Vitessce';
-// import { configs } from './api';
-// import configSchema from '../schemas/config.schema.json';
-// configure({ adapter: new Adapter() });
-// describe('Vitessce.js', () => {
-//   describe('<Vitessce />', () => {
-//     it('Produces valid view config', (done) => {
-//       const config = configs['linnarsson-2018'];
-//       let updatedConfig = {};
-//       // eslint-disable-next-line no-return-assign
-//       const wrapper = mount(<Vitessce config={config} onConfigChange={c => updatedConfig = c} />);
-//       setTimeout(() => {
-//         // Simulate usage of some of the app
-//         wrapper.find('[id^="deckgl-overlay-"]').at(0).simulate('wheel', { deltaY: 1000, deltaX: 1000 });
-//         wrapper.find('[id^="deckgl-overlay-"]').at(1).simulate('wheel', { deltaY: 1000, deltaX: 1000 });
-//         wrapper.find('[id^="deckgl-overlay-"]').at(2).simulate('wheel', { deltaY: 1000, deltaX: 1000 });
-//         const validate = new Ajv().compile(configSchema);
-//         const valid = validate(updatedConfig);
-//         if (!valid) {
-//           const failureReason = JSON.stringify(validate.errors, null, 2);
-//           console.error(failureReason);
-//         }
-//         expect(valid).toEqual(true);
-//         wrapper.unmount();
-//         done();
-//       }, 20000);
-//     }).timeout(30000);
-//   });
-// });

package/dist/Vitessce.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable camelcase */
-import React, { useEffect, useMemo } from 'react';
-import { ThemeProvider, StylesProvider, createGenerateClassName, } from '@material-ui/core/styles';
-import isEqual from 'lodash/isEqual';
-import { muiTheme } from './shared-mui/styles';
-import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks';
-import VitessceGrid from './VitessceGrid';
-import { Warning } from './Warning';
-import CallbackPublisher from './CallbackPublisher';
-import { getComponent } from './component-registry';
-import { checkTypes, initialize, upgradeAndValidate } from './view-config-utils';
-// TODO(monorepo): figure out how to get the current package version from package.json
-// import packageJson from '../package.json';
-const packageJson = { version: 'unk' };
-const generateClassName = createGenerateClassName({
-    disableGlobal: true,
-});
-function logConfig(config, name) {
-    console.groupCollapsed(`🚄 Vitessce (${packageJson.version}) ${name}`);
-    console.info(`data:,${JSON.stringify(config)}`);
-    console.info(JSON.stringify(config, null, 2));
-    console.groupEnd();
-}
-/**
- * The Vitessce component.
- * @param {object} props
- * @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 {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"
- * @param {function} props.onWarn A callback for warning messages. Optional.
- * @param {function} props.onConfigChange A callback for view config
- * updates. Optional.
- * @param {function} props.onLoaderChange A callback for loader
- * updates. Optional.
- * @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.
- */
-export function Vitessce(props) {
-    const { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateOnConfigChange = false, onConfigUpgrade, isBounded = false, } = props;
-    // 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];
-        }
-        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');
-            // Initialize the view config according to the initStrategy.
-            const [typeCheckSuccess, typeCheckMessage] = checkTypes(upgradedConfig);
-            if (typeCheckSuccess) {
-                try {
-                    const initializedConfig = initialize(upgradedConfig);
-                    logConfig(initializedConfig, 'initialized view config');
-                    return [initializedConfig, true];
-                }
-                catch (e) {
-                    return [{
-                            title: 'View config initialization failed.',
-                            unformatted: e.message,
-                        }, false];
-                }
-            }
-            return [{
-                    title: 'View config checks failed.',
-                    unformatted: typeCheckMessage,
-                }, false];
-        }
-        return [upgradedConfig, false];
-    }, [config, onConfigUpgrade]);
-    // Emit the upgraded/initialized view config
-    // to onConfigChange if necessary.
-    useEffect(() => {
-        if (success && !isEqual(configOrWarning, config) && onConfigChange) {
-            onConfigChange(configOrWarning);
-        }
-    }, [success, config, configOrWarning, onConfigChange]);
-    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(ViewConfigProvider, { createStore: createViewConfigStore, children: _jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [_jsx(VitessceGrid, { config: configOrWarning, getComponent: getComponent, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange })] }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
-}