@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

package/src/View/Components/RangesComponent.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangesComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ColorPicker_1 = require("../ColorPicker");
 const rebass_1 = require("rebass");
+const ColorPicker_1 = require("../../components/ColorPicker");
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
@@ -14,62 +15,75 @@ const UIHelper_1 = require("../UIHelper");
 const ColumnSelector_1 = require("./Selectors/ColumnSelector");
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const Tabs_1 = require("../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            ranges: this.props.ranges,
-            columnComparison: this.props.columnComparison,
             rangesType: this.props.columnComparison ? 'ColumnComparison' : 'Standard',
         };
     }
     render() {
-        var _a;
-        let comparisonMinValueNumber = this.state.columnComparison != null &&
-            this.state.columnComparison.MinValue != null &&
-            !isNaN(Number(this.state.columnComparison.MinValue))
-            ? Number(this.state.columnComparison.MinValue)
+        var _a, _b;
+        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.state.columnComparison != null &&
-            this.state.columnComparison.MaxValue != null &&
-            !isNaN(Number(this.state.columnComparison.MaxValue))
-            ? Number(this.state.columnComparison.MaxValue)
+        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.state.columnComparison != null &&
-            this.state.columnComparison.MinValue != null &&
-            isNaN(Number(this.state.columnComparison.MinValue))
-            ? String(this.state.columnComparison.MinValue)
+        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.state.columnComparison != null &&
-            this.state.columnComparison.MaxValue != null &&
-            isNaN(Number(this.state.columnComparison.MaxValue))
-            ? String(this.state.columnComparison.MaxValue)
+        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.state.columnComparison != null && this.state.columnComparison.Color != null
-            ? this.state.columnComparison.Color
+        let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
+            ? this.props.columnComparison.Color
             : undefined;
+        const isRangeValueTypeNumber = ((_a = this.props.rangeValueType) !== null && _a !== void 0 ? _a : 'Number') === 'Number';
         return (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(CheckBox_1.CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
             this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
-                React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
-                    _a.map((range, index) => (React.createElement(rebass_1.Flex, { key: index, mb: 2, "data-name": "percent-bar-range" },
-                        React.createElement(Input_1.default, { type: "number", value: range.Min, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMin(index, value);
-                            }, mr: 2 }),
-                        React.createElement(Input_1.default, { type: "number", value: range.Max, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMax(index, value);
-                            }, mr: 2 }),
-                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
-                                this.changeRangeColor(index, color);
-                            }, mr: 2, height: "100%" }),
-                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, marginRight: 2, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                        React.createElement(SimpleButton_1.default, { icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(rebass_1.Flex, { alignItems: "center", mb: 2 },
+                        React.createElement(rebass_1.Text, { mr: 3 }, "Range Type"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
+                    _b.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                                    range.Min === 'Col-Min' ||
+                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMin(index, value);
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                                    range.Max === 'Col-Max' ||
+                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMax(index, value);
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
+                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                    this.changeRangeColor(index, color);
+                                }, mr: 2, height: 33 })),
+                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), ml: 2 }, "Reverse Gradient")),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
-                        React.createElement(SimpleButton_1.default, { variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
+                        React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
                 React.createElement(Tabs_1.Tabs.Content, null,
@@ -80,14 +94,14 @@ class RangesComponent extends React.Component {
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                             " for the Bar."),
                         React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMinValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMinValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
                             ' ',
-                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
@@ -100,7 +114,6 @@ class RangesComponent extends React.Component {
             };
             this.setState({
                 rangesType: 'ColumnComparison',
-                columnComparison: columnComparison,
             });
             this.props.updateColumnComparison(columnComparison);
         }
@@ -108,79 +121,123 @@ class RangesComponent extends React.Component {
             const ranges = this.props.api.scopeApi.createCellColorRangesForScope(this.props.scope);
             this.setState({
                 rangesType: 'Standard',
-                ranges: ranges,
             });
             this.props.updateRanges(ranges);
         }
     }
+    handleRangeValueTypeChange(rangeValueType) {
+        this.props.onRangeValueTypeChange(rangeValueType);
+    }
     changeRangeMin(index, value) {
-        const { ranges } = this.state;
-        ranges[index].Min = Number(value);
+        const { ranges } = this.props;
+        let newMin = Number(value);
+        if (this.props.rangeValueType === 'Percentage') {
+            newMin = (0, clamp_1.default)(newMin, 0, 100);
+        }
+        ranges[index].Min = newMin;
         if (ranges[index - 1]) {
-            ranges[index - 1].Max = Number(value);
+            ranges[index - 1].Max = newMin;
         }
         this.props.updateRanges(ranges);
     }
     changeRangeMax(index, value) {
-        const { ranges } = this.state;
-        ranges[index].Max = Number(value);
+        const { ranges } = this.props;
+        let newMax = Number(value);
+        if (this.props.rangeValueType === 'Percentage') {
+            newMax = (0, clamp_1.default)(newMax, 0, 100);
+        }
+        ranges[index].Max = newMax;
         if (ranges[index + 1]) {
-            ranges[index + 1].Min = Number(value);
+            ranges[index + 1].Min = newMax;
         }
         this.props.updateRanges(ranges);
     }
     changeRangeColor(index, value) {
-        const { ranges } = this.state;
+        const { ranges } = this.props;
         ranges[index].Color = value;
         this.props.updateRanges(ranges);
     }
     changeRangeDirectionUp(index, checked) {
-        const { ranges } = this.state;
+        const { ranges } = this.props;
         ranges[index].ReverseGradient = checked;
         this.props.updateRanges(ranges);
     }
     removeRange(index) {
-        const { ranges } = this.state;
+        let ranges = [...this.props.ranges];
         ranges.splice(index, 1);
+        // Max 100 is always disabled, this prevents from having a Max range lower than 100
+        if (this.props.rangeValueType === 'Percentage' && ranges.length === 1) {
+            ranges[0] = Object.assign(Object.assign({}, ranges[0]), { Max: 100 });
+        }
         this.props.updateRanges(ranges);
     }
+    setRangeColMin(range) {
+        const newRanges = this.props.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
+                return Object.assign(Object.assign({}, rangeItem), { Min: newMin });
+            }
+            return rangeItem;
+        });
+        this.props.updateRanges(newRanges);
+    }
+    setRangeColMax(range) {
+        const newRanges = this.props.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
+                return Object.assign(Object.assign({}, rangeItem), { Max: newMax });
+            }
+            return rangeItem;
+        });
+        this.props.updateRanges(newRanges);
+    }
     addRange() {
-        const lastRange = this.state.ranges[this.state.ranges.length - 1];
-        this.state.ranges.push({
-            Min: lastRange.Max == 'Col-Max' ? 0 : lastRange.Max,
+        const lastRange = this.props.ranges[this.props.ranges.length - 1];
+        let previousRange = lastRange;
+        let Min = null;
+        if (lastRange.Max === 'Col-Max') {
+            Min = this.props.minMaxRangeValues.max;
+            previousRange = Object.assign(Object.assign({}, previousRange), { Max: this.props.minMaxRangeValues.max });
+        }
+        else {
+            Min = lastRange.Max;
+        }
+        const newRange = {
+            Min,
             Max: lastRange.Max,
             Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
-        }),
-            this.props.updateRanges(this.state.ranges);
+        };
+        const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
+        this.props.updateRanges(newRanges);
     }
     changeColumnComparisonMinValue(event) {
         let e = event.target;
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MinValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
             ? Number(e.value)
             : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     onMinColumnSelectedChanged(columns) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonMaxValue(event) {
         let e = event.target;
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MaxValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
             ? Number(e.value)
             : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     onMaxColumnSelectedChanged(columns) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MaxValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonColor(value) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.Color = value;
         this.props.updateColumnComparison(columnComparison);
     }

package/src/View/Components/ScopeComponent.js

@@ -15,14 +15,14 @@ class ScopeComponent extends React.Component {
         this.state = {
             ScopeChoice: this.setScopeChoice(this.props.scope),
             componentScope: this.props.scope,
-            selectedColumnValues: this.props.api.columnApi.getFriendlyNamesFromColumnIds(this.props.api.scopeApi.getColumnIdsInScope(this.props.scope)),
+            selectedColumnValues: this.props.api.columnApi.getFriendlyNamesForColumnIds(this.props.api.scopeApi.getColumnIdsInScope(this.props.scope)),
             availableDataTypes: this.props.availableDataTypes
                 ? this.props.availableDataTypes
                 : ['Date', 'Number', 'String', 'Boolean'],
         };
     }
     render() {
-        let availableValues = this.props.api.columnApi.getAllColumnFriendlyNames();
+        let availableValues = this.props.api.columnApi.internalApi.getAllColumnFriendlyNames();
         let displayMessage = this.props.displayMessage
             ? this.props.displayMessage
             : 'Apply Scope for: Row, or one or more Columns, or one or more Data Types';
@@ -32,31 +32,31 @@ class ScopeComponent extends React.Component {
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, displayMessage),
                     ' ',
                     React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Whole Row"),
+                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "All Columns"),
                         ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Column(s)"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
                         ' ',
                         React.createElement(Radio_1.default, { marginLeft: 3, value: "DataType", checked: this.state.ScopeChoice == 'DataType', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "DataType(s)")),
                     this.state.ScopeChoice == 'Column' && (React.createElement(rebass_1.Box, { marginBottom: 2, "data-name": "column-scope" },
                         React.createElement(DualListBoxEditor_1.DualListBoxEditor, { style: { flex: 1, overflow: 'hidden', height: '250px' }, AvailableValues: availableValues, SelectedValues: this.state.selectedColumnValues, HeaderAvailable: "Columns", HeaderSelected: "Columns In Style", onChange: (SelectedValues) => this.onColumnsSelectedChanged(SelectedValues) }))),
                     this.state.ScopeChoice == 'DataType' && (React.createElement(Panel_1.default, { "data-name": "datatype-scope", variant: "modern" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "date", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Date'), marginLeft: 2, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Date') }, "Date")),
-                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Number'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Number') }, "Number")),
-                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('String'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'String') }, "String")),
-                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
@@ -106,7 +106,7 @@ class ScopeComponent extends React.Component {
         this.props.updateScope(newScope);
     }
     onColumnsSelectedChanged(columnFriendlyNames) {
-        let cols = this.props.api.columnApi.getColumnIdsFromFriendlyNames(columnFriendlyNames);
+        let cols = this.props.api.columnApi.getColumnIdsForFriendlyNames(columnFriendlyNames);
         let newScope = {
             ColumnIds: cols,
         };

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

@@ -9,6 +9,7 @@ export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
     className?: string;
     placeHolder?: string;
     showClearButton?: boolean;
+    disabled?: boolean;
 }
 export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
     render(): JSX.Element;

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

@@ -23,6 +23,7 @@ class ColumnSelector extends React.Component {
             return {
                 label: column.friendlyName,
                 value: column.columnId,
+                disabled: this.props.disabled,
                 onClick: () => {
                     const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                     if (!selected.length) {
@@ -40,7 +41,7 @@ class ColumnSelector extends React.Component {
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: sortedColumnOptions.length == 0 }, currentColumnName)))));
+                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);

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

@@ -27,7 +27,7 @@ class ColumnValueSelector extends React.Component {
             }
             // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
             // so that you we show the display value but we work on the raw value
-            const columnDisplayValuePairs = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.columnApi.getDistinctBulkUpdateDisplayValuesForColumn(this.props.selectedColumn.columnId, this.props.selectedGridCells), () => this.setState({ isDistinctColumnValuesLoading: true }));
+            const columnDisplayValuePairs = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctBulkUpdateDisplayValuesForColumn(this.props.selectedColumn.columnId, this.props.selectedGridCells), () => this.setState({ isDistinctColumnValuesLoading: true }));
             this.setState({ isDistinctColumnValuesLoading: false });
             const newSortedColumnValues = ArrayExtensions_1.ArrayExtensions.sortArray(columnDisplayValuePairs, Enums_1.SortOrder.Asc).map((v) => ({
                 label: v,
@@ -74,8 +74,8 @@ class ColumnValueSelector extends React.Component {
             ]
             : this.state.distinctColumnValues;
         const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton_1.default, { className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
-        const input = (React.createElement(AdaptableInput_1.default, { type: this.props.selectedColumn
+            React.createElement(DropdownButton_1.default, { "data-name": "bulkupdate-value-selector", className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
+        const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: this.props.selectedColumn
                 ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.dataType)
                 : 'text', placeholder: this.props.selectedColumn
                 ? UIHelper_1.default.getPlaceHolderforDataType(this.props.selectedColumn.dataType)

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

@@ -7,6 +7,7 @@ export interface StyleComponentProps extends React.ClassAttributes<StyleComponen
     style?: CSSProperties;
     api: AdaptableApi;
     headless?: boolean;
+    hidePreview?: boolean;
     Style: AdaptableStyle;
     UpdateStyle: (style: AdaptableStyle) => void;
 }

package/src/View/Components/StyleComponent.js

@@ -5,8 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const ColorPicker_1 = require("../ColorPicker");
-const AdaptablePopover_1 = require("../AdaptablePopover");
+const ColorPicker_1 = require("../../components/ColorPicker");
 const rebass_1 = require("rebass");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
@@ -16,6 +15,7 @@ const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout")
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const StylePreview_1 = require("../../components/StylePreview");
 class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -25,7 +25,7 @@ class StyleComponent extends React.Component {
         };
     }
     render() {
-        const Cmp = this.props.headless ? React.Fragment : Panel_1.default;
+        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -36,15 +36,15 @@ class StyleComponent extends React.Component {
         const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
-        return (React.createElement(Cmp, Object.assign({}, cmpProps),
+        return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
+                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio_1.default, { marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
+                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
                 React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(DropdownButton_1.default, { margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
+                React.createElement(DropdownButton_1.default, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
                         minWidth: '15rem',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -64,51 +64,46 @@ class StyleComponent extends React.Component {
                             coloursSpellingVariant),
                         React.createElement(FormLayout_1.default, { columns: [1, 2] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Set Back ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Set Fore ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Set Border ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                         React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
                         React.createElement(FormLayout_1.default, { columns: [1] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-weight-bold", margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-style-italic", margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-size", margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
                             React.createElement(FormLayout_1.FormRow, null, this.state.componentStyle.FontSize != null && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(DropdownButton_1.default, { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        maxWidth: 'inherit',
-                                    }, mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                React.createElement(DropdownButton_1.default, { mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                         value: enumName,
                                         label: enumName,
                                         onClick: () => this.onFontSizeChange(enumName),
-                                    })), columns: ['label'] }, this.state.componentStyle.FontSize.toString()),
-                                React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Conditional Style: Font Size', bodyText: [
-                                        "Select the size of the font for the Conditional Style.  The default is 'Medium'.",
-                                    ] })))))))))));
+                                    })), columns: ['label'] }, this.state.componentStyle.FontSize.toString()))))))))),
+            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
+                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
     }
     onShowClassNameChanged(checked) {
         // clear everything
-        this.state.componentStyle.BackColor = null;
-        this.state.componentStyle.ForeColor = null;
-        this.state.componentStyle.BorderColor = null;
-        this.state.componentStyle.FontSize = null;
-        this.state.componentStyle.FontStyle = null;
-        this.state.componentStyle.FontWeight = null;
+        delete this.state.componentStyle.BackColor;
+        delete this.state.componentStyle.ForeColor;
+        delete this.state.componentStyle.BorderColor;
+        delete this.state.componentStyle.FontSize;
+        delete this.state.componentStyle.FontStyle;
+        delete this.state.componentStyle.FontWeight;
         this.state.componentStyle.ClassName = '';
         this.setState({ ShowClassName: checked });
     }
@@ -117,19 +112,39 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onUseBackColorCheckChange(checked) {
-        this.state.componentStyle.BackColor = checked ? '#ffffff' : null;
+        if (checked) {
+            this.state.componentStyle.BackColor = '#ffffff';
+        }
+        else {
+            delete this.state.componentStyle.BackColor;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onUseForeColorCheckChange(checked) {
-        this.state.componentStyle.ForeColor = checked ? '#000000' : null;
+        if (checked) {
+            this.state.componentStyle.ForeColor = '#000000';
+        }
+        else {
+            delete this.state.componentStyle.ForeColor;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onUseBorderColorCheckChange(checked) {
-        this.state.componentStyle.BorderColor = checked ? '#000000' : null;
+        if (checked) {
+            this.state.componentStyle.BorderColor = '#000000';
+        }
+        else {
+            delete this.state.componentStyle.BorderColor;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onUseFontSizeCheckChange(checked) {
-        this.state.componentStyle.FontSize = checked ? Enums_1.FontSize.Medium : null;
+        if (checked) {
+            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
+        }
+        else {
+            delete this.state.componentStyle.FontSize;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onBackColorSelectChange(color) {
@@ -145,13 +160,21 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontWeightChange(checked) {
-        let fontWeight = checked ? Enums_1.FontWeight.Bold : Enums_1.FontWeight.Normal;
-        this.state.componentStyle.FontWeight = fontWeight;
+        if (checked) {
+            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
+        }
+        else {
+            delete this.state.componentStyle.FontWeight;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontStyleChange(checked) {
-        let fontStyle = checked ? Enums_1.FontStyle.Italic : Enums_1.FontStyle.Normal;
-        this.state.componentStyle.FontStyle = fontStyle;
+        if (checked) {
+            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
+        }
+        else {
+            delete this.state.componentStyle.FontStyle;
+        }
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontSizeChange(value) {