From 2b16123a4f5b62db1a922b0692727f2eb58299b6 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 10:45:08 -0400
Subject: [PATCH 01/11] fixed field type error on user edit form

---
 app/views/users/edit.html.erb | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 82166dbf..069a28a4 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -15,8 +15,10 @@
   <div class="accountName" onclick="Metamaps.Account.changeName()">
     <div class="nameEdit"><%= @user.name %></div>
   </div>
-  <div class="changeName"><%= form.label :name, "Name:", :class => "firstFieldText" %>
-  <%= form.email_field :name  %></div>
+  <div class="changeName">
+    <%= form.label :name, "Name:", :class => "firstFieldText" %>
+    <%= form.text_field :name  %>
+  </div>
   <div><%= form.label :email, "Email:", :class => "firstFieldText" %>
   <%= form.email_field :email  %></div>
   <div class="changePass" onclick="Metamaps.Account.showPass()">Change Password</div>

From 06f18215dd3484049845518366cc46c494791251 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 16:04:36 -0400
Subject: [PATCH 02/11] bug fixes for mapping experience. able to store
 multiple references to synapses on each edge

---
 app/assets/javascripts/src/JIT.js             |  3 +-
 app/assets/javascripts/src/Metamaps.JIT.js    | 40 ++++++---
 app/assets/javascripts/src/Metamaps.Router.js |  1 +
 app/assets/javascripts/src/Metamaps.js        | 83 +++++++++++++------
 app/assets/stylesheets/application.css        |  2 +-
 app/assets/stylesheets/clean.css              |  8 ++
 6 files changed, 95 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/src/JIT.js b/app/assets/javascripts/src/JIT.js
index 1cc4b8e1..bc3f23c3 100644
--- a/app/assets/javascripts/src/JIT.js
+++ b/app/assets/javascripts/src/JIT.js
@@ -7081,7 +7081,8 @@ Graph.Plot = {
         var l = Metamaps.Mouse.synapseStartCoordinates.length;
         for (var i = l - 1; i >= 0; i -= 1) {
             start = Metamaps.Mouse.synapseStartCoordinates[i];
-            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.5, true);
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.3, true);
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.7, true);
         }
         ctx.restore();
     }
diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 41481c56..3c5b79c9 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -20,6 +20,7 @@ Metamaps.JIT = {
      */
     prepareVizData: function () {
         var self = Metamaps.JIT;
+        var synapsesToRemove = [];
         var topic;
         var mapping;
         var node;
@@ -39,7 +40,12 @@ Metamaps.JIT = {
         Metamaps.Synapses.each(function (s) {
             edge = s.createEdge();
 
-            if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
+            if(Metamaps.Topics.get(s.get('node1_id')) === undefined || Metamaps.Topics.get(s.get('node2_id')) === undefined) {
+                // this means it's an invalid synapse
+                synapsesToRemove.push(s);
+            } 
+            else if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
+
                 existingEdge = _.findWhere(edges, {
                     nodeFrom: edge.nodeFrom,
                     nodeTo: edge.nodeTo
@@ -53,15 +59,24 @@ Metamaps.JIT = {
                     // for when you're dealing with multiple relationships between the same two topics
                     if (Metamaps.Active.Map) {
                         mapping = s.getMapping();
-                        existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                        existingEdge.data['$mappingIDs'].push(mapping.id);
                     }
-                    existingEdge['$synapseIDs'].push(s.id);
+                    existingEdge.data['$synapseIDs'].push(s.id);
                 } else {
                     // for when you're dealing with a topic that has relationships to many different nodes
                     nodes[edge.nodeFrom].adjacencies.push(edge);
+                    edges.push(edge);
                 }
             }
         });
+
+        // clean up the synapses array in case of any faulty data
+        _.each(synapsesToRemove, function (synapse) {
+            mapping = synapse.getMapping();
+            Metamaps.Synapses.remove(synapse);
+            Metamaps.Mappings.remove(mapping);
+        });
+
         _.each(nodes, function (node) {
             self.vizData.push(node);
         });
@@ -319,7 +334,7 @@ Metamaps.JIT = {
                     if (Metamaps.Mouse.boxStartCoordinates) {
                         Metamaps.Visualize.mGraph.busy = false;
                         Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-                        Metamaps.JIT.zoomToBox();
+                        Metamaps.JIT.zoomToBox(e);
                         return;
                     }
 
@@ -816,8 +831,8 @@ Metamaps.JIT = {
         } else if (tempInit && tempNode2 != null) {
             // this means you want to create a synapse between two existing topics
             Metamaps.Create.newTopic.addSynapse = false;
-            Metamaps.Create.newSynapse.topic1id = tempNode.id;
-            Metamaps.Create.newSynapse.topic2id = tempNode2.id;
+            Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
+            Metamaps.Create.newSynapse.topic2id = tempNode2.getData('topic').id;
             tempNode2.setData('dim', 25, 'current');
             Metamaps.Visualize.mGraph.plot();
             midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
@@ -1414,9 +1429,9 @@ Metamaps.JIT = {
         var v2 = intermediatePoint.$add(normal.$scale(-1));
 
         if (newSynapse) {
-            ctx.strokeStyle = "#222222";
+            ctx.strokeStyle = "#4fc059";
             ctx.lineWidth = 2;
-            ctx.globalAlpha = 0.4;
+            ctx.globalAlpha = 1;
         }
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
@@ -1465,8 +1480,7 @@ Metamaps.JIT = {
                 y: posChild.y
             }, 13, false, canvas, 0.7);
         } else if (directionCat == "from-to") {
-            var direction = adj.data.$direction;
-            var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
+            var inv = (direction[0] != adj.nodeFrom.id);
             self.renderMidArrow({
                 x: pos.x,
                 y: pos.y
@@ -1502,7 +1516,7 @@ Metamaps.JIT = {
 
         canvas.translate(-1*offsetX,-1*offsetY);
     },
-    zoomToBox: function () {
+    zoomToBox: function (event) {
         var sX = Metamaps.Mouse.boxStartCoordinates.x,
             sY = Metamaps.Mouse.boxStartCoordinates.y,
             eX = Metamaps.Mouse.boxEndCoordinates.x,
@@ -1538,14 +1552,14 @@ Metamaps.JIT = {
         var cogY = (sY + eY)/2;
 
         canvas.translate(-1* cogX, -1* cogY);
-        
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
 
         Metamaps.Mouse.boxStartCoordinates = false;
         Metamaps.Mouse.boxEndCoordinates = false;
         Metamaps.Visualize.mGraph.plot();
         
     },
-    zoomExtents: function () {
+    zoomExtents: function (event) {
         Metamaps.JIT.centerMap();
         var height = $(document).height(),
             width = $(document).width(),
diff --git a/app/assets/javascripts/src/Metamaps.Router.js b/app/assets/javascripts/src/Metamaps.Router.js
index dadc3771..b8df146a 100644
--- a/app/assets/javascripts/src/Metamaps.Router.js
+++ b/app/assets/javascripts/src/Metamaps.Router.js
@@ -130,6 +130,7 @@
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Loading.show();
             Metamaps.Map.end();
             Metamaps.Map.launch(id);
         },
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index ba648acf..83ece7d7 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -217,15 +217,15 @@ Metamaps.Backbone.init = function () {
             else return false;
         },
         getTopic1: function () {
-            return Metamaps.Topic.get(this.get('node1_id'));
+            return Metamaps.Topics.get(this.get('node1_id'));
         },
         getTopic2: function () {
-            return Metamaps.Topic.get(this.get('node2_id'));
+            return Metamaps.Topics.get(this.get('node2_id'));
         },
         getDirection: function () {
             return [
-                    this.get('node1_id'),
-                    this.get('node2_id')
+                    this.getTopic1().get('node').id,
+                    this.getTopic2().get('node').id
                 ];
         },
         getMapping: function () {
@@ -1232,11 +1232,15 @@ Metamaps.Visualize = {
                 topic.updateNode();
 
                 n.eachAdjacency(function (edge) {
-                    l = edge.getData('synapseIDs').length;
-                    for (i = 0; i < l; i++) {
-                        synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
-                        synapse.set('edge', edge);
-                        synapse.updateEdge();
+                    if(!edge.getData('init')) {
+                        edge.setData('init', true);
+
+                        l = edge.getData('synapseIDs').length;
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set('edge', edge);
+                            synapse.updateEdge();
+                        }
                     }
                 });
                 
@@ -1254,11 +1258,15 @@ Metamaps.Visualize = {
                 mapping = topic.getMapping();
 
                 n.eachAdjacency(function (edge) {
-                    l = edge.getData('synapseIDs').length;
-                    for (i = 0; i < l; i++) {
-                        synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
-                        synapse.set('edge', edge);
-                        synapse.updateEdge();
+                    if(!edge.getData('init')) {
+                        edge.setData('init', true);
+
+                        l = edge.getData('synapseIDs').length;
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set('edge', edge);
+                            synapse.updateEdge();
+                        }
                     }
                 });
 
@@ -1274,7 +1282,6 @@ Metamaps.Visualize = {
     /**
      * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
      *
-     * @param vizData a json structure containing the data to be rendered.
      */
     render: function () {
         var self = Metamaps.Visualize, RGraphSettings, FDSettings;
@@ -2902,6 +2909,8 @@ Metamaps.Topic = {
 
         var newnode = topic.createNode();
 
+        var midpoint = {}, pixelPos;
+
         if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
             Metamaps.Visualize.mGraph.graph.addNode(newnode);
             Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
@@ -2927,8 +2936,15 @@ Metamaps.Topic = {
                 nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
             }
             if (Metamaps.Create.newTopic.addSynapse) {
-                Metamaps.Create.newSynapse.topic1id = tempNode.id;
-                Metamaps.Create.newSynapse.topic2id = nodeOnViz.id;
+                Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
+                
+                // position the form
+                midpoint.x = tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - tempNode.pos.getc().x) / 2;
+                midpoint.y = tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - tempNode.pos.getc().y) / 2;
+                pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+                $('#new_synapse').css('left', pixelPos.x + "px");
+                $('#new_synapse').css('top', pixelPos.y + "px");
+                // show the form
                 Metamaps.Create.newSynapse.open();
                 Metamaps.Visualize.mGraph.fx.animate({
                     modes: ["node-property:dim"],
@@ -2970,14 +2986,21 @@ Metamaps.Topic = {
             });
         }
 
+
+        var successCallback = function (topicModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ topic_id: topicModel.id });
+            }
+
+            if (Metamaps.Create.newTopic.addSynapse) {
+                Metamaps.Create.newSynapse.topic2id = topicModel.id;
+            }
+        };
+
         if (!Metamaps.Settings.sandbox && createNewInDB) {
             if (topic.isNew()) {
                 topic.save(null, {
-                    success: function (topicModel, response) {
-                        if (Metamaps.Active.Map) {
-                            mapping.save({ topic_id: topicModel.id });
-                        }
-                    },
+                    success: successCallback,
                     error: function (model, response) {
                         console.log('error saving topic to database');
                     }
@@ -3116,12 +3139,13 @@ Metamaps.Synapse = {
         //for each node in this array we will create a synapse going to the position2 node.
         var synapsesToCreate = [];
 
-        node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
-        topic2 = node2.getData('topic');
+        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        node2 = topic2.get('node');
 
         var len = Metamaps.Selected.Nodes.length;
         if (len == 0) {
-            synapsesToCreate[0] = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
+            topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
+            synapsesToCreate[0] = topic1.get('node');
         } else if (len > 0) {
             synapsesToCreate = Metamaps.Selected.Nodes;
         }
@@ -3150,6 +3174,8 @@ Metamaps.Synapse = {
     },
     getSynapseFromAutocomplete: function (id) {
         var self = Metamaps.Synapse,
+            topic1,
+            topic2,
             node1,
             node2;
 
@@ -3161,8 +3187,10 @@ Metamaps.Synapse = {
         });
         Metamaps.Mappings.add(mapping);
 
-        node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
-        node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
+        node1 = topic1.get('node');
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        node2 = topic2.get('node');
         Metamaps.Create.newSynapse.hide();
 
         self.renderSynapse(mapping, synapse, node1, node2, true);
@@ -3220,6 +3248,7 @@ Metamaps.Map = {
             Metamaps.Filter.checkMappers();
 
             Metamaps.Realtime.startActiveMap();
+            Metamaps.Loading.hide();
         }
 
         $.ajax({
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8ae9967a..cebb5434 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -862,7 +862,7 @@ label[for="user_remember_me"] {
 
 .sidebarFilterBox {
     display:none;
-    width: 304px;
+    width: 319px;
     padding: 16px 0;
     overflow-y: auto;
 }
diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css
index 918af0c3..06f7ea90 100644
--- a/app/assets/stylesheets/clean.css
+++ b/app/assets/stylesheets/clean.css
@@ -606,6 +606,14 @@
     background-color: #9150bc;
 }
 
+.github-fork-ribbon-wrapper {
+    display:none;
+}
+
+.homePage .github-fork-ribbon-wrapper {
+    display: block;
+}
+
 /* end home page */
 
 /* infoAndHelp */

From 2d2f98373efbc0709b8a54c9df22c5c0c42112c7 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 16:41:16 -0400
Subject: [PATCH 03/11] fixed error in _filterBox that was causing maps not to
 load when a synapse had a nil description

---
 app/views/shared/_filterBox.html.erb | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/views/shared/_filterBox.html.erb b/app/views/shared/_filterBox.html.erb
index 4ba9b91a..9f9f2cb7 100644
--- a/app/views/shared/_filterBox.html.erb
+++ b/app/views/shared/_filterBox.html.erb
@@ -33,9 +33,21 @@
       end
     end
 
-    @metacodes.sort! {|x,y| x.name <=> y.name }
-    @synapses.sort! {|x,y| x.desc <=> y.desc }
-    @mappers.sort! {|x,y| x.name <=> y.name }
+    @metacodes.sort! {|x,y| 
+      n1 = x.name || ""
+      n2 = y.name || ""
+      n1 <=> n2
+    }
+    @synapses.sort! {|x,y|
+      d1 = x.desc || ""
+      d2 = y.desc || ""
+      d1 <=> d2
+    }
+    @mappers.sort! {|x,y| 
+      n1 = x.name || ""
+      n2 = y.name || ""
+      n1 <=> n2 
+    }
     
     @metacodes.each_with_index do |metacode, index| 
         @metacodelist += '<li data-id="' + metacode.id.to_s + '">'

From f9a24058aa4afc6a9575ab29f428f82584fc3f01 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 16:45:59 -0400
Subject: [PATCH 04/11] fixed error in _filterBox that was causing maps not to
 load when a synapse had a nil description

---
 app/views/shared/_filterBox.html.erb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/shared/_filterBox.html.erb b/app/views/shared/_filterBox.html.erb
index 9f9f2cb7..9f6adeb4 100644
--- a/app/views/shared/_filterBox.html.erb
+++ b/app/views/shared/_filterBox.html.erb
@@ -55,7 +55,8 @@
         @metacodelist += '<p>' + metacode.name.downcase + '</p></li>'
     end
     @synapses.each_with_index do |synapse, index| 
-        @synapselist += '<li data-id="' + synapse.desc + '">'
+        d = synapse.desc || ""
+        @synapselist += '<li data-id="' + d + '">'
         @synapselist += '<img src="/assets/synapse16.png" alt="synapse icon" /><p>' + synapse.desc
         @synapselist += '</p></li>'
     end 

From f14bdfac577e9aa843c6882cd265decf30b24158 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 16:50:41 -0400
Subject: [PATCH 05/11] fixed error in _filterBox that was causing maps not to
 load when a synapse had a nil description. for real this time

---
 app/views/shared/_filterBox.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/shared/_filterBox.html.erb b/app/views/shared/_filterBox.html.erb
index 9f6adeb4..e3a633c1 100644
--- a/app/views/shared/_filterBox.html.erb
+++ b/app/views/shared/_filterBox.html.erb
@@ -57,7 +57,7 @@
     @synapses.each_with_index do |synapse, index| 
         d = synapse.desc || ""
         @synapselist += '<li data-id="' + d + '">'
-        @synapselist += '<img src="/assets/synapse16.png" alt="synapse icon" /><p>' + synapse.desc
+        @synapselist += '<img src="/assets/synapse16.png" alt="synapse icon" /><p>' + d
         @synapselist += '</p></li>'
     end 
     @mappers.each_with_index do |mapper, index| 

From 2138aa89f393ee6879bb096f0e8828baa626a04f Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 22:26:12 -0400
Subject: [PATCH 06/11] closes #368. ability to add in metacode colors

---
 app/assets/stylesheets/application.css        |   3 +
 app/assets/stylesheets/base.css               |   2 +-
 app/views/layouts/application.html.erb        |   1 +
 app/views/metacodes/_form.html.erb            |   5 +
 app/views/metacodes/index.html.erb            |   8 +
 app/views/shared/_metacodeBgColors.html.erb   |   9 +
 .../20140930013020_add_color_to_metacodes.rb  |   5 +
 .../20140930013020_add_color_to_metacodes.rb~ |   5 +
 db/schema.rb                                  | 267 +++++++++---------
 metacode_backgrounds.css                      | 120 ++++++++
 10 files changed, 291 insertions(+), 134 deletions(-)
 create mode 100644 app/views/shared/_metacodeBgColors.html.erb
 create mode 100644 db/migrate/20140930013020_add_color_to_metacodes.rb
 create mode 100644 db/migrate/20140930013020_add_color_to_metacodes.rb~
 create mode 100644 metacode_backgrounds.css

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index cebb5434..5bd28000 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2151,6 +2151,9 @@ float: left;
 .blackBox td.iconURL {
     max-width: 415px;
     word-wrap: break-word;
+}
+.blackBox td.iconColor {
+    
 }
 .blackBox .field {
     margin: 15px 0 5px;
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index cfa49d44..3725297e 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -292,7 +292,7 @@ cursor: pointer;
   display: none;
   width: 90%;
   padding: 13px 0 9px 10%;
-  background-color: #64BC61;
+  background-color: #E0E0E0;
   color: #424242;
 }
 .permission.canEdit .metacodeTitle {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9e17a43d..91e9693b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -77,6 +77,7 @@
 <%= render :partial => 'layouts/lightboxes' %>
 <%= render :partial => 'layouts/templates' %>
 
+<%= render :partial => 'shared/metacodeBgColors' %>
 <style type='text/css'>@import url('http://getbarometer.s3.amazonaws.com/assets/barometer/css/barometer.css');</style>
 <script src='http://getbarometer.s3.amazonaws.com/assets/barometer/javascripts/barometer.js' 
         type='text/javascript'></script>
diff --git a/app/views/metacodes/_form.html.erb b/app/views/metacodes/_form.html.erb
index de815bbc..ee19048b 100644
--- a/app/views/metacodes/_form.html.erb
+++ b/app/views/metacodes/_form.html.erb
@@ -21,6 +21,11 @@
     <%= f.text_field :icon %>
     <div class="clearfloat"></div>
   </div>
+  <div class="field">
+    <%= f.label :color, "Color (hex with # sign)" %>
+    <%= f.text_field :color %>
+    <div class="clearfloat"></div>
+  </div>
   <div class="actions">
     <%= link_to 'Cancel', metacodes_path, { :class => 'button', 'data-bypass' => 'true' } %>
     <%= f.submit :class => 'add' %>
diff --git a/app/views/metacodes/index.html.erb b/app/views/metacodes/index.html.erb
index 36901d56..c99634d4 100644
--- a/app/views/metacodes/index.html.erb
+++ b/app/views/metacodes/index.html.erb
@@ -6,6 +6,7 @@
     <tr>
       <th>Name</th>
       <th>Icon</th>
+      <th>Color</th>
       <th></th>
       <th></th>
     </tr>
@@ -14,6 +15,13 @@
     <tr>
       <td><%= metacode.name %></td>
       <td class="iconURL"><%= metacode.icon %></td>
+      <% if metacode.color %>
+        <td class="iconColor" style="background-color: <%= metacode.color %>">
+          <%= metacode.color %>
+        </td>
+      <% else %>
+        <td></td>
+      <% end %>
       <td><img width='40' src='<%= metacode.icon %>' /></td>
       <td><%= link_to 'Edit', edit_metacode_path(metacode), :data => { :bypass => 'true'} %></td>
     </tr>
diff --git a/app/views/shared/_metacodeBgColors.html.erb b/app/views/shared/_metacodeBgColors.html.erb
new file mode 100644
index 00000000..a1aa030c
--- /dev/null
+++ b/app/views/shared/_metacodeBgColors.html.erb
@@ -0,0 +1,9 @@
+<style>
+<% Metacode.all.each do |m| %>
+	<% if m.color %>
+		<%= ".mbg" + m.name.gsub(/\s+/, "") + "{" %>
+		<%= "background-color:" + m.color + " !important;" %>
+		<%= "}" %>
+	<% end %>
+<% end %>
+</style>
\ No newline at end of file
diff --git a/db/migrate/20140930013020_add_color_to_metacodes.rb b/db/migrate/20140930013020_add_color_to_metacodes.rb
new file mode 100644
index 00000000..59c8f89f
--- /dev/null
+++ b/db/migrate/20140930013020_add_color_to_metacodes.rb
@@ -0,0 +1,5 @@
+class AddColorToMetacodes < ActiveRecord::Migration
+  def change
+    add_column :metacodes, :color, :string
+  end
+end
diff --git a/db/migrate/20140930013020_add_color_to_metacodes.rb~ b/db/migrate/20140930013020_add_color_to_metacodes.rb~
new file mode 100644
index 00000000..59c8f89f
--- /dev/null
+++ b/db/migrate/20140930013020_add_color_to_metacodes.rb~
@@ -0,0 +1,5 @@
+class AddColorToMetacodes < ActiveRecord::Migration
+  def change
+    add_column :metacodes, :color, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 50334775..113dba8a 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1,133 +1,134 @@
-# encoding: UTF-8
-# This file is auto-generated from the current state of the database. Instead
-# of editing this file, please use the migrations feature of Active Record to
-# incrementally modify your database, and then regenerate this schema definition.
-#
-# Note that this schema.rb definition is the authoritative source for your
-# database schema. If you need to create the application database on another
-# system, you should be using db:schema:load, not running all the migrations
-# from scratch. The latter is a flawed and unsustainable approach (the more migrations
-# you'll amass, the slower it'll run and the greater likelihood for issues).
-#
-# It's strongly recommended to check this file into your version control system.
-
-ActiveRecord::Schema.define(:version => 20140815162253) do
-
-  create_table "in_metacode_sets", :force => true do |t|
-    t.integer  "metacode_id"
-    t.integer  "metacode_set_id"
-    t.datetime "created_at",      :null => false
-    t.datetime "updated_at",      :null => false
-  end
-
-  add_index "in_metacode_sets", ["metacode_id"], :name => "index_in_metacode_sets_on_metacode_id"
-  add_index "in_metacode_sets", ["metacode_set_id"], :name => "index_in_metacode_sets_on_metacode_set_id"
-
-  create_table "mappings", :force => true do |t|
-    t.text     "category"
-    t.integer  "xloc"
-    t.integer  "yloc"
-    t.integer  "topic_id"
-    t.integer  "synapse_id"
-    t.integer  "map_id"
-    t.integer  "user_id"
-    t.datetime "created_at", :null => false
-    t.datetime "updated_at", :null => false
-  end
-
-  create_table "maps", :force => true do |t|
-    t.text     "name"
-    t.boolean  "arranged"
-    t.text     "desc"
-    t.text     "permission"
-    t.integer  "user_id"
-    t.datetime "created_at",              :null => false
-    t.datetime "updated_at",              :null => false
-    t.boolean  "featured"
-    t.string   "screenshot_file_name"
-    t.string   "screenshot_content_type"
-    t.integer  "screenshot_file_size"
-    t.datetime "screenshot_updated_at"
-  end
-
-  create_table "metacode_sets", :force => true do |t|
-    t.string   "name"
-    t.text     "desc"
-    t.integer  "user_id"
-    t.boolean  "mapperContributed"
-    t.datetime "created_at",        :null => false
-    t.datetime "updated_at",        :null => false
-  end
-
-  add_index "metacode_sets", ["user_id"], :name => "index_metacode_sets_on_user_id"
-
-  create_table "metacodes", :force => true do |t|
-    t.text     "name"
-    t.string   "icon"
-    t.datetime "created_at", :null => false
-    t.datetime "updated_at", :null => false
-  end
-
-  create_table "synapses", :force => true do |t|
-    t.text     "desc"
-    t.text     "category"
-    t.text     "weight"
-    t.text     "permission"
-    t.integer  "node1_id"
-    t.integer  "node2_id"
-    t.integer  "user_id"
-    t.datetime "created_at", :null => false
-    t.datetime "updated_at", :null => false
-  end
-
-  create_table "topics", :force => true do |t|
-    t.text     "name"
-    t.text     "desc"
-    t.text     "link"
-    t.text     "permission"
-    t.integer  "user_id"
-    t.integer  "metacode_id"
-    t.datetime "created_at",         :null => false
-    t.datetime "updated_at",         :null => false
-    t.string   "image_file_name"
-    t.string   "image_content_type"
-    t.integer  "image_file_size"
-    t.datetime "image_updated_at"
-    t.string   "audio_file_name"
-    t.string   "audio_content_type"
-    t.integer  "audio_file_size"
-    t.datetime "audio_updated_at"
-  end
-
-  create_table "users", :force => true do |t|
-    t.string   "name"
-    t.string   "email"
-    t.text     "settings"
-    t.string   "code",                   :limit => 8
-    t.string   "joinedwithcode",         :limit => 8
-    t.string   "crypted_password"
-    t.string   "password_salt"
-    t.string   "persistence_token"
-    t.string   "perishable_token"
-    t.datetime "created_at",                                            :null => false
-    t.datetime "updated_at",                                            :null => false
-    t.string   "encrypted_password",     :limit => 128, :default => ""
-    t.string   "remember_token"
-    t.datetime "remember_created_at"
-    t.string   "reset_password_token"
-    t.datetime "last_sign_in_at"
-    t.string   "last_sign_in_ip"
-    t.integer  "sign_in_count",                         :default => 0
-    t.datetime "current_sign_in_at"
-    t.string   "current_sign_in_ip"
-    t.datetime "reset_password_sent_at"
-    t.boolean  "admin"
-    t.string   "image_file_name"
-    t.string   "image_content_type"
-    t.integer  "image_file_size"
-    t.datetime "image_updated_at"
-  end
-
-  add_index "users", ["reset_password_token"], :name => "index_users_on_reset_password_token", :unique => true
-
-end
+# encoding: UTF-8
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# Note that this schema.rb definition is the authoritative source for your
+# database schema. If you need to create the application database on another
+# system, you should be using db:schema:load, not running all the migrations
+# from scratch. The latter is a flawed and unsustainable approach (the more migrations
+# you'll amass, the slower it'll run and the greater likelihood for issues).
+#
+# It's strongly recommended to check this file into your version control system.
+
+ActiveRecord::Schema.define(:version => 20140930013020) do
+
+  create_table "in_metacode_sets", :force => true do |t|
+    t.integer  "metacode_id"
+    t.integer  "metacode_set_id"
+    t.datetime "created_at",      :null => false
+    t.datetime "updated_at",      :null => false
+  end
+
+  add_index "in_metacode_sets", ["metacode_id"], :name => "index_in_metacode_sets_on_metacode_id"
+  add_index "in_metacode_sets", ["metacode_set_id"], :name => "index_in_metacode_sets_on_metacode_set_id"
+
+  create_table "mappings", :force => true do |t|
+    t.text     "category"
+    t.integer  "xloc"
+    t.integer  "yloc"
+    t.integer  "topic_id"
+    t.integer  "synapse_id"
+    t.integer  "map_id"
+    t.integer  "user_id"
+    t.datetime "created_at", :null => false
+    t.datetime "updated_at", :null => false
+  end
+
+  create_table "maps", :force => true do |t|
+    t.text     "name"
+    t.boolean  "arranged"
+    t.text     "desc"
+    t.text     "permission"
+    t.integer  "user_id"
+    t.datetime "created_at",              :null => false
+    t.datetime "updated_at",              :null => false
+    t.boolean  "featured"
+    t.string   "screenshot_file_name"
+    t.string   "screenshot_content_type"
+    t.integer  "screenshot_file_size"
+    t.datetime "screenshot_updated_at"
+  end
+
+  create_table "metacode_sets", :force => true do |t|
+    t.string   "name"
+    t.text     "desc"
+    t.integer  "user_id"
+    t.boolean  "mapperContributed"
+    t.datetime "created_at",        :null => false
+    t.datetime "updated_at",        :null => false
+  end
+
+  add_index "metacode_sets", ["user_id"], :name => "index_metacode_sets_on_user_id"
+
+  create_table "metacodes", :force => true do |t|
+    t.text     "name"
+    t.string   "icon"
+    t.datetime "created_at", :null => false
+    t.datetime "updated_at", :null => false
+    t.string   "color"
+  end
+
+  create_table "synapses", :force => true do |t|
+    t.text     "desc"
+    t.text     "category"
+    t.text     "weight"
+    t.text     "permission"
+    t.integer  "node1_id"
+    t.integer  "node2_id"
+    t.integer  "user_id"
+    t.datetime "created_at", :null => false
+    t.datetime "updated_at", :null => false
+  end
+
+  create_table "topics", :force => true do |t|
+    t.text     "name"
+    t.text     "desc"
+    t.text     "link"
+    t.text     "permission"
+    t.integer  "user_id"
+    t.integer  "metacode_id"
+    t.datetime "created_at",         :null => false
+    t.datetime "updated_at",         :null => false
+    t.string   "image_file_name"
+    t.string   "image_content_type"
+    t.integer  "image_file_size"
+    t.datetime "image_updated_at"
+    t.string   "audio_file_name"
+    t.string   "audio_content_type"
+    t.integer  "audio_file_size"
+    t.datetime "audio_updated_at"
+  end
+
+  create_table "users", :force => true do |t|
+    t.string   "name"
+    t.string   "email"
+    t.text     "settings"
+    t.string   "code",                   :limit => 8
+    t.string   "joinedwithcode",         :limit => 8
+    t.string   "crypted_password"
+    t.string   "password_salt"
+    t.string   "persistence_token"
+    t.string   "perishable_token"
+    t.datetime "created_at",                                            :null => false
+    t.datetime "updated_at",                                            :null => false
+    t.string   "encrypted_password",     :limit => 128, :default => ""
+    t.string   "remember_token"
+    t.datetime "remember_created_at"
+    t.string   "reset_password_token"
+    t.datetime "last_sign_in_at"
+    t.string   "last_sign_in_ip"
+    t.integer  "sign_in_count",                         :default => 0
+    t.datetime "current_sign_in_at"
+    t.string   "current_sign_in_ip"
+    t.datetime "reset_password_sent_at"
+    t.boolean  "admin"
+    t.string   "image_file_name"
+    t.string   "image_content_type"
+    t.integer  "image_file_size"
+    t.datetime "image_updated_at"
+  end
+
+  add_index "users", ["reset_password_token"], :name => "index_users_on_reset_password_token", :unique => true
+
+end
diff --git a/metacode_backgrounds.css b/metacode_backgrounds.css
new file mode 100644
index 00000000..adf69d4e
--- /dev/null
+++ b/metacode_backgrounds.css
@@ -0,0 +1,120 @@
+.mbgAction {
+    background-color: #bd6c85 !important;
+}
+.mbgActivity {
+    background-color: #6ebf65 !important;    
+}
+.mbgArgument {
+    background-color: #7FAEFD !important;    
+}
+.mbgBizarre {
+    background-color: #bdb25e !important;    
+}
+.mbgCatalyst {
+    background-color: #EF8964 !important;    
+}
+.mbgClosed {
+    background-color: #ABB49F !important;    
+}
+.mbgCon {
+    background-color: #CF7C74 !important;    
+}
+.mbgDecision {
+    background-color: #cca866 !important;    
+}
+.mbgExample {
+    background-color: #598559 !important;    
+}
+.mbgExperience {
+    background-color: #BE995F !important;    
+}
+.mbgForesight {
+    background-color: #b0b0b0 !important;    
+}
+.mbgFutureDev {
+    background-color: #25A17F !important;    
+}
+.mbgGoodPractice {
+    background-color: #BD9E86 !important;    
+}
+.mbgGroup {
+    background-color: #7076BC !important;    
+}
+.mbgIdea {
+    background-color: #c4bc5e !important;    
+}
+.mbgImplication {
+    background-color: #83DECA !important;    
+}
+.mbgInsight {
+    background-color: #B074AD !important;    
+}
+.mbgIntention {
+    background-color: #baeaff !important;    
+}
+.mbgKnowledge {
+    background-color: #60acf7 !important;    
+}
+.mbgList {
+    background-color: #B7A499 !important;    
+}
+.mbgLocation {
+    background-color: #abd9a7 !important;    
+}
+.mbgMovieMap {
+    background-color: #a5a0de !important;    
+}
+.mbgNote {
+    background-color: #a389a1 !important;    
+}
+.mbgOpenIssue {
+    background-color: #9bbf71 !important;    
+}
+.mbgOpinion {
+    background-color: #54a19d !important;    
+}
+.mbgOpportunity {
+    background-color: #889F64 !important;    
+}
+.mbgPerson {
+    background-color: #de925f !important;    
+}
+.mbgPlatform {
+    background-color: #21C8FE !important;    
+}
+.mbgPro {
+    background-color: #89b879 !important;    
+}
+.mbgProblem {
+    background-color: #99cfc4 !important;    
+}
+.mbgQuestion {
+    background-color: #709899 !important;    
+}
+.mbgReference {
+    background-color: #A7A7A7 !important;    
+}
+.mbgRequirement {
+    background-color: #d2a7d4 !important;    
+}
+.mbgResearch {
+    background-color: #CD8E89 !important;    
+}
+.mbgResource {
+    background-color: #c98c63 !important;    
+}
+.mbgRole {
+    background-color: #a8595d !important;    
+}
+.mbgTask {
+    background-color: #2f89ba !important;    
+}
+.mbgTool {
+    background-color: #828282 !important;    
+}
+.mbgTrajectory {
+    background-color: #b3953d !important;    
+}
+.mbgWildcard {
+    background-color: #73c7de !important;    
+}
\ No newline at end of file

From c1885615cda3d003a336e427f1bf444e5942d63e Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 22:26:50 -0400
Subject: [PATCH 07/11] remove tilda file

---
 .../stylesheets/metacode_backgrounds.css      | 120 ------------------
 .../20140930013020_add_color_to_metacodes.rb~ |   5 -
 2 files changed, 125 deletions(-)
 delete mode 100644 app/assets/stylesheets/metacode_backgrounds.css
 delete mode 100644 db/migrate/20140930013020_add_color_to_metacodes.rb~

diff --git a/app/assets/stylesheets/metacode_backgrounds.css b/app/assets/stylesheets/metacode_backgrounds.css
deleted file mode 100644
index adf69d4e..00000000
--- a/app/assets/stylesheets/metacode_backgrounds.css
+++ /dev/null
@@ -1,120 +0,0 @@
-.mbgAction {
-    background-color: #bd6c85 !important;
-}
-.mbgActivity {
-    background-color: #6ebf65 !important;    
-}
-.mbgArgument {
-    background-color: #7FAEFD !important;    
-}
-.mbgBizarre {
-    background-color: #bdb25e !important;    
-}
-.mbgCatalyst {
-    background-color: #EF8964 !important;    
-}
-.mbgClosed {
-    background-color: #ABB49F !important;    
-}
-.mbgCon {
-    background-color: #CF7C74 !important;    
-}
-.mbgDecision {
-    background-color: #cca866 !important;    
-}
-.mbgExample {
-    background-color: #598559 !important;    
-}
-.mbgExperience {
-    background-color: #BE995F !important;    
-}
-.mbgForesight {
-    background-color: #b0b0b0 !important;    
-}
-.mbgFutureDev {
-    background-color: #25A17F !important;    
-}
-.mbgGoodPractice {
-    background-color: #BD9E86 !important;    
-}
-.mbgGroup {
-    background-color: #7076BC !important;    
-}
-.mbgIdea {
-    background-color: #c4bc5e !important;    
-}
-.mbgImplication {
-    background-color: #83DECA !important;    
-}
-.mbgInsight {
-    background-color: #B074AD !important;    
-}
-.mbgIntention {
-    background-color: #baeaff !important;    
-}
-.mbgKnowledge {
-    background-color: #60acf7 !important;    
-}
-.mbgList {
-    background-color: #B7A499 !important;    
-}
-.mbgLocation {
-    background-color: #abd9a7 !important;    
-}
-.mbgMovieMap {
-    background-color: #a5a0de !important;    
-}
-.mbgNote {
-    background-color: #a389a1 !important;    
-}
-.mbgOpenIssue {
-    background-color: #9bbf71 !important;    
-}
-.mbgOpinion {
-    background-color: #54a19d !important;    
-}
-.mbgOpportunity {
-    background-color: #889F64 !important;    
-}
-.mbgPerson {
-    background-color: #de925f !important;    
-}
-.mbgPlatform {
-    background-color: #21C8FE !important;    
-}
-.mbgPro {
-    background-color: #89b879 !important;    
-}
-.mbgProblem {
-    background-color: #99cfc4 !important;    
-}
-.mbgQuestion {
-    background-color: #709899 !important;    
-}
-.mbgReference {
-    background-color: #A7A7A7 !important;    
-}
-.mbgRequirement {
-    background-color: #d2a7d4 !important;    
-}
-.mbgResearch {
-    background-color: #CD8E89 !important;    
-}
-.mbgResource {
-    background-color: #c98c63 !important;    
-}
-.mbgRole {
-    background-color: #a8595d !important;    
-}
-.mbgTask {
-    background-color: #2f89ba !important;    
-}
-.mbgTool {
-    background-color: #828282 !important;    
-}
-.mbgTrajectory {
-    background-color: #b3953d !important;    
-}
-.mbgWildcard {
-    background-color: #73c7de !important;    
-}
\ No newline at end of file
diff --git a/db/migrate/20140930013020_add_color_to_metacodes.rb~ b/db/migrate/20140930013020_add_color_to_metacodes.rb~
deleted file mode 100644
index 59c8f89f..00000000
--- a/db/migrate/20140930013020_add_color_to_metacodes.rb~
+++ /dev/null
@@ -1,5 +0,0 @@
-class AddColorToMetacodes < ActiveRecord::Migration
-  def change
-    add_column :metacodes, :color, :string
-  end
-end

From b1d27d42ff53e65e0a9e11294d783b82287d3d5d Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 29 Sep 2014 22:33:03 -0400
Subject: [PATCH 08/11] did one as example, need to do rest

---
 test/fixtures/metacodes.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/fixtures/metacodes.yml b/test/fixtures/metacodes.yml
index a1c750e1..230bef78 100644
--- a/test/fixtures/metacodes.yml
+++ b/test/fixtures/metacodes.yml
@@ -7,6 +7,7 @@
 one: 
   name: Action  
   icon: /assets/icons/action.png
+  color: #bd6c85
 
 two: 
   name: Activity  

From 86e78919b35edd4ab07784e57505f8e7a6607568 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Tue, 30 Sep 2014 16:55:25 -0400
Subject: [PATCH 09/11] initial code for realtime, got new topic, new synapse,
 and topic drag working

---
 app/assets/javascripts/src/Metamaps.JIT.js |  41 ++-
 app/assets/javascripts/src/Metamaps.js     | 330 ++++++++++++++-------
 realtime/realtime-server.js                |  35 +++
 3 files changed, 287 insertions(+), 119 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 3c5b79c9..98b8ba7b 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -1,6 +1,11 @@
 Metamaps.JIT = {
     events: {
         mouseMove: 'Metamaps:JIT:events:mouseMove',
+        topicDrag: 'Metamaps:JIT:events:topicDrag', 
+        newTopic: 'Metamaps:JIT:events:newTopic', 
+        removeTopic: 'Metamaps:JIT:events:removeTopic', 
+        newSynapse: 'Metamaps:JIT:events:newSynapse', 
+        removeSynapse: 'Metamaps:JIT:events:removeSynapse', 
         pan: 'Metamaps:JIT:events:pan',
         zoom: 'Metamaps:JIT:events:zoom'
     },
@@ -703,6 +708,11 @@ Metamaps.JIT = {
 
         var self = Metamaps.JIT;
 
+        // this is used to send nodes that are moving to 
+        // other realtime collaborators on the same map
+        var positionsToSend = {};
+        var topic;
+
         if (node && !node.nodeFrom) {
             var pos = eventInfo.getPos();
             // if it's a left click, or a touch, move the node
@@ -710,13 +720,23 @@ Metamaps.JIT = {
                 //if the node dragged isn't already selected, select it
                 var whatToDo = self.handleSelectionBeforeDragging(node, e);
                 if (node.pos.rho || node.pos.rho === 0) {
+                    // this means we're in topic view
                     var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
                     var theta = Math.atan2(pos.y, pos.x);
                     node.pos.setp(theta, rho);
                 } else if (whatToDo == 'only-drag-this-one') {
                     node.pos.setc(pos.x, pos.y);
-                    node.setData('xloc', pos.x);
-                    node.setData('yloc', pos.y);
+
+                    if (Metamaps.Active.Map) {
+                        topic = node.getData('topic');
+                        // we use the topic ID not the node id
+                        // because we can't depend on the node id
+                        // to be the same as on other collaborators
+                        // maps
+                        positionsToSend[topic.id] = pos;
+                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
+                        $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
+                    }
                 } else {
                     var len = Metamaps.Selected.Nodes.length;
 
@@ -734,9 +754,21 @@ Metamaps.JIT = {
                         var x = pos.x + xOffset[i];
                         var y = pos.y + yOffset[i];
                         n.pos.setc(x, y);
-                        n.setData('xloc', x);
-                        n.setData('yloc', y);
+
+                        if (Metamaps.Active.Map) {
+                            topic = n.getData('topic');
+                            // we use the topic ID not the node id
+                            // because we can't depend on the node id
+                            // to be the same as on other collaborators
+                            // maps
+                            positionsToSend[topic.id] = n.pos;
+                        }
                     } //for
+
+                    if (Metamaps.Active.Map) {
+                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
+                        $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
+                    }
                 } //if
 
                 if (whatToDo == 'deselect') {
@@ -807,6 +839,7 @@ Metamaps.JIT = {
                         x: pos.x,
                         y: pos.y
                     };
+                    $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
                 }
             }
         }
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 83ece7d7..30243247 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -1506,7 +1506,7 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');  
+        self.socket = io.connect('http://localhost:5001');  
         self.startActiveMap();
     },
     toggleBox: function (event) {
@@ -1619,14 +1619,30 @@ Metamaps.Realtime = {
         // receive word that there's a mapper turned on realtime
         socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);
 
-        socket.on('maps-' + Metamaps.Active.Map.id, self.contentUpdate);
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse);
 
         // update mapper compass position
         socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
     
+        // local event listeners that trigger events
         var sendCoords = function (event, coords) {
             self.sendCoords(coords);
         };
+        $(document).on(Metamaps.JIT.events.mouseMove, sendCoords);
+
         var zoom = function (event, e) {
             if (e) {
                 var pixels = {
@@ -1638,9 +1654,35 @@ Metamaps.Realtime = {
             }
             self.positionPeerIcons();
         };
-        $(document).on(Metamaps.JIT.events.mouseMove, sendCoords);
         $(document).on(Metamaps.JIT.events.zoom, zoom);
+
         $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);
+
+        var sendTopicDrag = function (event, positions) {
+            self.sendTopicDrag(positions);
+        };
+        $(document).on(Metamaps.JIT.events.topicDrag, sendTopicDrag);
+
+        var sendNewTopic = function (event, data) {
+            self.sendNewTopic(data);
+        };
+        $(document).on(Metamaps.JIT.events.newTopic, sendNewTopic);
+
+        var sendRemoveTopic = function (event, data) {
+            self.sendRemoveTopic(data);
+        };
+        $(document).on(Metamaps.JIT.events.removeTopic, sendRemoveTopic);
+
+        var sendNewSynapse = function (event, data) {
+            self.sendNewSynapse(data);
+        };
+        $(document).on(Metamaps.JIT.events.newSynapse, sendNewSynapse);
+
+        var sendRemoveSynapse = function (event, data) {
+            self.sendRemoveSynapse(data);
+        };
+        $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse);
+
     },
     sendRealtimeOn: function () {
         var self = Metamaps.Realtime;
@@ -1899,120 +1941,150 @@ Metamaps.Realtime = {
             socket.emit('updateMapperCoords', update);
         }
     },
-    contentUpdate: function (data) {
+    sendTopicDrag: function (positions) {
         var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-        var graph = Metamaps.Visualize.mGraph.graph;
+        var socket = self.socket;
 
-        //as long as you weren't the origin of the changes, update your map
-        if (data.origin != Metamaps.Active.Mapper.id && self.status) {
-            if (data.resource == 'Topic') {
-                topic = $.parseJSON(data.obj);
+        if (Metamaps.Active.Map && self.status) {
+            positions.mapid = Metamaps.Active.Map.id;
+            socket.emit('topicDrag', positions);
+        }
+    },
+    topicDrag: function (positions) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-                if (data.action == 'create') {
-                    self.addTopicToMap(topic);
-                } else if (data.action == 'update' && graph.getNode(topic.id) != 'undefined') {
-                    self.updateTopicOnMap(topic);
-                } else if (data.action == 'destroy' && graph.getNode(topic.id) != 'undefined') {
-                    Metamaps.Control.hideNode(topic.id)
-                }
+        var topic;
+        var node;
 
-                return;
-            } else if (data.resource == 'Synapse') {
-                synapse = $.parseJSON(data.obj);
+        if (Metamaps.Active.Map && self.status) {
+            for (var key in positions) {
+                topic = Metamaps.Topics.get(key);
+                if (topic) node = topic.get('node');
+                if (node) node.pos.setc(positions[key].x, positions[key].y);
+            } //for
+            Metamaps.Visualize.mGraph.plot();
+        }
+    },
+    // newTopic
+    sendNewTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-                if (data.action == 'create') {
-                    self.addSynapseToMap(synapse);
-                } else if (data.action == 'update' &&
-                    graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
-                    self.updateSynapseOnMap(synapse);
-                } else if (data.action == 'destroy' &&
-                    graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
-                    var edge = graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']);
-                    Metamaps.Control.hideEdge(edge);
-                }
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('newTopic', data);
+        }
+    },
+    newTopic: function (data) {
+        var topic, mapping, cancel;
 
-                return;
+        function test() {
+            if (topic && mapping) {
+                Metamaps.Topic.renderTopic(mapping, topic, false, false);
+            }
+            else if (!cancel) {
+                setTimeout(test, 10);
             }
         }
-    },
-    addTopicToMap: function (topic) {
+        test();
 
-        // TODO
-        var newPos, tempForT;
-        Metamaps.Visualize.mGraph.graph.addNode(topic);
-        tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
-        tempForT.setData('dim', 1, 'start');
-        tempForT.setData('dim', 25, 'end');
-        newPos = new $jit.Complex();
-        newPos.x = tempForT.data.$xloc;
-        newPos.y = tempForT.data.$yloc;
-        tempForT.setPos(newPos, 'start');
-        tempForT.setPos(newPos, 'current');
-        tempForT.setPos(newPos, 'end');
-        Metamaps.Visualize.mGraph.fx.plotNode(tempForT, Metamaps.Visualize.mGraph.canvas);
+        $.ajax({
+            url: "/topics/" + data.topicid + ".json",
+            success: function (response) {
+                Metamaps.Topics.add(response);
+                topic = Metamaps.Topics.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+        $.ajax({
+            url: "/mappings/" + data.mappingid + ".json",
+            success: function (response) {
+                Metamaps.Mappings.add(response);
+                mapping = Metamaps.Mappings.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
     },
-    updateTopicOnMap: function (topic) {
+    // removeTopic
+    sendRemoveTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-        // TODO
-        var newPos, tempForT;
-        tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
-        tempForT.data = topic.data;
-        tempForT.name = topic.name;
-        if (MetamapsModel.showcardInUse === topic.id) {
-            populateShowCard(tempForT);
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeTopic', data);
         }
-        newPos = new $jit.Complex();
-        newPos.x = tempForT.data.$xloc;
-        newPos.y = tempForT.data.$yloc;
-        tempForT.setPos(newPos, 'start');
-        tempForT.setPos(newPos, 'current');
-        tempForT.setPos(newPos, 'end');
-        return Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
-            transition: $jit.Trans.Quad.easeInOut,
-            duration: 500
+    },
+    removeTopic: function (data) {
+        
+    },
+    // newSynapse
+    sendNewSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('newSynapse', data);
+        }
+    },
+    newSynapse: function (data) {
+        var topic1, topic2, node1, node2, synapse, mapping, cancel;
+
+        function test() {
+            if (synapse && mapping) {
+                topic1 = synapse.getTopic1();
+                node1 = topic1.get('node');
+                topic2 = synapse.getTopic2();
+                node2 = topic2.get('node');
+
+                Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false);
+            }
+            else if (!cancel) {
+                setTimeout(test, 10);
+            }
+        }
+        test();
+
+        $.ajax({
+            url: "/synapses/" + data.synapseid + ".json",
+            success: function (response) {
+                Metamaps.Synapses.add(response);
+                synapse = Metamaps.Synapses.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+        $.ajax({
+            url: "/mappings/" + data.mappingid + ".json",
+            success: function (response) {
+                Metamaps.Mappings.add(response);
+                mapping = Metamaps.Mappings.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
         });
     },
-    addSynapseToMap: function (synapse) {
+    // removeSynapse
+    sendRemoveSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-        // TODO
-        var Node1, Node2, tempForS;
-        Node1 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[0]);
-        Node2 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[1]);
-        Metamaps.Visualize.mGraph.graph.addAdjacence(Node1, Node2, {});
-        tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(Node1.id, Node2.id);
-        tempForS.setDataset('start', {
-            lineWidth: 0.4
-        });
-        tempForS.setDataset('end', {
-            lineWidth: 2
-        });
-        tempForS.data = synapse.data;
-        Metamaps.Visualize.mGraph.fx.plotLine(tempForS, Metamaps.Visualize.mGraph.canvas);
-        return Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
-            transition: $jit.Trans.Quad.easeInOut,
-            duration: 500
-        });
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeSynapse', data);
+        }
+    },
+    removeSynapse: function (data) {
+        
     },
-    updateSynapseOnMap: function (synapse) {
-
-        // TODO
-        var k, tempForS, v, wasShowDesc, _ref;
-        tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]);
-        wasShowDesc = tempForS.data.$showDesc;
-        _ref = synapse.data;
-        for (k in _ref) {
-            v = _ref[k];
-            tempForS.data[k] = v;
-        }
-        tempForS.data.$showDesc = wasShowDesc;
-        if (MetamapsModel.edgecardInUse === synapse.data.$id) { // TODO
-            editEdge(tempForS, false);
-        }
-        return Metamaps.Visualize.mGraph.plot();
-    }
 }; // end Metamaps.Realtime
 
 
@@ -2902,7 +2974,7 @@ Metamaps.Topic = {
      *
      *
      */
-    renderTopic: function (mapping, topic, createNewInDB) {
+    renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) {
         var self = Metamaps.Topic;
 
         var nodeOnViz, tempPos;
@@ -2935,7 +3007,7 @@ Metamaps.Topic = {
                 nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
                 nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
             }
-            if (Metamaps.Create.newTopic.addSynapse) {
+            if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) {
                 Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
                 
                 // position the form
@@ -2986,10 +3058,22 @@ Metamaps.Topic = {
             });
         }
 
+        var mappingSuccessCallback = function (mappingModel, response) {
+            var newTopicData = {
+                mappingid: mappingModel.id,
+                topicid: mappingModel.get('topic_id')
+            };
 
-        var successCallback = function (topicModel, response) {
+            $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
+        };  
+        var topicSuccessCallback = function (topicModel, response) {
             if (Metamaps.Active.Map) {
-                mapping.save({ topic_id: topicModel.id });
+                mapping.save({ topic_id: topicModel.id }, {
+                    success: mappingSuccessCallback,
+                    error: function (model, response) {
+                        console.log('error saving mapping to database');
+                    }
+                });
             }
 
             if (Metamaps.Create.newTopic.addSynapse) {
@@ -3000,13 +3084,15 @@ Metamaps.Topic = {
         if (!Metamaps.Settings.sandbox && createNewInDB) {
             if (topic.isNew()) {
                 topic.save(null, {
-                    success: successCallback,
+                    success: topicSuccessCallback,
                     error: function (model, response) {
                         console.log('error saving topic to database');
                     }
                 });
             } else if (!topic.isNew() && Metamaps.Active.Map) {
-                mapping.save();
+                mapping.save(null, {
+                    success: mappingSuccessCallback
+                });
             }
         }
     },
@@ -3034,7 +3120,7 @@ Metamaps.Topic = {
         //these can't happen until the value is retrieved, which happens in the line above
         Metamaps.Create.newTopic.hide();
 
-        self.renderTopic(mapping, topic, true); // this function also includes the creation of the topic in the database
+        self.renderTopic(mapping, topic, true, true); // this function also includes the creation of the topic in the database
     },
     getTopicFromAutocomplete: function (id) {
         var self = Metamaps.Topic;
@@ -3051,7 +3137,7 @@ Metamaps.Topic = {
         });
         Metamaps.Mappings.add(mapping);
 
-        self.renderTopic(mapping, topic, true);
+        self.renderTopic(mapping, topic, true, true);
     }
 }; // end Metamaps.Topic
 
@@ -3110,20 +3196,34 @@ Metamaps.Synapse = {
         Metamaps.Visualize.mGraph.fx.plotLine(edgeOnViz, Metamaps.Visualize.mGraph.canvas);
         Metamaps.Control.selectEdge(edgeOnViz);
 
+        var mappingSuccessCallback = function (mappingModel, response) {
+            var newSynapseData = {
+                mappingid: mappingModel.id,
+                synapseid: mappingModel.get('synapse_id')
+            };
+
+            $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
+        };
+        var synapseSuccessCallback = function (synapseModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ synapse_id: synapseModel.id }, {
+                    success: mappingSuccessCallback
+                });
+            }
+        };
+
         if (!Metamaps.Settings.sandbox && createNewInDB) {
             if (synapse.isNew()) {
                 synapse.save(null, {
-                    success: function (synapseModel, response) {
-                        if (Metamaps.Active.Map) {
-                            mapping.save({ synapse_id: synapseModel.id });
-                        }
-                    },
+                    success: synapseSuccessCallback,
                     error: function (model, response) {
                         console.log('error saving synapse to database');
                     }
                 });
             } else if (!synapse.isNew() && Metamaps.Active.Map) {
-                mapping.save();
+                mapping.save(null, {
+                    success: mappingSuccessCallback
+                });
             }
         }
     },
diff --git a/realtime/realtime-server.js b/realtime/realtime-server.js
index fe6524cc..28db52cf 100644
--- a/realtime/realtime-server.js
+++ b/realtime/realtime-server.js
@@ -113,6 +113,41 @@ function start() {
             socket.broadcast.emit('maps-' + data.mapid + '-updatePeerCoords', peer);
         });
 
+        socket.on('topicDrag', function (data) {
+            var mapId = data.mapid;
+            delete data.mapid;
+
+            socket.broadcast.emit('maps-' + mapId + '-topicDrag', data);
+        });
+
+        socket.on('newTopic', function (data) {
+            var mapId = data.mapid;
+            delete data.mapid;
+
+            socket.broadcast.emit('maps-' + mapId + '-newTopic', data);
+        });
+
+        socket.on('removeTopic', function (data) {
+            var mapId = data.mapid;
+            delete data.mapid;
+
+            socket.broadcast.emit('maps-' + mapId + '-removeTopic', data);
+        });
+
+        socket.on('newSynapse', function (data) {
+            var mapId = data.mapid;
+            delete data.mapid;
+
+            socket.broadcast.emit('maps-' + mapId + '-newSynapse', data);
+        });
+
+        socket.on('removeSynapse', function (data) {
+            var mapId = data.mapid;
+            delete data.mapid;
+
+            socket.broadcast.emit('maps-' + mapId + '-removeSynapse', data);
+        });
+
     });
 }
 

From 81f31ea10e376b84d7cb7028d3a5d50fa56bbd9e Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Tue, 30 Sep 2014 16:59:19 -0400
Subject: [PATCH 10/11] heroku

---
 app/assets/javascripts/src/Metamaps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 30243247..eaa8df8e 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -1506,7 +1506,7 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        self.socket = io.connect('http://localhost:5001');  
+        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
         self.startActiveMap();
     },
     toggleBox: function (event) {

From eccc433627805bd951e04bbbfaf50b167714948c Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Tue, 30 Sep 2014 18:13:49 -0400
Subject: [PATCH 11/11] fixed realtime bug where couldn't populate filters
 because it was missing a new mapper model that just added something

---
 app/assets/javascripts/src/Metamaps.js | 29 +++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index eaa8df8e..83128629 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -1972,23 +1972,31 @@ Metamaps.Realtime = {
         var socket = self.socket;
 
         if (Metamaps.Active.Map && self.status) {
+            data.mapperid = Metamaps.Active.Mapper.id;
             data.mapid = Metamaps.Active.Map.id;
             socket.emit('newTopic', data);
         }
     },
     newTopic: function (data) {
-        var topic, mapping, cancel;
+        var topic, mapping, mapper, mapperCallback, cancel;
 
         function test() {
-            if (topic && mapping) {
+            if (topic && mapping && mapper) {
                 Metamaps.Topic.renderTopic(mapping, topic, false, false);
             }
             else if (!cancel) {
                 setTimeout(test, 10);
             }
         }
-        test();
 
+        mapper = Metamaps.Mappers.get(data.mapperid);
+        if (mapper === undefined) {
+            mapperCallback = function (m) {
+                Metamaps.Mappers.add(m);
+                mapper = m;
+            };
+            Metamaps.Mapper.get(data.mapperid, mapperCallback);
+        }
         $.ajax({
             url: "/topics/" + data.topicid + ".json",
             success: function (response) {
@@ -2009,6 +2017,8 @@ Metamaps.Realtime = {
                 cancel = true;
             }
         });
+
+        test();
     },
     // removeTopic
     sendRemoveTopic: function (data) {
@@ -2029,6 +2039,7 @@ Metamaps.Realtime = {
         var socket = self.socket;
 
         if (Metamaps.Active.Map && self.status) {
+            data.mapperid = Metamaps.Active.Mapper.id;
             data.mapid = Metamaps.Active.Map.id;
             socket.emit('newSynapse', data);
         }
@@ -2037,7 +2048,7 @@ Metamaps.Realtime = {
         var topic1, topic2, node1, node2, synapse, mapping, cancel;
 
         function test() {
-            if (synapse && mapping) {
+            if (synapse && mapping && mapper) {
                 topic1 = synapse.getTopic1();
                 node1 = topic1.get('node');
                 topic2 = synapse.getTopic2();
@@ -2049,8 +2060,15 @@ Metamaps.Realtime = {
                 setTimeout(test, 10);
             }
         }
-        test();
 
+        mapper = Metamaps.Mappers.get(data.mapperid);
+        if (mapper === undefined) {
+            mapperCallback = function (m) {
+                Metamaps.Mappers.add(m);
+                mapper = m;
+            };
+            Metamaps.Mapper.get(data.mapperid, mapperCallback);
+        }
         $.ajax({
             url: "/synapses/" + data.synapseid + ".json",
             success: function (response) {
@@ -2071,6 +2089,7 @@ Metamaps.Realtime = {
                 cancel = true;
             }
         });
+        test();
     },
     // removeSynapse
     sendRemoveSynapse: function (data) {