@deephaven/iris-grid 0.10.0 → 0.10.1-beta.0

package/dist/IrisGrid.d.ts

@@ -45,6 +45,12 @@ export class IrisGrid extends React.Component<any, any, any> {
     handleTooltipRef(tooltip: any): void;
     handleViewChanged(metrics: any): void;
     handleFormatSelection(modelIndex: any, selectedFormat: any): void;
+    handleConditionalFormatCreate(): void;
+    handleConditionalFormatEdit(index: any): void;
+    handleConditionalFormatsChange(conditionalFormats: any): void;
+    handleConditionalFormatEditorSave(config: any): void;
+    handleConditionalFormatEditorUpdate(conditionalFormatPreview: any): void;
+    handleConditionalFormatEditorCancel(): void;
     handleUpdateCustomColumns(customColumns: any): void;
     handleCustomColumnsChanged(): void;
     handleSelectDistinctChanged(columnNames: any): void;
@@ -113,7 +119,7 @@ export class IrisGrid extends React.Component<any, any, any> {
     }[];
     getAdvancedMenuOpenedHandler: ((column: any) => () => void) & memoize.Memoized<(column: any) => () => void>;
     getCachedAdvancedFilterMenuActions: ((model: any, column: any, advancedFilterOptions: any, sortDirection: any, formatter: any) => JSX.Element) & memoize.Memoized<(model: any, column: any, advancedFilterOptions: any, sortDirection: any, formatter: any) => JSX.Element>;
-    getCachedOptionItems: ((isChartBuilderAvailable: any, isCustomColumnsAvailable: any, isRollupAvailable: any, isTotalsAvailable: any, isSelectDistinctAvailable: any, isExportAvailable: any, toggleFilterBarAction: any, toggleSearchBarAction: any, isFilterBarShown: any, showSearchBar: any, canDownloadCsv: any, canToggleSearch: any) => ({
+    getCachedOptionItems: ((isChartBuilderAvailable: any, isCustomColumnsAvailable: any, isFormatColumnsAvailable: any, isRollupAvailable: any, isTotalsAvailable: any, isSelectDistinctAvailable: any, isExportAvailable: any, toggleFilterBarAction: any, toggleSearchBarAction: any, isFilterBarShown: any, showSearchBar: any, canDownloadCsv: any, canToggleSearch: any) => ({
         type: OptionType;
         title: string;
         icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -127,7 +133,7 @@ export class IrisGrid extends React.Component<any, any, any> {
         icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
         isOn: any;
         onChange: any;
-    })[]) & memoize.Memoized<(isChartBuilderAvailable: any, isCustomColumnsAvailable: any, isRollupAvailable: any, isTotalsAvailable: any, isSelectDistinctAvailable: any, isExportAvailable: any, toggleFilterBarAction: any, toggleSearchBarAction: any, isFilterBarShown: any, showSearchBar: any, canDownloadCsv: any, canToggleSearch: any) => ({
+    })[]) & memoize.Memoized<(isChartBuilderAvailable: any, isCustomColumnsAvailable: any, isFormatColumnsAvailable: any, isRollupAvailable: any, isTotalsAvailable: any, isSelectDistinctAvailable: any, isExportAvailable: any, toggleFilterBarAction: any, toggleSearchBarAction: any, isFilterBarShown: any, showSearchBar: any, canDownloadCsv: any, canToggleSearch: any) => ({
         type: OptionType;
         title: string;
         icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -146,6 +152,17 @@ export class IrisGrid extends React.Component<any, any, any> {
     getAggregationMap: ((columns: any, aggregations: any) => {}) & memoize.Memoized<(columns: any, aggregations: any) => {}>;
     getOperationMap: ((columns: any, aggregations: any) => {}) & memoize.Memoized<(columns: any, aggregations: any) => {}>;
     getOperationOrder: ((aggregations: any) => any) & memoize.Memoized<(aggregations: any) => any>;
+    getCachedFormatColumns: ((columns: any, rules: any) => import("@deephaven/jsapi-shim").CustomColumn[]) & memoize.Memoized<(columns: any, rules: any) => import("@deephaven/jsapi-shim").CustomColumn[]>;
+    getCachedModelColumns: ((model: any, customColumns: any) => any) & memoize.Memoized<(model: any, customColumns: any) => any>;
+    /**
+     * Builds formatColumns array based on the provided formatting rules with optional preview
+     * @param {Column[]} columns Array of columns
+     * @param {FormattingRule[]} rulesParam Array of formatting rules
+     * @param {FormattingRule?} preview Optional temporary formatting rule for previewing live changes
+     * @param {Number|null} editIndex Index in the rulesParam array to replace with the preview, null if preview not applicable
+     * @returns {CustomColumn[]} Format columns array
+     */
+    getCachedPreviewFormatColumns: ((columns: any, rulesParam: any, preview: any, editIndex: any) => import("@deephaven/jsapi-shim").CustomColumn[]) & memoize.Memoized<(columns: any, rulesParam: any, preview: any, editIndex: any) => import("@deephaven/jsapi-shim").CustomColumn[]>;
     getModelRollupConfig: ((originalColumns: any, config: any, aggregationSettings: any) => Object) & memoize.Memoized<(originalColumns: any, config: any, aggregationSettings: any) => Object>;
     getModelTotalsConfig: ((columns: any, config: any, aggregationSettings: any) => {
         operationMap: {};
@@ -295,6 +312,7 @@ export namespace IrisGrid {
         const alwaysFetchColumns: PropTypes.Requireable<(string | null | undefined)[]>;
         const isFilterBarShown: PropTypes.Requireable<boolean>;
         const applyInputFiltersOnInit: PropTypes.Requireable<boolean>;
+        const conditionalFormats: PropTypes.Requireable<(PropTypes.InferProps<{}> | null | undefined)[]>;
         const customColumnFormatMap: PropTypes.Requireable<Map<unknown, unknown>>;
         const movedColumns: PropTypes.Requireable<(PropTypes.InferProps<{
             from: PropTypes.Validator<number>;
@@ -385,6 +403,8 @@ export namespace IrisGrid {
         export { advancedSettings_1 as advancedSettings };
         const alwaysFetchColumns_1: never[];
         export { alwaysFetchColumns_1 as alwaysFetchColumns };
+        const conditionalFormats_1: never[];
+        export { conditionalFormats_1 as conditionalFormats };
         const customColumnFormatMap_1: Map<any, any>;
         export { customColumnFormatMap_1 as customColumnFormatMap };
         const isFilterBarShown_1: boolean;

package/dist/IrisGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IrisGrid.d.ts","sourceRoot":"","sources":["../src/IrisGrid.jsx"],"names":[],"mappings":"AAiHA;IACE,2BAAyB;IAEzB,2BAAyB;IAEzB,mCAAiC;IAEjC,sHAOC;IAED,wBA0QC;IAm2CD,yEAOC;IAED,2FA0BC;IAED,iCAEC;IAED,4CAEC;IAED,iDAeC;IA6TD;;;OAGG;IACH,wDAaC;IAhCD;;;OAGG;IACH,yEASC;IAqBD;;;OAGG;IACH,sDAeC;IA9pBD,4BAOC;IAED,6BAMC;IAED,2BAIC;IA6SD,0BAEC;IAED,uCAGC;IAED,kCAKC;IAED,wCASC;IAED,0EAOC;IAED,wCAOC;IAhDD,qBAEC;IAsED,mBAEC;IAED,wBAEC;IAUD,oCAIC;IAZD,uBAMC;IAQD,sCAWC;IA8DD,kDAQC;IAED,iFAEC;IAxED,qBA2BC;IA+CD,qCAOC;IApDD,sCA6BC;IAnHD,kEAoBC;IAwHD,oDA6EC;IAED,mCASC;IAoGD,oDAoBC;IA9GD,iCAUC;IAlBD,4CAEC;IAED,6CAEC;IAkID,0CAiBC;IAjCD,iCAcC;IAqBD,kCAGC;IAuBD,+BAMC;IA3BD,gGAWC;IAED,gCAMC;IAjvBD,wCAIC;IAED,4CAGC;IAED,gCAKC;IAED,4BAEC;IA/FD,8EAcC;IAED,sGAmBC;IAirBD,4CAqBC;IApsBD,+GAaC;IAhyCC,kBAAgB;IAChB,mCAAuB;IACvB,gCAAsC;IACtC;;;;;;;aAA4B;IAC5B,aAAmB;IACnB,iBAA4B;IAC5B,2BAA6B;IAC7B,6BAAkC;IAClC,yBAA8B;IAC9B,yBAA8B;IAG9B,qCAAiC;IACjC,sCAAkC;IAClC,oCAAwB;IACxB,2BAAsC;IACtC,8BAAsB;IACtB,qCAAuC;IACvC,qBAAwB;IACxB,8BAA0B;IAC1B,qCAAuC;IAEvC;;;MAGC;IACD;;;MAGC;IACD;;;MAQC;IACD;;;MAYC;IACD;;;QAKC;IA8OH,4GAGE;IAEF,4QAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0FE;IAEF,sGAGG;IAEH,yHAWG;IAEH,uHAgBG;IAEH,+FAIE;IAEF,4LAOE;IAEF;;;;;;;;cAcG;IAEH;;;;;;;;;;;;;;;;;;;;OAuBE;IAEF,yQAeE;IAEF,gHAOE;IAEF,0EAQC;IAED,sCAQC;IAED,gCAQC;IAED,gBAGC;IAED,0CAGC;IAED;;;;;OAKG;IACH,gCAHW,aAAa,oBACb,OAAO,QA+BjB;IAED;;;;;;OAMG;IACH,6BALW,MAAM,SACN,MAAM,gCAEJ,OAAO,CAuBnB;IAED,oEAsBC;IAED;;;;;OAKG;IACH,mFAUC;IAED;;;OAGG;IACH,wBAFW,IAAI,MAAM,EAAE,MAAM,CAAC,QAoC7B;IAED,2CAcC;IAED,wBAsBC;IAED,8BAOC;IAED,4BAIC;IAED;;OAEG;IACH,uBAsCC;IAED;;;aAKC;IAED,oEA0CC;IAED,yQA8BE;IAEF,kEAwBC;IAED,sBAGC;IAED,kBAsCC;IAED,yDAkCC;IAED,4DASC;IAED,oEAUC;IAED;;;;;;OAMG;IACH,mBALW,SAAS,EAAE,mBACX,OAAO,iBACP,OAAO,UACP,MAAM,GAAC,IAAI,QA8BrB;IAED,4DA6BC;IAED,oBAaC;IAED;;OAEG;IACH,iBA8BC;IAED;;;OAGG;IACH,eAFa,OAAO,CAInB;IAED,iCAcC;IAED,gCAcC;IAED,kCA0BC;IAED,wDAQC;IAED,gDAiBC;IAED,kDAmBC;IAmGD,uCASC;IAED,uBAWC;IAED,uDAaC;IAED,8BAIC;IAED,6FAYC;IAED,gCAIC;IAED,oBAGC;IAED,wCA2BC;IAED,8BAYC;IAED,wBAmBC;IAED,+BAgCC;IAED,gCAYC;IAED;;;OAGG;IACH,sCAGC;IAED;;OAEG;IACH,kDAcC;IAqhBD;;;OAGG;IACH,qBAFW,SAAS,EAAE,QASrB;IAED,6BAYC;IAED,gDAUC;IAED,wBASC;CA0xBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAwHgB,wCAAQ;;QACL,2CAAQ;;QACV,yCAAQ;;QACf,kCAAQ;;QACF,wCAAQ;;QACJ,4CAAQ;;QACD,mDAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;QAYd,6CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAcb,2CAAQ"}
+{"version":3,"file":"IrisGrid.d.ts","sourceRoot":"","sources":["../src/IrisGrid.jsx"],"names":[],"mappings":"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"}

package/dist/IrisGrid.js

@@ -18,7 +18,7 @@ import Log from '@deephaven/log';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ContextActionUtils, ContextActions, DeephavenSpinner, Stack, Menu, Page, Popper, ThemeExport, Tooltip } from '@deephaven/components';
 import { Grid, GridRange, GridUtils } from '@deephaven/grid';
-import { dhEye, dhFilterFilled, dhGraphLineUp, dhTriangleDownSquare, vsCloudDownload, vsFilter, vsMenu, vsRuby, vsSearch, vsSplitHorizontal, vsSymbolOperator, vsTools } from '@deephaven/icons';
+import { dhEye, dhFilterFilled, dhGraphLineUp, dhTriangleDownSquare, vsCloudDownload, vsEdit, vsFilter, vsMenu, vsRuby, vsSearch, vsSplitHorizontal, vsSymbolOperator, vsTools } from '@deephaven/icons';
 import dh, { PropTypes as APIPropTypes } from '@deephaven/jsapi-shim';
 import { Pending, PromiseUtils, ValidationError } from '@deephaven/utils';
 import throttle from 'lodash.throttle';
@@ -50,9 +50,13 @@ import AdvancedSettingsType from "./sidebar/AdvancedSettingsType.js";
 import AdvancedSettingsMenu from "./sidebar/AdvancedSettingsMenu.js";
 import SHORTCUTS from "./IrisGridShortcuts.js";
 import DateUtils from "./DateUtils.js";
+import ConditionalFormattingMenu from "./sidebar/conditional-formatting/ConditionalFormattingMenu.js";
+import { getFormatColumns } from "./sidebar/conditional-formatting/ConditionalFormattingUtils.js";
+import ConditionalFormatEditor from "./sidebar/conditional-formatting/ConditionalFormatEditor.js";
 var log = Log.module('IrisGrid');
 var UPDATE_DOWNLOAD_THROTTLE = 500;
 var SET_FILTER_DEBOUNCE = 250;
+var SET_CONDITIONAL_FORMAT_DEBOUNCE = 250;
 
 function isEmptyConfig(_ref) {
   var {
@@ -97,7 +101,7 @@ export class IrisGrid extends Component {
       max: 50
     }));
 
-    _defineProperty(this, "getCachedOptionItems", memoize((isChartBuilderAvailable, isCustomColumnsAvailable, isRollupAvailable, isTotalsAvailable, isSelectDistinctAvailable, isExportAvailable, toggleFilterBarAction, toggleSearchBarAction, isFilterBarShown, showSearchBar, canDownloadCsv, canToggleSearch) => {
+    _defineProperty(this, "getCachedOptionItems", memoize((isChartBuilderAvailable, isCustomColumnsAvailable, isFormatColumnsAvailable, isRollupAvailable, isTotalsAvailable, isSelectDistinctAvailable, isExportAvailable, toggleFilterBarAction, toggleSearchBarAction, isFilterBarShown, showSearchBar, canDownloadCsv, canToggleSearch) => {
       var optionItems = [];
 
       if (isChartBuilderAvailable) {
@@ -114,6 +118,14 @@ export class IrisGrid extends Component {
         icon: dhEye
       });
 
+      if (isFormatColumnsAvailable) {
+        optionItems.push({
+          type: OptionType.CONDITIONAL_FORMATTING,
+          title: 'Conditional Formatting',
+          icon: vsEdit
+        });
+      }
+
       if (isCustomColumnsAvailable) {
         optionItems.push({
           type: OptionType.CUSTOM_COLUMN_BUILDER,
@@ -225,6 +237,22 @@ export class IrisGrid extends Component {
 
     _defineProperty(this, "getOperationOrder", memoize(aggregations => aggregations.map(a => a.operation).filter(o => !AggregationUtils.isRollupOperation(o))));
 
+    _defineProperty(this, "getCachedFormatColumns", memoize((columns, rules) => getFormatColumns(columns, rules)));
+
+    _defineProperty(this, "getCachedModelColumns", memoize((model, customColumns) => model.columns));
+
+    _defineProperty(this, "getCachedPreviewFormatColumns", memoize((columns, rulesParam, preview, editIndex) => {
+      log.debug('getCachedPreviewFormatColumns', rulesParam, preview, editIndex);
+
+      if (preview !== undefined && editIndex !== null) {
+        var rules = [...rulesParam];
+        rules[editIndex] = preview;
+        return this.getCachedFormatColumns(columns, rules);
+      }
+
+      return this.getCachedFormatColumns(columns, rulesParam);
+    }));
+
     _defineProperty(this, "getModelRollupConfig", memoize((originalColumns, config, aggregationSettings) => IrisGridUtils.getModelRollupConfig(originalColumns, config, aggregationSettings)));
 
     _defineProperty(this, "getModelTotalsConfig", memoize((columns, config, aggregationSettings) => {
@@ -318,6 +346,12 @@ export class IrisGrid extends Component {
     this.handleTooltipRef = this.handleTooltipRef.bind(this);
     this.handleViewChanged = this.handleViewChanged.bind(this);
     this.handleFormatSelection = this.handleFormatSelection.bind(this);
+    this.handleConditionalFormatCreate = this.handleConditionalFormatCreate.bind(this);
+    this.handleConditionalFormatEdit = this.handleConditionalFormatEdit.bind(this);
+    this.handleConditionalFormatsChange = this.handleConditionalFormatsChange.bind(this);
+    this.handleConditionalFormatEditorSave = this.handleConditionalFormatEditorSave.bind(this);
+    this.handleConditionalFormatEditorUpdate = debounce(this.handleConditionalFormatEditorUpdate.bind(this), SET_CONDITIONAL_FORMAT_DEBOUNCE);
+    this.handleConditionalFormatEditorCancel = this.handleConditionalFormatEditorCancel.bind(this);
     this.handleUpdateCustomColumns = this.handleUpdateCustomColumns.bind(this);
     this.handleCustomColumnsChanged = this.handleCustomColumnsChanged.bind(this);
     this.handleSelectDistinctChanged = this.handleSelectDistinctChanged.bind(this);
@@ -393,6 +427,7 @@ export class IrisGrid extends Component {
     this.contextActions = [this.toggleFilterBarAction, this.toggleSearchBarAction, this.discardAction, this.commitAction];
     var {
       aggregationSettings: _aggregationSettings,
+      conditionalFormats,
       customColumnFormatMap,
       isFilterBarShown: _isFilterBarShown,
       isSelectingPartition,
@@ -467,6 +502,9 @@ export class IrisGrid extends Component {
       formatter: new Formatter(),
       isMenuShown: false,
       customColumnFormatMap: new Map(customColumnFormatMap),
+      conditionalFormats,
+      conditionalFormatEditIndex: null,
+      conditionalFormatPreview: undefined,
       // Column user is hovering over for selection
       hoverSelectColumn: null,
       isTableDownloading: false,
@@ -2063,6 +2101,81 @@ export class IrisGrid extends Component {
     this.tooltip = tooltip;
   }
 
+  handleConditionalFormatsChange(conditionalFormats) {
+    log.debug('Updated conditional formats', conditionalFormats);
+    this.setState({
+      conditionalFormats
+    });
+  }
+
+  handleConditionalFormatCreate() {
+    log.debug('Create new conditional format');
+    var {
+      openOptions,
+      conditionalFormats
+    } = this.state;
+    this.setState({
+      openOptions: [...openOptions, {
+        type: OptionType.CONDITIONAL_FORMATTING_EDIT,
+        title: "Create Formatting Rule"
+      }],
+      conditionalFormatEditIndex: conditionalFormats.length,
+      // Start with a blank rule
+      conditionalFormatPreview: undefined
+    });
+  }
+
+  handleConditionalFormatEdit(index) {
+    log.debug('Edit conditional format', index);
+    var {
+      openOptions,
+      conditionalFormats
+    } = this.state;
+    this.setState({
+      openOptions: [...openOptions, {
+        type: OptionType.CONDITIONAL_FORMATTING_EDIT,
+        title: "Edit Formatting Rule"
+      }],
+      conditionalFormatEditIndex: index,
+      // Clone rule to preview temporary changes
+      conditionalFormatPreview: _objectSpread({}, conditionalFormats[index])
+    });
+  } // Apply live changes
+
+
+  handleConditionalFormatEditorUpdate(conditionalFormatPreview) {
+    this.setState({
+      conditionalFormatPreview
+    });
+  }
+
+  handleConditionalFormatEditorSave(config) {
+    log.debug('Save conditional format changes', config);
+    this.setState(state => {
+      if (state.conditionalFormatEditIndex === null) {
+        log.debug('Invalid format index');
+        return null;
+      }
+
+      var conditionalFormats = [...state.conditionalFormats];
+      conditionalFormats[state.conditionalFormatEditIndex] = config;
+      return {
+        conditionalFormats
+      };
+    }, () => {
+      this.handleMenuBack();
+    });
+  }
+
+  handleConditionalFormatEditorCancel() {
+    this.handleMenuBack(); // Not resetting conditionalFormatPreview here
+    // to prevent editor fields change during the menu transition
+
+    this.setState({
+      conditionalFormatEditIndex: null
+    });
+  }
+
   handleUpdateCustomColumns(customColumns) {
     log.info("handleUpdateCustomColumns:", customColumns);
     var {
@@ -2407,7 +2520,8 @@ export class IrisGrid extends Component {
   render() {
     var _rollupConfig$columns3,
         _rollupConfig$columns4,
-        _this4 = this;
+        _this4 = this,
+        _openOptions;
 
     var {
       children,
@@ -2453,6 +2567,9 @@ export class IrisGrid extends Component {
       movedColumns,
       movedRows,
       formatter,
+      conditionalFormats,
+      conditionalFormatPreview,
+      conditionalFormatEditIndex,
       sorts,
       reverseType,
       customColumns,
@@ -2854,7 +2971,7 @@ export class IrisGrid extends Component {
       }
     }
 
-    var optionItems = this.getCachedOptionItems(model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable());
+    var optionItems = this.getCachedOptionItems(model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable());
     var openOptionsStack = openOptions.map(option => {
       switch (option.type) {
         case OptionType.CHART_BUILDER:
@@ -2875,6 +2992,24 @@ export class IrisGrid extends Component {
             key: OptionType.VISIBILITY_ORDERING_BUILDER
           });
 
+        case OptionType.CONDITIONAL_FORMATTING:
+          return /*#__PURE__*/React.createElement(ConditionalFormattingMenu, {
+            columns: model.columns,
+            rules: conditionalFormats,
+            onChange: this.handleConditionalFormatsChange,
+            onCreate: this.handleConditionalFormatCreate,
+            onSelect: this.handleConditionalFormatEdit
+          });
+
+        case OptionType.CONDITIONAL_FORMATTING_EDIT:
+          return /*#__PURE__*/React.createElement(ConditionalFormatEditor, {
+            columns: model.columns,
+            rule: conditionalFormatPreview,
+            onUpdate: this.handleConditionalFormatEditorUpdate,
+            onSave: this.handleConditionalFormatEditorSave,
+            onCancel: this.handleConditionalFormatEditorCancel
+          });
+
         case OptionType.CUSTOM_COLUMN_BUILDER:
           return /*#__PURE__*/React.createElement(CustomColumnBuilder, {
             model: model,
@@ -3030,6 +3165,8 @@ export class IrisGrid extends Component {
       customColumns: customColumns,
       hiddenColumns: hiddenColumns,
       alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, model.floatingLeftColumnCount, model.floatingRightColumnCount),
+      formatColumns: this.getCachedPreviewFormatColumns(this.getCachedModelColumns(model, customColumns), conditionalFormats, conditionalFormatPreview, // Disable the preview format when we press Back on the format edit page
+      ((_openOptions = openOptions[openOptions.length - 1]) === null || _openOptions === void 0 ? void 0 : _openOptions.type) === OptionType.CONDITIONAL_FORMATTING_EDIT ? conditionalFormatEditIndex : null),
       rollupConfig: this.getModelRollupConfig(model.originalColumns, rollupConfig, aggregationSettings),
       totalsConfig: this.getModelTotalsConfig(model.columns, rollupConfig, aggregationSettings),
       selectDistinctColumns: selectDistinctColumns,
@@ -3120,6 +3257,7 @@ IrisGrid.propTypes = {
   alwaysFetchColumns: PropTypes.arrayOf(PropTypes.string),
   isFilterBarShown: PropTypes.bool,
   applyInputFiltersOnInit: PropTypes.bool,
+  conditionalFormats: PropTypes.arrayOf(PropTypes.shape({})),
   customColumnFormatMap: PropTypes.instanceOf(Map),
   movedColumns: PropTypes.arrayOf(PropTypes.shape({
     from: PropTypes.number.isRequired,
@@ -3206,6 +3344,7 @@ IrisGrid.defaultProps = {
   advancedFilters: new Map(),
   advancedSettings: new Map(),
   alwaysFetchColumns: [],
+  conditionalFormats: [],
   customColumnFormatMap: new Map(),
   isFilterBarShown: false,
   applyInputFiltersOnInit: false,