Add unknown region nodes

js/components/link.js

@@ -91,11 +91,9 @@ Link = (function(superClass) {
       });
     });
     tooltipText = [];
-    console.log("LINK", this.props);
     this.props.model.get("features").each(function(feature) {
       return feature.get("sequenceData").each(function(sd) {
         var interactorLabel, pos;
-        console.log("SD", sd);
         interactorLabel = sd.get("feature").get("participant").get("interactor").get("label");
         pos = "(" + sd.get("pos") + ")";
         return tooltipText.push(interactorLabel + " " + pos);
@@ -144,7 +142,7 @@ Link = (function(superClass) {
     }, path({
       className: "link",
       opacity: "0.9",
-      fill: this.props.model.get("focus") ? "deepskyblue" : "#e5e5e5",
+      fill: this.props.view.fill,
       d: Draw.link(views),
       style: {
         opacity: 0.8

js/components/svg.js

@@ -1,4 +1,4 @@
-var Chroma, Draw, Engine, Link, Messenger, Participant, React, SVG, Tooltip, _, defs, g, path, ref, svg, text,
+var Chroma, Draw, Engine, Link, Messenger, Participant, React, SVG, Tooltip, Unknown, _, defs, g, path, ref, svg, text,
   extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
   hasProp = {}.hasOwnProperty;
 
@@ -20,6 +20,8 @@ Tooltip = React.createFactory(require('./tooltip'));
 
 Messenger = require('./messenger');
 
+Unknown = React.createFactory(require('./unknown'));
+
 ref = React.DOM, svg = ref.svg, g = ref.g, text = ref.text, path = ref.path, defs = ref.defs;
 
 SVG = (function(superClass) {
@@ -74,7 +76,7 @@ SVG = (function(superClass) {
   };
 
   SVG.prototype.render = function() {
-    var Links, Participants, defpaths, interaction, links, participants, s, views;
+    var Links, Participants, Unknowns, defpaths, interaction, links, participants, s, views;
     interaction = this.props.model.get("interactions").at(0);
     participants = interaction.get("participants");
     links = interaction.get("links");
@@ -93,6 +95,10 @@ SVG = (function(superClass) {
       p.key = p.model.get("id");
       return Participant(p);
     });
+    Unknowns = _.values(views).map(function(p) {
+      p.key = p.model.get("id");
+      return Unknown(p);
+    });
     Links = links.map(function(l, i) {
       return Link({
         model: l,
@@ -121,7 +127,9 @@ SVG = (function(superClass) {
       rootsvg: this.state.rootsvg,
       message: this.state.label,
       mouse: this.state.mouse
-    }) : void 0));
+    }) : void 0), g({
+      className: "unknowns"
+    }, Unknowns));
   };
 
   return SVG;

js/components/unknown.js

@@ -0,0 +1,53 @@
+var Draw, React, Unknown, circle, g, ref, text,
+  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+  hasProp = {}.hasOwnProperty;
+
+React = require('react');
+
+Draw = require("../layout/draw");
+
+ref = React.DOM, g = ref.g, circle = ref.circle, text = ref.text;
+
+Unknown = (function(superClass) {
+  extend(Unknown, superClass);
+
+  function Unknown(props) {
+    Unknown.__super__.constructor.call(this, props);
+  }
+
+  Unknown.prototype.render = function() {
+    var ref1, x, y;
+    ref1 = Draw.center(this.props.view), x = ref1.x, y = ref1.y;
+    return g({
+      transform: "translate(250, 250)"
+    }, circle({
+      className: "unknown",
+      r: 7,
+      cx: x,
+      cy: y
+    }), g({
+      transform: "translate(" + x + ", " + y + ")"
+    }, text({
+      className: "unknownLabel",
+      textAnchor: "middle",
+      dy: "4"
+    }, "?")));
+  };
+
+  return Unknown;
+
+})(React.Component);
+
+module.exports = Unknown;
+
+({
+  startAngle: 123,
+  endAngle: 345,
+  radius: 50
+});
+
+({
+  startAngle: 123,
+  endAngle: 345,
+  radius: 30
+});

js/layout/draw.js

@@ -21,6 +21,14 @@ Draw = {
     path = ["M", innerStartX, innerStartY, "A", radius, radius, 0, largeArc, 1, innerEndX, innerEndY, "L", outerEndX, outerEndY, "A", radius + thickness, radius + thickness, 0, largeArc, 0, outerStartX, outerStartY, "Z"];
     return path.join(" ");
   },
+  center: function(arg, thickness) {
+    var endAngle, radius, ref, startAngle, x, y;
+    startAngle = arg.startAngle, endAngle = arg.endAngle, radius = arg.radius;
+    if (thickness == null) {
+      thickness = 20;
+    }
+    return ref = ptc(radius - 30, (startAngle + endAngle) / 2), x = ref.x, y = ref.y, ref;
+  },
   ticks: function(arg, thickness) {
     var angle, buildLine, endAngle, j, radius, ref, ref1, results, startAngle;
     startAngle = arg.startAngle, endAngle = arg.endAngle, radius = arg.radius;

less/circle.less

@@ -96,6 +96,15 @@ body {
 
 }
 
+.unknown {
+  fill: white;
+  stroke: black;
+  stroke-width: 1;
+}
+
+.unknownLabel {
+  font-size: 0.7em;
+}
 
 .nolenpart {
   fill: white;

public/css/circle.css

@@ -64,6 +64,14 @@ body {
   stroke: red;
   stroke-width: 1;
 }
+.unknown {
+  fill: white;
+  stroke: black;
+  stroke-width: 1;
+}
+.unknownLabel {
+  font-size: 0.7em;
+}
 .nolenpart {
   fill: white;
   stroke: #3e3e3e;