@vitessce/vit-s 2.0.3 → 3.0.1

package/dist-tsc/hooks.js

@@ -0,0 +1,262 @@
+import { useRef, useState, useEffect, useCallback, useMemo, } from 'react';
+import { debounce, every } from 'lodash-es';
+import { extent } from 'd3-array';
+import { capitalize, fromEntries } from '@vitessce/utils';
+import { STATUS } from '@vitessce/constants-internal';
+import { useGridResize, useEmitGridResize } from './state/hooks.js';
+import { VITESSCE_CONTAINER } from './classNames.js';
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+export function useVitessceContainer(ref) {
+    return useCallback(() => {
+        if (ref.current) {
+            return ref.current.closest(`.${VITESSCE_CONTAINER}`);
+        }
+        return null;
+    }, [ref]);
+}
+/**
+ * Custom hook, gets the full window dimensions.
+ * @returns {array} `[width, height]` where width and height
+ * are numbers.
+ */
+export function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        const onResizeDebounced = debounce(handleResize, 100, { trailing: true });
+        window.addEventListener('resize', onResizeDebounced);
+        return () => window.removeEventListener('resize', onResizeDebounced);
+    }, []);
+    return windowDimensions;
+}
+/**
+ * Custom hook, subscribes to GRID_RESIZE and window resize events.
+ * @returns {array} `[width, height, containerRef]` where width and height
+ * are numbers and containerRef is a React ref.
+ */
+export function useGridItemSize() {
+    const containerRef = useRef();
+    const [height, setHeight] = useState();
+    const [width, setWidth] = useState();
+    const resizeCount = useGridResize();
+    const incrementResizeCount = useEmitGridResize();
+    // On window resize events, increment the grid resize count.
+    useEffect(() => {
+        function onWindowResize() {
+            incrementResizeCount();
+        }
+        const onResizeDebounced = debounce(onWindowResize, 100, { trailing: true });
+        window.addEventListener('resize', onResizeDebounced);
+        onWindowResize();
+        return () => {
+            window.removeEventListener('resize', onResizeDebounced);
+        };
+    }, [incrementResizeCount]);
+    // On new grid resize counts, re-compute the component
+    // width/height.
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        const containerRect = container.getBoundingClientRect();
+        setHeight(containerRect.height);
+        setWidth(containerRect.width);
+    }, [resizeCount]);
+    return [width, height, containerRef];
+}
+/**
+ * Custom hook, subscribes to GRID_RESIZE and window resize events.
+ * @returns {array} `[width, height, deckRef]` where width and height
+ * are numbers and deckRef is a React ref to be used with
+ * a <DeckGL/> element (or a forwardRef to one).
+ */
+export function useDeckCanvasSize() {
+    const deckRef = useRef();
+    const [height, setHeight] = useState();
+    const [width, setWidth] = useState();
+    const resizeCount = useGridResize();
+    const incrementResizeCount = useEmitGridResize();
+    // On window resize events, increment the grid resize count.
+    useEffect(() => {
+        function onWindowResize() {
+            incrementResizeCount();
+        }
+        const onResizeDebounced = debounce(onWindowResize, 100, { trailing: true });
+        window.addEventListener('resize', onResizeDebounced);
+        onWindowResize();
+        return () => {
+            window.removeEventListener('resize', onResizeDebounced);
+        };
+    }, [incrementResizeCount]);
+    // On new grid resize counts, re-compute the DeckGL canvas
+    // width/height.
+    useEffect(() => {
+        if (!deckRef.current)
+            return;
+        const { canvas } = deckRef.current.deck;
+        const canvasRect = canvas.getBoundingClientRect();
+        setHeight(canvasRect.height);
+        setWidth(canvasRect.width);
+    }, [resizeCount]);
+    return [width, height, deckRef];
+}
+/**
+ * This hook handles a boolean isReady value,
+ * which only returns true once every item in the
+ * input list has been marked as "ready".
+ * @param {string[]} statusValues The items to wait on.
+ * @returns {boolean} Whether the status values are all success.
+ */
+export function useReady(statusValues) {
+    return useMemo(() => every(statusValues, val => val !== STATUS.LOADING), statusValues);
+}
+/**
+ * This hook helps manage a list of URLs.
+ * @param {(null|object[])[]} urls Array of (null or array of { url, name }).
+ * @returns {array} An array of { url, name } objects (flattened from the input).
+ */
+export function useUrls(urls) {
+    const mergedUrls = useMemo(() => urls.filter(a => Array.isArray(a)).flat(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    urls);
+    return mergedUrls;
+}
+/**
+ * Custom hook, subscribes to the width and height of the closest .vitessce-container
+ * element and updates upon window resize events.
+ * @param {Ref} ref A React ref object within the `.vitessce-container`.
+ * @returns {array} `[width, height]` where width and height
+ * are numbers.
+ */
+export function useClosestVitessceContainerSize(ref) {
+    const [height, setHeight] = useState();
+    const [width, setWidth] = useState();
+    useEffect(() => {
+        function onWindowResize() {
+            if (ref.current) {
+                const { clientHeight: componentHeight, clientWidth: componentWidth, } = ref.current.closest(`.${VITESSCE_CONTAINER}`);
+                setWidth(componentWidth);
+                setHeight(componentHeight);
+            }
+        }
+        const onResizeDebounced = debounce(onWindowResize, 100, { trailing: true });
+        window.addEventListener('resize', onResizeDebounced);
+        onWindowResize();
+        return () => {
+            window.removeEventListener('resize', onResizeDebounced);
+        };
+    }, [ref]);
+    return [width, height];
+}
+/**
+ * Normalize an obsFeatureMatrix to a Uint8Array.
+ * @param {object} params
+ * @param {object} params.obsFeatureMatrix The obsFeatureMatrix
+ * returned by the useObsFeatureMatrix hook.
+ * @returns {array} A tuple [obsFeatureMatrix, dataExtent]
+ * where obsFeatureMatrix
+ * is a Uint8Array with the same shape as
+ * params.obsFeatureMatrix.data, and dataExtent is the
+ * [min, max] of the original data.
+ */
+export function useUint8ObsFeatureMatrix({ obsFeatureMatrix }) {
+    return useMemo(() => {
+        if (obsFeatureMatrix && obsFeatureMatrix.data) {
+            const dataExtent = extent(obsFeatureMatrix.data);
+            const [min, max] = dataExtent;
+            const ratio = 255 / (max - min);
+            const data = new Uint8Array(obsFeatureMatrix.data.map(i => Math.floor((i - min) * ratio)));
+            return [{ data }, dataExtent];
+        }
+        return [null, null];
+    }, [obsFeatureMatrix]);
+}
+/**
+ * Normalize a feature selection (data for selected
+ * columns of an obsFeatureMatrix) to a Uint8Array.
+ * @param {array|null} expressionData The expressionData
+ * returned by the useFeatureSelection hook,
+ * where each element corresponds to an
+ * array of values for a selected feature.
+ * @returns {array} A tuple [normData, extents] where
+ * normData is an array of Uint8Arrays (or null), and extents is
+ * an array of [min, max] values for each feature (or null).
+ */
+export function useUint8FeatureSelection(expressionData) {
+    return useMemo(() => {
+        if (expressionData && expressionData[0]) {
+            const extents = expressionData.map(arr => extent(arr));
+            const normData = expressionData.map((arr, i) => {
+                const [min, max] = extents[i];
+                const ratio = 255 / (max - min);
+                return new Uint8Array(arr.map(j => Math.floor((j - min) * ratio)));
+            });
+            return [normData, extents];
+        }
+        return [null, null];
+    }, [expressionData]);
+}
+export function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, expressionData }) {
+    // Get a mapping from cell ID to row index in the gene expression matrix.
+    // Since the two obsIndices (instanceObsIndex = the obsIndex from obsEmbedding)
+    // may be ordered differently (matrixObsIndex = the obsIndex from obsFeatureMatrix),
+    // we need a way to look up an obsFeatureMatrix obsIndex index
+    // given an obsEmbedding obsIndex index.
+    const toMatrixIndexMap = useMemo(() => {
+        if (instanceObsIndex && matrixObsIndex) {
+            const matrixIndexMap = new Map(matrixObsIndex.map((key, i) => ([key, i])));
+            return instanceObsIndex.map(key => matrixIndexMap.get(key));
+        }
+        return null;
+    }, [instanceObsIndex, matrixObsIndex]);
+    // Set up a getter function for gene expression values, to be used
+    // by the DeckGL layer to obtain values for instanced attributes.
+    const getExpressionValue = useCallback((entry, { index: instanceIndex }) => {
+        if (toMatrixIndexMap && expressionData && expressionData[0]) {
+            const rowIndex = toMatrixIndexMap[instanceIndex];
+            const val = expressionData[0][rowIndex];
+            return val;
+        }
+        return 0;
+    }, [toMatrixIndexMap, expressionData]);
+    return getExpressionValue;
+}
+export function useGetObsMembership(obsSetsMembership) {
+    return useCallback((obsId) => {
+        if (obsId) {
+            return obsSetsMembership?.get(obsId) || [];
+        }
+        return [];
+    }, [obsSetsMembership]);
+}
+export function useGetObsInfo(obsType, obsLabelsTypes, obsLabelsData, obsSetsMembership) {
+    return useCallback((obsId) => {
+        if (obsId) {
+            const obsMembership = obsSetsMembership?.get(obsId) || [];
+            return {
+                [`${capitalize(obsType)} ID`]: obsId,
+                ...fromEntries(obsMembership.flatMap(path => path.slice(1).map((pathEl, elLevel) => ([
+                    `${path[0]}${path.length > 2 ? ` L${elLevel + 1}` : ''}`,
+                    pathEl,
+                ])))),
+                ...fromEntries(Object.entries(obsLabelsTypes).map(([scopeKey, obsLabelsType]) => ([
+                    obsLabelsType,
+                    obsLabelsData?.[scopeKey]?.obsLabels?.[
+                    // TODO: Maybe all loaders that return obsIndex should also return an obsIndexMap
+                    // with keys: obsId, values: obsIdx
+                    // which would avoid the indexOf calls.
+                    obsLabelsData?.[scopeKey]?.obsIndex?.indexOf(obsId)],
+                ])).filter(([obsLabelsType]) => Boolean(obsLabelsType))),
+            };
+        }
+        return null;
+    }, [obsType, obsLabelsTypes, obsLabelsData, obsSetsMembership]);
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,12 @@
+export { VitS } from "./VitS.js";
+export { TitleInfo } from "./TitleInfo.js";
+export { PopperMenu } from "./shared-mui/components.js";
+export { useHasLoader } from "./data-hook-utils.js";
+export { logConfig } from "./view-config-utils.js";
+export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize } from "./hooks.js";
+export { useInitialCoordination, useCoordination, useComplexCoordination, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout } from "./state/hooks.js";
+export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useMultiObsLabels, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData } from "./data-hooks.js";
+export { AbstractLoader, AbstractTwoStepLoader, LoaderResult } from "./data/index.js";
+export { AbstractLoaderError, DatasetNotFoundError, LoaderNotFoundError, LoaderValidationError, DataSourceFetchError } from "./errors/index.js";
+export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles } from "./shared-plot-options/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -1,18 +1,12 @@
-export { VitS } from './VitS';
-export { TitleInfo } from './TitleInfo';
-export { PopperMenu } from './shared-mui/components';
-export { registerPluginViewType, registerPluginCoordinationType, registerPluginFileType, registerPluginJointFileType, } from './plugins';
+export { VitS } from './VitS.js';
+export { TitleInfo } from './TitleInfo.js';
+export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
-export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useExpressionValueGetter, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, } from './hooks';
-export { useCoordination, useComplexCoordination, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, } from './state/hooks';
-export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useMultiObsLabels, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, } from './data-hooks';
-export { useHasLoader, } from './data-hook-utils';
-export { AbstractLoader, AbstractTwoStepLoader, LoaderResult, } from './data/index';
-export { AbstractLoaderError, DatasetNotFoundError, LoaderNotFoundError, LoaderValidationError, OptionsValidationError, DataSourceFetchError, } from './errors/index';
-export { 
-// TODO(monorepo): should these be in here? or within file-types/
-obsEmbeddingAnndataSchema, obsLocationsAnndataSchema, obsSegmentationsAnndataSchema, obsSetsAnndataSchema, obsFeatureMatrixAnndataSchema, obsLabelsAnndataSchema, featureLabelsAnndataSchema, obsEmbeddingCsvSchema, obsLocationsCsvSchema, obsLabelsCsvSchema, featureLabelsCsvSchema, obsSetsCsvSchema, anndataZarrSchema, emptySchema, } from './file-options-schemas';
-export { SCHEMA_HANDLERS, LATEST_VERSION, } from './view-config-versions';
-export { upgradeAndValidate, } from './view-config-utils';
-export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles, } from './shared-plot-options';
-export * from './json-schemas';
+export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, } from './hooks.js';
+export { useInitialCoordination, useCoordination, useComplexCoordination, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, } from './state/hooks.js';
+export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useMultiObsLabels, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, } from './data-hooks.js';
+export { useHasLoader, } from './data-hook-utils.js';
+export { AbstractLoader, AbstractTwoStepLoader, LoaderResult, } from './data/index.js';
+export { AbstractLoaderError, DatasetNotFoundError, LoaderNotFoundError, LoaderValidationError, DataSourceFetchError, } from './errors/index.js';
+export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles, } from './shared-plot-options/index.js';
+export { logConfig } from './view-config-utils.js';

package/dist-tsc/mui-utils.d.ts

@@ -0,0 +1,2 @@
+export function createGenerateClassName(customPrefix: any): (rule: any, styleSheet: any) => string;
+//# sourceMappingURL=mui-utils.d.ts.map

package/dist-tsc/mui-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mui-utils.d.ts","sourceRoot":"","sources":["../src/mui-utils.js"],"names":[],"mappings":"AAyBA,mGA0BC"}

package/dist-tsc/mui-utils.js

@@ -0,0 +1,44 @@
+// This function has been copied from MUI v4
+// with logic related to randomness / random numbers removed.
+// Reference: https://github.com/mui/material-ui/blob/0adada09/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js#L29
+/**
+ * This is the list of the style rule name we use as drop in replacement for the built-in
+ * pseudo classes (:checked, :disabled, :focused, etc.).
+ *
+ * Why do they exist in the first place?
+ * These classes are used at a specificity of 2.
+ * It allows them to override previously defined styles as well as
+ * being untouched by simple user overrides.
+ */
+const stateClasses = [
+    'checked',
+    'disabled',
+    'error',
+    'focused',
+    'focusVisible',
+    'required',
+    'expanded',
+    'selected',
+];
+const defaultPrefix = 'vit-';
+export function createGenerateClassName(customPrefix) {
+    return (rule, styleSheet) => {
+        const { name: styleSheetName, link: styleSheetLink, classNamePrefix, } = styleSheet.options;
+        const { key: ruleKey } = rule;
+        const seedPrefix = customPrefix ? `${customPrefix}-` : defaultPrefix;
+        // Is a global static MUI style?
+        if (styleSheetName && styleSheetName.indexOf('Mui') === 0 && !styleSheetLink) {
+            // We can use a shorthand class name, we never use the keys to style the components.
+            if (stateClasses.indexOf(ruleKey) !== -1) {
+                return `Mui-${ruleKey}`;
+            }
+            const prefix = `${seedPrefix}${styleSheetName}-${ruleKey}`;
+            return prefix;
+        }
+        // Help with debuggability.
+        if (classNamePrefix) {
+            return `${seedPrefix}${classNamePrefix}-${ruleKey}`;
+        }
+        return `${seedPrefix}${ruleKey}`;
+    };
+}

package/dist-tsc/plugins.test.fixtures.d.ts

@@ -0,0 +1,61 @@
+export function pluginExpandAnnDataConvenience(fileDef: any): {
+    fileType: string;
+    url: any;
+    options: any;
+}[];
+export namespace convenienceFileDefsCollapsed {
+    const version: string;
+    const name: string;
+    const description: string;
+    const initStrategy: string;
+    const datasets: {
+        files: {
+            fileType: string;
+            url: string;
+            options: {
+                cells: {
+                    xy: string;
+                };
+                cellSets: {
+                    groupName: string;
+                    setName: string;
+                }[];
+            };
+        }[];
+        name: string;
+        uid: string;
+    }[];
+    const layout: never[];
+}
+export namespace convenienceFileDefsExpanded {
+    const version_1: string;
+    export { version_1 as version };
+    const name_1: string;
+    export { name_1 as name };
+    const description_1: string;
+    export { description_1 as description };
+    const initStrategy_1: string;
+    export { initStrategy_1 as initStrategy };
+    const datasets_1: {
+        files: ({
+            fileType: string;
+            url: string;
+            options: {
+                xy: string;
+            };
+        } | {
+            fileType: string;
+            url: string;
+            options: {
+                groupName: string;
+                setName: string;
+            }[];
+        })[];
+        name: string;
+        uid: string;
+    }[];
+    export { datasets_1 as datasets };
+    const layout_1: never[];
+    export { layout_1 as layout };
+}
+//# sourceMappingURL=plugins.test.fixtures.d.ts.map

package/dist-tsc/plugins.test.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.test.fixtures.d.ts","sourceRoot":"","sources":["../src/plugins.test.fixtures.js"],"names":[],"mappings":"AA+BA;;;;IAaC"}

package/dist-tsc/plugins.test.fixtures.js

@@ -0,0 +1,76 @@
+export const convenienceFileDefsCollapsed = {
+    version: '1.0.15',
+    name: 'My config name',
+    description: 'My config description',
+    initStrategy: 'auto',
+    datasets: [
+        {
+            files: [
+                {
+                    fileType: 'anndata.convenience.zarr',
+                    url: 'http://localhost:8000/my_anndata.zarr',
+                    options: {
+                        cells: {
+                            xy: 'obsm/centroids',
+                        },
+                        cellSets: [
+                            {
+                                groupName: 'Leiden',
+                                setName: 'obs/leiden',
+                            },
+                        ],
+                    },
+                },
+            ],
+            name: 'A',
+            uid: 'A',
+        },
+    ],
+    layout: [],
+};
+export function pluginExpandAnnDataConvenience(fileDef) {
+    return [
+        {
+            fileType: 'anndata-cells.zarr',
+            url: fileDef.url,
+            options: fileDef.options.cells,
+        },
+        {
+            fileType: 'anndata-cell-sets.zarr',
+            url: fileDef.url,
+            options: fileDef.options.cellSets,
+        },
+    ];
+}
+export const convenienceFileDefsExpanded = {
+    version: '1.0.15',
+    name: 'My config name',
+    description: 'My config description',
+    initStrategy: 'auto',
+    datasets: [
+        {
+            files: [
+                {
+                    fileType: 'anndata-cells.zarr',
+                    url: 'http://localhost:8000/my_anndata.zarr',
+                    options: {
+                        xy: 'obsm/centroids',
+                    },
+                },
+                {
+                    fileType: 'anndata-cell-sets.zarr',
+                    url: 'http://localhost:8000/my_anndata.zarr',
+                    options: [
+                        {
+                            groupName: 'Leiden',
+                            setName: 'obs/leiden',
+                        },
+                    ],
+                },
+            ],
+            name: 'A',
+            uid: 'A',
+        },
+    ],
+    layout: [],
+};

package/dist-tsc/shared-mui/components.d.ts

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

package/dist-tsc/shared-mui/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAwBA,oDAwDC"}

package/dist-tsc/shared-mui/components.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import { makeStyles, Paper, Popper, IconButton, MenuList, ClickAwayListener, Fade, } from '@material-ui/core';
+import { useVitessceContainer } from '../hooks.js';
+const useStyles = makeStyles(() => ({
+    paper: {
+        maxHeight: 200,
+        overflow: 'auto',
+    },
+    container: {
+        position: 'relative',
+        left: 0,
+        top: 0,
+    },
+}));
+export function PopperMenu(props) {
+    const { buttonIcon, open, setOpen, children, buttonClassName, placement = 'bottom-end', } = props;
+    const classes = useStyles();
+    const anchorRef = useRef();
+    const handleClick = () => {
+        setOpen(prev => !prev);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const id = open ? 'v-popover-menu' : undefined;
+    const getTooltipContainer = useVitessceContainer(anchorRef);
+    return (_jsxs("div", { ref: anchorRef, className: classes.container, children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, size: "small", className: buttonClassName, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: _jsx(Paper, { elevation: 4, className: classes.paper, children: _jsx(MenuList, { children: children }) }) }) })) })] }));
+}

package/dist-tsc/shared-mui/container.d.ts

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

package/dist-tsc/shared-mui/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/shared-mui/container.js"],"names":[],"mappings":"AAEA,0IAiNI"}