render Lifecycle from new library

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",

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 {Graph} from 'react-d3-graph';
-import "storm-react-diagrams/dist/style.min.css";
+
-import "./LifeCycle.css";
+
-import {distributeElements} from "../../../js/utils/dagre-utils.ts";
+// 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 onClickNode = function(nodeId) {
-const outPortName = "OUT";
+    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) => {
+        const data = {
-            model.addNode(node);
+            nodes: nodes,
-            // node.addListener({
+            links: links
-            //     selectionChanged: (node, isSelected) => {
+        };
-            //         console.log(isSelected);
-            //     }
-            // });
-        });
-        links.forEach((link) => {
-            model.addLink(link);
-        });
-
 
-        let distributedModel = getDistributedModel(engine, model);
-        engine.setDiagramModel(distributedModel);
 
         return (
-            <div style={{height: 500}}>
+            <div>
-                <SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
+                <Graph
+                    id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
+                    data={data}
+                    config={myConfig}
+                    onClickNode={onClickNode}
+                />
             </div>
         );
     }
 }
 
-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;

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;
+}

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 (
+        <div className="node" style={{backgroundColor: node.color}}>
+            <div className="name">{node.id}</div>
+
+            {/*<div className="flex-container fill-space flex-container-row">*/}
+                {/*<div className="fill-space">*/}
+                    {/*<div*/}
+                        {/*className="icon"*/}
+                        {/*style={{ backgroundImage: `url('${isMale ? ICON_TYPES.MAN : ICON_TYPES.WOMAN}')` }}*/}
+                    {/*/>*/}
+                {/*</div>*/}
+
+                {/*<div className="icon-bar">*/}
+                    {/*{person.hasBike && (*/}
+                        {/*<div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.BIKE}')` }} />*/}
+                    {/*)}*/}
+                    {/*{person.hasCar && <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.CAR}')` }} />}*/}
+                {/*</div>*/}
+            {/*</div>*/}
+        </div>
+    );
+}
+
+export default CustomNode;

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 (
+            <div style={{height: 500}}>
+                <SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
+            </div>
+        );
+    }
+}
+
+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;