@deephaven/iris-grid 0.9.4-plugins.9 → 0.10.1-beta.0

package/dist/sidebar/conditional-formatting/ColumnFormatEditor.js

@@ -0,0 +1,132 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { useCallback, useEffect, useState } from 'react';
+import Log from '@deephaven/log';
+import { ComboBox } from '@deephaven/components';
+import { getDefaultConditionConfigForType, getConditionConfig, getDefaultStyleConfig } from "./ConditionalFormattingUtils.js";
+import ConditionEditor from "./ConditionEditor.js";
+import StyleEditor from "./StyleEditor.js";
+var log = Log.module('ColumnFormatEditor');
+
+var DEFAULT_CALLBACK = () => undefined;
+
+function makeDefaultConfig(columns) {
+  var {
+    type,
+    name
+  } = columns[0];
+  var column = {
+    type,
+    name
+  };
+
+  var config = _objectSpread({
+    column,
+    style: getDefaultStyleConfig()
+  }, getDefaultConditionConfigForType(type));
+
+  return config;
+}
+
+var ColumnFormatEditor = props => {
+  var _columns$find;
+
+  var {
+    columns,
+    config = makeDefaultConfig(columns),
+    onChange = DEFAULT_CALLBACK
+  } = props;
+  var [selectedColumn, setColumn] = useState((_columns$find = columns.find(c => c.name === config.column.name && c.type === config.column.type)) !== null && _columns$find !== void 0 ? _columns$find : columns[0]);
+  var [conditionConfig, setConditionConfig] = useState(getConditionConfig(config));
+  var [conditionValid, setConditionValid] = useState(false);
+  var [selectedStyle, setStyle] = useState(config.style);
+  var handleColumnChange = useCallback(value => {
+    var newColumn = columns.find(_ref => {
+      var {
+        name
+      } = _ref;
+      return name === value;
+    });
+
+    if (newColumn !== undefined) {
+      setColumn(newColumn);
+
+      if (selectedColumn.type !== newColumn.type) {
+        setConditionConfig(getDefaultConditionConfigForType(newColumn.type));
+        setConditionValid(false);
+      }
+    } else {
+      log.error("Column ".concat(value, " not found."));
+    }
+  }, [columns, selectedColumn]);
+  var handleConditionChange = useCallback((updatedConditionConfig, isValid) => {
+    log.debug('handleConditionChange', updatedConditionConfig, isValid);
+    setConditionConfig(updatedConditionConfig);
+    setConditionValid(isValid);
+  }, []);
+  var handleStyleChange = useCallback(updatedStyleConfig => {
+    log.debug('handleStyleChange', updatedStyleConfig);
+    setStyle(updatedStyleConfig);
+  }, []);
+  useEffect(() => {
+    if (selectedColumn === undefined) {
+      log.debug('Column is not selected, skip update.');
+      return;
+    }
+
+    if (selectedStyle === undefined) {
+      log.debug('Style is not selected, skip update.');
+      return;
+    }
+
+    var {
+      type,
+      name
+    } = selectedColumn;
+    var column = {
+      type,
+      name
+    };
+    onChange(_objectSpread({
+      column,
+      style: selectedStyle
+    }, conditionConfig), conditionValid);
+  }, [onChange, selectedColumn, selectedStyle, conditionConfig, conditionValid]);
+  var columnInputOptions = columns.map(_ref2 => {
+    var {
+      name
+    } = _ref2;
+    return {
+      title: name,
+      value: name
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "conditional-rule-editor form"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "mb-0"
+  }, "Format Cell If"), /*#__PURE__*/React.createElement(ComboBox, {
+    defaultValue: selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.name,
+    options: columnInputOptions,
+    inputPlaceholder: "Select a column",
+    spellCheck: false,
+    onChange: handleColumnChange,
+    searchPlaceholder: "Filter columns"
+  })), selectedColumn !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConditionEditor, {
+    column: selectedColumn,
+    config: conditionConfig,
+    onChange: handleConditionChange
+  }), /*#__PURE__*/React.createElement(StyleEditor, {
+    config: selectedStyle,
+    onChange: handleStyleChange
+  })));
+};
+
+export default ColumnFormatEditor;
+//# sourceMappingURL=ColumnFormatEditor.js.map

package/dist/sidebar/conditional-formatting/ColumnFormatEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ColumnFormatEditor.tsx"],"names":["React","useCallback","useEffect","useState","Log","ComboBox","getDefaultConditionConfigForType","getConditionConfig","getDefaultStyleConfig","ConditionEditor","StyleEditor","log","module","DEFAULT_CALLBACK","undefined","makeDefaultConfig","columns","type","name","column","config","style","ColumnFormatEditor","props","onChange","selectedColumn","setColumn","find","c","conditionConfig","setConditionConfig","conditionValid","setConditionValid","selectedStyle","setStyle","handleColumnChange","value","newColumn","error","handleConditionChange","updatedConditionConfig","isValid","debug","handleStyleChange","updatedStyleConfig","columnInputOptions","map","title"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { ComboBox } from '@deephaven/components';\nimport {\n  BaseFormatConfig,\n  ChangeCallback,\n  getDefaultConditionConfigForType,\n  getConditionConfig,\n  getDefaultStyleConfig,\n  ModelColumn,\n} from './ConditionalFormattingUtils';\nimport ConditionEditor from './ConditionEditor';\nimport StyleEditor from './StyleEditor';\n\nconst log = Log.module('ColumnFormatEditor');\n\nexport interface ColumnFormatEditorProps {\n  columns: ModelColumn[];\n  config?: BaseFormatConfig;\n  onChange?: ChangeCallback;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction makeDefaultConfig(columns: ModelColumn[]): BaseFormatConfig {\n  const { type, name } = columns[0];\n  const column = { type, name };\n  const config = {\n    column,\n    style: getDefaultStyleConfig(),\n    ...getDefaultConditionConfigForType(type),\n  };\n  return config;\n}\n\nconst ColumnFormatEditor = (props: ColumnFormatEditorProps): JSX.Element => {\n  const {\n    columns,\n    config = makeDefaultConfig(columns),\n    onChange = DEFAULT_CALLBACK,\n  } = props;\n\n  const [selectedColumn, setColumn] = useState(\n    columns.find(\n      c => c.name === config.column.name && c.type === config.column.type\n    ) ?? columns[0]\n  );\n  const [conditionConfig, setConditionConfig] = useState(\n    getConditionConfig(config)\n  );\n  const [conditionValid, setConditionValid] = useState(false);\n  const [selectedStyle, setStyle] = useState(config.style);\n\n  const handleColumnChange = useCallback(\n    value => {\n      const newColumn = columns.find(({ name }) => name === value);\n      if (newColumn !== undefined) {\n        setColumn(newColumn);\n        if (selectedColumn.type !== newColumn.type) {\n          setConditionConfig(getDefaultConditionConfigForType(newColumn.type));\n          setConditionValid(false);\n        }\n      } else {\n        log.error(`Column ${value} not found.`);\n      }\n    },\n    [columns, selectedColumn]\n  );\n\n  const handleConditionChange = useCallback(\n    (updatedConditionConfig, isValid) => {\n      log.debug('handleConditionChange', updatedConditionConfig, isValid);\n      setConditionConfig(updatedConditionConfig);\n      setConditionValid(isValid);\n    },\n    []\n  );\n\n  const handleStyleChange = useCallback(updatedStyleConfig => {\n    log.debug('handleStyleChange', updatedStyleConfig);\n    setStyle(updatedStyleConfig);\n  }, []);\n\n  useEffect(() => {\n    if (selectedColumn === undefined) {\n      log.debug('Column is not selected, skip update.');\n      return;\n    }\n    if (selectedStyle === undefined) {\n      log.debug('Style is not selected, skip update.');\n      return;\n    }\n    const { type, name } = selectedColumn;\n    const column = { type, name };\n    onChange(\n      {\n        column,\n        style: selectedStyle,\n        ...conditionConfig,\n      },\n      conditionValid\n    );\n  }, [\n    onChange,\n    selectedColumn,\n    selectedStyle,\n    conditionConfig,\n    conditionValid,\n  ]);\n\n  const columnInputOptions = columns.map(({ name }) => ({\n    title: name,\n    value: name,\n  }));\n\n  return (\n    <div className=\"conditional-rule-editor form\">\n      <div className=\"mb-2\">\n        <label className=\"mb-0\">Format Cell If</label>\n        <ComboBox\n          defaultValue={selectedColumn?.name}\n          options={columnInputOptions}\n          inputPlaceholder=\"Select a column\"\n          spellCheck={false}\n          onChange={handleColumnChange}\n          searchPlaceholder=\"Filter columns\"\n        />\n      </div>\n\n      {selectedColumn !== undefined && (\n        <>\n          <ConditionEditor\n            column={selectedColumn}\n            config={conditionConfig}\n            onChange={handleConditionChange}\n          />\n          <StyleEditor config={selectedStyle} onChange={handleStyleChange} />\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default ColumnFormatEditor;\n"],"file":"ColumnFormatEditor.js"}

package/dist/sidebar/conditional-formatting/ConditionEditor.d.ts

@@ -0,0 +1,9 @@
+import { ModelColumn, ConditionConfig } from './ConditionalFormattingUtils';
+export interface ConditionEditorProps {
+    column: ModelColumn;
+    config: ConditionConfig;
+    onChange?: (config: ConditionConfig, isValid: boolean) => void;
+}
+declare const ConditionEditor: (props: ConditionEditorProps) => JSX.Element;
+export default ConditionEditor;
+//# sourceMappingURL=ConditionEditor.d.ts.map

package/dist/sidebar/conditional-formatting/ConditionEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAOL,WAAW,EACX,eAAe,EAMhB,MAAM,8BAA8B,CAAC;AAItC,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAgOD,QAAA,MAAM,eAAe,UAAW,oBAAoB,KAAG,WAwKtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/sidebar/conditional-formatting/ConditionEditor.js

@@ -0,0 +1,273 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Log from '@deephaven/log';
+import TableUtils from "../../TableUtils.js";
+import { StringCondition, DateCondition, getLabelForNumberCondition, getLabelForDateCondition, getLabelForStringCondition, NumberCondition, getDefaultConditionForType, getLabelForBooleanCondition, BooleanCondition, CharCondition, getLabelForCharCondition } from "./ConditionalFormattingUtils.js";
+var log = Log.module('ConditionEditor');
+
+var DEFAULT_CALLBACK = () => undefined;
+
+var numberConditionOptions = [NumberCondition.IS_EQUAL, NumberCondition.IS_NOT_EQUAL, NumberCondition.IS_BETWEEN, NumberCondition.GREATER_THAN, NumberCondition.GREATER_THAN_OR_EQUAL, NumberCondition.LESS_THAN, NumberCondition.LESS_THAN_OR_EQUAL, NumberCondition.IS_NULL, NumberCondition.IS_NOT_NULL].map(option => /*#__PURE__*/React.createElement("option", {
+  key: option,
+  value: option
+}, getLabelForNumberCondition(option)));
+var stringConditions = [StringCondition.IS_EXACTLY, StringCondition.IS_NOT_EXACTLY, StringCondition.CONTAINS, StringCondition.DOES_NOT_CONTAIN, StringCondition.STARTS_WITH, StringCondition.ENDS_WITH, StringCondition.IS_NULL, StringCondition.IS_NOT_NULL].map(option => /*#__PURE__*/React.createElement("option", {
+  key: option,
+  value: option
+}, getLabelForStringCondition(option)));
+var dateConditions = [DateCondition.IS_EXACTLY, DateCondition.IS_NOT_EXACTLY, DateCondition.IS_BEFORE, DateCondition.IS_BEFORE_OR_EQUAL, DateCondition.IS_AFTER, DateCondition.IS_AFTER_OR_EQUAL, DateCondition.IS_NULL, DateCondition.IS_NOT_NULL].map(option => /*#__PURE__*/React.createElement("option", {
+  key: option,
+  value: option
+}, getLabelForDateCondition(option)));
+var booleanConditions = [BooleanCondition.IS_TRUE, BooleanCondition.IS_FALSE, BooleanCondition.IS_NULL, BooleanCondition.IS_NOT_NULL].map(option => /*#__PURE__*/React.createElement("option", {
+  key: option,
+  value: option
+}, getLabelForBooleanCondition(option)));
+var charConditions = [CharCondition.IS_EQUAL, CharCondition.IS_NOT_EQUAL, CharCondition.IS_NULL, CharCondition.IS_NOT_NULL].map(option => /*#__PURE__*/React.createElement("option", {
+  key: option,
+  value: option
+}, getLabelForCharCondition(option)));
+
+function isNumberConditionValid(condition, value, startValue, endValue) {
+  if (condition === NumberCondition.IS_NULL || condition === NumberCondition.IS_NOT_NULL) {
+    return true;
+  }
+
+  if (condition === NumberCondition.IS_BETWEEN && startValue && !Number.isNaN(Number.parseFloat(startValue)) && endValue && !Number.isNaN(Number.parseFloat(endValue))) {
+    return true;
+  }
+
+  if (condition !== NumberCondition.IS_BETWEEN && value && !Number.isNaN(Number.parseFloat(value))) {
+    return true;
+  }
+
+  return false;
+}
+
+function getNumberInputs(selectedCondition, handleValueChange, handleStartValueChange, handleEndValueChange, conditionValue, startValue, endValue) {
+  switch (selectedCondition) {
+    case NumberCondition.IS_EQUAL:
+    case NumberCondition.IS_NOT_EQUAL:
+    case NumberCondition.GREATER_THAN:
+    case NumberCondition.GREATER_THAN_OR_EQUAL:
+    case NumberCondition.LESS_THAN:
+    case NumberCondition.LESS_THAN_OR_EQUAL:
+      return /*#__PURE__*/React.createElement("input", {
+        type: "number",
+        className: "form-control",
+        placeholder: "Enter value",
+        value: conditionValue !== null && conditionValue !== void 0 ? conditionValue : '',
+        onChange: handleValueChange
+      });
+
+    case NumberCondition.IS_BETWEEN:
+      return /*#__PURE__*/React.createElement("div", {
+        className: "d-flex flex-row"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "number",
+        className: "form-control d-flex mr-2",
+        placeholder: "Start value",
+        value: startValue !== null && startValue !== void 0 ? startValue : '',
+        onChange: handleStartValueChange
+      }), /*#__PURE__*/React.createElement("input", {
+        type: "number",
+        className: "form-control d-flex",
+        placeholder: "End value",
+        value: endValue !== null && endValue !== void 0 ? endValue : '',
+        onChange: handleEndValueChange
+      }));
+
+    case NumberCondition.IS_NULL:
+    case NumberCondition.IS_NOT_NULL:
+      return null;
+  }
+}
+
+function getStringInputs(selectedCondition, handleValueChange, conditionValue) {
+  switch (selectedCondition) {
+    case StringCondition.IS_NULL:
+    case StringCondition.IS_NOT_NULL:
+      return null;
+
+    default:
+      return /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        className: "form-control",
+        placeholder: "Enter value",
+        value: conditionValue !== null && conditionValue !== void 0 ? conditionValue : '',
+        onChange: handleValueChange
+      });
+  }
+}
+
+function getDateInputs(selectedCondition, handleValueChange, conditionValue) {
+  switch (selectedCondition) {
+    case DateCondition.IS_NULL:
+    case DateCondition.IS_NOT_NULL:
+      return null;
+
+    default:
+      return /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        className: "form-control",
+        placeholder: "Enter value",
+        value: conditionValue !== null && conditionValue !== void 0 ? conditionValue : '',
+        onChange: handleValueChange
+      });
+  }
+}
+
+function getBooleanInputs() {
+  return null;
+}
+
+function getCharInputs(selectedCondition, handleValueChange, conditionValue) {
+  switch (selectedCondition) {
+    case CharCondition.IS_NULL:
+    case CharCondition.IS_NOT_NULL:
+      return null;
+
+    default:
+      return /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        className: "form-control",
+        maxLength: 1,
+        placeholder: "Enter value",
+        value: conditionValue !== null && conditionValue !== void 0 ? conditionValue : '',
+        onChange: handleValueChange
+      });
+  }
+}
+
+var ConditionEditor = props => {
+  var {
+    column,
+    config,
+    onChange = DEFAULT_CALLBACK
+  } = props;
+  var selectedColumnType = column.type;
+  var [prevColumnType, setPrevColumnType] = useState(selectedColumnType);
+  var [selectedCondition, setCondition] = useState(config.condition);
+  var [conditionValue, setValue] = useState(config.value);
+  var [startValue, setStartValue] = useState(config.start);
+  var [endValue, setEndValue] = useState(config.end);
+
+  if (selectedColumnType !== prevColumnType) {
+    // Column type changed, reset condition and value fields
+    setCondition(getDefaultConditionForType(selectedColumnType));
+    setValue(undefined);
+    setStartValue(undefined);
+    setEndValue(undefined);
+    setPrevColumnType(selectedColumnType);
+  }
+
+  var conditions = useMemo(() => {
+    if (selectedColumnType === undefined) {
+      return [];
+    }
+
+    if (TableUtils.isNumberType(selectedColumnType)) {
+      return numberConditionOptions;
+    }
+
+    if (TableUtils.isCharType(selectedColumnType)) {
+      return charConditions;
+    }
+
+    if (TableUtils.isTextType(selectedColumnType)) {
+      return stringConditions;
+    }
+
+    if (TableUtils.isDateType(selectedColumnType)) {
+      return dateConditions;
+    }
+
+    if (TableUtils.isBooleanType(selectedColumnType)) {
+      return booleanConditions;
+    }
+  }, [selectedColumnType]);
+  var handleConditionChange = useCallback(e => {
+    var {
+      value
+    } = e.target;
+    log.debug('handleConditionChange', value);
+    setCondition(value);
+  }, []);
+  var handleValueChange = useCallback(e => {
+    var {
+      value
+    } = e.target;
+    log.debug('handleValueChange', value);
+    setValue(value);
+  }, []);
+  var handleStartValueChange = useCallback(e => {
+    var {
+      value
+    } = e.target;
+    log.debug('handleStartValueChange', value);
+    setStartValue(value);
+  }, []);
+  var handleEndValueChange = useCallback(e => {
+    var {
+      value
+    } = e.target;
+    log.debug('handleEndValueChange', value);
+    setEndValue(value);
+  }, []);
+  useEffect(() => {
+    var isValid = true;
+
+    if (selectedCondition === undefined) {
+      log.debug('Unable to create formatting rule. Condition is not selected.');
+      isValid = false;
+    }
+
+    if (TableUtils.isNumberType(column.type) && !isNumberConditionValid(selectedCondition, conditionValue, startValue, endValue)) {
+      log.debug('Unable to create formatting rule. Invalid value', conditionValue);
+      isValid = false;
+    }
+
+    onChange({
+      condition: selectedCondition,
+      value: conditionValue,
+      start: startValue,
+      end: endValue
+    }, isValid);
+  }, [onChange, column.type, selectedCondition, conditionValue, startValue, endValue]);
+  var conditionInputs = useMemo(() => {
+    if (selectedColumnType === undefined) {
+      // Column not selected
+      return null;
+    }
+
+    if (TableUtils.isNumberType(selectedColumnType)) {
+      return getNumberInputs(selectedCondition, handleValueChange, handleStartValueChange, handleEndValueChange, conditionValue, startValue, endValue);
+    }
+
+    if (TableUtils.isCharType(selectedColumnType)) {
+      return getCharInputs(selectedCondition, handleValueChange, conditionValue);
+    }
+
+    if (TableUtils.isTextType(selectedColumnType)) {
+      return getStringInputs(selectedCondition, handleValueChange, conditionValue);
+    }
+
+    if (TableUtils.isDateType(selectedColumnType)) {
+      return getDateInputs(selectedCondition, handleValueChange, conditionValue);
+    }
+
+    if (TableUtils.isBooleanType(selectedColumnType)) {
+      return getBooleanInputs();
+    }
+  }, [selectedColumnType, selectedCondition, conditionValue, startValue, endValue, handleValueChange, handleStartValueChange, handleEndValueChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "condition-editor mb-2"
+  }, /*#__PURE__*/React.createElement("select", {
+    value: selectedCondition,
+    id: "condition-select",
+    className: "custom-select mb-2",
+    onChange: handleConditionChange
+  }, conditions), conditionInputs);
+};
+
+export default ConditionEditor;
+//# sourceMappingURL=ConditionEditor.js.map

package/dist/sidebar/conditional-formatting/ConditionEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"names":["React","useCallback","useEffect","useMemo","useState","Log","TableUtils","StringCondition","DateCondition","getLabelForNumberCondition","getLabelForDateCondition","getLabelForStringCondition","NumberCondition","getDefaultConditionForType","getLabelForBooleanCondition","BooleanCondition","CharCondition","getLabelForCharCondition","log","module","DEFAULT_CALLBACK","undefined","numberConditionOptions","IS_EQUAL","IS_NOT_EQUAL","IS_BETWEEN","GREATER_THAN","GREATER_THAN_OR_EQUAL","LESS_THAN","LESS_THAN_OR_EQUAL","IS_NULL","IS_NOT_NULL","map","option","stringConditions","IS_EXACTLY","IS_NOT_EXACTLY","CONTAINS","DOES_NOT_CONTAIN","STARTS_WITH","ENDS_WITH","dateConditions","IS_BEFORE","IS_BEFORE_OR_EQUAL","IS_AFTER","IS_AFTER_OR_EQUAL","booleanConditions","IS_TRUE","IS_FALSE","charConditions","isNumberConditionValid","condition","value","startValue","endValue","Number","isNaN","parseFloat","getNumberInputs","selectedCondition","handleValueChange","handleStartValueChange","handleEndValueChange","conditionValue","getStringInputs","getDateInputs","getBooleanInputs","getCharInputs","ConditionEditor","props","column","config","onChange","selectedColumnType","type","prevColumnType","setPrevColumnType","setCondition","setValue","setStartValue","start","setEndValue","end","conditions","isNumberType","isCharType","isTextType","isDateType","isBooleanType","handleConditionChange","e","target","debug","isValid","conditionInputs"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,QAAjD,QAAiE,OAAjE;AACA,OAAOC,GAAP,MAAgB,gBAAhB;OACOC,U;SAELC,e,EACAC,a,EACAC,0B,EACAC,wB,EACAC,0B,EACAC,e,EAGAC,0B,EACAC,2B,EACAC,gB,EACAC,a,EACAC,wB;AAGF,IAAMC,GAAG,GAAGb,GAAG,CAACc,MAAJ,CAAW,iBAAX,CAAZ;;AAQA,IAAMC,gBAAgB,GAAG,MAAMC,SAA/B;;AAEA,IAAMC,sBAAsB,GAAG,CAC7BV,eAAe,CAACW,QADa,EAE7BX,eAAe,CAACY,YAFa,EAG7BZ,eAAe,CAACa,UAHa,EAI7Bb,eAAe,CAACc,YAJa,EAK7Bd,eAAe,CAACe,qBALa,EAM7Bf,eAAe,CAACgB,SANa,EAO7BhB,eAAe,CAACiB,kBAPa,EAQ7BjB,eAAe,CAACkB,OARa,EAS7BlB,eAAe,CAACmB,WATa,EAU7BC,GAV6B,CAUzBC,MAAM,iBACV;AAAQ,EAAA,GAAG,EAAEA,MAAb;AAAqB,EAAA,KAAK,EAAEA;AAA5B,GACGxB,0BAA0B,CAACwB,MAAD,CAD7B,CAX6B,CAA/B;AAgBA,IAAMC,gBAAgB,GAAG,CACvB3B,eAAe,CAAC4B,UADO,EAEvB5B,eAAe,CAAC6B,cAFO,EAGvB7B,eAAe,CAAC8B,QAHO,EAIvB9B,eAAe,CAAC+B,gBAJO,EAKvB/B,eAAe,CAACgC,WALO,EAMvBhC,eAAe,CAACiC,SANO,EAOvBjC,eAAe,CAACuB,OAPO,EAQvBvB,eAAe,CAACwB,WARO,EASvBC,GATuB,CASnBC,MAAM,iBACV;AAAQ,EAAA,GAAG,EAAEA,MAAb;AAAqB,EAAA,KAAK,EAAEA;AAA5B,GACGtB,0BAA0B,CAACsB,MAAD,CAD7B,CAVuB,CAAzB;AAeA,IAAMQ,cAAc,GAAG,CACrBjC,aAAa,CAAC2B,UADO,EAErB3B,aAAa,CAAC4B,cAFO,EAGrB5B,aAAa,CAACkC,SAHO,EAIrBlC,aAAa,CAACmC,kBAJO,EAKrBnC,aAAa,CAACoC,QALO,EAMrBpC,aAAa,CAACqC,iBANO,EAOrBrC,aAAa,CAACsB,OAPO,EAQrBtB,aAAa,CAACuB,WARO,EASrBC,GATqB,CASjBC,MAAM,iBACV;AAAQ,EAAA,GAAG,EAAEA,MAAb;AAAqB,EAAA,KAAK,EAAEA;AAA5B,GACGvB,wBAAwB,CAACuB,MAAD,CAD3B,CAVqB,CAAvB;AAeA,IAAMa,iBAAiB,GAAG,CACxB/B,gBAAgB,CAACgC,OADO,EAExBhC,gBAAgB,CAACiC,QAFO,EAGxBjC,gBAAgB,CAACe,OAHO,EAIxBf,gBAAgB,CAACgB,WAJO,EAKxBC,GALwB,CAKpBC,MAAM,iBACV;AAAQ,EAAA,GAAG,EAAEA,MAAb;AAAqB,EAAA,KAAK,EAAEA;AAA5B,GACGnB,2BAA2B,CAACmB,MAAD,CAD9B,CANwB,CAA1B;AAWA,IAAMgB,cAAc,GAAG,CACrBjC,aAAa,CAACO,QADO,EAErBP,aAAa,CAACQ,YAFO,EAGrBR,aAAa,CAACc,OAHO,EAIrBd,aAAa,CAACe,WAJO,EAKrBC,GALqB,CAKjBC,MAAM,iBACV;AAAQ,EAAA,GAAG,EAAEA,MAAb;AAAqB,EAAA,KAAK,EAAEA;AAA5B,GACGhB,wBAAwB,CAACgB,MAAD,CAD3B,CANqB,CAAvB;;AAWA,SAASiB,sBAAT,CACEC,SADF,EAEEC,KAFF,EAGEC,UAHF,EAIEC,QAJF,EAKE;AACA,MACEH,SAAS,KAAKvC,eAAe,CAACkB,OAA9B,IACAqB,SAAS,KAAKvC,eAAe,CAACmB,WAFhC,EAGE;AACA,WAAO,IAAP;AACD;;AACD,MACEoB,SAAS,KAAKvC,eAAe,CAACa,UAA9B,IACA4B,UADA,IAEA,CAACE,MAAM,CAACC,KAAP,CAAaD,MAAM,CAACE,UAAP,CAAkBJ,UAAlB,CAAb,CAFD,IAGAC,QAHA,IAIA,CAACC,MAAM,CAACC,KAAP,CAAaD,MAAM,CAACE,UAAP,CAAkBH,QAAlB,CAAb,CALH,EAME;AACA,WAAO,IAAP;AACD;;AACD,MACEH,SAAS,KAAKvC,eAAe,CAACa,UAA9B,IACA2B,KADA,IAEA,CAACG,MAAM,CAACC,KAAP,CAAaD,MAAM,CAACE,UAAP,CAAkBL,KAAlB,CAAb,CAHH,EAIE;AACA,WAAO,IAAP;AACD;;AACD,SAAO,KAAP;AACD;;AAED,SAASM,eAAT,CACEC,iBADF,EAEEC,iBAFF,EAGEC,sBAHF,EAIEC,oBAJF,EAKEC,cALF,EAMEV,UANF,EAOEC,QAPF,EAQE;AACA,UAAQK,iBAAR;AACE,SAAK/C,eAAe,CAACW,QAArB;AACA,SAAKX,eAAe,CAACY,YAArB;AACA,SAAKZ,eAAe,CAACc,YAArB;AACA,SAAKd,eAAe,CAACe,qBAArB;AACA,SAAKf,eAAe,CAACgB,SAArB;AACA,SAAKhB,eAAe,CAACiB,kBAArB;AACE,0BACE;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,SAAS,EAAC,cAFZ;AAGE,QAAA,WAAW,EAAC,aAHd;AAIE,QAAA,KAAK,EAAEkC,cAAF,aAAEA,cAAF,cAAEA,cAAF,GAAoB,EAJ3B;AAKE,QAAA,QAAQ,EAAEH;AALZ,QADF;;AASF,SAAKhD,eAAe,CAACa,UAArB;AACE,0BACE;AAAK,QAAA,SAAS,EAAC;AAAf,sBACE;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,SAAS,EAAC,0BAFZ;AAGE,QAAA,WAAW,EAAC,aAHd;AAIE,QAAA,KAAK,EAAE4B,UAAF,aAAEA,UAAF,cAAEA,UAAF,GAAgB,EAJvB;AAKE,QAAA,QAAQ,EAAEQ;AALZ,QADF,eAQE;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,SAAS,EAAC,qBAFZ;AAGE,QAAA,WAAW,EAAC,WAHd;AAIE,QAAA,KAAK,EAAEP,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc,EAJrB;AAKE,QAAA,QAAQ,EAAEQ;AALZ,QARF,CADF;;AAkBF,SAAKlD,eAAe,CAACkB,OAArB;AACA,SAAKlB,eAAe,CAACmB,WAArB;AACE,aAAO,IAAP;AArCJ;AAuCD;;AAED,SAASiC,eAAT,CACEL,iBADF,EAEEC,iBAFF,EAGEG,cAHF,EAIE;AACA,UAAQJ,iBAAR;AACE,SAAKpD,eAAe,CAACuB,OAArB;AACA,SAAKvB,eAAe,CAACwB,WAArB;AACE,aAAO,IAAP;;AACF;AACE,0BACE;AACE,QAAA,IAAI,EAAC,MADP;AAEE,QAAA,SAAS,EAAC,cAFZ;AAGE,QAAA,WAAW,EAAC,aAHd;AAIE,QAAA,KAAK,EAAEgC,cAAF,aAAEA,cAAF,cAAEA,cAAF,GAAoB,EAJ3B;AAKE,QAAA,QAAQ,EAAEH;AALZ,QADF;AALJ;AAeD;;AAED,SAASK,aAAT,CACEN,iBADF,EAEEC,iBAFF,EAGEG,cAHF,EAIE;AACA,UAAQJ,iBAAR;AACE,SAAKnD,aAAa,CAACsB,OAAnB;AACA,SAAKtB,aAAa,CAACuB,WAAnB;AACE,aAAO,IAAP;;AACF;AACE,0BACE;AACE,QAAA,IAAI,EAAC,MADP;AAEE,QAAA,SAAS,EAAC,cAFZ;AAGE,QAAA,WAAW,EAAC,aAHd;AAIE,QAAA,KAAK,EAAEgC,cAAF,aAAEA,cAAF,cAAEA,cAAF,GAAoB,EAJ3B;AAKE,QAAA,QAAQ,EAAEH;AALZ,QADF;AALJ;AAeD;;AAED,SAASM,gBAAT,GAA4B;AAC1B,SAAO,IAAP;AACD;;AAED,SAASC,aAAT,CACER,iBADF,EAEEC,iBAFF,EAGEG,cAHF,EAIE;AACA,UAAQJ,iBAAR;AACE,SAAK3C,aAAa,CAACc,OAAnB;AACA,SAAKd,aAAa,CAACe,WAAnB;AACE,aAAO,IAAP;;AACF;AACE,0BACE;AACE,QAAA,IAAI,EAAC,MADP;AAEE,QAAA,SAAS,EAAC,cAFZ;AAGE,QAAA,SAAS,EAAE,CAHb;AAIE,QAAA,WAAW,EAAC,aAJd;AAKE,QAAA,KAAK,EAAEgC,cAAF,aAAEA,cAAF,cAAEA,cAAF,GAAoB,EAL3B;AAME,QAAA,QAAQ,EAAEH;AANZ,QADF;AALJ;AAgBD;;AAED,IAAMQ,eAAe,GAAIC,KAAD,IAA8C;AACpE,MAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,MAAV;AAAkBC,IAAAA,QAAQ,GAAGpD;AAA7B,MAAkDiD,KAAxD;AACA,MAAMI,kBAAkB,GAAGH,MAAM,CAACI,IAAlC;AACA,MAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCxE,QAAQ,CAACqE,kBAAD,CAApD;AACA,MAAM,CAACd,iBAAD,EAAoBkB,YAApB,IAAoCzE,QAAQ,CAACmE,MAAM,CAACpB,SAAR,CAAlD;AACA,MAAM,CAACY,cAAD,EAAiBe,QAAjB,IAA6B1E,QAAQ,CAACmE,MAAM,CAACnB,KAAR,CAA3C;AACA,MAAM,CAACC,UAAD,EAAa0B,aAAb,IAA8B3E,QAAQ,CAACmE,MAAM,CAACS,KAAR,CAA5C;AACA,MAAM,CAAC1B,QAAD,EAAW2B,WAAX,IAA0B7E,QAAQ,CAACmE,MAAM,CAACW,GAAR,CAAxC;;AAEA,MAAIT,kBAAkB,KAAKE,cAA3B,EAA2C;AACzC;AACAE,IAAAA,YAAY,CAAChE,0BAA0B,CAAC4D,kBAAD,CAA3B,CAAZ;AACAK,IAAAA,QAAQ,CAACzD,SAAD,CAAR;AACA0D,IAAAA,aAAa,CAAC1D,SAAD,CAAb;AACA4D,IAAAA,WAAW,CAAC5D,SAAD,CAAX;AACAuD,IAAAA,iBAAiB,CAACH,kBAAD,CAAjB;AACD;;AAED,MAAMU,UAAU,GAAGhF,OAAO,CAAC,MAAM;AAC/B,QAAIsE,kBAAkB,KAAKpD,SAA3B,EAAsC;AACpC,aAAO,EAAP;AACD;;AACD,QAAIf,UAAU,CAAC8E,YAAX,CAAwBX,kBAAxB,CAAJ,EAAiD;AAC/C,aAAOnD,sBAAP;AACD;;AACD,QAAIhB,UAAU,CAAC+E,UAAX,CAAsBZ,kBAAtB,CAAJ,EAA+C;AAC7C,aAAOxB,cAAP;AACD;;AACD,QAAI3C,UAAU,CAACgF,UAAX,CAAsBb,kBAAtB,CAAJ,EAA+C;AAC7C,aAAOvC,gBAAP;AACD;;AACD,QAAI5B,UAAU,CAACiF,UAAX,CAAsBd,kBAAtB,CAAJ,EAA+C;AAC7C,aAAOhC,cAAP;AACD;;AACD,QAAInC,UAAU,CAACkF,aAAX,CAAyBf,kBAAzB,CAAJ,EAAkD;AAChD,aAAO3B,iBAAP;AACD;AACF,GAnByB,EAmBvB,CAAC2B,kBAAD,CAnBuB,CAA1B;AAqBA,MAAMgB,qBAAqB,GAAGxF,WAAW,CAACyF,CAAC,IAAI;AAC7C,QAAM;AAAEtC,MAAAA;AAAF,QAAYsC,CAAC,CAACC,MAApB;AACAzE,IAAAA,GAAG,CAAC0E,KAAJ,CAAU,uBAAV,EAAmCxC,KAAnC;AACAyB,IAAAA,YAAY,CAACzB,KAAD,CAAZ;AACD,GAJwC,EAItC,EAJsC,CAAzC;AAMA,MAAMQ,iBAAiB,GAAG3D,WAAW,CAACyF,CAAC,IAAI;AACzC,QAAM;AAAEtC,MAAAA;AAAF,QAAYsC,CAAC,CAACC,MAApB;AACAzE,IAAAA,GAAG,CAAC0E,KAAJ,CAAU,mBAAV,EAA+BxC,KAA/B;AACA0B,IAAAA,QAAQ,CAAC1B,KAAD,CAAR;AACD,GAJoC,EAIlC,EAJkC,CAArC;AAMA,MAAMS,sBAAsB,GAAG5D,WAAW,CAACyF,CAAC,IAAI;AAC9C,QAAM;AAAEtC,MAAAA;AAAF,QAAYsC,CAAC,CAACC,MAApB;AACAzE,IAAAA,GAAG,CAAC0E,KAAJ,CAAU,wBAAV,EAAoCxC,KAApC;AACA2B,IAAAA,aAAa,CAAC3B,KAAD,CAAb;AACD,GAJyC,EAIvC,EAJuC,CAA1C;AAMA,MAAMU,oBAAoB,GAAG7D,WAAW,CAACyF,CAAC,IAAI;AAC5C,QAAM;AAAEtC,MAAAA;AAAF,QAAYsC,CAAC,CAACC,MAApB;AACAzE,IAAAA,GAAG,CAAC0E,KAAJ,CAAU,sBAAV,EAAkCxC,KAAlC;AACA6B,IAAAA,WAAW,CAAC7B,KAAD,CAAX;AACD,GAJuC,EAIrC,EAJqC,CAAxC;AAMAlD,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI2F,OAAO,GAAG,IAAd;;AAEA,QAAIlC,iBAAiB,KAAKtC,SAA1B,EAAqC;AACnCH,MAAAA,GAAG,CAAC0E,KAAJ,CAAU,8DAAV;AACAC,MAAAA,OAAO,GAAG,KAAV;AACD;;AAED,QACEvF,UAAU,CAAC8E,YAAX,CAAwBd,MAAM,CAACI,IAA/B,KACA,CAACxB,sBAAsB,CACrBS,iBADqB,EAErBI,cAFqB,EAGrBV,UAHqB,EAIrBC,QAJqB,CAFzB,EAQE;AACApC,MAAAA,GAAG,CAAC0E,KAAJ,CACE,iDADF,EAEE7B,cAFF;AAIA8B,MAAAA,OAAO,GAAG,KAAV;AACD;;AACDrB,IAAAA,QAAQ,CACN;AACErB,MAAAA,SAAS,EAAEQ,iBADb;AAEEP,MAAAA,KAAK,EAAEW,cAFT;AAGEiB,MAAAA,KAAK,EAAE3B,UAHT;AAIE6B,MAAAA,GAAG,EAAE5B;AAJP,KADM,EAONuC,OAPM,CAAR;AASD,GAhCQ,EAgCN,CACDrB,QADC,EAEDF,MAAM,CAACI,IAFN,EAGDf,iBAHC,EAIDI,cAJC,EAKDV,UALC,EAMDC,QANC,CAhCM,CAAT;AAyCA,MAAMwC,eAAe,GAAG3F,OAAO,CAAC,MAAM;AACpC,QAAIsE,kBAAkB,KAAKpD,SAA3B,EAAsC;AACpC;AACA,aAAO,IAAP;AACD;;AACD,QAAIf,UAAU,CAAC8E,YAAX,CAAwBX,kBAAxB,CAAJ,EAAiD;AAC/C,aAAOf,eAAe,CACpBC,iBADoB,EAEpBC,iBAFoB,EAGpBC,sBAHoB,EAIpBC,oBAJoB,EAKpBC,cALoB,EAMpBV,UANoB,EAOpBC,QAPoB,CAAtB;AASD;;AACD,QAAIhD,UAAU,CAAC+E,UAAX,CAAsBZ,kBAAtB,CAAJ,EAA+C;AAC7C,aAAON,aAAa,CAClBR,iBADkB,EAElBC,iBAFkB,EAGlBG,cAHkB,CAApB;AAKD;;AACD,QAAIzD,UAAU,CAACgF,UAAX,CAAsBb,kBAAtB,CAAJ,EAA+C;AAC7C,aAAOT,eAAe,CACpBL,iBADoB,EAEpBC,iBAFoB,EAGpBG,cAHoB,CAAtB;AAKD;;AACD,QAAIzD,UAAU,CAACiF,UAAX,CAAsBd,kBAAtB,CAAJ,EAA+C;AAC7C,aAAOR,aAAa,CAClBN,iBADkB,EAElBC,iBAFkB,EAGlBG,cAHkB,CAApB;AAKD;;AACD,QAAIzD,UAAU,CAACkF,aAAX,CAAyBf,kBAAzB,CAAJ,EAAkD;AAChD,aAAOP,gBAAgB,EAAvB;AACD;AACF,GAxC8B,EAwC5B,CACDO,kBADC,EAEDd,iBAFC,EAGDI,cAHC,EAIDV,UAJC,EAKDC,QALC,EAMDM,iBANC,EAODC,sBAPC,EAQDC,oBARC,CAxC4B,CAA/B;AAmDA,sBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AACE,IAAA,KAAK,EAAEH,iBADT;AAEE,IAAA,EAAE,EAAC,kBAFL;AAGE,IAAA,SAAS,EAAC,oBAHZ;AAIE,IAAA,QAAQ,EAAE8B;AAJZ,KAMGN,UANH,CADF,EASGW,eATH,CADF;AAaD,CAxKD;;AA0KA,eAAe1B,eAAf","sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport TableUtils from '../../TableUtils';\nimport {\n  StringCondition,\n  DateCondition,\n  getLabelForNumberCondition,\n  getLabelForDateCondition,\n  getLabelForStringCondition,\n  NumberCondition,\n  ModelColumn,\n  ConditionConfig,\n  getDefaultConditionForType,\n  getLabelForBooleanCondition,\n  BooleanCondition,\n  CharCondition,\n  getLabelForCharCondition,\n} from './ConditionalFormattingUtils';\n\nconst log = Log.module('ConditionEditor');\n\nexport interface ConditionEditorProps {\n  column: ModelColumn;\n  config: ConditionConfig;\n  onChange?: (config: ConditionConfig, isValid: boolean) => void;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nconst numberConditionOptions = [\n  NumberCondition.IS_EQUAL,\n  NumberCondition.IS_NOT_EQUAL,\n  NumberCondition.IS_BETWEEN,\n  NumberCondition.GREATER_THAN,\n  NumberCondition.GREATER_THAN_OR_EQUAL,\n  NumberCondition.LESS_THAN,\n  NumberCondition.LESS_THAN_OR_EQUAL,\n  NumberCondition.IS_NULL,\n  NumberCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForNumberCondition(option)}\n  </option>\n));\n\nconst stringConditions = [\n  StringCondition.IS_EXACTLY,\n  StringCondition.IS_NOT_EXACTLY,\n  StringCondition.CONTAINS,\n  StringCondition.DOES_NOT_CONTAIN,\n  StringCondition.STARTS_WITH,\n  StringCondition.ENDS_WITH,\n  StringCondition.IS_NULL,\n  StringCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForStringCondition(option)}\n  </option>\n));\n\nconst dateConditions = [\n  DateCondition.IS_EXACTLY,\n  DateCondition.IS_NOT_EXACTLY,\n  DateCondition.IS_BEFORE,\n  DateCondition.IS_BEFORE_OR_EQUAL,\n  DateCondition.IS_AFTER,\n  DateCondition.IS_AFTER_OR_EQUAL,\n  DateCondition.IS_NULL,\n  DateCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForDateCondition(option)}\n  </option>\n));\n\nconst booleanConditions = [\n  BooleanCondition.IS_TRUE,\n  BooleanCondition.IS_FALSE,\n  BooleanCondition.IS_NULL,\n  BooleanCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForBooleanCondition(option)}\n  </option>\n));\n\nconst charConditions = [\n  CharCondition.IS_EQUAL,\n  CharCondition.IS_NOT_EQUAL,\n  CharCondition.IS_NULL,\n  CharCondition.IS_NOT_NULL,\n].map(option => (\n  <option key={option} value={option}>\n    {getLabelForCharCondition(option)}\n  </option>\n));\n\nfunction isNumberConditionValid(\n  condition: NumberCondition,\n  value?: string,\n  startValue?: string,\n  endValue?: string\n) {\n  if (\n    condition === NumberCondition.IS_NULL ||\n    condition === NumberCondition.IS_NOT_NULL\n  ) {\n    return true;\n  }\n  if (\n    condition === NumberCondition.IS_BETWEEN &&\n    startValue &&\n    !Number.isNaN(Number.parseFloat(startValue)) &&\n    endValue &&\n    !Number.isNaN(Number.parseFloat(endValue))\n  ) {\n    return true;\n  }\n  if (\n    condition !== NumberCondition.IS_BETWEEN &&\n    value &&\n    !Number.isNaN(Number.parseFloat(value))\n  ) {\n    return true;\n  }\n  return false;\n}\n\nfunction getNumberInputs(\n  selectedCondition: NumberCondition,\n  handleValueChange: (e: unknown) => void,\n  handleStartValueChange: (e: unknown) => void,\n  handleEndValueChange: (e: unknown) => void,\n  conditionValue?: string,\n  startValue?: string,\n  endValue?: string\n) {\n  switch (selectedCondition) {\n    case NumberCondition.IS_EQUAL:\n    case NumberCondition.IS_NOT_EQUAL:\n    case NumberCondition.GREATER_THAN:\n    case NumberCondition.GREATER_THAN_OR_EQUAL:\n    case NumberCondition.LESS_THAN:\n    case NumberCondition.LESS_THAN_OR_EQUAL:\n      return (\n        <input\n          type=\"number\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n    case NumberCondition.IS_BETWEEN:\n      return (\n        <div className=\"d-flex flex-row\">\n          <input\n            type=\"number\"\n            className=\"form-control d-flex mr-2\"\n            placeholder=\"Start value\"\n            value={startValue ?? ''}\n            onChange={handleStartValueChange}\n          />\n          <input\n            type=\"number\"\n            className=\"form-control d-flex\"\n            placeholder=\"End value\"\n            value={endValue ?? ''}\n            onChange={handleEndValueChange}\n          />\n        </div>\n      );\n    case NumberCondition.IS_NULL:\n    case NumberCondition.IS_NOT_NULL:\n      return null;\n  }\n}\n\nfunction getStringInputs(\n  selectedCondition: StringCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n) {\n  switch (selectedCondition) {\n    case StringCondition.IS_NULL:\n    case StringCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getDateInputs(\n  selectedCondition: DateCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n) {\n  switch (selectedCondition) {\n    case DateCondition.IS_NULL:\n    case DateCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nfunction getBooleanInputs() {\n  return null;\n}\n\nfunction getCharInputs(\n  selectedCondition: CharCondition,\n  handleValueChange: (e: unknown) => void,\n  conditionValue?: string\n) {\n  switch (selectedCondition) {\n    case CharCondition.IS_NULL:\n    case CharCondition.IS_NOT_NULL:\n      return null;\n    default:\n      return (\n        <input\n          type=\"text\"\n          className=\"form-control\"\n          maxLength={1}\n          placeholder=\"Enter value\"\n          value={conditionValue ?? ''}\n          onChange={handleValueChange}\n        />\n      );\n  }\n}\n\nconst ConditionEditor = (props: ConditionEditorProps): JSX.Element => {\n  const { column, config, onChange = DEFAULT_CALLBACK } = props;\n  const selectedColumnType = column.type;\n  const [prevColumnType, setPrevColumnType] = useState(selectedColumnType);\n  const [selectedCondition, setCondition] = useState(config.condition);\n  const [conditionValue, setValue] = useState(config.value);\n  const [startValue, setStartValue] = useState(config.start);\n  const [endValue, setEndValue] = useState(config.end);\n\n  if (selectedColumnType !== prevColumnType) {\n    // Column type changed, reset condition and value fields\n    setCondition(getDefaultConditionForType(selectedColumnType));\n    setValue(undefined);\n    setStartValue(undefined);\n    setEndValue(undefined);\n    setPrevColumnType(selectedColumnType);\n  }\n\n  const conditions = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      return [];\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return numberConditionOptions;\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return charConditions;\n    }\n    if (TableUtils.isTextType(selectedColumnType)) {\n      return stringConditions;\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return dateConditions;\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return booleanConditions;\n    }\n  }, [selectedColumnType]);\n\n  const handleConditionChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleConditionChange', value);\n    setCondition(value);\n  }, []);\n\n  const handleValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleValueChange', value);\n    setValue(value);\n  }, []);\n\n  const handleStartValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleStartValueChange', value);\n    setStartValue(value);\n  }, []);\n\n  const handleEndValueChange = useCallback(e => {\n    const { value } = e.target;\n    log.debug('handleEndValueChange', value);\n    setEndValue(value);\n  }, []);\n\n  useEffect(() => {\n    let isValid = true;\n\n    if (selectedCondition === undefined) {\n      log.debug('Unable to create formatting rule. Condition is not selected.');\n      isValid = false;\n    }\n\n    if (\n      TableUtils.isNumberType(column.type) &&\n      !isNumberConditionValid(\n        selectedCondition as NumberCondition,\n        conditionValue,\n        startValue,\n        endValue\n      )\n    ) {\n      log.debug(\n        'Unable to create formatting rule. Invalid value',\n        conditionValue\n      );\n      isValid = false;\n    }\n    onChange(\n      {\n        condition: selectedCondition,\n        value: conditionValue,\n        start: startValue,\n        end: endValue,\n      },\n      isValid\n    );\n  }, [\n    onChange,\n    column.type,\n    selectedCondition,\n    conditionValue,\n    startValue,\n    endValue,\n  ]);\n\n  const conditionInputs = useMemo(() => {\n    if (selectedColumnType === undefined) {\n      // Column not selected\n      return null;\n    }\n    if (TableUtils.isNumberType(selectedColumnType)) {\n      return getNumberInputs(\n        selectedCondition as NumberCondition,\n        handleValueChange,\n        handleStartValueChange,\n        handleEndValueChange,\n        conditionValue,\n        startValue,\n        endValue\n      );\n    }\n    if (TableUtils.isCharType(selectedColumnType)) {\n      return getCharInputs(\n        selectedCondition as CharCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isTextType(selectedColumnType)) {\n      return getStringInputs(\n        selectedCondition as StringCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isDateType(selectedColumnType)) {\n      return getDateInputs(\n        selectedCondition as DateCondition,\n        handleValueChange,\n        conditionValue\n      );\n    }\n    if (TableUtils.isBooleanType(selectedColumnType)) {\n      return getBooleanInputs();\n    }\n  }, [\n    selectedColumnType,\n    selectedCondition,\n    conditionValue,\n    startValue,\n    endValue,\n    handleValueChange,\n    handleStartValueChange,\n    handleEndValueChange,\n  ]);\n\n  return (\n    <div className=\"condition-editor mb-2\">\n      <select\n        value={selectedCondition}\n        id=\"condition-select\"\n        className=\"custom-select mb-2\"\n        onChange={handleConditionChange}\n      >\n        {conditions}\n      </select>\n      {conditionInputs}\n    </div>\n  );\n};\n\nexport default ConditionEditor;\n"],"file":"ConditionEditor.js"}

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.css

@@ -0,0 +1,21 @@
+.conditional-format-editor {
+  padding: 1rem;
+}
+.conditional-format-editor .formatter-list {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 0.5rem;
+}
+.conditional-format-editor .formatter-type {
+  margin: 0 1rem 0 0;
+  display: flex;
+}
+.conditional-format-editor .btn-formatter-type {
+  font-size: smaller;
+  width: 100%;
+}
+.conditional-format-editor .color-select {
+  padding: 0 2em 0 0.25em;
+}
+
+/*# sourceMappingURL=ConditionalFormatEditor.css.map */

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.scss","../../../../components/scss/new_variables.scss"],"names":[],"mappings":"AAEA;EACE,SCCS;;ADCT;EACE;EACA;EACA,aCLO;;ADQT;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"ConditionalFormatEditor.css"}

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.d.ts

@@ -0,0 +1,15 @@
+import { FormattingRule, ModelColumn } from './ConditionalFormattingUtils';
+import './ConditionalFormatEditor.scss';
+export declare type SaveCallback = (rule: FormattingRule) => void;
+export declare type UpdateCallback = (rule?: FormattingRule) => void;
+export declare type CancelCallback = () => void;
+export interface ConditionalFormatEditorProps {
+    columns: ModelColumn[];
+    rule?: FormattingRule;
+    onCancel?: CancelCallback;
+    onSave?: SaveCallback;
+    onUpdate?: UpdateCallback;
+}
+declare const ConditionalFormatEditor: (props: ConditionalFormatEditorProps) => JSX.Element;
+export default ConditionalFormatEditor;
+//# sourceMappingURL=ConditionalFormatEditor.d.ts.map

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormatEditor.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAGL,cAAc,EACd,WAAW,EACZ,MAAM,8BAA8B,CAAC;AACtC,OAAO,gCAAgC,CAAC;AAIxC,oBAAY,YAAY,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;AAE1D,oBAAY,cAAc,GAAG,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAE7D,oBAAY,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAwBD,QAAA,MAAM,uBAAuB,UACpB,4BAA4B,KAClC,WAoGF,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/sidebar/conditional-formatting/ConditionalFormatEditor.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { Button } from '@deephaven/components';
+import Log from '@deephaven/log';
+import { FormatColumnWhereIcon, FormatRowWhereIcon } from "../icons/index.js";
+import ColumnFormatEditor from "./ColumnFormatEditor.js";
+import RowFormatEditor from "./RowFormatEditor.js";
+import { FormatterType } from "./ConditionalFormattingUtils.js";
+import "./ConditionalFormatEditor.css";
+var log = Log.module('ConditionalFormatEditor');
+
+var DEFAULT_CALLBACK = () => undefined;
+
+function getFormatterTypeIcon(option) {
+  switch (option) {
+    case FormatterType.CONDITIONAL:
+      return /*#__PURE__*/React.createElement(FormatColumnWhereIcon, null);
+
+    case FormatterType.ROWS:
+      return /*#__PURE__*/React.createElement(FormatRowWhereIcon, null);
+  }
+}
+
+function getFormatterTypeLabel(option) {
+  switch (option) {
+    case FormatterType.CONDITIONAL:
+      return 'Conditional';
+
+    case FormatterType.ROWS:
+      return 'Rows';
+  }
+}
+
+var formatterTypes = [FormatterType.CONDITIONAL, FormatterType.ROWS];
+
+var ConditionalFormatEditor = props => {
+  var _defaultRule$type;
+
+  var {
+    columns,
+    onSave = DEFAULT_CALLBACK,
+    onUpdate = DEFAULT_CALLBACK,
+    onCancel = DEFAULT_CALLBACK,
+    rule: defaultRule
+  } = props;
+  var [selectedFormatter, setFormatter] = useState((_defaultRule$type = defaultRule === null || defaultRule === void 0 ? void 0 : defaultRule.type) !== null && _defaultRule$type !== void 0 ? _defaultRule$type : formatterTypes[0]);
+  var [rule, setRule] = useState(defaultRule);
+  var [isValid, setIsValid] = useState(false);
+  var handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+  var handleSave = useCallback(() => {
+    if (rule === undefined) {
+      log.error('Rule is not defined.');
+      return;
+    }
+
+    onSave(rule);
+  }, [onSave, rule]);
+  var handleFormatterChange = useCallback(value => {
+    log.debug('handleFormatterChange', value);
+    setFormatter(value);
+  }, []);
+  var handleRuleChange = useCallback((ruleConfig, isRuleValid) => {
+    log.debug('handleRuleChange', ruleConfig, isRuleValid, selectedFormatter);
+    var updatedRule = {
+      type: selectedFormatter,
+      config: ruleConfig
+    };
+    setRule(updatedRule);
+    setIsValid(isRuleValid);
+    onUpdate(isRuleValid ? updatedRule : undefined);
+  }, [onUpdate, selectedFormatter]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "conditional-format-editor form"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "mb-0",
+    htmlFor: "formatter-select"
+  }, "Select Formatter"), /*#__PURE__*/React.createElement("div", {
+    className: "formatter-list"
+  }, formatterTypes.map((type, index) => /*#__PURE__*/React.createElement("div", {
+    key: type,
+    className: "formatter-type"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames('btn', 'btn-icon', 'btn-formatter-type', {
+      active: type === selectedFormatter
+    }),
+    "data-index": index,
+    onClick: () => handleFormatterChange(type)
+  }, getFormatterTypeIcon(type), getFormatterTypeLabel(type)))))), selectedFormatter === FormatterType.CONDITIONAL && /*#__PURE__*/React.createElement(ColumnFormatEditor, {
+    columns: columns,
+    config: rule === null || rule === void 0 ? void 0 : rule.config,
+    onChange: handleRuleChange
+  }), selectedFormatter === FormatterType.ROWS && /*#__PURE__*/React.createElement(RowFormatEditor, {
+    columns: columns,
+    config: rule === null || rule === void 0 ? void 0 : rule.config,
+    onChange: handleRuleChange
+  }), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-end my-3"
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    onClick: handleCancel,
+    className: "mr-2"
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    kind: "primary",
+    onClick: handleSave,
+    disabled: rule === undefined || !isValid
+  }, "Done")));
+};
+
+export default ConditionalFormatEditor;
+//# sourceMappingURL=ConditionalFormatEditor.js.map