@vitessce/vit-s 3.2.1 → 3.2.2

package/dist/index.js

@@ -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.1";
-const date = "2023-09-13";
+const version = "3.2.2";
+const date = "2023-09-20";
 const branch = "changeset-release/main";
-const hash = "a118dd03";
+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,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "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.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);
+    });
+  });
+});