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

package/src/View/Components/RangesComponent.js

@@ -5,28 +5,35 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ColorPicker_1 = require("../../components/ColorPicker");
-const clamp_1 = tslib_1.__importDefault(require("../../Utilities/utils/clamp"));
+const NumberExtensions_1 = require("../../Utilities/Extensions/NumberExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const NumberInput_1 = require("../../components/Input/NumberInput");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ButtonNew_1 = require("./Buttons/ButtonNew");
 const UIHelper_1 = require("../UIHelper");
 const ColumnSelector_1 = require("./Selectors/ColumnSelector");
 const Tabs_1 = require("../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const Flex_1 = require("../../components/Flex");
+const NewSelect_1 = require("../../components/NewSelect");
+const InputGroup_1 = require("../../components/InputGroup");
+const icons_1 = require("../../components/icons");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../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) {
@@ -35,34 +42,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: ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: "Value" })] })),
+        },
+        {
+            value: 'column',
+            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: "Column" })] })),
+        },
+    ];
+    const editor = type === 'value' ? ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { className: "twa:w-full", disabled: disabled, type: "number", value: value != null && !isNaN(Number(value)) ? Number(value) : '', onChange: (v) => onChange(v) })) : ((0, jsx_runtime_1.jsx)(ColumnSelector_1.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 ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[20rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.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);
+                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
+};
 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;
@@ -70,38 +101,55 @@ 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 = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.ranges?.map((range, index, list) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+        const renderNoneContent = () => ((0, jsx_runtime_1.jsx)(Flex_1.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 = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeValueTypeNumber ? ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define value bands from low to high, each with its own colour." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tick ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column min" }), " or ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "0%" }), " is the column's lowest value and ", (0, jsx_runtime_1.jsx)("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), (0, jsx_runtime_1.jsx)(Flex_1.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) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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);
+                                        } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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);
+                                        } })] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, className: "twa:mr-2 twa:h-[33px]" }) }), this.props.showRangeDirection && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2", children: "Reverse Gradient" })), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), children: "Reverse Gradient" })), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", disabled: this.props.disabled ||
+                                    (!this.props.allowEmptyRanges &&
+                                        !!this.props.ranges &&
+                                        this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonNew_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Negative (Col-Min \u2192 0):", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Positive (0 \u2192 Col-Max):", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Colour cells on a diverging scale centred at zero." }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Negative (${minLabel} → 0):`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Positive (0 → ${maxLabel}):`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
         };
-        const renderColumnComparisonContent = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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."] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Min Value:", first: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMinValue(value);
-                                } }), or: "OR", second: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
-                                        this.onMinColumnSelectedChanged(columnId);
-                                    } }) }) }), ' ', (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max Value:", first: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMaxValue(value);
-                                } }), or: "OR", second: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+        const describeBound = (bound) => {
+            if (bound == null || bound === '') {
+                return (0, jsx_runtime_1.jsx)("em", { children: "not set" });
+            }
+            if (!isNaN(Number(bound))) {
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: Number(bound) }), " ", (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-60", children: "(fixed)" })] }));
+            }
+            const friendlyName = this.props.api.columnApi.getFriendlyNameForColumnId(String(bound));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: friendlyName }), " ", (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-60", children: "(per row)" })] }));
+        };
+        const renderColumnComparisonContent = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Scale each cell's bar between a ", (0, jsx_runtime_1.jsx)("strong", { children: "Minimum" }), " and a", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Maximum" }), "."] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Set each to a fixed ", (0, jsx_runtime_1.jsx)("strong", { children: "Value" }), " (same for all rows) or a", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Column" }), " (read from that column on each row)."] })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Minimum:", first: (0, jsx_runtime_1.jsx)(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Maximum:", first: (0, jsx_runtime_1.jsx)(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                     this.changeColumnComparisonColor(color);
-                                } }) })] })] }, 'cc'));
+                                } }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
-        return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [this.props.allowEmptyRanges && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "None", style: tabFlex, children: renderTabRadio('No Ranges', 'None') })), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), this.props.allowEmptyRanges && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "None", children: renderNoneContent() })), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
     }
     componentDidUpdate(prevProps) {
         const wasComparison = !!prevProps.columnComparison;
@@ -122,19 +170,37 @@ 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: (0, UIHelper_1.getGraySwatchColor)(),
@@ -157,7 +223,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMin = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMin = (0, clamp_1.default)(newMin, 0, 100);
+            newMin = (0, NumberExtensions_1.clamp)(newMin, 0, 100);
         }
         ranges[index].Min = newMin;
         if (ranges[index - 1]) {
@@ -169,7 +235,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMax = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMax = (0, clamp_1.default)(newMax, 0, 100);
+            newMax = (0, NumberExtensions_1.clamp)(newMax, 0, 100);
         }
         ranges[index].Max = newMax;
         if (ranges[index + 1]) {
@@ -202,7 +268,7 @@ 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,
@@ -228,7 +294,7 @@ 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
@@ -236,32 +302,51 @@ 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: (0, UIHelper_1.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 {
@@ -275,25 +360,37 @@ 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: (0, UIHelper_1.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: (0, UIHelper_1.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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReorderDraggable = ReorderDraggable;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dnd_1 = require("../../../components/dnd");
 const icons_1 = require("../../../components/icons");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../lib/utils");
 function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -19,7 +18,7 @@ function ReorderDraggable(props) {
                             const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
                             return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
                                     const { onPointerDown, ...restDomProps } = itemDomProps;
-                                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, clsx_1.default)(`${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: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-3", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, utils_1.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: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(icons_1.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

@@ -9,11 +9,11 @@ const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../../../components/Flex");
 const icons_1 = require("../../../components/icons");
 const InputGroup_1 = require("../../../components/InputGroup");
-const NewDropdownButton_1 = require("../../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../../components/DropdownButton");
+const utils_1 = require("../../../lib/utils");
 const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -46,7 +46,7 @@ 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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [(0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
                             { label: 'New', icon: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
                             {
                                 label: 'Existing',

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

@@ -19,6 +19,7 @@ const ColumnSelector = function (props) {
         return {
             label,
             textLabel,
+            tooltip: textLabel,
             value: column.columnId,
         };
     })
@@ -35,7 +36,11 @@ 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;