@vitessce/vit-s 3.2.0 → 3.2.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React$6 from "react";
-import React__default, { Children, isValidElement, cloneElement as cloneElement$1, useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, createContext as createContext$1, createElement, useContext, useMemo, useCallback, useState, useId } from "react";
+import React__default, { Children, isValidElement, cloneElement as cloneElement$1, useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, createContext as createContext$1, createElement, useContext, useMemo, useCallback, useState } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -35383,10 +35383,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.0";
-const date = "2023-09-12";
+const version = "3.2.2";
+const date = "2023-09-20";
 const branch = "changeset-release/main";
-const hash = "13836ae8";
+const hash = "715881ca";
 const META_VERSION = {
   note,
   version,
@@ -35632,7 +35632,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({
@@ -43699,6 +43705,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 +43757,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 +43792,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,
@@ -45826,6 +45868,132 @@ class LoaderResult {
     this.coordinationValues = coordinationValues;
   }
 }
+const $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+const $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ React__default.createContext($b5e257d569688ac6$var$defaultContext);
+const $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ React__default.createContext(false);
+let $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+let $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx = useContext($b5e257d569688ac6$var$SSRContext);
+  let ref = useRef(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = React__default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = useContext($b5e257d569688ac6$var$SSRContext);
+  if (ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM)
+    console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter = $b5e257d569688ac6$var$useCounter(!!defaultId);
+  let prefix2 = ctx === $b5e257d569688ac6$var$defaultContext && false ? "react-aria" : `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix2}-${counter}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = React__default.useId();
+  let [didSSR] = useState($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix2 = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix2}-${id}`;
+}
+const $b5e257d569688ac6$export$619500959fc48b26 = typeof React__default["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof React__default["useSyncExternalStore"] === "function")
+    return React__default["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return useContext($b5e257d569688ac6$var$IsSSRContext);
+}
+const $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document !== "undefined" ? React__default.useLayoutEffect : () => {
+};
+let $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
+function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
+  let [value, setValue] = useState(defaultId);
+  let nextId = useRef(null);
+  let res = $b5e257d569688ac6$export$619500959fc48b26(value);
+  let updateValue = useCallback((val) => {
+    nextId.current = val;
+  }, []);
+  $bdb11010cef70236$var$idsUpdaterMap.set(res, updateValue);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    let r2 = res;
+    return () => {
+      $bdb11010cef70236$var$idsUpdaterMap.delete(r2);
+    };
+  }, [
+    res
+  ]);
+  useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+  return res;
+}
+let $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
+let $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window === "undefined")
+    return;
+  let onTransitionStart = (e) => {
+    let transitions2 = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!transitions2) {
+      transitions2 = /* @__PURE__ */ new Set();
+      $bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions2);
+      e.target.addEventListener("transitioncancel", onTransitionEnd);
+    }
+    transitions2.add(e.propertyName);
+  };
+  let onTransitionEnd = (e) => {
+    let properties2 = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!properties2)
+      return;
+    properties2.delete(e.propertyName);
+    if (properties2.size === 0) {
+      e.target.removeEventListener("transitioncancel", onTransitionEnd);
+      $bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
+    }
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
+        cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart);
+  document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $bbed8b41f857bcc0$var$setupGlobalEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
 const useStyles = makeStyles((theme) => ({
   box: {
     boxSizing: "border-box"
@@ -45897,7 +46065,7 @@ function CellColorEncodingOption(props) {
     setCellColorEncoding
   } = props;
   const classes = useStyles();
-  const cellColorEncodingId = useId();
+  const cellColorEncodingId = $bdb11010cef70236$export$f680877a34711e37();
   const observationsLabelNice = capitalize(observationsLabel);
   function handleColorEncodingChange(event) {
     setCellColorEncoding(event.target.value);

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/shared-plot-options/CellColorEncodingOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellColorEncodingOption.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/CellColorEncodingOption.js"],"names":[],"mappings":"AAMA,yEAyCC"}
+{"version":3,"file":"CellColorEncodingOption.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/CellColorEncodingOption.js"],"names":[],"mappings":"AAOA,yEAyCC"}

package/dist-tsc/shared-plot-options/CellColorEncodingOption.js

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useId } from 'react';
+import React from 'react';
+import { useId } from 'react-aria';
 import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -28,10 +28,11 @@
     "react-grid-layout-with-lodash": "^1.3.5",
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
-    "@vitessce/plugins": "3.2.0",
-    "@vitessce/schemas": "3.2.0",
-    "@vitessce/constants-internal": "3.2.0",
-    "@vitessce/utils": "3.2.0"
+    "react-aria": "^3.28.0",
+    "@vitessce/constants-internal": "3.2.2",
+    "@vitessce/plugins": "3.2.2",
+    "@vitessce/schemas": "3.2.2",
+    "@vitessce/utils": "3.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

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/shared-plot-options/CellColorEncodingOption.js

@@ -1,4 +1,5 @@
-import React, { useId } from 'react';
+import React from 'react';
+import { useId } from 'react-aria';
 import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';