@vitessce/statistical-plots 3.3.11 → 3.4.0

package/dist-tsc/FeatureBarPlot.d.ts

@@ -0,0 +1,2 @@
+export default function FeatureBarPlot(props: any): JSX.Element;
+//# sourceMappingURL=FeatureBarPlot.d.ts.map

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

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

package/dist-tsc/FeatureBarPlot.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+import { scaleLinear } from 'd3-scale';
+import { scale as vega_scale } from 'vega-scale';
+import { axisBottom, axisLeft } from 'd3-axis';
+import { ascending } from 'd3-array';
+import { select } from 'd3-selection';
+import { capitalize } from '@vitessce/utils';
+const scaleBand = vega_scale('band');
+const OBS_KEY = 'obsId';
+const FEATURE_KEY = 'value';
+function componentToHex(c) {
+    const hex = c.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+}
+function rgbToHex(color) {
+    return `#${componentToHex(color[0])}${componentToHex(color[1])}${componentToHex(color[2])}`;
+}
+export default function FeatureBarPlot(props) {
+    const { yMin, yMax, yUnits, jitter, colors, data, theme, width, height, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom, obsType, cellHighlight, cellSetSelection, additionalCellSets, cellSetColor, featureType, featureValueType, featureName, onBarSelect, onBarHighlight, } = props;
+    // TODO: use a more descriptive name than setsSave.
+    const setsSave = useMemo(() => {
+        const result = new Map();
+        cellSetSelection.forEach((obsSetPath) => {
+            // TODO: this does not use the full set path for comparison.
+            const selectedElement = obsSetPath[1];
+            // TODO: this is only considering the first set grouping in the tree.
+            // TODO: use sets-utils to traverse sets tree.
+            additionalCellSets.tree[0].children.forEach((child) => {
+                if (child.name === selectedElement) {
+                    child.set.forEach(([obsId]) => {
+                        const info = { name: '', id: '', color: [] };
+                        info.name = selectedElement;
+                        info.id = obsId;
+                        cellSetColor.forEach((color) => {
+                            if (color.path[1] === selectedElement) {
+                                info.color = color.color;
+                            }
+                        });
+                        result.set(info.id, info);
+                    });
+                }
+            });
+        });
+    }, [cellSetSelection, additionalCellSets, cellSetColor]);
+    const svgRef = useRef();
+    // Get the max characters in an axis label for autsizing the bottom margin.
+    const maxCharactersForLabel = useMemo(() => data.reduce((acc, val) => {
+        // eslint-disable-next-line no-param-reassign
+        acc = acc === undefined || val[OBS_KEY].length > acc ? val[OBS_KEY].length : acc;
+        return acc;
+    }, 0), [data]);
+    useEffect(() => {
+        const domElement = svgRef.current;
+        const unitSuffix = yUnits ? ` (${yUnits})` : '';
+        const yTitle = `${capitalize(featureName)}${unitSuffix}`;
+        const xTitle = `${capitalize(obsType)}`;
+        // Use a square-root term because the angle of the labels is 45 degrees (see below)
+        // so the perpendicular distance to the bottom of the labels is proportional to the
+        // square root of the length of the labels along the imaginary hypotenuse.
+        // 30 is an estimate of the pixel size of a given character and seems to work well.
+        const autoMarginBottom = marginBottom
+            || 30 + Math.sqrt(maxCharactersForLabel / 2) * 30;
+        const foregroundColor = (theme === 'dark' ? 'lightgray' : 'black');
+        data.sort((a, b) => ascending(a[FEATURE_KEY], b[FEATURE_KEY]));
+        const svg = select(domElement);
+        svg.selectAll('g').remove();
+        svg
+            .attr('width', width)
+            .attr('height', height);
+        const g = svg
+            .append('g')
+            .attr('width', width)
+            .attr('height', height);
+        const innerWidth = width - marginLeft;
+        const innerHeight = height - autoMarginBottom;
+        const xScale = scaleBand()
+            .range([marginLeft, width - marginRight])
+            .domain(data.map(d => d[OBS_KEY]))
+            .padding(0.1);
+        // For the y domain, use the yMin prop
+        // to support a use case such as 'Aspect Ratio',
+        // where the domain minimum should be 1 rather than 0.
+        const yScale = scaleLinear()
+            .domain([yMin, yMax])
+            .range([innerHeight, marginTop]);
+        // Bar areas
+        g
+            .selectAll('bar')
+            .data(data)
+            .enter()
+            .append('rect')
+            .attr('x', d => xScale(d[OBS_KEY]))
+            .attr('y', d => yScale(d[FEATURE_KEY]))
+            .attr('width', xScale.bandwidth())
+            .attr('height', d => innerHeight - yScale(d[FEATURE_KEY]))
+            .style('fill', (d) => {
+            if (d[OBS_KEY] === cellHighlight)
+                return 'orange';
+            if (setsSave.has(d[OBS_KEY])) {
+                const { color } = setsSave.get(d[OBS_KEY]);
+                return rgbToHex(color);
+            }
+            return foregroundColor;
+        })
+            .style('cursor', 'pointer')
+            // eslint-disable-next-line no-unused-vars
+            .on('click', (event, d) => {
+            onBarSelect(d[OBS_KEY]);
+        })
+            // eslint-disable-next-line no-unused-vars
+            .on('mouseover', (event, d) => {
+            onBarHighlight(d[OBS_KEY]);
+        })
+            .on('mouseout', () => {
+            onBarHighlight(null);
+        });
+        const axis = axisLeft(yScale);
+        axis.tickFormat(d => `${Math.round(d * 10000000)} µm`);
+        // Y-axis ticks
+        g
+            .append('g')
+            .attr('transform', `translate(${marginLeft},0)`)
+            .call(axis)
+            .selectAll('text')
+            .style('font-size', '11px');
+        // X-axis ticks
+        g
+            .append('g')
+            .attr('transform', `translate(0,${innerHeight})`)
+            .style('font-size', '14px')
+            .call(axisBottom(xScale))
+            .selectAll('text')
+            .style('font-size', '11px')
+            .attr('dx', '-6px')
+            .attr('dy', '6px')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end');
+        // Y-axis title
+        g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', -innerHeight / 2)
+            .attr('y', 15)
+            .attr('transform', 'rotate(-90)')
+            .text(yTitle)
+            .style('font-size', '12px')
+            .style('fill', foregroundColor);
+        // X-axis title
+        g
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('x', marginLeft + innerWidth / 2)
+            .attr('y', height - 10)
+            .text(xTitle)
+            .style('font-size', '12px')
+            .style('fill', foregroundColor);
+    }, [width, height, data, marginLeft, marginBottom, colors,
+        jitter, theme, yMin, marginTop, marginRight, featureType,
+        featureValueType, yUnits, obsType,
+        maxCharactersForLabel, yMax, featureName, onBarSelect, onBarHighlight,
+        cellHighlight, setsSave,
+    ]);
+    return (_jsx("svg", { ref: svgRef, style: {
+            top: 0,
+            left: 0,
+            width: `${width}px`,
+            height: `${height}px`,
+            position: 'relative',
+        } }));
+}

package/dist-tsc/FeatureBarPlotSubscriber.d.ts

@@ -0,0 +1,2 @@
+export function FeatureBarPlotSubscriber(props: any): JSX.Element;
+//# sourceMappingURL=FeatureBarPlotSubscriber.d.ts.map

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

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

package/dist-tsc/FeatureBarPlotSubscriber.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useCallback } from 'react';
+import { TitleInfo, useCoordination, useLoaders, useUrls, useReady, useGridItemSize, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { setObsSelection } from '@vitessce/sets-utils';
+import FeatureBarPlot from './FeatureBarPlot.js';
+import { useStyles } from './styles.js';
+export function FeatureBarPlotSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, yMin = 0, yUnits = null, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsHighlight: cellHighlight, additionalObsSets: additionalCellSets, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, }, { setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_BAR_PLOT], coordinationScopes);
+    // console.log("BarPlot: " + cellHighlight)
+    const [width, height, containerRef] = useGridItemSize();
+    // Get data from loaders using the data hooks.
+    // eslint-disable-next-line no-unused-vars
+    const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
+    // TODO: support multiple feature labels using featureLabelsType coordination values.
+    const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+    const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls,] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+    const isReady = useReady([
+        featureSelectionStatus,
+        matrixIndicesStatus,
+        featureLabelsStatus,
+    ]);
+    const urls = useUrls([
+        featureLabelsUrls,
+        matrixIndicesUrls,
+    ]);
+    const onBarSelect = useCallback((obsId) => {
+        const obsIdsToSelect = [obsId];
+        setObsSelection(obsIdsToSelect, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding);
+    }, [additionalCellSets, cellSetColor, setCellColorEncoding,
+        setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
+    const onBarHighlight = useCallback((obsId) => {
+        setCellHighlight(obsId);
+    }, []);
+    const firstGeneSelected = geneSelection && geneSelection.length >= 1
+        ? (featureLabelsMap?.get(geneSelection[0]) || geneSelection[0])
+        : null;
+    const [expressionArr, expressionMax] = useMemo(() => {
+        if (firstGeneSelected && expressionData && obsIndex) {
+            let exprMax = -Infinity;
+            const cellIndices = {};
+            for (let i = 0; i < obsIndex.length; i += 1) {
+                cellIndices[obsIndex[i]] = i;
+            }
+            const exprValues = obsIndex.map((obsId, cellIndex) => {
+                const value = expressionData[0][cellIndex];
+                exprMax = Math.max(value, exprMax);
+                return { obsId, value, feature: firstGeneSelected };
+            });
+            return [exprValues, exprMax];
+        }
+        return [null, null];
+    }, [expressionData, obsIndex, geneSelection, theme,
+        featureValueTransform, featureValueTransformCoefficient,
+        firstGeneSelected,
+    ]);
+    return (_jsx(TitleInfo, { title: `Feature Values${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, children: _jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? (_jsx(FeatureBarPlot, { yMin: yMin, yMax: expressionMax, yUnits: yUnits, data: expressionArr, theme: theme, width: width, height: height, obsType: obsType, cellHighlight: cellHighlight, cellSetSelection: cellSetSelection, additionalCellSets: additionalCellSets, cellSetColor: cellSetColor, featureType: featureType, featureValueType: featureValueType, featureName: firstGeneSelected, onBarSelect: onBarSelect, onBarHighlight: onBarHighlight })) : (_jsxs("span", { children: ["Select a ", featureType, "."] })) }) }));
+}

package/dist-tsc/index.d.ts

@@ -1,6 +1,7 @@
 export { CellSetExpressionPlotSubscriber } from "./CellSetExpressionPlotSubscriber.js";
 export { CellSetSizesPlotSubscriber } from "./CellSetSizesPlotSubscriber.js";
 export { ExpressionHistogramSubscriber } from "./ExpressionHistogramSubscriber.js";
+export { FeatureBarPlotSubscriber } from "./FeatureBarPlotSubscriber.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/index.js

@@ -1,6 +1,7 @@
 export { CellSetExpressionPlotSubscriber } from './CellSetExpressionPlotSubscriber.js';
 export { CellSetSizesPlotSubscriber } from './CellSetSizesPlotSubscriber.js';
 export { ExpressionHistogramSubscriber } from './ExpressionHistogramSubscriber.js';
+export { FeatureBarPlotSubscriber } from './FeatureBarPlotSubscriber.js';
 export { default as CellSetSizesPlot } from './CellSetSizesPlot.js';
 export { default as CellSetExpressionPlot } from './CellSetExpressionPlot.js';
 export { default as ExpressionHistogram } from './ExpressionHistogram.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/statistical-plots",
-  "version": "3.3.11",
+  "version": "3.4.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -25,11 +25,12 @@
     "vega-scale": "^6.0.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/sets-utils": "3.3.11",
-    "@vitessce/vit-s": "3.3.11",
-    "@vitessce/constants-internal": "3.3.11",
-    "@vitessce/utils": "3.3.11",
-    "@vitessce/vega": "3.3.11"
+    "d3-format": "^3.1.0",
+    "@vitessce/sets-utils": "3.4.0",
+    "@vitessce/constants-internal": "3.4.0",
+    "@vitessce/utils": "3.4.0",
+    "@vitessce/vega": "3.4.0",
+    "@vitessce/vit-s": "3.4.0"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/FeatureBarPlot.js

@@ -0,0 +1,225 @@
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+import React, { useMemo, useEffect, useRef } from 'react';
+import { scaleLinear } from 'd3-scale';
+import { scale as vega_scale } from 'vega-scale';
+import { axisBottom, axisLeft } from 'd3-axis';
+import { ascending } from 'd3-array';
+import { select } from 'd3-selection';
+import { capitalize } from '@vitessce/utils';
+
+const scaleBand = vega_scale('band');
+
+const OBS_KEY = 'obsId';
+const FEATURE_KEY = 'value';
+
+function componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}
+
+function rgbToHex(color) {
+  return `#${componentToHex(color[0])}${componentToHex(color[1])}${componentToHex(color[2])}`;
+}
+
+export default function FeatureBarPlot(props) {
+  const {
+    yMin,
+    yMax,
+    yUnits,
+    jitter,
+    colors,
+    data,
+    theme,
+    width,
+    height,
+    marginTop = 5,
+    marginRight = 5,
+    marginLeft = 80,
+    marginBottom,
+    obsType,
+    cellHighlight,
+    cellSetSelection,
+    additionalCellSets,
+    cellSetColor,
+    featureType,
+    featureValueType,
+    featureName,
+    onBarSelect,
+    onBarHighlight,
+  } = props;
+
+  // TODO: use a more descriptive name than setsSave.
+  const setsSave = useMemo(() => {
+    const result = new Map();
+    cellSetSelection.forEach((obsSetPath) => {
+      // TODO: this does not use the full set path for comparison.
+      const selectedElement = obsSetPath[1];
+      // TODO: this is only considering the first set grouping in the tree.
+      // TODO: use sets-utils to traverse sets tree.
+      additionalCellSets.tree[0].children.forEach((child) => {
+        if (child.name === selectedElement) {
+          child.set.forEach(([obsId]) => {
+            const info = { name: '', id: '', color: [] };
+            info.name = selectedElement;
+            info.id = obsId;
+            cellSetColor.forEach((color) => {
+              if (color.path[1] === selectedElement) {
+                info.color = color.color;
+              }
+            });
+            result.set(info.id, info);
+          });
+        }
+      });
+    });
+  }, [cellSetSelection, additionalCellSets, cellSetColor]);
+
+  const svgRef = useRef();
+  // Get the max characters in an axis label for autsizing the bottom margin.
+  const maxCharactersForLabel = useMemo(() => data.reduce((acc, val) => {
+    // eslint-disable-next-line no-param-reassign
+    acc = acc === undefined || val[OBS_KEY].length > acc ? val[OBS_KEY].length : acc;
+    return acc;
+  }, 0), [data]);
+
+  useEffect(() => {
+    const domElement = svgRef.current;
+
+    const unitSuffix = yUnits ? ` (${yUnits})` : '';
+    const yTitle = `${capitalize(featureName)}${unitSuffix}`;
+
+    const xTitle = `${capitalize(obsType)}`;
+
+    // Use a square-root term because the angle of the labels is 45 degrees (see below)
+    // so the perpendicular distance to the bottom of the labels is proportional to the
+    // square root of the length of the labels along the imaginary hypotenuse.
+    // 30 is an estimate of the pixel size of a given character and seems to work well.
+    const autoMarginBottom = marginBottom
+      || 30 + Math.sqrt(maxCharactersForLabel / 2) * 30;
+
+    const foregroundColor = (theme === 'dark' ? 'lightgray' : 'black');
+
+    data.sort((a, b) => ascending(a[FEATURE_KEY], b[FEATURE_KEY]));
+
+    const svg = select(domElement);
+    svg.selectAll('g').remove();
+    svg
+      .attr('width', width)
+      .attr('height', height);
+
+    const g = svg
+      .append('g')
+      .attr('width', width)
+      .attr('height', height);
+
+    const innerWidth = width - marginLeft;
+    const innerHeight = height - autoMarginBottom;
+
+    const xScale = scaleBand()
+      .range([marginLeft, width - marginRight])
+      .domain(data.map(d => d[OBS_KEY]))
+      .padding(0.1);
+
+    // For the y domain, use the yMin prop
+    // to support a use case such as 'Aspect Ratio',
+    // where the domain minimum should be 1 rather than 0.
+    const yScale = scaleLinear()
+      .domain([yMin, yMax])
+      .range([innerHeight, marginTop]);
+
+    // Bar areas
+    g
+      .selectAll('bar')
+      .data(data)
+      .enter()
+      .append('rect')
+      .attr('x', d => xScale(d[OBS_KEY]))
+      .attr('y', d => yScale(d[FEATURE_KEY]))
+      .attr('width', xScale.bandwidth())
+      .attr('height', d => innerHeight - yScale(d[FEATURE_KEY]))
+      .style('fill', (d) => {
+          if (d[OBS_KEY] === cellHighlight) return 'orange';
+          if (setsSave.has(d[OBS_KEY])) {
+              const { color } = setsSave.get(d[OBS_KEY]);
+              return rgbToHex(color);
+          }
+          return foregroundColor;
+      })
+      .style('cursor', 'pointer')
+      // eslint-disable-next-line no-unused-vars
+      .on('click', (event, d) => {
+          onBarSelect(d[OBS_KEY]);
+      })
+      // eslint-disable-next-line no-unused-vars
+      .on('mouseover', (event, d) => {
+          onBarHighlight(d[OBS_KEY]);
+      })
+      .on('mouseout', () => {
+          onBarHighlight(null);
+      });
+
+
+    const axis = axisLeft(yScale);
+    axis.tickFormat(d => `${Math.round(d * 10000000)} µm`);
+    // Y-axis ticks
+    g
+      .append('g')
+      .attr('transform', `translate(${marginLeft},0)`)
+      .call(axis)
+      .selectAll('text')
+      .style('font-size', '11px');
+
+    // X-axis ticks
+    g
+      .append('g')
+      .attr('transform', `translate(0,${innerHeight})`)
+      .style('font-size', '14px')
+      .call(axisBottom(xScale))
+      .selectAll('text')
+      .style('font-size', '11px')
+      .attr('dx', '-6px')
+      .attr('dy', '6px')
+      .attr('transform', 'rotate(-45)')
+      .style('text-anchor', 'end');
+
+    // Y-axis title
+    g
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', -innerHeight / 2)
+      .attr('y', 15)
+      .attr('transform', 'rotate(-90)')
+      .text(yTitle)
+      .style('font-size', '12px')
+      .style('fill', foregroundColor);
+
+    // X-axis title
+    g
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', marginLeft + innerWidth / 2)
+      .attr('y', height - 10)
+      .text(xTitle)
+      .style('font-size', '12px')
+      .style('fill', foregroundColor);
+  }, [width, height, data, marginLeft, marginBottom, colors,
+    jitter, theme, yMin, marginTop, marginRight, featureType,
+    featureValueType, yUnits, obsType,
+    maxCharactersForLabel, yMax, featureName, onBarSelect, onBarHighlight,
+    cellHighlight, setsSave,
+  ]);
+
+  return (
+    <svg
+      ref={svgRef}
+      style={{
+        top: 0,
+        left: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        position: 'relative',
+      }}
+    />
+  );
+}

package/src/FeatureBarPlotSubscriber.js

@@ -0,0 +1,157 @@
+import React, { useMemo, useCallback } from 'react';
+import {
+  TitleInfo,
+  useCoordination,
+  useLoaders,
+  useUrls,
+  useReady,
+  useGridItemSize,
+  useFeatureSelection,
+  useObsFeatureMatrixIndices,
+  useFeatureLabelsData,
+} from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { setObsSelection } from '@vitessce/sets-utils';
+import FeatureBarPlot from './FeatureBarPlot.js';
+import { useStyles } from './styles.js';
+
+
+export function FeatureBarPlotSubscriber(props) {
+  const {
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    yMin = 0,
+    yUnits = null,
+  } = props;
+
+  const classes = useStyles();
+  const loaders = useLoaders();
+
+  // Get "props" from the coordination space.
+  const [{
+    dataset,
+    obsType,
+    featureType,
+    featureValueType,
+    featureSelection: geneSelection,
+    featureValueTransform,
+    featureValueTransformCoefficient,
+    obsHighlight: cellHighlight,
+    additionalObsSets: additionalCellSets,
+    obsSetSelection: cellSetSelection,
+    obsSetColor: cellSetColor,
+  }, {
+    setObsSetSelection: setCellSetSelection,
+    setObsHighlight: setCellHighlight,
+    setObsSetColor: setCellSetColor,
+    setObsColorEncoding: setCellColorEncoding,
+    setAdditionalObsSets: setAdditionalCellSets,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.FEATURE_BAR_PLOT],
+    coordinationScopes,
+  );
+  // console.log("BarPlot: " + cellHighlight)
+  const [width, height, containerRef] = useGridItemSize();
+
+  // Get data from loaders using the data hooks.
+  // eslint-disable-next-line no-unused-vars
+  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+    loaders, dataset, false, geneSelection,
+    { obsType, featureType, featureValueType },
+  );
+  // TODO: support multiple feature labels using featureLabelsType coordination values.
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
+    loaders, dataset, false, {}, {},
+    { featureType },
+  );
+  const [
+    { obsIndex }, matrixIndicesStatus, matrixIndicesUrls,
+  ] = useObsFeatureMatrixIndices(
+    loaders, dataset, false,
+    { obsType, featureType, featureValueType },
+  );
+  const isReady = useReady([
+    featureSelectionStatus,
+    matrixIndicesStatus,
+    featureLabelsStatus,
+  ]);
+  const urls = useUrls([
+    featureLabelsUrls,
+    matrixIndicesUrls,
+  ]);
+
+  const onBarSelect = useCallback((obsId) => {
+    const obsIdsToSelect = [obsId];
+    setObsSelection(
+      obsIdsToSelect, additionalCellSets, cellSetColor,
+      setCellSetSelection, setAdditionalCellSets, setCellSetColor,
+      setCellColorEncoding,
+    );
+  }, [additionalCellSets, cellSetColor, setCellColorEncoding,
+    setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
+
+  const onBarHighlight = useCallback((obsId) => {
+    setCellHighlight(obsId);
+  }, []);
+
+  const firstGeneSelected = geneSelection && geneSelection.length >= 1
+    ? (featureLabelsMap?.get(geneSelection[0]) || geneSelection[0])
+    : null;
+
+  const [expressionArr, expressionMax] = useMemo(() => {
+    if (firstGeneSelected && expressionData && obsIndex) {
+      let exprMax = -Infinity;
+      const cellIndices = {};
+      for (let i = 0; i < obsIndex.length; i += 1) {
+        cellIndices[obsIndex[i]] = i;
+      }
+      const exprValues = obsIndex.map((obsId, cellIndex) => {
+        const value = expressionData[0][cellIndex];
+        exprMax = Math.max(value, exprMax);
+        return { obsId, value, feature: firstGeneSelected };
+      });
+      return [exprValues, exprMax];
+    }
+    return [null, null];
+  }, [expressionData, obsIndex, geneSelection, theme,
+    featureValueTransform, featureValueTransformCoefficient,
+    firstGeneSelected,
+  ]);
+
+  return (
+    <TitleInfo
+      title={`Feature Values${(firstGeneSelected ? ` (${firstGeneSelected})` : '')}`}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+    >
+      <div ref={containerRef} className={classes.vegaContainer}>
+        {expressionArr ? (
+          <FeatureBarPlot
+            yMin={yMin}
+            yMax={expressionMax}
+            yUnits={yUnits}
+            data={expressionArr}
+            theme={theme}
+            width={width}
+            height={height}
+            obsType={obsType}
+            cellHighlight={cellHighlight}
+            cellSetSelection={cellSetSelection}
+            additionalCellSets={additionalCellSets}
+            cellSetColor={cellSetColor}
+            featureType={featureType}
+            featureValueType={featureValueType}
+            featureName={firstGeneSelected}
+            onBarSelect={onBarSelect}
+            onBarHighlight={onBarHighlight}
+          />
+        ) : (
+          <span>Select a {featureType}.</span>
+        )}
+      </div>
+    </TitleInfo>
+  );
+}