Skip to content

Commit 99d2a62

Browse files
herlerajaherleraja
committed
refactor(ReactNodesCarbonCanvas): to functional component
Signed-off-by: Amritha raj herle <[email protected]>
1 parent 54588a8 commit 99d2a62

File tree

4 files changed

+101
-130
lines changed

4 files changed

+101
-130
lines changed

‎canvas_modules/harness/src/client/components/custom-canvases/react-nodes-carbon/react-nodes-carbon-canvas.jsx‎

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,16 @@ import ShapeNodeWrapper from "./wrapper-shape-node.jsx";
2525
import ReactNodesFlow from "./react-nodes-carbon-flow.json";
2626
import ReactNodesPalette from "./react-nodes-carbon-palette.json";
2727

28+
const ReactNodesCarbonCanvas = (props) => {
29+
const canvasController = React.useMemo(() => {
30+
const instance = new CanvasController();
31+
instance.setPipelineFlow(ReactNodesFlow);
32+
instance.setPipelineFlowPalette(ReactNodesPalette);
33+
return instance;
34+
}, []);
2835

29-
export default class ReactNodesCarbonCanvas extends React.Component {
30-
constructor(props) {
31-
super(props);
32-
this.canvasController = new CanvasController();
33-
this.canvasController.setPipelineFlow(ReactNodesFlow);
34-
this.canvasController.setPipelineFlowPalette(ReactNodesPalette);
35-
36-
this.getConfig = this.getConfig.bind(this);
37-
this.layoutHandler = this.layoutHandler.bind(this);
38-
}
39-
40-
getConfig() {
41-
const config = Object.assign({}, this.props.config, {
36+
const getConfig = () => {
37+
const config = Object.assign({}, props.config, {
4238
enableParentClass: "react-nodes-carbon",
4339
enableNodeFormatType: "Vertical",
4440
enableLinkType: "Curve",
@@ -97,13 +93,9 @@ export default class ReactNodesCarbonCanvas extends React.Component {
9793
}
9894
});
9995
return config;
100-
}
101-
102-
getCanvasController() {
103-
return this.canvasController;
104-
}
96+
};
10597

106-
layoutHandler(node) {
98+
const layoutHandler = (node) => {
10799
if (node?.op && node.op.includes("shape-node")) {
108100
const config = {
109101
selectionPath: "M -4 -4 h 36 v 36 h -36 Z",
@@ -121,20 +113,19 @@ export default class ReactNodesCarbonCanvas extends React.Component {
121113
return config;
122114
}
123115
return null;
124-
}
116+
};
125117

126-
render() {
127-
const config = this.getConfig();
128-
return (
129-
<CommonCanvas
130-
canvasController={this.canvasController}
131-
config={config}
132-
layoutHandler={this.layoutHandler}
133-
/>
134-
);
135-
}
136-
}
118+
return (
119+
<CommonCanvas
120+
canvasController={canvasController}
121+
config={getConfig()}
122+
layoutHandler={layoutHandler}
123+
/>
124+
);
125+
};
137126

138127
ReactNodesCarbonCanvas.propTypes = {
139128
config: PropTypes.object
140129
};
130+
131+
export default ReactNodesCarbonCanvas;

‎canvas_modules/harness/src/client/components/custom-canvases/react-nodes-carbon/react-nodes-carbon-constants.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Copyright 2025 Elyra Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export const IMAGE_STYLES = { height: "24px", width: "24px", y: 0 };

‎canvas_modules/harness/src/client/components/custom-canvases/react-nodes-carbon/wrapper-card-node.jsx‎

Lines changed: 48 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -14,98 +14,65 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from "react";
17+
import React, { useEffect } from "react";
1818
import PropTypes from "prop-types";
1919
import SVG from "react-inlinesvg";
20-
import { get } from "lodash";
2120

22-
import { CardNode, CardNodeColumn,
23-
CardNodeSubtitle,
24-
CardNodeTitle
25-
} from "@carbon/charts-react";
21+
import { CardNode, CardNodeColumn, CardNodeTitle, CardNodeSubtitle } from "@carbon/charts-react";
22+
import { IMAGE_STYLES } from "./react-nodes-carbon-constants";
2623

27-
class CardNodeWrapper extends React.Component {
24+
const CardNodeWrapper = ({ nodeData, pipelineData, canvasController }) => {
2825

29-
componentDidMount() {
30-
this.setNodeSize();
31-
}
26+
const divRef = React.createRef();
3227

33-
componentDidUpdate() {
34-
this.setNodeSize();
35-
}
28+
const { label, description, op, type, image } = nodeData;
29+
const { color, shape } = nodeData?.app_data?.react_nodes_data || {};
3630

37-
// Sets the node size (which will set the containing foreignObject size) based on display size
38-
// of the Card Wrapper. A slight pause is required to allow the Card Wrapper contents to resolve
39-
// to their ultimate display size.
40-
setNodeSize() {
41-
setTimeout(() => {
42-
const node = this.props.canvasController.getNode(this.props.nodeData.id, this.props.pipelineData.id);
43-
44-
if (!node.isResized && this.divRef &&
45-
(this.divRef.current.scrollHeight > this.divRef.current.clientHeight ||
46-
this.divRef.current.scrollWidth > this.divRef.current.clientWidth)) {
47-
node.isResized = true;
48-
node.resizeHeight = this.divRef.current.scrollHeight + 10;
49-
node.resizeWidth = this.divRef.current.scrollWidth;
50-
this.props.canvasController.setNodeProperties(this.props.nodeData.id, node, this.props.pipelineData.id);
51-
}
52-
}, 100);
53-
}
31+
const imageOverride = image === "useDefaultIcon" ? "images/custom-canvases/flows/palette/icons/supernode.svg" : image;
5432

33+
const isSuperNodeAndExpanded = type === "super_node" && nodeData.is_expanded;
5534

56-
render() {
57-
const styleImage = { height: "24px", width: "24px", y: 0 };
58-
59-
const image = this.props.nodeData.image === "useDefaultIcon"
60-
? "images/custom-canvases/flows/palette/icons/supernode.svg"
61-
: this.props.nodeData.image;
62-
63-
if (this.props.nodeData.type === "super_node" &&
64-
this.props.nodeData.is_expanded) {
65-
// The SVG area that shows the sub-flow will overlay this Card Node that
66-
// forms the background for the supernode.
67-
return (
68-
<div className={"card-node"}>
69-
<CardNode>
70-
<CardNodeColumn>
71-
<SVG src={image} style={styleImage} />
72-
</CardNodeColumn>
73-
<CardNodeColumn>
74-
<CardNodeTitle>{this.props.nodeData.label}</CardNodeTitle>
75-
</CardNodeColumn>
76-
</CardNode>
77-
</div>
78-
);
79-
}
80-
81-
// Read attributes from the nodeData, in the pipeline flow JSON file,
82-
// for the node we are displaying.
83-
const type = get(this, "props.nodeData.op"); // Derive the type from the operator
84-
const color = get(this, "props.nodeData.app_data.react_nodes_data.color");
85-
const shape = get(this, "props.nodeData.app_data.react_nodes_data.shape");
86-
87-
// Set the classes based on the node attributes.
88-
let className = "card-node";
89-
className += type === "card-node-with-outline" ? " card-node-outline-div" : "";
35+
let className = "card-node";
36+
if (!isSuperNodeAndExpanded) {
37+
className += op === "card-node-with-outline" ? " card-node-outline-div" : "";
9038
className += shape === "curved-corners" ? " card-node-curved-corners" : "";
91-
92-
this.divRef = React.createRef();
93-
94-
return (
95-
<div className={className} ref={this.divRef}>
96-
<CardNode color={color}>
97-
<CardNodeColumn>
98-
<SVG src={image} style={styleImage} />
99-
</CardNodeColumn>
100-
<CardNodeColumn>
101-
<CardNodeTitle>{this.props.nodeData.label}</CardNodeTitle>
102-
<CardNodeSubtitle>{this.props.nodeData.description}</CardNodeSubtitle>
103-
</CardNodeColumn>
104-
</CardNode>
105-
</div>
106-
);
10739
}
108-
}
40+
41+
42+
useEffect(() => {
43+
const setNodeSize = () => {
44+
setTimeout(() => {
45+
const node = canvasController.getNode(nodeData.id, pipelineData.id);
46+
47+
if (!node.isResized && divRef.current &&
48+
(divRef.current.scrollHeight > divRef.current.clientHeight ||
49+
divRef.current.scrollWidth > divRef.current.clientWidth)) {
50+
node.isResized = true;
51+
node.resizeHeight = divRef.current.scrollHeight + 10;
52+
node.resizeWidth = divRef.current.scrollWidth;
53+
canvasController.setNodeProperties(nodeData.id, node, pipelineData.id);
54+
}
55+
}, 100);
56+
};
57+
58+
setNodeSize();
59+
60+
}, [nodeData, pipelineData, canvasController]);
61+
62+
return (
63+
<div className={className} ref={divRef}>
64+
<CardNode color={color}>
65+
<CardNodeColumn>
66+
<SVG src={imageOverride} style={IMAGE_STYLES} />
67+
</CardNodeColumn>
68+
<CardNodeColumn>
69+
<CardNodeTitle>{label}</CardNodeTitle>
70+
{!isSuperNodeAndExpanded && <CardNodeSubtitle>{description}</CardNodeSubtitle>}
71+
</CardNodeColumn>
72+
</CardNode>
73+
</div>
74+
);
75+
};
10976

11077
CardNodeWrapper.propTypes = {
11178
nodeData: PropTypes.object,

‎canvas_modules/harness/src/client/components/custom-canvases/react-nodes-carbon/wrapper-shape-node.jsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,24 @@
1717
import React from "react";
1818
import PropTypes from "prop-types";
1919
import SVG from "react-inlinesvg";
20-
import { get } from "lodash";
2120

2221
import { ShapeNode } from "@carbon/charts-react";
22+
import { IMAGE_STYLES } from "./react-nodes-carbon-constants";
2323

24-
class ShapeNodeWrapper extends React.Component {
25-
render() {
26-
const shape = get(this, "props.nodeData.app_data.react_nodes_data.shape");
24+
const ShapeNodeWrapper = ({ nodeData }) => {
25+
const shape = nodeData?.app_data?.react_nodes_data?.shape;
2726

28-
const styleImage = { height: "24px", width: "24px", y: 0 };
29-
const icon = (<SVG src={this.props.nodeData.image} style={styleImage} />);
30-
return (
31-
<div className={"shape-node-div"}>
32-
<ShapeNode
33-
title={this.props.nodeData.label}
34-
shape={shape}
35-
size="28px"
36-
renderIcon={icon}
37-
/>
38-
</div>
39-
);
40-
}
41-
}
27+
return (
28+
<div className="shape-node-div">
29+
<ShapeNode
30+
title={nodeData.label}
31+
shape={shape}
32+
size="28px"
33+
renderIcon={<SVG src={nodeData.image} style={IMAGE_STYLES} />}
34+
/>
35+
</div>
36+
);
37+
};
4238

4339
ShapeNodeWrapper.propTypes = {
4440
nodeData: PropTypes.object

0 commit comments

Comments
 (0)