@vitessce/vit-s 2.0.3 → 3.0.0

package/dist-tsc/state/hooks.js

@@ -0,0 +1,575 @@
+/* eslint-disable react-refresh/only-export-components */
+import { useRef, useCallback, useMemo } from 'react';
+import create from 'zustand';
+import createContext from 'zustand/context';
+import shallow from 'zustand/shallow';
+import { isMatch } from 'lodash-es';
+import { CoordinationType } from '@vitessce/constants-internal';
+import { fromEntries, capitalize } from '@vitessce/utils';
+// Reference: https://github.com/pmndrs/zustand#react-context
+// Reference: https://github.com/pmndrs/zustand/blob/e47ea03/tests/context.test.tsx#L60
+const { Provider: ViewConfigProviderLocal, useStore: useViewConfigStoreLocal, useStoreApi: useViewConfigStoreApiLocal, } = createContext();
+export const ViewConfigProvider = ViewConfigProviderLocal;
+export const useViewConfigStore = useViewConfigStoreLocal;
+export const useViewConfigStoreApi = useViewConfigStoreApiLocal;
+const { Provider: AuxiliaryProviderLocal, useStore: useAuxiliaryStoreLocal, } = createContext();
+export const AuxiliaryProvider = AuxiliaryProviderLocal;
+export const useAuxiliaryStore = useAuxiliaryStoreLocal;
+/**
+ * The useViewConfigStore hook is initialized via the zustand
+ * create() function, which sets up both the state variables
+ * and the reducer-type functions.
+ * References:
+ * - https://github.com/react-spring/zustand
+ * - https://github.com/pmndrs/zustand/releases/tag/v3.6.0
+ * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
+ * @returns {function} The useStore hook.
+ */
+export const createViewConfigStore = () => create(set => ({
+    // State:
+    // The viewConfig is an object which must conform to the schema
+    // found in src/schemas/config.schema.json.
+    viewConfig: null,
+    // The loaders object is a mapping from dataset ID to
+    // data type to loader object instance.
+    loaders: null,
+    // Reducer functions which update the state
+    // (although technically also part of state):
+    setViewConfig: viewConfig => set({ viewConfig }),
+    setLoaders: loaders => set({ loaders }),
+    setCoordinationValue: ({ parameter, scope, value }) => set(state => ({
+        viewConfig: {
+            ...state.viewConfig,
+            coordinationSpace: {
+                ...state.viewConfig.coordinationSpace,
+                [parameter]: {
+                    ...state.viewConfig.coordinationSpace[parameter],
+                    [scope]: value,
+                },
+            },
+        },
+    })),
+    removeComponent: uid => set((state) => {
+        const newLayout = state.viewConfig.layout.filter(c => c.uid !== uid);
+        return {
+            viewConfig: {
+                ...state.viewConfig,
+                layout: newLayout,
+            },
+        };
+    }),
+    changeLayout: newComponentProps => set((state) => {
+        const newLayout = state.viewConfig.layout
+            .slice()
+            .map(componentProps => ({
+            ...componentProps,
+            ...newComponentProps[componentProps.uid],
+        }));
+        return {
+            viewConfig: {
+                ...state.viewConfig,
+                layout: newLayout,
+            },
+        };
+    }),
+}));
+/**
+ * Hook for getting components' layout from the view config based on
+ * matching all coordination scopes.
+ * @returns {Object} The components' layout.
+ */
+export const useComponentLayout = (component, scopes, coordinationScopes) => useViewConfigStore(state => state.viewConfig.layout.filter(l => l.component === component).filter(l => scopes.every(scope => l.coordinationScopes[scope]
+    === coordinationScopes[scope])));
+/**
+ * The useAuxiliaryStore hook is initialized via the zustand
+ * create() function, which sets up both the state variables
+ * and the reducer-type functions.
+ * Reference: https://github.com/react-spring/zustand
+ * It is meant to be used for non-viewconfig-based coordination between components.
+ * For example, as currently happens, the layer controller can coordinate
+ * on-load callbacks with spatial view based on whether or not they are
+ * coordinated via `spatialImageLayer` - the callbacks are not part of the view config
+ * though so they live here.
+ * @returns {function} The useStore hook.
+ */
+export const createAuxiliaryStore = () => create(set => ({
+    auxiliaryStore: null,
+    setCoordinationValue: ({ parameter, scope, value }) => set(state => ({
+        auxiliaryStore: {
+            ...state.auxiliaryStore,
+            [parameter]: {
+                [scope]: value,
+            },
+        },
+    })),
+}));
+/**
+ * The hover store can be used to store global state
+ * related to which component is currently hovered,
+ * which is required for tooltip / crossover elements.
+ * @returns {function} The useStore hook.
+ */
+const useHoverStore = create(set => ({
+    // Components may need to know if they are the "hover source"
+    // for tooltip interactions. This value should be a unique
+    // component ID, such as its index in the view config layout.
+    componentHover: null,
+    setComponentHover: componentHover => set({ componentHover }),
+}));
+/**
+ * The warning store can be used to store global state
+ * related to app warning messages.
+ * @returns {function} The useStore hook.
+ */
+const useWarnStore = create(set => ({
+    // Want a global state to collect warning messages
+    // that occur anywhere in the app.
+    warning: null,
+    setWarning: warning => set({ warning }),
+}));
+/**
+ * The view info store can be used to store component-level
+ * viewInfo objects,
+ * which are required for tooltip / crossover elements.
+ * @returns {function} The useStore hook.
+ */
+const useViewInfoStore = create(set => ({
+    // The viewInfo object is a mapping from
+    // component IDs to component view info objects.
+    // Each view info object must have a project() function.
+    viewInfo: {},
+    setComponentViewInfo: (uuid, viewInfo) => set(state => ({
+        viewInfo: {
+            ...state.viewInfo,
+            [uuid]: viewInfo,
+        },
+    })),
+}));
+/**
+ * The grid size store can be used to store a
+ * counter which updates on each window or react-grid-layout
+ * resize event.
+ * @returns {function} The useStore hook.
+ */
+const useGridSizeStore = create(set => ({
+    resizeCount: {},
+    incrementResizeCount: () => set(state => ({
+        resizeCount: state.resizeCount + 1,
+    })),
+}));
+/**
+ * The useCoordination hook returns both the
+ * values and setter functions for the coordination objects
+ * in a particular coordination scope mapping.
+ * This hook is intended to be used within the ___Subscriber
+ * components to allow them to "hook into" only those coordination
+ * objects and setter functions of relevance.
+ * @param {string[]} parameters Array of coordination types.
+ * @param {object} coordinationScopes Mapping of coordination types
+ * to scope names.
+ * @returns {array} Returns a tuple [values, setters]
+ * where values is an object containing all coordination values,
+ * and setters is an object containing all coordination setter
+ * functions for the values in `values`, named with a "set"
+ * prefix.
+ */
+export function useCoordination(parameters, coordinationScopes) {
+    const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
+    const values = useViewConfigStore((state) => {
+        const { coordinationSpace } = state.viewConfig;
+        return fromEntries(parameters.map((parameter) => {
+            if (coordinationSpace && coordinationSpace[parameter]) {
+                const value = coordinationSpace[parameter][coordinationScopes[parameter]];
+                return [parameter, value];
+            }
+            return [parameter, undefined];
+        }));
+    }, shallow);
+    const setters = useMemo(() => fromEntries(parameters.map((parameter) => {
+        const setterName = `set${capitalize(parameter)}`;
+        const setterFunc = value => setCoordinationValue({
+            parameter,
+            scope: coordinationScopes[parameter],
+            value,
+        });
+        return [setterName, setterFunc];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    })), [parameters, coordinationScopes]);
+    return [values, setters];
+}
+export function useMultiCoordinationValues(parameter, coordinationScopes) {
+    const scopes = coordinationScopes[parameter];
+    // Mapping from dataset coordination scope name to dataset uid
+    const vals = useViewConfigStore((state) => {
+        const { coordinationSpace } = state.viewConfig;
+        // Convert a single scope to an array of scopes to be consistent.
+        const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
+        return fromEntries(scopesArr.map((scope) => {
+            if (coordinationSpace && coordinationSpace[parameter]) {
+                const value = coordinationSpace[parameter][scope];
+                return [scope, value];
+            }
+            return [scope, undefined];
+            // eslint-disable-next-line no-unused-vars
+        }).filter(([k, v]) => v !== undefined));
+    }, shallow);
+    return vals;
+}
+/**
+ * Get a mapping from dataset coordination scopes to dataset UIDs.
+ * @param {object} coordinationScopes The coordination scope mapping object for a view.
+ * @returns {object} Mapping from dataset coordination scope names to dataset UIDs.
+ */
+export function useDatasetUids(coordinationScopes) {
+    return useMultiCoordinationValues(CoordinationType.DATASET, coordinationScopes);
+}
+/**
+ * Use coordination values and coordination setter functions corresponding to
+ * {coordinationType}-specific coordination scopes for each coordination type.
+ * @param {string[]} parameters An array of coordination types supported by a view.
+ * @param {object} coordinationScopes The coordination scope mapping object for a view.
+ * @param {object} coordinationScopesBy The per-coordinationType coordination scope
+ * mapping object for a view.
+ * @param {string} byType The {coordinationType} to use for per-{coordinationType} coordination
+ * scope mappings.
+ * @returns {array} [cValues, cSetters] where
+ * cValues is a mapping from coordination scope name to { coordinationType: coordinationValue },
+ * and cSetters is a mapping from coordination scope name to { setCoordinationType }
+ * setter functions.
+ */
+export function useComplexCoordination(parameters, coordinationScopes, coordinationScopesBy, byType) {
+    const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
+    const typeScopes = coordinationScopes[byType];
+    const byTypeScopes = coordinationScopesBy[byType];
+    // Convert a single scope to an array of scopes to be consistent.
+    const typeScopesArr = Array.isArray(typeScopes) ? typeScopes : [typeScopes];
+    const values = useViewConfigStore((state) => {
+        const { coordinationSpace } = state.viewConfig;
+        return fromEntries(typeScopesArr.map((datasetScope) => {
+            const datasetValues = fromEntries(parameters.map((parameter) => {
+                if (coordinationSpace && coordinationSpace[parameter]) {
+                    let value;
+                    const parameterSpace = coordinationSpace[parameter];
+                    const parameterScopeGlobal = coordinationScopes[parameter];
+                    const parameterScopeByDataset = byTypeScopes?.[parameter];
+                    if (parameterScopeByDataset && parameterScopeByDataset[datasetScope]) {
+                        value = parameterSpace[parameterScopeByDataset[datasetScope]];
+                    }
+                    else if (parameterScopeGlobal) {
+                        value = parameterSpace[parameterScopeGlobal];
+                    }
+                    else {
+                        console.error(`coordination scope for ${parameter} was not found.`);
+                    }
+                    return [parameter, value];
+                }
+                return [parameter, undefined];
+            }));
+            return [datasetScope, datasetValues];
+        }));
+    }, shallow);
+    const setters = useMemo(() => fromEntries(typeScopesArr.map((datasetScope) => {
+        const datasetSetters = fromEntries(parameters.map((parameter) => {
+            const setterName = `set${capitalize(parameter)}`;
+            let setterFunc;
+            const parameterScopeGlobal = coordinationScopes[parameter];
+            const parameterScopeByDataset = byTypeScopes?.[parameter];
+            if (parameterScopeByDataset && parameterScopeByDataset[datasetScope]) {
+                setterFunc = value => setCoordinationValue({
+                    parameter,
+                    scope: parameterScopeByDataset[datasetScope],
+                    value,
+                });
+            }
+            else if (parameterScopeGlobal) {
+                setterFunc = value => setCoordinationValue({
+                    parameter,
+                    scope: parameterScopeGlobal,
+                    value,
+                });
+            }
+            else {
+                console.error(`coordination scope for ${parameter} was not found.`);
+            }
+            return [setterName, setterFunc];
+        }));
+        return [datasetScope, datasetSetters];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    })), [parameters, coordinationScopes]);
+    return [values, setters];
+}
+/**
+ * Use coordination values and coordination setter functions corresponding to
+ * dataset-specific coordination scopes for each coordination type.
+ * @param {string[]} parameters An array of coordination types supported by a view.
+ * @param {object} coordinationScopes The coordination scope mapping object for a view.
+ * @param {object} coordinationScopesBy The per-coordinationType coordination scope
+ * mapping object for a view.
+ * @returns {array} [cValues, cSetters] where
+ * cValues is a mapping from coordination scope name to { coordinationType: coordinationValue },
+ * and cSetters is a mapping from coordination scope name to { setCoordinationType }
+ * setter functions.
+ */
+export function useMultiDatasetCoordination(parameters, coordinationScopes, coordinationScopesBy) {
+    return useComplexCoordination(parameters, coordinationScopes, coordinationScopesBy, CoordinationType.DATASET);
+}
+const AUXILIARY_COORDINATION_TYPES_MAP = {
+    spatialImageLayer: ['imageLayerCallbacks', 'areLoadingImageChannels'],
+    spatialSegmentationLayer: ['segmentationLayerCallbacks', 'areLoadingSegmentationChannels'],
+};
+/**
+ * The maps the coordination types of incoming scopes to new types
+ * for the auxiliary store.
+ * @param {object} coordinationScopes Mapping of coordination types
+ * to scope names.
+ * @returns {object} Mapping of coordination types
+ * to new scope names for the auxiliary store.
+ */
+const mapCoordinationScopes = (coordinationScopes) => {
+    const newCoordinationScopes = {};
+    Object.keys(coordinationScopes).forEach((key) => {
+        const newCoordinationTypes = AUXILIARY_COORDINATION_TYPES_MAP[key] || [];
+        newCoordinationTypes.forEach((coordinationType) => {
+            newCoordinationScopes[coordinationType || key] = coordinationScopes[key];
+        });
+    });
+    return newCoordinationScopes;
+};
+const mapParameters = parameters => parameters
+    .map(parameter => AUXILIARY_COORDINATION_TYPES_MAP[parameter]).filter(Boolean).flat();
+/**
+ * The useAuxiliaryCoordination hook returns both the
+ * values and setter functions for the auxiliary coordination objects
+ * in a particular coordination scope mapping.
+ * This hook is intended to be used within the ___Subscriber
+ * components to allow them to "hook into" only those auxiliary coordination
+ * objects and setter functions of relevance, for example "on load" callbacks.
+ * @param {string[]} parameters Array of coordination types.
+ * @param {object} coordinationScopes Mapping of coordination types
+ * to scope names.
+ * @returns {array} Returns a tuple [values, setters]
+ * where values is an object containing all coordination values,
+ * and setters is an object containing all coordination setter
+ * functions for the values in `values`, named with a "set"
+ * prefix.
+ */
+export function useAuxiliaryCoordination(parameters, coordinationScopes) {
+    const setCoordinationValue = useAuxiliaryStore(state => state.setCoordinationValue);
+    const mappedCoordinationScopes = mapCoordinationScopes(coordinationScopes);
+    const mappedParameters = mapParameters(parameters);
+    const values = useAuxiliaryStore((state) => {
+        const { auxiliaryStore } = state;
+        return fromEntries(mappedParameters.map((parameter) => {
+            if (auxiliaryStore && auxiliaryStore[parameter]) {
+                const value = auxiliaryStore[parameter][mappedCoordinationScopes[parameter]];
+                return [parameter, value];
+            }
+            return [parameter, undefined];
+        }));
+    }, shallow);
+    const setters = useMemo(() => fromEntries(mappedParameters.map((parameter) => {
+        const setterName = `set${capitalize(parameter)}`;
+        const setterFunc = value => setCoordinationValue({
+            parameter,
+            scope: mappedCoordinationScopes[parameter],
+            value,
+        });
+        return [setterName, setterFunc];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    })), [parameters, coordinationScopes]);
+    return [values, setters];
+}
+/**
+ * Obtain the loaders object from
+ * the global app state.
+ * @returns {object} The loaders object
+ * in the `useViewConfigStore` store.
+ */
+export function useLoaders() {
+    return useViewConfigStore(state => state.loaders);
+}
+/**
+ * Find a specific loader instance for a particular dataset, data type, and view
+ * coordination values (mapping from coordination types to coordination values).
+ * Uses lodash/isMatch to perform matching against the file definition's
+ * coordination value mapping.
+ * @param {object} loaders The value returned by useLoaders.
+ * @param {string} dataset The dataset UID.
+ * @param {string} dataType The data type for the matching file.
+ * @param {object} viewCoordinationValues Current coordination values
+ * from the view. Match these against a subset of file definition coordination
+ * values.
+ * @returns The matching loader instance or `null`.
+ */
+export function useMatchingLoader(loaders, dataset, dataType, viewCoordinationValues) {
+    return useMemo(() => {
+        if (!loaders[dataset]) {
+            return null;
+        }
+        const loaderInternMap = loaders[dataset].loaders[dataType];
+        if (!loaderInternMap) {
+            return null;
+        }
+        const loaderKeys = Array.from(loaderInternMap.keys());
+        const matchingKey = loaderKeys
+            .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
+        if (!matchingKey) {
+            return null;
+        }
+        return loaderInternMap.get(matchingKey);
+    }, [loaders, dataset, dataType, viewCoordinationValues]);
+}
+/**
+ * Find a specific loader instance for a particular dataset, data type, and view
+ * coordination values (mapping from coordination types to coordination values).
+ * Uses lodash/isMatch to perform matching against the file definition's
+ * coordination value mapping.
+ * @param {object} loaders The value returned by useLoaders.
+ * @param {string} dataset The dataset UID.
+ * @param {string} dataType The data type for the matching file.
+ * @param {object} viewCoordinationValues Current coordination values
+ * from the view. Match these against a subset of file definition coordination
+ * values.
+ * @returns The matching loader instance or `null`.
+ */
+export function useMatchingLoaders(loaders, dataset, dataType, viewCoordinationValuesObj) {
+    return useMemo(() => {
+        if (!loaders[dataset]) {
+            return null;
+        }
+        const loaderInternMap = loaders[dataset].loaders[dataType];
+        if (!loaderInternMap) {
+            return null;
+        }
+        const loaderKeys = Array.from(loaderInternMap.keys());
+        function getLoader(viewCoordinationValues) {
+            const matchingKey = loaderKeys
+                .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
+            return loaderInternMap.get(matchingKey);
+        }
+        return fromEntries(Object.entries(viewCoordinationValuesObj).map(([key, viewCoordinationValues]) => ([
+            key,
+            getLoader(viewCoordinationValues),
+        ])));
+    }, [loaders, dataset, dataType, viewCoordinationValuesObj]);
+}
+/**
+ * Obtain the view config layout array from
+ * the global app state.
+ * @returns {object[]} The layout array
+ * in the `useViewConfigStore` store.
+ */
+export function useLayout() {
+    return useViewConfigStore(state => state.viewConfig?.layout);
+}
+/**
+ * Obtain the component removal function from
+ * the global app state.
+ * @returns {function} The remove component function
+ * in the `useViewInfoStore` store.
+ */
+export function useRemoveComponent() {
+    return useViewConfigStore(state => state.removeComponent);
+}
+/**
+ * Obtain the component prop setter function from
+ * the global app state.
+ * @returns {function} The set component props function
+ * in the `useViewInfoStore` store.
+ */
+export function useChangeLayout() {
+    return useViewConfigStore(state => state.changeLayout);
+}
+/**
+ * Obtain the loaders setter function from
+ * the global app state.
+ * @returns {function} The loaders setter function
+ * in the `useViewConfigStore` store.
+ */
+export function useSetLoaders() {
+    return useViewConfigStore(state => state.setLoaders);
+}
+/**
+ * Obtain the view config setter function from
+ * the global app state.
+ * @returns {function} The view config setter function
+ * in the `useViewConfigStore` store.
+ */
+export function useSetViewConfig(viewConfigStoreApi) {
+    const setViewConfigRef = useRef(viewConfigStoreApi.getState().setViewConfig);
+    const setViewConfig = setViewConfigRef.current;
+    return setViewConfig;
+}
+/**
+ * Obtain the component hover value from
+ * the global app state.
+ * @returns {number} The hovered component ID
+ * in the `useHoverStore` store.
+ */
+export function useComponentHover() {
+    return useHoverStore(state => state.componentHover);
+}
+/**
+ * Obtain the component hover setter function from
+ * the global app state.
+ * @returns {function} The component hover setter function
+ * in the `useHoverStore` store.
+ */
+export function useSetComponentHover() {
+    return useHoverStore(state => state.setComponentHover);
+}
+/**
+ * Obtain the warning message from
+ * the global app state.
+ * @returns {string} The warning message
+ * in the `useWarnStore` store.
+ */
+export function useWarning() {
+    return useWarnStore(state => state.warning);
+}
+/**
+ * Obtain the warning setter function from
+ * the global app state.
+ * @returns {function} The warning setter function
+ * in the `useWarnStore` store.
+ */
+export function useSetWarning() {
+    return useWarnStore(state => state.setWarning);
+}
+/**
+ * Obtain the component view info value from
+ * the global app state.
+ * @returns {object} The view info object for the component
+ * in the `useViewInfoStore` store.
+ */
+export function useComponentViewInfo(uuid) {
+    return useViewInfoStore(useCallback(state => state.viewInfo[uuid], [uuid]));
+}
+/**
+ * Obtain the component view info setter function from
+ * the global app state.
+ * @returns {function} The component view info setter function
+ * in the `useViewInfoStore` store.
+ */
+export function useSetComponentViewInfo(uuid) {
+    const setViewInfoRef = useRef(useViewInfoStore.getState().setComponentViewInfo);
+    const setComponentViewInfo = useCallback(viewInfo => setViewInfoRef.current(uuid, viewInfo), [uuid]);
+    return setComponentViewInfo;
+}
+/**
+ * Obtain the grid resize count value
+ * from the global app state.
+ * @returns {number} The grid resize increment value.
+ */
+export function useGridResize() {
+    return useGridSizeStore(state => state.resizeCount);
+}
+/**
+ * Obtain the grid resize count increment function
+ * from the global app state.
+ * @returns {function} The grid resize count increment
+ * function.
+ */
+export function useEmitGridResize() {
+    return useGridSizeStore(state => state.incrementResizeCount);
+}

package/dist-tsc/title-styles.d.ts

@@ -0,0 +1,2 @@
+export const useTitleStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+//# sourceMappingURL=title-styles.d.ts.map

package/dist-tsc/title-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA,gHAsEI"}

package/dist-tsc/title-styles.js

@@ -0,0 +1,72 @@
+import { makeStyles } from '@material-ui/core';
+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,
+        },
+    },
+}));

package/dist-tsc/view-config-utils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Get a list of all unique scope names for a
+ * particular coordination type, which exist in
+ * a particular view config.
+ * @param {object} config A view config object.
+ * @param {string} coordinationType A coordination type,
+ * for example 'spatialZoom' or 'dataset'.
+ * @returns {string[]} Array of existing coordination scope names.
+ */
+export function getExistingScopesForCoordinationType(config: object, coordinationType: string): string[];
+/**
+ * Initialize the view config:
+ * - Fill in missing coordination objects with default values.
+ * - Fill in missing component coordination scope mappings.
+ *   based on the `initStrategy` specified in the view config.
+ * - Fill in missing view uid values.
+ * - Expand convenience file types.
+ * Should be "stable": if run on the same view config twice, the return value the second
+ * time should be identical to the return value the first time.
+ * @param {object} config The view config prop.
+ * @param {PluginJointFileType[]} jointFileTypes
+ * @param {PluginCoordinationType[]} coordinationTypes
+ * @param {PluginViewType[]} viewTypes
+ * @returns The initialized view config.
+ */
+export function initialize(config: object, jointFileTypes: PluginJointFileType[], coordinationTypes: PluginCoordinationType[], viewTypes: PluginViewType[]): {
+    uid: any;
+    layout: any;
+};
+//# sourceMappingURL=view-config-utils.d.ts.map

package/dist-tsc/view-config-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,qBAAqB,qBACrB,wBAAwB,aACxB,gBAAgB;;;EAY1B"}