@adaptabletools/adaptable 22.1.1-canary.1 → 23.0.0-canary.0

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,14 +1,21 @@
 import kebabCase from '../Utilities/utils/kebabCase';
 import { resolveDisplayFormat } from '../AdaptableState/Common/AdaptableFormatPresets';
 import merge from '../Utilities/utils/merge';
-import { convertAdaptableStyleToCSS, getVariableColor, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
+import { convertAdaptableStyleToCSS, getVariableColor, hasCellBoxStyle, hasCellFontStyle, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import tinycolor from 'tinycolor2';
 import UIHelper from '../View/UIHelper';
 import { getPercentBarRendererForColumn } from './cellRenderers/PercentBarRenderer';
 import { getBadgeRendererForColumn } from './cellRenderers/BadgeRenderer';
+import { getBulletChartRendererForColumn } from './cellRenderers/BulletChartRenderer';
+import { getRangeBarRendererForColumn } from './cellRenderers/RangeBarRenderer';
+import { getRatingRendererForColumn } from './cellRenderers/RatingRenderer';
+import { shouldRenderStyledColumnOnRow } from './cellRenderers/shouldRenderStyledColumnOnRow';
+import { findIconStyleMappingForValue, getIconRendererForColumn, } from './cellRenderers/IconRenderer';
 import Helper from '../Utilities/Helpers/Helper';
+import { getRuleAlertProperties } from '../Utilities/Helpers/ScheduledAlertHelper';
+import { isNegativeZeroCentredBand, expandGradientCellRanges, gradientStyleRangeLookupValueType, DEFAULT_GRADIENT_MIN_ALPHA, DEFAULT_GRADIENT_MAX_ALPHA, } from '../Utilities/Helpers/StyledColumnGradientHelper';
 import { AdaptableNumberEditor, AdaptableReactNumberEditor } from './editors/AdaptableNumberEditor';
 import { AdaptableDateEditor, AdaptableReactDateEditor } from './editors/AdaptableDateEditor';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
@@ -18,7 +25,38 @@ import { AdaptableFilterHandler } from './AdaptableFilterHandler';
 import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
 import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 import { errorOnce } from './AdaptableLogger';
-import { isWeightedAverageAggFuncName, } from '../AdaptableState/Common/AggregationColumns';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { isParameterizedAggFuncName } from '../Aggregation/ParameterizedAggregationRegistry';
+/**
+ * CSS property keys produced by `convertAdaptableStyleToCSS` from a
+ * `CellFontStyle` slice. Used to strip Format-Column-derived font CSS
+ * when a Styled Column claims the Font slot.
+ */
+const FONT_CSS_KEYS = [
+    'color',
+    'fontWeight',
+    'fontStyle',
+    'fontSize',
+    'textDecoration',
+    'textAlign',
+];
+/**
+ * CSS property keys produced by `convertAdaptableStyleToCSS` from a
+ * `CellBoxStyle` slice. Used to strip Format-Column-derived cell-box CSS
+ * when a Styled Column claims the Cell slot.
+ */
+const CELL_BOX_CSS_KEYS = [
+    'backgroundColor',
+    'borderColor',
+    'borderRadius',
+];
+const stripCssKeys = (style, keys) => {
+    const out = { ...style };
+    keys.forEach((k) => delete out[k]);
+    return out;
+};
+const stripFontCssKeys = (style) => stripCssKeys(style, FONT_CSS_KEYS);
+const stripCellBoxCssKeys = (style) => stripCssKeys(style, CELL_BOX_CSS_KEYS);
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -183,8 +221,6 @@ export class AgGridColumnAdapter {
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
             const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, { target: 'cell' });
-            const quickSearchTextMatchStyle = this.getQuickSearchTextMatchStyle();
-            const quickSearchCurrentTextMatchStyle = this.getQuickSearchCurrentTextMatchStyle();
             const cellClass = (params) => {
                 const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, abColumn.columnId);
                 if (!gridCell.column) {
@@ -213,6 +249,7 @@ export class AgGridColumnAdapter {
                     return excelStyleClasses.length ? excelStyleClasses : null;
                 }
                 const isQuickSearchActive = this.isQuickSearchActive(gridCell);
+                const isServerSideRowModel = this.adaptableApi.gridApi.getAgGridRowModelType() === 'serverSide';
                 const editableClassName = this.getEditableCellClass(gridCell, params);
                 const readonlyClassName = this.getReadonlyCellClass(gridCell, params);
                 const editedClassName = this.getEditedCellClass(gridCell, params);
@@ -228,9 +265,7 @@ export class AgGridColumnAdapter {
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
                     //  isQuickSearchActive && hasQuickSearchStyleClassName ? quickSearchStyleClassName : null,
-                    isQuickSearchActive && (quickSearchTextMatchStyle || quickSearchCurrentTextMatchStyle)
-                        ? 'ab-QuickSearchFind'
-                        : null,
+                    isQuickSearchActive && !isServerSideRowModel ? 'ab-QuickSearchFind' : null,
                     editableClassName,
                     readonlyClassName,
                     editedClassName,
@@ -327,29 +362,28 @@ export class AgGridColumnAdapter {
             return headerClass;
         });
     }
+    quickSearchStyleToDynamicCssVars(style) {
+        if (!style) {
+            return undefined;
+        }
+        return Object.entries(style).reduce((acc, [key, value]) => {
+            // needed as AG-Grid vanilla turns all CSS props to kebab, while AG Grid React does not
+            // @ts-ignore
+            acc[`--ab-dynamic-${kebabCase(key)}`] = value;
+            return acc;
+        }, {});
+    }
     setupColumnCellStyle({ col }) {
         this.setColDefProperty(col, 'cellStyle', (userCellStyle) => {
-            const quickSearchStyle = this.getQuickSearchCellStyle();
-            const quickSearchTextMatchStyle = this.getQuickSearchTextMatchStyle();
-            const quickSearchCurrentTextMatchStyle = this.getQuickSearchCurrentTextMatchStyle();
-            const textMatchStyle = quickSearchTextMatchStyle
-                ? Object.entries(quickSearchTextMatchStyle).reduce((acc, [key, value]) => {
-                    // needed as AG-Grid vanilla turns all CSS props
-                    // to kebab, while AG Grid React does not
-                    // @ts-ignore
-                    acc[`--ab-dynamic-${kebabCase(key)}`] = value;
-                    return acc;
-                }, {})
-                : undefined;
-            const currentTextMatchStyle = quickSearchCurrentTextMatchStyle
-                ? Object.entries(quickSearchCurrentTextMatchStyle).reduce((acc, [key, value]) => {
-                    // @ts-ignore
-                    acc[`--ab-dynamic-${kebabCase(key)}`] = value;
-                    return acc;
-                }, {})
-                : undefined;
-            const hasQuickSearchStyle = quickSearchStyle != undefined || quickSearchCurrentTextMatchStyle != undefined;
             const cellStyle = (params) => {
+                const quickSearchStyle = this.getQuickSearchCellStyle();
+                const quickSearchTextMatchStyle = this.getQuickSearchTextMatchStyle();
+                const quickSearchCurrentTextMatchStyle = this.getQuickSearchCurrentTextMatchStyle();
+                const textMatchStyle = this.quickSearchStyleToDynamicCssVars(quickSearchTextMatchStyle);
+                const currentTextMatchStyle = this.quickSearchStyleToDynamicCssVars(quickSearchCurrentTextMatchStyle);
+                const hasQuickSearchStyle = quickSearchStyle != undefined ||
+                    quickSearchTextMatchStyle != undefined ||
+                    quickSearchCurrentTextMatchStyle != undefined;
                 const columnId = params.column.getColId();
                 const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, columnId);
                 if (!gridCell || !gridCell.column) {
@@ -493,8 +527,20 @@ export class AgGridColumnAdapter {
                 if (styledColumn.PercentBarStyle) {
                     return getPercentBarRendererForColumn(styledColumn, abColumn, this.adaptableApi);
                 }
+                if (styledColumn.BulletChartStyle) {
+                    return getBulletChartRendererForColumn(styledColumn, abColumn, this.adaptableApi);
+                }
+                if (styledColumn.RangeBarStyle) {
+                    return getRangeBarRendererForColumn(styledColumn, abColumn, this.adaptableApi);
+                }
+                if (styledColumn.RatingStyle) {
+                    return getRatingRendererForColumn(styledColumn, abColumn, this.adaptableApi);
+                }
+                if (styledColumn.IconStyle) {
+                    return getIconRendererForColumn(styledColumn, abColumn, this.adaptableApi);
+                }
                 if (styledColumn.BadgeStyle) {
-                    return getBadgeRendererForColumn(styledColumn.BadgeStyle, abColumn, this.adaptableApi);
+                    return getBadgeRendererForColumn(styledColumn, abColumn, this.adaptableApi);
                 }
                 if (styledColumn.SparklineStyle) {
                     return 'agSparklineCellRenderer';
@@ -519,38 +565,149 @@ export class AgGridColumnAdapter {
         let hasTooptip = false;
         this.setColDefProperty(col, 'tooltipValueGetter', () => {
             const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(colId);
-            if (styledColumn &&
-                !styledColumn.IsSuspended &&
-                styledColumn.PercentBarStyle &&
-                styledColumn.PercentBarStyle.ToolTipText) {
+            if (!styledColumn || styledColumn.IsSuspended) {
+                return undefined;
+            }
+            // Icon Style has its own tooltip vocabulary (`'CellValue'` /
+            // `'IconDescription'`) so we handle it before falling through to the
+            // numeric tooltip branch.
+            if (styledColumn.IconStyle &&
+                !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType)) {
+                const iconTokens = styledColumn.IconStyle.ToolTipText ?? [];
+                if (iconTokens.length === 0) {
+                    return undefined;
+                }
                 hasTooptip = true;
-                if (styledColumn?.PercentBarStyle) {
-                    return (params) => {
-                        const min = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
-                        const max = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
-                        const textOptions = styledColumn.PercentBarStyle.ToolTipText;
-                        let returnValue = '';
-                        if (textOptions.includes('CellValue')) {
-                            returnValue = params.value;
-                        }
-                        if (textOptions.includes('PercentageValue')) {
-                            let percentageValue;
-                            if (styledColumn.PercentBarStyle.ColumnComparison) {
-                                const absMax = Math.abs(max);
-                                percentageValue = absMax === 0 ? 0 : (Number(params.value) / absMax) * 100;
-                            }
-                            else {
-                                const clampedValue = Helper.clamp(params.value, min, max);
-                                percentageValue = ((clampedValue - min) / (max - min)) * 100;
-                            }
-                            returnValue += ' ' + `(${percentageValue.toFixed(0)}%)`;
+                return (params) => {
+                    const parts = [];
+                    if (iconTokens.includes('CellValue')) {
+                        parts.push(String(params.value ?? ''));
+                    }
+                    if (iconTokens.includes('IconDescription')) {
+                        const matched = findIconStyleMappingForValue(styledColumn.IconStyle, params.value);
+                        if (matched?.Description) {
+                            parts.push(matched.Description);
                         }
-                        return returnValue ? returnValue : params.value;
-                    };
+                    }
+                    const trimmed = parts.filter(Boolean).join(' · ').trim();
+                    return trimmed ? trimmed : String(params.value ?? '');
+                };
+            }
+            // Rating: `PercentageValue` is `clamp(value, 0, Max) / Max` (not the
+            // column min/max span used by Gradient / Percent Bar).
+            if (styledColumn.RatingStyle) {
+                const ratingToolTip = styledColumn.RatingStyle.ToolTipText ?? [];
+                if (ratingToolTip.length === 0) {
+                    return undefined;
                 }
+                hasTooptip = true;
+                const ratingMax = styledColumn.RatingStyle.Max ?? 5;
+                return (params) => {
+                    let returnValue = '';
+                    if (ratingToolTip.includes('CellValue')) {
+                        returnValue = String(params.value ?? '');
+                    }
+                    if (ratingToolTip.includes('PercentageValue') && ratingMax > 0) {
+                        const n = Number(params.value);
+                        if (!isNaN(n)) {
+                            const clamped = Helper.clamp(n, 0, ratingMax);
+                            const percentageValue = (clamped / ratingMax) * 100;
+                            const pct = `${percentageValue.toFixed(0)}%`;
+                            returnValue = returnValue ? `${returnValue} (${pct})` : pct;
+                        }
+                    }
+                    const trimmed = returnValue.trim();
+                    return trimmed ? trimmed : String(params.value ?? '');
+                };
+            }
+            // Percent Bar, Bullet Chart, Gradient and Range Bar may all expose
+            // `ToolTipText: CellTextOptions`. Range Bar resolves min/max per row
+            // (from `RangeBarStyle.Min` / `RangeBarStyle.Max`) so we treat it
+            // separately rather than re-using the column-wide numeric helpers.
+            const tooltipStyle = styledColumn.PercentBarStyle ??
+                styledColumn.BulletChartStyle ??
+                styledColumn.GradientStyle ??
+                styledColumn.RangeBarStyle;
+            const textOptions = tooltipStyle?.ToolTipText;
+            if (!tooltipStyle || !textOptions || textOptions.length === 0) {
+                return undefined;
             }
+            hasTooptip = true;
+            return (params) => {
+                const isRangeBar = tooltipStyle === styledColumn.RangeBarStyle;
+                let min;
+                let max;
+                if (isRangeBar) {
+                    const rangeStyle = styledColumn.RangeBarStyle;
+                    min = this.resolveRangeBarBound(rangeStyle.Min, abColumn, params.node);
+                    max = this.resolveRangeBarBound(rangeStyle.Max, abColumn, params.node);
+                }
+                else {
+                    min = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+                    max = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
+                }
+                let returnValue = '';
+                if (textOptions.includes('CellValue')) {
+                    returnValue = String(params.value ?? '');
+                }
+                if (textOptions.includes('PercentageValue') &&
+                    min != undefined &&
+                    max != undefined) {
+                    let percentageValue;
+                    if (styledColumn.PercentBarStyle?.ColumnComparison) {
+                        const absMax = Math.abs(max);
+                        percentageValue = absMax === 0 ? 0 : (Number(params.value) / absMax) * 100;
+                    }
+                    else {
+                        const scaleSpan = max - min;
+                        const clamped = Helper.clamp(Number(params.value), min, max);
+                        percentageValue =
+                            scaleSpan === 0 ? 0 : ((clamped - min) / scaleSpan) * 100;
+                    }
+                    returnValue += ` (${percentageValue.toFixed(0)}%)`;
+                }
+                const trimmed = returnValue.trim();
+                return trimmed ? trimmed : String(params.value ?? '');
+            };
         });
     }
+    /**
+     * Resolves a Range Bar bound (number / column id / Col-Min / Col-Max /
+     * Col-Avg / Col-Median) into a concrete numeric value for the supplied row.
+     * Mirrors the resolution logic in `RangeBarRenderer.resolveBoundValue` and
+     * is used by the tooltip path. Returns `undefined` when the bound cannot
+     * be resolved (e.g. unknown column id or non-numeric source value).
+     */
+    resolveRangeBarBound(bound, abColumn, rowNode) {
+        if (bound == undefined) {
+            return undefined;
+        }
+        if (typeof bound === 'number') {
+            return bound;
+        }
+        const internalApi = this.adaptableApi.styledColumnApi.internalApi;
+        if (bound === 'Col-Min') {
+            return internalApi.getMinValueForNumericColumn(abColumn);
+        }
+        if (bound === 'Col-Max') {
+            return internalApi.getMaxValueForNumericColumn(abColumn);
+        }
+        if (bound === 'Col-Avg') {
+            return internalApi.getAvgValueForNumericColumn(abColumn);
+        }
+        if (bound === 'Col-Median') {
+            return internalApi.getMedianValueForNumericColumn(abColumn);
+        }
+        if (typeof bound === 'string') {
+            if (!this.adaptableApi.columnApi.isColumnInGrid(bound)) {
+                return undefined;
+            }
+            const raw = this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, bound);
+            const num = typeof raw === 'number' ? raw : Number(raw);
+            return isNaN(num) ? undefined : num;
+        }
+        return undefined;
+    }
     setupColumnQuickFilterText({ col, abColumn }) {
         this.setColDefProperty(col, 'getQuickFilterText', (userGetQuickFilterText) => {
             if (userGetQuickFilterText) {
@@ -571,7 +728,7 @@ export class AgGridColumnAdapter {
             if (!abColumn.availableAggregationFunctions) {
                 return undefined;
             }
-            return abColumn.availableAggregationFunctions.filter((func) => !isWeightedAverageAggFuncName(func));
+            return abColumn.availableAggregationFunctions.filter((func) => !isParameterizedAggFuncName(func));
             // .filter((func) => func !== ONLY_AGG_FN_NAME);
         });
     }
@@ -1039,7 +1196,7 @@ export class AgGridColumnAdapter {
     }
     getAlertCellClass(gridCell, params) {
         const alert = this.adaptableApi.alertApi.internalApi.getAdaptableAlertWithHighlightCell(gridCell.column.columnId, params.node);
-        const highlightCell = alert?.alertDefinition?.AlertProperties?.HighlightCell;
+        const highlightCell = getRuleAlertProperties(alert?.alertDefinition)?.HighlightCell;
         return typeof highlightCell === 'object' && highlightCell?.ClassName
             ? highlightCell?.ClassName
             : null;
@@ -1165,28 +1322,70 @@ export class AgGridColumnAdapter {
      * This function decides when the two can be merged.
      */
     getFormatColumnAndStyledColumnCellStyle(column, params) {
-        let styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
-        let styledColumnStyle = {};
-        if (styledColumn && !styledColumn?.IsSuspended) {
-            const styledCellStyle = this.getStyledColumnStyle(styledColumn, column, params);
-            // for percentbar we want to merge
-            if (styledColumn.PercentBarStyle || styledColumn.BadgeStyle || styledColumn.GradientStyle) {
-                styledColumnStyle = styledCellStyle;
-            }
-            else {
-                // For other ones wo do not want to merge
-                return styledCellStyle;
-            }
-        }
+        const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+        const styledColumnIsActive = !!styledColumn && !styledColumn?.IsSuspended;
+        // Styled-column-derived cell style (e.g. Gradient backgroundColor, plus
+        // any Font/Cell slot the renderer chose to expose).
+        const styledColumnStyle = styledColumnIsActive
+            ? this.getStyledColumnStyle(styledColumn, column, params)
+            : {};
+        // Format Column styles for this cell (may be empty).
         const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
             target: 'cell',
         });
-        // background color of styledColumn.GradientStyle has precedence and wins over FormatColumn
+        let formatColumnStyle = this.getFormatColumnCellStyle(column, activeFormatColumnsWithStyle, params);
+        // Per-slice precedence rule: when the Styled Column claims a slice
+        // (via its `Font` or `Cell` slot), Format Column properties belonging
+        // to that slice are stripped and never applied. When the slice is not
+        // claimed, Format Column inherits naturally.
+        if (styledColumnIsActive) {
+            if (this.styledColumnClaimsFontStyle(styledColumn, column)) {
+                formatColumnStyle = stripFontCssKeys(formatColumnStyle);
+            }
+            if (this.styledColumnClaimsCellBoxStyle(styledColumn, column)) {
+                formatColumnStyle = stripCellBoxCssKeys(formatColumnStyle);
+            }
+        }
+        // Styled Column wins over Format Column for any overlapping property.
         return {
-            ...this.getFormatColumnCellStyle(column, activeFormatColumnsWithStyle, params),
+            ...formatColumnStyle,
             ...styledColumnStyle,
         };
     }
+    /**
+     * Returns true when the active Styled Column declares a `Font` slot
+     * (and therefore claims all Font-slice properties on this column).
+     *
+     * Note: Badge claims **only** `Alignment` from the Font slice — pill
+     * typography is owned per-pill via `PillStyle`, never inherited from a
+     * Format Column. Stripping the whole Font slice when Badge declares
+     * `Alignment` keeps the precedence rule simple and is fine in practice
+     * because Format-Column-derived font styles don't apply to flex rows of
+     * pills anyway.
+     */
+    styledColumnClaimsFontStyle(styledColumn, abColumn) {
+        const iconFontClaims = !!styledColumn?.IconStyle &&
+            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType) &&
+            hasCellFontStyle(styledColumn.IconStyle.Font);
+        return (hasCellFontStyle(styledColumn?.GradientStyle?.Font) ||
+            hasCellFontStyle(styledColumn?.PercentBarStyle?.Font) ||
+            hasCellFontStyle(styledColumn?.BulletChartStyle?.Font) ||
+            hasCellFontStyle(styledColumn?.BadgeStyle?.Font) ||
+            iconFontClaims);
+    }
+    /**
+     * Returns true when the active Styled Column declares a `Cell` slot
+     * (and therefore claims all Cell-slice properties on this column).
+     */
+    styledColumnClaimsCellBoxStyle(styledColumn, abColumn) {
+        const iconCellClaims = !!styledColumn?.IconStyle &&
+            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType) &&
+            hasCellBoxStyle(styledColumn.IconStyle.Cell);
+        return (hasCellBoxStyle(styledColumn?.RatingStyle?.Cell) ||
+            hasCellBoxStyle(styledColumn?.SparklineStyle?.Cell) ||
+            hasCellBoxStyle(styledColumn?.BadgeStyle?.Cell) ||
+            iconCellClaims);
+    }
     getFormatColumnHeaderStyle(column, params) {
         if (params.columnGroup) {
             // FormatColumns are not supported in column groups
@@ -1205,28 +1404,13 @@ export class AgGridColumnAdapter {
         if (params.value == undefined || params.value === '') {
             return style;
         }
-        let colValue = params.value;
-        if (this.adaptableApi.gridApi.isGroupRowNode(params.node)) {
-            return style;
-            // if (styledColumn.IncludeGroupedRows) {
-            //   const minColumnValue =
-            //     this.adaptableApi.styledColumnApi.internalApi.getMinValueForNumericColumn(abColumn);
-            //   const maxColumnValue =
-            //     this.adaptableApi.styledColumnApi.internalApi.getMaxValueForNumericColumn(abColumn);
-            //   /**
-            //    * Color should always be in bounds, it should not overflow.
-            //    * If the value is out of range, it shoul set the maximum/minimum color.
-            //    */
-            //   colValue = clamp(params.value, minColumnValue, maxColumnValue);
-            // } else {
-            //   return style;
-            // }
-        }
-        if (styledColumn.BadgeStyle &&
-            !styledColumn.BadgeStyle.RowScope?.ExcludeSummaryRows &&
-            this.adaptableApi.gridApi.isSummaryNode(params?.node)) {
+        // Row-kind filtering: defer to the shared row-scope helper so the
+        // cellStyle path (Gradient background, Font/Cell slots) follows the
+        // same `StyledColumn.RowScope` rules as every cellRenderer.
+        if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, this.adaptableApi)) {
             return style;
         }
+        let colValue = params.value;
         if (gradientStyle) {
             const min = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, colValue);
             const max = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, colValue);
@@ -1236,28 +1420,77 @@ export class AgGridColumnAdapter {
                 cellBackColor = gradientStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = this.adaptableApi.styledColumnApi.internalApi.findRangeForColumn(gradientStyle.CellRanges, abColumn, gradientStyle.RangeValueType, colValue);
+                const matchingRange = this.adaptableApi.styledColumnApi.internalApi.findRangeForColumn(expandGradientCellRanges(gradientStyle), abColumn, gradientStyleRangeLookupValueType(gradientStyle), colValue);
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
-                    reverseGradient = matchingRange.ReverseGradient;
+                    // Flip the alpha ramp when (a) it's the negative band of a
+                    // ZeroCentred diverging gradient, OR (b) the user has explicitly
+                    // marked this band as `ReverseGradient` (lower-is-darker).
+                    reverseGradient =
+                        (!!gradientStyle.ZeroCentred && isNegativeZeroCentredBand(matchingRange)) ||
+                            !!matchingRange.ReverseGradient;
                 }
             }
-            const increase = Math.abs(max - min);
-            const percentage = ((colValue - min) / increase) * 100;
-            let alpha = Number((percentage / 100).toPrecision(2));
+            const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+            const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+            const lo = Math.min(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
+            const hi = Math.max(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
+            const span = Math.abs(max - min);
+            let t = span === 0 ? 0.5 : (Number(colValue) - min) / span;
+            t = Helper.clamp(t, 0, 1);
             if (reverseGradient) {
-                alpha = 1 - alpha;
+                t = 1 - t;
             }
+            let alpha = lo + t * (hi - lo);
+            alpha = Number(alpha.toPrecision(4));
             const preparedColor = getVariableColor(cellBackColor);
-            // if no range match, do not apply color (black in this case)
             if (cellBackColor) {
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
+                const bg = tinycolor(preparedColor).setAlpha(alpha);
+                style.backgroundColor = bg.toRgbString();
+                if (gradientStyle.AutoContrastText) {
+                    style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+                }
             }
         }
         if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
             style.paddingTop = 0;
             style.paddingBottom = 0;
         }
+        // Per-slice styling: each Styled Column type can opt into a Font/Cell
+        // slot (declared on the *Style interface) that flows through to cell
+        // CSS. The slots also act as a "claim" against Format Columns — see
+        // `getFormatColumnAndStyledColumnCellStyle`.
+        //
+        // Order is important: we apply the Font slot BEFORE the auto-contrast
+        // override (recomputed below) so that auto-contrast wins on a per-cell
+        // basis when a Gradient cell has a tinted background, even if the user
+        // also set `Font.ForeColor` as a baseline.
+        const autoContrastColor = gradientStyle?.AutoContrastText && style.color ? style.color : undefined;
+        const iconStyleFontApplies = styledColumn.IconStyle &&
+            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
+        const fontSlot = styledColumn.GradientStyle?.Font ??
+            styledColumn.PercentBarStyle?.Font ??
+            styledColumn.BulletChartStyle?.Font ??
+            (iconStyleFontApplies ? styledColumn.IconStyle?.Font : undefined);
+        // Badge's Font slot intentionally skipped here: only `Alignment` is
+        // meaningful on Badge cells and the renderer applies it as flex
+        // `justify-content` on the wrapper (cell `text-align` has no effect on
+        // flex rows of pills). Still claimed for the precedence rule above.
+        if (fontSlot) {
+            style = { ...style, ...convertAdaptableStyleToCSS(fontSlot) };
+        }
+        const iconStyleCellApplies = styledColumn.IconStyle &&
+            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
+        const cellSlot = styledColumn.RatingStyle?.Cell ??
+            styledColumn.SparklineStyle?.Cell ??
+            styledColumn.BadgeStyle?.Cell ??
+            (iconStyleCellApplies ? styledColumn.IconStyle?.Cell : undefined);
+        if (cellSlot) {
+            style = { ...style, ...convertAdaptableStyleToCSS(cellSlot) };
+        }
+        if (autoContrastColor) {
+            style.color = autoContrastColor;
+        }
         return style;
     }
     getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
@@ -1283,7 +1516,7 @@ export class AgGridColumnAdapter {
     getAlertCellStyle(gridCell, params) {
         const alert = this.adaptableApi.alertApi.internalApi.getAdaptableAlertWithHighlightCell(gridCell.column.columnId, params.node);
         if (alert) {
-            const highlightCell = alert.alertDefinition.AlertProperties.HighlightCell;
+            const highlightCell = getRuleAlertProperties(alert.alertDefinition)?.HighlightCell;
             if (typeof highlightCell === 'object') {
                 return convertAdaptableStyleToCSS(highlightCell);
             }

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -9,6 +9,7 @@ export declare class AgGridMenuAdapter {
     private get adaptableApi();
     destroy(): void;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    private injectParameterizedAggregationColumnMenuItems;
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
@@ -32,6 +33,7 @@ export declare class AgGridMenuAdapter {
     private buildColumnMenuDefaultStructure;
     private getColumnFilterColumnMenuStructure;
     private getLayoutColumnMenuStructure;
+    private buildSelectColumnMenuGroup;
     private getStyledColumnColumnMenuStructure;
     private mapAdaptableMenuItemToSystemMenuItems;
     private createAdaptableColumnMenuItems;