From abee848e2b3b51e0d7d30d5a157b6cad9b1f5608 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 15 May 2019 16:58:45 +0530 Subject: [PATCH] render Lifecycle from new library --- .../react-app/package.json | 2 + .../components/apps/release/LifeCycleGraph.js | 123 +++++++++--------- .../apps/release/nodes/CustomNode.css | 21 +++ .../apps/release/nodes/CustomNode.jsx | 36 +++++ .../apps/release/temp/LifeCycleGraph.js | 98 ++++++++++++++ 5 files changed, 220 insertions(+), 60 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.css create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/temp/LifeCycleGraph.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index 469943d5b72..bb4a3574055 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -13,9 +13,11 @@ "acorn": "^6.1.1", "antd": "^3.15.0", "axios": "^0.18.0", + "d3": "^5.9.2", "dagre": "^0.8.4", "keymirror": "^0.1.1", "react": "^16.8.4", + "react-d3-graph": "^2.0.2", "react-dom": "^16.8.4", "react-highlight-words": "^0.16.0", "react-router": "latest", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js index fc25a9b306b..fa7ae3de7ef 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js @@ -1,98 +1,101 @@ import React from "react"; -import * as SRD from "storm-react-diagrams"; -import "storm-react-diagrams/dist/style.min.css"; -import "./LifeCycle.css"; -import {distributeElements} from "../../../js/utils/dagre-utils.ts"; +import {Graph} from 'react-d3-graph'; + + +// the graph configuration, you only need to pass down properties +// that you want to override, otherwise default ones will be used +const myConfig = { + nodeHighlightBehavior: true, + directed: true, + height: 400, + d3: { + alphaTarget: 0.05, + gravity: -200, + linkLength: 200, + linkStrength: 1 + }, + node: { + color: "#d3d3d3", + fontColor: "black", + fontSize: 12, + fontWeight: "normal", + highlightFontSize: 12, + highlightFontWeight: "bold", + highlightStrokeColor: "SAME", + highlightStrokeWidth: 1.5, + labelProperty: "id", + mouseCursor: "pointer", + opacity: 1, + strokeColor: "none", + strokeWidth: 1.5, + svg: "", + symbolType: "circle", + }, + link: { + highlightColor: 'lightblue' + } +}; -const inPortName = "IN"; -const outPortName = "OUT"; +const onClickNode = function(nodeId) { + window.alert(`Clicked node ${nodeId}`); +}; class LifeCycleGraph extends React.Component { + render() { +// graph payload (with minimalist structure) const lifecycle = this.props.lifecycle; const nodes = []; const links = []; - - const engine = new SRD.DiagramEngine(); - engine.installDefaultFactories(); - - const model = new SRD.DiagramModel(); const nextStates = lifecycle[this.props.currentStatus].proceedingStates; Object.keys(lifecycle).forEach((stateName) => { + const state = lifecycle[stateName]; let color = "rgb(83, 92, 104)"; if (stateName === this.props.currentStatus) { - color = "rgb(192,255,0)"; + color = "rgb(39, 174, 96)"; } else if (nextStates.includes(stateName)) { color = "rgb(0,192,255)"; } - const node = createNode(stateName, color); + let node = { + id: stateName, + color: color + }; nodes.push(node); - lifecycle[stateName].node = node; - }); - Object.keys(lifecycle).forEach((stateName) => { - const state = lifecycle[stateName]; //todo: remove checking property if (state.hasOwnProperty("proceedingStates")) { state.proceedingStates.forEach((proceedingState) => { - links.push(connectNodes(state.node, lifecycle[proceedingState].node)); + let link = { + source: stateName, + target: proceedingState + }; + links.push(link); }); } }); - nodes.forEach((node) => { - model.addNode(node); - // node.addListener({ - // selectionChanged: (node, isSelected) => { - // console.log(isSelected); - // } - // }); - }); - links.forEach((link) => { - model.addLink(link); - }); - + const data = { + nodes: nodes, + links: links + }; - let distributedModel = getDistributedModel(engine, model); - engine.setDiagramModel(distributedModel); return ( -
- +
+
); } } -function getDistributedModel(engine, model) { - const serialized = model.serializeDiagram(); - const distributedSerializedDiagram = distributeElements(serialized); - - //deserialize the model - let deSerializedModel = new SRD.DiagramModel(); - deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine); - return deSerializedModel; -} - -function createNode(name, color) { - const node = new SRD.DefaultNodeModel(name, color); - node.addPort(new SRD.DefaultPortModel(true, inPortName, " ")); - node.addPort(new SRD.DefaultPortModel(false, outPortName, " ")); - return node; -} - -let count = 0; - -function connectNodes(nodeFrom, nodeTo) { - return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName)); -} - -function f() { - console.log(1); -} export default LifeCycleGraph; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.css new file mode 100644 index 00000000000..2b59de070cc --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.css @@ -0,0 +1,21 @@ + +/* --- Shape for the nodes --- */ + +.node { + width: 75px; + height: 30px; + border-radius: 20% 20% 20% 20%; + overflow: hidden; + box-sizing: border-box; + display: flex; +} + + +.node .name { + padding: 5%; + font-size: 0.5rem; + font-weight: bold; + text-align: center; + text-transform: uppercase; + color: white; +} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.jsx new file mode 100644 index 00000000000..a77025bdd15 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/nodes/CustomNode.jsx @@ -0,0 +1,36 @@ +import React from "react"; + +import "./CustomNode.css"; + + +/** + * Component that renders a person's name and gender, along with icons + * representing if they have a driver license for bike and / or car. + * @param {Object} props component props to render. + */ +function CustomNode({ node }) { + + return ( +
+
{node.id}
+ + {/*
*/} + {/*
*/} + {/**/} + {/*
*/} + + {/*
*/} + {/*{person.hasBike && (*/} + {/*
*/} + {/*)}*/} + {/*{person.hasCar &&
}*/} + {/*
*/} + {/*
*/} +
+ ); +} + +export default CustomNode; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/temp/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/temp/LifeCycleGraph.js new file mode 100644 index 00000000000..fc25a9b306b --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/temp/LifeCycleGraph.js @@ -0,0 +1,98 @@ +import React from "react"; +import * as SRD from "storm-react-diagrams"; +import "storm-react-diagrams/dist/style.min.css"; +import "./LifeCycle.css"; +import {distributeElements} from "../../../js/utils/dagre-utils.ts"; + +const inPortName = "IN"; +const outPortName = "OUT"; + +class LifeCycleGraph extends React.Component { + render() { + + const lifecycle = this.props.lifecycle; + const nodes = []; + const links = []; + + const engine = new SRD.DiagramEngine(); + engine.installDefaultFactories(); + + const model = new SRD.DiagramModel(); + const nextStates = lifecycle[this.props.currentStatus].proceedingStates; + + + Object.keys(lifecycle).forEach((stateName) => { + let color = "rgb(83, 92, 104)"; + if (stateName === this.props.currentStatus) { + color = "rgb(192,255,0)"; + } else if (nextStates.includes(stateName)) { + color = "rgb(0,192,255)"; + } + const node = createNode(stateName, color); + nodes.push(node); + lifecycle[stateName].node = node; + }); + + Object.keys(lifecycle).forEach((stateName) => { + const state = lifecycle[stateName]; + //todo: remove checking property + if (state.hasOwnProperty("proceedingStates")) { + + state.proceedingStates.forEach((proceedingState) => { + links.push(connectNodes(state.node, lifecycle[proceedingState].node)); + }); + } + }); + + nodes.forEach((node) => { + model.addNode(node); + // node.addListener({ + // selectionChanged: (node, isSelected) => { + // console.log(isSelected); + // } + // }); + }); + links.forEach((link) => { + model.addLink(link); + }); + + + let distributedModel = getDistributedModel(engine, model); + engine.setDiagramModel(distributedModel); + + return ( +
+ +
+ ); + } +} + +function getDistributedModel(engine, model) { + const serialized = model.serializeDiagram(); + const distributedSerializedDiagram = distributeElements(serialized); + + //deserialize the model + let deSerializedModel = new SRD.DiagramModel(); + deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine); + return deSerializedModel; +} + +function createNode(name, color) { + const node = new SRD.DefaultNodeModel(name, color); + node.addPort(new SRD.DefaultPortModel(true, inPortName, " ")); + node.addPort(new SRD.DefaultPortModel(false, outPortName, " ")); + return node; +} + +let count = 0; + +function connectNodes(nodeFrom, nodeTo) { + return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName)); +} + +function f() { + console.log(1); +} + +export default LifeCycleGraph; \ No newline at end of file