got rgraph working again

app/assets/javascripts/metamaps/Metamaps.Backbone.js

@@ -26,9 +26,3 @@ Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
     model: Metamaps.Backbone.Mapper,
     url: '/users'
 });
-Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper({
-    id: userid,
-    name: username
-});
-Metamaps.Mappers = new Metamaps.Backbone.MapperCollection([Metamaps.Active.Mapper]);
-Metamaps.Maps = new Metamaps.Backbone.MapsCollection();

app/assets/javascripts/metamaps/Metamaps.GlobalUI.js

@@ -65,7 +65,6 @@ Metamaps.GlobalUI = {
         var self = Metamaps.GlobalUI;
 
         self.Search.init();
-        self.MainMenu.init();
         self.CreateMap.init();
         self.Account.init();
 
@@ -81,6 +80,11 @@ Metamaps.GlobalUI = {
         // hide notices after 10 seconds
         $('.notice.metamaps').delay(10000).fadeOut('fast');
         $('.alert.metamaps').delay(10000).fadeOut('fast');
+        
+        // initialize global backbone models and collections
+        Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
+        Metamaps.Mappers = new Metamaps.Backbone.MapperCollection([Metamaps.Active.Mapper]);
+        Metamaps.Maps = new Metamaps.Backbone.MapsCollection();
     },
     openLightbox: function (which) {
         var self = Metamaps.GlobalUI;
@@ -91,7 +95,18 @@ Metamaps.GlobalUI = {
         self.lightbox = which;
 
         $('#lightbox_overlay').show();
-        $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px');
+        
+        var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
+        // animate the content in from the bottom
+        $('#lightbox_main').animate({
+                'top': '50%',
+                'margin-top': heightOfContent
+        }, 200, 'easeOutCubic');
+        
+        // fade the black overlay in
+        $('#lightbox_screen').animate({
+                    'opacity': '0.42'
+        }, 200);
 
         if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) {
             $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({
@@ -111,7 +126,19 @@ Metamaps.GlobalUI = {
         var self = Metamaps.GlobalUI;
         
         if (event) event.preventDefault();
+        
+        // animate the lightbox content offscreen
+        $('#lightbox_main').animate({
+                'top': '100%',
+                'margin-top': '0'
+        }, 200, 'easeInCubic');
+        
+        // fade the black overlay out
+        $('#lightbox_screen').animate({
+                    'opacity': '0.0'
+        }, 200, function () {
             $('#lightbox_overlay').hide();   
+        });
         
         if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
         if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
@@ -135,72 +162,6 @@ Metamaps.GlobalUI = {
     }
 };
 
-Metamaps.GlobalUI.MainMenu = {
-    isOpen: false,
-    timeOut: null,
-    changing: false,
-    init: function () {
-        var self = Metamaps.GlobalUI.MainMenu;
-
-        $(".logo").hover(self.open, self.close);
-
-        // when on touch screen, make touching on the logo do what hovering does on desktop
-        $("#mainTitle a").bind('touchend', function (evt) {
-            if (!self.isOpen) {
-                self.openMenu();
-                evt.preventDefault();
-                evt.stopPropagation();
-            }
-        });
-    },
-    open: function () {
-        var self = Metamaps.GlobalUI.MainMenu;
-
-        clearTimeout(self.timeOut);
-        if (!self.isOpen && !self.changing) {
-            self.changing = true;
-
-            // toggle the upper right rounded corner off
-            $('.footer').css('border-top-right-radius', '0');
-
-            // move the hamburger menu icon a little bit further out
-            $('.logo').animate({
-                'background-position-x': '-7px'
-            }, 200);
-
-            // fade the main part of the menu in
-            $('.footer .menu').fadeIn(200, function () {
-                self.changing = false;
-                self.isOpen = true;
-            });
-        }
-    },
-    close: function () {
-        var self = Metamaps.GlobalUI.MainMenu;
-
-        self.timeOut = setTimeout(function () {
-            if (!self.changing) {
-                self.changing = true;
-
-                // set back to having a rounder upper right corner
-                $('.footer').css('border-top-right-radius', '5px');
-
-                // move the hamburger menu icon further to the left, more hidden again
-                $('.logo').animate({
-                    'background-position-x': '-10px'
-                }, 200);
-
-                // fade out the main menu
-                $('.footer .menu').fadeOut(200, function () {
-                    self.changing = false;
-                    self.isOpen = false;
-                });
-            }
-        }, 500);
-    }
-};
-
-
 Metamaps.GlobalUI.CreateMap = {
     newMap: null,
     emptyMapForm: "",
@@ -431,9 +392,8 @@ Metamaps.GlobalUI.Search = {
     startTypeahead: function () {
         var self = Metamaps.GlobalUI.Search;
 
-        // TODO stop using userid
+        var mapheader = Metamaps.Active.Mapper ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
-        var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
+        var topicheader = Metamaps.Active.Mapper ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
-        var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
         var mapperheader = '<h3 class="search-header">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div>';
 
         var topics = {
@@ -447,8 +407,8 @@ Metamaps.GlobalUI.Search = {
                 url: '/search/topics?term=%QUERY',
                 replace: function () {
                     var q = '/search/topics?term=' + $('.sidebarSearchField').val();
-                    if ($("#limitTopicsToMe").is(':checked')) {
+                    if (Metamaps.Active.Mapper && $("#limitTopicsToMe").is(':checked')) {
-                        q += "&user=" + userid.toString();
+                        q += "&user=" + Metamaps.Active.Mapper.id.toString();
                     }
                     return q;
                 },
@@ -479,8 +439,8 @@ Metamaps.GlobalUI.Search = {
                 url: '/search/maps?term=%QUERY',
                 replace: function () {
                     var q = '/search/maps?term=' + $('.sidebarSearchField').val();
-                    if ($("#limitMapsToMe").is(':checked')) {
+                    if (Metamaps.Active.Mapper && $("#limitMapsToMe").is(':checked')) {
-                        q += "&user=" + userid.toString();
+                        q += "&user=" + Metamaps.Active.Mapper.id.toString();
                     }
                     return q;
                 },

app/assets/javascripts/metamaps/Metamaps.JIT.js

@@ -15,7 +15,7 @@ Metamaps.JIT = {
     prepareVizData: function () {
         var self = Metamaps.JIT;
         var topic;
-
+        var mapping;
         var node;
         var nodes = {};
         var existingEdge;
@@ -32,19 +32,19 @@ Metamaps.JIT = {
             existingEdge = _.findWhere(edges, {
                 nodeFrom: edge.nodeFrom,
                 nodeTo: edge.nodeTo
-            });
+            }) ||
-            // also try the opposite
+                _.findWhere(edges, {
-            if (!existingEdge) {
-                existingEdge = _.findWhere(edges, {
                     nodeFrom: edge.nodeTo,
                     nodeTo: edge.nodeFrom
                 });
-            }
 
             if (existingEdge) {
                 // for when you're dealing with multiple relationships between the same two topics
-                existingEdge['$mappingIDs'].push(m.isNew() ? m.cid : m.id);
+                if (Metamaps.Active.Map) {
-                existingEdge['$synapseIDs'].push(m.get('synapse_id'));
+                    mapping = s.getMapping();
+                    existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                }
+                existingEdge['$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);
@@ -358,7 +358,7 @@ Metamaps.JIT = {
                     var pos = node.pos.getc(true),
                         dim = node.getData('dim'),
                         topic = node.getData('topic'),
-                        cat = topic ? topic.getMetacode().get('name') : false,
+                        metacode = topic ? topic.getMetacode() : false,
                         ctx = canvas.getCtx();
 
                     // if the topic is selected draw a circle around it
@@ -370,13 +370,17 @@ Metamaps.JIT = {
                         ctx.stroke();
                     }
 
-                    if (!cat || !imgArray[cat].complete || (typeof imgArray[cat].naturalWidth !== "undefined" && imgArray[cat].naturalWidth === 0)) {
+                    if (!metacode ||
+                        !metacode.get('image') ||
+                        !metacode.get('image').complete ||
+                        (typeof metacode.get('image').naturalWidth !== "undefined" &&
+                            metacode.get('image').naturalWidth === 0)) {
                         ctx.beginPath();
                         ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false);
                         ctx.fillStyle = '#B6B2FD';
                         ctx.fill();
                     } else {
-                        ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2);
+                        ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2);
                     }
                 },
                 'contains': function (node, pos) {
@@ -415,27 +419,6 @@ Metamaps.JIT = {
                     return $jit.Graph.Plot.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
                 }
             }
-        },
-        embed: {
-            graphSettings: {
-
-            },
-            nodeSettings: {
-
-            },
-            edgeSettings: {
-                'customEdge': {
-                    'render': function (adj, canvas) {
-                        Metamaps.JIT.edgeRenderEmbed(adj, canvas)
-                    },
-                    'contains': function (adj, pos) {
-                        var from = adj.nodeFrom.pos.getc(true),
-                            to = adj.nodeTo.pos.getc(true);
-
-                        return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
-                    }
-                }
-            }
         }
     }, // ForceDirected
     ForceDirected3D: {
@@ -525,17 +508,6 @@ Metamaps.JIT = {
         },
         edgeSettings: {
 
-        },
-        embed: {
-            graphSettings: {
-
-            },
-            nodeSettings: {
-
-            },
-            edgeSettings: {
-
-            }
         }
     }, // ForceDirected3D
     RGraph: {
@@ -546,205 +518,18 @@ Metamaps.JIT = {
                 Metamaps.Visualize.mGraph.busy = false;
             }
         },
-        graphSettings: {
+        // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
-            //id of the visualization container
-            injectInto: 'infovis',
-            //Enable zooming and panning
-            //by scrolling and DnD
-            Navigation: {
-                enable: true,
-                type: 'HTML',
-                //Enable panning events only if we're dragging the empty
-                //canvas (and not a node).
-                panning: 'avoid nodes',
-                zooming: 28 //zoom speed. higher is more sensible
-            },
         background: {
-                type: 'Metamaps',
+                //type: 'Metamaps',
+                levelDistance: 200,
+                numberOfCircles: 4,
                 CanvasStyles: {
                     strokeStyle: '#333',
                     lineWidth: 1.5
                 }
         },
-            //NodeStyles: {  
+        levelDistance: 200
-            //  enable: true,  
-            //  type: 'Native',  
-            //  stylesHover: {  
-            //    dim: 30  
-            //  },  
-            //  duration: 300  
-            //},
-            // Change node and edge styles such as
-            // color and width.
-            // These properties are also set per node
-            // with dollar prefixed data-properties in the
-            // JSON structure.
-            Node: {
-                overridable: true,
-                color: '#2D6A5D',
-                type: 'customNode',
-                dim: 25
     },
-            Edge: {
-                overridable: true,
-                color: '#222222',
-                type: 'customEdge',
-                lineWidth: 2,
-                alpha: 0.4
-            },
-            //Native canvas text styling
-            Label: {
-                type: 'HTML', //Native or HTML
-                size: 20,
-                //style: 'bold'
-            },
-            //Add Tips
-            Tips: {
-                enable: false,
-                onShow: function (tip, node) {}
-            },
-            // Add node events
-            Events: {
-                enable: true,
-                enableForEdges: true,
-                type: 'HTML',
-                onMouseMove: function (node, eventInfo, e) {
-                    Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
-                },
-                //Update node positions when dragged
-                onDragMove: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
-                },
-                onDragEnd: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
-                },
-                onDragCancel: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
-                },
-                //Implement the same handler for touchscreens
-                onTouchStart: function (node, eventInfo, e) {
-                    //$jit.util.event.stop(e); //stop default touchmove event
-                    //Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo);
-                    Metamaps.Visualize.mGraph.events.touched = true;
-                    Metamaps.Touch.touchPos = eventInfo.getPos();
-                    var canvas = Metamaps.Visualize.mGraph.canvas,
-                        ox = canvas.translateOffsetX;
-                    oy = canvas.translateOffsetY,
-                    sx = canvas.scaleOffsetX,
-                    sy = canvas.scaleOffsetY;
-                    Metamaps.Touch.touchPos.x *= sx;
-                    Metamaps.Touch.touchPos.y *= sy;
-                    Metamaps.Touch.touchPos.x += ox;
-                    Metamaps.Touch.touchPos.y += oy;
-
-                    touchDragNode = node;
-                },
-                //Implement the same handler for touchscreens
-                onTouchMove: function (node, eventInfo, e) {
-                    if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e);
-                    else {
-                        Metamaps.JIT.touchPanZoomHandler(eventInfo, e);
-                        Metamaps.Visualize.mGraph.labels.hideLabel(Metamaps.Visualize.mGraph.graph.getNode(Metamaps.TopicCard.openTopicCard));
-                    }
-                },
-                //Implement the same handler for touchscreens
-                onTouchEnd: function (node, eventInfo, e) {
-
-                },
-                //Implement the same handler for touchscreens
-                onTouchCancel: function (node, eventInfo, e) {
-
-                },
-                //Add also a click handler to nodes
-                onClick: function (node, eventInfo, e) {
-
-                    if (Metamaps.Mouse.boxStartCoordinates) {
-                        Metamaps.Visualize.mGraph.busy = false;
-                        Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-                        Metamaps.JIT.selectNodesWithBox();
-                        return;
-                    }
-
-                    if (e.target.id != "infovis-canvas") return false;
-
-                    //clicking on a edge, node, or clicking on blank part of canvas?
-                    if (node.nodeFrom) {
-                        Metamaps.JIT.selectEdgeOnClickHandler(node, e);
-                    } else if (node && !node.nodeFrom) {
-                        Metamaps.JIT.selectNodeOnClickHandler(node, e);
-                    } else {
-                        Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
-                    } //if
-                }
-            },
-            //Number of iterations for the FD algorithm
-            iterations: 200,
-            //Edge length
-            levelDistance: 200,
-        },
-        nodeSettings: {
-            'customNode': {
-                'render': function (node, canvas) {
-                    var pos = node.pos.getc(true),
-                        dim = node.getData('dim'),
-                        cat = node.getData('metacode'),
-                        ctx = canvas.getCtx();
-                    // if the topic is on the Canvas draw a white circle around it
-                    if (node.selected) {
-                        ctx.beginPath();
-                        ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
-                        ctx.strokeStyle = Metamaps.Settings.colors.topics.selected;
-                        ctx.lineWidth = 2;
-                        ctx.stroke();
-                    }
-                    try {
-                        ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2);
-                    } catch (e) {
-                        alert("You've got an topic causing an issue! It's ->this-> one: " + cat);
-                    }
-                },
-                'contains': function (node, pos) {
-                    var npos = node.pos.getc(true),
-                        dim = node.getData('dim');
-                    return this.nodeHelper.circle.contains(npos, pos, dim);
-                }
-            }
-        },
-        edgeSettings: {
-            'customEdge': {
-                'render': function (adj, canvas) {
-                    Metamaps.JIT.edgeRender(adj, canvas)
-                },
-                'contains': function (adj, pos) {
-                    var from = adj.nodeFrom.pos.getc(true),
-                        to = adj.nodeTo.pos.getc(true);
-
-                    return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
-                }
-            }
-        },
-        embed: {
-            graphSettings: {
-
-            },
-            nodeSettings: {
-
-            },
-            edgeSettings: {
-                'customEdge': {
-                    'render': function (adj, canvas) {
-                        Metamaps.JIT.edgeRenderEmbed(adj, canvas)
-                    },
-                    'contains': function (adj, pos) {
-                        var from = adj.nodeFrom.pos.getc(true),
-                            to = adj.nodeTo.pos.getc(true);
-
-                        return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
-                    }
-                }
-            }
-        }
-    }, // RGraph
     onMouseEnter: function (edge) {
 
         $('canvas').css('cursor', 'pointer');
@@ -928,7 +713,7 @@ Metamaps.JIT = {
                 Metamaps.Visualize.mGraph.plot();
             }
             // if it's a right click or holding down alt, start synapse creation  ->third option is for firefox
-            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && userid != null) {
+            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && Metamaps.Active.Mapper) {
                 if (tempInit == false) {
                     tempNode = node;
                     tempInit = true;
@@ -1212,13 +997,13 @@ Metamaps.JIT = {
         // add the proper options to the menu
         var menustring = '<ul>';
 
-        if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
+        if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete">Delete</li>';
-        if (Metamaps.Active.Map.id && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove">Remove from map</li>';
         menustring += '<li class="rc-hide">Hide until refresh</li>';
 
         if (!Metamaps.Active.Map) menustring += '<li class="rc-center">Center this topic</li>';
         menustring += '<li class="rc-popout">Open in new tab</li>';
-        if (userid) {
+        if (Metamaps.Active.Mapper) {
             var options = '<ul><li class="changeP toCommons">commons</li> \
                          <li class="changeP toPublic">public</li> \
                          <li class="changeP toPrivate">private</li> \

app/assets/javascripts/metamaps/metamaps.js

@@ -78,10 +78,16 @@ Metamaps.Mappings = {}; // will be initialized in Metamaps.Backbone.init as a Ma
 Metamaps.Backbone.init = function () {
     var self = Metamaps.Backbone;
 
-    self.Metacode = Backbone.Model.extend({});
+    self.Metacode = Backbone.Model.extend({
+        initialize: function () {
+            var image = new Image();
+            image.src = this.get('icon');
+            this.set('image',image);
+        }
+    });
     self.MetacodeCollection = Backbone.Collection.extend({
         model: this.Metacode,
-        url: '/metacodes'
+        url: '/metacodes',
     });
 
     self.Topic = Backbone.Model.extend({
@@ -118,6 +124,9 @@ Metamaps.Backbone.init = function () {
             return Metamaps.Metacodes.get(this.get('metacode_id'));
         },
         getMapping: function () {
+            
+            if (!Metamaps.Active.Map) return false;
+            
             return Metamaps.Mappings.findWhere({
                 map_id: Metamaps.Active.Map.id,
                 topic_id: this.isNew() ? this.cid : this.id
@@ -131,24 +140,34 @@ Metamaps.Backbone.init = function () {
             }
         },
         createNode: function () {
-            var mapping = this.getMapping();
+            var mapping;
             var node = {
                 adjacencies: [],
-                data: {
-                    $mapping: null,
-                    $mappingID: mapping ? mapping.id : null
-                },
                 id: this.isNew() ? this.cid : this.id,
                 name: this.get('name')
             };
+            
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                node.data = {
+                    $mapping: null,
+                    $mappingID: mapping.id
+                };
+            }
+            
             return node;
         },
         updateNode: function () {
-            var mapping = this.getMapping();
+            var mapping;
             var node = this.get('node');
             node.setData('topic', this);
-            node.setData('mapping', mapping);
             node.id = this.isNew() ? this.cid : this.id;
+            
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                node.setData('mapping', mapping);
+            }
+            
             return node;
         },
     });
@@ -173,7 +192,7 @@ Metamaps.Backbone.init = function () {
             if (this.isNew()) {
                 this.set({
                     "user_id": Metamaps.Active.Mapper.id,
-                    "permission": Metamaps.Active.Map.get('permission'),
+                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
                     "category": "from-to"
                 });
             }
@@ -202,6 +221,9 @@ Metamaps.Backbone.init = function () {
                 ];
         },
         getMapping: function () {
+            
+            if (!Metamaps.Active.Map) return false;
+            
             return Metamaps.Mappings.findWhere({
                 map_id: Metamaps.Active.Map.id,
                 synapse_id: this.isNew() ? this.cid : this.id
@@ -215,27 +237,37 @@ Metamaps.Backbone.init = function () {
             }
         },
         createEdge: function () {
-            var mapping = this.getMapping();
+            var mapping, mappingID;
-            var mappingID = mapping.isNew() ? mapping.cid : mapping.id;
             var synapseID = this.isNew() ? this.cid : this.id;
 
             var edge = {
                 nodeFrom: this.get('node1_id'),
                 nodeTo: this.get('node2_id'),
                 data: {
-                    $mappings: [],
-                    $mappingIDs: [mappingID],
                     $synapses: [],
                     $synapseIDs: [synapseID],
                 }
             };
+            
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                mappingID = mapping.isNew() ? mapping.cid : mapping.id;
+                edge.data.$mappings = [];
+                edge.data.$mappingIDs = [mappingID];
+            }
+            
             return edge;
         },
         updateEdge: function () {
-            var mapping = this.getMapping();
+            var mapping;
             var edge = this.get('edge');
-            edge.getData('mappings').push(mapping);
             edge.getData('synapses').push(this);
+            
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                edge.getData('mappings').push(mapping);
+            }
+            
             return edge;
         },
     });
@@ -288,8 +320,12 @@ Metamaps.Backbone.init = function () {
 
     Metamaps.Mappings = new self.MappingCollection(Metamaps.Mappings);
 
+    if (Metamaps.Active.Map) {
         Metamaps.Active.Map = new self.Map(Metamaps.Active.Map);
         Metamaps.Maps.add(Metamaps.Active.Map);
+    }
+    
+    if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic);
 }; // end Metamaps.Backbone.init
 
 
@@ -370,8 +406,10 @@ Metamaps.Create = {
         $('#metacodeImg, #metacodeImgTitle').empty();
         $('#metacodeImg').removeData('cloudcarousel');
         var newMetacodes = "";
+        var metacode;
         for (var i = 0; i < codesToSwitchTo.length; i++) {
-            newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + imgArray[codesToSwitchTo[i]].src + '" title="' + codesToSwitchTo[i] + '" alt="' + codesToSwitchTo[i] + '"/>';
+            metacode = Metamaps.Metacodes.findWhere({ name: codesToSwitchTo[i] });
+            newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>';
         };
         $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
             titleBox: $('#metacodeImgTitle'),
@@ -383,7 +421,7 @@ Metamaps.Create = {
             bringToFront: true
         });
 
-        $('#lightbox_overlay').hide();
+        Metamaps.GlobalUI.closeLightbox();
         $('#topic_name').focus();
 
         var mdata = {
@@ -656,7 +694,7 @@ Metamaps.TopicCard = {
                         });
                         $('.CardOnGraph').find('.metacodeTitle').text(metacodeName)
                             .attr('class', 'metacodeTitle mbg' + metacodeName.replace(/\s/g, ''));
-                        $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacodeName].src + ')');
+                        $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
                         topic.save({
                             metacode_id: metacode.id
                         });
@@ -1088,6 +1126,19 @@ Metamaps.Visualize = {
 
         if (self.type == "RGraph") {
             self.mGraph.graph.eachNode(function (n) {
+                topic = Metamaps.Topics.get(n.id);
+                topic.set('node', n);
+                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();
+                    }
+                });
+                
                 var pos = n.getPos();
                 pos.setc(-200, -200);
             });
@@ -1102,7 +1153,7 @@ Metamaps.Visualize = {
                 mapping = topic.getMapping();
 
                 n.eachAdjacency(function (edge) {
-                    l = edge.getData('mappingIDs').length;
+                    l = edge.getData('synapseIDs').length;
                     for (i = 0; i < l; i++) {
                         synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
                         synapse.set('edge', edge);
@@ -1125,14 +1176,17 @@ Metamaps.Visualize = {
      * @param vizData a json structure containing the data to be rendered.
      */
     __buildGraph: function (vizData) {
-        var self = Metamaps.Visualize;
+        var self = Metamaps.Visualize
+            RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
 
-        // normally this will be true, and will enter into this first scenario
-        if (!Metamaps.Settings.embed) {
         if (self.type == "RGraph") {
-                $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.RGraph.nodeSettings);
+            $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
-                $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.RGraph.edgeSettings);
+            $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
-                self.mGraph = new $jit.RGraph(Metamaps.JIT.RGraph.graphSettings);
+            
+            RGraphSettings.background = Metamaps.JIT.RGraph.background;
+            RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance;
+            
+            self.mGraph = new $jit.RGraph(RGraphSettings);
         } else if (self.type == "ForceDirected") {
             $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
             $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
@@ -1142,21 +1196,6 @@ Metamaps.Visualize = {
             self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings);
             self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
         }
-        } else { // in the case where these visualizations are to be embedded in other sites  TODO
-            if (self.type == "RGraph") {
-                $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.RGraph.embed.nodeSettings);
-                $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.RGraph.embed.edgeSettings);
-                self.mGraph = new $jit.RGraph(Metamaps.JIT.RGraph.embed.graphSettings);
-            } else if (self.type == "ForceDirected") {
-                $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.embed.nodeSettings);
-                $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.embed.edgeSettings);
-                self.mGraph = new $jit.ForceDirected(Metamaps.JIT.ForceDirected.embed.graphSettings);
-            } else if (self.type == "ForceDirected3D") {
-                // init ForceDirected3D
-                self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.embed.graphSettings);
-                self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
-            }
-        }
 
         // load JSON data, if it's not empty
         if (!self.loadLater) {
@@ -1167,8 +1206,7 @@ Metamaps.Visualize = {
             if (self.type == "RGraph") {
                 self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
             } else if (self.type == "ForceDirected" && self.savedLayout) {
-                return Metamaps.Organize.loadSavedLayout();
+                Metamaps.Organize.loadSavedLayout();
-                //self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
             } else if (self.type == "ForceDirected3D" || !self.savedLayout) {
                 self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout);
             }
@@ -1228,7 +1266,6 @@ Metamaps.Util = {
     }
 }; // end Metamaps.Util
 
-
 /*
  *
  *   REALTIME
@@ -1254,7 +1291,7 @@ Metamaps.Realtime = {
 
         $(".sidebarCollaborate").hover(self.open, self.close);
 
-        var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+        var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
 
         if (mapperm) {
             self.socket = io.connect('http://localhost:5001');
@@ -1307,15 +1344,16 @@ Metamaps.Realtime = {
     setupSocket: function () {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
+        var myId = Metamaps.Active.Mapper.id;
         
         socket.emit('newMapperNotify', {
-            userid: Metamaps.Active.Mapper.id,
+            userid: myId,
             username: Metamaps.Active.Mapper.get("name"),
             mapid: Metamaps.Active.Map.id
         });
 
         // if you're the 'new guy' update your list with who's already online
-        socket.on(userid + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
 
         // receive word that there's a new mapper on the map
         socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap);
@@ -1861,7 +1899,7 @@ Metamaps.Filter = {
         });
         $('.sidebarFilterBox').hide().css({
             position: 'absolute',
-            top: '35px',
+            top: '45px',
             right: '-36px'
         });
 

app/assets/stylesheets/application.css

@@ -193,9 +193,9 @@ input[type="submit"]:hover {
  * Layout stuffs
  */
 
-#barometer_tab {
+/*#barometer_tab {
     display: none;
-}
+}*/
 #saveMapLayout {
     display: none;
 }
@@ -508,7 +508,6 @@ label[for="user_remember_me"] {
     border-right: none;
     border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
-    background: #0F1519;
 }
 .wrapper div.index .openCheatsheet {
     position: absolute;
@@ -559,8 +558,8 @@ label[for="user_remember_me"] {
 
 .sidebarAccount {
     position: absolute;
-    top: 5px;
+    top: 10px;
-    right: 0;
+    right: 10px;
     z-index: 200;
     width: 35px;
     height: 35px;
@@ -573,17 +572,15 @@ label[for="user_remember_me"] {
     background-size: 24px 24px;
     cursor: pointer;
 }
-
 .sidebarAccountIcon img {
     border-radius: 17px;
 }
-
 .sidebarAccountBox {
     position: absolute;
     display: none;
     height: auto;
     background: #000;
-    top: 35px;
+    top: 45px;
     right: 0;
     padding: 10px;
     border: 1px solid black;
@@ -687,8 +684,8 @@ li.accountInvite span {
 
 .sidebarFork {
     position: absolute;
-    top: 5px;
+    top: 10px;
-    right: 71px;
+    right: 120px;
     z-index: 200;
     width: 35px;
     height: 35px;
@@ -701,10 +698,7 @@ li.accountInvite span {
     background-size: 28px 28px;
     cursor: pointer;
 }
-.sidebarForkIcon:hover {
+.sidebarForkIcon:hover {} .sidebarForkBox {
-    
-}
-.sidebarForkBox {
     position: absolute;
     display: none;
     height: auto;
@@ -754,10 +748,7 @@ li.accountInvite span {
     background-size: 22px 22px;
     cursor: pointer;
 }
-.sidebarSaveIcon:hover {
+.sidebarSaveIcon:hover {} .sidebarSaveBox {
-    
-}
-.sidebarSaveBox {
     position: absolute;
     display: none;
     height: auto;
@@ -791,8 +782,8 @@ li.accountInvite span {
 
 .sidebarFilter {
     position: absolute;
-    top: 5px;
+    top: 10px;
-    right: 35px;
+    right: 160px;
     z-index: 200;
     width: 35px;
     height: 35px;
@@ -808,9 +799,7 @@ li.accountInvite span {
     background-size: 28px 28px;
     cursor: pointer;
 }
-.sidebarFilterIcon:hover {
+.sidebarFilterIcon:hover {}
-    
-}
 /* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then 
    we hide the element and position it correctly */
 
@@ -881,8 +870,8 @@ h3.filterByMetacode {
 
 .sidebarCollaborate {
     position: absolute;
-    top: 5px;
+    top: 10px;
-    right: 143px;
+    right: 200px;
     z-index: 200;
     width: 35px;
     height: 35px;
@@ -906,7 +895,7 @@ h3.filterByMetacode {
     height: auto;
     width: auto;
     background: #000;
-    top: 35px;
+    top: 45px;
     right: 0;
     padding: 10px;
     border: 1px solid black;
@@ -962,16 +951,17 @@ h3.realtimeBoxTitle {
 
 .sidebarSearch {
     position: absolute;
-    top: 5px;
+    top: 10px;
-    left: 0;
+    left: 10px;
     height: 35px;
     z-index: 200;
 }
 .sidebarSearchIcon {
     float: left;
-    width: 35px;
+    width: 80px;
+    border-radius: 2px;
     height: 35px;
-    background: #0F1519 url('search_icon_32x32.png') no-repeat center center;
+    background: #00BCD4 url('search_icon_32x32.png') no-repeat center center;
     background-size: 25px 25px;
     cursor: pointer;
 }
@@ -1691,9 +1681,9 @@ div.mapInfoStat {
     width: 100%;
     position: absolute;
     background-color: #000;
-    opacity: 0.42;
+    opacity: 0.0;
-    filter: alpha(opacity=42);
+    filter: alpha(opacity=0);
-    -moz-opacity: 0.42;
+    -moz-opacity: 0.0;
 }
 #lightbox_overlay #lightbox_main #lightbox_header {
     padding: 6px 5px 1px 0;
@@ -2032,6 +2022,7 @@ div.mapInfoStat {
     box-shadow: none;
 }
 /* Cheatsheet */
+
 #cheatSheet {
     width: 100%;
     height: 350px;
@@ -2040,7 +2031,6 @@ div.mapInfoStat {
     line-height: 21px;
     border: none;
 }
-
 #cheatSheet .sectionTitle {
     font-family: Lato, Arial, sans-serif;
     font-weight: bold;
@@ -2246,41 +2236,32 @@ div.mapInfoStat {
     height: 100%;
     overflow: hidden;
 }
+
+
+.addMap {
+    display: block;
+    position: fixed;
+    right: 55px;
+    top: 10px;
+    width: 55px;
+    height: 35px;
+    background: #00BCD4 url('MMCCicon_add_map.png') no-repeat 3px -4px;
+    background-size: 40px 40px;
+    cursor: pointer;
+    z-index: 2;
+    border-radius: 2px;
+}
 /* --- styling the logo button ---*/
 
 .footer {
     display: block;
     position: fixed;
-    bottom: 5px;
+    bottom: 10px;
-    height: 35px;
+    left:50%;
+    margin-left:-55px;
     z-index: 15000;
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-    background: #0F1519;
 }
-.addMap {
+#logo a {
-    position: absolute;
-    right: -49px;
-    top: 0px;
-    width: 44px;
-    height: 35px;
-    background: url('MMCCicon_add_map.png') no-repeat 3px -4px;
-    background-size: 40px 40px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-.addMap:hover {} .logo {
-    z-index: 12;
-    display: block;
-    width: 136px;
-    background: url(menu_icon_32.png) no-repeat -10px 8px;
-    padding: 5px 0px 1px 15px;
-    background-size: 22px 20px;
-}
-#mainTitle {
-    padding: 0 5px;
-}
-#mainTitle a {
     color: #FFF;
     font-family: "vinyl", sans-serif;
     font-style: italic;
@@ -2289,52 +2270,6 @@ div.mapInfoStat {
     font-size: 30px;
     line-height: 30px;
 }
-.footer .menu {
-    display: none;
-    position: absolute;
-    border: none;
-    bottom: 35px;
-    left: -1px;
-    height: 123px;
-    z-index: 12;
-    width: 122px;
-    color: white;
-    white-space: nowrap;
-    text-align: center;
-    font-size: 16px;
-    overflow: hidden;
-    padding: 0 0 0 30px;
-    margin: 0;
-    background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
-}
-.footer ul li {
-    margin: 0;
-    clear: both;
-    float: none;
-    list-style-type: none;
-    display: block;
-    padding: 0;
-    text-align: center;
-    font-family: 'vinyl';
-    font-style: italic;
-    height: 30px;
-    line-height: 34px;
-    font-size: 17px;
-    cursor: pointer;
-}
-.footer ul li:hover {} li.meta a,
-li.tutorial a,
-li.exploreMaps a {
-    display: block;
-}
-li.meta,
-li.tutorial,
-li.exploreMaps {
-    border-top: 1px solid white;
-}
-.footer ul li a {
-    color: #FFF;
-}
 .home_bg {
     display: block;
     height: 100%;

app/controllers/maps_controller.rb

@@ -2,7 +2,7 @@ class MapsController < ApplicationController
 
     before_filter :require_user, only: [:create, :update, :destroy]
 
-  respond_to :html, :js, :json
+    respond_to :html, :json
 
     autocomplete :map, :name, :full => true, :extra_data => [:user_id]
 
@@ -49,7 +49,9 @@ class MapsController < ApplicationController
         #read this next line as 'delete a map if its private and you're either 1. logged out or 2. logged in but not the map creator
         @maps.delete_if {|m| m.permission == "private" && (!authenticated? || (authenticated? && @current.id != m.user_id)) }
 
-	  respond_with(@maps, @request, @user)
+        respond_to do |format|
+            format.html { respond_with(@maps, @request, @user) }
+        end
     end
 
     # GET maps/:id

app/controllers/topics_controller.rb

@@ -13,8 +13,10 @@ class TopicsController < ApplicationController
             # !connor term here needs to have .downcase
             @topics = Topic.where('LOWER("name") like ?', term.downcase + '%').order('"name"')
 
-      #read this next line as 'delete a topic if its private and you're either 1. logged out or 2. logged in but not the topic creator
+            #read this next line as 'delete a topic if its private and you're either 
-      @topics.delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)) }
+            #1. logged out or 2. logged in but not the topic creator
+            @topics.delete_if {|t| t.permission == "private" && 
+                (!authenticated? || (authenticated? && @current.id != t.user_id)) }
         else
             @topics = []
         end
@@ -26,16 +28,17 @@ class TopicsController < ApplicationController
         @current = current_user
         @topic = Topic.find(params[:id]).authorize_to_show(@current)
 
-    if @topic
+        if not @topic
-	  @relatives = @topic.network_as_json(@current).html_safe
-    else
             redirect_to root_url and return
         end
 
+        @alltopics = [@topic] + @topic.relatives # should limit to topics visible to user
+        @allsynapses = @topic.synapses # should also be limited
+        @allmetacodes = Metacode.all
+
         respond_to do |format|
-      format.html { respond_with(@topic, @user) }
+            format.html { respond_with(@allmetacodes, @allsynapses, @alltopics, @topic, @user) }
-      #format.json { respond_with(@relatives) }
+            format.json { render json: @topic }
-      format.json { render :json => @topic }
         end
     end
 

app/views/layouts/application.html.erb

@@ -9,27 +9,10 @@
     <html>
     <head>
     <title><%=h yield(:title) %></title>
-  <% if authenticated? %>
-    <script type="text/javascript">
-      var userid = <%= user.id %>;
-      var username = "<%= user.name %>";
-    </script>
-  <% else %>
-    <script type="text/javascript">
-      var userid = null;
-      var username = null;
-    </script>  
-  <% end %>
-  <script>
-    var imgArray = new Object();
-    
-    <% Metacode.all.each do |m| %>
-      imgArray['<%= m.name %>'] = new Image(); imgArray['<%= m.name %>'].src = '<%= m.icon %>';
-    <% end %>
-  </script>
 <%= stylesheet_link_tag    "application", :media => "all" %>
 <%= javascript_include_tag "application" %>
-  <% if (controller_name == "maps" || controller_name == "topics") && action_name == "show" %>
+<% if (controller_name == "maps" && action_name == "show" || action_name == "embed") || 
+    (controller_name == "topics" && action_name == "show") %>
 <%= javascript_include_tag "compileMapPages" %>
 <% end %>
 <script type="text/javascript" src="//use.typekit.net/tki2nyo.js"></script>
@@ -51,12 +34,13 @@
     <%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
 
         <div class="wrapper <%= controller_name == "main" && action_name == "home" ? "homePage" : "" %>" id="wrapper">
+
             <div class="sidebarSearch">
                 <div class="sidebarSearchIcon"></div>
                 <input type="text" class="sidebarSearchField"></input>
                 <div class="clearfloat"></div>
-        <%= render :partial => 'layouts/templates' %>
             </div>
+
             <div class="sidebarAccount">
                 <div class="sidebarAccountIcon">
                     <% if user && user.image %><%= image_tag user.image.url(:thumb), :size => "35x35" %><% end %>  
@@ -65,34 +49,42 @@
                     <%= render :partial => 'layouts/account' %>
                 </div>
             </div>
+
+            <% if authenticated? %>
+                <div class="addMap openLightbox" data-open="newmap"></div>
+            <% end %>
+
             <%= yield %>
         </div>
 
         <div class="footer">
-      <div class="logo">
+            <div id="logo"><%= link_to "metamaps", root_url %></div>
-          <ul class="menu">
-                <li class="beta" onclick="BAROMETER.show();">
-                    FEEDBACK!
-                </li>
-                <li class="meta openLightbox" data-open="about">ABOUT</li>
-                <li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li>
-                <li class="exploreMaps"><%= link_to "EXPLORE MAPS", featuredmaps_url %></li>
-          </ul>
-          <div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
-      </div>
-      <% if authenticated? %>
-        <div class="addMap openLightbox" data-open="newmap"></div>
-      <% end %>
         </div>
 
     <% end %>
 
+<%= render :partial => 'layouts/lightboxes' %>
+<%= render :partial => 'layouts/templates' %>
+
 <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>
+<script src='http://getbarometer.s3.amazonaws.com/assets/barometer/javascripts/barometer.js' 
+        type='text/javascript'></script>
 <script type="text/javascript" charset="utf-8">
     BAROMETER.load('Scqak8nyHdFEkezKMNeQp');
+
+    <% if authenticated? %>
+        Metamaps.Active.Mapper = <%= user.to_json.html_safe %>
+        <% else %>
+        Metamaps.Active.Mapper = null;
+    <% end %>
+
+        var imgArray = new Object();
+
+    <% Metacode.all.each do |m| %>
+        imgArray['<%= m.name %>'] = new Image(); imgArray['<%= m.name %>'].src = '<%= m.icon %>';
+    <% end %>
 </script>
-  <%= render :partial => 'layouts/lightboxes' %>
+
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
 </body>
 </html>

app/views/main/paq.html.erb

@@ -1,80 +0,0 @@
-<%#
-  # @file
-  # Located at /
-  # Shows 3 most recently created topics, synapses, and maps.
-  #%>
-  
-<% content_for :title, "Possibly Asked Questions | Metamaps" %>   
-  
-<h1 class="index">
-  P(ossibly)AQ
-</h1>  
-  
-<div class="FAQ">
-
-<div class="question">Who may use Metamaps.cc? <div class="switch minimizeAnswer"></div></div>
-<p class="answer">You! We are currently in "beta" mode, meaning that the application is undergoing continuous testing and refinement. During this time, we welcome participants of all ages in this trial process with the understanding that things are evolving, and may hold a few surprises! <a href="http://metamaps.cc/request">Request an invite</a> if you'd like to explore and build with us - feedback is always welcome.</p>
-
-<div class="question">What does it take to learn to Metamap? <div class="switch"></div></div>
-<p class="answer off">While the interface may not seem familiar at first, we've designed it to be both intuitive and empowering after a bit of practice. There are only a handful of basic functions, like adding topics and drawing "synapse" connections, that are needed get you going! A handy cheat sheet is available on the canvas for reference while mapping, and we also have an online manual and video tutorials to grasp more advanced functionality. But overall - the best way to learn is to start mapping, and to connect with other mappers in our online community.</p>
-
-<div class="question">What is the platform being used for currently? <div class="switch"></div></div>
-<p class="answer off">Firstly, check out our <a href="http://metamaps.cc/maps/featured">featured maps</a>! At a basic level, metamaps are great for laying out complex ideas and scenarios. We're seeing maps of creative brainstorms, product design, personal research and learning, project management, and narrative storylines. Some users have been capturing live workshop event documentation, or organizing study groups. We're using it ourselves to organize collaboration and develop strategies for the project. We'd love to see what else you can come up with.</p>
-
-<div class="question">Who made this up? Why? <div class="switch"></div></div>
-<p class="answer off">The Metamaps.cc project was launched as an emergent collaboration between designer Gavin Keech, architect Ishan Shapiro, and web developer Connor Turland over the years 2010-12, with input and inspiration from many other peers and projects. Its design draws from the fields of computational cognition, collective intelligence, and human-computer interaction. We continue to design and develop optimal, novel ways to connect people and ideas through visual information. </p>
-
-<div class="question">How is MM different from other "mind mapping" apps? <div class="switch"></div></div>
-<p class="answer off">First and foremost, metamaps bring people together into a shared knowledge environment. Topics and maps "in the commons" invite collaborative editing and shared insight. As new content and connections are made throughout the system, all users benefit from collective intelligence. Other distinguishing factors on the platform include a focus on real-time collaboration, a flexible visual categorization system via metacode icons, no built-in structural biases, and an intuitive search tool to find content. As the project evolves, we will be building in powerful network and graph analysis techniques which are not currently offered in other mind mapping apps.</p>
-
-<div class="question">Is this an open source project? <div class="switch"></div></div>
-<p class="answer off">One of the core principles of our work is the enhancement of the pool of commons resources such as open source technology and shared knowledge. Our basic application framework is licensed as GPL open source on <a href="https://github.com/Connoropolous/metamaps_gen002" target="_blank">Github</a> for anyone to build on, and this public platform is freely accessible online.</p>
-
-<div class="question">How can I find out more about the project? <div class="switch"></div></div>
-<p class="answer off">Reading here is a great first step. We also suggest browsing our <a href="http://blog.metamaps.cc/" target="_blank">blog</a>, visiting the <a href="https://plus.google.com/u/0/communities/115060009262157699234" target="_blank">Google+ community</a>, or getting in touch by submitting <a onclick="BAROMETER.show();">feedback</a> through the site. We occasionally host online and in person meetups where you can interact with other mappers and see how people are using the platform. The story continues to unfold, and we'd be glad for you to take part.</p>
-
-<div class="question">How can I participate, or support the project? <div class="switch"></div></div>
-<p class="answer off">We welcome contributions in many forms. One of the easiest and best things you can do is to keep on mapping your ideas into the commons on the platform! If you're a developer interested in advancing the technology, contact us and take a look around our Github. Designers and others with professional skills can get in touch about opportunities for freelance collaboration through our innovative Open Value Network organizational structure for business development opportunities. Financial contributions are greatly appreciated in support of our work, and can be made by supporting us on <a href="https://flattr.com/profile/metamaps" target="_blank">Flattr</a> or donating <a href="https://blockchain.info/address/14GontNS1FKoiTQDEB5WBCUDZaFTiyxkzN" target="_blank">BitCoin</a>. All financial contributions are transparently recorded in our value accounting system.</p>
-<p class="answer off">One of the core principles of our work is the enhancement of the pool of commons resources such as open source technology and shared knowledge. Our basic application framework is licensed as GPL open source on <a href="https://github.com/Connoropolous/metamaps_gen002">Github</a> for anyone to build on, and this public platform is freely accessible online.</p>
-
-<div class="question">How can I find out more about the project? <div class="switch"></div></div>
-<p class="answer off">Reading here is a great first step. We also suggest browsing our <a href="http://blog.metamaps.cc/">blog</a>, visiting the <a href="https://plus.google.com/u/0/communities/115060009262157699234">Google+ community</a>, or getting in touch by submitting <a onclick="BAROMETER.show();">feedback</a> through the site. We occasionally host online and in person meetups where you can interact with other mappers and see how people are using the platform. The story continues to unfold, and we'd be glad for you to take part.</p>
-
-<div class="question">How can I participate, or support the project? <div class="switch"></div></div>
-<p class="answer off">We welcome contributions in many forms. One of the easiest and best things you can do is to keep on mapping your ideas into the commons on the platform! If you're a developer interested in advancing the technology, contact us and take a look around our Github. Designers and others with professional skills can get in touch about opportunities for freelance collaboration through our innovative Open Value Network organizational structure for business development opportunities. Financial contributions are greatly appreciated in support of our work, and can be made by supporting us on <a href="https://flattr.com/profile/metamaps">Flattr</a> or donating <a href="https://blockchain.info/address/14GontNS1FKoiTQDEB5WBCUDZaFTiyxkzN">BitCoin</a>. All financial contributions are transparently recorded in our value accounting system.</p>
-
-<div class="question">Are you making money from it? Do you plan to? <div class="switch"></div></div>
-<p class="answer off">The Metamaps.cc project has been bootstrapped through our own pockets, lots of time, and more recently, a couple of small grants which are going into supporting our small team to bring it to the next level. Some of us have used Metamaps.cc as a tool for our own freelance consulting practice, and we are looking at creating hosted and customized instances for different clients as one potential business model. We realize that in order to get the free and open public platform to where we want it to be, we have to be able to support ourselves to continue doing this work. </p>
-
-<div class="question">I'd like to have a new / different feature. Where can I make suggestions and requests? <div class="switch"></div></div>
-<p class="answer off">New features and functions are continually added to the platform as we seek to optimize the experience there for all users. If you find that something is calling out for addition or improvement, send us a note via <a onclick="BAROMETER.show();">feedback</a> form or in the online community. The more detail and context you can provide, the better! </p>
-
-<div class="question">I made a cool map...want to check it out? <div class="switch"></div></div>
-<p class="answer off">Yes! Send us the link via <a onclick="BAROMETER.show();">feedback</a> form or flag us on social media. We're always curious what mappers are able to do with the platform, and we'd love to pass great examples around so that others can see.</p>
-
-<div class="question">Someone else changed my cool map (or favorite topic) without asking me...sad face :( <div class="switch"></div></div>
-<p class="answer off">If your map / topic was set to Commons permission for editing, than any other logged-in user on the site will be able to make changes. We consider this a feature, not a bug, which encourages collaborative maps and an evolving collective knowledge garden. You can easily avoid unwanted changes by setting your permissions to Public, which others may still view and copy to another version if they wish. Courtesy, care, and the benefit of the doubt will go a long ways towards maintaining a happy, healthy, and productive communal atmosphere on Metamaps.cc</p>
-
-</div>
-
-<script>
-
-$(document).ready(function() {
-  $('.FAQ').height( (parseInt($('body').height()) - 40) ).mCustomScrollbar({
-            mouseWheelPixels: 200,
-            advanced: {
-                updateOnContentResize: true
-            }
-        });
-  
-  $('.FAQ .question').click(function() {
-    
-    $(this).find('.switch').toggleClass('minimizeAnswer');
-    $(this).next().toggleClass('off');
-    $('.FAQ').mCustomScrollbar('update');
-  
-  });
-  
-});
-
-</script>

app/views/maps/embed.html.erb

@@ -6,58 +6,78 @@
 
 <% content_for :title, @map.name + " | Metamaps" %>
 
-<div class="headertop">
+<div id="preloaded-images">
-    <% if authenticated? %>
+    <img src="/assets/MMCCicon_realtime_blue.png" />
-      <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
-        <button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>
-      <% end %>
-      <button onclick="var r=confirm('Are you sure you want to permanently delete selected objects?!'); if (r == true) {deleteSelectedEdges();deleteSelectedNodes();}">Permanently Delete Selected</button>
-      <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
-			  <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
-				  <%= form.hidden_field "coordinates", :value => "" %>
-				  <%= form.submit "Save Layout", class: "saveLayout", id: "saveLayout" %>
-			  <% end %>
-		  <% end %>
-    <% end %>
 </div>
-<div class="clearfloat"></div>
 
-<div class="maps onMap white_bg" id="container">
+
+<% if authenticated? %>
+<div class="sidebarFork">
+    <div class="sidebarForkIcon">
+    </div>
+    <div class="sidebarForkBox"></div>
+</div>
+<% if @map.permission == "commons" || @map.user == user %>
+<div class="sidebarCollaborate">
+    <div class="sidebarCollaborateIcon blue"></div>
+    <div class="sidebarCollaborateBox">
+        <h3 class="realtimeBoxTitle">Realtime: </h3>
+        <span class="realtimeOnOff rtOn">ON</span>
+        <div class="clearfloat"></div>
+        <div class="realtimeMapperList">
+            <ul>
+                <li class="rtMapper littleRtOn rtMapperSelf">
+                    <%= user.name %> (me)
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+<% end %>
+<% end %>
+<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
+    <div class="sidebarFilterIcon"></div>
+    <div class="sidebarFilterBox">
+        <h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
+        <div class="clearfloat"></div>
+        <%= render :partial => 'shared/filterbymetacode' %>
+    </div>
+</div>
+
+<div class="index">
+    <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
+    <span class="mapInfo"></span>
+    <div class="clearfloat"></div>
+    <%= render :partial => 'maps/mapinfobox' %>
+</div>
+
+<div class="maps onMap" id="container">
     <div id="center-container">
         <div id="infovis"></div>    
     </div>
+    <div class="showcard" id="showcard"></div>
 </div>
 <div class="clearfloat"></div>
 
 <% if authenticated? %>
+
+<% # add these if you have edit permissions on the map %>
+<% if @map.permission == "commons" || @map.user == user %>   
+<% # for creating and pulling in topics and synapses %>
 <%= render :partial => 'newtopic' %>
 <%= render :partial => 'newsynapse' %>
 <% end %>
 
-<script>
+<% # for populating the change metacode list on the topic card %>
-  var dragged = 0;
+<%= render :partial => 'shared/metacodeoptions' %>
-  mapid = <%= @map.id %>;
-  <% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
-    mapperm = true;
 <% end %>
-</script>
+
 
 <script>
-  viewMode = "graph";
+    Metamaps.Active.Map = <%= @map.to_json.html_safe %>;
-	json = <%= @mapjson %>;
+    Metamaps.Metacodes = <%= @allmetacodes.to_json.html_safe %>;
-	if (json.length > 0) {
+    Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
-		$(document).ready(function() {
+    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
-			<% if (@map.arranged) %>
+    Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;
-				initialize("arranged", false, true);
+    Metamaps.Settings.embed = true;
-			<% else %>
-				initialize("chaotic", false, true);
-			<% end %>
-		});
-	}
-  else {
-		$(document).ready(function() {
-				initialize("chaotic", true, true);
-		});
-	}
-  MetamapsModel.embed = true;
 </script>

app/views/maps/index.html.erb

@@ -6,9 +6,6 @@
   
 <% content_for :title, "Explore Maps | Metamaps" %>
 
-<h1 class="index">Explore Maps</h1>
-
-
   <div class="mapOrder">
     <span class="displaying">Displaying:</span>
     <div class="whichMaps">

app/views/maps/show.html.erb

@@ -13,8 +13,7 @@
 
 <% if authenticated? %>
 <div class="sidebarFork">
-    <div class="sidebarForkIcon hoverForTip">
+    <div class="sidebarForkIcon">
-      <div class="tip">Save To New Map</div>
     </div>
     <div class="sidebarForkBox"></div>
 </div>
@@ -47,8 +46,6 @@
 
 <div class="index">
     <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
-  <span><img width="35" height="35" src="/assets/map.png"></span>
-  <span class="mapName"><%= @map.name %></span>
     <span class="mapInfo"></span>
     <div class="clearfloat"></div>
     <%= render :partial => 'maps/mapinfobox' %>

app/views/topics/show.html.erb

@@ -18,8 +18,7 @@
 
 <% if authenticated? %>
 <div class="sidebarFork">
-  <div class="sidebarForkIcon hoverForTip">
+    <div class="sidebarForkIcon">
-    <div class="tip">Save As New Map</div>
     </div>
     <div class="sidebarForkBox"></div>
 </div>
@@ -35,8 +34,7 @@
 
 <div class="index">
     <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
-  <span><img width="35" height="35" src="<%= @topic.metacode.icon %>"></span>
+    <span class="mapInfo"></span>
-  <span class="mapName"><%= @topic.name %></span>
     <div class="clearfloat"></div>
 </div>
 
@@ -55,8 +53,10 @@
 <% end %>
 
 <script>
-	json = <%= @relatives %>;
+    Metamaps.Active.Topic = <%= @topic.to_json.html_safe %>;
-	$(window).load(function() {
+    Metamaps.Metacodes = <%= @allmetacodes.to_json.html_safe %>;
-		initialize("centered");
+    Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
-	});
+    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
+    Metamaps.Mappings = null;
+    Metamaps.Visualize.type = "RGraph";
 </script>

config/routes.rb

@@ -5,7 +5,6 @@ Metamaps::Application.routes.draw do
   get '/join', to: redirect('/users/sign_up')
   
   match 'request', to: 'main#requestinvite', via: :get, as: :request
-  match 'paq', to: 'main#paq', via: :get, as: :paq
   
   match '/search/topics', to: 'main#searchtopics', via: :get, as: :searchtopics
   match '/search/maps', to: 'main#searchmaps', via: :get, as: :searchmaps