GraphViewer: The colour-mapper now also creates a foreground colour. All labels are now readable

html/admin/js/graphViewer/graph/colourMapper.js

@@ -38,34 +38,37 @@ function ColourMapper() {
   self = this,
   nextColour = 0;
   
-  colours.push("navy");
+  colours.push({back: "navy", front: "white"});
-  colours.push("green");
+  colours.push({back: "green", front: "white"});
-  colours.push("gold");
+  colours.push({back: "gold", front: "black"});
-  colours.push("red");
+  colours.push({back: "red", front: "black"});
-  colours.push("saddlebrown");
+  colours.push({back: "saddlebrown", front: "white"});
-  colours.push("skyblue");
+  colours.push({back: "skyblue", front: "black"});
-  colours.push("olive");
+  colours.push({back: "olive", front: "black"});
-  colours.push("deeppink");
+  colours.push({back: "deeppink", front: "black"});
-  colours.push("orange");
+  colours.push({back: "orange", front: "black"});
-  colours.push("silver");
+  colours.push({back: "silver", front: "black"});
-  colours.push("blue");
+  colours.push({back: "blue", front: "white"});
-  colours.push("yellowgreen");
+  colours.push({back: "yellowgreen", front: "black"});
-  colours.push("firebrick");
+  colours.push({back: "firebrick", front: "black"});
-  colours.push("rosybrown");
+  colours.push({back: "rosybrown", front: "black"});
-  colours.push("hotpink");
+  colours.push({back: "hotpink", front: "black"});
-  colours.push("purple");
+  colours.push({back: "purple", front: "white"});
-  colours.push("cyan");
+  colours.push({back: "cyan", front: "black"});
-  colours.push("teal");
+  colours.push({back: "teal", front: "black"});
-  colours.push("peru");
+  colours.push({back: "peru", front: "black"});
-  colours.push("maroon");
+  colours.push({back: "maroon", front: "white"});
   
   this.getColour = function(value) {
     if (mapping[value] === undefined) {
       mapping[value] = colours[nextColour];
-      if (reverseMapping[colours[nextColour]] === undefined) {
+      if (reverseMapping[colours[nextColour].back] === undefined) {
-        reverseMapping[colours[nextColour]] = [];
+        reverseMapping[colours[nextColour].back] = {
+          front: colours[nextColour].front,
+          list: []
+        };
       }
-      reverseMapping[colours[nextColour]].push(value);
+      reverseMapping[colours[nextColour].back].list.push(value);
       nextColour++;
       if (nextColour === colours.length) {
         nextColour = 0;
@@ -74,10 +77,30 @@ function ColourMapper() {
     if (listener !== undefined) {
       listener(self.getList());
     }
-    return mapping[value];
+    return mapping[value].back;
   };
-  
+
-  
+  this.getForegroundColour = function(value) {
+    if (mapping[value] === undefined) {
+      mapping[value] = colours[nextColour];
+      if (reverseMapping[colours[nextColour].back] === undefined) {
+        reverseMapping[colours[nextColour].back] = {
+          front: colours[nextColour].front,
+          list: []
+        };
+      }
+      reverseMapping[colours[nextColour].back].list.push(value);
+      nextColour++;
+      if (nextColour === colours.length) {
+        nextColour = 0;
+      }
+    }
+    if (listener !== undefined) {
+      listener(self.getList());
+    }
+    return mapping[value].front;
+  };
+
   
   this.reset = function() {
     mapping = {};

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

@@ -110,6 +110,7 @@ function NodeShaper(parent, flags, idfunc) {
     addColor = noop,
     addShape = noop,
     addLabel = noop,
+    addLabelColor = function() {return "black";},
     addCommunityShape = function(g) {
       g.append("polygon")
       .attr("points", "0,-25 -16,20 23,-10 -23,-10 16,20");
@@ -263,7 +264,7 @@ function NodeShaper(parent, flags, idfunc) {
         addLabel = function (node) {
           var textN = node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("fill", "black") // Force a black color
+            .attr("fill", addLabelColor) // Force a black color
             .attr("stroke", "none"); // Make it readable
             textN.each(function(d) {
               var chunks = splitLabel(label(d));
@@ -283,7 +284,7 @@ function NodeShaper(parent, flags, idfunc) {
         addLabel = function (node) {
           var textN = node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
-            .attr("fill", "black") // Force a black color
+            .attr("fill", addLabelColor) // Force a black color
             .attr("stroke", "none"); // Make it readable
           textN.each(function(d) {
             var chunks = splitLabel(d._data[label]);
@@ -320,6 +321,9 @@ function NodeShaper(parent, flags, idfunc) {
             g.attr("stroke", color.stroke);
             g.attr("fill", color.fill);
           };
+          addLabelColor = function (d) {
+            return color.stroke;
+          };
           break;
         case "expand":
           addColor = function (g) {
@@ -336,6 +340,9 @@ function NodeShaper(parent, flags, idfunc) {
               return color.collapsed;
             });
           };
+          addLabelColor = function (d) {
+            return "black";
+          };
           break;
         case "attribute":
           addColor = function (g) {
@@ -352,6 +359,13 @@ function NodeShaper(parent, flags, idfunc) {
                return colourMapper.getColour(n._data[color.key]);
              });
           };
+          addLabelColor = function (n) {
+            if (n._data === undefined) {
+              return colourMapper.getForegroundColour(undefined);
+            }
+            return colourMapper.getForegroundColour(n._data[color.key]);
+            
+          };
           break; 
         default:
           throw "Sorry given colour-scheme not known";

html/admin/js/graphViewer/jasmine_test/specColourMapper/colourMapperSpec.js

@@ -125,8 +125,8 @@
       
       expect(_.keys(colorList).length).toEqual(3);
       _.each(_.values(colorList), function(v) {
-        expect(v).toEqual(jasmine.any(Array));
+        expect(v.list).toEqual(jasmine.any(Array));
-        expect(v.length).toEqual(1);
+        expect(v.list.length).toEqual(1);
       });
       
     });

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

@@ -315,8 +315,8 @@
         
         expect(_.keys(colorList).length).toEqual(3);
         _.each(_.values(colorList), function(v) {
-          expect(v).toEqual(jasmine.any(Array));
+          expect(v.list).toEqual(jasmine.any(Array));
-          expect(v.length).toEqual(1);
+          expect(v.list.length).toEqual(1);
         });
       });
       
@@ -775,7 +775,7 @@
         textEl;
         shaper.drawNodes(node);
         textEl = $("svg .node text");
-        expect(textEl.attr("fill")).toEqual("black");
+        expect(textEl.attr("fill")).toEqual("#8AA051");
         expect(textEl.attr("stroke")).toEqual("none");
       });
 

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

@@ -52,8 +52,14 @@
       spyOn(shaper, 'changeTo');
       spyOn(shaper, 'getColourMapping').andCallFake(function() {
         return {
-          "blue": ["bl", "ue"],
+          blue: {
-          "green": ["gr", "een"]
+            list: ["bl", "ue"],
+            front: "white"
+          },
+          green: {
+            list: ["gr", "een"],
+            front: "black"
+          }
         };
       });
       spyOn(shaper, "setColourMappingListener");

html/admin/js/graphViewer/ui/nodeShaperControls.js

@@ -47,9 +47,12 @@ function NodeShaperControls(list, shaper) {
       }
       var list = document.createElement("ul");
       colourDiv.appendChild(list);
-      _.each(mapping, function(els, col) {
+      _.each(mapping, function(obj, col) {
-        var li = document.createElement("li");
+        var li = document.createElement("li"),
+          els = obj.list,
+          fore = obj.front;
         li.style.backgroundColor = col;
+        li.style.color = fore;
         li.appendChild(document.createTextNode(els.join(", ")));
         list.appendChild(li);
       });