merge with develop

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();
     }

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'
     },
@@ -20,6 +25,7 @@ Metamaps.JIT = {
      */
     prepareVizData: function () {
         var self = Metamaps.JIT;
+        var synapsesToRemove = [];
         var topic;
         var mapping;
         var node;
@@ -39,7 +45,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 +64,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 +339,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;
                     }
 
@@ -688,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
@@ -695,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;
 
@@ -719,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') {
@@ -792,6 +839,7 @@ Metamaps.JIT = {
                         x: pos.x,
                         y: pos.y
                     };
+                    $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
                 }
             }
         }
@@ -816,8 +864,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.topic1id = tempNode.getData('topic').id;
-            Metamaps.Create.newSynapse.topic2id = tempNode2.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 +1462,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 +1513,7 @@ Metamaps.JIT = {
                 y: posChild.y
             }, 13, false, canvas, 0.7);
         } else if (directionCat == "from-to") {
-            var direction = adj.data.$direction;
+            var inv = (direction[0] != adj.nodeFrom.id);
-            var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
             self.renderMidArrow({
                 x: pos.x,
                 y: pos.y
@@ -1502,7 +1549,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 +1585,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(),

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);
         },

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.getTopic1().get('node').id,
-                    this.get('node2_id')
+                    this.getTopic2().get('node').id
                 ];
         },
         getMapping: function () {
@@ -1232,12 +1232,16 @@ Metamaps.Visualize = {
                 topic.updateNode();
 
                 n.eachAdjacency(function (edge) {
+                    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();
                         }
+                    }
                 });
                 
                 var pos = n.getPos();
@@ -1254,12 +1258,16 @@ Metamaps.Visualize = {
                 mapping = topic.getMapping();
 
                 n.eachAdjacency(function (edge) {
+                    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();
                         }
+                    }
                 });
 
                 startPos = new $jit.Complex(0, 0);
@@ -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;
@@ -1612,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 = {
@@ -1631,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;
@@ -1892,120 +1941,169 @@ Metamaps.Realtime = {
             socket.emit('updateMapperCoords', update);
         }
     },
-    contentUpdate: function (data) {
+    sendTopicDrag: function (positions) {
         var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
+        var socket = self.socket;
-        var graph = Metamaps.Visualize.mGraph.graph;
 
-        //as long as you weren't the origin of the changes, update your map
+        if (Metamaps.Active.Map && self.status) {
-        if (data.origin != Metamaps.Active.Mapper.id && self.status) {
+            positions.mapid = Metamaps.Active.Map.id;
-            if (data.resource == 'Topic') {
+            socket.emit('topicDrag', positions);
-                topic = $.parseJSON(data.obj);
-
-                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)
-                }
-
-                return;
-            } else if (data.resource == 'Synapse') {
-                synapse = $.parseJSON(data.obj);
-
-                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);
-                }
-
-                return;
-            }
         }
     },
-    addTopicToMap: function (topic) {
+    topicDrag: function (positions) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-        // TODO
+        var topic;
-        var newPos, tempForT;
+        var node;
-        Metamaps.Visualize.mGraph.graph.addNode(topic);
+
-        tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
+        if (Metamaps.Active.Map && self.status) {
-        tempForT.setData('dim', 1, 'start');
+            for (var key in positions) {
-        tempForT.setData('dim', 25, 'end');
+                topic = Metamaps.Topics.get(key);
-        newPos = new $jit.Complex();
+                if (topic) node = topic.get('node');
-        newPos.x = tempForT.data.$xloc;
+                if (node) node.pos.setc(positions[key].x, positions[key].y);
-        newPos.y = tempForT.data.$yloc;
+            } //for
-        tempForT.setPos(newPos, 'start');
+            Metamaps.Visualize.mGraph.plot();
-        tempForT.setPos(newPos, 'current');
+        }
-        tempForT.setPos(newPos, 'end');
-        Metamaps.Visualize.mGraph.fx.plotNode(tempForT, Metamaps.Visualize.mGraph.canvas);
     },
-    updateTopicOnMap: function (topic) {
+    // newTopic
+    sendNewTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
 
-        // TODO
+        if (Metamaps.Active.Map && self.status) {
-        var newPos, tempForT;
+            data.mapperid = Metamaps.Active.Mapper.id;
-        tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
+            data.mapid = Metamaps.Active.Map.id;
-        tempForT.data = topic.data;
+            socket.emit('newTopic', data);
-        tempForT.name = topic.name;
-        if (MetamapsModel.showcardInUse === topic.id) {
-            populateShowCard(tempForT);
         }
-        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
-        });
     },
-    addSynapseToMap: function (synapse) {
+    newTopic: function (data) {
+        var topic, mapping, mapper, mapperCallback, cancel;
 
-        // TODO
+        function test() {
-        var Node1, Node2, tempForS;
+            if (topic && mapping && mapper) {
-        Node1 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[0]);
+                Metamaps.Topic.renderTopic(mapping, topic, false, false);
-        Node2 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[1]);
+            }
-        Metamaps.Visualize.mGraph.graph.addAdjacence(Node1, Node2, {});
+            else if (!cancel) {
-        tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(Node1.id, Node2.id);
+                setTimeout(test, 10);
-        tempForS.setDataset('start', {
+            }
-            lineWidth: 0.4
+        }
-        });
+
-        tempForS.setDataset('end', {
+        mapper = Metamaps.Mappers.get(data.mapperid);
-            lineWidth: 2
+        if (mapper === undefined) {
-        });
+            mapperCallback = function (m) {
-        tempForS.data = synapse.data;
+                Metamaps.Mappers.add(m);
-        Metamaps.Visualize.mGraph.fx.plotLine(tempForS, Metamaps.Visualize.mGraph.canvas);
+                mapper = m;
-        return Metamaps.Visualize.mGraph.fx.animate({
+            };
-            modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
+            Metamaps.Mapper.get(data.mapperid, mapperCallback);
-            transition: $jit.Trans.Quad.easeInOut,
+        }
-            duration: 500
+        $.ajax({
-        });
+            url: "/topics/" + data.topicid + ".json",
+            success: function (response) {
+                Metamaps.Topics.add(response);
+                topic = Metamaps.Topics.get(response.id);
             },
-    updateSynapseOnMap: function (synapse) {
+            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;
+            }
+        });
 
-        // TODO
+        test();
-        var k, tempForS, v, wasShowDesc, _ref;
+    },
-        tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]);
+    // removeTopic
-        wasShowDesc = tempForS.data.$showDesc;
+    sendRemoveTopic: function (data) {
-        _ref = synapse.data;
+        var self = Metamaps.Realtime;
-        for (k in _ref) {
+        var socket = self.socket;
-            v = _ref[k];
+
-            tempForS.data[k] = v;
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeTopic', data);
         }
-        tempForS.data.$showDesc = wasShowDesc;
+    },
-        if (MetamapsModel.edgecardInUse === synapse.data.$id) { // TODO
+    removeTopic: function (data) {
-            editEdge(tempForS, false);
+        
+    },
+    // newSynapse
+    sendNewSynapse: function (data) {
+        var self = 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);
         }
-        return Metamaps.Visualize.mGraph.plot();
+    },
+    newSynapse: function (data) {
+        var topic1, topic2, node1, node2, synapse, mapping, cancel;
+
+        function test() {
+            if (synapse && mapping && mapper) {
+                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);
+            }
+        }
+
+        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) {
+                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;
+            }
+        });
+        test();
+    },
+    // removeSynapse
+    sendRemoveSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map && self.status) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeSynapse', data);
+        }
+    },
+    removeSynapse: function (data) {
+        
+    },
 }; // end Metamaps.Realtime
 
 
@@ -2895,13 +2993,15 @@ Metamaps.Topic = {
      *
      *
      */
-    renderTopic: function (mapping, topic, createNewInDB) {
+    renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) {
         var self = Metamaps.Topic;
 
         var nodeOnViz, tempPos;
 
         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) {
@@ -2926,9 +3026,16 @@ 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.id;
+                Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
-                Metamaps.Create.newSynapse.topic2id = nodeOnViz.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,20 +3077,41 @@ Metamaps.Topic = {
             });
         }
 
+        var mappingSuccessCallback = function (mappingModel, response) {
+            var newTopicData = {
+                mappingid: mappingModel.id,
+                topicid: mappingModel.get('topic_id')
+            };
+
+            $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
+        };  
+        var topicSuccessCallback = function (topicModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ topic_id: topicModel.id }, {
+                    success: mappingSuccessCallback,
+                    error: function (model, response) {
+                        console.log('error saving mapping to database');
+                    }
+                });
+            }
+
+            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) {
+                    success: topicSuccessCallback,
-                        if (Metamaps.Active.Map) {
-                            mapping.save({ topic_id: topicModel.id });
-                        }
-                    },
                     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
+                });
             }
         }
     },
@@ -3011,7 +3139,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;
@@ -3028,7 +3156,7 @@ Metamaps.Topic = {
         });
         Metamaps.Mappings.add(mapping);
 
-        self.renderTopic(mapping, topic, true);
+        self.renderTopic(mapping, topic, true, true);
     }
 }; // end Metamaps.Topic
 
@@ -3087,20 +3215,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) {
+                    success: synapseSuccessCallback,
-                        if (Metamaps.Active.Map) {
-                            mapping.save({ synapse_id: synapseModel.id });
-                        }
-                    },
                     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
+                });
             }
         }
     },
@@ -3116,12 +3258,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 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
-        topic2 = node2.getData('topic');
+        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 +3293,8 @@ Metamaps.Synapse = {
     },
     getSynapseFromAutocomplete: function (id) {
         var self = Metamaps.Synapse,
+            topic1,
+            topic2,
             node1,
             node2;
 
@@ -3161,8 +3306,10 @@ Metamaps.Synapse = {
         });
         Metamaps.Mappings.add(mapping);
 
-        node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
-        node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
+        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 +3367,7 @@ Metamaps.Map = {
             Metamaps.Filter.checkMappers();
 
             Metamaps.Realtime.startActiveMap();
+            Metamaps.Loading.hide();
         }
 
         $.ajax({

app/assets/stylesheets/application.css

@@ -859,7 +859,7 @@ label[for="user_remember_me"] {
 
 .sidebarFilterBox {
     display:none;
-    width: 304px;
+    width: 319px;
     padding: 16px 0;
     overflow-y: auto;
 }
@@ -2148,6 +2148,9 @@ float: left;
 .blackBox td.iconURL {
     max-width: 415px;
     word-wrap: break-word;
+}
+.blackBox td.iconColor {
+    
 }
 .blackBox .field {
     margin: 15px 0 5px;

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 {

app/assets/stylesheets/clean.css

@@ -627,6 +627,14 @@
     background-color: #9150bc;
 }
 
+.github-fork-ribbon-wrapper {
+    display:none;
+}
+
+.homePage .github-fork-ribbon-wrapper {
+    display: block;
+}
+
 /* end home page */
 
 /* infoAndHelp */

app/views/layouts/application.html.erb

@@ -64,7 +64,7 @@
 
 <%= render :partial => 'layouts/lightboxes' %>
 <%= render :partial => 'layouts/templates' %>
-
+<%= render :partial => 'shared/metacodeBgColors' %>
 <script type="text/javascript" charset="utf-8">
     BAROMETER.load('Scqak8nyHdFEkezKMNeQp');
 

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' %>

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>

app/views/shared/_filterBox.html.erb

@@ -33,9 +33,21 @@
       end
     end
 
-    @metacodes.sort! {|x,y| x.name <=> y.name }
+    @metacodes.sort! {|x,y| 
-    @synapses.sort! {|x,y| x.desc <=> y.desc }
+      n1 = x.name || ""
-    @mappers.sort! {|x,y| x.name <=> y.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 + '">'
@@ -43,8 +55,9 @@
         @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 += '<img src="/assets/synapse16.png" alt="synapse icon" /><p>' + synapse.desc
+        @synapselist += '<li data-id="' + d + '">'
+        @synapselist += '<img src="/assets/synapse16.png" alt="synapse icon" /><p>' + d
         @synapselist += '</p></li>'
     end 
     @mappers.each_with_index do |mapper, index| 

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>

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" %>
+  <div class="changeName">
-  <%= form.email_field :name  %></div>
+    <%= 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>

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

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20140815162253) do
+ActiveRecord::Schema.define(:version => 20140930013020) do
 
   create_table "in_metacode_sets", :force => true do |t|
     t.integer  "metacode_id"
@@ -66,6 +66,7 @@ ActiveRecord::Schema.define(:version => 20140815162253) do
     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|

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);
+        });
+
     });
 }
 

test/fixtures/metacodes.yml

@@ -7,6 +7,7 @@
 one: 
   name: Action  
   icon: /assets/icons/action.png
+  color: #bd6c85
 
 two: 
   name: Activity