@vitessce/vit-s 3.2.1 → 3.3.0

package/dist/index.js

@@ -32233,9 +32233,9 @@ const schemePlasma = [[13, 8, 135], [16, 7, 136], [19, 7, 137], [22, 7, 138], [2
 function rgbSpline(spline) {
   return (colors2) => {
     const n = colors2.length;
-    let r2 = new Array(n);
-    let g = new Array(n);
-    let b = new Array(n);
+    const r2 = new Array(n);
+    const g = new Array(n);
+    const b = new Array(n);
     let i;
     let color2;
     for (i = 0; i < n; ++i) {
@@ -32244,10 +32244,10 @@ function rgbSpline(spline) {
       g[i] = color2[1] || 0;
       b[i] = color2[2] || 0;
     }
-    r2 = spline(r2);
-    g = spline(g);
-    b = spline(b);
-    return (t2) => [r2(t2), g(t2), b(t2)];
+    const rFunc = spline(r2);
+    const gFunc = spline(g);
+    const bFunc = spline(b);
+    return (t2) => [rFunc(t2), gFunc(t2), bFunc(t2)];
   };
 }
 function basis(values2) {
@@ -35149,6 +35149,7 @@ const DataType$1 = {
 const FileType$1 = {
   // Joint file types
   ANNDATA_ZARR: "anndata.zarr",
+  SPATIALDATA_ZARR: "spatialdata.zarr",
   // Atomic file types
   OBS_EMBEDDING_CSV: "obsEmbedding.csv",
   OBS_SPOTS_CSV: "obsSpots.csv",
@@ -35171,6 +35172,16 @@ const FileType$1 = {
   OBS_SEGMENTATIONS_ANNDATA_ZARR: "obsSegmentations.anndata.zarr",
   OBS_LABELS_ANNDATA_ZARR: "obsLabels.anndata.zarr",
   FEATURE_LABELS_ANNDATA_ZARR: "featureLabels.anndata.zarr",
+  // SpatialData
+  IMAGE_SPATIALDATA_ZARR: "image.spatialdata.zarr",
+  LABELS_SPATIALDATA_ZARR: "labels.spatialdata.zarr",
+  SHAPES_SPATIALDATA_ZARR: "shapes.spatialdata.zarr",
+  OBS_FEATURE_MATRIX_SPATIALDATA_ZARR: "obsFeatureMatrix.spatialdata.zarr",
+  OBS_SETS_SPATIALDATA_ZARR: "obsSets.spatialdata.zarr",
+  OBS_SPOTS_SPATIALDATA_ZARR: "obsSpots.spatialdata.zarr",
+  // TODO:
+  // OBS_POINTS_SPATIALDATA_ZARR: 'obsPoints.spatialdata.zarr',
+  // OBS_LOCATIONS_SPATIALDATA_ZARR: 'obsLocations.spatialdata.zarr',
   // MuData
   OBS_FEATURE_MATRIX_MUDATA_ZARR: "obsFeatureMatrix.mudata.zarr",
   OBS_SETS_MUDATA_ZARR: "obsSets.mudata.zarr",
@@ -35383,10 +35394,10 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
   CoordinationType$1.EMBEDDING_OBS_OPACITY
 ];
 const note = "This file is autogenerated by .changeset/post-changelog.mjs.";
-const version = "3.2.1";
-const date = "2023-09-13";
+const version = "3.3.0";
+const date = "2023-09-28";
 const branch = "changeset-release/main";
-const hash = "a118dd03";
+const hash = "4b4a99ea";
 const META_VERSION = {
   note,
   version,
@@ -35632,7 +35643,13 @@ function buildConfigSchema(pluginFileTypes, pluginJointFileTypes, pluginCoordina
       // Wrap each value schema in z.record()
       fromEntries(pluginCoordinationTypes.map((ct) => [
         ct.name,
-        z.record(coordinationScopeName, ct.valueSchema.optional()).optional()
+        z.record(
+          // For now, assume the key type is string (though it would be
+          // slightly nicer if we could use the coordinationScopeName schema here).
+          // Once https://github.com/colinhacks/zod/issues/2746 gets resolved
+          // then we can try that approach again, but it should not be a big deal.
+          ct.valueSchema.optional()
+        ).optional()
       ]))
     ).strict().describe("The coordination space stores the values for each scope of each coordination object.").optional(),
     layout: z.array(z.object({
@@ -35740,9 +35757,30 @@ z.object({
   offsetsUrl: z.string().optional(),
   coordinateTransformations: omeCoordinateTransformations.optional()
 });
-z.object({
+const imageOmeZarrSchema = z.object({
   coordinateTransformations: omeCoordinateTransformations.optional()
 });
+imageOmeZarrSchema.extend({
+  path: z.string()
+});
+z.object({
+  path: z.string()
+});
+z.object({
+  path: z.string()
+});
+z.object({
+  path: z.string(),
+  tablePath: z.string().optional().describe("The path to a table which annotates the spots. If available but not specified, the spot identifiers may not be aligned with associated tabular data as expected.")
+});
+annDataObsFeatureMatrix.extend({
+  region: z.string().describe("The name of a region to use to filter instances (i.e., rows) in the table").optional()
+});
+z.object({
+  region: z.string().describe("The name of a region to use to filter instances (i.e., rows) in the table").optional(),
+  tablePath: z.string().optional().describe("The path to a table which contains the index for the set values."),
+  obsSets: annDataObsSets
+});
 z.object({
   obsIndex: z.string(),
   obsEmbedding: z.array(z.string()).length(2)
@@ -43130,9 +43168,9 @@ After: ${JSON.stringify(coordinationValuesWithDefaults)}`);
   }
   return coordinationValuesWithDefaults;
 }
-function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
+function createLoaders(datasets, configDescription, fileTypes, coordinationTypes, stores) {
   const result = {};
-  const dataSources = {};
+  const dataSources = new InternMap([], JSON.stringify);
   const defaultCoordinationValues = fromEntries(
     coordinationTypes.map((ct) => [ct.name, ct.defaultValue])
   );
@@ -43160,10 +43198,18 @@ function createLoaders(datasets, configDescription, fileTypes, coordinationTypes
       );
       const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
       const fileId = url || JSON.stringify(options);
-      if (!(fileId in dataSources)) {
-        dataSources[fileId] = new DataSourceClass({ url, requestInit: requestInit2 });
+      const dataSourceName = DataSourceClass.prototype.constructor.name;
+      const dataSourceKey = [fileId, dataSourceName];
+      if (!dataSources.has(dataSourceKey)) {
+        dataSources.set(dataSourceKey, new DataSourceClass({
+          url,
+          requestInit: requestInit2,
+          // Optionally, pass a Zarrita store to the data source,
+          // if one was mapped to this URL.
+          store: stores == null ? void 0 : stores[url]
+        }));
       }
-      const loader = new LoaderClass(dataSources[fileId], file);
+      const loader = new LoaderClass(dataSources.get(dataSourceKey), file);
       if (datasetLoaders.loaders[dataType]) {
         datasetLoaders.loaders[dataType].set(coordinationValuesWithDefaults, loader);
       } else {
@@ -43699,6 +43745,38 @@ const useTitleStyles = makeStyles((theme) => ({
     }
   }
 }));
+function arrayToString(arr) {
+  const arrF = arr.filter((item) => item !== void 0);
+  if (arrF.length === 0) {
+    return "";
+  }
+  if (arrF.length === 1) {
+    return arrF[0];
+  }
+  return `${arr.slice(0, -1).join(", ")} and ${arr.slice(-1)}`;
+}
+const ViewTypesToText = /* @__PURE__ */ new Map([
+  [ViewType$1.DESCRIPTION, "description"],
+  [ViewType$1.STATUS, "status view for debugging"],
+  [ViewType$1.SCATTERPLOT, "scatterplot with embeddings"],
+  [ViewType$1.SPATIAL, "spatial view"],
+  [ViewType$1.SPATIAL_BETA, "spatial view"],
+  [ViewType$1.HEATMAP, "cell by gene heatmap"],
+  [ViewType$1.LAYER_CONTROLLER, "layer controller"],
+  [ViewType$1.LAYER_CONTROLLER_BETA, "layer controller"],
+  [ViewType$1.GENOMIC_PROFILES, "genome browser tracks with bar plots"],
+  [ViewType$1.GATING, "scatterplot of gated gene expression data"],
+  [ViewType$1.FEATURE_LIST, "interactive list of features"],
+  [ViewType$1.OBS_SETS, "list of potential observation sets"],
+  [ViewType$1.OBS_SET_SIZES, "sizes of selected observation sets"],
+  [ViewType$1.OBS_SET_FEATURE_VALUE_DISTRIBUTION, "violin plot with values"],
+  [ViewType$1.FEATURE_VALUE_HISTOGRAM, "distribution of values"]
+]);
+function getAltText(config2) {
+  const componentList = config2.layout.map((c) => c.component);
+  const altText = `Vitessce grid with ${componentList.length} views, including ${arrayToString(componentList.map((c) => ViewTypesToText.get(c) || "plugin view"))}.`;
+  return altText;
+}
 const padding = 10;
 const margin = 5;
 function VitessceGrid(props) {
@@ -43719,6 +43797,7 @@ function VitessceGrid(props) {
   const [componentWidth] = useClosestVitessceContainerSize(containerRef);
   const classes = useVitessceContainerStyles();
   const titleClasses = useTitleStyles();
+  const altText = useMemo(() => getAltText(config2), [configKey]);
   useEffect(() => {
     onResize();
   }, [rowHeight, onResize]);
@@ -43753,9 +43832,12 @@ function VitessceGrid(props) {
     {
       ref: containerRef,
       className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer),
+      role: "group",
+      "aria-label": altText,
       children: layout2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         VitessceGridLayout,
         {
+          role: "group",
           layout: layout2,
           height: height2,
           rowHeight,
@@ -44079,6 +44161,7 @@ function createGenerateClassName(customPrefix) {
 function VitS(props) {
   const {
     config: config2,
+    stores,
     rowHeight,
     height: height2,
     theme,
@@ -44186,7 +44269,8 @@ function VitS(props) {
         configOrWarning.datasets,
         configOrWarning.description,
         fileTypes,
-        coordinationTypes
+        coordinationTypes,
+        stores
       );
       return createViewConfigStore(loaders, configOrWarning);
     }

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

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

package/dist-tsc/VitS.js

@@ -45,7 +45,7 @@ import { createGenerateClassName } from './mui-utils.js';
  * provided by the parent.
  */
 export function VitS(props) {
-    const { config, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, warning, } = props;
+    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, warning, } = props;
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
     const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
     const jointFileTypes = useMemo(() => (jointFileTypesProp || []), [jointFileTypesProp]);
@@ -135,7 +135,7 @@ export function VitS(props) {
     // Initialize the view config and loaders in the global state.
     const createViewConfigStoreClosure = useCallback(() => {
         if (success) {
-            const loaders = createLoaders(configOrWarning.datasets, configOrWarning.description, fileTypes, coordinationTypes);
+            const loaders = createLoaders(configOrWarning.datasets, configOrWarning.description, fileTypes, coordinationTypes, stores);
             return createViewConfigStore(loaders, configOrWarning);
         }
         // No config found, so clear the loaders.

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

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

package/dist-tsc/VitessceGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useCallback, } from 'react';
+import React, { useEffect, useCallback, useMemo, } from 'react';
 import clsx from 'clsx';
 import { VITESSCE_CONTAINER } from './classNames.js';
 import { VitessceGridLayout } from './vitessce-grid-layout/index.js';
@@ -8,6 +8,7 @@ import { useViewConfigStoreApi, useSetViewConfig, useSetLoaders, useEmitGridResi
 import { useClosestVitessceContainerSize, } from './hooks.js';
 import { useVitessceContainerStyles } from './shared-mui/container.js';
 import { useTitleStyles } from './title-styles.js';
+import { getAltText } from './generate-alt-text.js';
 const padding = 10;
 const margin = 5;
 /**
@@ -29,6 +30,7 @@ export default function VitessceGrid(props) {
     const [componentWidth] = useClosestVitessceContainerSize(containerRef);
     const classes = useVitessceContainerStyles();
     const titleClasses = useTitleStyles();
+    const altText = useMemo(() => getAltText(config), [configKey]);
     // When the row height has changed, publish a GRID_RESIZE event.
     useEffect(() => {
         onResize();
@@ -59,5 +61,5 @@ export default function VitessceGrid(props) {
         setLoaders(newLoaders);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [success, configKey]);
-    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), children: layout ? (_jsx(VitessceGridLayout, { layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize })) : null }));
+    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), role: "group", "aria-label": altText, children: layout ? (_jsx(VitessceGridLayout, { role: "group", layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize })) : null }));
 }

package/dist-tsc/generate-alt-text.d.ts

@@ -0,0 +1,19 @@
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Array} arr Array with text items.
+   * @returns {string} Natural language sentence in the form of 'a, b and c', where a/b/c are items.
+   */
+export function arrayToString(arr: any[]): string;
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Object} config Vitessce config.
+   * @returns {string} Natural language sentence describing config (alt-text).
+   */
+export function getAltText(config: Object): string;
+/**
+   * Mapping of ViewType to natural language description of ViewType.
+   */
+export const ViewTypesToText: Map<string, string>;
+//# sourceMappingURL=generate-alt-text.d.ts.map

package/dist-tsc/generate-alt-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-alt-text.d.ts","sourceRoot":"","sources":["../src/generate-alt-text.js"],"names":[],"mappings":"AAEA;;;;;KAKK;AACL,2CAFe,MAAM,CAWpB;AAuBD;;;;;KAKK;AACL,mCAHa,MAAM,GACJ,MAAM,CAMpB;AA/BD;;KAEK;AACL,kDAgBG"}

package/dist-tsc/generate-alt-text.js

@@ -0,0 +1,48 @@
+import { ViewType } from '@vitessce/constants-internal';
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Array} arr Array with text items.
+   * @returns {string} Natural language sentence in the form of 'a, b and c', where a/b/c are items.
+   */
+export function arrayToString(arr) {
+    const arrF = arr.filter(item => item !== undefined);
+    if (arrF.length === 0) {
+        return '';
+    }
+    if (arrF.length === 1) {
+        return arrF[0];
+    }
+    return `${arr.slice(0, -1).join(', ')} and ${arr.slice(-1)}`;
+}
+/**
+   * Mapping of ViewType to natural language description of ViewType.
+   */
+export const ViewTypesToText = new Map([
+    [ViewType.DESCRIPTION, 'description'],
+    [ViewType.STATUS, 'status view for debugging'],
+    [ViewType.SCATTERPLOT, 'scatterplot with embeddings'],
+    [ViewType.SPATIAL, 'spatial view'],
+    [ViewType.SPATIAL_BETA, 'spatial view'],
+    [ViewType.HEATMAP, 'cell by gene heatmap'],
+    [ViewType.LAYER_CONTROLLER, 'layer controller'],
+    [ViewType.LAYER_CONTROLLER_BETA, 'layer controller'],
+    [ViewType.GENOMIC_PROFILES, 'genome browser tracks with bar plots'],
+    [ViewType.GATING, 'scatterplot of gated gene expression data'],
+    [ViewType.FEATURE_LIST, 'interactive list of features'],
+    [ViewType.OBS_SETS, 'list of potential observation sets'],
+    [ViewType.OBS_SET_SIZES, 'sizes of selected observation sets'],
+    [ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION, 'violin plot with values'],
+    [ViewType.FEATURE_VALUE_HISTOGRAM, 'distribution of values'],
+]);
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Object} config Vitessce config.
+   * @returns {string} Natural language sentence describing config (alt-text).
+   */
+export function getAltText(config) {
+    const componentList = config.layout.map(c => c.component);
+    const altText = `Vitessce grid with ${componentList.length} views, including ${arrayToString(componentList.map(c => ViewTypesToText.get(c) || 'plugin view'))}.`;
+    return altText;
+}

package/dist-tsc/generate-alt-text.test.d.ts

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

package/dist-tsc/generate-alt-text.test.d.ts.map

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

package/dist-tsc/generate-alt-text.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { ViewType } from '@vitessce/constants-internal';
+import { arrayToString, ViewTypesToText, getAltText } from './generate-alt-text.js';
+describe('Tests for generating an alt text from the vitessce config', () => {
+    describe('Tests for arrayToString', () => {
+        it('should return empty string for empty array', () => {
+            const arr = [];
+            const str = arrayToString(arr);
+            expect(str).toEqual('');
+        });
+        it('should return the element if the araay only has one element', () => {
+            const arr = ['one'];
+            const str = arrayToString(arr);
+            expect(str).toEqual('one');
+        });
+        it('should return the elements concatenated with "and" when the array has two elements', () => {
+            const arr = ['one', 'two'];
+            const str = arrayToString(arr);
+            expect(str).toEqual('one and two');
+        });
+        it('should return the elements concatenated with ", " and the last two elements with "and" when the array has more than two elements', () => {
+            const arr = ['one', 'two', 'three', 'four'];
+            const str = arrayToString(arr);
+            expect(str).toEqual('one, two, three and four');
+        });
+    });
+    describe('Tests for (const) ViewTypesToText', () => {
+        it('should have a natural language mapping for every defined viewtype', () => {
+            expect(ViewTypesToText.length).toEqual(ViewType.length);
+        });
+    });
+    describe('Tests for getAltTest', () => {
+        const config = {
+            coordinationSpace: {},
+            datasets: {},
+            description: 'Spatial organization of the somatosensory cortex revealed by osmFISH',
+            initStrategy: 'auto',
+            layout: [
+                { component: 'description', props: { description: 'Codeluppi et al., Nature Methods 2018: Spatial organization of the somatosensory cortex revealed by osmFISH' }, x: 0, y: 0, w: 2 },
+                { component: 'layerController', x: 0, y: 1, w: 2, h: 4 },
+                { component: 'status', x: 0, y: 5, w: 2, h: 1 },
+                { component: 'spatial', props: { channelNamesVisible: true }, x: 2, y: 0, w: 4 },
+                { component: 'featureList', x: 9, y: 0, w: 3, h: 2 },
+                { component: 'obsSets', x: 9, y: 3, w: 3, h: 2 },
+                { component: 'heatmap', props: { transpose: true }, x: 2, y: 4, w: 5 },
+                { component: 'obsSetFeatureValueDistribution', x: 7, y: 4, w: 5, h: 2 },
+                { component: 'scatterplot', x: 6, y: 0, w: 3, h: 2 },
+                { component: 'scatterplot', x: 6, y: 2, w: 3, h: 2 },
+            ],
+            name: 'Codeluppi et al., Nature Methods 2018',
+            uid: 'A',
+            version: '1.0.16',
+        };
+        const altText = getAltText(config);
+        it('should return a string', () => {
+            expect(typeof altText).toEqual('string');
+        });
+        it('should contain the number of views', () => {
+            const hasNViews = altText.includes('10');
+            expect(hasNViews).toEqual(true);
+        });
+        it('should contain mappings', () => {
+            const hasHeatmap = altText.includes('heatmap') && altText.includes('spatial') && altText.includes('description') && altText.includes('scatterplot');
+            expect(hasHeatmap).toEqual(true);
+        });
+    });
+});

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

@@ -62,7 +62,9 @@ export function useMultiCoordinationScopes(parameter: any, coordinationScopes: a
 export function useMultiCoordinationScopesNonNull(parameter: any, coordinationScopes: any): any;
 export function useMultiCoordinationScopesSecondary(parameter: any, byType: any, coordinationScopes: any, coordinationScopesBy: any): any;
 export function useMultiCoordinationScopesSecondaryNonNull(parameter: any, byType: any, coordinationScopes: any, coordinationScopesBy: any): any;
-export function useMultiCoordinationValues(parameter: any, coordinationScopes: any): any;
+export function useMultiCoordinationValues(parameter: any, coordinationScopes: any): {
+    [key: string]: any;
+};
 /**
  * Get a mapping from dataset coordination scopes to dataset UIDs.
  * @param {object} coordinationScopes The coordination scope mapping object for a view.

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,oEAFa,MAAM,GAAC,SAAS,CAoB5B;AAED;;;;;;;GAOG;AACH,mGAFa,MAAM,GAAC,SAAS,CAoB5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,4BAEJ,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,oFAGJ,MAAM,GAAC,SAAS,CAc5B;AA2MD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,SAqChB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED,yFAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,SA6EhB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,SAYhB;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,SAkChB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,oEAIC;AAED;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AAnhCD;;;;+QAA0D;AAC1D,sFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;+QAAwD;AACxD,qFAAwD;AAmGjD,yFA8FJ;AAOI,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,oEAFa,MAAM,GAAC,SAAS,CAoB5B;AAED;;;;;;;GAOG;AACH,mGAFa,MAAM,GAAC,SAAS,CAoB5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,4BAEJ,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,oFAGJ,MAAM,GAAC,SAAS,CAc5B;AA2MD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,SAqChB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED;;EAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,SA6EhB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,SAYhB;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,SAkChB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,oEAIC;AAED;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AAnhCD;;;;+QAA0D;AAC1D,sFAA0D;AAC1D;;;;;EAAgE;AAOhE;;;;+QAAwD;AACxD,qFAAwD;AAmGjD,yFA8FJ;AAOI,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}

package/dist-tsc/vitessce-grid-utils.d.ts

@@ -3,11 +3,12 @@ export function useRowHeight(config: any, initialRowHeight: any, height: any, ma
  * Create a mapping from dataset ID to loader objects by data type.
  * @param {object[]} datasets The datasets array from the view config.
  * @param {string} configDescription The top-level description in the
+ * view config.
  * @param {PluginFileType[]} fileTypes
  * @param {PluginCoordinationType[]} coordinationTypes
- * view config.
+ * @param {object} stores Optional mapping from URLs to Zarrita stores.
  * @returns {object} Mapping from dataset ID to data type to loader
  * instance.
  */
-export function createLoaders(datasets: object[], configDescription: string, fileTypes: PluginFileType[], coordinationTypes: PluginCoordinationType[]): object;
+export function createLoaders(datasets: object[], configDescription: string, fileTypes: PluginFileType[], coordinationTypes: PluginCoordinationType[], stores: object): object;
 //# sourceMappingURL=vitessce-grid-utils.d.ts.map

package/dist-tsc/vitessce-grid-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vitessce-grid-utils.d.ts","sourceRoot":"","sources":["../src/vitessce-grid-utils.js"],"names":[],"mappings":"AA0CA,gHA6CC;AA4BD;;;;;;;;;GASG;AACH,wCARW,MAAM,EAAE,qBACR,MAAM,aACN,gBAAgB,qBAChB,wBAAwB,GAEtB,MAAM,CAiDlB"}
+{"version":3,"file":"vitessce-grid-utils.d.ts","sourceRoot":"","sources":["../src/vitessce-grid-utils.js"],"names":[],"mappings":"AA0CA,gHA6CC;AA4BD;;;;;;;;;;GAUG;AACH,wCATW,MAAM,EAAE,qBACR,MAAM,aAEN,gBAAgB,qBAChB,wBAAwB,UACxB,MAAM,GACJ,MAAM,CA4DlB"}

package/dist-tsc/vitessce-grid-utils.js

@@ -99,15 +99,16 @@ function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaul
  * Create a mapping from dataset ID to loader objects by data type.
  * @param {object[]} datasets The datasets array from the view config.
  * @param {string} configDescription The top-level description in the
+ * view config.
  * @param {PluginFileType[]} fileTypes
  * @param {PluginCoordinationType[]} coordinationTypes
- * view config.
+ * @param {object} stores Optional mapping from URLs to Zarrita stores.
  * @returns {object} Mapping from dataset ID to data type to loader
  * instance.
  */
-export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
+export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes, stores) {
     const result = {};
-    const dataSources = {};
+    const dataSources = new InternMap([], JSON.stringify);
     const defaultCoordinationValues = fromEntries(coordinationTypes.map(ct => ([ct.name, ct.defaultValue])));
     datasets.forEach((dataset) => {
         const datasetLoaders = {
@@ -120,12 +121,23 @@ export function createLoaders(datasets, configDescription, fileTypes, coordinati
             const dataType = getDataTypeFromFileType(fileType, fileTypes);
             const coordinationValuesWithDefaults = withDefaults(coordinationValues, dataType, fileType, dataset.uid, defaultCoordinationValues);
             const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
-            // Create _one_ DataSourceClass instance per URL. Derived loaders share this object.
+            // Create _one_ DataSourceClass instance per (URL, DataSource class name) pair.
+            // Derived loaders share this object.
             const fileId = url || JSON.stringify(options);
-            if (!(fileId in dataSources)) {
-                dataSources[fileId] = new DataSourceClass({ url, requestInit });
+            // The class name might be minified but that should not matter;
+            // we just need a string that is unique to the class for the key.
+            const dataSourceName = DataSourceClass.prototype.constructor.name;
+            const dataSourceKey = [fileId, dataSourceName];
+            if (!dataSources.has(dataSourceKey)) {
+                dataSources.set(dataSourceKey, new DataSourceClass({
+                    url,
+                    requestInit,
+                    // Optionally, pass a Zarrita store to the data source,
+                    // if one was mapped to this URL.
+                    store: stores?.[url],
+                }));
             }
-            const loader = new LoaderClass(dataSources[fileId], file);
+            const loader = new LoaderClass(dataSources.get(dataSourceKey), file);
             if (datasetLoaders.loaders[dataType]) {
                 datasetLoaders.loaders[dataType].set(coordinationValuesWithDefaults, loader);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,10 +29,10 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.2.1",
-    "@vitessce/schemas": "3.2.1",
-    "@vitessce/plugins": "3.2.1",
-    "@vitessce/utils": "3.2.1"
+    "@vitessce/constants-internal": "3.3.0",
+    "@vitessce/plugins": "3.3.0",
+    "@vitessce/schemas": "3.3.0",
+    "@vitessce/utils": "3.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/VitS.js

@@ -63,6 +63,7 @@ import { createGenerateClassName } from './mui-utils.js';
 export function VitS(props) {
   const {
     config,
+    stores,
     rowHeight,
     height,
     theme,
@@ -197,6 +198,7 @@ export function VitS(props) {
         configOrWarning.description,
         fileTypes,
         coordinationTypes,
+        stores,
       );
       return createViewConfigStore(loaders, configOrWarning);
     }

package/src/VitessceGrid.js

@@ -1,6 +1,7 @@
 import React, {
   useEffect,
   useCallback,
+  useMemo,
 } from 'react';
 import clsx from 'clsx';
 import { VITESSCE_CONTAINER } from './classNames.js';
@@ -20,6 +21,7 @@ import {
 } from './hooks.js';
 import { useVitessceContainerStyles } from './shared-mui/container.js';
 import { useTitleStyles } from './title-styles.js';
+import { getAltText } from './generate-alt-text.js';
 
 const padding = 10;
 const margin = 5;
@@ -58,6 +60,8 @@ export default function VitessceGrid(props) {
   const classes = useVitessceContainerStyles();
   const titleClasses = useTitleStyles();
 
+  const altText = useMemo(() => getAltText(config), [configKey]);
+
   // When the row height has changed, publish a GRID_RESIZE event.
   useEffect(() => {
     onResize();
@@ -101,9 +105,12 @@ export default function VitessceGrid(props) {
     <div
       ref={containerRef}
       className={clsx(VITESSCE_CONTAINER, classes.vitessceContainer)}
+      role="group"
+      aria-label={altText}
     >
       {layout ? (
         <VitessceGridLayout
+          role="group"
           layout={layout}
           height={height}
           rowHeight={rowHeight}

package/src/generate-alt-text.js

@@ -0,0 +1,51 @@
+import { ViewType } from '@vitessce/constants-internal';
+
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Array} arr Array with text items.
+   * @returns {string} Natural language sentence in the form of 'a, b and c', where a/b/c are items.
+   */
+export function arrayToString(arr) {
+  const arrF = arr.filter(item => item !== undefined);
+  if (arrF.length === 0) {
+    return '';
+  }
+  if (arrF.length === 1) {
+    return arrF[0];
+  }
+  return `${arr.slice(0, -1).join(', ')} and ${arr.slice(-1)}`;
+}
+
+/**
+   * Mapping of ViewType to natural language description of ViewType.
+   */
+export const ViewTypesToText = new Map([
+  [ViewType.DESCRIPTION, 'description'],
+  [ViewType.STATUS, 'status view for debugging'],
+  [ViewType.SCATTERPLOT, 'scatterplot with embeddings'],
+  [ViewType.SPATIAL, 'spatial view'],
+  [ViewType.SPATIAL_BETA, 'spatial view'],
+  [ViewType.HEATMAP, 'cell by gene heatmap'],
+  [ViewType.LAYER_CONTROLLER, 'layer controller'],
+  [ViewType.LAYER_CONTROLLER_BETA, 'layer controller'],
+  [ViewType.GENOMIC_PROFILES, 'genome browser tracks with bar plots'],
+  [ViewType.GATING, 'scatterplot of gated gene expression data'],
+  [ViewType.FEATURE_LIST, 'interactive list of features'],
+  [ViewType.OBS_SETS, 'list of potential observation sets'],
+  [ViewType.OBS_SET_SIZES, 'sizes of selected observation sets'],
+  [ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION, 'violin plot with values'],
+  [ViewType.FEATURE_VALUE_HISTOGRAM, 'distribution of values'],
+]);
+
+/**
+   * Method for converting an array with strings to a natural sentence,
+   * concatenating the items with commans, and the last item with 'and'.
+   * @param {Object} config Vitessce config.
+   * @returns {string} Natural language sentence describing config (alt-text).
+   */
+export function getAltText(config) {
+  const componentList = config.layout.map(c => c.component);
+  const altText = `Vitessce grid with ${componentList.length} views, including ${arrayToString(componentList.map(c => ViewTypesToText.get(c) || 'plugin view'))}.`;
+  return altText;
+}

package/src/generate-alt-text.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import { ViewType } from '@vitessce/constants-internal';
+import { arrayToString, ViewTypesToText, getAltText } from './generate-alt-text.js';
+
+describe('Tests for generating an alt text from the vitessce config', () => {
+  describe('Tests for arrayToString', () => {
+    it('should return empty string for empty array', () => {
+      const arr = [];
+      const str = arrayToString(arr);
+      expect(str).toEqual('');
+    });
+
+    it('should return the element if the araay only has one element', () => {
+      const arr = ['one'];
+      const str = arrayToString(arr);
+      expect(str).toEqual('one');
+    });
+
+    it('should return the elements concatenated with "and" when the array has two elements', () => {
+      const arr = ['one', 'two'];
+      const str = arrayToString(arr);
+      expect(str).toEqual('one and two');
+    });
+
+    it('should return the elements concatenated with ", " and the last two elements with "and" when the array has more than two elements', () => {
+      const arr = ['one', 'two', 'three', 'four'];
+      const str = arrayToString(arr);
+      expect(str).toEqual('one, two, three and four');
+    });
+  });
+
+  describe('Tests for (const) ViewTypesToText', () => {
+    it('should have a natural language mapping for every defined viewtype', () => {
+      expect(ViewTypesToText.length).toEqual(ViewType.length);
+    });
+  });
+
+  describe('Tests for getAltTest', () => {
+    const config = {
+      coordinationSpace: {},
+      datasets: {},
+      description: 'Spatial organization of the somatosensory cortex revealed by osmFISH',
+      initStrategy: 'auto',
+      layout: [
+        { component: 'description', props: { description: 'Codeluppi et al., Nature Methods 2018: Spatial organization of the somatosensory cortex revealed by osmFISH' }, x: 0, y: 0, w: 2 },
+        { component: 'layerController', x: 0, y: 1, w: 2, h: 4 },
+        { component: 'status', x: 0, y: 5, w: 2, h: 1 },
+        { component: 'spatial', props: { channelNamesVisible: true }, x: 2, y: 0, w: 4 },
+        { component: 'featureList', x: 9, y: 0, w: 3, h: 2 },
+        { component: 'obsSets', x: 9, y: 3, w: 3, h: 2 },
+        { component: 'heatmap', props: { transpose: true }, x: 2, y: 4, w: 5 },
+        { component: 'obsSetFeatureValueDistribution', x: 7, y: 4, w: 5, h: 2 },
+        { component: 'scatterplot', x: 6, y: 0, w: 3, h: 2 },
+        { component: 'scatterplot', x: 6, y: 2, w: 3, h: 2 },
+      ],
+      name: 'Codeluppi et al., Nature Methods 2018',
+      uid: 'A',
+      version: '1.0.16',
+    };
+    const altText = getAltText(config);
+    it('should return a string', () => {
+      expect(typeof altText).toEqual('string');
+    });
+    it('should contain the number of views', () => {
+      const hasNViews = altText.includes('10');
+      expect(hasNViews).toEqual(true);
+    });
+    it('should contain mappings', () => {
+      const hasHeatmap = altText.includes('heatmap') && altText.includes('spatial') && altText.includes('description') && altText.includes('scatterplot');
+      expect(hasHeatmap).toEqual(true);
+    });
+  });
+});

package/src/vitessce-grid-utils.js

@@ -117,15 +117,16 @@ function withDefaults(
  * Create a mapping from dataset ID to loader objects by data type.
  * @param {object[]} datasets The datasets array from the view config.
  * @param {string} configDescription The top-level description in the
+ * view config.
  * @param {PluginFileType[]} fileTypes
  * @param {PluginCoordinationType[]} coordinationTypes
- * view config.
+ * @param {object} stores Optional mapping from URLs to Zarrita stores.
  * @returns {object} Mapping from dataset ID to data type to loader
  * instance.
  */
-export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
+export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes, stores) {
   const result = {};
-  const dataSources = {};
+  const dataSources = new InternMap([], JSON.stringify);
   const defaultCoordinationValues = fromEntries(
     coordinationTypes.map(ct => ([ct.name, ct.defaultValue])),
   );
@@ -152,12 +153,23 @@ export function createLoaders(datasets, configDescription, fileTypes, coordinati
         defaultCoordinationValues,
       );
       const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
-      // Create _one_ DataSourceClass instance per URL. Derived loaders share this object.
+      // Create _one_ DataSourceClass instance per (URL, DataSource class name) pair.
+      // Derived loaders share this object.
       const fileId = url || JSON.stringify(options);
-      if (!(fileId in dataSources)) {
-        dataSources[fileId] = new DataSourceClass({ url, requestInit });
+      // The class name might be minified but that should not matter;
+      // we just need a string that is unique to the class for the key.
+      const dataSourceName = DataSourceClass.prototype.constructor.name;
+      const dataSourceKey = [fileId, dataSourceName];
+      if (!dataSources.has(dataSourceKey)) {
+        dataSources.set(dataSourceKey, new DataSourceClass({
+          url,
+          requestInit,
+          // Optionally, pass a Zarrita store to the data source,
+          // if one was mapped to this URL.
+          store: stores?.[url],
+        }));
       }
-      const loader = new LoaderClass(dataSources[fileId], file);
+      const loader = new LoaderClass(dataSources.get(dataSourceKey), file);
       if (datasetLoaders.loaders[dataType]) {
         datasetLoaders.loaders[dataType].set(coordinationValuesWithDefaults, loader);
       } else {