GraphViewer: Updated colouring and size of labels

html/admin/js/graphViewer/graph/edgeShaper.js

@@ -204,14 +204,12 @@ function EdgeShaper(parent, flags, idfunc) {
         addLabel = function (line, g) {
           g.append("text") // Append a label for the edge
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("stroke", "black")
             .text(label);
         };
       } else {
         addLabel = function (line, g) {
           g.append("text") // Append a label for the edge
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("stroke", "black")
             .text(function(d) { 
               // Which value should be used as label
               return d._data[label] !== undefined ? d._data[label] : "";

html/admin/js/graphViewer/graph/nodeShaper.js

@@ -197,16 +197,12 @@ function NodeShaper(parent, flags, idfunc) {
         addLabel = function (node) {
           node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("fill", "black")
-            .attr("stroke", "black")
             .text(label);
         };
       } else {
         addLabel = function (node) {
           node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("fill", "black")
-            .attr("stroke", "black")
             .text(function(d) { 
               return d._data[label] !== undefined ? d._data[label] : "";
             });
@@ -241,6 +237,12 @@ function NodeShaper(parent, flags, idfunc) {
               }
               return color.collapsed;
             });
+            g.attr("stroke", function(n) {
+              if (n._expanded) {
+                return color.expanded;
+              }
+              return color.collapsed;
+            });
           };
           break;
         case "attribute":
@@ -248,6 +250,9 @@ function NodeShaper(parent, flags, idfunc) {
              g.attr("fill", function(n) {
                return colourMapper.getColour(n._data[color.key]);
              });
+             g.attr("stroke", function(n) {
+               return colourMapper.getColour(n._data[color.key]);
+             });
           };
           break; 
         default:

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js

@@ -193,23 +193,39 @@
             key: "label"
           }
         }),
-        c1, c2, c3, c4;
+        c1f, c2f, c3f, c4f,
+        c1s, c2s, c3s, c4s;
         shaper.drawNodes(nodes);
         
-        c1 = $("#1").attr("fill");
+        c1f = $("#1").attr("fill");
-        c2 = $("#2").attr("fill");
+        c2f = $("#2").attr("fill");
-        c3 = $("#3").attr("fill");
+        c3f = $("#3").attr("fill");
-        c4 = $("#4").attr("fill");
+        c4f = $("#4").attr("fill");
         
-        expect(c1).toBeDefined();
+        c1s = $("#1").attr("stroke");
-        expect(c2).toBeDefined();
+        c2s = $("#2").attr("stroke");
-        expect(c3).toBeDefined();
+        c3s = $("#3").attr("stroke");
-        expect(c4).toBeDefined();
+        c4s = $("#4").attr("stroke");
         
-        expect(c1).toEqual(c4);
+        expect(c1f).toBeDefined();
-        expect(c1).not.toEqual(c2);
+        expect(c2f).toBeDefined();
-        expect(c1).not.toEqual(c3);
+        expect(c3f).toBeDefined();
-        expect(c2).not.toEqual(c3);
+        expect(c4f).toBeDefined();
+        
+        expect(c1f).toEqual(c4f);
+        expect(c1f).not.toEqual(c2f);
+        expect(c1f).not.toEqual(c3f);
+        expect(c2f).not.toEqual(c3f);
+        
+        expect(c1s).toBeDefined();
+        expect(c2s).toBeDefined();
+        expect(c3s).toBeDefined();
+        expect(c4s).toBeDefined();
+        
+        expect(c1s).toEqual(c4s);
+        expect(c1s).not.toEqual(c2s);
+        expect(c1s).not.toEqual(c3s);
+        expect(c2s).not.toEqual(c3s);
       });
       
       it('should be able to use colours based on _expanded attribute', function() {
@@ -231,20 +247,33 @@
             collapsed: "#654321"
           }
         }),
-        c1, c2, c3;
+        c1s, c2s, c3s,
+        c1f, c2f, c3f;
         shaper.drawNodes(nodes);
         
-        c1 = $("#1").attr("fill");
+        c1f = $("#1").attr("fill");
-        c2 = $("#2").attr("fill");
+        c2f = $("#2").attr("fill");
-        c3 = $("#3").attr("fill");
+        c3f = $("#3").attr("fill");
         
-        expect(c1).toBeDefined();
+        c1s = $("#1").attr("stroke");
-        expect(c2).toBeDefined();
+        c2s = $("#2").attr("stroke");
-        expect(c3).toBeDefined();
+        c3s = $("#3").attr("stroke");
         
-        expect(c1).toEqual("#123456");
+        expect(c1f).toBeDefined();
-        expect(c2).toEqual("#654321");
+        expect(c2f).toBeDefined();
-        expect(c3).toEqual("#654321");
+        expect(c3f).toBeDefined();
+        
+        expect(c1f).toEqual("#123456");
+        expect(c2f).toEqual("#654321");
+        expect(c3f).toEqual("#654321");
+        
+        expect(c1s).toBeDefined();
+        expect(c2s).toBeDefined();
+        expect(c3s).toBeDefined();
+        
+        expect(c1s).toEqual("#123456");
+        expect(c2s).toEqual("#654321");
+        expect(c3s).toEqual("#654321");
       });
       
     });

html/admin/js/graphViewer/style/graphlayout.css

@@ -1,8 +1,7 @@
-text {
+svg text {
-  font: 10px sans-serif;
+  font: 11px Arial;
   pointer-events: none;
-  stroke: #fff;
+  stroke: #000;
-  stroke-width: 1px;
 }
 
 capitalize {