@vitessce/vit-s 2.0.3 → 3.0.1

package/dist-tsc/CallbackPublisher.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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: {
+    onConfigChange: Function;
+    onLoaderChange: Function;
+    validateOnConfigChange: boolean;
+}): null;
+//# sourceMappingURL=CallbackPublisher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallbackPublisher.d.ts","sourceRoot":"","sources":["../src/CallbackPublisher.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;GAWG;AACH;IAP2B,cAAc;IAEd,cAAc;IAEf,sBAAsB,EAArC,OAAO;SAoDjB"}

package/dist-tsc/CallbackPublisher.js

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks.js';
+function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
+    // Need the try-catch here since Zustand will actually
+    // just catch and ignore errors in its subscription callbacks.
+    try {
+        pluginSpecificConfigSchema.parse(viewConfig);
+    }
+    catch (e) {
+        console.error(e);
+    }
+    // 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, pluginSpecificConfigSchema, } = 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, pluginSpecificConfigSchema);
+        }
+        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, pluginSpecificConfigSchema]);
+    // 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-tsc/LoadingIndicator.d.ts

@@ -0,0 +1,2 @@
+export default function LoadingIndicator(): JSX.Element;
+//# sourceMappingURL=LoadingIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../src/LoadingIndicator.js"],"names":[],"mappings":"AAuBA,wDASC"}

package/dist-tsc/LoadingIndicator.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { makeStyles, CircularProgress } from '@material-ui/core';
+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-tsc/TitleInfo.d.ts

@@ -0,0 +1,2 @@
+export function TitleInfo(props: any): JSX.Element;
+//# sourceMappingURL=TitleInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAuHA,mDA+CC"}

package/dist-tsc/TitleInfo.js

@@ -0,0 +1,74 @@
+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, 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.js';
+import LoadingIndicator from './LoadingIndicator.js';
+import { PopperMenu } from './shared-mui/components.js';
+import { useTitleStyles } from './title-styles.js';
+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 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-tsc/VitS.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 {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"
+ * @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.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 {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: {
+    config: object;
+    rowHeight: undefined | number;
+    height: number;
+    theme: string;
+    onWarn: Function;
+    onConfigChange: Function;
+    onLoaderChange: Function;
+    validateConfig: boolean;
+    validateOnConfigChange: boolean;
+    uid: null | string;
+    viewTypes: array;
+    fileTypes: array;
+    jointFileTypes: array;
+    coordinationTypes: array;
+    warning: null | object;
+}): JSX.Element;
+//# sourceMappingURL=VitS.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH;IA7ByB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGE,SAAS;IACT,SAAS;IACT,cAAc;IACd,iBAAiB;IACX,OAAO,EAA1B,IAAI,GAAC,MAAM;gBAkLrB"}

package/dist-tsc/VitS.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { ThemeProvider, StylesProvider, } from '@material-ui/core';
+import { QueryClient, QueryClientProvider, } from '@tanstack/react-query';
+import { isEqual } from 'lodash-es';
+import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
+import { muiTheme } from './shared-mui/styles.js';
+import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks.js';
+import VitessceGrid from './VitessceGrid.js';
+import { Warning } from './Warning.js';
+import CallbackPublisher from './CallbackPublisher.js';
+import { initialize, logConfig, } from './view-config-utils.js';
+import { createLoaders } from './vitessce-grid-utils.js';
+import { createGenerateClassName } from './mui-utils.js';
+/**
+ * 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 {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"
+ * @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.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 {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 { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, 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(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.
+    // - Upgrade, if legacy schema.
+    // - Validate after upgrade, if legacy schema.
+    // - Initialize (based on initStrategy).
+    const [configOrWarning, success] = useMemo(() => {
+        if (warning) {
+            return [warning, false];
+        }
+        logConfig(config, 'input 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.
+            if (pluginSpecificResult.success) {
+                try {
+                    const upgradedConfigWithValidPlugins = pluginSpecificResult.data;
+                    const initializedConfig = initialize(upgradedConfigWithValidPlugins, jointFileTypes, coordinationTypes, viewTypes);
+                    logConfig(initializedConfig, 'initialized view config');
+                    return [initializedConfig, true];
+                }
+                catch (e) {
+                    return [
+                        {
+                            title: 'Config initialization failed.',
+                            unformatted: e.message,
+                        },
+                        false,
+                    ];
+                }
+            }
+            return [
+                {
+                    title: 'Config validation failed on second pass.',
+                    unformatted: pluginSpecificResult.error.message,
+                },
+                false,
+            ];
+        }
+        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.
+    useEffect(() => {
+        if (success && !isEqual(configOrWarning, config) && onConfigChange) {
+            onConfigChange(configOrWarning);
+        }
+        // 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 ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsxs(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: [_jsx(VitessceGrid, { success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
+}

package/dist-tsc/VitessceGrid.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 {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: {
+    rowHeight: number;
+    config: object;
+    theme: string;
+    height: number;
+    onWarn: Function;
+    viewTypes: PluginViewType[];
+    fileTypes: PluginFileType[];
+    coordinationTypes: PluginCoordinationType[];
+}): JSX.Element;
+//# sourceMappingURL=VitessceGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA0BA;;;;;;;;;;;GAWG;AACH;IATyB,SAAS,EAAvB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACU,MAAM;IACE,SAAS,EAAjC,gBAAgB;IACQ,SAAS,EAAjC,gBAAgB;IACgB,iBAAiB,EAAjD,wBAAwB;gBAuFlC"}

package/dist-tsc/VitessceGrid.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useCallback, } from 'react';
+import clsx from 'clsx';
+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, useSetLoaders, useEmitGridResize, useRemoveComponent, useChangeLayout, useLayout, } from './state/hooks.js';
+import { useClosestVitessceContainerSize, } from './hooks.js';
+import { useVitessceContainerStyles } from './shared-mui/container.js';
+import { useTitleStyles } from './title-styles.js';
+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 {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, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, } = 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((newComponentProps) => {
+        if (componentWidth > 0) {
+            changeLayout(newComponentProps);
+        }
+    }, [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(() => {
+        let newLoaders = null;
+        let newConfig = null;
+        if (success) {
+            newLoaders = createLoaders(config.datasets, config.description, fileTypes, coordinationTypes);
+            newConfig = config;
+        }
+        setViewConfig(newConfig);
+        setLoaders(newLoaders);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [success, configKey]);
+    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), children: layout ? (_jsx(VitessceGridLayout, { layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize })) : null }));
+}

package/dist-tsc/VitessceGrid.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VitessceGrid.test.d.ts.map

package/dist-tsc/VitessceGrid.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitessceGrid.test.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.test.jsx"],"names":[],"mappings":""}

package/dist-tsc/VitessceGrid.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import React from 'react';
+import { PluginViewType } from '@vitessce/plugins';
+import VitessceGrid from './VitessceGrid.js';
+import { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks.js';
+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 createViewConfigStoreClosure() {
+                return createViewConfigStore(null, config);
+            }
+            function FakeComponent() {
+                return _jsx("p", { children: "FakeComponent!" });
+            }
+            const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+            const fileTypes = [];
+            const coordinationTypes = [];
+            render(_jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsx(VitessceGrid, { success: true, configKey: null, config: config, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes }) }) }));
+            expect(await screen.findByText('FakeComponent!'));
+        });
+    });
+});

package/dist-tsc/Warning.d.ts

@@ -0,0 +1,2 @@
+export function Warning(props: any): import("../../plugins/node_modules/@types/react/ts5.0/index.js").JSX.Element;
+//# sourceMappingURL=Warning.d.ts.map

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

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

package/dist-tsc/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';
+import { VITESSCE_CONTAINER } from './classNames.js';
+const useStyles = makeStyles(theme => ({
+    warningLayout: {
+        backgroundColor: theme.palette.gridLayoutBackground,
+        position: 'absolute',
+        width: '100%',
+        height: '100vh',
+    },
+    containerFluid: {
+        width: '100%',
+        padding: '15px',
+        marginRight: 'auto',
+        marginLeft: 'auto',
+        boxSizing: 'border-box',
+        display: 'flex',
+    },
+    row: {
+        flexGrow: '1',
+    },
+    warningCard: {
+        border: `1px solid ${theme.palette.cardBorder}`,
+        flex: '1 1 auto',
+        minHeight: '1px',
+        padding: '12px',
+        marginTop: '8px',
+        marginBottom: '8px',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '0',
+        wordWrap: 'break-word',
+        backgroundClip: 'border-box',
+        borderRadius: '4px',
+        backgroundColor: theme.palette.primaryBackground,
+        color: theme.palette.primaryForeground,
+    },
+}));
+export function Warning(props) {
+    const { title, preformatted, unformatted, } = props;
+    const classes = useStyles();
+    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.warningCard, children: [_jsx("h1", { children: title }), preformatted ? (_jsx("pre", { children: preformatted })) : null, _jsx("p", { children: unformatted })] }) }) }) }));
+}

package/dist-tsc/classNames.d.ts

@@ -0,0 +1,8 @@
+export const TOOLTIP_ANCESTOR: "tooltip-ancestor";
+export const PRIMARY_CARD: string;
+export const SECONDARY_CARD: string;
+export const BLACK_CARD: string;
+export const TITLE_CARD: "title";
+export const SCROLL_CARD: string;
+export const VITESSCE_CONTAINER: "vitessce-container";
+//# sourceMappingURL=classNames.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"classNames.d.ts","sourceRoot":"","sources":["../src/classNames.js"],"names":[],"mappings":"AAAA,kDAAmD;AAEnD,kCAAiD;AACjD,oCAAqD;AACrD,gCAA6C;AAC7C,iCAAkC;AAClC,iCAAoD;AACpD,sDAAuD"}

package/dist-tsc/classNames.js

@@ -0,0 +1,8 @@
+export const TOOLTIP_ANCESTOR = 'tooltip-ancestor';
+const CARD = `card card-body my-2 ${TOOLTIP_ANCESTOR}`;
+export const PRIMARY_CARD = `${CARD} bg-primary`;
+export const SECONDARY_CARD = `${CARD} bg-secondary`;
+export const BLACK_CARD = `${CARD} bg-black`;
+export const TITLE_CARD = 'title';
+export const SCROLL_CARD = `${PRIMARY_CARD} scroll`;
+export const VITESSCE_CONTAINER = 'vitessce-container';

package/dist-tsc/data/AbstractLoader.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A loader ancestor class containing a default constructor
+ * and a stub for the required load() method.
+ */
+export default class AbstractLoader {
+    constructor({ type, fileType, url, requestInit, options, coordinationValues, }: {
+        type: any;
+        fileType: any;
+        url: any;
+        requestInit: any;
+        options: any;
+        coordinationValues: any;
+    });
+    fileType: any;
+    type: any;
+    url: any;
+    requestInit: any;
+    options: any;
+    coordinationValues: any;
+    load(): Promise<boolean>;
+}
+//# sourceMappingURL=AbstractLoader.d.ts.map

package/dist-tsc/data/AbstractLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractLoader.d.ts","sourceRoot":"","sources":["../../src/data/AbstractLoader.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH;IACE;;;;;;;OAWC;IANC,cAAwB;IACxB,UAAgB;IAChB,SAAc;IACd,iBAA8B;IAC9B,aAAsB;IACtB,wBAA4C;IAI9C,yBAEC;CACF"}