@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/View/Components/Popups/Utilities.js

@@ -1,4 +1,4 @@
-import { clamp } from '../../../Utilities/Helpers/Helper';
+import { clamp } from '../../../Utilities/Extensions/NumberExtensions';
 export const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,7 +1,6 @@
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
-export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
 export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const COLUMN_FILTER_WINDOW = "COLUMN_FILTER_WINDOW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -4,7 +4,6 @@ import { TransposedPopup } from '../../../Layout/TransposedPopup';
 import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
 export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -65,7 +65,7 @@ export const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({
                                 ...props.predicate,

package/src/View/Components/RangesComponent.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { ZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -14,7 +15,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     minMaxRangeValues: {
         min: number;
         max: number;
-    };
+    } | null;
     disabled?: boolean;
     /**
      * When true, the user may delete every band so `ranges` becomes `[]`.
@@ -34,8 +35,8 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
      * `onApplyZeroCentred` and optional `zeroCentred` for the current colours.
      */
     showZeroCentredTab?: boolean;
-    zeroCentred?: GradientZeroCentredColors;
-    onApplyZeroCentred?: (zc: GradientZeroCentredColors) => void;
+    zeroCentred?: ZeroCentredColors;
+    onApplyZeroCentred?: (zc: ZeroCentredColors) => void;
     /**
      * When true, render a per-range "Reverse Gradient" toggle. Only meaningful
      * for Gradient Style (the renderer flips the alpha ramp within the band so
@@ -45,7 +46,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
+    rangesType: 'None' | 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
@@ -60,9 +61,12 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     setRangeColMin(range: CellColorRange): void;
     setRangeColMax(range: CellColorRange): void;
     addRange(): void;
-    changeColumnComparisonMinValue(value: number): void;
-    private onMinColumnSelectedChanged;
-    changeColumnComparisonMaxValue(value: number): void;
-    private onMaxColumnSelectedChanged;
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    private splitFullSpanRangeAtMidpoint;
+    setColumnComparisonMin(value: number | string | undefined): void;
+    setColumnComparisonMax(value: number | string | undefined): void;
     changeColumnComparisonColor(value: string): void;
 }

package/src/View/Components/RangesComponent.js

@@ -1,28 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { ColorPicker } from '../../components/ColorPicker';
-import clamp from '../../Utilities/utils/clamp';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
+import { ButtonNew } from './Buttons/ButtonNew';
 import { getGraySwatchColor } from '../UIHelper';
 import { ColumnSelector } from './Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
 import { Box, Flex } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
+import { InputGroup } from '../../components/InputGroup';
+import { Icon } from '../../components/icons';
+import HelpBlock from '../../components/HelpBlock';
 const DEFAULT_ZERO_CENTRED_COLORS = {
     NegativeColor: 'rgba(220, 53, 69, 0.55)',
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
 };
+const hasConfiguredRanges = (ranges) => (ranges?.length ?? 0) > 0;
 /**
- * Decide which of the four range tabs should be active given the current props.
+ * Decide which range tab should be active given the current props.
  *
  * Precedence:
  *  1. `columnComparison` set       → Column Comparison tab
  *  2. Zero Centred set + supported → Zero Centred tab
- *  3. `rangeValueType === 'Percentage'` → Percentage Range tab
- *  4. otherwise                    → Number Range tab (default for new styles)
+ *  3. `allowEmptyRanges` + no bands → No Ranges tab
+ *  4. `rangeValueType === 'Percentage'` → Percentage Range tab
+ *  5. otherwise                    → Number Range tab (default for new styles)
  */
 function deriveInitialRangesType(props) {
     if (props.columnComparison) {
@@ -31,34 +38,58 @@ function deriveInitialRangesType(props) {
     if (props.showZeroCentredTab && props.zeroCentred) {
         return 'ZeroCentred';
     }
+    if (props.allowEmptyRanges && !hasConfiguredRanges(props.ranges)) {
+        return 'None';
+    }
     return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
 }
+/**
+ * A single Column Comparison bound (Min or Max). The user picks whether the
+ * bound is a fixed `Value` (a number applied to every row) or a `Column`
+ * (read from another column and evaluated per row). The underlying
+ * `ColumnComparison.MinValue`/`MaxValue` stays a `number | string` — number =>
+ * fixed value, non-numeric string => columnId — so the type is derived from the
+ * stored value via `isNaN`, mirroring how the runtime resolver discriminates it.
+ */
+const ColumnComparisonBoundInput = ({ value, disabled, onChange }) => {
+    const [type, setType] = React.useState(value != null && value !== '' && isNaN(Number(value)) ? 'column' : 'value');
+    const typeOptions = [
+        {
+            value: 'value',
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "edit" }), _jsx(Box, { className: "twa:ml-2", children: "Value" })] })),
+        },
+        {
+            value: 'column',
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "columns" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
+        },
+    ];
+    const editor = type === 'value' ? (_jsx(NumberInput, { className: "twa:w-full", disabled: disabled, type: "number", value: value != null && !isNaN(Number(value)) ? Number(value) : '', onChange: (v) => onChange(v) })) : (_jsx(ColumnSelector, { disabled: disabled, type: "number", value: value != null && isNaN(Number(value)) ? String(value) : undefined, onChange: (columnId) => onChange(columnId || undefined) }));
+    // The select trigger, the `NumberInput` (`.ab-Input`) and the `ColumnSelector`
+    // (a Combobox that does NOT forward `className`, rendering its border on a
+    // `[data-slot="input-group"]` wrapper) all hard-code `rounded-input`, so the
+    // InputGroup CSS-variable joining has no effect. We flatten the touching
+    // corners directly (important, to beat `rounded-input`) and overlap the shared
+    // border via `-ml-px` so the two controls read as a single block. The editor
+    // side targets both inner border elements through descendant arbitrary
+    // variants and forces them to fill the flex item.
+    const editorWrapperClassName = [
+        'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
+        'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
+        'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
+    ].join(' ');
+    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[20rem]", children: [_jsx(SingleSelect, { className: "twa:w-[120px] twa:max-w-none twa:shrink-0 twa:box-border twa:rounded-r-none!", disabled: disabled, value: type, items: typeOptions, onValueChange: (next) => {
+                    // Switching type clears the stale bound so a fixed number can never
+                    // be misread as a columnId (or vice versa).
+                    onChange(undefined);
+                    setType(next);
+                } }), _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+};
 export class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = { rangesType: deriveInitialRangesType(props) };
     }
     render() {
-        let comparisonMinValueNumber = this.props.columnComparison != null &&
-            this.props.columnComparison.MinValue != null &&
-            !isNaN(Number(this.props.columnComparison.MinValue))
-            ? Number(this.props.columnComparison.MinValue)
-            : '';
-        let comparisonMaxValueNumber = this.props.columnComparison != null &&
-            this.props.columnComparison.MaxValue != null &&
-            !isNaN(Number(this.props.columnComparison.MaxValue))
-            ? Number(this.props.columnComparison.MaxValue)
-            : '';
-        let comparisonMinValueColumnId = this.props.columnComparison != null &&
-            this.props.columnComparison.MinValue != null &&
-            isNaN(Number(this.props.columnComparison.MinValue))
-            ? String(this.props.columnComparison.MinValue)
-            : undefined;
-        let comparisonMaxValueColumnId = this.props.columnComparison != null &&
-            this.props.columnComparison.MaxValue != null &&
-            isNaN(Number(this.props.columnComparison.MaxValue))
-            ? String(this.props.columnComparison.MaxValue)
-            : undefined;
         let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
             ? this.props.columnComparison.Color
             : undefined;
@@ -66,38 +97,55 @@ export class RangesComponent extends React.Component {
         // vs Percentage Range tab) instead of an inline radio. The inner content
         // is shared between the two range tabs and parameterised on this flag.
         const isRangeValueTypeNumber = this.state.rangesType === 'NumberRange';
-        const renderRangesContent = () => (_jsxs(_Fragment, { children: [this.props.ranges?.map((range, index, list) => (_jsxs(Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Col Min" })), _jsx(NumberInput, { disabled: this.props.disabled ||
-                                        range.Min === 'Col-Min' ||
-                                        (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
-                                        this.changeRangeMin(index, value);
-                                    }, className: "twa:mr-2" })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Col Max" })), _jsx(NumberInput, { value: range.Max, disabled: this.props.disabled ||
-                                        range.Max === 'Col-Max' ||
-                                        (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
-                                        this.changeRangeMax(index, value);
-                                    }, className: "twa:mr-2" })] }), _jsx(Flex, { alignItems: "center", className: "twa:h-full", children: _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+        const renderNoneContent = () => (_jsx(Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
+        // Columns: Min, Max, Colour, [Reverse Gradient], Delete. Using one shared
+        // grid (rows are `display: contents`) keeps every band's cells aligned and
+        // spacing uniform via grid gaps, even with a single row.
+        const rangeGridTemplateColumns = [
+            'max-content',
+            'max-content',
+            'max-content',
+            ...(this.props.showRangeDirection ? ['max-content'] : []),
+            'max-content',
+        ].join(' ');
+        const renderRangesContent = () => (_jsxs(_Fragment, { children: [isRangeValueTypeNumber ? (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define value bands from low to high, each with its own colour." }), _jsxs(Box, { children: ["Tick ", _jsx("strong", { children: "Use column min" }), " or ", _jsx("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), _jsxs(Box, { children: [_jsx("strong", { children: "0%" }), " is the column's lowest value and ", _jsx("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), _jsx(Box, { className: "twa:grid twa:items-end twa:gap-x-2 twa:gap-y-3 twa:mb-3 twa:w-fit", style: { gridTemplateColumns: rangeGridTemplateColumns }, children: this.props.ranges?.map((range, index, list) => (_jsxs(Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Use column min" })), _jsx(NumberInput, { disabled: this.props.disabled ||
+                                            range.Min === 'Col-Min' ||
+                                            (index === 0 && !isRangeValueTypeNumber), value: range.Min === 'Col-Min' ? this.props.minMaxRangeValues?.min ?? '' : range.Min, onChange: (value) => {
+                                            this.changeRangeMin(index, value);
+                                        } })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Use column max" })), _jsx(NumberInput, { value: range.Max === 'Col-Max' ? this.props.minMaxRangeValues?.max ?? '' : range.Max, disabled: this.props.disabled ||
+                                            range.Max === 'Col-Max' ||
+                                            (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
+                                            this.changeRangeMax(index, value);
+                                        } })] }), _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, className: "twa:mr-2 twa:h-[33px]" }) }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2", children: "Reverse Gradient" })), _jsx(SimpleButton, { className: "twa:ml-2 twa:mb-1", icon: "delete", disabled: this.props.disabled ||
-                                (!this.props.allowEmptyRanges &&
-                                    !!this.props.ranges &&
-                                    this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))), _jsx("div", { children: _jsx(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange(), children: "Add New Range" }) })] }));
+                                }, className: "twa:h-[33px] twa:pl-2" }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), children: "Reverse Gradient" })), _jsx(SimpleButton, { icon: "delete", disabled: this.props.disabled ||
+                                    (!this.props.allowEmptyRanges &&
+                                        !!this.props.ranges &&
+                                        this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))) }), _jsx("div", { children: _jsx(ButtonNew, { disabled: this.props.disabled, dataName: "add-range", onClick: () => this.addRange(), children: "Add Range" }) })] }));
         const renderZeroCentredContent = () => {
             const zc = this.props.zeroCentred ?? DEFAULT_ZERO_CENTRED_COLORS;
             const apply = (next) => this.props.onApplyZeroCentred?.(next);
-            return (_jsx(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: "Negative (Col-Min \u2192 0):", children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: "Positive (0 \u2192 Col-Max):", children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] }) }));
+            const minLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.min : 'column min';
+            const maxLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.max : 'column max';
+            return (_jsxs(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Colour cells on a diverging scale centred at zero." }), _jsx(Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: `Negative (${minLabel} → 0):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: `Positive (0 → ${maxLabel}):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
         };
-        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(Box, { className: "twa:p-2 twa:text-2", children: ["Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a ", this.props.api.internalApi.getCorrectEnglishVariant('Colour'), " for the Bar."] }), _jsxs(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'], children: [_jsx(FormRow, { label: "Min Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMinValue(value);
-                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
-                                        this.onMinColumnSelectedChanged(columnId);
-                                    } }) }) }), ' ', _jsx(FormRow, { label: "Max Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMaxValue(value);
-                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) }) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+        const describeBound = (bound) => {
+            if (bound == null || bound === '') {
+                return _jsx("em", { children: "not set" });
+            }
+            if (!isNaN(Number(bound))) {
+                return (_jsxs(_Fragment, { children: [_jsx("strong", { children: Number(bound) }), " ", _jsx("span", { className: "twa:opacity-60", children: "(fixed)" })] }));
+            }
+            const friendlyName = this.props.api.columnApi.getFriendlyNameForColumnId(String(bound));
+            return (_jsxs(_Fragment, { children: [_jsx("strong", { children: friendlyName }), " ", _jsx("span", { className: "twa:opacity-60", children: "(per row)" })] }));
+        };
+        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsxs(Box, { children: ["Scale each cell's bar between a ", _jsx("strong", { children: "Minimum" }), " and a", ' ', _jsx("strong", { children: "Maximum" }), "."] }), _jsxs(Box, { children: ["Set each to a fixed ", _jsx("strong", { children: "Value" }), " (same for all rows) or a", ' ', _jsx("strong", { children: "Column" }), " (read from that column on each row)."] })] }), _jsxs(FormLayout, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [_jsx(FormRow, { label: "Minimum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), _jsx(FormRow, { label: "Maximum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                     this.changeColumnComparisonColor(color);
-                                } }) })] })] }, 'cc'));
+                                } }) })] }), _jsxs(Box, { className: "twa:mt-2 twa:p-2 twa:text-3 twa:opacity-80", "data-name": "cc-summary", children: ["Each row's bar runs from ", describeBound(this.props.columnComparison?.MinValue), " to", ' ', describeBound(this.props.columnComparison?.MaxValue), "."] })] }, 'cc'));
         const tabFlex = { flex: 1 };
         const radioCls = 'twa:m-0 twa:align-baseline';
         const renderTabRadio = (label, value) => (_jsx(Radio, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
-        return (_jsxs(Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [_jsx(Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), _jsx(Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && (_jsx(Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && (_jsx(Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), _jsx(Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), _jsx(Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && (_jsx(Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && (_jsx(Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
+        return (_jsxs(Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [this.props.allowEmptyRanges && (_jsx(Tabs.Tab, { value: "None", style: tabFlex, children: renderTabRadio('No Ranges', 'None') })), _jsx(Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), _jsx(Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && (_jsx(Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && (_jsx(Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), this.props.allowEmptyRanges && (_jsx(Tabs.Content, { value: "None", children: renderNoneContent() })), _jsx(Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), _jsx(Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && (_jsx(Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && (_jsx(Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
     }
     componentDidUpdate(prevProps) {
         const wasComparison = !!prevProps.columnComparison;
@@ -118,19 +166,37 @@ export class RangesComponent extends React.Component {
         // tab — keep the active tab in sync. We deliberately do NOT react when the
         // user is on Zero Centred / Column Comparison tabs (parent code can still
         // set RangeValueType: 'Number' as part of those flows).
-        if ((this.state.rangesType === 'NumberRange' ||
-            this.state.rangesType === 'PercentageRange') &&
+        if ((this.state.rangesType === 'NumberRange' || this.state.rangesType === 'PercentageRange') &&
             prevProps.rangeValueType !== this.props.rangeValueType) {
             this.setState({
                 rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
             });
         }
+        if (this.props.allowEmptyRanges) {
+            const hadRanges = hasConfiguredRanges(prevProps.ranges);
+            const hasRanges = hasConfiguredRanges(this.props.ranges);
+            if (!hadRanges && hasRanges && this.state.rangesType === 'None') {
+                this.setState({
+                    rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
+                });
+            }
+            else if (hadRanges &&
+                !hasRanges &&
+                this.state.rangesType !== 'ColumnComparison' &&
+                this.state.rangesType !== 'ZeroCentred') {
+                this.setState({ rangesType: 'None' });
+            }
+        }
     }
     handleRangesModeTab(value) {
         if (value === this.state.rangesType) {
             return;
         }
         this.setState({ rangesType: value });
+        if (value === 'None') {
+            this.props.updateRanges([]);
+            return;
+        }
         if (value === 'ColumnComparison') {
             const columnComparison = {
                 Color: getGraySwatchColor(),
@@ -198,7 +264,7 @@ export class RangesComponent extends React.Component {
     setRangeColMin(range) {
         const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
-                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
+                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues?.min ?? 0 : 'Col-Min';
                 return {
                     ...rangeItem,
                     Min: newMin,
@@ -224,7 +290,7 @@ export class RangesComponent extends React.Component {
     addRange() {
         // Most callers seed `ranges` with at least one entry, but Range Bar
         // legitimately leaves `CellRanges` undefined (bands are optional). Handle
-        // both cases so the "Add New Range" button always works.
+        // both cases so the "Add Range" button always works.
         //
         // When starting from empty we seed TWO bands split at the midpoint — a
         // single full-width band would just look like a back colour and wouldn't
@@ -232,32 +298,51 @@ export class RangesComponent extends React.Component {
         const existingRanges = this.props.ranges ?? [];
         if (existingRanges.length === 0) {
             const isPercentage = this.props.rangeValueType === 'Percentage';
-            const min = isPercentage ? 0 : this.props.minMaxRangeValues?.min ?? 0;
-            const max = isPercentage ? 100 : this.props.minMaxRangeValues?.max ?? 100;
-            const mid = Math.round((min + max) / 2);
-            const seedRanges = [
-                {
-                    Min: isPercentage ? 0 : 'Col-Min',
-                    Max: mid,
-                    Color: 'rgba(128, 128, 128, 0.25)',
-                },
-                {
-                    Min: mid,
-                    Max: isPercentage ? 100 : 'Col-Max',
-                    Color: 'rgba(128, 128, 128, 0.55)',
-                },
-            ];
+            const seedRanges = this.props.allowEmptyRanges
+                ? [
+                    {
+                        Min: isPercentage ? 0 : 'Col-Min',
+                        Max: isPercentage ? 100 : 'Col-Max',
+                        Color: getGraySwatchColor(),
+                    },
+                ]
+                : (() => {
+                    const min = isPercentage ? 0 : this.props.minMaxRangeValues?.min ?? 0;
+                    const max = isPercentage ? 100 : this.props.minMaxRangeValues?.max ?? 100;
+                    const mid = Math.round((min + max) / 2);
+                    return [
+                        {
+                            Min: isPercentage ? 0 : 'Col-Min',
+                            Max: mid,
+                            Color: 'rgba(128, 128, 128, 0.25)',
+                        },
+                        {
+                            Min: mid,
+                            Max: isPercentage ? 100 : 'Col-Max',
+                            Color: 'rgba(128, 128, 128, 0.55)',
+                        },
+                    ];
+                })();
             this.props.updateRanges(seedRanges);
             return;
         }
+        // Splitting a single full-width band at the midpoint is easier to reason
+        // about than anchoring the break at the column maximum (e.g. tradeId 1–200 → 100).
+        if (existingRanges.length === 1) {
+            const splitAtMidpoint = this.splitFullSpanRangeAtMidpoint(existingRanges[0]);
+            if (splitAtMidpoint) {
+                this.props.updateRanges(splitAtMidpoint);
+                return;
+            }
+        }
         const lastRange = existingRanges[existingRanges.length - 1];
         let previousRange = lastRange;
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
-            Min = this.props.minMaxRangeValues.max;
+            Min = this.props.minMaxRangeValues?.max ?? 100;
             previousRange = {
                 ...previousRange,
-                Max: this.props.minMaxRangeValues.max,
+                Max: this.props.minMaxRangeValues?.max ?? 100,
             };
         }
         else {
@@ -271,25 +356,37 @@ export class RangesComponent extends React.Component {
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
-    changeColumnComparisonMinValue(value) {
-        const { columnComparison } = this.props;
-        columnComparison.MinValue = value;
-        this.props.updateColumnComparison(columnComparison);
-    }
-    onMinColumnSelectedChanged(columnId) {
-        const { columnComparison } = this.props;
-        columnComparison.MinValue = columnId || undefined;
-        this.props.updateColumnComparison(columnComparison);
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    splitFullSpanRangeAtMidpoint(onlyRange) {
+        const isPercentage = this.props.rangeValueType === 'Percentage';
+        if (isPercentage) {
+            if (onlyRange.Min !== 0 || onlyRange.Max !== 100) {
+                return null;
+            }
+            return [
+                { ...onlyRange, Max: 50 },
+                { Min: 50, Max: 100, Color: getGraySwatchColor() },
+            ];
+        }
+        if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
+            return null;
+        }
+        const min = this.props.minMaxRangeValues?.min ?? 0;
+        const max = this.props.minMaxRangeValues?.max ?? 100;
+        const mid = Math.round((min + max) / 2);
+        return [
+            { ...onlyRange, Max: mid },
+            { Min: mid, Max: 'Col-Max', Color: getGraySwatchColor() },
+        ];
     }
-    changeColumnComparisonMaxValue(value) {
-        const { columnComparison } = this.props;
-        columnComparison.MaxValue = value;
-        this.props.updateColumnComparison(columnComparison);
+    setColumnComparisonMin(value) {
+        this.props.updateColumnComparison({ ...this.props.columnComparison, MinValue: value });
     }
-    onMaxColumnSelectedChanged(columnId) {
-        const { columnComparison } = this.props;
-        columnComparison.MaxValue = columnId || undefined;
-        this.props.updateColumnComparison(columnComparison);
+    setColumnComparisonMax(value) {
+        this.props.updateColumnComparison({ ...this.props.columnComparison, MaxValue: value });
     }
     changeColumnComparisonColor(value) {
         const { columnComparison } = this.props;

package/src/View/Components/ReorderDraggable/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../../lib/utils';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -15,7 +15,7 @@ export function ReorderDraggable(props) {
                             const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
                             return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
                                     const { onPointerDown, ...restDomProps } = itemDomProps;
-                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: cn(`${baseClassName}__option`, 'ab-DraggableListItem', index ? 'twa:mt-0.5' : 'twa:mt-0', 'twa:py-1 twa:px-1.5', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-2", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-2", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
                                 } }, identifier));
                         }) })) }) }) }) }));
 }

package/src/View/Components/Selectors/BulkUpdateValueSelector.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { AdaptableColumn } from '../../../AdaptableState/Common/AdaptableColumn';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { GridCell } from '../../../types';
 export interface BulkUpdateValueSelectorProps {
@@ -12,7 +11,6 @@ export interface BulkUpdateValueSelectorProps {
     style?: React.CSSProperties;
     newLabel?: string;
     existingLabel?: string;
-    dropdownButtonProps?: DropdownButtonProps;
     selectedGridCells: GridCell[];
     disabled?: boolean;
     className?: string;

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -5,11 +5,11 @@ import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
 import { useAdaptable } from '../../AdaptableContext';
-import clsx from 'clsx';
 import { Box, Flex } from '../../../components/Flex';
 import { Icon } from '../../../components/icons';
 import { InputGroup } from '../../../components/InputGroup';
-import { NewDropdownButton } from '../../../components/NewDropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
+import { cn } from '../../../lib/utils';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -42,7 +42,7 @@ export const BulkUpdateValueSelector = (props) => {
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    return (_jsx(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+    return (_jsx(Flex, { className: cn('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
                             { label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
                             {
                                 label: 'Existing',

package/src/View/Components/Selectors/ColumnSelector.js

@@ -15,6 +15,7 @@ export const ColumnSelector = function (props) {
         return {
             label,
             textLabel,
+            tooltip: textLabel,
             value: column.columnId,
         };
     })
@@ -31,7 +32,11 @@ export const ColumnSelector = function (props) {
         virtualized: true,
         items: options,
         showClear: false,
+        showItemTooltip: true,
         onValueChange: (colId) => {
+            if (colId === null) {
+                return;
+            }
             props.onChange(colId);
         },
         value: props.value,

package/src/View/Components/StyleComponent.d.ts

@@ -8,6 +8,7 @@ export interface StyleComponentProps {
     api: AdaptableApi;
     headless?: boolean;
     hidePreview?: boolean;
+    previewText?: React.ReactNode;
     headerText?: string;
     Style: AdaptableStyle;
     UpdateStyle: (style: AdaptableStyle) => void;