diff --git a/canvas_modules/harness/src/client/components/custom-canvases/stages/app-decoration.jsx b/canvas_modules/harness/src/client/components/custom-canvases/stages/app-decoration.jsx new file mode 100644 index 000000000..f89d77ab2 --- /dev/null +++ b/canvas_modules/harness/src/client/components/custom-canvases/stages/app-decoration.jsx @@ -0,0 +1,62 @@ +/* + * Copyright 2024 Elyra Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +import React from "react"; +import PropTypes from "prop-types"; +import { Tag } from "@carbon/react"; + +class AppDecoration extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + const h = 70; + const w = 250; + const o = 30; // Offset of triangle from left edge + const t = 8; // Triangle size + const d = 5; // Depth of colored strip + + const outlinePath = `M 0 0 L 0 ${h} ${o} ${h} ${o + t} ${h + t} ${o + (2 * t)} ${h} ${w} ${h} ${w} 0 Z`; + const stripPath = `M 0 0 L 0 ${d} ${w} ${d} ${w} 0 Z`; + + return ( +
+ + + + +
+ + {"Column"} + +
+
+ {this.props.node.label} +
+
+ ); + } +} + +AppDecoration.propTypes = { + node: PropTypes.object +}; + +export default AppDecoration; diff --git a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx index f183897f9..a7c879066 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx @@ -24,6 +24,7 @@ import { Button } from "@carbon/react"; import { Edit, OpenPanelFilledLeft, Search } from "@carbon/react/icons"; import MultiCommandPanel from "./multi-command-panel"; +import AppDecoration from "./app-decoration.jsx"; import StagesFlow from "./stages-flow.json"; import StagesPalette from "../../../../../test_resources/palettes/stagesPalette.json"; @@ -282,10 +283,25 @@ export default class StagesCanvas extends React.Component { } clickActionHandler(source) { - if (source.clickType === "DOUBLE_CLICK") { + if (source.objectType === "node" && + source.clickType === "DOUBLE_CLICK") { const node = this.canvasController.getNode(source.id, source.pipelineId); + if (node && node.type === "super_node") { this.canvasController.displaySubPipelineForSupernode(source.id, source.pipelineId); + + } else { + const decs = (this.canvasController.getNodeDecorations(source.id)) + ? null + : [{ + id: "123", + jsx: (), + x_pos: -10, + y_pos: -115, + width: 250, + height: 90 + }]; + this.canvasController.setNodeDecorations(source.id, decs); } } }