@vitessce/vit-s 2.0.0-beta.0

package/dist/file-options-schemas.js

@@ -0,0 +1,322 @@
+import Ajv from 'ajv';
+export function validateOptions(optionsSchema, options) {
+    const validate = new Ajv().compile(optionsSchema);
+    const valid = validate(options || null);
+    if (!valid) {
+        console.warn(JSON.stringify(validate.errors, null, 2));
+        throw new Error(`File definition options failed schema validation (${optionsSchema.title})`);
+    }
+    return true;
+}
+export const emptySchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#empty-options',
+    title: 'Empty options',
+    oneOf: [
+        { type: 'null' },
+    ],
+};
+const sharedDefinitions = {
+    annDataObs: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['path'],
+        properties: {
+            path: { type: 'string' },
+        },
+    },
+    annDataObsm: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['path'],
+        properties: {
+            path: { type: 'string' },
+            dims: {
+                type: 'array',
+                description: 'Which indices of the obsm object to take for a scatterplot, allowing for, for example, different PCs from obsm/X_pca',
+                items: { type: 'number' },
+            },
+        },
+    },
+    annDataConvenienceObsLabelsItem: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['path', 'obsLabelsType'],
+        properties: {
+            path: { type: 'string' },
+            obsLabelsType: { type: 'string' },
+        },
+    },
+    annDataConvenienceFeatureLabelsItem: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['path', 'featureLabelsType'],
+        properties: {
+            path: { type: 'string' },
+            featureLabelsType: { type: 'string' },
+        },
+    },
+    annDataConvenienceObsEmbeddingItem: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['path', 'embeddingType'],
+        properties: {
+            path: { type: 'string' },
+            dims: {
+                type: 'array',
+                description: 'Which indices of the obsm object to take for a scatterplot, allowing for, for example, different PCs from obsm/X_pca',
+                items: { type: 'number' },
+            },
+            embeddingType: { type: 'string' },
+        },
+    },
+    annDataObsLabels: { $ref: '#/definitions/annDataObs' },
+    annDataFeatureLabels: { $ref: '#/definitions/annDataObs' },
+    annDataObsFeatureMatrix: {
+        type: 'object',
+        description: 'Options for the obsFeatureMatrix.anndata.zarr file type.',
+        additionalProperties: false,
+        required: ['path'],
+        properties: {
+            path: { type: 'string' },
+            featureFilterPath: {
+                type: 'string',
+                description: 'If the feature index should be filtered, put a boolean column here (analogous to the previous geneFilter option). e.g., var/in_obsm_X_small_matrix',
+            },
+            initialFeatureFilterPath: {
+                type: 'string',
+                description: 'If only a subset of the matrix should be loaded initially, put a boolean column along the feature axis here (analogous to the previous matrixGeneFilter option). e.g., var/highly_variable',
+            },
+        },
+    },
+    annDataObsSets: {
+        type: 'array',
+        description: 'Options for the obsSets.anndata.zarr file type.',
+        items: {
+            type: 'object',
+            additionalProperties: false,
+            required: ['name', 'path'],
+            properties: {
+                name: {
+                    type: 'string',
+                    description: "The display name for the set, like 'Cell Type' or 'Louvain.'",
+                },
+                path: {
+                    oneOf: [
+                        {
+                            type: 'string',
+                            description: "The location in the AnnData store for the set, like 'obs/louvain' or 'obs/celltype.'",
+                        },
+                        {
+                            type: 'array',
+                            items: { type: 'string' },
+                            description: 'An array of locations in the AnnData store for a hierarchy of set names, from coarse to fine levels.',
+                        },
+                    ],
+                },
+                scorePath: {
+                    oneOf: [
+                        {
+                            type: 'string',
+                            description: "The location in the AnnData store for the set confidence scores, like 'obs/celltype_prediction_score.'",
+                        },
+                    ],
+                },
+            },
+        },
+    },
+    annDataObsLocations: { $ref: '#/definitions/annDataObsm' },
+    annDataObsEmbedding: { $ref: '#/definitions/annDataObsm' },
+    annDataObsSegmentations: { $ref: '#/definitions/annDataObs' },
+};
+/**
+ * Options schemas for atomic file types.
+ */
+// AnnData
+export const obsEmbeddingAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsEmbedding-anndata-zarr-options',
+    title: 'obsEmbedding.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsEmbedding',
+};
+export const obsLocationsAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsLocations-anndata-zarr-options',
+    title: 'obsLocations.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsLocations',
+};
+export const obsSegmentationsAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsSegmentations-anndata-zarr-options',
+    title: 'obsSegmentations.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsSegmentations',
+};
+export const obsSetsAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsSets-anndata-zarr-options',
+    title: 'obsSets.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsSets',
+};
+export const obsFeatureMatrixAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsFeatureMatrix-anndata-zarr-options',
+    title: 'obsFeatureMatrix.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsFeatureMatrix',
+};
+export const obsLabelsAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsLabels-anndata-zarr-options',
+    title: 'obsLabels.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataObsLabels',
+};
+export const featureLabelsAnndataSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#featureLabels-anndata-zarr-options',
+    title: 'featureLabels.anndata.zarr options',
+    definitions: sharedDefinitions,
+    $ref: '#/definitions/annDataFeatureLabels',
+};
+// CSV
+export const obsEmbeddingCsvSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsEmbedding-csv-options',
+    title: 'obsEmbedding.csv options',
+    type: 'object',
+    required: ['obsIndex', 'obsEmbedding'],
+    properties: {
+        obsIndex: { type: 'string' },
+        obsEmbedding: {
+            type: 'array',
+            items: { type: 'string' },
+            minItems: 2,
+            maxItems: 2,
+        },
+    },
+};
+export const obsLocationsCsvSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsLocations-csv-options',
+    title: 'obsLocations.csv options',
+    type: 'object',
+    required: ['obsIndex', 'obsLocations'],
+    properties: {
+        obsIndex: { type: 'string' },
+        obsLocations: {
+            type: 'array',
+            items: { type: 'string' },
+            minItems: 2,
+            maxItems: 2,
+        },
+    },
+};
+export const obsLabelsCsvSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsLabels-csv-options',
+    title: 'obsLabels.csv options',
+    type: 'object',
+    required: ['obsIndex', 'obsLabels'],
+    properties: {
+        obsIndex: { type: 'string' },
+        obsLabels: { type: 'string' },
+    },
+};
+export const featureLabelsCsvSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#featureLabels-csv-options',
+    title: 'featureLabels.csv options',
+    type: 'object',
+    required: ['featureIndex', 'featureLabels'],
+    properties: {
+        featureIndex: { type: 'string' },
+        featureLabels: { type: 'string' },
+    },
+};
+export const obsSetsCsvSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#obsLabels-csv-options',
+    title: 'obsLabels.csv options',
+    type: 'object',
+    additionalProperties: false,
+    required: ['obsIndex', 'obsSets'],
+    properties: {
+        obsIndex: { type: 'string' },
+        obsSets: {
+            type: 'array',
+            items: {
+                type: 'object',
+                additionalProperties: false,
+                required: ['name', 'column'],
+                properties: {
+                    name: {
+                        type: 'string',
+                        description: "The display name for the set, like 'Cell Type' or 'Louvain'",
+                    },
+                    column: {
+                        oneOf: [
+                            {
+                                type: 'string',
+                                description: "The column for the set, like 'cell_type'",
+                            },
+                            {
+                                type: 'array',
+                                items: { type: 'string' },
+                                description: 'An array of columns for a hierarchy of set names, from coarse to fine levels.',
+                            },
+                        ],
+                    },
+                    scoreColumn: {
+                        oneOf: [
+                            {
+                                type: 'string',
+                                description: "The column for the set confidence scores, like 'celltype_prediction_score'",
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    },
+};
+/**
+ * Options schemas for joint file types.
+ */
+export const anndataZarrSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'https://github.com/vitessce/vitessce/#anndata-zarr-options',
+    title: 'anndata.zarr options',
+    definitions: sharedDefinitions,
+    type: 'object',
+    minProperties: 1,
+    additionalProperties: false,
+    required: [],
+    properties: {
+        obsLabels: {
+            oneOf: [
+                { $ref: '#/definitions/annDataObsLabels' },
+                { type: 'array', items: { $ref: '#/definitions/annDataConvenienceObsLabelsItem' } },
+            ],
+        },
+        featureLabels: {
+            oneOf: [
+                { $ref: '#/definitions/annDataFeatureLabels' },
+                { type: 'array', items: { $ref: '#/definitions/annDataConvenienceFeatureLabelsItem' } },
+            ],
+        },
+        obsFeatureMatrix: { $ref: '#/definitions/annDataObsFeatureMatrix' },
+        obsSets: { $ref: '#/definitions/annDataObsSets' },
+        obsLocations: { $ref: '#/definitions/annDataObsLocations' },
+        obsSegmentations: { $ref: '#/definitions/annDataObsSegmentations' },
+        obsEmbedding: {
+            oneOf: [
+                { $ref: '#/definitions/annDataObsEmbedding' },
+                { type: 'array', items: { $ref: '#/definitions/annDataConvenienceObsEmbeddingItem' } },
+            ],
+        },
+    },
+};

package/dist/file-options-schemas.test.js

@@ -0,0 +1,23 @@
+import { expandAnndataZarr, } from './joint-file-types';
+describe('src/app/file-options-schemas.js', () => {
+    describe('Options validation for joint file type expansion functions', () => {
+        it('anndata.zarr with invalid options fails validation', () => {
+            expect(() => expandAnndataZarr({
+                fileType: 'anndata.zarr',
+                url: 'http://localhost:8000/anndata.zarr',
+                options: {
+                    obsFeatureMatrix: 1,
+                },
+            })).toThrow();
+        });
+        it('anndata.zarr with extra options fails validation', () => {
+            expect(() => expandAnndataZarr({
+                fileType: 'anndata.zarr',
+                url: 'http://localhost:8000/anndata.zarr',
+                options: {
+                    bad: 'bad',
+                },
+            })).toThrow();
+        });
+    });
+});

package/dist/hooks.js

@@ -0,0 +1,215 @@
+import { useRef, useState, useEffect, useCallback, useMemo, } from 'react';
+import debounce from 'lodash/debounce';
+import every from 'lodash/every';
+import { capitalize, fromEntries } from '@vitessce/utils';
+import { useGridResize, useEmitGridResize } from './state/hooks';
+import { VITESSCE_CONTAINER } from './classNames';
+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 === 'success'), statusValues);
+}
+/**
+ * This hook helps manage a list of URLs.
+ * @param {object} loaders The loaders dependency.
+ * @param {string} dataset The dataset UID dependency.
+ * @returns {array} An array
+ * [urls, addUrl]
+ * where urls is the array of URL objects,
+ * and addUrl is a function for adding a URL to the array.
+ */
+export function useUrls(loaders, dataset) {
+    const [urls, setUrls] = useState([]);
+    const addUrl = useCallback((url, name) => {
+        if (url) {
+            setUrls(prev => ([...prev, { url, name }]));
+        }
+    }, [setUrls]);
+    useEffect(() => {
+        setUrls([]);
+    }, [loaders, dataset]);
+    return [urls, addUrl];
+}
+/**
+ * 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];
+}
+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 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/index.js

@@ -0,0 +1,18 @@
+export { VitS } from './VitS';
+export { TitleInfo } from './TitleInfo';
+export { PopperMenu } from './shared-mui/components';
+export { registerPluginViewType, registerPluginCoordinationType, registerPluginFileType, } from './plugins';
+// For plugin view types:
+export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useExpressionValueGetter, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, } from './hooks';
+export { useCoordination, 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 './schemas';