@deephaven/iris-grid 0.43.0 → 0.44.1-beta.0

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

@@ -0,0 +1,123 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useCallback, useEffect, useState } from 'react';
+import Log from '@deephaven/log';
+import { ComboBox } from '@deephaven/components';
+import { getDefaultConditionConfigForType, getConditionConfig, getDefaultStyleConfig, FormatStyleType } 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;
+}
+function ColumnFormatEditor(props) {
+  var _columns$find;
+  var {
+    columns,
+    config = makeDefaultConfig(columns),
+    dh,
+    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(function updateColumnFormat() {
+    var isValid = conditionValid;
+    if (selectedColumn === undefined) {
+      log.debug('Column is not selected, invalidating update.');
+      isValid = false;
+    }
+    if (selectedStyle === undefined || selectedStyle.type === FormatStyleType.NO_FORMATTING) {
+      log.debug('Style is not selected, invalidating update.');
+      isValid = false;
+    }
+    var {
+      type,
+      name
+    } = selectedColumn;
+    var column = {
+      type,
+      name
+    };
+    onChange(_objectSpread({
+      column,
+      style: selectedStyle
+    }, conditionConfig), isValid);
+  }, [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, {
+    dh: dh,
+    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,"file":"ColumnFormatEditor.js","names":["React","useCallback","useEffect","useState","Log","ComboBox","getDefaultConditionConfigForType","getConditionConfig","getDefaultStyleConfig","FormatStyleType","ConditionEditor","StyleEditor","log","module","DEFAULT_CALLBACK","undefined","makeDefaultConfig","columns","type","name","column","config","style","ColumnFormatEditor","props","dh","onChange","selectedColumn","setColumn","find","c","conditionConfig","setConditionConfig","conditionValid","setConditionValid","selectedStyle","setStyle","handleColumnChange","value","newColumn","error","handleConditionChange","updatedConditionConfig","isValid","debug","handleStyleChange","updatedStyleConfig","updateColumnFormat","NO_FORMATTING","columnInputOptions","map","title"],"sources":["../../../src/sidebar/conditional-formatting/ColumnFormatEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { ComboBox } from '@deephaven/components';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport {\n  BaseFormatConfig,\n  ChangeCallback,\n  getDefaultConditionConfigForType,\n  getConditionConfig,\n  getDefaultStyleConfig,\n  ModelColumn,\n  FormatStyleType,\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  dh: DhType;\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\nfunction ColumnFormatEditor(props: ColumnFormatEditorProps): JSX.Element {\n  const {\n    columns,\n    config = makeDefaultConfig(columns),\n    dh,\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    function updateColumnFormat() {\n      let isValid = conditionValid;\n\n      if (selectedColumn === undefined) {\n        log.debug('Column is not selected, invalidating update.');\n        isValid = false;\n      }\n      if (\n        selectedStyle === undefined ||\n        selectedStyle.type === FormatStyleType.NO_FORMATTING\n      ) {\n        log.debug('Style is not selected, invalidating update.');\n        isValid = false;\n      }\n\n      const { type, name } = selectedColumn;\n      const column = { type, name };\n      onChange(\n        {\n          column,\n          style: selectedStyle,\n          ...conditionConfig,\n        },\n        isValid\n      );\n    },\n    [onChange, selectedColumn, selectedStyle, conditionConfig, 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            dh={dh}\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"],"mappings":"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"}

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

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import Log from '@deephaven/log';
+import { StringCondition, DateCondition, getLabelForNumberCondition, getLabelForDateCondition, getLabelForStringCondition, NumberCondition, getDefaultConditionForType, getLabelForBooleanCondition, BooleanCondition, CharCondition, getLabelForCharCondition, isDateConditionValid, getDefaultValueForType } 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 != null && startValue !== '' && !Number.isNaN(Number.parseFloat(startValue)) && endValue != null && endValue !== '' && !Number.isNaN(Number.parseFloat(endValue))) {
+    return true;
+  }
+  if (condition !== NumberCondition.IS_BETWEEN && value !== undefined && 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
+      });
+  }
+}
+function ConditionEditor(props) {
+  var {
+    column,
+    config,
+    dh,
+    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(getDefaultValueForType(selectedColumnType));
+    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.isStringType(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(function changeCondition() {
+    var isValid = true;
+    if (selectedCondition === undefined) {
+      log.debug('Unable to create formatting rule. Condition is not selected.');
+      isValid = false;
+    } else if (TableUtils.isNumberType(column.type) && !isNumberConditionValid(selectedCondition, conditionValue, startValue, endValue)) {
+      log.debug('Unable to create formatting rule. Invalid value', conditionValue);
+      isValid = false;
+    } else if (TableUtils.isDateType(column.type) && !isDateConditionValid(dh, selectedCondition, conditionValue)) {
+      log.debug('Unable to create formatting rule. Invalid date condition', conditionValue);
+      isValid = false;
+    }
+    onChange({
+      condition: selectedCondition,
+      value: conditionValue,
+      start: startValue,
+      end: endValue
+    }, isValid);
+  }, [onChange, column.type, dh, 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.isStringType(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,
+    "data-testid": "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,"file":"ConditionEditor.js","names":["React","useCallback","useEffect","useMemo","useState","TableUtils","Log","StringCondition","DateCondition","getLabelForNumberCondition","getLabelForDateCondition","getLabelForStringCondition","NumberCondition","getDefaultConditionForType","getLabelForBooleanCondition","BooleanCondition","CharCondition","getLabelForCharCondition","isDateConditionValid","getDefaultValueForType","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","dh","onChange","selectedColumnType","type","prevColumnType","setPrevColumnType","setCondition","setValue","setStartValue","start","setEndValue","end","conditions","isNumberType","isCharType","isStringType","isDateType","isBooleanType","handleConditionChange","e","target","debug","changeCondition","isValid","conditionInputs"],"sources":["../../../src/sidebar/conditional-formatting/ConditionEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { TableUtils } from '@deephaven/jsapi-utils';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\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  isDateConditionValid,\n  getDefaultValueForType,\n} from './ConditionalFormattingUtils';\n\nconst log = Log.module('ConditionEditor');\n\nexport interface ConditionEditorProps {\n  dh: DhType;\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 != null &&\n    startValue !== '' &&\n    !Number.isNaN(Number.parseFloat(startValue)) &&\n    endValue != null &&\n    endValue !== '' &&\n    !Number.isNaN(Number.parseFloat(endValue))\n  ) {\n    return true;\n  }\n  if (\n    condition !== NumberCondition.IS_BETWEEN &&\n    value !== undefined &&\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\nfunction ConditionEditor(props: ConditionEditorProps): JSX.Element {\n  const { column, config, dh, 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(getDefaultValueForType(selectedColumnType));\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.isStringType(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    function changeCondition() {\n      let isValid = true;\n\n      if (selectedCondition === undefined) {\n        log.debug(\n          'Unable to create formatting rule. Condition is not selected.'\n        );\n        isValid = false;\n      } else 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      } else if (\n        TableUtils.isDateType(column.type) &&\n        !isDateConditionValid(\n          dh,\n          selectedCondition as DateCondition,\n          conditionValue\n        )\n      ) {\n        log.debug(\n          'Unable to create formatting rule. Invalid date condition',\n          conditionValue\n        );\n        isValid = false;\n      }\n\n      onChange(\n        {\n          condition: selectedCondition,\n          value: conditionValue,\n          start: startValue,\n          end: endValue,\n        },\n        isValid\n      );\n    },\n    [\n      onChange,\n      column.type,\n      dh,\n      selectedCondition,\n      conditionValue,\n      startValue,\n      endValue,\n    ]\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.isStringType(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        data-testid=\"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"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.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":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE,SCCS;;ADCT;EACE;EACA;EACA,aCLO;;ADQT;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE","file":"ConditionalFormatEditor.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n.conditional-format-editor {\n  padding: $spacer-3;\n\n  .formatter-list {\n    display: flex;\n    justify-content: flex-start;\n    padding-top: $spacer-2;\n  }\n\n  .formatter-type {\n    margin: 0 $spacer-3 0 0;\n    display: flex;\n  }\n\n  .btn-formatter-type {\n    font-size: smaller;\n    width: 100%;\n  }\n\n  .color-select {\n    padding: 0 2em 0 0.25em;\n  }\n}\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}

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

@@ -0,0 +1,109 @@
+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, isSupportedColumn } 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];
+function ConditionalFormatEditor(props) {
+  var _defaultRule$type;
+  var {
+    columns: originalColumns,
+    dh,
+    onSave = DEFAULT_CALLBACK,
+    onUpdate = DEFAULT_CALLBACK,
+    onCancel = DEFAULT_CALLBACK,
+    rule: defaultRule
+  } = props;
+  var columns = originalColumns.filter(isSupportedColumn);
+  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,
+    dh: dh,
+    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,
+    dh: dh,
+    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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormatEditor.js","names":["React","useCallback","useState","classNames","Button","Log","FormatColumnWhereIcon","FormatRowWhereIcon","ColumnFormatEditor","RowFormatEditor","FormatterType","isSupportedColumn","log","module","DEFAULT_CALLBACK","undefined","getFormatterTypeIcon","option","CONDITIONAL","ROWS","getFormatterTypeLabel","formatterTypes","ConditionalFormatEditor","props","columns","originalColumns","dh","onSave","onUpdate","onCancel","rule","defaultRule","filter","selectedFormatter","setFormatter","type","setRule","isValid","setIsValid","handleCancel","handleSave","error","handleFormatterChange","value","debug","handleRuleChange","ruleConfig","isRuleValid","updatedRule","config","map","index","active"],"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormatEditor.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport { Button } from '@deephaven/components';\nimport type { dh as DhType } from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\nimport { FormatColumnWhereIcon, FormatRowWhereIcon } from '../icons';\nimport ColumnFormatEditor from './ColumnFormatEditor';\nimport RowFormatEditor from './RowFormatEditor';\nimport {\n  BaseFormatConfig,\n  FormatterType,\n  FormattingRule,\n  isSupportedColumn,\n  ModelColumn,\n} from './ConditionalFormattingUtils';\nimport './ConditionalFormatEditor.scss';\n\nconst log = Log.module('ConditionalFormatEditor');\n\nexport type SaveCallback = (rule: FormattingRule) => void;\n\nexport type UpdateCallback = (rule?: FormattingRule) => void;\n\nexport type CancelCallback = () => void;\n\nexport interface ConditionalFormatEditorProps {\n  dh: DhType;\n  columns: readonly ModelColumn[];\n  rule?: FormattingRule;\n  onCancel?: CancelCallback;\n  onSave?: SaveCallback;\n  onUpdate?: UpdateCallback;\n}\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getFormatterTypeIcon(option: FormatterType): JSX.Element | undefined {\n  switch (option) {\n    case FormatterType.CONDITIONAL:\n      return <FormatColumnWhereIcon />;\n    case FormatterType.ROWS:\n      return <FormatRowWhereIcon />;\n  }\n}\n\nfunction getFormatterTypeLabel(option: FormatterType): string {\n  switch (option) {\n    case FormatterType.CONDITIONAL:\n      return 'Conditional';\n    case FormatterType.ROWS:\n      return 'Rows';\n  }\n}\n\nconst formatterTypes = [FormatterType.CONDITIONAL, FormatterType.ROWS];\n\nfunction ConditionalFormatEditor(\n  props: ConditionalFormatEditorProps\n): JSX.Element {\n  const {\n    columns: originalColumns,\n    dh,\n    onSave = DEFAULT_CALLBACK,\n    onUpdate = DEFAULT_CALLBACK,\n    onCancel = DEFAULT_CALLBACK,\n    rule: defaultRule,\n  } = props;\n\n  const columns = originalColumns.filter(isSupportedColumn);\n\n  const [selectedFormatter, setFormatter] = useState(\n    defaultRule?.type ?? formatterTypes[0]\n  );\n  const [rule, setRule] = useState(defaultRule);\n  const [isValid, setIsValid] = useState(false);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleSave = useCallback(() => {\n    if (rule === undefined) {\n      log.error('Rule is not defined.');\n      return;\n    }\n    onSave(rule);\n  }, [onSave, rule]);\n\n  const handleFormatterChange = useCallback(value => {\n    log.debug('handleFormatterChange', value);\n    setFormatter(value);\n  }, []);\n\n  const handleRuleChange = useCallback(\n    (ruleConfig, isRuleValid: boolean) => {\n      log.debug('handleRuleChange', ruleConfig, isRuleValid, selectedFormatter);\n      const updatedRule = {\n        type: selectedFormatter,\n        config: ruleConfig as BaseFormatConfig,\n      };\n      setRule(updatedRule);\n      setIsValid(isRuleValid);\n      onUpdate(isRuleValid ? updatedRule : undefined);\n    },\n    [onUpdate, selectedFormatter]\n  );\n\n  return (\n    <div className=\"conditional-format-editor form\">\n      <div className=\"mb-2\">\n        <label className=\"mb-0\" htmlFor=\"formatter-select\">\n          Select Formatter\n        </label>\n\n        <div className=\"formatter-list\">\n          {formatterTypes.map((type, index) => (\n            <div key={type} className=\"formatter-type\">\n              <button\n                type=\"button\"\n                className={classNames('btn', 'btn-icon', 'btn-formatter-type', {\n                  active: type === selectedFormatter,\n                })}\n                data-index={index}\n                onClick={() => handleFormatterChange(type)}\n              >\n                {getFormatterTypeIcon(type)}\n                {getFormatterTypeLabel(type)}\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n      {selectedFormatter === FormatterType.CONDITIONAL && (\n        <ColumnFormatEditor\n          columns={columns}\n          dh={dh}\n          config={rule?.config}\n          onChange={handleRuleChange}\n        />\n      )}\n      {selectedFormatter === FormatterType.ROWS && (\n        <RowFormatEditor\n          columns={columns}\n          config={rule?.config}\n          dh={dh}\n          onChange={handleRuleChange}\n        />\n      )}\n      <hr />\n      <div className=\"d-flex justify-content-end my-3\">\n        <Button kind=\"secondary\" onClick={handleCancel} className=\"mr-2\">\n          Cancel\n        </Button>\n        <Button\n          kind=\"primary\"\n          onClick={handleSave}\n          disabled={rule === undefined || !isValid}\n        >\n          Done\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nexport default ConditionalFormatEditor;\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { getConditionDBString, getStyleDBString } from "./ConditionalFormattingUtils.js"; // Conditional formatting API utils in a separate file
+// to make ConditionalFormattingUtils.ts easier to test.
+// https://github.com/facebook/jest/issues/936#issuecomment-545080082
+export function makeTernaryFormatRule(config, prevRule) {
+  var styleDBString = getStyleDBString(config);
+  if (styleDBString === undefined) {
+    return undefined;
+  }
+  var conditionDBString = getConditionDBString(config);
+  return "".concat(conditionDBString, " ? ").concat(styleDBString, " : ").concat(prevRule);
+}
+export function makeRowFormatColumn(dh, rule) {
+  return dh.Column.formatRowColor(rule);
+}
+export function makeColumnFormatColumn(col, rule) {
+  return col.formatColor(rule);
+}
+//# sourceMappingURL=ConditionalFormattingAPIUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormattingAPIUtils.js","names":["getConditionDBString","getStyleDBString","makeTernaryFormatRule","config","prevRule","styleDBString","undefined","conditionDBString","makeRowFormatColumn","dh","rule","Column","formatRowColor","makeColumnFormatColumn","col","formatColor"],"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingAPIUtils.ts"],"sourcesContent":["import type {\n  Column,\n  dh as DhType,\n  CustomColumn,\n} from '@deephaven/jsapi-types';\nimport {\n  BaseFormatConfig,\n  getConditionDBString,\n  getStyleDBString,\n} from './ConditionalFormattingUtils';\n\n// Conditional formatting API utils in a separate file\n// to make ConditionalFormattingUtils.ts easier to test.\n// https://github.com/facebook/jest/issues/936#issuecomment-545080082\n\nexport function makeTernaryFormatRule(\n  config: BaseFormatConfig,\n  prevRule: string\n): string | undefined {\n  const styleDBString = getStyleDBString(config);\n  if (styleDBString === undefined) {\n    return undefined;\n  }\n  const conditionDBString = getConditionDBString(config);\n  return `${conditionDBString} ? ${styleDBString} : ${prevRule}`;\n}\n\nexport function makeRowFormatColumn(dh: DhType, rule: string): CustomColumn {\n  return dh.Column.formatRowColor(rule);\n}\n\nexport function makeColumnFormatColumn(\n  col: Column,\n  rule: string\n): CustomColumn {\n  return col.formatColor(rule);\n}\n"],"mappings":"SAOEA,oBAAoB,EACpBC,gBAAgB,2CAGlB;AACA;AACA;AAEA,OAAO,SAASC,qBAAqB,CACnCC,MAAwB,EACxBC,QAAgB,EACI;EACpB,IAAMC,aAAa,GAAGJ,gBAAgB,CAACE,MAAM,CAAC;EAC9C,IAAIE,aAAa,KAAKC,SAAS,EAAE;IAC/B,OAAOA,SAAS;EAClB;EACA,IAAMC,iBAAiB,GAAGP,oBAAoB,CAACG,MAAM,CAAC;EACtD,iBAAUI,iBAAiB,gBAAMF,aAAa,gBAAMD,QAAQ;AAC9D;AAEA,OAAO,SAASI,mBAAmB,CAACC,EAAU,EAAEC,IAAY,EAAgB;EAC1E,OAAOD,EAAE,CAACE,MAAM,CAACC,cAAc,CAACF,IAAI,CAAC;AACvC;AAEA,OAAO,SAASG,sBAAsB,CACpCC,GAAW,EACXJ,IAAY,EACE;EACd,OAAOI,GAAG,CAACC,WAAW,CAACL,IAAI,CAAC;AAC9B"}