@vitessce/statistical-plots 2.0.3 → 3.0.0

package/dist-tsc/CellSetSizesPlotSubscriber.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useState } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsSetsData, } from '@vitessce/vit-s';
+import { isEqual } from 'lodash-es';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { mergeObsSets, treeToSetSizesBySetNames, filterPathsByExpansionAndSelection, findChangedHierarchy, } from '@vitessce/sets-utils';
+import { capitalize } from '@vitessce/utils';
+import CellSetSizesPlot from './CellSetSizesPlot.js';
+import { useStyles } from './styles.js';
+/**
+ * A subscriber component for `CellSetSizePlot`,
+ * which listens for cell sets data updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {function} props.onReady The function to call when the subscriptions
+ * have been made.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {string} props.title The component title.
+ */
+export function CellSetSizesPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, title: titleOverride, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsSetExpansion: cellSetExpansion, }, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_SIZES], coordinationScopes);
+    const title = titleOverride || `${capitalize(obsType)} Set Sizes`;
+    const [width, height, containerRef] = useGridItemSize();
+    const [urls, addUrl] = useUrls(loaders, dataset);
+    // the name of the hierarchy that was clicked on last
+    const [currentHierarchy, setCurrentHierarchy] = useState([]);
+    // the previous cell set that was selected
+    const [prevCellSetSelection, setPrevCellSetSelection] = useState([]);
+    // Get data from loaders using the data hooks.
+    const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+    const isReady = useReady([
+        obsSetsStatus,
+    ]);
+    const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
+    const data = useMemo(() => {
+        if (cellSetSelection && cellSetColor && mergedCellSets && cellSets) {
+            let newHierarchy = currentHierarchy;
+            if (cellSetSelection) {
+                const changedHierarchy = findChangedHierarchy(prevCellSetSelection, cellSetSelection);
+                setPrevCellSetSelection(cellSetSelection);
+                if (changedHierarchy) {
+                    setCurrentHierarchy(changedHierarchy);
+                    newHierarchy = changedHierarchy;
+                }
+            }
+            const cellSetPaths = filterPathsByExpansionAndSelection(mergedCellSets, newHierarchy, cellSetExpansion, cellSetSelection);
+            if (mergedCellSets && cellSets && cellSetSelection && cellSetColor) {
+                return treeToSetSizesBySetNames(mergedCellSets, cellSetPaths, cellSetSelection, cellSetColor, theme);
+            }
+        }
+        return [];
+    }, [
+        mergedCellSets,
+        cellSetSelection,
+        cellSetExpansion,
+        cellSetColor,
+        theme,
+    ]);
+    const onBarSelect = (setNamePath, wasGrayedOut, selectOnlyEnabled = false) => {
+        if (selectOnlyEnabled) {
+            setCellSetSelection([setNamePath]);
+            return;
+        }
+        if (!wasGrayedOut) {
+            setCellSetSelection(cellSetSelection.filter(d => !isEqual(d, setNamePath)));
+        }
+        else if (wasGrayedOut) {
+            setCellSetSelection([...cellSetSelection, setNamePath]);
+        }
+    };
+    return (_jsx(TitleInfo, { title: title, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(CellSetSizesPlot, { data: data, onBarSelect: onBarSelect, theme: theme, width: width, height: height, obsType: obsType }) }) }));
+}

package/dist-tsc/ExpressionHistogram.d.ts

@@ -0,0 +1,34 @@
+/**
+ * We use debounce, so that onSelect is called only after the user has finished the selection.
+ * Due to vega-lite limitations, we cannot use the vega-lite signals to implement this.
+ * See this issue: https://github.com/vega/vega-lite/issues/5728
+ * See this for reference on what is supported: https://vega.github.io/vega-lite/docs/selection.html
+ */
+/**
+ * Gene expression histogram displayed as a bar chart,
+ * implemented with the VegaPlot component.
+ * @param {object} props
+ * @param {string[]} props.geneSelection The list of genes
+ * currently selected.
+ * @param {object[]} props.data The expression data, an array
+ * of objects with properties `value` and `gene`.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {number} props.width The container width.
+ * @param {number} props.height The container height.
+ * @param {number} props.marginRight The size of the margin
+ * on the right side of the plot, to account for the vega menu button.
+ * By default, 90.
+ * @param {number} props.marginBottom The size of the margin
+ * on the bottom of the plot, to account for long x-axis labels.
+ * By default, 50.
+ */
+export default function ExpressionHistogram(props: {
+    geneSelection: string[];
+    data: object[];
+    theme: string;
+    width: number;
+    height: number;
+    marginRight: number;
+    marginBottom: number;
+}): JSX.Element;
+//# sourceMappingURL=ExpressionHistogram.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionHistogram.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogram.js"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IAd2B,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;gBA8FhB"}

package/dist-tsc/ExpressionHistogram.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect, useCallback } from 'react';
+import { clamp, debounce } from 'lodash-es';
+import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
+/**
+ * We use debounce, so that onSelect is called only after the user has finished the selection.
+ * Due to vega-lite limitations, we cannot use the vega-lite signals to implement this.
+ * See this issue: https://github.com/vega/vega-lite/issues/5728
+ * See this for reference on what is supported: https://vega.github.io/vega-lite/docs/selection.html
+ */
+/**
+ * Gene expression histogram displayed as a bar chart,
+ * implemented with the VegaPlot component.
+ * @param {object} props
+ * @param {string[]} props.geneSelection The list of genes
+ * currently selected.
+ * @param {object[]} props.data The expression data, an array
+ * of objects with properties `value` and `gene`.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ * @param {number} props.width The container width.
+ * @param {number} props.height The container height.
+ * @param {number} props.marginRight The size of the margin
+ * on the right side of the plot, to account for the vega menu button.
+ * By default, 90.
+ * @param {number} props.marginBottom The size of the margin
+ * on the bottom of the plot, to account for long x-axis labels.
+ * By default, 50.
+ */
+export default function ExpressionHistogram(props) {
+    const { geneSelection, data, theme, width, height, marginRight = 90, marginBottom = 50, onSelect, } = props;
+    const [selectedRanges, setSelectedRanges] = useState([]);
+    const xTitle = geneSelection && geneSelection.length >= 1
+        ? 'Normalized Expression Value'
+        : 'Total Normalized Transcript Count';
+    const spec = {
+        data: { values: data },
+        mark: 'bar',
+        encoding: {
+            x: {
+                field: 'value',
+                type: 'quantitative',
+                bin: { maxbins: 50 },
+                title: xTitle,
+            },
+            y: {
+                type: 'quantitative',
+                aggregate: 'count',
+                title: 'Number of Cells',
+            },
+            color: { value: 'gray' },
+            opacity: {
+                condition: { selection: 'brush', value: 1 },
+                value: 0.7,
+            },
+        },
+        params: [
+            {
+                name: 'brush',
+                select: { type: 'interval', encodings: ['x'] },
+            },
+        ],
+        width: clamp(width - marginRight, 10, Infinity),
+        height: clamp(height - marginBottom, 10, Infinity),
+        config: VEGA_THEMES[theme],
+    };
+    const handleSignal = (name, value) => {
+        if (name === 'brush') {
+            setSelectedRanges(value.value);
+        }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnSelect = useCallback(debounce((ranges, latestOnSelect) => {
+        latestOnSelect(ranges);
+        // We set a debounce timer of 1000ms: the assumption here is that the user has
+        // finished the selection when there's been no mouse movement on the histogram for a second.
+        // We do not pass any dependencies for the useCallback
+        // since we only want to define the debounced function once (on the initial render).
+    }, 1000), []);
+    useEffect(() => {
+        if (!selectedRanges || selectedRanges.length === 0)
+            return () => { };
+        // Call the debounced function instead of directly calling onSelect
+        debouncedOnSelect(selectedRanges, onSelect);
+        // Clean up the debounce timer when the component unmounts or the dependency changes
+        return () => {
+            debouncedOnSelect.cancel();
+        };
+        // We only want to call the debounced function when the selectedRanges changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRanges]);
+    const signalListeners = { brush: handleSignal };
+    return (_jsx(VegaPlot, { data: data, signalListeners: signalListeners, spec: spec }));
+}

package/dist-tsc/ExpressionHistogramSubscriber.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A subscriber component for `ExpressionHistogram`,
+ * which listens for gene selection updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {object} props.coordinationScopes An object mapping coordination
+ * types to coordination scopes.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ */
+export function ExpressionHistogramSubscriber(props: {
+    removeGridComponent: Function;
+    coordinationScopes: object;
+    theme: string;
+}): JSX.Element;
+//# sourceMappingURL=ExpressionHistogramSubscriber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionHistogramSubscriber.d.ts","sourceRoot":"","sources":["../src/ExpressionHistogramSubscriber.js"],"names":[],"mappings":"AAcA;;;;;;;;;GASG;AACH;IAL2B,mBAAmB;IACrB,kBAAkB,EAAhC,MAAM;IAEQ,KAAK,EAAnB,MAAM;gBAiHhB"}

package/dist-tsc/ExpressionHistogramSubscriber.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useCallback, } from 'react';
+import { sum } from 'd3-array';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useObsFeatureMatrixData, useFeatureSelection, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { setObsSelection, getObsInfoFromDataWithinRange } from '@vitessce/sets-utils';
+import ExpressionHistogram from './ExpressionHistogram.js';
+import { useStyles } from './styles.js';
+/**
+ * A subscriber component for `ExpressionHistogram`,
+ * which listens for gene selection updates and
+ * `GRID_RESIZE` events.
+ * @param {object} props
+ * @param {function} props.removeGridComponent The grid component removal function.
+ * @param {object} props.coordinationScopes An object mapping coordination
+ * types to coordination scopes.
+ * @param {string} props.theme The name of the current Vitessce theme.
+ */
+export function ExpressionHistogramSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // 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 [width, height, containerRef] = useGridItemSize();
+    const [urls, addUrl] = useUrls(loaders, dataset);
+    // Get data from loaders using the data hooks.
+    const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(loaders, dataset, addUrl, true, {}, {}, { obsType, featureType, featureValueType });
+    // eslint-disable-next-line no-unused-vars
+    const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
+    const isReady = useReady([
+        matrixStatus,
+        featureSelectionStatus,
+    ]);
+    const firstGeneSelected = geneSelection && geneSelection.length >= 1
+        ? geneSelection[0]
+        : null;
+    // 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) {
+            return obsIndex.map((cellId, cellIndex) => {
+                const value = expressionData[0][cellIndex];
+                // Create new cellColors map based on the selected gene.
+                const normValue = value * 100 / 255;
+                const newItem = { value: normValue, gene: firstGeneSelected, cellId };
+                return newItem;
+            });
+        }
+        if (obsFeatureMatrix) {
+            const numGenes = featureIndex.length;
+            return obsIndex.map((cellId, cellIndex) => {
+                const values = obsFeatureMatrix.data
+                    .subarray(cellIndex * numGenes, (cellIndex + 1) * numGenes);
+                const sumValue = sum(values) * 100 / 255;
+                const newItem = { value: sumValue, gene: null, cellId };
+                return newItem;
+            });
+        }
+        return null;
+    }, [obsIndex, featureIndex, obsFeatureMatrix, firstGeneSelected, expressionData]);
+    const onSelect = useCallback((value) => {
+        const geneName = firstGeneSelected ? [firstGeneSelected, 'values'].join(' ') : '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,
+    ]);
+    return (_jsx(TitleInfo, { title: `Expression Histogram${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: _jsx(ExpressionHistogram, { geneSelection: geneSelection, onSelect: onSelect, data: data, theme: theme, width: width, height: height }) }) }));
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,7 @@
+export { CellSetExpressionPlotSubscriber } from "./CellSetExpressionPlotSubscriber.js";
+export { CellSetSizesPlotSubscriber } from "./CellSetSizesPlotSubscriber.js";
+export { ExpressionHistogramSubscriber } from "./ExpressionHistogramSubscriber.js";
+export { default as CellSetSizesPlot } from "./CellSetSizesPlot.js";
+export { default as CellSetExpressionPlot } from "./CellSetExpressionPlot.js";
+export { default as ExpressionHistogram } from "./ExpressionHistogram.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -1,6 +1,6 @@
-export { CellSetExpressionPlotSubscriber, register as registerCellSetExpression } from './CellSetExpressionPlotSubscriber';
-export { CellSetSizesPlotSubscriber, register as registerCellSetSizes } from './CellSetSizesPlotSubscriber';
-export { ExpressionHistogramSubscriber, register as registerExpressionHistogram } from './ExpressionHistogramSubscriber';
-export { default as CellSetSizesPlot } from './CellSetSizesPlot';
-export { default as CellSetExpressionPlot } from './CellSetExpressionPlot';
-export { default as ExpressionHistogram } from './ExpressionHistogram';
+export { CellSetExpressionPlotSubscriber } from './CellSetExpressionPlotSubscriber.js';
+export { CellSetSizesPlotSubscriber } from './CellSetSizesPlotSubscriber.js';
+export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.js';
+export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
+export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
+export { default as ExpressionHistogram } from './ExpressionHistogram.js';

package/dist-tsc/styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vegaContainer">;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA,qHAMI"}

package/dist-tsc/styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@material-ui/core';
+export const useStyles = makeStyles(() => ({
+    vegaContainer: {
+        display: 'flex',
+        flex: '1 1 auto',
+        overflow: 'hidden',
+    },
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,24 +8,26 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
-    "lodash": "^4.17.21",
-    "@vitessce/constants-internal": "2.0.3",
-    "@vitessce/sets-utils": "2.0.3",
-    "@vitessce/utils": "2.0.3",
-    "@vitessce/vega": "2.0.3",
-    "@vitessce/vit-s": "2.0.3"
+    "lodash-es": "^4.17.21",
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/sets-utils": "3.0.0",
+    "@vitessce/utils": "3.0.0",
+    "@vitessce/vega": "3.0.0",
+    "@vitessce/vit-s": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
+    "vite": "^4.3.0",
     "vitest": "^0.23.4"
   },
   "peerDependencies": {
@@ -34,5 +36,12 @@
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/CellSetExpressionPlot.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import clamp from 'lodash/clamp';
+import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES, DATASET_NAME } from '@vitessce/vega';
 import { colorArrayToString } from '@vitessce/sets-utils';
 import { capitalize } from '@vitessce/utils';
@@ -155,8 +155,8 @@ export default function CellSetExpressionPlot(props) {
         scale: 'yscale',
         zindex: 1,
         title: (featureValueTransformName && featureValueTransformName !== 'None')
-          ? [`${featureValueTransformName}-Transformed`, `Normalized ${capitalize(featureValueType)} Values`]
-          : `Normalized ${capitalize(featureValueType)} Values`,
+          ? [`${featureValueTransformName}-Transformed`, `${capitalize(featureValueType)} Values`]
+          : `${capitalize(featureValueType)} Values`,
       },
       {
         orient: 'bottom',

package/src/CellSetExpressionPlotOptions.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import TextField from '@material-ui/core/TextField';
+import { TableCell, TableRow, TextField } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
 
 export default function CellSetExpressionPlotOptions(props) {

package/src/CellSetExpressionPlotSubscriber.js

@@ -6,14 +6,13 @@ import {
   useFeatureSelection, useObsSetsData,
   useObsFeatureMatrixIndices,
   useFeatureLabelsData,
-  registerPluginViewType,
 } from '@vitessce/vit-s';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
 import { VALUE_TRANSFORM_OPTIONS, capitalize, getValueTransformFunction } from '@vitessce/utils';
 import { treeToObjectsBySetNames, treeToSetSizesBySetNames, mergeObsSets } from '@vitessce/sets-utils';
-import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions';
-import CellSetExpressionPlot from './CellSetExpressionPlot';
-import { useStyles } from './styles';
+import CellSetExpressionPlotOptions from './CellSetExpressionPlotOptions.js';
+import CellSetExpressionPlot from './CellSetExpressionPlot.js';
+import { useStyles } from './styles.js';
 
 /**
  * Get expression data for the cells
@@ -36,7 +35,7 @@ import { useStyles } from './styles';
  * @param {string} theme "light" or "dark" for the vitessce theme
  * `path` and `color`.
  */
-export function useExpressionByCellSet(
+function useExpressionByCellSet(
   expressionData, obsIndex, cellSets, additionalCellSets,
   geneSelection, cellSetSelection, cellSetColor,
   featureValueTransform, featureValueTransformCoefficient,
@@ -68,11 +67,10 @@ export function useExpressionByCellSet(
       const exprValues = cellObjects.map((cell) => {
         const cellIndex = cellIndices[cell.obsId];
         const value = expressionData[0][cellIndex];
-        const normValue = value * 100 / 255;
         const transformFunction = getValueTransformFunction(
           featureValueTransform, featureValueTransformCoefficient,
         );
-        const transformedValue = transformFunction(normValue);
+        const transformedValue = transformFunction(value);
         exprMax = Math.max(transformedValue, exprMax);
         return { value: transformedValue, gene: firstGeneSelected, set: cell.name };
       });
@@ -87,7 +85,9 @@ export function useExpressionByCellSet(
   // From the cell sets hierarchy and the list of selected cell sets,
   // generate the array of set sizes data points for the bar plot.
   const setArr = useMemo(() => (mergedCellSets && cellSetSelection && cellSetColor
-    ? treeToSetSizesBySetNames(mergedCellSets, cellSetSelection, cellSetColor, theme)
+    ? treeToSetSizesBySetNames(
+      mergedCellSets, cellSetSelection, cellSetSelection, cellSetColor, theme,
+    )
     : []
   ), [mergedCellSets, cellSetSelection, cellSetColor, theme]);
 
@@ -218,11 +218,3 @@ export function CellSetExpressionPlotSubscriber(props) {
     </TitleInfo>
   );
 }
-
-export function register() {
-  registerPluginViewType(
-    ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION,
-    CellSetExpressionPlotSubscriber,
-    COMPONENT_COORDINATION_TYPES[ViewType.OBS_SET_FEATURE_VALUE_DISTRIBUTION],
-  );
-}

package/src/CellSetSizesPlot.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import clamp from 'lodash/clamp';
+import React, { useCallback } from 'react';
+import { clamp } from 'lodash-es';
 import { VegaPlot, VEGA_THEMES } from '@vitessce/vega';
 import { colorArrayToString } from '@vitessce/sets-utils';
-import { capitalize } from '@vitessce/utils';
+import { capitalize, getDefaultColor } from '@vitessce/utils';
 
 /**
  * Cell set sizes displayed as a bar chart,
@@ -33,6 +33,7 @@ export default function CellSetSizesPlot(props) {
     marginBottom = 120,
     keyLength = 36,
     obsType,
+    onBarSelect,
   } = props;
 
   // Add a property `keyName` which concatenates the key and the name,
@@ -46,18 +47,53 @@ export default function CellSetSizesPlot(props) {
     colorString: colorArrayToString(d.color),
   }));
 
-  // Manually set the color scale so that Vega-Lite does
-  // not choose the colors automatically.
-  const colors = {
-    domain: data.map(d => d.key),
-    range: data.map(d => d.colorString),
-  };
-
   // Get an array of keys for sorting purposes.
   const keys = data.map(d => d.keyName);
 
+  const colorScale = {
+    // Manually set the color scale so that Vega-Lite does
+    // not choose the colors automatically.
+    domain: data.map(d => d.key),
+    range: data.map((d) => {
+      const [r, g, b] = !d.isGrayedOut ? d.color : getDefaultColor(theme);
+      return `rgba(${r}, ${g}, ${b}, 1)`;
+    }),
+  };
+  const captializedObsType = capitalize(obsType);
+
   const spec = {
-    mark: { type: 'bar' },
+    mark: { type: 'bar', stroke: 'black', cursor: 'pointer' },
+    params: [
+      {
+        name: 'highlight',
+        select: {
+          type: 'point',
+          on: 'mouseover',
+        },
+      },
+      {
+        name: 'select',
+        select: 'point',
+      },
+      {
+        name: 'bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey === false]',
+          fields: ['setNamePath', 'isGrayedOut'],
+          empty: 'none',
+        },
+      },
+      {
+        name: 'shift_bar_select',
+        select: {
+          type: 'point',
+          on: 'click[event.shiftKey]',
+          fields: ['setNamePath', 'isGrayedOut'],
+          empty: 'none',
+        },
+      },
+    ],
     encoding: {
       x: {
         field: 'keyName',
@@ -69,28 +105,69 @@ export default function CellSetSizesPlot(props) {
       y: {
         field: 'size',
         type: 'quantitative',
-        title: `${capitalize(obsType)} Set Size`,
+        title: `${captializedObsType} Set Size`,
       },
       color: {
         field: 'key',
         type: 'nominal',
-        scale: colors,
+        scale: colorScale,
         legend: null,
       },
       tooltip: {
         field: 'size',
         type: 'quantitative',
       },
+      fillOpacity: {
+        condition: {
+          param: 'select',
+          value: 1,
+        },
+        value: 0.3,
+      },
+      strokeWidth: {
+        condition: [
+          {
+            param: 'select',
+            empty: false,
+            value: 1,
+          },
+          {
+            param: 'highlight',
+            empty: false,
+            value: 2,
+          },
+        ],
+        value: 0,
+      },
     },
     width: clamp(width - marginRight, 10, Infinity),
     height: clamp(height - marginBottom, 10, Infinity),
     config: VEGA_THEMES[theme],
   };
 
+  const handleSignal = (name, value) => {
+    if (name === 'bar_select') {
+      onBarSelect(value.setNamePath, value.isGrayedOut[0]);
+    } else if (name === 'shift_bar_select') {
+      const isGrayedOut = false;
+      const selectOnlyEnabled = true;
+      onBarSelect(value.setNamePath, isGrayedOut, selectOnlyEnabled);
+    }
+  };
+
+  const signalListeners = { bar_select: handleSignal, shift_bar_select: handleSignal };
+  const getTooltipText = useCallback(item => ({
+    [`${captializedObsType} Set`]: item.datum.name,
+    [`${captializedObsType} Set Size`]: item.datum.size,
+  }
+  ), [captializedObsType]);
+
   return (
     <VegaPlot
       data={data}
       spec={spec}
+      signalListeners={signalListeners}
+      getTooltipText={getTooltipText}
     />
   );
 }