origin graphics should i do branch stack?

src/js/git/index.js

@@ -1633,6 +1633,14 @@ var Ref = Backbone.Model.extend({
     }
   },
 
+  getIsRemote: function() {
+    return false;
+  },
+
+  getName: function() {
+    return this.get('id');
+  },
+
   targetChanged: function(model, targetValue, ev) {
     // push our little 3 stack back. we need to do this because
     // backbone doesn't give you what the value WAS, only what it was changed
@@ -1649,10 +1657,13 @@ var Ref = Backbone.Model.extend({
 var Branch = Ref.extend({
   defaults: {
     visBranch: null,
-    isOrigin: false,
     origin: null
   },
 
+  getIsRemote: function() {
+    return this.get('origin') !== null;
+  },
+
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');

src/js/visuals/visBranch.js

@@ -85,23 +85,22 @@ var VisBranch = VisBase.extend({
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
+    // easy logic first
     if (!this.get('isHead')) {
-      // easy logic first
-      return (overThreshold) ?
-        -1 :
-        1;
+      if (this.getIsRemote()) {
+        return (overThreshold) ? 1 : -1;
+      } else {
+        return (overThreshold) ? -1 : 1;
+      }
     }
+
     // now for HEAD....
     if (overThreshold) {
       // if by ourselves, then feel free to squeeze in. but
       // if other branches are here, then we need to show separate
-      return (this.isBranchStackEmpty()) ?
-        -1 :
-        1;
+      return (this.isBranchStackEmpty()) ? -1 : 1;
     } else {
-      return (this.isBranchStackEmpty()) ?
-        1 :
-        -1;
+      return (this.isBranchStackEmpty()) ? 1 : -1;
     }
   },
 
@@ -290,12 +289,16 @@ var VisBranch = VisBase.extend({
     };
   },
 
-  getName: function() {
-    var name = this.get('branch').get('id');
-    var selected = this.gitEngine.HEAD.get('target').get('id');
+  getIsRemote: function() {
+    return this.get('branch').getIsRemote();
+  },
 
-    var add = (selected == name) ? '*' : '';
-    return name + add;
+  getName: function() {
+    var name = this.get('branch').getName();
+    var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
+
+    var after = (selected) ? '*' : '';
+    return name + after;
   },
 
   nonTextToFront: function() {
@@ -412,6 +415,7 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
+    var dashArray = (this.getIsRemote()) ? '--' : '';
 
     return {
       text: {
@@ -427,6 +431,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {