@vitessce/vit-s 2.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/CallbackPublisher.js

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,27 @@
+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: '0.25rem',
+        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

@@ -0,0 +1,151 @@
+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 0.25rem',
+        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: '0.75rem',
+        marginTop: '0.5rem',
+        marginBottom: '0.5rem',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '0',
+        wordWrap: 'break-word',
+        backgroundClip: 'border-box',
+        borderRadius: '0.25rem',
+    },
+    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

@@ -0,0 +1,113 @@
+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 VitS(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 }) }) }));
+}

package/dist/Vitessce.integration.test.js

@@ -0,0 +1,36 @@
+"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

@@ -0,0 +1,101 @@
+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 }) }) }));
+}

package/dist/VitessceGrid.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, 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 { useViewConfigStoreApi, useSetViewConfig, useSetLoaders, useEmitGridResize, useRemoveComponent, useChangeLayout, useLayout, } from './state/hooks';
+import { useClosestVitessceContainerSize, } from './hooks';
+import { useVitessceContainerStyles } from './shared-mui/container';
+import { useTitleStyles } from './TitleInfo';
+const padding = 10;
+const margin = 5;
+/**
+ * The wrapper for the VitessceGrid and LoadingIndicator components.
+ * @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.
+ */
+export default function VitessceGrid(props) {
+    const { rowHeight: initialRowHeight, config, getComponent, theme, height, isBounded, } = props;
+    const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
+    const onResize = useEmitGridResize();
+    const [componentWidth] = useClosestVitessceContainerSize(containerRef);
+    const classes = useVitessceContainerStyles();
+    const titleClasses = useTitleStyles();
+    // When the row height has changed, publish a GRID_RESIZE event.
+    useEffect(() => {
+        onResize();
+    }, [rowHeight, onResize]);
+    const viewConfigStoreApi = useViewConfigStoreApi();
+    const setViewConfig = useSetViewConfig(viewConfigStoreApi);
+    const setLoaders = useSetLoaders();
+    const removeComponent = useRemoveComponent();
+    const changeLayout = useChangeLayout();
+    const layout = useLayout();
+    const changeLayoutPostMount = useCallback(() => (componentWidth > 0 ? changeLayout : () => { }), [changeLayout, componentWidth]);
+    // Update the view config and loaders in the global state.
+    useEffect(() => {
+        if (config) {
+            setViewConfig(config);
+            const loaders = createLoaders(config.datasets, config.description);
+            setLoaders(loaders);
+        }
+        else {
+            // No config found, so clear the loaders.
+            setLoaders({});
+        }
+    }, [config, setViewConfig, setLoaders]);
+    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), children: layout && (_jsx(VitessceGridLayout, { layout: layout, height: height, rowHeight: rowHeight, theme: theme, getComponent: getComponent, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize })) }));
+}

package/dist/VitessceGrid.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach } from 'vitest';
+import VitessceGrid from './VitessceGrid';
+import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks';
+afterEach(() => {
+    cleanup();
+});
+describe('VitessceGrid.js', () => {
+    describe('<VitessceGrid />', () => {
+        it('renders', async () => {
+            const config = {
+                version: '1.0.0',
+                description: 'fake description',
+                datasets: [],
+                name: 'fake name',
+                layout: [
+                    {
+                        component: 'FakeComponent',
+                        props: { description: 'fake prop description' },
+                        uid: 'A',
+                        x: 0,
+                        y: 0,
+                    },
+                ],
+            };
+            function FakeComponent() {
+                return _jsx("p", { children: "FakeComponent!" });
+            }
+            const getComponent = () => FakeComponent;
+            render(_jsx(ViewConfigProvider, { createStore: createViewConfigStore, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsx(VitessceGrid, { config: config, getComponent: getComponent }) }) }));
+            expect(await screen.findByText('FakeComponent!'));
+        });
+    });
+});

package/dist/Warning.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import { VITESSCE_CONTAINER } from './classNames';
+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',
+    },
+    card: {
+        border: `1px solid ${theme.palette.cardBorder}`,
+        flex: '1 1 auto',
+        minHeight: '1px',
+        padding: '0.75rem',
+        marginTop: '0.5rem',
+        marginBottom: '0.5rem',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '0',
+        wordWrap: 'break-word',
+        backgroundClip: 'border-box',
+        borderRadius: '0.25rem',
+        backgroundColor: theme.palette.primaryBackground,
+        color: theme.palette.primaryForeground,
+    },
+}));
+export function Warning(props) {
+    const { title, preformatted, unformatted, } = props;
+    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: _jsxs("div", { className: classes.card, children: [_jsx("h1", { children: title }), preformatted ? (_jsx("pre", { children: preformatted })) : null, _jsx("p", { children: unformatted })] }) }) }) }));
+}