Merge pull request #50 from bd2kccd/v1.3.2-json-pag-coloring

V1.3.2 json pag coloring

src/main/java/edu/pitt/dbmi/ccd/web/model/d3/Node.java

@@ -18,6 +18,8 @@
  */
 package edu.pitt.dbmi.ccd.web.model.d3;
 
+import java.util.List;
+
 /**
  *
  * Apr 7, 2015 1:06:29 PM
@@ -32,6 +34,8 @@ public class Node {
 
     private String type;
 
+    private List<String> edgeProps;
+
     public Node() {
     }
 
@@ -41,12 +45,11 @@ public Node(String source, String target, String type) {
         this.type = type;
     }
 
-    public String getTarget() {
-        return target;
-    }
-
-    public void setTarget(String target) {
+    public Node(String source, String target, String type, List<String> edgeProps) {
+        this.source = source;
         this.target = target;
+        this.type = type;
+        this.edgeProps = edgeProps;
     }
 
     public String getSource() {
@@ -57,6 +60,14 @@ public void setSource(String source) {
         this.source = source;
     }
 
+    public String getTarget() {
+        return target;
+    }
+
+    public void setTarget(String target) {
+        this.target = target;
+    }
+
     public String getType() {
         return type;
     }
@@ -65,4 +76,12 @@ public void setType(String type) {
         this.type = type;
     }
 
+    public List<String> getEdgeProps() {
+        return edgeProps;
+    }
+
+    public void setEdgeProps(List<String> edgeProps) {
+        this.edgeProps = edgeProps;
+    }
+
 }

src/main/java/edu/pitt/dbmi/ccd/web/service/algo/AlgorithmResultService.java

@@ -249,7 +249,22 @@ public List<Node> extractGraphNodes(final String fileName, final String username
                         if (values.length == 2) {
                             String source = values[0].trim();
                             String target = values[1].trim();
-                            nodes.add(new Node(source, target, edge));
+
+                            // check for edge properties
+                            values = space.split(target);
+                            if (values.length > 1) {
+                                target = values[0];
+
+                                // get edge properties
+                                List<String> edgeProps = new LinkedList<>();
+                                for (int i = 1; i < values.length; i++) {
+                                    edgeProps.add(values[i].trim());
+                                }
+
+                                nodes.add(new Node(source, target, edge, edgeProps));
+                            } else {
+                                nodes.add(new Node(source, target, edge));
+                            }
                         }
                     }
                 } else if ("Graph Edges:".equals(line)) {

src/main/resources/static/js/algo/d3jsplot.js

@@ -9,7 +9,7 @@ function plotGraph(links) {
     // Default width and height of SVG
     // -40 so we don't see the scrollbars
     var svgWidth = window.innerWidth - 40;
-    var svgHeight = window.innerHeight -40;
+    var svgHeight = window.innerHeight - 40;
 
     // Raduis of node
     var nodeRadius = 6;
@@ -41,7 +41,7 @@ function plotGraph(links) {
     var zoom = d3.zoom()
             .scaleExtent([.2, 10]) // // zoom scale x.2 to x10
             .on("zoom", zoomed);
-        
+
     // Append a SVG to the graph container div
     // This graph auto scales with the window resize
     var svg = d3.select("#causal-graph")
@@ -50,7 +50,7 @@ function plotGraph(links) {
             .attr("height", svgHeight)
             .call(zoom)
             .on("dblclick.zoom", null); // This disables zoom in behavior caused by double click
-    
+
     // This graphGroup groups all graph elements
     var graphGroup = svg.append("g");
 
@@ -141,7 +141,7 @@ function plotGraph(links) {
             .attr("r", 4)
             .attr("class", "marker-end-circle");
 
-    
+
     // Add the edge based on type: link line and the arrow/circle
     var link = graphGroup.append("g").selectAll(".link")
             .data(links)
@@ -164,8 +164,18 @@ function plotGraph(links) {
                 } else {
                     return "";
                 }
+            })
+            .style('stroke', function (d) {
+                if (d.edgeProps !== null && d.edgeProps.indexOf('dd') >= 0) {
+                    return d3.rgb(0, 128, 0);
+                }
+            })
+            .style("stroke-dasharray", function (d) {
+                if (d.edgeProps !== null && d.edgeProps.indexOf('nl') >= 0) {
+                    return (6, 3);
+                }
             });
-            
+
     // Draw all nodes as circles
     // In order to cover the links, this code must be after drawing links
     var node = graphGroup.append("g")
@@ -198,16 +208,16 @@ function plotGraph(links) {
     function ticked() {
         // Position nodes
         node.attr("cx", function (d) {
-                // This makes sure the nodes won't go out of the container
-                // Bounding box example: http://mbostock.github.io/d3/talk/20110921/bounding.html
-                return d.x = Math.max(nodeRadius, Math.min(svgWidth - nodeRadius, d.x));
-                //return d.x;
-            })
-            .attr("cy", function (d) {
-                return d.y = Math.max(nodeRadius, Math.min(svgHeight - nodeRadius, d.y));
-                //return d.y;
-            });
-            
+            // This makes sure the nodes won't go out of the container
+            // Bounding box example: http://mbostock.github.io/d3/talk/20110921/bounding.html
+            return d.x = Math.max(nodeRadius, Math.min(svgWidth - nodeRadius, d.x));
+            //return d.x;
+        })
+                .attr("cy", function (d) {
+                    return d.y = Math.max(nodeRadius, Math.min(svgHeight - nodeRadius, d.y));
+                    //return d.y;
+                });
+
         // Position links
         // Use path instead of line since IE 10 doesn't render the links correctly
         link.attr("d", positionLink).each(function () {
@@ -216,24 +226,24 @@ function plotGraph(links) {
 
         // Position node text
         text.attr("x", function (d) {
-                return d.x + nodeRadius;
-            })
-            .attr("y", function (d) {
-                return d.y + nodeRadius/2;
-            });
+            return d.x + nodeRadius;
+        })
+                .attr("y", function (d) {
+                    return d.y + nodeRadius / 2;
+                });
     }
 
     // Position the edge link
     // Use path to draw a straight line, don't use line since IE bug
     function positionLink(d) {
         return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
     }
-    
+
     // Zooming
     function zoomed() {
         graphGroup.attr("transform", d3.event.transform);
     }
-        
+
     // This function looks up whether a pair are neighbours
     function neighboring(a, b) {
         return linkedByIndex[a.index + "," + b.index];
@@ -286,7 +296,7 @@ function plotGraph(links) {
         d3.event.subject.fx = null;
         d3.event.subject.fy = null;
     }
-    
+
     // When the graph is huge it's nice to have some search functionality
     // This highlights the target node
     $('#searchBtn').click(function () {