@elyra/canvas 12.22.0 → 12.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/dist/canvas-constants-09ffa4d4.js +2 -0
  2. package/dist/canvas-constants-09ffa4d4.js.map +1 -0
  3. package/dist/canvas-constants-ab55d0fd.js +2 -0
  4. package/dist/canvas-constants-ab55d0fd.js.map +1 -0
  5. package/dist/canvas-controller-3a399ae6.js +2 -0
  6. package/dist/canvas-controller-3a399ae6.js.map +1 -0
  7. package/dist/canvas-controller-c046093c.js +2 -0
  8. package/dist/canvas-controller-c046093c.js.map +1 -0
  9. package/dist/{canvas-logger-a0f1beaa.js → canvas-logger-3459dfc2.js} +2 -2
  10. package/dist/{canvas-logger-a0f1beaa.js.map → canvas-logger-3459dfc2.js.map} +1 -1
  11. package/dist/{canvas-logger-815781bb.js → canvas-logger-fa8cef5b.js} +2 -2
  12. package/dist/{canvas-logger-815781bb.js.map → canvas-logger-fa8cef5b.js.map} +1 -1
  13. package/dist/common-canvas-088c1a4b.js +2 -0
  14. package/dist/common-canvas-088c1a4b.js.map +1 -0
  15. package/dist/common-canvas-7676cc1b.js +2 -0
  16. package/dist/common-canvas-7676cc1b.js.map +1 -0
  17. package/dist/common-canvas.es.js +1 -1
  18. package/dist/common-canvas.es.js.map +1 -1
  19. package/dist/common-canvas.js +1 -1
  20. package/dist/common-canvas.js.map +1 -1
  21. package/dist/common-properties-9d77f8e1.js +2 -0
  22. package/dist/common-properties-9d77f8e1.js.map +1 -0
  23. package/dist/common-properties-a31de521.js +2 -0
  24. package/dist/common-properties-a31de521.js.map +1 -0
  25. package/dist/{createClass-6db89a23.js → createClass-72b049bc.js} +1 -1
  26. package/dist/createClass-72b049bc.js.map +1 -0
  27. package/dist/{createClass-32a0cf0f.js → createClass-d5cac0b7.js} +1 -1
  28. package/dist/createClass-d5cac0b7.js.map +1 -0
  29. package/dist/{datarecord-metadata-v3-schema-6b6384ff.js → datarecord-metadata-v3-schema-03db5d5d.js} +2 -2
  30. package/dist/{datarecord-metadata-v3-schema-6b6384ff.js.map → datarecord-metadata-v3-schema-03db5d5d.js.map} +1 -1
  31. package/dist/{datarecord-metadata-v3-schema-81228a9a.js → datarecord-metadata-v3-schema-07d7682c.js} +2 -2
  32. package/dist/{datarecord-metadata-v3-schema-81228a9a.js.map → datarecord-metadata-v3-schema-07d7682c.js.map} +1 -1
  33. package/dist/extends-87da7df3.js +7 -0
  34. package/dist/extends-87da7df3.js.map +1 -0
  35. package/dist/{extends-12382a72.js → extends-dc95dba8.js} +2 -2
  36. package/dist/extends-dc95dba8.js.map +1 -0
  37. package/dist/flexible-table-59ad2c83.js +2 -0
  38. package/dist/flexible-table-59ad2c83.js.map +1 -0
  39. package/dist/flexible-table-5c4fbb7b.js +2 -0
  40. package/dist/flexible-table-5c4fbb7b.js.map +1 -0
  41. package/dist/{getPrototypeOf-bf88242f.js → getPrototypeOf-4e282dd3.js} +1 -1
  42. package/dist/getPrototypeOf-4e282dd3.js.map +1 -0
  43. package/dist/{getPrototypeOf-a1c3fe64.js → getPrototypeOf-b3806813.js} +1 -1
  44. package/dist/getPrototypeOf-b3806813.js.map +1 -0
  45. package/dist/{icon-1ef0f3b9.js → icon-2c16236a.js} +2 -2
  46. package/dist/{icon-162ec1ee.js.map → icon-2c16236a.js.map} +1 -1
  47. package/dist/{icon-162ec1ee.js → icon-816af0e7.js} +2 -2
  48. package/dist/{icon-1ef0f3b9.js.map → icon-816af0e7.js.map} +1 -1
  49. package/dist/index-2f6be19d.js +2 -0
  50. package/dist/index-2f6be19d.js.map +1 -0
  51. package/dist/index-6f739fa1.js +2 -0
  52. package/dist/index-6f739fa1.js.map +1 -0
  53. package/dist/lib/canvas-controller.es.js +1 -1
  54. package/dist/lib/canvas-controller.js +1 -1
  55. package/dist/lib/canvas.es.js +1 -1
  56. package/dist/lib/canvas.js +1 -1
  57. package/dist/lib/command-stack.es.js +1 -1
  58. package/dist/lib/command-stack.es.js.map +1 -1
  59. package/dist/lib/command-stack.js +1 -1
  60. package/dist/lib/command-stack.js.map +1 -1
  61. package/dist/lib/context-menu.es.js +1 -1
  62. package/dist/lib/context-menu.es.js.map +1 -1
  63. package/dist/lib/context-menu.js +1 -1
  64. package/dist/lib/context-menu.js.map +1 -1
  65. package/dist/lib/properties/field-picker.es.js +1 -1
  66. package/dist/lib/properties/field-picker.js +1 -1
  67. package/dist/lib/properties/flexible-table.es.js +1 -1
  68. package/dist/lib/properties/flexible-table.js +1 -1
  69. package/dist/lib/properties.es.js +1 -1
  70. package/dist/lib/properties.js +1 -1
  71. package/dist/lib/tooltip.es.js +1 -1
  72. package/dist/lib/tooltip.es.js.map +1 -1
  73. package/dist/lib/tooltip.js +1 -1
  74. package/dist/lib/tooltip.js.map +1 -1
  75. package/dist/styles/common-canvas.min.css +1 -1
  76. package/dist/styles/common-canvas.min.css.map +1 -1
  77. package/dist/{toolbar-bb5bee87.js → toolbar-2ef99bd8.js} +2 -2
  78. package/dist/{toolbar-59ce5251.js.map → toolbar-2ef99bd8.js.map} +1 -1
  79. package/dist/{toolbar-59ce5251.js → toolbar-cb967e26.js} +2 -2
  80. package/dist/{toolbar-bb5bee87.js.map → toolbar-cb967e26.js.map} +1 -1
  81. package/locales/common-properties/locales/en.json +2 -0
  82. package/package.json +1 -1
  83. package/src/common-canvas/cc-contents.jsx +14 -2
  84. package/src/common-canvas/constants/canvas-constants.js +1 -0
  85. package/src/common-canvas/svg-canvas-d3.js +8 -0
  86. package/src/common-canvas/svg-canvas-d3.scss +11 -1
  87. package/src/common-canvas/svg-canvas-renderer.js +176 -132
  88. package/src/common-canvas/svg-canvas-utils-decs.js +4 -3
  89. package/src/common-canvas/svg-canvas-utils-textarea.js +19 -5
  90. package/src/common-properties/components/editor-form/editor-form.jsx +6 -8
  91. package/src/common-properties/components/flexible-table/flexible-table.scss +1 -0
  92. package/src/common-properties/components/virtualized-table/virtualized-table.jsx +38 -34
  93. package/src/common-properties/components/virtualized-table/virtualized-table.scss +17 -0
  94. package/src/common-properties/constants/constants.js +3 -0
  95. package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx +25 -18
  96. package/src/common-properties/controls/expression/expressionInfo-parser.js +11 -0
  97. package/src/common-properties/controls/passwordfield/passwordfield.jsx +2 -2
  98. package/src/common-properties/controls/toggle/toggle.jsx +1 -3
  99. package/src/common-properties/controls/toggle/toggle.scss +7 -4
  100. package/src/common-properties/form/EditorForm.js +4 -2
  101. package/src/common-properties/ui-conditions/ui-conditions-parser.js +1 -1
  102. package/src/common-properties/ui-conditions/ui-groups-parser.js +1 -1
  103. package/src/common-properties/util/property-utils.js +3 -0
  104. package/src/context-menu/common-context-menu.jsx +7 -0
  105. package/src/context-menu/context-menu-wrapper.jsx +30 -15
  106. package/src/object-model/api-pipeline.js +6 -9
  107. package/src/object-model/layout-dimensions.js +6 -6
  108. package/src/object-model/pipeline-out-handler.js +1 -1
  109. package/src/object-model/redux/reducers/canvasinfo.js +0 -1
  110. package/src/object-model/redux/reducers/nodes.js +0 -9
  111. package/stats.html +1 -1
  112. package/dist/canvas-constants-34cdb7df.js +0 -2
  113. package/dist/canvas-constants-34cdb7df.js.map +0 -1
  114. package/dist/canvas-constants-3c09c7f6.js +0 -2
  115. package/dist/canvas-constants-3c09c7f6.js.map +0 -1
  116. package/dist/canvas-controller-ccb05f9f.js +0 -2
  117. package/dist/canvas-controller-ccb05f9f.js.map +0 -1
  118. package/dist/canvas-controller-feabad26.js +0 -2
  119. package/dist/canvas-controller-feabad26.js.map +0 -1
  120. package/dist/common-canvas-bcfe04ef.js +0 -2
  121. package/dist/common-canvas-bcfe04ef.js.map +0 -1
  122. package/dist/common-canvas-c4f77878.js +0 -2
  123. package/dist/common-canvas-c4f77878.js.map +0 -1
  124. package/dist/common-properties-597dd249.js +0 -2
  125. package/dist/common-properties-597dd249.js.map +0 -1
  126. package/dist/common-properties-de0ca66b.js +0 -2
  127. package/dist/common-properties-de0ca66b.js.map +0 -1
  128. package/dist/createClass-32a0cf0f.js.map +0 -1
  129. package/dist/createClass-6db89a23.js.map +0 -1
  130. package/dist/extends-12382a72.js.map +0 -1
  131. package/dist/extends-195c6b49.js +0 -7
  132. package/dist/extends-195c6b49.js.map +0 -1
  133. package/dist/flexible-table-056c538e.js +0 -2
  134. package/dist/flexible-table-056c538e.js.map +0 -1
  135. package/dist/flexible-table-7fb8a62e.js +0 -2
  136. package/dist/flexible-table-7fb8a62e.js.map +0 -1
  137. package/dist/getPrototypeOf-a1c3fe64.js.map +0 -1
  138. package/dist/getPrototypeOf-bf88242f.js.map +0 -1
  139. package/dist/index-61be3509.js +0 -2
  140. package/dist/index-61be3509.js.map +0 -1
  141. package/dist/index-8076376e.js +0 -2
  142. package/dist/index-8076376e.js.map +0 -1
@@ -17,7 +17,7 @@
17
17
  import { Column, Table, AutoSizer } from "react-virtualized";
18
18
  import Draggable from "react-draggable";
19
19
  import { Checkbox, Loading } from "carbon-components-react";
20
- import { ArrowUp16, ArrowDown16, ArrowsVertical16 } from "@carbon/icons-react";
20
+ import { ArrowUp16, ArrowDown16, ArrowsVertical16, Information16 } from "@carbon/icons-react";
21
21
  import Tooltip from "./../../../tooltip/tooltip.jsx";
22
22
  import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
23
23
  import { injectIntl } from "react-intl";
@@ -234,28 +234,25 @@ class VirtualizedTable extends React.Component {
234
234
  </span>);
235
235
  }
236
236
 
237
- let tooltip = null;
238
- if (columnData.description && columnData.headerLabel) {
239
- tooltip = (
240
- <div className="properties-tooltips">
241
- <span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
242
- <br />
243
- {columnData.description}
244
- </div>
245
- );
246
- } else if (columnData.description) {
247
- tooltip = (
248
- <div className="properties-tooltips">
249
- {columnData.description}
250
- </div>
251
- );
252
- } else if (columnData.headerLabel) {
253
- tooltip = (
254
- <div className="properties-tooltips">
255
- <span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
256
- </div>
257
- );
258
- }
237
+ const tooltip = columnData.headerLabel
238
+ ? (<div className="properties-tooltips">
239
+ <span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
240
+ </div>)
241
+ : null;
242
+
243
+ const infoIcon = isEmpty(columnData.description)
244
+ ? null
245
+ : (<div className="properties-vt-info-icon-tip">
246
+ <Tooltip
247
+ id={`properties-tooltip-${columnData.headerLabel}-info`}
248
+ tip={columnData.description}
249
+ direction="bottom"
250
+ className="properties-tooltips"
251
+ showToolTipOnClick
252
+ >
253
+ <Information16 className="properties-vt-info-icon" />
254
+ </Tooltip>
255
+ </div>);
259
256
 
260
257
  const tooltipId = uuid4() + "-tooltip-column-" + dataKey;
261
258
 
@@ -279,20 +276,27 @@ class VirtualizedTable extends React.Component {
279
276
  </Draggable>)
280
277
  : "";
281
278
 
279
+ const header = isEmpty(tooltip)
280
+ ? (<div className="properties-vt-label-icon">
281
+ {label}
282
+ {infoIcon}
283
+ </div>)
284
+ : (<div className="properties-vt-label-tip-icon">
285
+ <Tooltip
286
+ id={tooltipId}
287
+ tip={tooltip}
288
+ direction="bottom"
289
+ className="properties-tooltips"
290
+ >
291
+ {label}
292
+ </Tooltip>
293
+ {infoIcon}
294
+ </div>);
295
+
282
296
  return (
283
297
  <div className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}>
284
298
  <div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
285
- { isEmpty(tooltip)
286
- ? label
287
- : <Tooltip
288
- id={tooltipId}
289
- tip={tooltip}
290
- direction="bottom"
291
- className="properties-tooltips"
292
- >
293
- {label}
294
- </Tooltip>
295
- }
299
+ {header}
296
300
  {disableSort === false && sortIcon}
297
301
  </div>
298
302
  { resizeElem }
@@ -100,6 +100,23 @@
100
100
  }
101
101
  }
102
102
 
103
+ .properties-vt-label-tip-icon {
104
+ width: inherit;
105
+ display: flex;
106
+ align-items: center;
107
+
108
+ .properties-vt-info-icon-tip {
109
+ height: $spacing-05;
110
+ margin-left: $spacing-03;
111
+
112
+ .properties-vt-info-icon {
113
+ &:hover {
114
+ cursor: pointer;
115
+ }
116
+ }
117
+ }
118
+ }
119
+
103
120
  .properties-vt-row-checkbox {
104
121
  height: $spacing-07;
105
122
  margin-left: $spacing-05;
@@ -72,11 +72,14 @@ export const MESSAGE_KEYS = {
72
72
  EXPRESSION_FIELDS_TITLE: "expression.fields.title",
73
73
  EXPRESSION_VALUES_TITLE: "expression.values.title",
74
74
  EXPRESSION_FIELD_COLUMN: "expression.field.column",
75
+ EXPRESSION_FIELD_COLUMN_DESCRIPTION: "expression.field.column.description",
75
76
  EXPRESSION_STORAGE_COLUMN: "expression.storage.column",
76
77
  EXPRESSION_VALUE_COLUMN: "expression.value.column",
78
+ EXPRESSION_VALUE_COLUMN_DESCRIPTION: "expression.value.column.description",
77
79
  EXPRESSION_FUNCTION_COLUMN: "expression.function.column",
78
80
  EXPRESSION_RETURN_COLUMN: "expression.return.column",
79
81
  EXPRESSION_RECENTLY_USED_COLUMN: "expression.recently.used.column",
82
+ EXPRESSION_RECENTLY_USED_COLUMN_DESCRIPTION: "expression.recently.used.column.description",
80
83
  EXPRESSION_FIELD_TAB: "expression.field.tab",
81
84
  EXPRESSION_FUNCTIONS_TAB: "expression.functions.tab",
82
85
  EXPRESSION_RECENTLY_USED: "expression.recently.used",
@@ -29,19 +29,19 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
29
29
  constructor(props) {
30
30
  super(props);
31
31
  this.reactIntl = props.controller.getReactIntl();
32
- this.recentUseCat = formatMessage(this.reactIntl,
33
- MESSAGE_KEYS.EXPRESSION_RECENTLY_USED);
32
+ this.valueColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
33
+ this.valueColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN_DESCRIPTION);
34
+ this.recentUseCat = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED);
34
35
  this.recentUseCatInfo = {
35
36
  id: this.recentUseCat,
36
37
  locLabel: this.recentUseCat,
37
38
  field_columns: {
38
39
  field_column_info: {
39
- locLabel: formatMessage(this.reactIntl,
40
- MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
40
+ locLabel: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
41
41
  },
42
42
  value_column_info: {
43
- locLabel: formatMessage(this.reactIntl,
44
- MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN)
43
+ locLabel: this.valueColumn,
44
+ descLabel: this.valueColumnDesc
45
45
  }
46
46
  }
47
47
  };
@@ -256,23 +256,21 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
256
256
  }
257
257
 
258
258
  _makeDatasetFields(dataset, fieldDataset) {
259
- const fieldColumn = formatMessage(this.reactIntl,
260
- MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
261
- const storageColumn = formatMessage(this.reactIntl,
262
- MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
263
- const valueColumn = formatMessage(this.reactIntl,
264
- MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
265
- const dropdownLabel = formatMessage(this.reactIntl,
266
- MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
259
+ const fieldColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
260
+ const fieldColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN_DESCRIPTION);
261
+ const storageColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
262
+ const dropdownLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
267
263
  const fieldsCatInfo = {
268
264
  id: "fields",
269
265
  locLabel: dropdownLabel,
270
266
  field_columns: {
271
267
  field_column_info: {
272
- locLabel: fieldColumn
268
+ locLabel: fieldColumn,
269
+ descLabel: fieldColumnDesc
273
270
  },
274
271
  value_column_info: {
275
- locLabel: valueColumn
272
+ locLabel: this.valueColumn,
273
+ descLabel: this.valueColumnDesc
276
274
  },
277
275
  additional_column_info: [
278
276
  {
@@ -369,8 +367,17 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
369
367
  }
370
368
 
371
369
  if (categoryInfo) {
372
- fieldHeaders.push({ key: "fieldName", label: categoryInfo.field_columns.field_column_info.locLabel, resizable: true });
373
- valueHeader.push({ key: "values", label: categoryInfo.field_columns.value_column_info.locLabel });
370
+ fieldHeaders.push({
371
+ key: "fieldName",
372
+ label: categoryInfo.field_columns.field_column_info.locLabel,
373
+ description: categoryInfo.field_columns.field_column_info.descLabel,
374
+ resizable: true
375
+ });
376
+ valueHeader.push({
377
+ key: "values",
378
+ label: categoryInfo.field_columns.value_column_info.locLabel,
379
+ description: categoryInfo.field_columns.value_column_info.descLabel
380
+ });
374
381
  if (categoryInfo.field_columns.additional_column_info) {
375
382
  for (let i = 0; i < categoryInfo.field_columns.additional_column_info.length; i++) {
376
383
  sortable.push(categoryInfo.field_columns.additional_column_info[i].id);
@@ -57,8 +57,19 @@ function setExpressionInfo(inExpressionInfo) {
57
57
  if (inExpressionInfo.fields.field_categories) {
58
58
  inExpressionInfo.fields.field_categories.forEach((fieldCat) => {
59
59
  fieldCat.locLabel = l10nProvider.l10nLabel(fieldCat, fieldCat.id);
60
+
60
61
  fieldCat.field_columns.field_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
61
62
  fieldCat.field_columns.value_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
63
+
64
+ const fieldColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
65
+ if (fieldColInfoDesc !== fieldCat.id + ".field_column_info") {
66
+ fieldCat.field_columns.field_column_info.descLabel = fieldColInfoDesc;
67
+ }
68
+ const valueColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
69
+ if (valueColInfoDesc !== fieldCat.id + ".value_column_info") {
70
+ fieldCat.field_columns.value_column_info.descLabel = valueColInfoDesc;
71
+ }
72
+
62
73
  if (fieldCat.field_columns.additional_column_info) {
63
74
  fieldCat.field_columns.additional_column_info.forEach((col) => {
64
75
  col.locLabel = l10nProvider.l10nLabel(col, fieldCat.id + ".additional_column_info." + col.id);
@@ -17,7 +17,7 @@
17
17
  import React from "react";
18
18
  import PropTypes from "prop-types";
19
19
  import { connect } from "react-redux";
20
- import { TextInput, Form } from "carbon-components-react";
20
+ import { PasswordInput, Form } from "carbon-components-react";
21
21
  import ValidationMessage from "./../../components/validation-message";
22
22
  import * as ControlUtils from "./../../util/control-utils";
23
23
  import { STATES } from "./../../constants/constants.js";
@@ -41,7 +41,7 @@ class PasswordControl extends React.Component {
41
41
  return (
42
42
  <div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
43
43
  <Form>
44
- <TextInput.PasswordInput
44
+ <PasswordInput
45
45
  {...validationProps}
46
46
  autoComplete="off"
47
47
  id={this.id}
@@ -54,10 +54,8 @@ class ToggleControl extends React.Component {
54
54
  labelB={labelOn}
55
55
  labelA={labelOff}
56
56
  onToggle={this.handleChange.bind(this)}
57
- labelText={this.props.controlItem}
57
+ labelText={this.props.tableControl ? null : this.props.controlItem}
58
58
  />);
59
-
60
-
61
59
  const className = classNames("properties-toggle", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
62
60
  return (
63
61
  <div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
@@ -14,10 +14,13 @@
14
14
  * limitations under the License.
15
15
  */
16
16
 
17
+ .properties-toggle {
18
+ .properties-label-container {
19
+ padding-bottom: 0;
20
+ }
21
+ }
17
22
  .properties-table-cell-control { // overrides when in a table cell
18
- .properties-toggle {
19
- .bx--toggle__switch { // override carbon when inside a table
20
- margin: $spacing-02 0;
21
- }
23
+ .bx--toggle__switch { // override carbon when inside a table
24
+ margin-bottom: $spacing-05;
22
25
  }
23
26
  }
@@ -467,8 +467,10 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
467
467
  controlType = ControlType.PASSWORDFIELD;
468
468
  break;
469
469
  case Type.BOOLEAN:
470
- labelVisible = false;
471
- controlType = ControlType.CHECKBOX;
470
+ if (!parameter.control || parameter.control === ControlType.CHECKBOX) {
471
+ labelVisible = false;
472
+ controlType = ControlType.CHECKBOX;
473
+ }
472
474
  break;
473
475
  case Type.INTEGER:
474
476
  case Type.LONG:
@@ -144,6 +144,7 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
144
144
  }
145
145
  case ItemType.ADDITIONAL_LINK:
146
146
  case ItemType.CHECKBOX_SELECTOR:
147
+ case ItemType.TEARSHEET:
147
148
  case ItemType.PANEL: {
148
149
  if (uiItem.panel && uiItem.panel.uiItems) {
149
150
  let locPanelId = panelId;
@@ -193,7 +194,6 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
193
194
  break;
194
195
  case ItemType.STATIC_TEXT:
195
196
  case ItemType.TEXT_PANEL:
196
- case ItemType.TEARSHEET:
197
197
  case ItemType.HORIZONTAL_SEPARATOR: {
198
198
  break;
199
199
  }
@@ -44,6 +44,7 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
44
44
  case ItemType.PANEL:
45
45
  case ItemType.CUSTOM_PANEL:
46
46
  case ItemType.ADDITIONAL_LINK:
47
+ case ItemType.TEARSHEET:
47
48
  case ItemType.CHECKBOX_SELECTOR: {
48
49
  if (uiItem.panel && uiItem.panel.id) {
49
50
  panelTree[currentPanel].panels.push(uiItem.panel.id);
@@ -93,7 +94,6 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
93
94
  break;
94
95
  }
95
96
  case ItemType.STATIC_TEXT:
96
- case ItemType.TEARSHEET:
97
97
  case ItemType.HORIZONTAL_SEPARATOR: {
98
98
  break;
99
99
  }
@@ -54,6 +54,9 @@ function formatMessage(intl, key, substituteObj) {
54
54
  const defaultMessages = { ...defaultMessages1, ...defaultMessages2 };
55
55
  let formattedMessage;
56
56
  if (typeof intl !== "undefined" && intl !== null) {
57
+ if (intl.messages[key] === "") {
58
+ return ""; // Allow empty strings
59
+ }
57
60
  formattedMessage = intl.formatMessage({ id: key, defaultMessage: defaultMessages[key] }, substituteObj);
58
61
  } else {
59
62
  formattedMessage = defaultMessages[key];
@@ -92,6 +92,13 @@ class CommonContextMenu extends React.Component {
92
92
  menuPos.x -= menuSize.width;
93
93
  }
94
94
 
95
+ // Add a pixel to x and y because on Chrome without this the context menu
96
+ // appears with the top corner of the first menu item under the mouse
97
+ // cursor. This highlights the first menu item (which looks weird) and, if
98
+ // the first item is a cascade menu, automatically opens the sub-menu.
99
+ menuPos.x += 1;
100
+ menuPos.y += 1;
101
+
95
102
  return menuPos;
96
103
  }
97
104
 
@@ -18,8 +18,6 @@ import React from "react";
18
18
  import PropTypes from "prop-types";
19
19
  import CommonContextMenu from "./common-context-menu.jsx";
20
20
 
21
- const CONTEXT_MENU_BUTTON = 2;
22
-
23
21
  export default class ContextMenuWrapper extends React.Component {
24
22
  constructor(props) {
25
23
  super(props);
@@ -57,23 +55,19 @@ export default class ContextMenuWrapper extends React.Component {
57
55
  }
58
56
 
59
57
  handleClickOutside(e) {
60
- // On Firefox, the context menu gesture emits both a 'context menu' event
61
- // and a 'click' event. If the click is processed it causes the
62
- // context menu to disappear imediately after it has displayed.
63
- // Consequently, when this method is called with the context menu button set
64
- // (which indicates one of the additional clicks from Firefox) we just
65
- // stop propogation and return. On other browsers we don't get this extra
66
- // events.
67
- // Also, on Safari, when a user is displaying the context menu with a ctrl-click,
68
- // the click is received with a ctrlKey field enabled. So we also ignore that.
69
- if (e.button === CONTEXT_MENU_BUTTON || e.ctrlKey) {
58
+ // On Safari, when a user is displaying the context menu with a ctrl-click
59
+ // (which is a supported context menu gesture on the Mac) a secondary click
60
+ // event is emmitted which is received here with the ctrlKey field enabled.
61
+ // So we ignore that event otherwse, if we continue, the context menu will
62
+ // be closed.
63
+ if (e.ctrlKey) {
70
64
  e.stopPropagation();
71
65
  return;
72
66
  }
73
67
 
74
- // If the click was anywhere outside the context menu we just close the menu.
75
- const domNode = document.getElementById("context-menu-popover");
76
- if (domNode && !domNode.contains(e.target)) {
68
+ // If the click was anywhere outside the context menu and
69
+ // the ellipsis button we just close the menu.
70
+ if (!this.isOverContextMenu(e) && !this.isOverEllipsisButton(e)) {
77
71
  // This stop propagation is needed in common canvas so that selected nodes will
78
72
  // remain selected even after clicking outside the context menu to close the menu.
79
73
  if (this.props.stopPropagation) {
@@ -83,6 +77,27 @@ export default class ContextMenuWrapper extends React.Component {
83
77
  }
84
78
  }
85
79
 
80
+ // Retruns true if the event occurred over the context menu.
81
+ isOverContextMenu(e) {
82
+ const domNode = document.getElementById("context-menu-popover");
83
+ return !domNode || domNode.contains(e.target);
84
+ }
85
+
86
+ // Returns true if the event occurred over the ellipsis button. Typically
87
+ // there will be only one ellipsis button on the canvas, since they are only
88
+ // displayed on hover, but in some test cicumstances there might be more
89
+ // than one.
90
+ isOverEllipsisButton(e) {
91
+ const ellipsisNodes = document.getElementsByClassName("d3-node-ellipsis-group");
92
+ let state = false;
93
+ for (let i = 0; i < ellipsisNodes.length; i++) {
94
+ if (state === false && ellipsisNodes[i].contains(e.target)) {
95
+ state = true;
96
+ }
97
+ }
98
+ return state;
99
+ }
100
+
86
101
  contextMenuClicked(action, param) {
87
102
  this.props.contextMenuActionHandler(action, param);
88
103
  }
@@ -716,7 +716,10 @@ export default class APIPipeline {
716
716
  }
717
717
 
718
718
  setNodeProperties(nodeId, properties) {
719
- this.store.dispatch({ type: "SET_NODE_PROPERTIES", data: { nodeId: nodeId, properties: properties }, pipelineId: this.pipelineId });
719
+ let newNode = cloneDeep(this.getNode(nodeId));
720
+ newNode = Object.assign(newNode, properties);
721
+ newNode = this.objectModel.setNodeAttributes(newNode);
722
+ this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
720
723
  }
721
724
 
722
725
  setNodeMessage(nodeId, message) {
@@ -736,17 +739,11 @@ export default class APIPipeline {
736
739
  }
737
740
 
738
741
  setNodeInputPorts(nodeId, inputs) {
739
- const node = this.getNode(nodeId);
740
- node.inputs = inputs;
741
- const newNode = this.objectModel.setNodeAttributes(node);
742
- this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
742
+ this.setNodeProperties(nodeId, { inputs });
743
743
  }
744
744
 
745
745
  setNodeOutputPorts(nodeId, outputs) {
746
- const node = this.getNode(nodeId);
747
- node.outputs = outputs;
748
- const newNode = this.objectModel.setNodeAttributes(node);
749
- this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
746
+ this.setNodeProperties(nodeId, { outputs });
750
747
  }
751
748
 
752
749
  addCustomAttrToNodes(nodeIds, attrName, attrValue) {
@@ -57,7 +57,7 @@ const portsHorizontalDefaultLayout = {
57
57
  labelSingleLine: true, // false allow multi-line labels
58
58
  labelOutline: false,
59
59
  labelMaxCharacters: null, // null allows unlimited characters
60
- labelAllowReturnKey: false, // true allows line feed to be inserted into label
60
+ labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
61
61
 
62
62
  // An array of decorations to be applied to the node. For details see:
63
63
  // https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
@@ -82,7 +82,7 @@ const portsHorizontalDefaultLayout = {
82
82
 
83
83
  // Width and height for label decorators
84
84
  decoratorLabelWidth: 80,
85
- decoratorLabelHeight: 15,
85
+ decoratorLabelHeight: 30,
86
86
 
87
87
  // Display drop shadow under and round the nodes
88
88
  dropShadow: true,
@@ -294,7 +294,7 @@ const portsHorizontalDefaultLayout = {
294
294
 
295
295
  // Width and height for label decorators
296
296
  linkDecoratorLabelWidth: 80,
297
- linkDecoratorLabelHeight: 15,
297
+ linkDecoratorLabelHeight: 30,
298
298
 
299
299
  // Values for drawing connectors. wrapAroundSpacing and
300
300
  // wrapAroundNodePadding are used when curved connectors are drawn all the
@@ -448,7 +448,7 @@ const portsVerticalDefaultLayout = {
448
448
  labelSingleLine: true, // false allow multi-line labels
449
449
  labelOutline: false,
450
450
  labelMaxCharacters: null, // null allows unlimited characters
451
- labelAllowReturnKey: false, // true allows line feed to be inserted into label
451
+ labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
452
452
 
453
453
  // An array of decorations to be applied to the node. For details see:
454
454
  // https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
@@ -473,7 +473,7 @@ const portsVerticalDefaultLayout = {
473
473
 
474
474
  // Width and height for label decorators
475
475
  decoratorLabelWidth: 80,
476
- decoratorLabelHeight: 15,
476
+ decoratorLabelHeight: 30,
477
477
 
478
478
  // Display drop shadow under and round the nodes
479
479
  dropShadow: false,
@@ -685,7 +685,7 @@ const portsVerticalDefaultLayout = {
685
685
 
686
686
  // Width and height for label decorators
687
687
  linkDecoratorLabelWidth: 80,
688
- linkDecoratorLabelHeight: 15,
688
+ linkDecoratorLabelHeight: 30,
689
689
 
690
690
  // Values for drawing connectors. wrapAroundSpacing and
691
691
  // wrapAroundNodePadding are used when curved connectors are drawn all the
@@ -365,7 +365,7 @@ export default class PipelineOutHandler {
365
365
  canvasInfoLinks.forEach((link) => {
366
366
  if (link.type === "commentLink" &&
367
367
  link.srcNodeId === commentId) {
368
- const newLink = { node_ref: link.trgNodeId };
368
+ const newLink = { id: link.id, node_ref: link.trgNodeId };
369
369
  if (link.class_name) {
370
370
  newLink.class_name = link.class_name;
371
371
  }
@@ -155,7 +155,6 @@ export default (state = {}, action) => {
155
155
  case "REPLACE_NODES":
156
156
  case "REPLACE_NODE":
157
157
  case "SIZE_AND_POSITION_OBJECTS":
158
- case "SET_NODE_PROPERTIES":
159
158
  case "SET_NODE_PARAMETERS":
160
159
  case "SET_NODE_UI_PARAMETERS":
161
160
  case "SET_NODE_MESSAGE":
@@ -123,15 +123,6 @@ export default (state = [], action) => {
123
123
  return !nodeFound;
124
124
  });
125
125
 
126
- case "SET_NODE_PROPERTIES":
127
- return state.map((node, index) => {
128
- if (action.data.nodeId === node.id) {
129
- const newNode = Object.assign({}, node, action.data.properties);
130
- return newNode;
131
- }
132
- return node;
133
- });
134
-
135
126
  case "SET_NODE_PARAMETERS":
136
127
  return state.map((node, index) => {
137
128
  if (action.data.nodeId === node.id) {