@vitessce/statistical-plots 3.8.9 → 3.8.13

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-Bww8vUPc.js";
+import { b, f, C, e, a, i, D, h, E, F, c, d, T, V } from "./index-BmYvVUY8.js";
 export {
   b as CellSetCompositionBarPlotSubscriber,
   f as CellSetExpressionPlot,

package/dist/{jpeg-DaQlT1PL.js → jpeg-CnRvmB8H.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { B as BaseDecoder } from "./index-BmYvVUY8.js";
 const dctZigZag = new Int32Array([
   0,
   1,

package/dist/{lerc-CEyFtJYR.js → lerc-DdM66WTL.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-BmYvVUY8.js";
 const LercParameters = {
   AddCompression: 1
 };

package/dist/{lzw-CtdR_QD0.js → lzw-ahoob13H.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { B as BaseDecoder } from "./index-BmYvVUY8.js";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;
 const EOI_CODE = 257;

package/dist/{packbits-IHApx9PX.js → packbits-Ckd3nQz8.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { B as BaseDecoder } from "./index-BmYvVUY8.js";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     const dataView = new DataView(buffer);

package/dist/{raw-BE-hWhIt.js → raw-B56udEa5.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { B as BaseDecoder } from "./index-BmYvVUY8.js";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return buffer;

package/dist/{webimage-Co4sRMMx.js → webimage-CKIhq6Gi.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-Bww8vUPc.js";
+import { B as BaseDecoder } from "./index-BmYvVUY8.js";
 class WebImageDecoder extends BaseDecoder {
   constructor() {
     super();

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionHistogram.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogram.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,mDAdG;IAAwB,aAAa,EAA7B,MAAM,EAAE;IAEQ,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;CAGhB,eAkGA"}
+{"version":3,"file":"ExpressionHistogram.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogram.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,mDAdG;IAAwB,aAAa,EAA7B,MAAM,EAAE;IAEQ,IAAI,EAApB,MAAM,EAAE;IAEM,KAAK,EAAnB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,WAAW,EAAzB,MAAM;IAGQ,YAAY,EAA1B,MAAM;CAGhB,eA2GA"}

package/dist-tsc/ExpressionHistogram.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { clamp, debounce } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize, pluralize } from '@vitessce/utils';
@@ -32,9 +32,18 @@ export default function ExpressionHistogram(props) {
     const [selectedRanges, setSelectedRanges] = useState([]);
     const isExpression = (featureType === 'gene' && featureValueType === 'expression');
     // eslint-disable-next-line no-nested-ternary
-    const xTitle = geneSelection && geneSelection.length >= 1
-        ? (isExpression ? `Expression Value (${geneSelection[0]})` : `${geneSelection[0]}`)
-        : (isExpression ? 'Total Transcript Count' : 'Sum of Feature Values');
+    const xTitle = useMemo(() => {
+        if (!geneSelection || geneSelection.length === 0) {
+            return isExpression ? 'Total Transcript Count' : 'Sum of Feature Values';
+        }
+        if (geneSelection.length > 1) {
+            // For multiple genes, use a generic label since aggregation strategy
+            // is shown in the component title
+            return isExpression ? 'Expression Value (aggregated)' : 'Aggregated Feature Value';
+        }
+        // Single gene selected
+        return isExpression ? `Expression Value (${geneSelection[0]})` : `${geneSelection[0]}`;
+    }, [geneSelection, isExpression]);
     const spec = {
         data: { values: data },
         mark: 'bar',

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

@@ -1 +1 @@
-{"version":3,"file":"ExpressionHistogramSubscriber.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogramSubscriber.js"],"names":[],"mappings":"AAeA;;;;;;;;;GASG;AACH,qDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eAuIA"}
+{"version":3,"file":"ExpressionHistogramSubscriber.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogramSubscriber.js"],"names":[],"mappings":"AAgBA;;;;;;;;;GASG;AACH,qDALG;IAAwB,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;CAChB,eA4JA"}

package/dist-tsc/ExpressionHistogramSubscriber.js

@@ -4,6 +4,7 @@ import { sum } from 'd3-array';
 import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixData, useFeatureSelection, useCoordinationScopes, } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 import { setObsSelection, getObsInfoFromDataWithinRange } from '@vitessce/sets-utils';
+import { aggregateFeatureArrays } from '@vitessce/utils';
 import ExpressionHistogram from './ExpressionHistogram.js';
 import { useStyles } from './styles.js';
 /**
@@ -22,7 +23,7 @@ export function ExpressionHistogramSubscriber(props) {
     const loaders = useLoaders();
     const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
     // Get "props" from the coordination space.
-    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM], coordinationScopes);
+    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureAggregationStrategy, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_VALUE_HISTOGRAM], coordinationScopes);
     const [width, height, containerRef] = useGridItemSize();
     // Get data from loaders using the data hooks.
     const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls, matrixError,] = useObsFeatureMatrixData(loaders, dataset, true, {}, {}, { obsType, featureType, featureValueType });
@@ -41,17 +42,30 @@ export function ExpressionHistogramSubscriber(props) {
     const urls = useUrls([
         matrixUrls,
     ]);
-    const firstGeneSelected = geneSelection && geneSelection.length >= 1
-        ? geneSelection[0]
-        : null;
+    const numGenesSelected = geneSelection ? geneSelection.length : 0;
+    const aggregationStrategy = featureAggregationStrategy ?? 'first';
+    const titleSuffix = (
+    // eslint-disable-next-line no-nested-ternary
+    numGenesSelected > 1 ? ` (${numGenesSelected} genes, ${aggregationStrategy})`
+        : (numGenesSelected === 1 ? ` (${geneSelection[0]})` : ''));
     // From the expression matrix and the list of selected genes,
     // generate the array of data points for the histogram.
     const data = useMemo(() => {
-        if (firstGeneSelected && obsFeatureMatrix && expressionData) {
+        if (numGenesSelected > 0 && obsFeatureMatrix && expressionData) {
+            let expressionDataToUse = expressionData;
+            if (numGenesSelected > 1) {
+                const aggregatedData = aggregateFeatureArrays(expressionData, aggregationStrategy);
+                if (aggregatedData) {
+                    expressionDataToUse = [aggregatedData];
+                }
+                else {
+                    console.error('Error aggregating feature arrays');
+                }
+            }
             return obsIndex.map((cellId, cellIndex) => {
-                const value = expressionData[0][cellIndex];
+                const value = expressionDataToUse[0][cellIndex];
                 // Create new cellColors map based on the selected gene.
-                const newItem = { value, gene: firstGeneSelected, cellId };
+                const newItem = { value, cellId };
                 return newItem;
             });
         }
@@ -61,18 +75,24 @@ export function ExpressionHistogramSubscriber(props) {
                 const values = obsFeatureMatrix.data
                     .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
                 const sumValue = sum(values);
-                const newItem = { value: sumValue, gene: null, cellId };
+                const newItem = { value: sumValue, cellId };
                 return newItem;
             });
         }
         return null;
-    }, [obsIndex, featureIndex, obsFeatureMatrix, firstGeneSelected, expressionData]);
+    }, [obsIndex, featureIndex, obsFeatureMatrix, expressionData,
+        numGenesSelected, aggregationStrategy,
+    ]);
     const onSelect = useCallback((value) => {
-        const geneName = firstGeneSelected ? [firstGeneSelected, 'values'].join(' ') : 'transcript count';
+        const geneName = (
+        // eslint-disable-next-line no-nested-ternary
+        numGenesSelected > 1 ? `${numGenesSelected} genes (${aggregationStrategy})`
+            : (numGenesSelected === 1 ? ` ${geneSelection[0]}` : 'transcript count'));
         const selectedCellIds = getObsInfoFromDataWithinRange(value, data);
         setObsSelection(selectedCellIds, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding, 'Selection ', `: based on ${geneName} in range [${value[0].toFixed(1)}, ${value[1].toFixed(1)}] `);
     }, [additionalCellSets, cellSetColor, data, setAdditionalCellSets,
-        setCellColorEncoding, setCellSetColor, setCellSetSelection, firstGeneSelected,
+        setCellColorEncoding, setCellSetColor, setCellSetSelection,
+        numGenesSelected, aggregationStrategy, geneSelection,
     ]);
-    return (_jsx(TitleInfo, { title: `Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, errors: errors, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(ExpressionHistogram, { geneSelection: geneSelection, obsType: obsType, featureType: featureType, featureValueType: featureValueType, onSelect: onSelect, data: data, theme: theme, width: width, height: height }) }) }));
+    return (_jsx(TitleInfo, { title: `Histogram ${titleSuffix}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, errors: errors, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(ExpressionHistogram, { geneSelection: geneSelection, obsType: obsType, featureType: featureType, featureValueType: featureValueType, onSelect: onSelect, data: data, theme: theme, width: width, height: height }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.8.9",
+  "version": "3.8.13",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -28,13 +28,13 @@
     "react-aria": "^3.28.0",
     "internmap": "^2.0.3",
     "uuid": "^9.0.0",
-    "@vitessce/styles": "3.8.9",
-    "@vitessce/constants-internal": "3.8.9",
-    "@vitessce/sets-utils": "3.8.9",
-    "@vitessce/utils": "3.8.9",
-    "@vitessce/vega": "3.8.9",
-    "@vitessce/vit-s": "3.8.9",
-    "@vitessce/gl": "3.8.9"
+    "@vitessce/styles": "3.8.13",
+    "@vitessce/constants-internal": "3.8.13",
+    "@vitessce/utils": "3.8.13",
+    "@vitessce/sets-utils": "3.8.13",
+    "@vitessce/vega": "3.8.13",
+    "@vitessce/vit-s": "3.8.13",
+    "@vitessce/gl": "3.8.13"
   },
   "devDependencies": {
     "react": "18.3.1",

package/src/ExpressionHistogram.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { clamp, debounce } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { capitalize, pluralize } from '@vitessce/utils';
@@ -49,9 +49,18 @@ export default function ExpressionHistogram(props) {
     featureType === 'gene' && featureValueType === 'expression'
   );
   // eslint-disable-next-line no-nested-ternary
-  const xTitle = geneSelection && geneSelection.length >= 1
-    ? (isExpression ? `Expression Value (${geneSelection[0]})` : `${geneSelection[0]}`)
-    : (isExpression ? 'Total Transcript Count' : 'Sum of Feature Values');
+  const xTitle = useMemo(() => {
+    if (!geneSelection || geneSelection.length === 0) {
+      return isExpression ? 'Total Transcript Count' : 'Sum of Feature Values';
+    }
+    if (geneSelection.length > 1) {
+      // For multiple genes, use a generic label since aggregation strategy
+      // is shown in the component title
+      return isExpression ? 'Expression Value (aggregated)' : 'Aggregated Feature Value';
+    }
+    // Single gene selected
+    return isExpression ? `Expression Value (${geneSelection[0]})` : `${geneSelection[0]}`;
+  }, [geneSelection, isExpression]);
 
   const spec = {
     data: { values: data },

package/src/ExpressionHistogramSubscriber.js

@@ -11,6 +11,7 @@ import {
 } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
 import { setObsSelection, getObsInfoFromDataWithinRange } from '@vitessce/sets-utils';
+import { aggregateFeatureArrays } from '@vitessce/utils';
 import ExpressionHistogram from './ExpressionHistogram.js';
 import { useStyles } from './styles.js';
 /**
@@ -44,6 +45,7 @@ export function ExpressionHistogramSubscriber(props) {
     featureType,
     featureValueType,
     featureSelection: geneSelection,
+    featureAggregationStrategy,
     additionalObsSets: additionalCellSets,
     obsSetColor: cellSetColor,
   }, {
@@ -87,18 +89,31 @@ export function ExpressionHistogramSubscriber(props) {
     matrixUrls,
   ]);
 
-  const firstGeneSelected = geneSelection && geneSelection.length >= 1
-    ? geneSelection[0]
-    : null;
+  const numGenesSelected = geneSelection ? geneSelection.length : 0;
+  const aggregationStrategy = featureAggregationStrategy ?? 'first';
+  const titleSuffix = (
+    // eslint-disable-next-line no-nested-ternary
+    numGenesSelected > 1 ? ` (${numGenesSelected} genes, ${aggregationStrategy})`
+      : (numGenesSelected === 1 ? ` (${geneSelection[0]})` : '')
+  );
 
   // From the expression matrix and the list of selected genes,
   // generate the array of data points for the histogram.
   const data = useMemo(() => {
-    if (firstGeneSelected && obsFeatureMatrix && expressionData) {
+    if (numGenesSelected > 0 && obsFeatureMatrix && expressionData) {
+      let expressionDataToUse = expressionData;
+      if (numGenesSelected > 1) {
+        const aggregatedData = aggregateFeatureArrays(expressionData, aggregationStrategy);
+        if (aggregatedData) {
+          expressionDataToUse = [aggregatedData];
+        } else {
+          console.error('Error aggregating feature arrays');
+        }
+      }
       return obsIndex.map((cellId, cellIndex) => {
-        const value = expressionData[0][cellIndex];
+        const value = expressionDataToUse[0][cellIndex];
         // Create new cellColors map based on the selected gene.
-        const newItem = { value, gene: firstGeneSelected, cellId };
+        const newItem = { value, cellId };
         return newItem;
       });
     }
@@ -108,15 +123,21 @@ export function ExpressionHistogramSubscriber(props) {
         const values = obsFeatureMatrix.data
           .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
         const sumValue = sum(values);
-        const newItem = { value: sumValue, gene: null, cellId };
+        const newItem = { value: sumValue, cellId };
         return newItem;
       });
     }
     return null;
-  }, [obsIndex, featureIndex, obsFeatureMatrix, firstGeneSelected, expressionData]);
+  }, [obsIndex, featureIndex, obsFeatureMatrix, expressionData,
+    numGenesSelected, aggregationStrategy,
+  ]);
 
   const onSelect = useCallback((value) => {
-    const geneName = firstGeneSelected ? [firstGeneSelected, 'values'].join(' ') : 'transcript count';
+    const geneName = (
+      // eslint-disable-next-line no-nested-ternary
+      numGenesSelected > 1 ? `${numGenesSelected} genes (${aggregationStrategy})`
+        : (numGenesSelected === 1 ? ` ${geneSelection[0]}` : 'transcript count')
+    );
 
     const selectedCellIds = getObsInfoFromDataWithinRange(value, data);
     setObsSelection(
@@ -127,12 +148,13 @@ export function ExpressionHistogramSubscriber(props) {
       `: based on ${geneName} in range [${value[0].toFixed(1)}, ${value[1].toFixed(1)}] `,
     );
   }, [additionalCellSets, cellSetColor, data, setAdditionalCellSets,
-    setCellColorEncoding, setCellSetColor, setCellSetSelection, firstGeneSelected,
+    setCellColorEncoding, setCellSetColor, setCellSetSelection,
+    numGenesSelected, aggregationStrategy, geneSelection,
   ]);
 
   return (
     <TitleInfo
-      title={`Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
+      title={`Histogram ${titleSuffix}`}
       closeButtonVisible={closeButtonVisible}
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}