@vitessce/vit-s 3.5.7 → 3.5.8

package/dist-tsc/FallbackForView.d.ts

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

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

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

package/dist-tsc/FallbackForView.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { getDebugMode } from '@vitessce/globals';
+// TODO: Improve styling - perhaps style similar to ./TitleInfo.js
+// TODO: Display different info depending on the type of error
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForView(props) {
+    const { error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+     } = props;
+    return (_jsxs("div", { children: [_jsx("p", { children: "A view-level error occurred." }), getDebugMode() ? (_jsx("pre", { style: { color: 'red' }, children: error.message })) : null] }));
+}

package/dist-tsc/FallbackForVitS.d.ts

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

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

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

package/dist-tsc/FallbackForVitS.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+// TODO: Improve styling - see ./DebugWindow.js
+// TODO: Display different info depending on the type of error
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForVitS(props) {
+    const { error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+     } = props;
+    return (_jsxs("div", { children: [_jsx("p", { children: "Error:" }), _jsx("pre", { style: { color: 'red' }, children: error.message })] }));
+}

package/dist-tsc/VitSContainer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This serves as a way to wrap VitS in a React ErrorBoundary.
+ * Since there is a lot of logic within the VitS component,
+ * we want the ErrorBoundary to be a parent (as opposed to a child)
+ * of the VitS component.
+ * @param {*} props All props will be passed down to VitS.
+ */
+export function VitSContainer(props: any): JSX.Element;
+//# sourceMappingURL=VitSContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitSContainer.d.ts","sourceRoot":"","sources":["../src/VitSContainer.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,qCAFW,GAAC,eAQX"}

package/dist-tsc/VitSContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FallbackForVitS } from './FallbackForVitS.js';
+import { VitS } from './VitS.js';
+/**
+ * This serves as a way to wrap VitS in a React ErrorBoundary.
+ * Since there is a lot of logic within the VitS component,
+ * we want the ErrorBoundary to be a parent (as opposed to a child)
+ * of the VitS component.
+ * @param {*} props All props will be passed down to VitS.
+ */
+export function VitSContainer(props) {
+    return (_jsx(ErrorBoundary, { FallbackComponent: FallbackForVitS, children: _jsx(VitS, { ...props }) }));
+}

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

@@ -43,6 +43,7 @@ export function useFeatureLabelsData(loaders: any, dataset: any, isRequired: any
 export function useImageData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
 export function useGenomicProfilesData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
 export function useNeighborhoodsData(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
+export function useComparisonMetadata(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): array;
 /**
  * Get data from the expression matrix data type loader for a given gene selection.
  * Throw warnings if the data is marked as required.
@@ -58,6 +59,27 @@ export function useNeighborhoodsData(loaders: any, dataset: any, isRequired: any
  * for however many genes are in the selection.
  */
 export function useFeatureSelection(loaders: object, dataset: string, isRequired: boolean, selection: boolean, matchOn: any): array;
+/**
+ * Utility hook function which can be used to define
+ * dataType-specific data hooks which call a loader.loadMulti
+ * method to obtain multiple data frames resulting from
+ * multiple comparative analyses.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} matchOn Coordination values used to obtain a matching loader.
+ * @param {object} volcanoOptions Options to pass to the loadMulti function of the loader.
+ * @param {string} dataType A data type.
+ * @returns {array} [{ df, metadata }] Array of dataframes and their metadata, where
+ * df is an object in which each column is stored as an array like { col1: arr1, col2: arr2 }.
+ */
+export function useComparativeDataType(loaders: object, dataset: string, isRequired: boolean, matchOn: object, volcanoOptions: object, dataType: string): array;
+export function useFeatureStatsData(loaders: any, dataset: any, isRequired: any, matchOn: any, volcanoOptions: any): array;
+export function useFeatureSetStatsData(loaders: any, dataset: any, isRequired: any, matchOn: any, volcanoOptions: any): array;
+export function useObsSetStatsData(loaders: any, dataset: any, isRequired: any, matchOn: any, volcanoOptions: any): array;
 /**
  * Get the attributes for the expression matrix data type loader,
  * i.e names of cells and genes.

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

@@ -1 +1 @@
-{"version":3,"file":"data-hooks.d.ts","sourceRoot":"","sources":["../src/data-hooks.js"],"names":[],"mappings":"AAkBA;;;;;;;;GAQG;AACH,wCAPW,MAAM,WAEN,MAAM,GAEJ,KAAK,CAoBjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,6CAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAajB;AAED,4JASC;AAED,6JASC;AAED,gKASC;AAED,6JASC;AAED,oKASC;AAED,2JASC;AAED,8JASC;AAED,+JASC;AAED,oKASC;AAED,iKASC;AAED,yJASC;AAED,mKASC;AAED,iKASC;AAED;;;;;;;;;;;;;GAaG;AACH,6CAVW,MAAM,WAEN,MAAM,cAEN,OAAO,aAEP,OAAO,iBACL,KAAK,CAiFjB;AAED;;;;;;;;;;;;;GAaG;AACH,oDARW,MAAM,WAEN,MAAM,cAEN,OAAO,iBAEL,MAAM,CA2ElB;AAED,+JAuBC;AAED,8JAuBC;AAED,2HAsBC;AAGD,iIAsBC;AAGD,4GAmBC;AAED,sKA2BC;AAED,4JAyBC"}
+{"version":3,"file":"data-hooks.d.ts","sourceRoot":"","sources":["../src/data-hooks.js"],"names":[],"mappings":"AAkBA;;;;;;;;GAQG;AACH,wCAPW,MAAM,WAEN,MAAM,GAEJ,KAAK,CAoBjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,6CAhBW,MAAM,WAEN,MAAM,cAEN,OAAO,uBAEP,MAAM,6BAGN,MAAM,iBAGJ,KAAK,CAajB;AAED,4JASC;AAED,6JASC;AAED,gKASC;AAED,6JASC;AAED,oKASC;AAED,2JASC;AAED,8JASC;AAED,+JASC;AAED,oKASC;AAED,iKASC;AAED,yJASC;AAED,mKASC;AAED,iKASC;AAED,kKASC;AAED;;;;;;;;;;;;;GAaG;AACH,6CAVW,MAAM,WAEN,MAAM,cAEN,OAAO,aAEP,OAAO,iBACL,KAAK,CAiFjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,gDAZW,MAAM,WAEN,MAAM,cAEN,OAAO,WAEP,MAAM,kBACN,MAAM,YACN,MAAM,GACJ,KAAK,CAoEjB;AAED,2HAOC;AAED,8HAOC;AAED,0HAOC;AAED;;;;;;;;;;;;;GAaG;AACH,oDARW,MAAM,WAEN,MAAM,cAEN,OAAO,iBAEL,MAAM,CA2ElB;AAED,+JAuBC;AAED,8JAuBC;AAED,2HAsBC;AAGD,iIAsBC;AAGD,4GAmBC;AAED,sKA2BC;AAED,4JAyBC"}

package/dist-tsc/data-hooks.js

@@ -92,6 +92,9 @@ export function useGenomicProfilesData(loaders, dataset, isRequired, coordinatio
 export function useNeighborhoodsData(loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
     return useDataType(DataType.NEIGHBORHOODS, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn);
 }
+export function useComparisonMetadata(loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
+    return useDataType(DataType.COMPARISON_METADATA, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn);
+}
 /**
  * Get data from the expression matrix data type loader for a given gene selection.
  * Throw warnings if the data is marked as required.
@@ -174,6 +177,93 @@ export function useFeatureSelection(loaders, dataset, isRequired, selection, mat
     }, [anyError, setWarning]);
     return [geneData, loadedGeneName, dataStatus];
 }
+/**
+ * Utility hook function which can be used to define
+ * dataType-specific data hooks which call a loader.loadMulti
+ * method to obtain multiple data frames resulting from
+ * multiple comparative analyses.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} matchOn Coordination values used to obtain a matching loader.
+ * @param {object} volcanoOptions Options to pass to the loadMulti function of the loader.
+ * @param {string} dataType A data type.
+ * @returns {array} [{ df, metadata }] Array of dataframes and their metadata, where
+ * df is an object in which each column is stored as an array like { col1: arr1, col2: arr2 }.
+ */
+export function useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOptions, dataType) {
+    const setWarning = useSetWarning();
+    const placeholderObject = useMemo(() => ({}), []);
+    const statsQuery = useQuery({
+        // TODO: only enable once `loaders` is available?
+        structuralSharing: false,
+        placeholderData: placeholderObject,
+        // Include the hook name in the queryKey to prevent the case in which an identical queryKey
+        // in a different hook would cause an accidental cache hit.
+        queryKey: [dataset, dataType, matchOn, volcanoOptions, 'useComparativeData'],
+        // TODO: use TypeScript to type the return value?
+        queryFn: async (ctx) => {
+            const loader = getMatchingLoader(ctx.meta.loaders, ctx.queryKey[0], ctx.queryKey[1], ctx.queryKey[2]);
+            if (loader) {
+                // FeatureStats loader has a special loadMulti function
+                // that depends on coordination values such as sampleSetSelection.
+                const implementsLoadAttrs = typeof loader.loadMulti === 'function';
+                if (implementsLoadAttrs) {
+                    // Has loadMulti function.
+                    const payload = await loader.loadMulti(volcanoOptions);
+                    if (!payload)
+                        return placeholderObject;
+                    const { data: payloadData } = payload;
+                    return {
+                        data: payloadData,
+                        urls: null,
+                    };
+                }
+                // No loadAttrs function.
+                const payload = await loader.load();
+                if (!payload)
+                    return placeholderObject;
+                const { data: payloadData } = payload;
+                return {
+                    data: payloadData,
+                    urls: null,
+                };
+            }
+            // No loader was found.
+            if (isRequired) {
+                // Status: error
+                throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+            }
+            else {
+                // Status: success
+                return { data: placeholderObject, dataKey: null };
+            }
+        },
+        meta: { loaders },
+    });
+    const { data, status, isFetching, error } = statsQuery;
+    const loadedData = data?.data || placeholderObject;
+    const dataStatus = isFetching ? STATUS.LOADING : status;
+    const urls = data?.urls;
+    useEffect(() => {
+        if (error) {
+            setWarning(error.message);
+        }
+    }, [error, setWarning]);
+    return [loadedData, dataStatus, urls];
+}
+export function useFeatureStatsData(loaders, dataset, isRequired, matchOn, volcanoOptions) {
+    return useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOptions, DataType.FEATURE_STATS);
+}
+export function useFeatureSetStatsData(loaders, dataset, isRequired, matchOn, volcanoOptions) {
+    return useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOptions, DataType.FEATURE_SET_STATS);
+}
+export function useObsSetStatsData(loaders, dataset, isRequired, matchOn, volcanoOptions) {
+    return useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOptions, DataType.OBS_SET_STATS);
+}
 /**
  * Get the attributes for the expression matrix data type loader,
  * i.e names of cells and genes.

package/dist-tsc/hooks.d.ts

@@ -96,4 +96,13 @@ export function useGetObsInfo(obsType: any, obsLabelsTypes: any, obsLabelsData:
 export function useExpandedFeatureLabelsMap(featureType: string, featureLabelsMap: Map<any, any> | null, options: any): {
     stripCuriePrefixes: boolean;
 } | null;
+/**
+ * Using a loader object's options,
+ * return a mapping from group name to column name.
+ * @param {*} loader obsSets or sampleSets loader class
+ * @param {[boolean]} reverse Optionally, reverse
+ * (so, return column name to group name mapping).
+ * @returns {Record<string, string>} Mapping from group name to column name.
+ */
+export function useColumnNameMapping(loader: any, reverse?: [boolean]): Record<string, string>;
 //# sourceMappingURL=hooks.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAqBA,oDAOC;AAED;;;;GAIG;AACH,uCAHa,KAAK,CAmBjB;AAED;;;;GAIG;AACH,mCAHa,KAAK,CAoCjB;AAED;;;;;GAKG;AACH,qCAJa,KAAK,CAqCjB;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,GACf,KAAK,CAYjB;AAED;;;;;;GAMG;AACH,qDAJW,GAAG,GACD,KAAK,CA0BjB;AAED;;;;;;;;;;GAUG;AACH,+DARG;IAAuB,gBAAgB,EAA/B,MAAM;CAEd,GAAU,KAAK,CAmBjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,yDAbW,YAAY,EAAE,GAAG,IAAI,GAInB;IACZ,QAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACjC,OAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACtC,OAAU,EAAE,MAAM,EAAE,CAAA;CACjB,CAwBH;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC;AAED;;;;;;;;;;GAUG;AACH,yDALW,MAAM,oBACN,gBAAI,IAAI,iBAEN;IAAE,kBAAkB,EAAE,OAAO,CAAA;CAAE,GAAC,IAAI,CAkChD"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAqBA,oDAOC;AAED;;;;GAIG;AACH,uCAHa,KAAK,CAmBjB;AAED;;;;GAIG;AACH,mCAHa,KAAK,CAoCjB;AAED;;;;;GAKG;AACH,qCAJa,KAAK,CAqCjB;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,GACf,KAAK,CAYjB;AAED;;;;;;GAMG;AACH,qDAJW,GAAG,GACD,KAAK,CA0BjB;AAED;;;;;;;;;;GAUG;AACH,+DARG;IAAuB,gBAAgB,EAA/B,MAAM;CAEd,GAAU,KAAK,CAmBjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,yDAbW,YAAY,EAAE,GAAG,IAAI,GAInB;IACZ,QAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACjC,OAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACtC,OAAU,EAAE,MAAM,EAAE,CAAA;CACjB,CAwBH;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC;AAED;;;;;;;;;;GAUG;AACH,yDALW,MAAM,oBACN,gBAAI,IAAI,iBAEN;IAAE,kBAAkB,EAAE,OAAO,CAAA;CAAE,GAAC,IAAI,CAkChD;AAED;;;;;;;GAOG;AACH,6CALW,GAAC,YACD,CAAC,OAAO,CAAC,GAEP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuBlC"}

package/dist-tsc/hooks.js

@@ -316,3 +316,31 @@ export function useExpandedFeatureLabelsMap(featureType, featureLabelsMap, optio
         : STATUS.SUCCESS);
     return [updatedFeatureLabelsMap, dataStatus];
 }
+/**
+ * Using a loader object's options,
+ * return a mapping from group name to column name.
+ * @param {*} loader obsSets or sampleSets loader class
+ * @param {[boolean]} reverse Optionally, reverse
+ * (so, return column name to group name mapping).
+ * @returns {Record<string, string>} Mapping from group name to column name.
+ */
+export function useColumnNameMapping(loader, reverse = false) {
+    return useMemo(() => {
+        const result = {};
+        if (loader?.options) {
+            const optionsArray = loader.options.obsSets
+                ? loader.options.obsSets
+                : loader.options.sampleSets;
+            optionsArray.forEach((optionObject) => {
+                const { name, path } = optionObject;
+                const columnName = path.split('/').at(-1);
+                result[name] = columnName;
+            });
+        }
+        if (reverse) {
+            return Object.fromEntries(Object.entries(result)
+                .map(([k, v]) => ([v, k])));
+        }
+        return result;
+    }, [loader]);
+}

package/dist-tsc/index.d.ts

@@ -1,12 +1,13 @@
 export { VitS } from "./VitS.js";
+export { VitSContainer } from "./VitSContainer.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 { createLoaders } from "./vitessce-grid-utils.js";
-export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, useExpandedFeatureLabelsMap } from "./hooks.js";
+export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, useExpandedFeatureLabelsMap, useColumnNameMapping } from "./hooks.js";
 export { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useViewConfig, useSetViewConfig, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes } from "./state/hooks.js";
-export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData } from "./data-hooks.js";
+export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, useComparisonMetadata, useFeatureStatsData, useFeatureSetStatsData, useObsSetStatsData } from "./data-hooks.js";
 export { usePointMultiObsLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useSegmentationMultiObsSets } from "./data-hooks-multilevel.js";
 export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles } from "./shared-plot-options/index.js";
 export { useAsyncFunction, usePageModeView } from "./contexts.js";

package/dist-tsc/index.js

@@ -1,10 +1,11 @@
 export { VitS } from './VitS.js';
+export { VitSContainer } from './VitSContainer.js';
 export { TitleInfo } from './TitleInfo.js';
 export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
-export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, useExpandedFeatureLabelsMap, } from './hooks.js';
+export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, useExpandedFeatureLabelsMap, useColumnNameMapping, } from './hooks.js';
 export { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useViewConfig, useSetViewConfig, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, } from './state/hooks.js';
-export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, } from './data-hooks.js';
+export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, useComparisonMetadata, useFeatureStatsData, useFeatureSetStatsData, useObsSetStatsData, } from './data-hooks.js';
 export { usePointMultiObsLabels, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useSegmentationMultiObsSets, } from './data-hooks-multilevel.js';
 export { useHasLoader, } from './data-hook-utils.js';
 export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles, } from './shared-plot-options/index.js';

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAgBA,oDAmMC"}
+{"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAkBA,oDAuMC"}

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useState, useMemo, useCallback } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
 import { isEqual } from 'lodash-es';
+import { ErrorBoundary } from 'react-error-boundary';
 import { getMaxRows, resolveLayout } from './layout-utils.js';
 import { PageModeViewContext } from '../contexts.js';
+import { FallbackForView } from '../FallbackForView.js';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     componentDidUpdate(prevProps) {
@@ -102,9 +104,9 @@ export function VitessceGridLayout(props) {
         const gridComponentsValues = Object.values(gridComponents);
         const contextValue = Object.fromEntries(gridComponentsValues.map((v) => {
             const Component = getComponent(v.component);
-            return [v.uid, () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: null, 
-                        // Props used by LinkControllerSubscriber:
-                        viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }, v.uid))];
+            return [v.uid, () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsx(ErrorBoundary, { FallbackComponent: FallbackForView, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: null, 
+                            // Props used by LinkControllerSubscriber:
+                            viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }) }, v.uid))];
         }));
         // Not pageMode, so no children to render.
         // We render the grid components based on the layout information.
@@ -113,9 +115,9 @@ export function VitessceGridLayout(props) {
                 const removeGridComponent = () => {
                     onRemoveComponent(v.uid);
                 };
-                return (_jsx("div", { children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent, 
-                        // Props used by LinkControllerSubscriber:
-                        viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }, v.uid));
+                return (_jsx("div", { children: _jsx(ErrorBoundary, { FallbackComponent: FallbackForView, children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent, 
+                            // Props used by LinkControllerSubscriber:
+                            viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores }) }) }, v.uid));
             }), contextValue];
     }, [gridComponents, getComponent, onRemoveComponent, theme]);
     return (pageMode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.5.7",
+  "version": "3.5.8",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,14 +29,15 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/abstract": "3.5.7",
-    "@vitessce/constants-internal": "3.5.7",
-    "@vitessce/plugins": "3.5.7",
-    "@vitessce/schemas": "3.5.7",
-    "@vitessce/utils": "3.5.7",
-    "@vitessce/sets-utils": "3.5.7",
-    "@vitessce/config": "3.5.7",
-    "@vitessce/globals": "3.5.7"
+    "react-error-boundary": "^5.0.0",
+    "@vitessce/abstract": "3.5.8",
+    "@vitessce/constants-internal": "3.5.8",
+    "@vitessce/plugins": "3.5.8",
+    "@vitessce/schemas": "3.5.8",
+    "@vitessce/utils": "3.5.8",
+    "@vitessce/sets-utils": "3.5.8",
+    "@vitessce/config": "3.5.8",
+    "@vitessce/globals": "3.5.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -44,7 +45,7 @@
     "react": "^18.0.0",
     "vite": "^4.3.0",
     "vitest": "^0.32.2",
-    "@vitessce/types": "3.5.7"
+    "@vitessce/types": "3.5.8"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/src/FallbackForView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getDebugMode } from '@vitessce/globals';
+
+// TODO: Improve styling - perhaps style similar to ./TitleInfo.js
+// TODO: Display different info depending on the type of error
+
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForView(props) {
+  const {
+    error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+  } = props;
+
+  return (
+    <div>
+      <p>A view-level error occurred.</p>
+      {getDebugMode() ? (
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+      ) : null}
+    </div>
+  );
+}

package/src/FallbackForVitS.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+// TODO: Improve styling - see ./DebugWindow.js
+// TODO: Display different info depending on the type of error
+
+// Reference: https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackcomponent-prop
+export function FallbackForVitS(props) {
+  const {
+    error,
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    // resetErrorBoundary,
+  } = props;
+
+
+  return (
+    <div>
+      <p>Error:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+}

package/src/VitSContainer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FallbackForVitS } from './FallbackForVitS.js';
+import { VitS } from './VitS.js';
+
+/**
+ * This serves as a way to wrap VitS in a React ErrorBoundary.
+ * Since there is a lot of logic within the VitS component,
+ * we want the ErrorBoundary to be a parent (as opposed to a child)
+ * of the VitS component.
+ * @param {*} props All props will be passed down to VitS.
+ */
+export function VitSContainer(props) {
+  return (
+    <ErrorBoundary FallbackComponent={FallbackForVitS}>
+      <VitS {...props} />
+    </ErrorBoundary>
+  );
+}

package/src/data-hooks.js

@@ -219,6 +219,17 @@ export function useNeighborhoodsData(
   );
 }
 
+export function useComparisonMetadata(
+  loaders, dataset, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  return useDataType(
+    DataType.COMPARISON_METADATA,
+    loaders, dataset, isRequired,
+    coordinationSetters, initialCoordinationValues, matchOn,
+  );
+}
+
 /**
  * Get data from the expression matrix data type loader for a given gene selection.
  * Throw warnings if the data is marked as required.
@@ -313,6 +324,117 @@ export function useFeatureSelection(
   return [geneData, loadedGeneName, dataStatus];
 }
 
+/**
+ * Utility hook function which can be used to define
+ * dataType-specific data hooks which call a loader.loadMulti
+ * method to obtain multiple data frames resulting from
+ * multiple comparative analyses.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} matchOn Coordination values used to obtain a matching loader.
+ * @param {object} volcanoOptions Options to pass to the loadMulti function of the loader.
+ * @param {string} dataType A data type.
+ * @returns {array} [{ df, metadata }] Array of dataframes and their metadata, where
+ * df is an object in which each column is stored as an array like { col1: arr1, col2: arr2 }.
+ */
+export function useComparativeDataType(
+  loaders, dataset, isRequired, matchOn, volcanoOptions, dataType,
+) {
+  const setWarning = useSetWarning();
+  const placeholderObject = useMemo(() => ({}), []);
+  const statsQuery = useQuery({
+    // TODO: only enable once `loaders` is available?
+    structuralSharing: false,
+    placeholderData: placeholderObject,
+    // Include the hook name in the queryKey to prevent the case in which an identical queryKey
+    // in a different hook would cause an accidental cache hit.
+    queryKey: [dataset, dataType, matchOn, volcanoOptions, 'useComparativeData'],
+    // TODO: use TypeScript to type the return value?
+    queryFn: async (ctx) => {
+      const loader = getMatchingLoader(
+        ctx.meta.loaders, ctx.queryKey[0], ctx.queryKey[1], ctx.queryKey[2],
+      );
+      if (loader) {
+        // FeatureStats loader has a special loadMulti function
+        // that depends on coordination values such as sampleSetSelection.
+        const implementsLoadAttrs = typeof loader.loadMulti === 'function';
+        if (implementsLoadAttrs) {
+          // Has loadMulti function.
+          const payload = await loader.loadMulti(volcanoOptions);
+          if (!payload) return placeholderObject;
+          const { data: payloadData } = payload;
+
+          return {
+            data: payloadData,
+            urls: null,
+          };
+        }
+        // No loadAttrs function.
+        const payload = await loader.load();
+        if (!payload) return placeholderObject;
+        const { data: payloadData } = payload;
+        return {
+          data: payloadData,
+          urls: null,
+        };
+      }
+      // No loader was found.
+      if (isRequired) {
+        // Status: error
+        throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+      } else {
+        // Status: success
+        return { data: placeholderObject, dataKey: null };
+      }
+    },
+    meta: { loaders },
+  });
+  const { data, status, isFetching, error } = statsQuery;
+  const loadedData = data?.data || placeholderObject;
+
+  const dataStatus = isFetching ? STATUS.LOADING : status;
+  const urls = data?.urls;
+
+  useEffect(() => {
+    if (error) {
+      setWarning(error.message);
+    }
+  }, [error, setWarning]);
+
+  return [loadedData, dataStatus, urls];
+}
+
+export function useFeatureStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.FEATURE_STATS,
+  );
+}
+
+export function useFeatureSetStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.FEATURE_SET_STATS,
+  );
+}
+
+export function useObsSetStatsData(
+  loaders, dataset, isRequired, matchOn, volcanoOptions,
+) {
+  return useComparativeDataType(
+    loaders, dataset, isRequired, matchOn, volcanoOptions,
+    DataType.OBS_SET_STATS,
+  );
+}
+
 /**
  * Get the attributes for the expression matrix data type loader,
  * i.e names of cells and genes.

package/src/hooks.js

@@ -370,3 +370,34 @@ export function useExpandedFeatureLabelsMap(featureType, featureLabelsMap, optio
   );
   return [updatedFeatureLabelsMap, dataStatus];
 }
+
+/**
+ * Using a loader object's options,
+ * return a mapping from group name to column name.
+ * @param {*} loader obsSets or sampleSets loader class
+ * @param {[boolean]} reverse Optionally, reverse
+ * (so, return column name to group name mapping).
+ * @returns {Record<string, string>} Mapping from group name to column name.
+ */
+export function useColumnNameMapping(loader, reverse = false) {
+  return useMemo(() => {
+    const result = {};
+    if (loader?.options) {
+      const optionsArray = loader.options.obsSets
+        ? loader.options.obsSets
+        : loader.options.sampleSets;
+      optionsArray.forEach((optionObject) => {
+        const { name, path } = optionObject;
+        const columnName = path.split('/').at(-1);
+        result[name] = columnName;
+      });
+    }
+    if (reverse) {
+      return Object.fromEntries(
+        Object.entries(result)
+          .map(([k, v]) => ([v, k])),
+      );
+    }
+    return result;
+  }, [loader]);
+}