parses the node and edges on server dynamically

web/package.json

@@ -31,8 +31,10 @@
  "react-scripts": "3.4.1",
  "react-slick": "^0.26.1",
  "react-spinners": "^0.9.0",
+ "reactjs-graphs": "^1.4.0",
  "slick-carousel": "^1.8.1",
- "styled-components": "^5.1.0"
+ "styled-components": "^5.1.0",
+ "xml2js": "^0.4.23"
  },
  "scripts": {
  "start": "react-scripts start",

web/server.js

@@ -10,6 +10,8 @@ app.use(express.json())
 var parser = require("properties-file");
 var base64 = require('base-64');
 var fetch=require('node-fetch');
+var xml2js = require('xml2js');
+var parser = new xml2js.Parser();
 
 //For Patient 1
 var storage = multer.diskStorage({
@@ -345,6 +347,35 @@ app.get('/auth/:wf_id/:state',function(request,response){
  console.log("No Jobs are in the "+state+" state");
  });
  })
+
+
+// parse the dax edges and nodes
+function length(obj) {
+ return Object.keys(obj).length;
+}
+app.get('/nodes',function(req,res){
+ fs.readFile( './TVB_patients/TVB1/configs/dax/main_bnm.dax', function(err, data) {
+ parser.parseString(data, function (err, result) {
+ for(var i=0;i< length (result.adag.child);i++){
+ res.write(result.adag.child[i].$.ref+'\n')
+ }
+ res.end()
+ });
+ });
+ });
+
+app.get('/edges',function(req,res){
+ fs.readFile( './TVB_patients/TVB1/configs/dax/main_bnm.dax', function(err, data) {
+ parser.parseString(data, function (err, result) {
+ for(var i=0;i< length (result.adag.child);i++){
+ for(var j=0;j<length (result.adag.child[i].parent);j++)
+ res.write(result.adag.child[i].$.ref+","+result.adag.child[i].parent[j].$.ref+'\n')
+ }
+ res.end()
+ });
+ });
+ })
+
 app.listen(8000, function() {
  console.log('App running on port 8000');
 });

web/src/App.js

@@ -5,6 +5,8 @@ import Input from './components/Input/Input';
 import Configuration from './components/Configuration/Configuration'
 import WorkflowList from './components/WorkflowList/WorkflowList';
 import JobList from './components/WorkflowList/JobList/JobList';
+import DAXGraph from './components/WorkflowList/JobList/DAXGraph'
+
 class App extends Component {
  render(){
  return (
@@ -14,6 +16,9 @@ class App extends Component {
  <Route path="/jobList/:jobid">
  <JobList />
  </Route>
+ <Route path="/daxgraph">
+ <DAXGraph />
+ </Route>
  <Route path="/workflowList">
  <WorkflowList />
  </Route>

web/src/components/WorkflowList/JobList/DAXGraph.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import Graph from 'reactjs-graphs'
+import axios from 'axios'
+
+const onClick = (label, index, extras) => {
+ console.log(label, index, extras)
+}
+
+const vertices = [
+ { label: "A", onClick },
+ { label: "B", onClick },
+ { label: "C", onClick },
+ { label: "D", onClick },
+ { label: "E", onClick },
+ { label: "F", onClick },
+ { label: "G", onClick },
+ { label: "H", },
+ { label: "I", },
+ { label: "J", },
+ { label: "K", },
+ { label: "L", },
+ { label: "M", },
+ { label: "N", },
+]
+
+const edges = [
+ ["A", "B"],
+ ["B", "C"],
+ ["C", "D"],
+ ["C", "E"],
+ ["C", "F"],
+ ["C", "G"],
+ ["F", "H"],
+ ["E", "H"],
+ ["G", "H"],
+ ["H", "I"],
+ ["H", "J"],
+ ["H", "K"],
+ ["K", "L"],
+ ["J", "L"],
+ ["I", "L"],
+ ["L", "M"],
+ ["L", "N"]
+ ]
+
+
+class DAXGraph extends React.Component{
+ constructor() {
+ super();
+ this.state = {
+ nodes:[],
+ edges:[]
+ }
+ }
+ componentDidMount() {
+ axios.get('http:https://localhost:8000/nodes')
+ .then(response => {
+ this.setState({
+ nodes:response.data
+ });
+ })
+ axios.get('http:https://localhost:8000/edges')
+ .then(response => {
+ this.setState({
+ edges:response.data
+ });
+ })
+ }
+
+ render(){
+ return(
+ <div>
+ <h3>Work in Progress...This graph is an example from reactjs-graph npm module data.</h3>
+ <Graph 
+ vertices={vertices} 
+ edges={edges} 
+ width={1000} 
+ height={500} 
+ autoWidth={true} 
+ vertexStroke="#df6766" 
+ edgeStroke="#ebb2b2" 
+ edgeWidth={2} 
+ vertexRadius={15} 
+ vertexGap={200} 
+ labelFontSize={20} 
+ activeVertexFill="blue" 
+ inactiveVertexFill="white" 
+ fontFamily="Airbnb Cereal"
+ labelColor="black" 
+ className="className" 
+ centerInCanvas={true}
+/>
+</div>
+)
+
+ }
+}
+export default DAXGraph;

web/src/components/WorkflowList/JobList/JobList.css

@@ -6,10 +6,20 @@
 .job_table{
  padding: 40px;
 }
-
 .spinner{
  display: flex;
  align-self: center;
  justify-content: center;
 
+}
+.button_dax{
+ font-size: 20px;
+ background-color:green;
+ color: white;
+ border-radius: 10px;
+ width: 30%;
+ margin-left: 35%;
+ margin-right: 35%;
+ margin-top:30px;
+ cursor: pointer
 }

web/src/components/WorkflowList/JobList/JobList.js

@@ -18,14 +18,24 @@ function successfulStyle(row) {
  return { backgroundColor: row ='green' };
 }
 class JobList extends Component {
- state = {
+ constructor() {
+ super();
+ this.state = {
  jobs: [],
  successful:[],
  failed:[],
  running:[],
  failing:[],
  loading:false
  }
+ this.handleClick = this.handleClick.bind(this);
+}
+
+ handleClick=(event)=>{
+ event.preventDefault();
+ this.props.history.push('/daxgraph');
+ }
+
  componentDidMount() {
  var wf_id=this.props.match.params.jobid
  axios.get('http:https://localhost:8000/auth/'+wf_id)
@@ -109,7 +119,10 @@ class JobList extends Component {
  <TableHeaderColumn dataField="exec_job_id">Job Name</TableHeaderColumn>
  </BootstrapTable>:
  <div className='spinner'><BeatLoader color={"#00BFFF"}/></div> }
- </div>
+
+
+ <button className="button_dax" onClick={this.handleClick}>Click Here To View the DAX </button>
+ </div>
  );
  }
 }