Graph...

docs/example1.html

@@ -147,7 +147,7 @@
 		<script src="../src/js/jquery.fileupload.js"></script>
 		<script src="../src/js/jquery.fileupload-process.js"></script>
 		<script src="../src/js/jquery.fileupload-validate.js"></script>
-		<script src='../src/js/cytoscape.min.js' type='text/javascript'></script>
+		<script src='../src/js/cytoscape.js' type='text/javascript'></script>
 		
 		<script src='../src/js/jflow-activewf.js' type='text/javascript'></script>
 		<script src='../src/js/jflow-availablewf.js' type='text/javascript'></script>

src/js/jflow-wfstatus.js

@@ -44,10 +44,16 @@
 			components: new Array()
 	    };
 		for (var i in data.components) {
-    		var failed = parseInt(((parseInt(data.components[i].aborted) + parseInt(data.components[i].failed)) * 100) / parseInt(data.components[i].total)),
+    		var	failed    = 0,
+    			completed = 0,
+    			running   = 0,
+    			waiting   = 0;
+    		if(parseInt(data.components[i].total) != 0) {
+    			failed    = parseInt(((parseInt(data.components[i].aborted) + parseInt(data.components[i].failed)) * 100) / parseInt(data.components[i].total)),
     			completed = parseInt((parseInt(data.components[i].completed) * 100) / parseInt(data.components[i].total)),
-    			running = parseInt((parseInt(data.components[i].running) * 100) / parseInt(data.components[i].total)),
-    			waiting = parseInt((parseInt(data.components[i].waiting) * 100) / parseInt(data.components[i].total));
+    			running   = parseInt((parseInt(data.components[i].running)   * 100) / parseInt(data.components[i].total)),
+    			waiting   = parseInt((parseInt(data.components[i].waiting)   * 100) / parseInt(data.components[i].total));
+    		}
     		workflow.components.push({
     			name: data.components[i].name,
     			elapsed_time: data.components[i].elapsed_time,
@@ -78,7 +84,7 @@
 		    success: function(data) {
 		    	$this.$element.find("#wfstatus_error_panel").hide();
 		    	if( data != null ) {
-			    	$this.$element.find("#wfstatus_error_msg").text( data["msg"].join("<br/>") );
+			    	$this.$element.find("#wfstatus_error_msg").html( data["msg"].join('<br/>') );
 			    	$this.$element.find("#wfstatus_error_location").text( data["location"] );
 			    	$this.$element.find("#wfstatus_error_panel").show();
 		    	}
@@ -90,6 +96,7 @@
 		if (this.options.forceUsingWorkflow) {
 			var workflow = this.reformatWorkflowJSON(this.options.forceUsingWorkflow);
 			this.$element.html("");
+			$.tmpl(this.options.headTemplate, {workflow: workflow}).appendTo(this.$element);
 			$.tmpl(this.options.listTemplate, {workflow: workflow}).appendTo(this.$element);
 			// force for first display, then reload an update
 			this.options.forceUsingWorkflow = null;
@@ -123,6 +130,7 @@
 			    success: function(data) {
 			    	var workflow = $this.reformatWorkflowJSON(data);
 			    	$this.$element.html("");
+			    	$.tmpl($this.options.headTemplate, {workflow: workflow}).appendTo($this.$element);
 			    	$.tmpl($this.options.listTemplate, {workflow: workflow}).appendTo($this.$element);
 			    	$this.errorMessage();
 			    	$("[id^=component_]").hover(function(){
@@ -170,47 +178,75 @@
 		        $this.$element.html(alert_message);
 		    },
 		    success: function(data) {
-		    	
-		    	console.log(data)
-		    	
-		    	
-		    	// prepare the container
-		    	$this.$element.html("");
-		    	$this.$element.height(500);
-		    	//$this.$element.width(200);
+		    	var workflow = $this.reformatWorkflowJSON(data);
+			    $this.$element.html("");
+			    $.tmpl($this.options.headTemplate, {workflow: workflow}).appendTo($this.$element);
+			    $.tmpl($this.options.graphTemplate, {workflow: workflow}).appendTo($this.$element);
 
 		    	// prepare the data
-		    	var nodes = new Array(),
+		    	var	nodes = new Array(),
 		    		edges = new Array();
 		    	for (var i in data.components) {
-		    		nodes.push({ data: { id: data.components[i].name, name: data.components[i].name} });
+		    		var err = 0,
+		    		wai = workflow.components[i].waiting,
+		    		run = workflow.components[i].running,
+		    		fai = workflow.components[i].failed,
+		    		com = workflow.components[i].completed;
+		    		if((wai+run+fai+com)==0) { err = 100; }
+		    		nodes.push({ data: {
+		    			id:   data.components[i].name,
+		    			name: data.components[i].name,
+		    			err:  err,
+		    			wai:  wai,
+		    			run:  run,
+		    			fai:  fai,
+		    			com:  com
+		    		}});
 		    	}
 		    	for (var i in data.edges) {
 		    		if (data.edges[i][0] != null && data.edges[i][1] != null) {
 		    			edges.push({ data: { source: data.edges[i][0], target: data.edges[i][1] } });
 		    		}
 		    	}
-		    	
-		    	$this.$element.cytoscape({
+
+		    	$('#cytoscape_panel').cytoscape({
 		    		  style: cytoscape.stylesheet()
 		    		    .selector('node')
 		    		      .css({
-		    		        'content': 'data(name)',
-		    		        'text-valign': 'center',
-		    		        'color': 'white',
-		    		        'text-outline-width': 2,
-		    		        'text-outline-color': '#888'
+		    		    	  'width': '80px',
+		    		          'height': '80px',
+		    		          'content': 'data(id)',
+		    		          'pie-size': '100%',
+		    		          'pie-1-background-color': 'lightgrey', //Error
+		    		          'pie-1-background-size': 'mapData(err, 0, 100, 0, 100)',
+		    		          'pie-2-background-color': '#faa732',   //Waiting
+		    		          'pie-2-background-size': 'mapData(wai, 0, 100, 0, 100)',
+		    		          'pie-3-background-color': '#0e90d2',   //Running
+		    		          'pie-3-background-size': 'mapData(run, 0, 100, 0, 100)',
+		    		          'pie-4-background-color': '#dd514c',   //Failed
+		    		          'pie-4-background-size': 'mapData(fai, 0, 100, 0, 100)',
+		    		          'pie-5-background-color': '#7fe175',   //Completed
+		    		          'pie-5-background-size': 'mapData(com, 0, 100, 0, 100)',
+		    		          'background-color': 'lightgrey',
+		    		          'text-valign': 'bottom',
+		    		          'color': 'black',
+		    		          'font-family': '"Trebuchet MS",Verdana,"Lucida Grande", Tahoma, Helvetica, sans-serif',
+		    		          'border-opacity' : 1,
+		    		          'border-width' : '0.05em', 
+		    		          'font-size': '10px'
 		    		      })
 		    		    .selector('edge')
 		    		      .css({
-		    		        'target-arrow-shape': 'triangle'
+		    		    	  'width': 1,
+		    		          //'curve-style':'haysack',
+		    		          //'target-arrow-shape': 'triangle',
+		    		          'opacity': 0.5
 		    		      })
 		    		    .selector(':selected')
 		    		      .css({
-		    		        'background-color': 'black',
-		    		        'line-color': 'black',
-		    		        'target-arrow-color': 'black',
-		    		        'source-arrow-color': 'black'
+		    		        /*'border-width': 30,
+		    		        'border-color': 'red',
+		    		        'color': 'red'*/
 		    		      })
 		    		    .selector('.faded')
 		    		      .css({
@@ -221,25 +257,19 @@
 		    		    nodes: nodes,
 		    		    edges: edges
 		    		  },
-		    		  
 		    		  layout: {
 		    		    name: 'grid',
-		    		    padding: 10
+		    		    padding: 25
 		    		  },
-		    		  
 		    		  ready: function(){
 		    		    window.cy = this;
-
 		    		    cy.elements().unselectify();
-		    		    
 		    		    cy.on('tap', 'node', function(e){
 		    		      var node = e.cyTarget; 
 		    		      var neighborhood = node.neighborhood().add(node);
-		    		      
 		    		      cy.elements().addClass('faded');
 		    		      neighborhood.removeClass('faded');
 		    		    });
-		    		    
 		    		    cy.on('tap', function(e){
 		    		      if( e.cyTarget === cy ){
 		    		        cy.elements().removeClass('faded');
@@ -333,21 +363,22 @@
 
 	$.fn.wfstatus.defaults = {
 		serverURL: "http://localhost:8080",
+		headTemplate: ['<dl class="dl-horizontal">',
+		   		    '<dt>Start</dt>',
+				    '<dd>${workflow.start_time}</dd>',
+				    '<dt>End</dt>',
+				    '<dd>${workflow.end_time}</dd>',
+			        '<dt>Elapsed time</dt>',
+				    '<dd>${workflow.elapsed_time}</dd>',
+				    '<br/>',
+				    '<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">',
+				    '    <strong>Error message :</strong><br/>',
+				    '    <span id="wfstatus_error_msg"></span><br/>',
+				    '    <strong>Error location :</strong><br/>',
+				    '    <span id="wfstatus_error_location"></span>',
+				    '</div>',
+				    '</dl>'].join('\n'),
 		listTemplate: ['<dl class="dl-horizontal">',
-		    '<dt>Start</dt>',
-		    '<dd>${workflow.start_time}</dd>',
-		    '<dt>End</dt>',
-		    '<dd>${workflow.end_time}</dd>',
-	        '<dt>Elapsed time</dt>',
-		    '<dd>${workflow.elapsed_time}</dd>',
-		    '<br/>',
-		    '<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">',
-		    '    <strong>Error message :</strong><br/>',
-		    '    <span id="wfstatus_error_msg"></span><br/>',
-		    '    <strong>Error location :</strong><br/>',
-		    '    <span id="wfstatus_error_location"></span>',
-		    '</div>',
-		    '<br/>',
 		    '{{each(index, component) workflow.components}}',
 		    '<div id="component_${component.name}"><p><dt>${component.name}</dt>',
 		    '<dd>',
@@ -360,9 +391,13 @@
 		    '</dd></p></div>',
 		    '{{/each}}',
 		    '</dl>'].join('\n'),
+		graphTemplate: ['<div id="cytoscape_panel" style="background-image:url(img/grid.png);*/',
+		    'background-color:#f9f9f9;margin-top:-20px;border:1px solid lightgrey;border-radius:5px;',
+		    'width:515px;height:393px">',
+		    '</div>'].join('\n'),
 		workflowID: null,
 		forceUsingWorkflow: null,
-		display: "list"
+		display: "graph"
 	}
 
 	$.fn.wfstatus.Constructor = WFStatus