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

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

@@ -0,0 +1,160 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';
+import { Button, DragUtils, Tooltip } from '@deephaven/components';
+import Log from '@deephaven/log';
+import "./ConditionalFormattingMenu.css";
+import { FormatterType, getBackgroundForStyleConfig, getColorForStyleConfig, getShortLabelForConditionType, NumberCondition, StringCondition, DateCondition } from "./ConditionalFormattingUtils.js";
+import TableUtils from "../../TableUtils.js";
+var log = Log.module('ConditionalFormattingMenu');
+
+var DEFAULT_CALLBACK = () => undefined;
+
+function getRuleValue(config) {
+  var {
+    column: {
+      type
+    }
+  } = config;
+
+  if (TableUtils.isNumberType(type)) {
+    return config.condition === NumberCondition.IS_NULL || config.condition === NumberCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isCharType(type)) {
+    return config.condition === DateCondition.IS_NULL || config.condition === DateCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isTextType(type)) {
+    return config.condition === StringCondition.IS_NULL || config.condition === StringCondition.IS_NOT_NULL ? '' : "\"".concat(config.value, "\"");
+  }
+
+  if (TableUtils.isDateType(type)) {
+    return config.condition === DateCondition.IS_NULL || config.condition === DateCondition.IS_NOT_NULL ? '' : "".concat(config.value);
+  }
+
+  if (TableUtils.isBooleanType(type)) {
+    return '';
+  }
+
+  throw new Error("Invalid column type ".concat(type, " in getRuleValue"));
+}
+
+function getRuleTitle(config) {
+  if (TableUtils.isNumberType(config.column.type) && config.condition === NumberCondition.IS_BETWEEN) {
+    return "".concat(config.start, " < ").concat(config.column.name, " < ").concat(config.end);
+  }
+
+  return "".concat(config.column.name, " ").concat(getShortLabelForConditionType(config.column.type, config.condition), " \n    ").concat(getRuleValue(config));
+}
+
+var ConditionalFormattingMenu = props => {
+  var {
+    rules = [],
+    onChange = DEFAULT_CALLBACK,
+    onCreate = DEFAULT_CALLBACK,
+    onSelect = DEFAULT_CALLBACK
+  } = props;
+  var handleRuleClick = useCallback((e, rule, index) => {
+    e.stopPropagation();
+    log.debug('Rule clicked', rule, index);
+    onSelect(index);
+  }, [onSelect]);
+  var handleDeleteClick = useCallback((e, rule, index) => {
+    e.stopPropagation();
+    log.debug('Delete button clicked', rule, index);
+    var updatedRules = [...rules];
+    updatedRules.splice(index, 1);
+    onChange(updatedRules);
+  }, [onChange, rules]);
+  var handleDragHandlerClick = useCallback(e => {
+    e.stopPropagation();
+  }, []);
+  var handleDragEnd = useCallback(result => {
+    DragUtils.stopDragging(); // if dropped outside the list
+
+    if (!result.destination) {
+      return;
+    }
+
+    var sourceIndex = result.source.index;
+    var destinationIndex = result.destination.index;
+    var updatedRules = [...rules];
+    var sourceInput = rules[sourceIndex];
+    updatedRules.splice(sourceIndex, 1);
+    updatedRules.splice(destinationIndex, 0, sourceInput);
+    onChange(updatedRules);
+  }, [onChange, rules]); // Display list of rules
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "conditional-formatting-rules"
+  }, /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragStart: DragUtils.startDragging,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "droppable-custom-columns"
+  }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+    ref: provided.innerRef // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.droppableProps, {
+    className: classNames('droppable-container', {
+      dragging: snapshot.draggingFromThisWith
+    })
+  }), rules.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "text-muted pl-2"
+  }, "No formats defined"), rules.map((rule, index) => /*#__PURE__*/React.createElement(Draggable // eslint-disable-next-line react/no-array-index-key
+  , {
+    key: "".concat(index, "-").concat(rule.type),
+    draggableId: "".concat(index, "-").concat(rule.type),
+    index: index,
+    disableInteractiveElementBlocking: true
+  }, // eslint-disable-next-line @typescript-eslint/no-shadow
+  (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+    role: "menuitem",
+    tabIndex: 0,
+    onClick: e => handleRuleClick(e, rule, index),
+    className: classNames('draggable-container', {
+      dragging: snapshot.isDragging
+    }),
+    ref: provided.innerRef // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.draggableProps), /*#__PURE__*/React.createElement("div", {
+    className: "conditional-formatting-list-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "formatting-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rule-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rule-icon-bg",
+    style: {
+      backgroundColor: getBackgroundForStyleConfig(rule.config.style),
+      color: getColorForStyleConfig(rule.config.style)
+    }
+  }, rule.type === FormatterType.ROWS ? 'row' : 'col')), /*#__PURE__*/React.createElement("div", {
+    className: "rule-title"
+  }, getRuleTitle(rule.config)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-link btn-link-icon ml-1 px-2",
+    onClick: e => handleDeleteClick(e, rule, index)
+  }, /*#__PURE__*/React.createElement(Tooltip, null, "Delete rule"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsTrash
+  })), /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: "btn btn-link btn-link-icon px-2 btn-drag-handle",
+    onClick: handleDragHandlerClick // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, provided.dragHandleProps), /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsGripper
+  }))))))), provided.placeholder))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: onCreate,
+    icon: dhNewCircleLargeFilled
+  }, "Add New Rule"));
+};
+
+export default ConditionalFormattingMenu;
+//# sourceMappingURL=ConditionalFormattingMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx"],"names":["React","useCallback","DragDropContext","Draggable","Droppable","classNames","FontAwesomeIcon","dhNewCircleLargeFilled","vsGripper","vsTrash","Button","DragUtils","Tooltip","Log","FormatterType","getBackgroundForStyleConfig","getColorForStyleConfig","getShortLabelForConditionType","NumberCondition","StringCondition","DateCondition","TableUtils","log","module","DEFAULT_CALLBACK","undefined","getRuleValue","config","column","type","isNumberType","condition","IS_NULL","IS_NOT_NULL","value","isCharType","isTextType","isDateType","isBooleanType","Error","getRuleTitle","IS_BETWEEN","start","name","end","ConditionalFormattingMenu","props","rules","onChange","onCreate","onSelect","handleRuleClick","e","rule","index","stopPropagation","debug","handleDeleteClick","updatedRules","splice","handleDragHandlerClick","handleDragEnd","result","stopDragging","destination","sourceIndex","source","destinationIndex","sourceInput","startDragging","provided","snapshot","innerRef","droppableProps","dragging","draggingFromThisWith","length","map","isDragging","draggableProps","backgroundColor","style","color","ROWS","dragHandleProps","placeholder"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';\nimport { Button, DragUtils, Tooltip } from '@deephaven/components';\nimport Log from '@deephaven/log';\n\nimport './ConditionalFormattingMenu.scss';\nimport {\n  BaseFormatConfig,\n  FormattingRule,\n  FormatterType,\n  getBackgroundForStyleConfig,\n  getColorForStyleConfig,\n  getShortLabelForConditionType,\n  NumberCondition,\n  StringCondition,\n  DateCondition,\n} from './ConditionalFormattingUtils';\nimport TableUtils from '../../TableUtils';\n\nconst log = Log.module('ConditionalFormattingMenu');\n\nexport type ChangeCallback = (rules: FormattingRule[]) => void;\n\nexport type SelectCallback = (index: number) => void;\n\nexport type CreateCallback = () => void;\n\nexport type ConditionalFormattingMenuProps = {\n  rules: FormattingRule[];\n  selectedColumn?: string;\n  onChange?: ChangeCallback;\n  onCreate?: CreateCallback;\n  onSelect?: SelectCallback;\n};\n\nconst DEFAULT_CALLBACK = () => undefined;\n\nfunction getRuleValue(config: BaseFormatConfig): string {\n  const {\n    column: { type },\n  } = config;\n  if (TableUtils.isNumberType(type)) {\n    return config.condition === NumberCondition.IS_NULL ||\n      config.condition === NumberCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isCharType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isTextType(type)) {\n    return config.condition === StringCondition.IS_NULL ||\n      config.condition === StringCondition.IS_NOT_NULL\n      ? ''\n      : `\"${config.value}\"`;\n  }\n  if (TableUtils.isDateType(type)) {\n    return config.condition === DateCondition.IS_NULL ||\n      config.condition === DateCondition.IS_NOT_NULL\n      ? ''\n      : `${config.value}`;\n  }\n  if (TableUtils.isBooleanType(type)) {\n    return '';\n  }\n  throw new Error(`Invalid column type ${type} in getRuleValue`);\n}\n\nfunction getRuleTitle(config: BaseFormatConfig): string {\n  if (\n    TableUtils.isNumberType(config.column.type) &&\n    config.condition === NumberCondition.IS_BETWEEN\n  ) {\n    return `${config.start} < ${config.column.name} < ${config.end}`;\n  }\n  return `${config.column.name} ${getShortLabelForConditionType(\n    (config as BaseFormatConfig).column.type,\n    (config as BaseFormatConfig).condition\n  )} \n    ${getRuleValue(config as BaseFormatConfig)}`;\n}\n\nconst ConditionalFormattingMenu = (\n  props: ConditionalFormattingMenuProps\n): JSX.Element => {\n  const {\n    rules = [],\n    onChange = DEFAULT_CALLBACK,\n    onCreate = DEFAULT_CALLBACK,\n    onSelect = DEFAULT_CALLBACK,\n  } = props;\n\n  const handleRuleClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Rule clicked', rule, index);\n      onSelect(index);\n    },\n    [onSelect]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e, rule, index) => {\n      e.stopPropagation();\n      log.debug('Delete button clicked', rule, index);\n      const updatedRules = [...rules];\n      updatedRules.splice(index, 1);\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  const handleDragHandlerClick = useCallback(e => {\n    e.stopPropagation();\n  }, []);\n\n  const handleDragEnd = useCallback(\n    result => {\n      DragUtils.stopDragging();\n\n      // if dropped outside the list\n      if (!result.destination) {\n        return;\n      }\n      const sourceIndex = result.source.index;\n      const destinationIndex = result.destination.index;\n      const updatedRules = [...rules];\n      const sourceInput = rules[sourceIndex];\n\n      updatedRules.splice(sourceIndex, 1);\n      updatedRules.splice(destinationIndex, 0, sourceInput);\n\n      onChange(updatedRules);\n    },\n    [onChange, rules]\n  );\n\n  // Display list of rules\n  return (\n    <div className=\"conditional-formatting-rules\">\n      <DragDropContext\n        onDragStart={DragUtils.startDragging}\n        onDragEnd={handleDragEnd}\n      >\n        <Droppable droppableId=\"droppable-custom-columns\">\n          {(provided, snapshot) => (\n            <div\n              ref={provided.innerRef}\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...provided.droppableProps}\n              className={classNames('droppable-container', {\n                dragging: snapshot.draggingFromThisWith,\n              })}\n            >\n              {rules.length === 0 && (\n                <div className=\"text-muted pl-2\">No formats defined</div>\n              )}\n              {rules.map((rule, index) => (\n                <Draggable\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={`${index}-${rule.type}`}\n                  draggableId={`${index}-${rule.type}`}\n                  index={index}\n                  disableInteractiveElementBlocking\n                >\n                  {\n                    // eslint-disable-next-line @typescript-eslint/no-shadow\n                    (provided, snapshot) => (\n                      <div\n                        role=\"menuitem\"\n                        tabIndex={0}\n                        onClick={e => handleRuleClick(e, rule, index)}\n                        className={classNames('draggable-container', {\n                          dragging: snapshot.isDragging,\n                        })}\n                        ref={provided.innerRef}\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        {...provided.draggableProps}\n                      >\n                        <div className=\"conditional-formatting-list-item\">\n                          <div className=\"formatting-item\">\n                            <div className=\"rule-icon\">\n                              <span\n                                className=\"rule-icon-bg\"\n                                style={{\n                                  backgroundColor: getBackgroundForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                  color: getColorForStyleConfig(\n                                    (rule.config as BaseFormatConfig).style\n                                  ),\n                                }}\n                              >\n                                {rule.type === FormatterType.ROWS\n                                  ? 'row'\n                                  : 'col'}\n                              </span>\n                            </div>\n                            <div className=\"rule-title\">\n                              {getRuleTitle(rule.config as BaseFormatConfig)}\n                            </div>\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon ml-1 px-2\"\n                              onClick={e => handleDeleteClick(e, rule, index)}\n                            >\n                              <Tooltip>Delete rule</Tooltip>\n                              <FontAwesomeIcon icon={vsTrash} />\n                            </button>\n\n                            <button\n                              type=\"button\"\n                              className=\"btn btn-link btn-link-icon px-2 btn-drag-handle\"\n                              onClick={handleDragHandlerClick}\n                              // eslint-disable-next-line react/jsx-props-no-spreading\n                              {...provided.dragHandleProps}\n                            >\n                              <Tooltip>Drag to re-order</Tooltip>\n                              <FontAwesomeIcon icon={vsGripper} />\n                            </button>\n                          </div>\n                        </div>\n                      </div>\n                    )\n                  }\n                </Draggable>\n              ))}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n      <hr />\n      <Button kind=\"ghost\" onClick={onCreate} icon={dhNewCircleLargeFilled}>\n        Add New Rule\n      </Button>\n    </div>\n  );\n};\n\nexport default ConditionalFormattingMenu;\n"],"file":"ConditionalFormattingMenu.js"}

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

@@ -0,0 +1,119 @@
+import { Column, CustomColumn } from '@deephaven/jsapi-shim';
+export declare type ModelColumn = {
+    name: string;
+    type: string;
+};
+export declare type Condition = NumberCondition | StringCondition | DateCondition | BooleanCondition | CharCondition;
+export interface BaseFormatConfig {
+    column: ModelColumn;
+    condition: Condition;
+    value?: string;
+    start?: string;
+    end?: string;
+    style: FormatStyleConfig;
+}
+export interface ConditionConfig {
+    condition: Condition;
+    value?: string;
+    start?: string;
+    end?: string;
+}
+export declare type ChangeCallback = (ruleConfig: BaseFormatConfig, isValid: boolean) => void;
+export declare enum FormatterType {
+    CONDITIONAL = "conditional",
+    ROWS = "rows"
+}
+export interface FormattingRule {
+    type: FormatterType;
+    config: BaseFormatConfig;
+}
+export declare enum NumberCondition {
+    IS_EQUAL = "is-equal",
+    IS_NOT_EQUAL = "is-not-equal",
+    IS_BETWEEN = "is-between",
+    GREATER_THAN = "greater-than",
+    GREATER_THAN_OR_EQUAL = "greater-than-or-equal",
+    LESS_THAN = "less-than",
+    LESS_THAN_OR_EQUAL = "less-than-or-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum StringCondition {
+    IS_EXACTLY = "is-exactly",
+    IS_NOT_EXACTLY = "is-not-exactly",
+    CONTAINS = "contains",
+    DOES_NOT_CONTAIN = "does-not-contain",
+    STARTS_WITH = "starts-with",
+    ENDS_WITH = "ends-with",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum DateCondition {
+    IS_EXACTLY = "is-exactly",
+    IS_NOT_EXACTLY = "is-not-exactly",
+    IS_BEFORE = "is-before",
+    IS_BEFORE_OR_EQUAL = "is-before-or-equal",
+    IS_AFTER = "is-after",
+    IS_AFTER_OR_EQUAL = "is-after-or-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum BooleanCondition {
+    IS_TRUE = "is-true",
+    IS_FALSE = "is-false",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum CharCondition {
+    IS_EQUAL = "is-equal",
+    IS_NOT_EQUAL = "is-not-equal",
+    IS_NULL = "is-null",
+    IS_NOT_NULL = "is-not-null"
+}
+export declare enum FormatStyleType {
+    NO_FORMATTING = "no-formatting",
+    POSITIVE = "positive",
+    NEGATIVE = "negative",
+    WARN = "warn",
+    NEUTRAL = "neutral",
+    ACCENT_1 = "accent-1",
+    ACCENT_2 = "accent-2",
+    CUSTOM = "custom"
+}
+export interface FormatStyleConfig {
+    type: FormatStyleType;
+    customConfig?: {
+        color: string;
+        background: string;
+    };
+}
+export declare function getLabelForStyleType(option: FormatStyleType): string;
+export declare function getBackgroundForStyleConfig(config: FormatStyleConfig): string | undefined;
+export declare function getColorForStyleConfig(config: FormatStyleConfig): string | undefined;
+export declare function getStyleDBString(config: BaseFormatConfig): string | undefined;
+export declare function getConditionDBString(config: BaseFormatConfig): string;
+export declare function getLabelForNumberCondition(condition: NumberCondition): string;
+export declare function getLabelForStringCondition(condition: StringCondition): string;
+export declare function getLabelForDateCondition(condition: DateCondition): string;
+export declare function getLabelForBooleanCondition(condition: BooleanCondition): string;
+export declare function getLabelForCharCondition(condition: CharCondition): string;
+export declare function getDefaultConditionForType(columnType: string): Condition;
+export declare function getDefaultValueForType(columnType: string): string | undefined;
+export declare function getConditionConfig(config: BaseFormatConfig): ConditionConfig;
+export declare function getDefaultConditionConfigForType(type: string): ConditionConfig;
+export declare function getDefaultStyleConfig(): FormatStyleConfig;
+export declare function getShortLabelForNumberCondition(condition: NumberCondition): string;
+export declare function getTextForNumberCondition(columnName: string, condition: NumberCondition, value: unknown, start: unknown, end: unknown): string;
+export declare function getTextForStringCondition(columnName: string, condition: StringCondition, value: unknown): string;
+export declare function getTextForDateCondition(columnName: string, condition: DateCondition, value: unknown): string;
+export declare function getTextForBooleanCondition(columnName: string, condition: BooleanCondition): string;
+export declare function getTextForCharCondition(columnName: string, condition: CharCondition, value: unknown): string;
+export declare function getShortLabelForConditionType(columnType: string, condition: Condition): string;
+/**
+ * Get format columns array for the given columns and formatting rules
+ * @param columns Available columns
+ * @param rules Formatting rules to build the format columns from
+ * @returns Array of format columns
+ */
+export declare function getFormatColumns(columns: Column[], rules: FormattingRule[]): CustomColumn[];
+//# sourceMappingURL=ConditionalFormattingUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalFormattingUtils.d.ts","sourceRoot":"","sources":["../../../src/sidebar/conditional-formatting/ConditionalFormattingUtils.ts"],"names":[],"mappings":"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"}