@czi-sds/data-viz 2.5.0 → 3.0.0

package/dist/shared/ProteinStructureViewer.cjs.js

@@ -292,17 +292,35 @@ const MIN_WIDTH = 200;
 */
 const VIEWER_CONTAINER_NAME = "sds-structure-viewer";
 /**
-* Height reserved for the sequence panel along the bottom, and the viewer
-* width above which it grows. Measured against the container above rather than
-* the page, so a viewer embedded in a wider page sizes to the room it has.
+* Height reserved for the sequence panel along the bottom when the consumer
+* sets none, and the viewer width above which it grows. Measured against the
+* container above rather than the page, so a viewer embedded in a wider page
+* sizes to the room it has.
 *
-* The legend sits directly on top of the panel and offsets itself by these
-* same three values, so it reads them from here rather than restating them.
-* Copies that drifted would leave the legend floating off the panel.
+* The legend sits directly on top of the panel and offsets itself by the same
+* heights at the same breakpoint, so it reads them from here rather than
+* restating them. Copies that drifted would leave the legend floating off the
+* panel.
 */
 const SEQUENCE_HEIGHT = "max(104px, 30%)";
 const SEQUENCE_HEIGHT_WIDE = "max(134px, 32%)";
 /**
+* The sequence panel's height below `WIDE_VIEWER` and at or above it. A height
+* the consumer sets holds at every width, a number is read as pixels, and an
+* empty string leaves the defaults in place, as it would in a React style.
+*/
+function sequenceHeights(height) {
+	if (height === void 0 || height === "") return {
+		base: SEQUENCE_HEIGHT,
+		wide: SEQUENCE_HEIGHT_WIDE
+	};
+	const css = typeof height === "number" ? `${height}px` : height;
+	return {
+		base: css,
+		wide: css
+	};
+}
+/**
 * The element Mol* mounts into.
 *
 * This has to be its own node rather than the root: Mol* takes ownership of its
@@ -379,17 +397,20 @@ const ViewerRoot = (0, _emotion_styled.default)("div")`
   /*
    * Mol* puts the sequence panel in its "top" region; move it to the bottom and
    * shrink the main viewport region to match, so the structure sits above the
-   * sequence rather than behind it. The panel grows on wider viewers, and the
-   * viewport region's offset follows it.
+   * sequence rather than behind it. The panel grows on wider viewers unless the
+   * consumer has set its height, and the viewport region's offset follows it.
    */
   ${(props) => {
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
+	const mainBottom = showSequenceViewer ? height.base : "0";
+	const mainBottomWide = showSequenceViewer ? height.wide : "0";
 	return `
       .msp-plugin .msp-layout-region.msp-layout-top {
         display: ${showSequenceViewer ? "block" : "none"} !important;
         position: absolute !important;
         inset: auto 0 0 0 !important;
-        height: ${SEQUENCE_HEIGHT} !important;
+        height: ${height.base} !important;
       }
 
       .msp-plugin .msp-layout-region.msp-layout-main {
@@ -397,16 +418,16 @@ const ViewerRoot = (0, _emotion_styled.default)("div")`
         top: 0 !important;
         left: 0 !important;
         right: 0 !important;
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"} !important;
+        bottom: ${mainBottom} !important;
       }
 
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
         .msp-plugin .msp-layout-region.msp-layout-top {
-          height: ${SEQUENCE_HEIGHT_WIDE} !important;
+          height: ${height.wide} !important;
         }
 
         .msp-plugin .msp-layout-region.msp-layout-main {
-          bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"} !important;
+          bottom: ${mainBottomWide} !important;
         }
       }
     `;
@@ -448,12 +469,13 @@ const LegendOverlay = (0, _emotion_styled.default)("div")`
 
   ${(props) => {
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
 	return `
       right: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
       padding-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-      bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"};
+      bottom: ${showSequenceViewer ? height.base : "0"};
 
       /*
        * Track the sequence panel as it grows on wider viewers. The panel is
@@ -461,7 +483,7 @@ const LegendOverlay = (0, _emotion_styled.default)("div")`
        * would part the legend from it on a viewer narrower than its page.
        */
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"};
+        bottom: ${showSequenceViewer ? height.wide : "0"};
       }
 
       /* Spacer balancing the axes widget pinned in the opposite corner. */
@@ -637,7 +659,7 @@ function readoutSlot(label, value, residueCount) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, sequenceViewerHeight, showSequenceViewer, stats, valueLabel }) {
 	var _activeResidue$residu, _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -652,6 +674,7 @@ function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChai
 		showResidue ? readoutSlot("pLDDT", activeResidue.plddt, residueCount) : (_stats$3 = stats[2]) !== null && _stats$3 !== void 0 ? _stats$3 : null
 	];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LegendOverlay, {
+		sequenceViewerHeight,
 		showSequenceViewer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsGrid, { children: Array.from({ length: SLOT_COUNT }, (_, i) => {
 			var _slots$i;
@@ -3638,6 +3661,7 @@ const _excluded = [
 	"sceneMode",
 	"selection",
 	"sequenceViewerBackgroundColor",
+	"sequenceViewerHeight",
 	"showAxes",
 	"showChainLegend",
 	"showLegend",
@@ -3711,7 +3735,7 @@ function resolveScaleProps(colorBy, overlay) {
 */
 const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 	var _selection$chains;
-	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, sequenceViewerHeight, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
 	const theme = (0, _mui_material_styles.useTheme)();
 	const mode = (0, _czi_sds_components.getMode)({ theme });
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)({ theme });
@@ -3892,6 +3916,7 @@ const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 	const plddtColoringActive = colorBy === "plddt";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ViewerRoot, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 		ref,
+		sequenceViewerHeight,
 		showSequenceViewer
 	}, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StructureLegend, require_objectSpread2._objectSpread2({
 		chainBandColors: plddtColoringActive ? require_renderStructureImage.PLDDT_BAND_COLORS : void 0,
@@ -3904,6 +3929,7 @@ const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 		onChainToggle: toggleChain,
 		selectedChains,
 		selectedResidue: selectedReadout,
+		sequenceViewerHeight,
 		showSequenceViewer,
 		stats: stats !== null && stats !== void 0 ? stats : []
 	}, scaleProps))] }));

package/dist/shared/ProteinStructureViewer.esm.js

@@ -290,17 +290,35 @@ const MIN_WIDTH = 200;
 */
 const VIEWER_CONTAINER_NAME = "sds-structure-viewer";
 /**
-* Height reserved for the sequence panel along the bottom, and the viewer
-* width above which it grows. Measured against the container above rather than
-* the page, so a viewer embedded in a wider page sizes to the room it has.
+* Height reserved for the sequence panel along the bottom when the consumer
+* sets none, and the viewer width above which it grows. Measured against the
+* container above rather than the page, so a viewer embedded in a wider page
+* sizes to the room it has.
 *
-* The legend sits directly on top of the panel and offsets itself by these
-* same three values, so it reads them from here rather than restating them.
-* Copies that drifted would leave the legend floating off the panel.
+* The legend sits directly on top of the panel and offsets itself by the same
+* heights at the same breakpoint, so it reads them from here rather than
+* restating them. Copies that drifted would leave the legend floating off the
+* panel.
 */
 const SEQUENCE_HEIGHT = "max(104px, 30%)";
 const SEQUENCE_HEIGHT_WIDE = "max(134px, 32%)";
 /**
+* The sequence panel's height below `WIDE_VIEWER` and at or above it. A height
+* the consumer sets holds at every width, a number is read as pixels, and an
+* empty string leaves the defaults in place, as it would in a React style.
+*/
+function sequenceHeights(height) {
+	if (height === void 0 || height === "") return {
+		base: SEQUENCE_HEIGHT,
+		wide: SEQUENCE_HEIGHT_WIDE
+	};
+	const css = typeof height === "number" ? `${height}px` : height;
+	return {
+		base: css,
+		wide: css
+	};
+}
+/**
 * The element Mol* mounts into.
 *
 * This has to be its own node rather than the root: Mol* takes ownership of its
@@ -377,17 +395,20 @@ const ViewerRoot = styled("div")`
   /*
    * Mol* puts the sequence panel in its "top" region; move it to the bottom and
    * shrink the main viewport region to match, so the structure sits above the
-   * sequence rather than behind it. The panel grows on wider viewers, and the
-   * viewport region's offset follows it.
+   * sequence rather than behind it. The panel grows on wider viewers unless the
+   * consumer has set its height, and the viewport region's offset follows it.
    */
   ${(props) => {
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
+	const mainBottom = showSequenceViewer ? height.base : "0";
+	const mainBottomWide = showSequenceViewer ? height.wide : "0";
 	return `
       .msp-plugin .msp-layout-region.msp-layout-top {
         display: ${showSequenceViewer ? "block" : "none"} !important;
         position: absolute !important;
         inset: auto 0 0 0 !important;
-        height: ${SEQUENCE_HEIGHT} !important;
+        height: ${height.base} !important;
       }
 
       .msp-plugin .msp-layout-region.msp-layout-main {
@@ -395,16 +416,16 @@ const ViewerRoot = styled("div")`
         top: 0 !important;
         left: 0 !important;
         right: 0 !important;
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"} !important;
+        bottom: ${mainBottom} !important;
       }
 
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
         .msp-plugin .msp-layout-region.msp-layout-top {
-          height: ${SEQUENCE_HEIGHT_WIDE} !important;
+          height: ${height.wide} !important;
         }
 
         .msp-plugin .msp-layout-region.msp-layout-main {
-          bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"} !important;
+          bottom: ${mainBottomWide} !important;
         }
       }
     `;
@@ -446,12 +467,13 @@ const LegendOverlay = styled("div")`
 
   ${(props) => {
 	const spaces = getSpaces(props);
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
 	return `
       right: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
       padding-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-      bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"};
+      bottom: ${showSequenceViewer ? height.base : "0"};
 
       /*
        * Track the sequence panel as it grows on wider viewers. The panel is
@@ -459,7 +481,7 @@ const LegendOverlay = styled("div")`
        * would part the legend from it on a viewer narrower than its page.
        */
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"};
+        bottom: ${showSequenceViewer ? height.wide : "0"};
       }
 
       /* Spacer balancing the axes widget pinned in the opposite corner. */
@@ -635,7 +657,7 @@ function readoutSlot(label, value, residueCount) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, sequenceViewerHeight, showSequenceViewer, stats, valueLabel }) {
 	var _activeResidue$residu, _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -650,6 +672,7 @@ function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChai
 		showResidue ? readoutSlot("pLDDT", activeResidue.plddt, residueCount) : (_stats$3 = stats[2]) !== null && _stats$3 !== void 0 ? _stats$3 : null
 	];
 	return /* @__PURE__ */ jsxs(LegendOverlay, {
+		sequenceViewerHeight,
 		showSequenceViewer,
 		children: [/* @__PURE__ */ jsx(StatsGrid, { children: Array.from({ length: SLOT_COUNT }, (_, i) => {
 			var _slots$i;
@@ -3636,6 +3659,7 @@ const _excluded = [
 	"sceneMode",
 	"selection",
 	"sequenceViewerBackgroundColor",
+	"sequenceViewerHeight",
 	"showAxes",
 	"showChainLegend",
 	"showLegend",
@@ -3698,7 +3722,7 @@ function resolveScaleProps(colorBy, overlay) {
 }
 var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 	var _selection$chains;
-	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded);
+	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, sequenceViewerHeight, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded);
 	const theme = useTheme();
 	const mode = getMode({ theme });
 	const semanticColors = getSemanticColors({ theme });
@@ -3879,6 +3903,7 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 	const plddtColoringActive = colorBy === "plddt";
 	return /* @__PURE__ */ jsxs(ViewerRoot, _objectSpread2(_objectSpread2({
 		ref,
+		sequenceViewerHeight,
 		showSequenceViewer
 	}, rest), {}, { children: [/* @__PURE__ */ jsx(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ jsx(StructureLegend, _objectSpread2({
 		chainBandColors: plddtColoringActive ? PLDDT_BAND_COLORS : void 0,
@@ -3891,6 +3916,7 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 		onChainToggle: toggleChain,
 		selectedChains,
 		selectedResidue: selectedReadout,
+		sequenceViewerHeight,
 		showSequenceViewer,
 		stats: stats !== null && stats !== void 0 ? stats : []
 	}, scaleProps))] }));

package/dist/shared/StackedBarChart.cjs.js

@@ -21,12 +21,12 @@ const TitleContainer = (0, _emotion_styled.default)("div")`
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
 	return `
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
-      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
 const ChartTitle = (0, _emotion_styled.default)("div")`
-  ${_czi_sds_components.fontHeaderS}
+  ${_czi_sds_components.fontBodyMediumXs}
 
   ${(props) => {
 	var _semanticColors$base;
@@ -36,36 +36,19 @@ const ChartTitle = (0, _emotion_styled.default)("div")`
     `;
 }}
 `;
-const StyledBadge = (0, _emotion_styled.default)("div")`
-  ${_czi_sds_components.fontTabularSemiboldXxxxs}
-
-  ${(props) => {
-	var _semanticColors$base2, _semanticColors$base3;
-	const spaces = (0, _czi_sds_components.getSpaces)(props);
-	const corners = (0, _czi_sds_components.getCorners)(props);
-	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
-	return `
-      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
-      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
-      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
-    `;
-}}
-`;
 const BarContainer = (0, _emotion_styled.default)("div")`
   ${(props) => {
-	var _semanticColors$base4;
+	var _semanticColors$base2;
 	const { width, barHeight, isEmpty } = props;
 	const corners = (0, _czi_sds_components.getCorners)(props);
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
 	const finalWidth = typeof width === "number" ? `${width}px` : width;
 	return `
       display: flex;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       width: ${finalWidth};
       height: ${barHeight}px;
-      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
-      overflow: hidden;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary : "transparent"};
     `;
 }}
 `;
@@ -73,14 +56,17 @@ const BarSegment = (0, _emotion_styled.default)("div")`
   ${(props) => {
 	const { color, height, percentage, opacity, disabled, isLast } = props;
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	const corners = (0, _czi_sds_components.getCorners)(props);
 	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	const marginRight = percentage > 0 && !isLast ? `${gap}px` : 0;
 	return `
       background-color: ${color};
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       height: ${height}px;
       flex-grow: ${percentage};
       flex-basis: 0;
       flex-shrink: 1;
-      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      margin-right: ${marginRight};
       opacity: ${opacity};
       transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
       cursor: ${disabled ? "default" : "pointer"};
@@ -94,7 +80,7 @@ const StyledStackedBarChartWrapper = (0, _emotion_styled.default)("div")`
 	return `
       display: flex;
       flex-direction: column;
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
@@ -124,17 +110,18 @@ const _excluded = [
 	"remainingLabel",
 	"remainingUnit",
 	"unit",
-	"colorGeneratorOptions"
+	"colorGeneratorOptions",
+	"maxItems"
 ];
 const calculateBadgeText = (totalItems, selectedCount) => {
 	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
 	return `${selectedCount} of ${totalItems}`;
 };
 const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	var _ref, _item$unit;
 	if (!showLegendValues) return void 0;
 	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
-	const effectiveUnit = item.unit || globalUnit;
-	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+	return `${item.value.toLocaleString()} ${(_ref = (_item$unit = item.unit) !== null && _item$unit !== void 0 ? _item$unit : globalUnit) !== null && _ref !== void 0 ? _ref : ""}`.trim();
 };
 const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
 	const hasSelection = selectedIndicesSet.size > 0;
@@ -181,7 +168,7 @@ const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mod
 	return mode === "cumulative" ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
 };
 const buildLegendItems = (dataWithPercentages, options) => {
-	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, theme } = options;
+	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, remainingOpensMenu, theme } = options;
 	const legendItems = dataWithPercentages.map((item) => ({
 		name: item.name,
 		value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
@@ -195,13 +182,13 @@ const buildLegendItems = (dataWithPercentages, options) => {
 		else if (legendValueFormat === "percentage") remainingValueDisplay = `${Math.round(remainingPercentage)}%`;
 		else {
 			const effectiveRemainingUnit = remainingUnit || unit || "";
-			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue} ${effectiveRemainingUnit}` : `${remainingValue}`;
+			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue.toLocaleString()} ${effectiveRemainingUnit}` : `${remainingValue.toLocaleString()}`;
 		}
 		legendItems.push({
 			name: remainingLabel,
 			value: remainingValueDisplay,
 			color: theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.backgroundTertiary,
-			disabled: true
+			disabled: !remainingOpensMenu
 		});
 	}
 	return legendItems;
@@ -237,10 +224,13 @@ const renderBarSegment = (item, options) => {
 	}, item.key) : (0, react.cloneElement)(barSegment, { key: item.key });
 };
 const StackedBarChart = (props) => {
-	var _theme$palette4;
-	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	var _theme$palette5;
+	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 8, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions, maxItems } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
 	const barHeight = Math.max(1, barHeightProp);
 	const theme = (0, _mui_material.useTheme)();
+	const visibleCount = mode === "cumulative" && maxItems !== void 0 && maxItems < data.length ? Math.max(0, maxItems) : data.length;
+	const chartData = (0, react.useMemo)(() => data.slice(0, visibleCount), [data, visibleCount]);
+	const hiddenItems = (0, react.useMemo)(() => data.slice(visibleCount), [data, visibleCount]);
 	const [hoveredIndex, setHoveredIndex] = (0, react.useState)(null);
 	const [animatedItems, setAnimatedItems] = (0, react.useState)([]);
 	const [autoColorMap, setAutoColorMap] = (0, react.useState)(/* @__PURE__ */ new Map());
@@ -263,8 +253,8 @@ const StackedBarChart = (props) => {
 		theme
 	]);
 	(0, react.useEffect)(() => {
-		const autoItems = data.filter((item) => !item.color);
-		const currentDataKeys = new Set(data.map((item) => item.name));
+		const autoItems = chartData.filter((item) => !item.color);
+		const currentDataKeys = new Set(chartData.map((item) => item.name));
 		const previousDataKeys = previousDataKeysRef.current;
 		const previousColorOptions = previousColorOptionsRef.current;
 		const colorOptionsChanged = !previousColorOptions || previousColorOptions.isDarkMode !== isDarkMode || previousColorOptions.options !== colorGeneratorOptions;
@@ -290,7 +280,7 @@ const StackedBarChart = (props) => {
 			if (hasChanges) setAutoColorMap(updatedMap);
 		}
 	}, [
-		data,
+		chartData,
 		colorGeneratorOptions,
 		isDarkMode,
 		theme,
@@ -299,9 +289,10 @@ const StackedBarChart = (props) => {
 	const displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
 	const { effectiveMaxAmount, hasRemaining, remainingValue, remainingPercentage } = (0, react.useMemo)(() => {
 		const total = data.reduce((sum, item) => sum + item.value, 0);
+		const visibleTotal = chartData.reduce((sum, item) => sum + item.value, 0);
 		const maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
-		const hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
-		const remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+		const hasRemainingSegment = mode === "cumulative" && visibleTotal < maxAmountValue;
+		const remaining = hasRemainingSegment ? maxAmountValue - visibleTotal : 0;
 		return {
 			effectiveMaxAmount: maxAmountValue,
 			hasRemaining: hasRemainingSegment,
@@ -310,11 +301,20 @@ const StackedBarChart = (props) => {
 		};
 	}, [
 		data,
+		chartData,
 		mode,
 		maxAmount
 	]);
+	const hasOverflow = hasRemaining && hiddenItems.length > 0;
+	const overflowIndex = data.length;
+	const hiddenColors = (0, react.useMemo)(() => hasOverflow ? (0, _czi_sds_components.generateDiscreteColors)(hiddenItems.length, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, colorGeneratorOptions || {}), {}, { isDarkMode })) : [], [
+		hasOverflow,
+		hiddenItems.length,
+		colorGeneratorOptions,
+		isDarkMode
+	]);
 	const dataWithPercentages = (0, react.useMemo)(() => {
-		return data.map((item, index) => {
+		return chartData.map((item, index) => {
 			var _theme$palette3;
 			const resolvedColor = item.color || autoColorMap.get(item.name) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.sds) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.base) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.ornamentSecondary);
 			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
@@ -327,7 +327,7 @@ const StackedBarChart = (props) => {
 			});
 		});
 	}, [
-		data,
+		chartData,
 		effectiveMaxAmount,
 		autoColorMap,
 		theme
@@ -368,10 +368,16 @@ const StackedBarChart = (props) => {
 			timeoutIds.forEach((id) => window.clearTimeout(id));
 		};
 	}, [dataWithPercentages, remainingPercentage]);
-	const selectedIndicesSet = (0, react.useMemo)(() => new Set(selectedIndices), [selectedIndices]);
-	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = (0, react.useMemo)(() => applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
+	const toChartIndex = (0, react.useCallback)((index) => hasOverflow && index >= visibleCount ? overflowIndex : index, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const hoveredChartIndex = hoveredIndex === null ? null : toChartIndex(hoveredIndex);
+	const selectedChartIndices = (0, react.useMemo)(() => new Set(selectedIndices.map(toChartIndex)), [selectedIndices, toChartIndex]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = (0, react.useMemo)(() => applySelectionStyling(animatedItems, selectedChartIndices, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
 		animatedItems,
-		selectedIndicesSet,
+		selectedChartIndices,
 		selectionBehavior,
 		mode,
 		hasRemaining,
@@ -392,6 +398,7 @@ const StackedBarChart = (props) => {
 		remainingPercentage: displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		remainingOpensMenu: hasOverflow,
 		theme
 	}), [
 		dataWithPercentages,
@@ -404,19 +411,51 @@ const StackedBarChart = (props) => {
 		displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		hasOverflow,
 		theme
 	]);
-	const handleLegendItemHover = (0, react.useCallback)((_item, index) => {
+	const toLegendIndex = (0, react.useCallback)((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === overflowIndex ? visibleCount : index + 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const fromLegendIndex = (0, react.useCallback)((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === visibleCount ? overflowIndex : index - 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const handleLegendItemHover = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(index);
 		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
-	}, [onLegendItemMouseEnter, data]);
-	const handleLegendItemLeave = (0, react.useCallback)((_item, index) => {
+	}, [
+		onLegendItemMouseEnter,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemLeave = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(null);
 		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
-	}, [onLegendItemMouseLeave, data]);
-	const handleLegendItemClickInternal = (0, react.useCallback)((_item, index) => {
+	}, [
+		onLegendItemMouseLeave,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemClickInternal = (0, react.useCallback)((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
-	}, [onLegendItemClick, data]);
+	}, [
+		onLegendItemClick,
+		data,
+		fromLegendIndex
+	]);
 	const handleSelectionChange = (0, react.useCallback)((newSelectedIndices) => {
 		if (!onSelectionChange) return;
 		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
@@ -424,15 +463,29 @@ const StackedBarChart = (props) => {
 	const handleSegmentClick = (0, react.useCallback)((index) => {
 		if (onSegmentClick && data[index]) onSegmentClick(data[index], index);
 		if (!onSelectionChange) return;
-		handleSelectionChange(selectedIndicesSet.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
+		handleSelectionChange(selectedChartIndices.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
 	}, [
 		onSelectionChange,
 		onSegmentClick,
 		data,
 		selectedIndices,
-		selectedIndicesSet,
+		selectedChartIndices,
 		handleSelectionChange
 	]);
+	const remainingMenuItems = (0, react.useMemo)(() => hasOverflow ? hiddenItems.map((item, index) => {
+		var _theme$palette4;
+		return {
+			name: item.name,
+			value: item.value,
+			color: item.color || hiddenColors[index] || (theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.ornamentSecondary),
+			disabled: item.disabled
+		};
+	}) : [], [
+		hasOverflow,
+		hiddenItems,
+		hiddenColors,
+		theme
+	]);
 	const lastVisibleIndex = (0, react.useMemo)(() => {
 		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
 		return -1;
@@ -444,8 +497,8 @@ const StackedBarChart = (props) => {
 		children: [styledItems.map((item, index) => {
 			return renderBarSegment(item, {
 				barHeight,
-				hoveredIndex,
-				selectedIndicesSet,
+				hoveredIndex: hoveredChartIndex,
+				selectedIndicesSet: selectedChartIndices,
 				selectionBehavior,
 				isLast: index === lastVisibleIndex && !hasRemaining,
 				onMouseEnter: () => {
@@ -461,25 +514,31 @@ const StackedBarChart = (props) => {
 				onClick: () => !item.isExiting && handleSegmentClick(item.originalIndex)
 			});
 		}), previousProcessedRef.current.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSegment, {
-			color: theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.backgroundTertiary,
+			color: theme === null || theme === void 0 || (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.sds) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.base) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.backgroundTertiary,
 			percentage: displayRemainingPercentage,
 			height: barHeight,
 			isLast: true,
-			opacity: 1,
+			opacity: hasOverflow ? getSegmentOpacity(overflowIndex, hoveredChartIndex, selectedChartIndices, selectionBehavior) : 1,
 			disabled: true
 		}, "remaining")]
 	}), showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Legend, {
 		items: legendItems,
+		lastItemMenuItems: remainingMenuItems,
 		showValues: showLegendValues,
 		onItemMouseEnter: handleLegendItemHover,
 		onItemMouseLeave: handleLegendItemLeave,
 		onItemClick: onLegendItemClick ? handleLegendItemClickInternal : void 0,
-		selectedIndices,
-		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
-		hoveredIndex
+		selectedIndices: selectedIndices.map(toLegendIndex),
+		onSelectionChange: onSelectionChange ? (indices) => handleSelectionChange(indices.map(fromLegendIndex)) : void 0,
+		hoveredIndex: hoveredIndex === null ? null : toLegendIndex(hoveredIndex)
 	})] });
 	if (!title) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: chartContent }));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadge, { children: displayBadge })] }), chartContent] }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tag, {
+		label: displayBadge,
+		sdsStyle: "outline",
+		color: "neutral",
+		size: "small"
+	})] }), chartContent] }));
 };
 //#endregion
 Object.defineProperty(exports, "StackedBarChart", {

package/dist/shared/StackedBarChart.esm.js

@@ -3,7 +3,7 @@ import { n as _objectWithoutProperties, t as _objectSpread2 } from "./objectSpre
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Legend, Tooltip, TooltipTable, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
+import { Legend, Tag, Tooltip, TooltipTable, fontBodyMediumXs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
 import { useTheme } from "@mui/material";
 //#region src/core/StackedBarChart/style.ts
 const ChartWrapper = styled("div")`
@@ -19,12 +19,12 @@ const TitleContainer = styled("div")`
 	const spaces = getSpaces(props);
 	return `
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
-      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
 const ChartTitle = styled("div")`
-  ${fontHeaderS}
+  ${fontBodyMediumXs}
 
   ${(props) => {
 	var _semanticColors$base;
@@ -34,36 +34,19 @@ const ChartTitle = styled("div")`
     `;
 }}
 `;
-const StyledBadge = styled("div")`
-  ${fontTabularSemiboldXxxxs}
-
-  ${(props) => {
-	var _semanticColors$base2, _semanticColors$base3;
-	const spaces = getSpaces(props);
-	const corners = getCorners(props);
-	const semanticColors = getSemanticColors(props);
-	return `
-      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
-      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
-      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
-    `;
-}}
-`;
 const BarContainer = styled("div")`
   ${(props) => {
-	var _semanticColors$base4;
+	var _semanticColors$base2;
 	const { width, barHeight, isEmpty } = props;
 	const corners = getCorners(props);
 	const semanticColors = getSemanticColors(props);
 	const finalWidth = typeof width === "number" ? `${width}px` : width;
 	return `
       display: flex;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       width: ${finalWidth};
       height: ${barHeight}px;
-      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
-      overflow: hidden;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary : "transparent"};
     `;
 }}
 `;
@@ -71,14 +54,17 @@ const BarSegment = styled("div")`
   ${(props) => {
 	const { color, height, percentage, opacity, disabled, isLast } = props;
 	const spaces = getSpaces(props);
+	const corners = getCorners(props);
 	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	const marginRight = percentage > 0 && !isLast ? `${gap}px` : 0;
 	return `
       background-color: ${color};
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
       height: ${height}px;
       flex-grow: ${percentage};
       flex-basis: 0;
       flex-shrink: 1;
-      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      margin-right: ${marginRight};
       opacity: ${opacity};
       transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
       cursor: ${disabled ? "default" : "pointer"};
@@ -92,7 +78,7 @@ const StyledStackedBarChartWrapper = styled("div")`
 	return `
       display: flex;
       flex-direction: column;
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
     `;
 }}
 `;
@@ -122,17 +108,18 @@ const _excluded = [
 	"remainingLabel",
 	"remainingUnit",
 	"unit",
-	"colorGeneratorOptions"
+	"colorGeneratorOptions",
+	"maxItems"
 ];
 const calculateBadgeText = (totalItems, selectedCount) => {
 	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
 	return `${selectedCount} of ${totalItems}`;
 };
 const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	var _ref, _item$unit;
 	if (!showLegendValues) return void 0;
 	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
-	const effectiveUnit = item.unit || globalUnit;
-	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+	return `${item.value.toLocaleString()} ${(_ref = (_item$unit = item.unit) !== null && _item$unit !== void 0 ? _item$unit : globalUnit) !== null && _ref !== void 0 ? _ref : ""}`.trim();
 };
 const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
 	const hasSelection = selectedIndicesSet.size > 0;
@@ -179,7 +166,7 @@ const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mod
 	return mode === "cumulative" ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
 };
 const buildLegendItems = (dataWithPercentages, options) => {
-	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, theme } = options;
+	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, remainingOpensMenu, theme } = options;
 	const legendItems = dataWithPercentages.map((item) => ({
 		name: item.name,
 		value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
@@ -193,13 +180,13 @@ const buildLegendItems = (dataWithPercentages, options) => {
 		else if (legendValueFormat === "percentage") remainingValueDisplay = `${Math.round(remainingPercentage)}%`;
 		else {
 			const effectiveRemainingUnit = remainingUnit || unit || "";
-			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue} ${effectiveRemainingUnit}` : `${remainingValue}`;
+			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue.toLocaleString()} ${effectiveRemainingUnit}` : `${remainingValue.toLocaleString()}`;
 		}
 		legendItems.push({
 			name: remainingLabel,
 			value: remainingValueDisplay,
 			color: theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.backgroundTertiary,
-			disabled: true
+			disabled: !remainingOpensMenu
 		});
 	}
 	return legendItems;
@@ -235,10 +222,13 @@ const renderBarSegment = (item, options) => {
 	}, item.key) : cloneElement(barSegment, { key: item.key });
 };
 const StackedBarChart = (props) => {
-	var _theme$palette4;
-	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = _objectWithoutProperties(props, _excluded);
+	var _theme$palette5;
+	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 8, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions, maxItems } = props, rest = _objectWithoutProperties(props, _excluded);
 	const barHeight = Math.max(1, barHeightProp);
 	const theme = useTheme();
+	const visibleCount = mode === "cumulative" && maxItems !== void 0 && maxItems < data.length ? Math.max(0, maxItems) : data.length;
+	const chartData = useMemo(() => data.slice(0, visibleCount), [data, visibleCount]);
+	const hiddenItems = useMemo(() => data.slice(visibleCount), [data, visibleCount]);
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [animatedItems, setAnimatedItems] = useState([]);
 	const [autoColorMap, setAutoColorMap] = useState(/* @__PURE__ */ new Map());
@@ -261,8 +251,8 @@ const StackedBarChart = (props) => {
 		theme
 	]);
 	useEffect(() => {
-		const autoItems = data.filter((item) => !item.color);
-		const currentDataKeys = new Set(data.map((item) => item.name));
+		const autoItems = chartData.filter((item) => !item.color);
+		const currentDataKeys = new Set(chartData.map((item) => item.name));
 		const previousDataKeys = previousDataKeysRef.current;
 		const previousColorOptions = previousColorOptionsRef.current;
 		const colorOptionsChanged = !previousColorOptions || previousColorOptions.isDarkMode !== isDarkMode || previousColorOptions.options !== colorGeneratorOptions;
@@ -288,7 +278,7 @@ const StackedBarChart = (props) => {
 			if (hasChanges) setAutoColorMap(updatedMap);
 		}
 	}, [
-		data,
+		chartData,
 		colorGeneratorOptions,
 		isDarkMode,
 		theme,
@@ -297,9 +287,10 @@ const StackedBarChart = (props) => {
 	const displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
 	const { effectiveMaxAmount, hasRemaining, remainingValue, remainingPercentage } = useMemo(() => {
 		const total = data.reduce((sum, item) => sum + item.value, 0);
+		const visibleTotal = chartData.reduce((sum, item) => sum + item.value, 0);
 		const maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
-		const hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
-		const remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+		const hasRemainingSegment = mode === "cumulative" && visibleTotal < maxAmountValue;
+		const remaining = hasRemainingSegment ? maxAmountValue - visibleTotal : 0;
 		return {
 			effectiveMaxAmount: maxAmountValue,
 			hasRemaining: hasRemainingSegment,
@@ -308,11 +299,20 @@ const StackedBarChart = (props) => {
 		};
 	}, [
 		data,
+		chartData,
 		mode,
 		maxAmount
 	]);
+	const hasOverflow = hasRemaining && hiddenItems.length > 0;
+	const overflowIndex = data.length;
+	const hiddenColors = useMemo(() => hasOverflow ? generateDiscreteColors(hiddenItems.length, _objectSpread2(_objectSpread2({}, colorGeneratorOptions || {}), {}, { isDarkMode })) : [], [
+		hasOverflow,
+		hiddenItems.length,
+		colorGeneratorOptions,
+		isDarkMode
+	]);
 	const dataWithPercentages = useMemo(() => {
-		return data.map((item, index) => {
+		return chartData.map((item, index) => {
 			var _theme$palette3;
 			const resolvedColor = item.color || autoColorMap.get(item.name) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.sds) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.base) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.ornamentSecondary);
 			return _objectSpread2(_objectSpread2({}, item), {}, {
@@ -325,7 +325,7 @@ const StackedBarChart = (props) => {
 			});
 		});
 	}, [
-		data,
+		chartData,
 		effectiveMaxAmount,
 		autoColorMap,
 		theme
@@ -366,10 +366,16 @@ const StackedBarChart = (props) => {
 			timeoutIds.forEach((id) => window.clearTimeout(id));
 		};
 	}, [dataWithPercentages, remainingPercentage]);
-	const selectedIndicesSet = useMemo(() => new Set(selectedIndices), [selectedIndices]);
-	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = useMemo(() => applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
+	const toChartIndex = useCallback((index) => hasOverflow && index >= visibleCount ? overflowIndex : index, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const hoveredChartIndex = hoveredIndex === null ? null : toChartIndex(hoveredIndex);
+	const selectedChartIndices = useMemo(() => new Set(selectedIndices.map(toChartIndex)), [selectedIndices, toChartIndex]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = useMemo(() => applySelectionStyling(animatedItems, selectedChartIndices, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
 		animatedItems,
-		selectedIndicesSet,
+		selectedChartIndices,
 		selectionBehavior,
 		mode,
 		hasRemaining,
@@ -390,6 +396,7 @@ const StackedBarChart = (props) => {
 		remainingPercentage: displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		remainingOpensMenu: hasOverflow,
 		theme
 	}), [
 		dataWithPercentages,
@@ -402,19 +409,51 @@ const StackedBarChart = (props) => {
 		displayRemainingPercentage,
 		remainingLabel,
 		remainingUnit,
+		hasOverflow,
 		theme
 	]);
-	const handleLegendItemHover = useCallback((_item, index) => {
+	const toLegendIndex = useCallback((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === overflowIndex ? visibleCount : index + 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const fromLegendIndex = useCallback((index) => {
+		if (!hasOverflow || index < visibleCount) return index;
+		return index === visibleCount ? overflowIndex : index - 1;
+	}, [
+		hasOverflow,
+		visibleCount,
+		overflowIndex
+	]);
+	const handleLegendItemHover = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(index);
 		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
-	}, [onLegendItemMouseEnter, data]);
-	const handleLegendItemLeave = useCallback((_item, index) => {
+	}, [
+		onLegendItemMouseEnter,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemLeave = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		setHoveredIndex(null);
 		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
-	}, [onLegendItemMouseLeave, data]);
-	const handleLegendItemClickInternal = useCallback((_item, index) => {
+	}, [
+		onLegendItemMouseLeave,
+		data,
+		fromLegendIndex
+	]);
+	const handleLegendItemClickInternal = useCallback((_item, legendIndex) => {
+		const index = fromLegendIndex(legendIndex);
 		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
-	}, [onLegendItemClick, data]);
+	}, [
+		onLegendItemClick,
+		data,
+		fromLegendIndex
+	]);
 	const handleSelectionChange = useCallback((newSelectedIndices) => {
 		if (!onSelectionChange) return;
 		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
@@ -422,15 +461,29 @@ const StackedBarChart = (props) => {
 	const handleSegmentClick = useCallback((index) => {
 		if (onSegmentClick && data[index]) onSegmentClick(data[index], index);
 		if (!onSelectionChange) return;
-		handleSelectionChange(selectedIndicesSet.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
+		handleSelectionChange(selectedChartIndices.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
 	}, [
 		onSelectionChange,
 		onSegmentClick,
 		data,
 		selectedIndices,
-		selectedIndicesSet,
+		selectedChartIndices,
 		handleSelectionChange
 	]);
+	const remainingMenuItems = useMemo(() => hasOverflow ? hiddenItems.map((item, index) => {
+		var _theme$palette4;
+		return {
+			name: item.name,
+			value: item.value,
+			color: item.color || hiddenColors[index] || (theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.ornamentSecondary),
+			disabled: item.disabled
+		};
+	}) : [], [
+		hasOverflow,
+		hiddenItems,
+		hiddenColors,
+		theme
+	]);
 	const lastVisibleIndex = useMemo(() => {
 		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
 		return -1;
@@ -442,8 +495,8 @@ const StackedBarChart = (props) => {
 		children: [styledItems.map((item, index) => {
 			return renderBarSegment(item, {
 				barHeight,
-				hoveredIndex,
-				selectedIndicesSet,
+				hoveredIndex: hoveredChartIndex,
+				selectedIndicesSet: selectedChartIndices,
 				selectionBehavior,
 				isLast: index === lastVisibleIndex && !hasRemaining,
 				onMouseEnter: () => {
@@ -459,25 +512,31 @@ const StackedBarChart = (props) => {
 				onClick: () => !item.isExiting && handleSegmentClick(item.originalIndex)
 			});
 		}), previousProcessedRef.current.length > 0 && /* @__PURE__ */ jsx(BarSegment, {
-			color: theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.backgroundTertiary,
+			color: theme === null || theme === void 0 || (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.sds) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.base) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.backgroundTertiary,
 			percentage: displayRemainingPercentage,
 			height: barHeight,
 			isLast: true,
-			opacity: 1,
+			opacity: hasOverflow ? getSegmentOpacity(overflowIndex, hoveredChartIndex, selectedChartIndices, selectionBehavior) : 1,
 			disabled: true
 		}, "remaining")]
 	}), showLegend && /* @__PURE__ */ jsx(Legend, {
 		items: legendItems,
+		lastItemMenuItems: remainingMenuItems,
 		showValues: showLegendValues,
 		onItemMouseEnter: handleLegendItemHover,
 		onItemMouseLeave: handleLegendItemLeave,
 		onItemClick: onLegendItemClick ? handleLegendItemClickInternal : void 0,
-		selectedIndices,
-		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
-		hoveredIndex
+		selectedIndices: selectedIndices.map(toLegendIndex),
+		onSelectionChange: onSelectionChange ? (indices) => handleSelectionChange(indices.map(fromLegendIndex)) : void 0,
+		hoveredIndex: hoveredIndex === null ? null : toLegendIndex(hoveredIndex)
 	})] });
 	if (!title) return /* @__PURE__ */ jsx(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: chartContent }));
-	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(StyledBadge, { children: displayBadge })] }), chartContent] }));
+	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(Tag, {
+		label: displayBadge,
+		sdsStyle: "outline",
+		color: "neutral",
+		size: "small"
+	})] }), chartContent] }));
 };
 //#endregion
 export { StackedBarChart as t };

package/dist/shared/index2.cjs.d.ts

@@ -361,6 +361,17 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
    * @default true
    */
   showSequenceViewer?: boolean;
+  /**
+   * Height of the sequence panel, as any CSS length; a number is read as
+   * pixels, and a percentage is of the viewer's own height. The 3D view and the
+   * legend move up to make room for it. Ignored while `showSequenceViewer` is
+   * off.
+   *
+   * Left undefined, the panel takes `max(104px, 30%)` of the viewer, growing to
+   * `max(134px, 32%)` once the viewer is 880px wide or more. A height set here
+   * holds at every width.
+   */
+  sequenceViewerHeight?: number | string;
   /**
    * Show the stats and color scale legend overlaid on the viewer.
    * @default true

package/dist/shared/index2.esm.d.ts

@@ -361,6 +361,17 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
    * @default true
    */
   showSequenceViewer?: boolean;
+  /**
+   * Height of the sequence panel, as any CSS length; a number is read as
+   * pixels, and a percentage is of the viewer's own height. The 3D view and the
+   * legend move up to make room for it. Ignored while `showSequenceViewer` is
+   * off.
+   *
+   * Left undefined, the panel takes `max(104px, 30%)` of the viewer, growing to
+   * `max(134px, 32%)` once the viewer is 880px wide or more. A height set here
+   * holds at every width.
+   */
+  sequenceViewerHeight?: number | string;
   /**
    * Show the stats and color scale legend overlaid on the viewer.
    * @default true

package/dist/shared/index4.cjs.d.ts

@@ -64,7 +64,7 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
    * cannot disappear.
-   * @default 16
+   * @default 8
    */
   barHeight?: number;
   /**
@@ -139,6 +139,12 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
    * between it and the sum of the data is drawn as the Remaining segment.
    */
   maxAmount?: number;
+  /**
+   * Cumulative mode only. How many items are drawn as their own segment. The
+   * rest fold into the Remaining segment, whose legend item opens a menu
+   * listing them.
+   */
+  maxItems?: number;
   /**
    * Name of the grey gap segment in cumulative mode.
    * @default "Remaining"

package/dist/shared/index4.esm.d.ts

@@ -64,7 +64,7 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Height of the bar in pixels. Values below 1 are clamped to 1, so the bar
    * cannot disappear.
-   * @default 16
+   * @default 8
    */
   barHeight?: number;
   /**
@@ -139,6 +139,12 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
    * between it and the sum of the data is drawn as the Remaining segment.
    */
   maxAmount?: number;
+  /**
+   * Cumulative mode only. How many items are drawn as their own segment. The
+   * rest fold into the Remaining segment, whose legend item opens a menu
+   * listing them.
+   */
+  maxItems?: number;
   /**
    * Name of the grey gap segment in cumulative mode.
    * @default "Remaining"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -121,7 +121,7 @@
     "namespace-check": "tsc --p tsconfig-namespace-check.json"
   },
   "peerDependencies": {
-    "@czi-sds/components": "^24.0.0",
+    "@czi-sds/components": "^25.0.0",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^9.0.0",
     "@phosphor-icons/react": "^2.1.10",
@@ -157,5 +157,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "af9ead042355f832da2c98e7dc3ecaafd1ea1664"
+  "gitHead": "d38c18e3aca773081cb5c0413dbfefb10da774b8"
 }