From e4d193572f7f6489be149f8cc9aafecb0e829813 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Mon, 7 Nov 2016 14:40:25 -0500
Subject: [PATCH 1/9] fix mailer specs

---
 spec/mailers/map_mailer_spec.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/mailers/map_mailer_spec.rb b/spec/mailers/map_mailer_spec.rb
index d72163f7..5fed48f5 100644
--- a/spec/mailers/map_mailer_spec.rb
+++ b/spec/mailers/map_mailer_spec.rb
@@ -11,8 +11,8 @@ RSpec.describe MapMailer, type: :mailer do
     it { expect(mail.subject).to match map.name }
     it { expect(mail.body.encoded).to match map.name }
     it { expect(mail.body.encoded).to match request.user.name }
-    it { expect(mail.body.encoded).to match 'Approve Request' }
-    it { expect(mail.body.encoded).to match 'Deny Request' }
+    it { expect(mail.body.encoded).to match 'Allow' }
+    it { expect(mail.body.encoded).to match 'Decline' }
   end
 
   describe 'invite_to_edit_email' do

From 9cb307424515349fb62adc0d20ad5d3d076fc5c5 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 17:16:02 +0800
Subject: [PATCH 2/9] rename Metamaps.Backbone to Metamaps.DataModel

---
 frontend/src/Metamaps/Create.js               |  4 +-
 .../Metamaps/{Backbone => DataModel}/index.js | 30 ++++++------
 frontend/src/Metamaps/GlobalUI/CreateMap.js   |  6 +--
 frontend/src/Metamaps/GlobalUI/index.js       | 16 +++----
 frontend/src/Metamaps/Import.js               | 10 ++--
 frontend/src/Metamaps/Map/index.js            | 17 ++++---
 frontend/src/Metamaps/Mapper.js               |  4 +-
 frontend/src/Metamaps/Realtime/index.js       | 24 +++-------
 frontend/src/Metamaps/Realtime/receivable.js  | 47 ++++++++++---------
 frontend/src/Metamaps/Synapse.js              |  8 ++--
 frontend/src/Metamaps/Topic.js                | 18 +++----
 frontend/src/Metamaps/Views/Room.js           |  6 +--
 frontend/src/Metamaps/index.js                |  4 +-
 13 files changed, 92 insertions(+), 102 deletions(-)
 rename frontend/src/Metamaps/{Backbone => DataModel}/index.js (97%)

diff --git a/frontend/src/Metamaps/Create.js b/frontend/src/Metamaps/Create.js
index 088622e3..1327821f 100644
--- a/frontend/src/Metamaps/Create.js
+++ b/frontend/src/Metamaps/Create.js
@@ -11,7 +11,7 @@ import GlobalUI from './GlobalUI'
  * Metamaps.Create.js
  *
  * Dependencies:
- *  - Metamaps.Backbone
+ *  - Metamaps.DataModel
  *  - Metamaps.Metacodes
  *  - Metamaps.Topics
  */
@@ -59,7 +59,7 @@ const Create = {
     }
 
     var codesToSwitchToIds
-    var metacodeModels = new Metamaps.Backbone.MetacodeCollection()
+    var metacodeModels = new Metamaps.DataModel.MetacodeCollection()
     Create.selectedMetacodeSetIndex = index
     Create.selectedMetacodeSet = 'metacodeset-' + set
 
diff --git a/frontend/src/Metamaps/Backbone/index.js b/frontend/src/Metamaps/DataModel/index.js
similarity index 97%
rename from frontend/src/Metamaps/Backbone/index.js
rename to frontend/src/Metamaps/DataModel/index.js
index ff4c48b9..1aaac52f 100644
--- a/frontend/src/Metamaps/Backbone/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -17,7 +17,7 @@ import TopicCard from '../TopicCard'
 import Visualize from '../Visualize'
 
 /*
- * Metamaps.Backbone.js.erb
+ * Metamaps.DataModel.js
  *
  * Dependencies:
  *  - Metamaps.Collaborators
@@ -30,9 +30,9 @@ import Visualize from '../Visualize'
  *  - Metamaps.Topics
  */
 
-const _Backbone = {}
+const DataModel = {}
 
-_Backbone.Map = Backbone.Model.extend({
+DataModel.Map = Backbone.Model.extend({
   urlRoot: '/maps',
   blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
   toJSON: function (options) {
@@ -106,8 +106,8 @@ _Backbone.Map = Backbone.Model.extend({
     }
   }
 })
-_Backbone.MapsCollection = Backbone.Collection.extend({
-  model: _Backbone.Map,
+DataModel.MapsCollection = Backbone.Collection.extend({
+  model: DataModel.Map,
   initialize: function (models, options) {
     this.id = options.id
     this.sortBy = options.sortBy
@@ -174,7 +174,7 @@ _Backbone.MapsCollection = Backbone.Collection.extend({
   }
 })
 
-_Backbone.Message = Backbone.Model.extend({
+DataModel.Message = Backbone.Model.extend({
   urlRoot: '/messages',
   blacklist: ['created_at', 'updated_at'],
   toJSON: function (options) {
@@ -190,12 +190,12 @@ _Backbone.Message = Backbone.Model.extend({
      */
   }
 })
-_Backbone.MessageCollection = Backbone.Collection.extend({
-  model: _Backbone.Message,
+DataModel.MessageCollection = Backbone.Collection.extend({
+  model: DataModel.Message,
   url: '/messages'
 })
 
-_Backbone.Mapper = Backbone.Model.extend({
+DataModel.Mapper = Backbone.Model.extend({
   urlRoot: '/users',
   blacklist: ['created_at', 'updated_at'],
   toJSON: function (options) {
@@ -211,13 +211,13 @@ _Backbone.Mapper = Backbone.Model.extend({
   }
 })
 
-_Backbone.MapperCollection = Backbone.Collection.extend({
-  model: _Backbone.Mapper,
+DataModel.MapperCollection = Backbone.Collection.extend({
+  model: DataModel.Mapper,
   url: '/users'
 })
 
-_Backbone.init = function () {
-  var self = _Backbone
+DataModel.init = function () {
+  var self = DataModel
 
   self.Metacode = Backbone.Model.extend({
     initialize: function () {
@@ -658,6 +658,6 @@ _Backbone.init = function () {
     }
   }
   self.attachCollectionEvents()
-}; // end _Backbone.init
+}; // end DataModel.init
 
-export default _Backbone
+export default DataModel
diff --git a/frontend/src/Metamaps/GlobalUI/CreateMap.js b/frontend/src/Metamaps/GlobalUI/CreateMap.js
index a24c73c8..d53b4106 100644
--- a/frontend/src/Metamaps/GlobalUI/CreateMap.js
+++ b/frontend/src/Metamaps/GlobalUI/CreateMap.js
@@ -4,7 +4,7 @@ import Active from '../Active'
 import GlobalUI from './index'
 
 /*
- * Metamaps.Backbone
+ * Metamaps.DataModel
  * Metamaps.Maps
  */
 
@@ -17,7 +17,7 @@ const CreateMap = {
   init: function () {
     var self = CreateMap
 
-    self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
+    self.newMap = new Metamaps.DataModel.Map({ permission: 'commons' })
 
     self.bindFormEvents()
 
@@ -128,7 +128,7 @@ const CreateMap = {
     }
 
     self.bindFormEvents()
-    self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
+    self.newMap = new Metamaps.DataModel.Map({ permission: 'commons' })
 
     return false
   }
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index 4f1feb18..580aa831 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/frontend/src/Metamaps/GlobalUI/index.js
@@ -11,7 +11,7 @@ import Account from './Account'
 import ImportDialog from './ImportDialog'
 
 /*
- * Metamaps.Backbone
+ * Metamaps.DataModel
  * Metamaps.Maps
  */
 
@@ -38,7 +38,7 @@ const GlobalUI = {
     $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
 
     // initialize global backbone models and collections
-    if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper)
+    if (Active.Mapper) Active.Mapper = new Metamaps.DataModel.Mapper(Active.Mapper)
 
     var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []
     var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []
@@ -51,13 +51,13 @@ const GlobalUI = {
     }
     var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
     var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
-    Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
-    Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
-    Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
+    Metamaps.Maps.Mine = new Metamaps.DataModel.MapsCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
+    Metamaps.Maps.Shared = new Metamaps.DataModel.MapsCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
+    Metamaps.Maps.Starred = new Metamaps.DataModel.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
     // 'Mapper' refers to another mapper
-    Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj)
-    Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
-    Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+    Metamaps.Maps.Mapper = new Metamaps.DataModel.MapsCollection(mapperCollection, mapperOptionsObj)
+    Metamaps.Maps.Featured = new Metamaps.DataModel.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
+    Metamaps.Maps.Active = new Metamaps.DataModel.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
   },
   showDiv: function (selector) {
     $(selector).show()
diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js
index 6fd43bfe..b829c0b1 100644
--- a/frontend/src/Metamaps/Import.js
+++ b/frontend/src/Metamaps/Import.js
@@ -14,7 +14,7 @@ import Topic from './Topic'
  * Metamaps.Import.js.erb
  *
  * Dependencies:
- *  - Metamaps.Backbone
+ *  - Metamaps.DataModel
  *  - Metamaps.Mappings
  *  - Metamaps.Metacodes
  *  - Metamaps.Synapses
@@ -299,7 +299,7 @@ const Import = {
 
     var topic_permission = permission || Active.Map.get('permission')
     var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null
-    var topic = new Metamaps.Backbone.Topic({
+    var topic = new Metamaps.DataModel.Topic({
       name: name,
       metacode_id: metacode.id,
       permission: topic_permission,
@@ -314,7 +314,7 @@ const Import = {
       self.cidMappings[import_id] = topic.cid
     }
 
-    var mapping = new Metamaps.Backbone.Mapping({
+    var mapping = new Metamaps.DataModel.Mapping({
       xloc: xloc,
       yloc: yloc,
       mappable_id: topic.cid,
@@ -340,7 +340,7 @@ const Import = {
       return
     } // if
 
-    var synapse = new Metamaps.Backbone.Synapse({
+    var synapse = new Metamaps.DataModel.Synapse({
       desc: desc || '',
       category: category || 'from-to',
       permission: permission,
@@ -349,7 +349,7 @@ const Import = {
     })
     Metamaps.Synapses.add(synapse)
 
-    var mapping = new Metamaps.Backbone.Mapping({
+    var mapping = new Metamaps.DataModel.Mapping({
       mappable_type: 'Synapse',
       mappable_id: synapse.cid
     })
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index 09790b89..bcf4397b 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -22,7 +22,7 @@ import InfoBox from './InfoBox'
  * Metamaps.Map.js.erb
  *
  * Dependencies:
- *  - Metamaps.Backbone
+ *  - Metamaps.DataModel
  *  - Metamaps.Erb
  *  - Metamaps.Loading
  *  - Metamaps.Mappers
@@ -82,17 +82,16 @@ const Map = {
     $('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className)
   },
   launch: function (id) {
-    var bb = Metamaps.Backbone
     var start = function (data) {
-      Active.Map = new bb.Map(data.map)
-      Metamaps.Mappers = new bb.MapperCollection(data.mappers)
-      Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
-      Metamaps.Topics = new bb.TopicCollection(data.topics)
-      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
-      Metamaps.Mappings = new bb.MappingCollection(data.mappings)
+      Active.Map = new Metamaps.DataModel.Map(data.map)
+      Metamaps.Mappers = new Metamaps.DataModel.MapperCollection(data.mappers)
+      Metamaps.Collaborators = new Metamaps.DataModel.MapperCollection(data.collaborators)
+      Metamaps.Topics = new Metamaps.DataModel.TopicCollection(data.topics)
+      Metamaps.Synapses = new Metamaps.DataModel.SynapseCollection(data.synapses)
+      Metamaps.Mappings = new Metamaps.DataModel.MappingCollection(data.mappings)
       Metamaps.Messages = data.messages
       Metamaps.Stars = data.stars
-      Metamaps.Backbone.attachCollectionEvents()
+      Metamaps.DataModel.attachCollectionEvents()
 
       var map = Active.Map
       var mapper = Active.Mapper
diff --git a/frontend/src/Metamaps/Mapper.js b/frontend/src/Metamaps/Mapper.js
index 70cbd81a..4beff8bf 100644
--- a/frontend/src/Metamaps/Mapper.js
+++ b/frontend/src/Metamaps/Mapper.js
@@ -2,7 +2,7 @@
 
 /*
  * Dependencies:
- *  Metamaps.Backbone
+ *  Metamaps.DataModel
  */
 
 const Mapper = {
@@ -12,7 +12,7 @@ const Mapper = {
     $.ajax({
       url: `/users/${id}.json`,
       success: data => {
-        callback(new Metamaps.Backbone.Mapper(data))
+        callback(new Metamaps.DataModel.Mapper(data))
       }
     })
   }
diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js
index 49fd357d..1e91975a 100644
--- a/frontend/src/Metamaps/Realtime/index.js
+++ b/frontend/src/Metamaps/Realtime/index.js
@@ -1,23 +1,11 @@
-/* global Metamaps, $ */
-
-/*
- * Metamaps.Realtime.js
- *
- * Dependencies:
- *  - Metamaps.Backbone
- *  - Metamaps.Erb
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Messages
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
+/* global $ */
 
 import _ from 'lodash'
 import SimpleWebRTC from 'simplewebrtc'
 import SocketIoConnection from 'simplewebrtc/socketioconnection'
 
 import Active from '../Active'
+import DataModel from '../DataModel'
 import GlobalUI from '../GlobalUI'
 import JIT from '../JIT'
 import Synapse from '../Synapse'
@@ -121,12 +109,14 @@ let Realtime = {
   broadcastingStatus: false,
   inConversation: false,
   localVideo: null,
-  init: function () {
+  'junto_spinner_darkgrey.gif': '',
+  init: function (serverData) {
     var self = Realtime
 
     self.addJuntoListeners()
 
-    self.socket = new SocketIoConnection({ url: Metamaps.Erb['REALTIME_SERVER']})
+    self.socket = new SocketIoConnection({ url: serverData['REALTIME_SERVER']})
+    self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
     
     self.socket.on('connect', function () {
       console.log('connected')
@@ -230,7 +220,7 @@ let Realtime = {
         self.setupSocket()
         self.setupLocalSendables()
       }
-      self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true)
+      self.room.addMessages(new DataModel.MessageCollection(DataModel.Messages), true)
     }
   },
   endActiveMap: function () {
diff --git a/frontend/src/Metamaps/Realtime/receivable.js b/frontend/src/Metamaps/Realtime/receivable.js
index 3e9b5d16..c1432333 100644
--- a/frontend/src/Metamaps/Realtime/receivable.js
+++ b/frontend/src/Metamaps/Realtime/receivable.js
@@ -7,6 +7,7 @@ everthing in this file happens as a result of websocket events
 import { JUNTO_UPDATED } from './events'
 
 import Active from '../Active'
+import DataModel from '../DataModel'
 import GlobalUI from '../GlobalUI'
 import Control from '../Control'
 import Map from '../Map'
@@ -22,7 +23,7 @@ export const juntoUpdated = self => state => {
 }
 
 export const synapseRemoved = self => data => {
-  var synapse = Metamaps.Synapses.get(data.mappableid)
+  var synapse = DataModel.Synapses.get(data.mappableid)
   if (synapse) {
     var edge = synapse.get('edge')
     var mapping = synapse.getMapping()
@@ -36,8 +37,8 @@ export const synapseRemoved = self => data => {
     if (edge.getData('displayIndex')) {
       delete edge.data.$displayIndex
     }
-    Metamaps.Synapses.remove(synapse)
-    Metamaps.Mappings.remove(mapping)
+    DataModel.Synapses.remove(synapse)
+    DataModel.Mappings.remove(mapping)
   }
 }
 
@@ -63,18 +64,18 @@ export const synapseCreated = self => data => {
     }
   }
 
-  mapper = Metamaps.Mappers.get(data.mapperid)
+  mapper = DataModel.Mappers.get(data.mapperid)
   if (mapper === undefined) {
     Mapper.get(data.mapperid, function(m) {
-      Metamaps.Mappers.add(m)
+      DataModel.Mappers.add(m)
       mapper = m
     })
   }
   $.ajax({
     url: '/synapses/' + data.mappableid + '.json',
     success: function (response) {
-      Metamaps.Synapses.add(response)
-      synapse = Metamaps.Synapses.get(response.id)
+      DataModel.Synapses.add(response)
+      synapse = DataModel.Synapses.get(response.id)
     },
     error: function () {
       cancel = true
@@ -83,8 +84,8 @@ export const synapseCreated = self => data => {
   $.ajax({
     url: '/mappings/' + data.mappingid + '.json',
     success: function (response) {
-      Metamaps.Mappings.add(response)
-      mapping = Metamaps.Mappings.get(response.id)
+      DataModel.Mappings.add(response)
+      mapping = DataModel.Mappings.get(response.id)
     },
     error: function () {
       cancel = true
@@ -94,13 +95,13 @@ export const synapseCreated = self => data => {
 }
 
 export const topicRemoved = self => data => {
-  var topic = Metamaps.Topics.get(data.mappableid)
+  var topic = DataModel.Topics.get(data.mappableid)
   if (topic) {
     var node = topic.get('node')
     var mapping = topic.getMapping()
     Control.hideNode(node.id)
-    Metamaps.Topics.remove(topic)
-    Metamaps.Mappings.remove(mapping)
+    DataModel.Topics.remove(topic)
+    DataModel.Mappings.remove(mapping)
   }
 }
 
@@ -120,18 +121,18 @@ export const topicCreated = self => data => {
     }
   }
 
-  mapper = Metamaps.Mappers.get(data.mapperid)
+  mapper = DataModel.Mappers.get(data.mapperid)
   if (mapper === undefined) {
     Mapper.get(data.mapperid, function(m) {
-      Metamaps.Mappers.add(m)
+      DataModel.Mappers.add(m)
       mapper = m
     })
   }
   $.ajax({
     url: '/topics/' + data.mappableid + '.json',
     success: function (response) {
-      Metamaps.Topics.add(response)
-      topic = Metamaps.Topics.get(response.id)
+      DataModel.Topics.add(response)
+      topic = DataModel.Topics.get(response.id)
     },
     error: function () {
       cancel = true
@@ -140,8 +141,8 @@ export const topicCreated = self => data => {
   $.ajax({
     url: '/mappings/' + data.mappingid + '.json',
     success: function (response) {
-      Metamaps.Mappings.add(response)
-      mapping = Metamaps.Mappings.get(response.id)
+      DataModel.Mappings.add(response)
+      mapping = DataModel.Mappings.get(response.id)
     },
     error: function () {
       cancel = true
@@ -152,7 +153,7 @@ export const topicCreated = self => data => {
 }
 
 export const messageCreated = self => data => {
-  self.room.addMessages(new Metamaps.Backbone.MessageCollection(data))
+  self.room.addMessages(new DataModel.MessageCollection(data))
 }
 
 export const mapUpdated = self => data => {
@@ -182,7 +183,7 @@ export const mapUpdated = self => data => {
 }
 
 export const topicUpdated = self => data => {
-  var topic = Metamaps.Topics.get(data.topicId)
+  var topic = DataModel.Topics.get(data.topicId)
   if (topic) {
     var node = topic.get('node')
     topic.fetch({
@@ -195,7 +196,7 @@ export const topicUpdated = self => data => {
 }
 
 export const synapseUpdated = self => data => {
-  var synapse = Metamaps.Synapses.get(data.synapseId)
+  var synapse = DataModel.Synapses.get(data.synapseId)
   if (synapse) {
     // edge reset necessary because fetch causes model reset
     var edge = synapse.get('edge')
@@ -214,7 +215,7 @@ export const topicDragged = self => positions => {
 
   if (Active.Map) {
     for (var key in positions) {
-      topic = Metamaps.Topics.get(key)
+      topic = DataModel.Topics.get(key)
       if (topic) node = topic.get('node')
       if (node) node.pos.setc(positions[key].x, positions[key].y)
     } // for
@@ -332,7 +333,7 @@ export const invitedToCall = self => inviter => {
   self.soundId = self.room.chat.sound.play('sessioninvite')
 
   var username = self.mappersOnMap[inviter].name
-  var notifyText = '<img src="' + Metamaps.Erb['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
+  var notifyText = '<img src="' + self['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
   notifyText += username + ' is inviting you to a conversation. Join live?'
   notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>'
   notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
diff --git a/frontend/src/Metamaps/Synapse.js b/frontend/src/Metamaps/Synapse.js
index 8253d6ba..4b80c05a 100644
--- a/frontend/src/Metamaps/Synapse.js
+++ b/frontend/src/Metamaps/Synapse.js
@@ -13,7 +13,7 @@ import Visualize from './Visualize'
  * Metamaps.Synapse.js.erb
  *
  * Dependencies:
- *  - Metamaps.Backbone
+ *  - Metamaps.DataModel
  *  - Metamaps.Mappings
  *  - Metamaps.Synapses
  *  - Metamaps.Topics
@@ -112,14 +112,14 @@ const Synapse = {
     for (var i = 0; i < synapsesToCreate.length; i++) {
       node1 = synapsesToCreate[i]
       topic1 = node1.getData('topic')
-      synapse = new Metamaps.Backbone.Synapse({
+      synapse = new Metamaps.DataModel.Synapse({
         desc: Create.newSynapse.description,
         topic1_id: topic1.isNew() ? topic1.cid : topic1.id,
         topic2_id: topic2.isNew() ? topic2.cid : topic2.id,
       })
       Metamaps.Synapses.add(synapse)
 
-      mapping = new Metamaps.Backbone.Mapping({
+      mapping = new Metamaps.DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.cid,
       })
@@ -139,7 +139,7 @@ const Synapse = {
       node2
 
     self.get(id, synapse => {
-      var mapping = new Metamaps.Backbone.Mapping({
+      var mapping = new Metamaps.DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.id,
       })
diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js
index 91c720aa..38596b9e 100644
--- a/frontend/src/Metamaps/Topic.js
+++ b/frontend/src/Metamaps/Topic.js
@@ -22,7 +22,7 @@ import Visualize from './Visualize'
  * Metamaps.Topic.js.erb
  *
  * Dependencies:
- *  - Metamaps.Backbone
+ *  - Metamaps.DataModel
  *  - Metamaps.Creators
  *  - Metamaps.Mappings
  *  - Metamaps.Synapses
@@ -45,13 +45,13 @@ const Topic = {
     } else callback(Metamaps.Topics.get(id))
   },
   launch: function (id) {
-    var bb = Metamaps.Backbone
+    var bb = Metamaps.DataModel
     var start = function (data) {
       Active.Topic = new bb.Topic(data.topic)
       Metamaps.Creators = new bb.MapperCollection(data.creators)
       Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
       Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
-      Metamaps.Backbone.attachCollectionEvents()
+      Metamaps.DataModel.attachCollectionEvents()
 
       document.title = Active.Topic.get('name') + ' | Metamaps'
 
@@ -128,9 +128,9 @@ const Topic = {
       if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
       if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
 
-      var topicColl = new Metamaps.Backbone.TopicCollection(data.topics)
+      var topicColl = new Metamaps.DataModel.TopicCollection(data.topics)
       topicColl.add(topic)
-      var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
+      var synapseColl = new Metamaps.DataModel.SynapseCollection(data.synapses)
 
       var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
       Visualize.mGraph.op.sum(graph, {
@@ -311,7 +311,7 @@ const Topic = {
 
     var metacode = Metamaps.Metacodes.get(Create.newTopic.metacode)
 
-    var topic = new Metamaps.Backbone.Topic({
+    var topic = new Metamaps.DataModel.Topic({
       name: Create.newTopic.name,
       metacode_id: metacode.id,
       defer_to_map_id: Active.Map.id
@@ -321,7 +321,7 @@ const Topic = {
     if (Create.newTopic.pinned) {
       var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
     }
-    var mapping = new Metamaps.Backbone.Mapping({
+    var mapping = new Metamaps.DataModel.Mapping({
       xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
       yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
       mappable_id: topic.cid,
@@ -377,7 +377,7 @@ const Topic = {
     })
     Metamaps.Topics.add(topic)
 
-    var mapping = new Metamaps.Backbone.Mapping({
+    var mapping = new Metamaps.DataModel.Mapping({
       xloc: Metamaps.Create.newTopic.x,
       yloc: Metamaps.Create.newTopic.y,
       mappable_id: topic.cid,
@@ -400,7 +400,7 @@ const Topic = {
 
     self.get(id, (topic) => {
       var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
-      var mapping = new Metamaps.Backbone.Mapping({
+      var mapping = new Metamaps.DataModel.Mapping({
         xloc: nextCoords.x,
         yloc: nextCoords.y,
         mappable_type: 'Topic',
diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js
index 7075e017..9bbd5e31 100644
--- a/frontend/src/Metamaps/Views/Room.js
+++ b/frontend/src/Metamaps/Views/Room.js
@@ -14,7 +14,7 @@ import VideoView from './VideoView'
 
 /*
  * Dependencies:
- *   Metamaps.Backbone
+ *   Metamaps.DataModel
  */
 
 const Room = function(opts) {
@@ -170,14 +170,14 @@ Room.prototype.init = function () {
     var self = this
       //this.roomRef.child('messages').push(data)
       if (self.chat.alertSound) self.chat.sound.play('sendchat')
-      var m = new Metamaps.Backbone.Message({
+      var m = new Metamaps.DataModel.Message({
         message: data.message,
         resource_id: Active.Map.id,
         resource_type: "Map"
       })
       m.save(null, {
         success: function (model, response) {
-          self.addMessages(new Metamaps.Backbone.MessageCollection(model), false, true)
+          self.addMessages(new Metamaps.DataModel.MessageCollection(model), false, true)
           $(document).trigger(Room.events.newMessage, [model])
         },
         error: function (model, response) {
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index bf2e2d60..5dc99aa5 100644
--- a/frontend/src/Metamaps/index.js
+++ b/frontend/src/Metamaps/index.js
@@ -4,7 +4,7 @@ import Account from './Account'
 import Active from './Active'
 import Admin from './Admin'
 import AutoLayout from './AutoLayout'
-import Backbone from './Backbone'
+import DataModel from './DataModel'
 import Control from './Control'
 import Create from './Create'
 import Debug from './Debug'
@@ -38,7 +38,7 @@ Metamaps.Account = Account
 Metamaps.Active = Active
 Metamaps.Admin = Admin
 Metamaps.AutoLayout = AutoLayout
-Metamaps.Backbone = Backbone
+Metamaps.DataModel = DataModel
 Metamaps.Control = Control
 Metamaps.Create = Create
 Metamaps.Debug = Debug

From bfd23c6d32e7a4dda1c86db9558d2828e2a8901a Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 17:58:37 +0800
Subject: [PATCH 3/9] split Backbone.js into a bunch of different files. Still
 more work to do to modularize it

---
 frontend/src/Metamaps/DataModel/Map.js        |  92 +++
 .../src/Metamaps/DataModel/MapCollection.js   |  81 +++
 frontend/src/Metamaps/DataModel/Mapper.js     |  21 +
 .../Metamaps/DataModel/MapperCollection.js    |  11 +
 frontend/src/Metamaps/DataModel/Mapping.js    |  37 +
 .../Metamaps/DataModel/MappingCollection.js   |  11 +
 frontend/src/Metamaps/DataModel/Message.js    |  13 +
 .../Metamaps/DataModel/MessageCollection.js   |  11 +
 frontend/src/Metamaps/DataModel/Metacode.js   |  21 +
 .../Metamaps/DataModel/MetacodeCollection.js  |  16 +
 frontend/src/Metamaps/DataModel/Synapse.js    | 185 +++++
 .../Metamaps/DataModel/SynapseCollection.js   |  11 +
 frontend/src/Metamaps/DataModel/Topic.js      | 181 +++++
 .../src/Metamaps/DataModel/TopicCollection.js |  11 +
 frontend/src/Metamaps/DataModel/index.js      | 679 ++----------------
 frontend/src/Metamaps/GlobalUI/index.js       |  12 +-
 16 files changed, 767 insertions(+), 626 deletions(-)
 create mode 100644 frontend/src/Metamaps/DataModel/Map.js
 create mode 100644 frontend/src/Metamaps/DataModel/MapCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Mapper.js
 create mode 100644 frontend/src/Metamaps/DataModel/MapperCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Mapping.js
 create mode 100644 frontend/src/Metamaps/DataModel/MappingCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Message.js
 create mode 100644 frontend/src/Metamaps/DataModel/MessageCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Metacode.js
 create mode 100644 frontend/src/Metamaps/DataModel/MetacodeCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Synapse.js
 create mode 100644 frontend/src/Metamaps/DataModel/SynapseCollection.js
 create mode 100644 frontend/src/Metamaps/DataModel/Topic.js
 create mode 100644 frontend/src/Metamaps/DataModel/TopicCollection.js

diff --git a/frontend/src/Metamaps/DataModel/Map.js b/frontend/src/Metamaps/DataModel/Map.js
new file mode 100644
index 00000000..3ae47d1a
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Map.js
@@ -0,0 +1,92 @@
+/* global $ */
+
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Active from '../Active'
+import { InfoBox } from '../Map'
+import Mapper from '../Mapper'
+import Realtime from '../Realtime'
+
+import MapperCollection from './MapperCollection'
+import TopicCollection from './TopicCollection'
+import SynapseCollection from './SynapseCollection'
+import MappingCollection from './MappingCollection'
+
+const Map = Backbone.Model.extend({
+  urlRoot: '/maps',
+  blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  save: function (key, val, options) {
+    var attrs
+
+    // Handle both `"key", value` and `{key: value}` -style arguments.
+    if (key == null || typeof key === 'object') {
+      attrs = key
+      options = val
+    } else {
+      (attrs = {})[key] = val
+    }
+
+    var newOptions = options || {}
+    var s = newOptions.success
+
+    newOptions.success = function (model, response, opt) {
+      if (s) s(model, response, opt)
+      model.trigger('saved')
+    }
+    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+  },
+  initialize: function () {
+    this.on('changeByOther', this.updateView)
+    this.on('saved', this.savedEvent)
+  },
+  savedEvent: function () {
+    Realtime.updateMap(this)
+  },
+  authorizeToEdit: function (mapper) {
+    if (mapper && (
+      this.get('permission') === 'commons' ||
+      (this.get('collaborator_ids') || []).includes(mapper.get('id')) ||
+      this.get('user_id') === mapper.get('id'))) {
+      return true
+    } else {
+      return false
+    }
+  },
+  authorizePermissionChange: function (mapper) {
+    if (mapper && this.get('user_id') === mapper.get('id')) {
+      return true
+    } else {
+      return false
+    }
+  },
+  getUser: function () {
+    return Mapper.get(this.get('user_id'))
+  },
+  updateView: function () {
+    var map = Active.Map
+    var isActiveMap = this.id === map.id
+    if (isActiveMap) {
+      InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
+      this.updateMapWrapper()
+      // mobile menu
+      $('#header_content').html(this.get('name'))
+      document.title = this.get('name') + ' | Metamaps'
+    }
+  },
+  updateMapWrapper: function () {
+    var map = Active.Map
+    var isActiveMap = this.id === map.id
+    var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''
+    var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
+    if (isActiveMap) {
+      $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
+    }
+  }
+})
+
+export default Map
diff --git a/frontend/src/Metamaps/DataModel/MapCollection.js b/frontend/src/Metamaps/DataModel/MapCollection.js
new file mode 100644
index 00000000..f72e1e0e
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/MapCollection.js
@@ -0,0 +1,81 @@
+/* global Metamaps */
+
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Map from './Map'
+
+/*
+ * Dependencies:
+ *  - Metamaps.Loading
+ */
+
+const MapCollection = Backbone.Collection.extend({
+  model: Map,
+  initialize: function (models, options) {
+    this.id = options.id
+    this.sortBy = options.sortBy
+
+    if (options.mapperId) {
+      this.mapperId = options.mapperId
+    }
+
+    // this.page represents the NEXT page to fetch
+    this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
+  },
+  url: function () {
+    if (!this.mapperId) {
+      return '/explore/' + this.id + '.json'
+    } else {
+      return '/explore/mapper/' + this.mapperId + '.json'
+    }
+  },
+  comparator: function (a, b) {
+    a = a.get(this.sortBy)
+    b = b.get(this.sortBy)
+    var temp
+    if (this.sortBy === 'name') {
+      a = a ? a.toLowerCase() : ''
+      b = b ? b.toLowerCase() : ''
+    } else {
+      // this is for updated_at and created_at
+      temp = a
+      a = b
+      b = temp
+      a = (new Date(a)).getTime()
+      b = (new Date(b)).getTime()
+    }
+    return a > b ? 1 : a < b ? -1 : 0
+  },
+  getMaps: function (cb) {
+    var self = this
+
+    Metamaps.Loading.show()
+
+    if (this.page !== 'loadedAll') {
+      var numBefore = this.length
+      this.fetch({
+        remove: false,
+        silent: true,
+        data: { page: this.page },
+        success: function (collection, response, options) {
+          // you can pass additional options to the event you trigger here as well
+          if (collection.length - numBefore < 20) {
+            self.page = 'loadedAll'
+          } else {
+            self.page += 1
+          }
+          self.trigger('successOnFetch', cb)
+        },
+        error: function (collection, response, options) {
+          // you can pass additional options to the event you trigger here as well
+          self.trigger('errorOnFetch')
+        }
+      })
+    } else {
+      self.trigger('successOnFetch', cb)
+    }
+  }
+})
+
+export default MapCollection
diff --git a/frontend/src/Metamaps/DataModel/Mapper.js b/frontend/src/Metamaps/DataModel/Mapper.js
new file mode 100644
index 00000000..3627fbd6
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Mapper.js
@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+import outdent from 'outdent'
+
+const Mapper = Backbone.Model.extend({
+  urlRoot: '/users',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  prepareLiForFilter: function () {
+    return outdent`
+      <li data-id="${this.id}">
+        <img src="${this.get('image')}" data-id="${this.id}" alt="${this.get('name')}" />
+        <p>${this.get('name')}</p>
+      </li>`
+  }
+})
+
+export default Mapper
diff --git a/frontend/src/Metamaps/DataModel/MapperCollection.js b/frontend/src/Metamaps/DataModel/MapperCollection.js
new file mode 100644
index 00000000..e0ce2bed
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/MapperCollection.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Mapper from './Mapper'
+
+const MapperCollection = Backbone.Collection.extend({
+  model: Mapper,
+  url: '/users'
+})
+
+export default MapperCollection
diff --git a/frontend/src/Metamaps/DataModel/Mapping.js b/frontend/src/Metamaps/DataModel/Mapping.js
new file mode 100644
index 00000000..8bf92ed2
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Mapping.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Active from '../Active'
+import Map from '../Map'
+import Synapse from '../Synapse'
+import Topic from '../Topic'
+
+const Mapping = Backbone.Model.extend({
+  urlRoot: '/mappings',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  initialize: function () {
+    if (this.isNew()) {
+      this.set({
+        'user_id': Active.Mapper.id,
+        'map_id': Active.Map ? Active.Map.id : null
+      })
+    }
+  },
+  getMap: function () {
+    return Map.get(this.get('map_id'))
+  },
+  getTopic: function () {
+    if (this.get('mappable_type') !== 'Topic') return false
+    return Topic.get(this.get('mappable_id'))
+  },
+  getSynapse: function () {
+    if (this.get('mappable_type') !== 'Synapse') return false
+    return Synapse.get(this.get('mappable_id'))
+  }
+})
+
+export default Mapping
diff --git a/frontend/src/Metamaps/DataModel/MappingCollection.js b/frontend/src/Metamaps/DataModel/MappingCollection.js
new file mode 100644
index 00000000..e475e098
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/MappingCollection.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Mapping from './Mapping'
+
+const MappingCollection = Backbone.Collection.extend({
+  model: Mapping,
+  url: '/mappings'
+})
+
+export default MappingCollection
diff --git a/frontend/src/Metamaps/DataModel/Message.js b/frontend/src/Metamaps/DataModel/Message.js
new file mode 100644
index 00000000..f7dc9bee
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Message.js
@@ -0,0 +1,13 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+const Message = Backbone.Model.extend({
+  urlRoot: '/messages',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  }
+})
+
+export default Message
diff --git a/frontend/src/Metamaps/DataModel/MessageCollection.js b/frontend/src/Metamaps/DataModel/MessageCollection.js
new file mode 100644
index 00000000..a572c212
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/MessageCollection.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Message from './Message'
+
+const MessageCollection = Backbone.Collection.extend({
+  model: Message,
+  url: '/messages'
+})
+
+export default MessageCollection
diff --git a/frontend/src/Metamaps/DataModel/Metacode.js b/frontend/src/Metamaps/DataModel/Metacode.js
new file mode 100644
index 00000000..a3d523fd
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Metacode.js
@@ -0,0 +1,21 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+import outdent from 'outdent'
+
+const Metacode = Backbone.Model.extend({
+  initialize: function () {
+    var image = new Image()
+    image.crossOrigin = 'Anonymous'
+    image.src = this.get('icon')
+    this.set('image', image)
+  },
+  prepareLiForFilter: function () {
+    return outdent`
+      <li data-id="${this.id}">
+        <img src="${this.get('icon')}" data-id="${this.id}" alt="${this.get('name')}" />
+        <p>${this.get('name').toLowerCase()}</p>
+      </li>`
+  }
+})
+
+export default Metacode
diff --git a/frontend/src/Metamaps/DataModel/MetacodeCollection.js b/frontend/src/Metamaps/DataModel/MetacodeCollection.js
new file mode 100644
index 00000000..ff4626d1
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/MetacodeCollection.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Metacode from './Metacode'
+
+const MetacodeCollection = Backbone.Collection.extend({
+  model: Metacode,
+  url: '/metacodes',
+  comparator: function (a, b) {
+    a = a.get('name').toLowerCase()
+    b = b.get('name').toLowerCase()
+    return a > b ? 1 : a < b ? -1 : 0
+  }
+})
+
+export default MetacodeCollection
diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js
new file mode 100644
index 00000000..2d8f4256
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Synapse.js
@@ -0,0 +1,185 @@
+/* global Metamaps, $ */
+
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Active from '../Active'
+import Filter from '../Filter'
+import JIT from '../JIT'
+import Realtime from '../Realtime'
+import SynapseCard from '../SynapseCard'
+import Visualize from '../Visualize'
+
+
+/*
+ * Dependencies:
+ *  - Metamaps.Mappings
+ *  - Metamaps.Topics
+ */
+
+const Synapse = Backbone.Model.extend({
+  urlRoot: '/synapses',
+  blacklist: ['edge', 'created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  save: function (key, val, options) {
+    var attrs
+
+    // Handle both `"key", value` and `{key: value}` -style arguments.
+    if (key == null || typeof key === 'object') {
+      attrs = key
+      options = val
+    } else {
+      (attrs = {})[key] = val
+    }
+
+    var newOptions = options || {}
+    var s = newOptions.success
+
+    var permBefore = this.get('permission')
+
+    newOptions.success = function (model, response, opt) {
+      if (s) s(model, response, opt)
+      model.trigger('saved')
+
+      if (permBefore === 'private' && model.get('permission') !== 'private') {
+        model.trigger('noLongerPrivate')
+      }
+      else if (permBefore !== 'private' && model.get('permission') === 'private') {
+        model.trigger('nowPrivate')
+      }
+    }
+    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+  },
+  initialize: function () {
+    if (this.isNew()) {
+      this.set({
+        'user_id': Active.Mapper.id,
+        'permission': Active.Map ? Active.Map.get('permission') : 'commons',
+        'category': 'from-to'
+      })
+    }
+
+    this.on('changeByOther', this.updateCardView)
+    this.on('change', this.updateEdgeView)
+    this.on('saved', this.savedEvent)
+    this.on('noLongerPrivate', function () {
+      var newSynapseData = {
+        mappingid: this.getMapping().id,
+        mappableid: this.id
+      }
+
+      $(document).trigger(JIT.events.newSynapse, [newSynapseData])
+    })
+    this.on('nowPrivate', function () {
+      $(document).trigger(JIT.events.removeSynapse, [{
+        mappableid: this.id
+      }])
+    })
+
+    this.on('change:desc', Filter.checkSynapses, this)
+  },
+  prepareLiForFilter: function () {
+    var li = ''
+    li += '<li data-id="' + this.get('desc') + '">'
+    li += '<img src="' + Metamaps.Erb['synapse16.png'] + '"'
+    li += ' alt="synapse icon" />'
+    li += '<p>' + this.get('desc') + '</p></li>'
+    return li
+  },
+  authorizeToEdit: function (mapper) {
+    if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
+    else return false
+  },
+  authorizePermissionChange: function (mapper) {
+    if (mapper && this.get('user_id') === mapper.get('id')) return true
+    else return false
+  },
+  getTopic1: function () {
+    return Metamaps.Topics.get(this.get('topic1_id'))
+  },
+  getTopic2: function () {
+    return Metamaps.Topics.get(this.get('topic2_id'))
+  },
+  getDirection: function () {
+    var t1 = this.getTopic1(),
+      t2 = this.getTopic2()
+
+    return t1 && t2 ? [
+      t1.get('node').id,
+      t2.get('node').id
+    ] : false
+  },
+  getMapping: function () {
+    if (!Active.Map) return false
+
+    return Metamaps.Mappings.findWhere({
+      map_id: Active.Map.id,
+      mappable_type: 'Synapse',
+      mappable_id: this.isNew() ? this.cid : this.id
+    })
+  },
+  createEdge: function (providedMapping) {
+    var mapping, mappingID
+    var synapseID = this.isNew() ? this.cid : this.id
+
+    var edge = {
+      nodeFrom: this.get('topic1_id'),
+      nodeTo: this.get('topic2_id'),
+      data: {
+        $synapses: [],
+        $synapseIDs: [synapseID],
+      }
+    }
+
+    if (Active.Map) {
+      mapping = providedMapping || this.getMapping()
+      mappingID = mapping.isNew() ? mapping.cid : mapping.id
+      edge.data.$mappings = []
+      edge.data.$mappingIDs = [mappingID]
+    }
+
+    return edge
+  },
+  updateEdge: function () {
+    var mapping
+    var edge = this.get('edge')
+    edge.getData('synapses').push(this)
+
+    if (Active.Map) {
+      mapping = this.getMapping()
+      edge.getData('mappings').push(mapping)
+    }
+
+    return edge
+  },
+  savedEvent: function () {
+    Realtime.updateSynapse(this)
+  },
+  updateViews: function () {
+    this.updateCardView()
+    this.updateEdgeView()
+  },
+  updateCardView: function () {
+    var onPageWithSynapseCard = Active.Map || Active.Topic
+    var edge = this.get('edge')
+
+    // update synapse card, if this synapse is the one open there
+    if (onPageWithSynapseCard && edge == SynapseCard.openSynapseCard) {
+      SynapseCard.showCard(edge)
+    }
+  },
+  updateEdgeView: function () {
+    var onPageWithSynapseCard = Active.Map || Active.Topic
+    var edge = this.get('edge')
+
+    // update the edge on the map
+    if (onPageWithSynapseCard && edge) {
+      Visualize.mGraph.plot()
+    }
+  }
+})
+
+export default Synapse
diff --git a/frontend/src/Metamaps/DataModel/SynapseCollection.js b/frontend/src/Metamaps/DataModel/SynapseCollection.js
new file mode 100644
index 00000000..86bf8c47
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/SynapseCollection.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Synapse from './Synapse'
+
+const SynapseCollection = Backbone.Collection.extend({
+  model: Synapse,
+  url: '/synapses'
+})
+
+export default SynapseCollection
diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js
new file mode 100644
index 00000000..33a9bd3f
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/Topic.js
@@ -0,0 +1,181 @@
+/* global Metamaps, $ */
+
+import _ from 'lodash'
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Active from '../Active'
+import Filter from '../Filter'
+import JIT from '../JIT'
+import Realtime from '../Realtime'
+import TopicCard from '../TopicCard'
+import Visualize from '../Visualize'
+
+/*
+ * Dependencies:
+ *  - Metamaps.Mappings
+ *  - Metamaps.Metacodes
+ */
+
+const Topic = Backbone.Model.extend({
+  urlRoot: '/topics',
+  blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  save: function (key, val, options) {
+    var attrs
+
+    // Handle both `"key", value` and `{key: value}` -style arguments.
+    if (key == null || typeof key === 'object') {
+      attrs = key
+      options = val
+    } else {
+      (attrs = {})[key] = val
+    }
+
+    var newOptions = options || {}
+    var s = newOptions.success
+
+    var permBefore = this.get('permission')
+
+    newOptions.success = function (model, response, opt) {
+      if (s) s(model, response, opt)
+      model.trigger('saved')
+      model.set('calculated_permission', model.get('permission'))
+
+      if (permBefore === 'private' && model.get('permission') !== 'private') {
+        model.trigger('noLongerPrivate')
+      }
+      else if (permBefore !== 'private' && model.get('permission') === 'private') {
+        model.trigger('nowPrivate')
+      }
+    }
+    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+  },
+  initialize: function () {
+    if (this.isNew()) {
+      this.set({
+        'user_id': Active.Mapper.id,
+        'desc': this.get('desc') || '',
+        'link': this.get('link') || '',
+        'permission': Active.Map ? Active.Map.get('permission') : 'commons'
+      })
+    }
+
+    this.on('changeByOther', this.updateCardView)
+    this.on('change', this.updateNodeView)
+    this.on('saved', this.savedEvent)
+    this.on('nowPrivate', function () {
+      var removeTopicData = {
+        mappableid: this.id
+      }
+
+      $(document).trigger(JIT.events.removeTopic, [removeTopicData])
+    })
+    this.on('noLongerPrivate', function () {
+      var newTopicData = {
+        mappingid: this.getMapping().id,
+        mappableid: this.id
+      }
+
+      $(document).trigger(JIT.events.newTopic, [newTopicData])
+    })
+
+    this.on('change:metacode_id', Filter.checkMetacodes, this)
+  },
+  authorizeToEdit: function (mapper) {
+    if (mapper &&
+      (this.get('user_id') === mapper.get('id') ||
+       this.get('calculated_permission') === 'commons' ||
+       this.get('collaborator_ids').includes(mapper.get('id')))) {
+      return true
+    } else {
+      return false
+    }
+  },
+  authorizePermissionChange: function (mapper) {
+    if (mapper && this.get('user_id') === mapper.get('id')) return true
+    else return false
+  },
+  getDate: function () {},
+  getMetacode: function () {
+    return Metamaps.Metacodes.get(this.get('metacode_id'))
+  },
+  getMapping: function () {
+    if (!Active.Map) return false
+
+    return Metamaps.Mappings.findWhere({
+      map_id: Active.Map.id,
+      mappable_type: 'Topic',
+      mappable_id: this.isNew() ? this.cid : this.id
+    })
+  },
+  createNode: function () {
+    var mapping
+    var node = {
+      adjacencies: [],
+      id: this.isNew() ? this.cid : this.id,
+      name: this.get('name')
+    }
+
+    if (Active.Map) {
+      mapping = this.getMapping()
+      node.data = {
+        $mapping: null,
+        $mappingID: mapping.id
+      }
+    }
+
+    return node
+  },
+  updateNode: function () {
+    var mapping
+    var node = this.get('node')
+    node.setData('topic', this)
+
+    if (Active.Map) {
+      mapping = this.getMapping()
+      node.setData('mapping', mapping)
+    }
+
+    return node
+  },
+  savedEvent: function () {
+    Realtime.updateTopic(this)
+  },
+  updateViews: function () {
+    var onPageWithTopicCard = Active.Map || Active.Topic
+    var node = this.get('node')
+    // update topic card, if this topic is the one open there
+    if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
+      TopicCard.showCard(node)
+    }
+
+    // update the node on the map
+    if (onPageWithTopicCard && node) {
+      node.name = this.get('name')
+      Visualize.mGraph.plot()
+    }
+  },
+  updateCardView: function () {
+    var onPageWithTopicCard = Active.Map || Active.Topic
+    var node = this.get('node')
+    // update topic card, if this topic is the one open there
+    if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
+      TopicCard.showCard(node)
+    }
+  },
+  updateNodeView: function () {
+    var onPageWithTopicCard = Active.Map || Active.Topic
+    var node = this.get('node')
+
+    // update the node on the map
+    if (onPageWithTopicCard && node) {
+      node.name = this.get('name')
+      Visualize.mGraph.plot()
+    }
+  }
+})
+
+export default Topic
diff --git a/frontend/src/Metamaps/DataModel/TopicCollection.js b/frontend/src/Metamaps/DataModel/TopicCollection.js
new file mode 100644
index 00000000..4bcaf622
--- /dev/null
+++ b/frontend/src/Metamaps/DataModel/TopicCollection.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+Backbone.$ = window.$
+
+import Topic from './Topic'
+
+const TopicCollection = Backbone.Collection.extend({
+  model: Topic,
+  url: '/topics'
+})
+
+export default TopicCollection
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index 1aaac52f..4ee6d10d 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -1,23 +1,26 @@
-/* global Metamaps, Backbone, $ */
-
-import _ from 'lodash'
-import Backbone from 'backbone'
-Backbone.$ = window.$
+/* global Metamaps */
 
 import Active from '../Active'
 import Filter from '../Filter'
-import JIT from '../JIT'
-import Map, { InfoBox } from '../Map'
-import Mapper from '../Mapper'
-import Realtime from '../Realtime'
-import Synapse from '../Synapse'
-import SynapseCard from '../SynapseCard'
-import Topic from '../Topic'
-import TopicCard from '../TopicCard'
-import Visualize from '../Visualize'
+import { InfoBox } from '../Map'
+
+import Map from './Map'
+import MapCollection from './MapCollection'
+import Message from './Message'
+import MessageCollection from './MessageCollection'
+import Mapper from './Mapper'
+import MapperCollection from './MapperCollection'
+import Metacode from './Metacode'
+import MetacodeCollection from './MetacodeCollection'
+import Topic from './Topic'
+import TopicCollection from './TopicCollection'
+import Synapse from './Synapse'
+import SynapseCollection from './SynapseCollection'
+import Mapping from './Mapping'
+import MappingCollection from './MappingCollection'
 
 /*
- * Metamaps.DataModel.js
+ * DataModel.js
  *
  * Dependencies:
  *  - Metamaps.Collaborators
@@ -30,618 +33,36 @@ import Visualize from '../Visualize'
  *  - Metamaps.Topics
  */
 
-const DataModel = {}
+const DataModel = {
+  Map: Map,
+  MapCollection: MapCollection,
+  Message: Message,
+  MessageCollection: MessageCollection,
+  Mapper: Mapper,
+  MapperCollection: MapperCollection,
+  Metacode: Metacode,
+  MetacodeCollection: MetacodeCollection,
+  Topic: Topic,
+  TopicCollection: TopicCollection,
+  Synapse: Synapse,
+  SynapseCollection: SynapseCollection,
+  Mapping: Mapping,
+  MappingCollection: MappingCollection,
 
-DataModel.Map = Backbone.Model.extend({
-  urlRoot: '/maps',
-  blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
-  toJSON: function (options) {
-    return _.omit(this.attributes, this.blacklist)
-  },
-  save: function (key, val, options) {
-    var attrs
+  init: function() {
+    var self = DataModel
 
-    // Handle both `"key", value` and `{key: value}` -style arguments.
-    if (key == null || typeof key === 'object') {
-      attrs = key
-      options = val
-    } else {
-      (attrs = {})[key] = val
-    }
+    Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
 
-    var newOptions = options || {}
-    var s = newOptions.success
-
-    newOptions.success = function (model, response, opt) {
-      if (s) s(model, response, opt)
-      model.trigger('saved')
-    }
-    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-  },
-  initialize: function () {
-    this.on('changeByOther', this.updateView)
-    this.on('saved', this.savedEvent)
-  },
-  savedEvent: function () {
-    Realtime.updateMap(this)
-  },
-  authorizeToEdit: function (mapper) {
-    if (mapper && (
-      this.get('permission') === 'commons' ||
-      (this.get('collaborator_ids') || []).includes(mapper.get('id')) ||
-      this.get('user_id') === mapper.get('id'))) {
-      return true
-    } else {
-      return false
-    }
-  },
-  authorizePermissionChange: function (mapper) {
-    if (mapper && this.get('user_id') === mapper.get('id')) {
-      return true
-    } else {
-      return false
-    }
-  },
-  getUser: function () {
-    return Mapper.get(this.get('user_id'))
-  },
-  updateView: function () {
-    var map = Active.Map
-    var isActiveMap = this.id === map.id
-    if (isActiveMap) {
-      InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
-      this.updateMapWrapper()
-      // mobile menu
-      $('#header_content').html(this.get('name'))
-      document.title = this.get('name') + ' | Metamaps'
-    }
-  },
-  updateMapWrapper: function () {
-    var map = Active.Map
-    var isActiveMap = this.id === map.id
-    var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''
-    var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
-    if (isActiveMap) {
-      $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
-    }
-  }
-})
-DataModel.MapsCollection = Backbone.Collection.extend({
-  model: DataModel.Map,
-  initialize: function (models, options) {
-    this.id = options.id
-    this.sortBy = options.sortBy
-
-    if (options.mapperId) {
-      this.mapperId = options.mapperId
-    }
-
-    // this.page represents the NEXT page to fetch
-    this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
-  },
-  url: function () {
-    if (!this.mapperId) {
-      return '/explore/' + this.id + '.json'
-    } else {
-      return '/explore/mapper/' + this.mapperId + '.json'
-    }
-  },
-  comparator: function (a, b) {
-    a = a.get(this.sortBy)
-    b = b.get(this.sortBy)
-    var temp
-    if (this.sortBy === 'name') {
-      a = a ? a.toLowerCase() : ''
-      b = b ? b.toLowerCase() : ''
-    } else {
-      // this is for updated_at and created_at
-      temp = a
-      a = b
-      b = temp
-      a = (new Date(a)).getTime()
-      b = (new Date(b)).getTime()
-    }
-    return a > b ? 1 : a < b ? -1 : 0
-  },
-  getMaps: function (cb) {
-    var self = this
-
-    Metamaps.Loading.show()
-
-    if (this.page !== 'loadedAll') {
-      var numBefore = this.length
-      this.fetch({
-        remove: false,
-        silent: true,
-        data: { page: this.page },
-        success: function (collection, response, options) {
-          // you can pass additional options to the event you trigger here as well
-          if (collection.length - numBefore < 20) {
-            self.page = 'loadedAll'
-          } else {
-            self.page += 1
-          }
-          self.trigger('successOnFetch', cb)
-        },
-        error: function (collection, response, options) {
-          // you can pass additional options to the event you trigger here as well
-          self.trigger('errorOnFetch')
-        }
-      })
-    } else {
-      self.trigger('successOnFetch', cb)
-    }
-  }
-})
-
-DataModel.Message = Backbone.Model.extend({
-  urlRoot: '/messages',
-  blacklist: ['created_at', 'updated_at'],
-  toJSON: function (options) {
-    return _.omit(this.attributes, this.blacklist)
-  },
-  prepareLiForFilter: function () {
-    /* var li = ''
-     * li += '<li data-id="' + this.id.toString() + '">'
-     * li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"'
-     * li += ' alt="' + this.get('name') + '" />'
-     * li += '<p>' + this.get('name') + '</p></li>'
-     * return li
-     */
-  }
-})
-DataModel.MessageCollection = Backbone.Collection.extend({
-  model: DataModel.Message,
-  url: '/messages'
-})
-
-DataModel.Mapper = Backbone.Model.extend({
-  urlRoot: '/users',
-  blacklist: ['created_at', 'updated_at'],
-  toJSON: function (options) {
-    return _.omit(this.attributes, this.blacklist)
-  },
-  prepareLiForFilter: function () {
-    var li = ''
-    li += '<li data-id="' + this.id.toString() + '">'
-    li += '<img src="' + this.get('image') + '" data-id="' + this.id.toString() + '"'
-    li += ' alt="' + this.get('name') + '" />'
-    li += '<p>' + this.get('name') + '</p></li>'
-    return li
-  }
-})
-
-DataModel.MapperCollection = Backbone.Collection.extend({
-  model: DataModel.Mapper,
-  url: '/users'
-})
-
-DataModel.init = function () {
-  var self = DataModel
-
-  self.Metacode = Backbone.Model.extend({
-    initialize: function () {
-      var image = new Image()
-      image.crossOrigin = 'Anonymous'
-      image.src = this.get('icon')
-      this.set('image', image)
-    },
-    prepareLiForFilter: function () {
-      var li = ''
-      li += '<li data-id="' + this.id.toString() + '">'
-      li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"'
-      li += ' alt="' + this.get('name') + '" />'
-      li += '<p>' + this.get('name').toLowerCase() + '</p></li>'
-      return li
-    }
-
-  })
-  self.MetacodeCollection = Backbone.Collection.extend({
-    model: this.Metacode,
-    url: '/metacodes',
-    comparator: function (a, b) {
-      a = a.get('name').toLowerCase()
-      b = b.get('name').toLowerCase()
-      return a > b ? 1 : a < b ? -1 : 0
-    }
-  })
-
-  self.Topic = Backbone.Model.extend({
-    urlRoot: '/topics',
-    blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
-    toJSON: function (options) {
-      return _.omit(this.attributes, this.blacklist)
-    },
-    save: function (key, val, options) {
-      var attrs
-
-      // Handle both `"key", value` and `{key: value}` -style arguments.
-      if (key == null || typeof key === 'object') {
-        attrs = key
-        options = val
-      } else {
-        (attrs = {})[key] = val
-      }
-
-      var newOptions = options || {}
-      var s = newOptions.success
-
-      var permBefore = this.get('permission')
-
-      newOptions.success = function (model, response, opt) {
-        if (s) s(model, response, opt)
-        model.trigger('saved')
-        model.set('calculated_permission', model.get('permission'))
-
-        if (permBefore === 'private' && model.get('permission') !== 'private') {
-          model.trigger('noLongerPrivate')
-        }
-        else if (permBefore !== 'private' && model.get('permission') === 'private') {
-          model.trigger('nowPrivate')
-        }
-      }
-      return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-    },
-    initialize: function () {
-      if (this.isNew()) {
-        this.set({
-          'user_id': Active.Mapper.id,
-          'desc': this.get('desc') || '',
-          'link': this.get('link') || '',
-          'permission': Active.Map ? Active.Map.get('permission') : 'commons'
-        })
-      }
-
-      this.on('changeByOther', this.updateCardView)
-      this.on('change', this.updateNodeView)
-      this.on('saved', this.savedEvent)
-      this.on('nowPrivate', function () {
-        var removeTopicData = {
-          mappableid: this.id
-        }
-
-        $(document).trigger(JIT.events.removeTopic, [removeTopicData])
-      })
-      this.on('noLongerPrivate', function () {
-        var newTopicData = {
-          mappingid: this.getMapping().id,
-          mappableid: this.id
-        }
-
-        $(document).trigger(JIT.events.newTopic, [newTopicData])
-      })
-
-      this.on('change:metacode_id', Filter.checkMetacodes, this)
-    },
-    authorizeToEdit: function (mapper) {
-      if (mapper &&
-        (this.get('user_id') === mapper.get('id') ||
-         this.get('calculated_permission') === 'commons' ||
-         this.get('collaborator_ids').includes(mapper.get('id')))) {
-        return true
-      } else {
-        return false
-      }
-    },
-    authorizePermissionChange: function (mapper) {
-      if (mapper && this.get('user_id') === mapper.get('id')) return true
-      else return false
-    },
-    getDate: function () {},
-    getMetacode: function () {
-      return Metamaps.Metacodes.get(this.get('metacode_id'))
-    },
-    getMapping: function () {
-      if (!Active.Map) return false
-
-      return Metamaps.Mappings.findWhere({
-        map_id: Active.Map.id,
-        mappable_type: 'Topic',
-        mappable_id: this.isNew() ? this.cid : this.id
-      })
-    },
-    createNode: function () {
-      var mapping
-      var node = {
-        adjacencies: [],
-        id: this.isNew() ? this.cid : this.id,
-        name: this.get('name')
-      }
-
-      if (Active.Map) {
-        mapping = this.getMapping()
-        node.data = {
-          $mapping: null,
-          $mappingID: mapping.id
-        }
-      }
-
-      return node
-    },
-    updateNode: function () {
-      var mapping
-      var node = this.get('node')
-      node.setData('topic', this)
-
-      if (Active.Map) {
-        mapping = this.getMapping()
-        node.setData('mapping', mapping)
-      }
-
-      return node
-    },
-    savedEvent: function () {
-      Realtime.updateTopic(this)
-    },
-    updateViews: function () {
-      var onPageWithTopicCard = Active.Map || Active.Topic
-      var node = this.get('node')
-      // update topic card, if this topic is the one open there
-      if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
-        TopicCard.showCard(node)
-      }
-
-      // update the node on the map
-      if (onPageWithTopicCard && node) {
-        node.name = this.get('name')
-        Visualize.mGraph.plot()
-      }
-    },
-    updateCardView: function () {
-      var onPageWithTopicCard = Active.Map || Active.Topic
-      var node = this.get('node')
-      // update topic card, if this topic is the one open there
-      if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
-        TopicCard.showCard(node)
-      }
-    },
-    updateNodeView: function () {
-      var onPageWithTopicCard = Active.Map || Active.Topic
-      var node = this.get('node')
-
-      // update the node on the map
-      if (onPageWithTopicCard && node) {
-        node.name = this.get('name')
-        Visualize.mGraph.plot()
-      }
-    }
-  })
-
-  self.TopicCollection = Backbone.Collection.extend({
-    model: self.Topic,
-    url: '/topics'
-  })
-
-  self.Synapse = Backbone.Model.extend({
-    urlRoot: '/synapses',
-    blacklist: ['edge', 'created_at', 'updated_at'],
-    toJSON: function (options) {
-      return _.omit(this.attributes, this.blacklist)
-    },
-    save: function (key, val, options) {
-      var attrs
-
-      // Handle both `"key", value` and `{key: value}` -style arguments.
-      if (key == null || typeof key === 'object') {
-        attrs = key
-        options = val
-      } else {
-        (attrs = {})[key] = val
-      }
-
-      var newOptions = options || {}
-      var s = newOptions.success
-
-      var permBefore = this.get('permission')
-
-      newOptions.success = function (model, response, opt) {
-        if (s) s(model, response, opt)
-        model.trigger('saved')
-
-        if (permBefore === 'private' && model.get('permission') !== 'private') {
-          model.trigger('noLongerPrivate')
-        }
-        else if (permBefore !== 'private' && model.get('permission') === 'private') {
-          model.trigger('nowPrivate')
-        }
-      }
-      return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-    },
-    initialize: function () {
-      if (this.isNew()) {
-        this.set({
-          'user_id': Active.Mapper.id,
-          'permission': Active.Map ? Active.Map.get('permission') : 'commons',
-          'category': 'from-to'
-        })
-      }
-
-      this.on('changeByOther', this.updateCardView)
-      this.on('change', this.updateEdgeView)
-      this.on('saved', this.savedEvent)
-      this.on('noLongerPrivate', function () {
-        var newSynapseData = {
-          mappingid: this.getMapping().id,
-          mappableid: this.id
-        }
-
-        $(document).trigger(JIT.events.newSynapse, [newSynapseData])
-      })
-      this.on('nowPrivate', function () {
-        $(document).trigger(JIT.events.removeSynapse, [{
-          mappableid: this.id
-        }])
-      })
-
-      this.on('change:desc', Filter.checkSynapses, this)
-    },
-    prepareLiForFilter: function () {
-      var li = ''
-      li += '<li data-id="' + this.get('desc') + '">'
-      li += '<img src="' + Metamaps.Erb['synapse16.png'] + '"'
-      li += ' alt="synapse icon" />'
-      li += '<p>' + this.get('desc') + '</p></li>'
-      return li
-    },
-    authorizeToEdit: function (mapper) {
-      if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
-      else return false
-    },
-    authorizePermissionChange: function (mapper) {
-      if (mapper && this.get('user_id') === mapper.get('id')) return true
-      else return false
-    },
-    getTopic1: function () {
-      return Metamaps.Topics.get(this.get('topic1_id'))
-    },
-    getTopic2: function () {
-      return Metamaps.Topics.get(this.get('topic2_id'))
-    },
-    getDirection: function () {
-      var t1 = this.getTopic1(),
-        t2 = this.getTopic2()
-
-      return t1 && t2 ? [
-        t1.get('node').id,
-        t2.get('node').id
-      ] : false
-    },
-    getMapping: function () {
-      if (!Active.Map) return false
-
-      return Metamaps.Mappings.findWhere({
-        map_id: Active.Map.id,
-        mappable_type: 'Synapse',
-        mappable_id: this.isNew() ? this.cid : this.id
-      })
-    },
-    createEdge: function (providedMapping) {
-      var mapping, mappingID
-      var synapseID = this.isNew() ? this.cid : this.id
-
-      var edge = {
-        nodeFrom: this.get('topic1_id'),
-        nodeTo: this.get('topic2_id'),
-        data: {
-          $synapses: [],
-          $synapseIDs: [synapseID],
-        }
-      }
-
-      if (Active.Map) {
-        mapping = providedMapping || this.getMapping()
-        mappingID = mapping.isNew() ? mapping.cid : mapping.id
-        edge.data.$mappings = []
-        edge.data.$mappingIDs = [mappingID]
-      }
-
-      return edge
-    },
-    updateEdge: function () {
-      var mapping
-      var edge = this.get('edge')
-      edge.getData('synapses').push(this)
-
-      if (Active.Map) {
-        mapping = this.getMapping()
-        edge.getData('mappings').push(mapping)
-      }
-
-      return edge
-    },
-    savedEvent: function () {
-      Realtime.updateSynapse(this)
-    },
-    updateViews: function () {
-      this.updateCardView()
-      this.updateEdgeView()
-    },
-    updateCardView: function () {
-      var onPageWithSynapseCard = Active.Map || Active.Topic
-      var edge = this.get('edge')
-
-      // update synapse card, if this synapse is the one open there
-      if (onPageWithSynapseCard && edge == SynapseCard.openSynapseCard) {
-        SynapseCard.showCard(edge)
-      }
-    },
-    updateEdgeView: function () {
-      var onPageWithSynapseCard = Active.Map || Active.Topic
-      var edge = this.get('edge')
-
-      // update the edge on the map
-      if (onPageWithSynapseCard && edge) {
-        Visualize.mGraph.plot()
-      }
-    }
-  })
-
-  self.SynapseCollection = Backbone.Collection.extend({
-    model: self.Synapse,
-    url: '/synapses'
-  })
-
-  self.Mapping = Backbone.Model.extend({
-    urlRoot: '/mappings',
-    blacklist: ['created_at', 'updated_at'],
-    toJSON: function (options) {
-      return _.omit(this.attributes, this.blacklist)
-    },
-    initialize: function () {
-      if (this.isNew()) {
-        this.set({
-          'user_id': Active.Mapper.id,
-          'map_id': Active.Map ? Active.Map.id : null
-        })
-      }
-    },
-    getMap: function () {
-      return Map.get(this.get('map_id'))
-    },
-    getTopic: function () {
-      if (this.get('mappable_type') === 'Topic') return Topic.get(this.get('mappable_id'))
-      else return false
-    },
-    getSynapse: function () {
-      if (this.get('mappable_type') === 'Synapse') return Synapse.get(this.get('mappable_id'))
-      else return false
-    }
-  })
-
-  self.MappingCollection = Backbone.Collection.extend({
-    model: self.Mapping,
-    url: '/mappings'
-  })
-
-  Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
-
-  Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection()
-
-  Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection()
-
-  Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection()
-
-  Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : new self.MapperCollection()
-
-  // this is for topic view
-  Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
-
-  if (Active.Map) {
-    Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
-
-    Active.Map = new self.Map(Active.Map)
-  }
-
-  if (Active.Topic) Active.Topic = new self.Topic(Active.Topic)
-
-  // attach collection event listeners
-  self.attachCollectionEvents = function () {
+    // attach collection event listeners
+    Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection()
     Metamaps.Topics.on('add remove', function (topic) {
       InfoBox.updateNumbers()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
 
+    Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection()
     Metamaps.Synapses.on('add remove', function (synapse) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
@@ -649,6 +70,7 @@ DataModel.init = function () {
     })
 
     if (Active.Map) {
+      Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
       Metamaps.Mappings.on('add remove', function (mapping) {
         InfoBox.updateNumbers()
         Filter.checkSynapses()
@@ -656,8 +78,25 @@ DataModel.init = function () {
         Filter.checkMappers()
       })
     }
+
+    Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection()
+    Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : new self.MapperCollection()
+    Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
+
+    if (Active.Map) {
+      Active.Map = new self.Map(Active.Map)
+    }
+
+    if (Active.Topic) {
+      Active.Topic = new self.Topic(Active.Topic)
+    }
   }
-  self.attachCollectionEvents()
-}; // end DataModel.init
+}
+
+export {
+  Map, MapCollection, Mapper, MapperCollection, Mapping, MappingCollection,
+  Message, MessageCollection, Metacode, MetacodeCollection,
+  Synapse, SynapseCollection, Topic, TopicCollection
+}
 
 export default DataModel
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index 580aa831..e82516c2 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/frontend/src/Metamaps/GlobalUI/index.js
@@ -51,13 +51,13 @@ const GlobalUI = {
     }
     var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
     var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
-    Metamaps.Maps.Mine = new Metamaps.DataModel.MapsCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
-    Metamaps.Maps.Shared = new Metamaps.DataModel.MapsCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
-    Metamaps.Maps.Starred = new Metamaps.DataModel.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
+    Metamaps.Maps.Mine = new Metamaps.DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
+    Metamaps.Maps.Shared = new Metamaps.DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
+    Metamaps.Maps.Starred = new Metamaps.DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
     // 'Mapper' refers to another mapper
-    Metamaps.Maps.Mapper = new Metamaps.DataModel.MapsCollection(mapperCollection, mapperOptionsObj)
-    Metamaps.Maps.Featured = new Metamaps.DataModel.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
-    Metamaps.Maps.Active = new Metamaps.DataModel.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+    Metamaps.Maps.Mapper = new Metamaps.DataModel.MapCollection(mapperCollection, mapperOptionsObj)
+    Metamaps.Maps.Featured = new Metamaps.DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
+    Metamaps.Maps.Active = new Metamaps.DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
   },
   showDiv: function (selector) {
     $(selector).show()

From 0778179ba77e7e7fa048acda4022619b0cf41ee5 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 18:21:56 +0800
Subject: [PATCH 4/9] eslint

---
 frontend/src/Metamaps/DataModel/Metacode.js |  2 +-
 frontend/src/Metamaps/DataModel/Synapse.js  | 12 +++++-------
 frontend/src/Metamaps/DataModel/Topic.js    | 11 +++++------
 frontend/src/Metamaps/DataModel/index.js    |  8 ++------
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Metamaps/DataModel/Metacode.js b/frontend/src/Metamaps/DataModel/Metacode.js
index a3d523fd..f9bd06cf 100644
--- a/frontend/src/Metamaps/DataModel/Metacode.js
+++ b/frontend/src/Metamaps/DataModel/Metacode.js
@@ -4,7 +4,7 @@ import outdent from 'outdent'
 
 const Metacode = Backbone.Model.extend({
   initialize: function () {
-    var image = new Image()
+    var image = new window.Image()
     image.crossOrigin = 'Anonymous'
     image.src = this.get('icon')
     this.set('image', image)
diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js
index 2d8f4256..b9a3153b 100644
--- a/frontend/src/Metamaps/DataModel/Synapse.js
+++ b/frontend/src/Metamaps/DataModel/Synapse.js
@@ -11,7 +11,6 @@ import Realtime from '../Realtime'
 import SynapseCard from '../SynapseCard'
 import Visualize from '../Visualize'
 
-
 /*
  * Dependencies:
  *  - Metamaps.Mappings
@@ -46,8 +45,7 @@ const Synapse = Backbone.Model.extend({
 
       if (permBefore === 'private' && model.get('permission') !== 'private') {
         model.trigger('noLongerPrivate')
-      }
-      else if (permBefore !== 'private' && model.get('permission') === 'private') {
+      } else if (permBefore !== 'private' && model.get('permission') === 'private') {
         model.trigger('nowPrivate')
       }
     }
@@ -104,8 +102,8 @@ const Synapse = Backbone.Model.extend({
     return Metamaps.Topics.get(this.get('topic2_id'))
   },
   getDirection: function () {
-    var t1 = this.getTopic1(),
-      t2 = this.getTopic2()
+    var t1 = this.getTopic1()
+    var t2 = this.getTopic2()
 
     return t1 && t2 ? [
       t1.get('node').id,
@@ -130,7 +128,7 @@ const Synapse = Backbone.Model.extend({
       nodeTo: this.get('topic2_id'),
       data: {
         $synapses: [],
-        $synapseIDs: [synapseID],
+        $synapseIDs: [synapseID]
       }
     }
 
@@ -167,7 +165,7 @@ const Synapse = Backbone.Model.extend({
     var edge = this.get('edge')
 
     // update synapse card, if this synapse is the one open there
-    if (onPageWithSynapseCard && edge == SynapseCard.openSynapseCard) {
+    if (onPageWithSynapseCard && edge === SynapseCard.openSynapseCard) {
       SynapseCard.showCard(edge)
     }
   },
diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js
index 33a9bd3f..3d27814e 100644
--- a/frontend/src/Metamaps/DataModel/Topic.js
+++ b/frontend/src/Metamaps/DataModel/Topic.js
@@ -46,8 +46,7 @@ const Topic = Backbone.Model.extend({
 
       if (permBefore === 'private' && model.get('permission') !== 'private') {
         model.trigger('noLongerPrivate')
-      }
-      else if (permBefore !== 'private' && model.get('permission') === 'private') {
+      } else if (permBefore !== 'private' && model.get('permission') === 'private') {
         model.trigger('nowPrivate')
       }
     }
@@ -87,8 +86,8 @@ const Topic = Backbone.Model.extend({
   authorizeToEdit: function (mapper) {
     if (mapper &&
       (this.get('user_id') === mapper.get('id') ||
-       this.get('calculated_permission') === 'commons' ||
-       this.get('collaborator_ids').includes(mapper.get('id')))) {
+      this.get('calculated_permission') === 'commons' ||
+      this.get('collaborator_ids').includes(mapper.get('id')))) {
       return true
     } else {
       return false
@@ -148,7 +147,7 @@ const Topic = Backbone.Model.extend({
     var onPageWithTopicCard = Active.Map || Active.Topic
     var node = this.get('node')
     // update topic card, if this topic is the one open there
-    if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
+    if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
       TopicCard.showCard(node)
     }
 
@@ -162,7 +161,7 @@ const Topic = Backbone.Model.extend({
     var onPageWithTopicCard = Active.Map || Active.Topic
     var node = this.get('node')
     // update topic card, if this topic is the one open there
-    if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
+    if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
       TopicCard.showCard(node)
     }
   },
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index 4ee6d10d..45da7156 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -49,7 +49,7 @@ const DataModel = {
   Mapping: Mapping,
   MappingCollection: MappingCollection,
 
-  init: function() {
+  init: function () {
     var self = DataModel
 
     Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
@@ -93,10 +93,6 @@ const DataModel = {
   }
 }
 
-export {
-  Map, MapCollection, Mapper, MapperCollection, Mapping, MappingCollection,
-  Message, MessageCollection, Metacode, MetacodeCollection,
-  Synapse, SynapseCollection, Topic, TopicCollection
-}
+export { Map, MapCollection, Mapper, MapperCollection, Mapping, MappingCollection, Message, MessageCollection, Metacode, MetacodeCollection, Synapse, SynapseCollection, Topic, TopicCollection }
 
 export default DataModel

From 4b500a4428518acbe5ac9bfef5e95bb54205ca1d Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 21:10:41 +0800
Subject: [PATCH 5/9] move Metamaps.Loading into node modules

---
 app/views/layouts/_foot.html.erb              | 27 +++++--------------
 .../src/Metamaps/DataModel/MapCollection.js   |  9 +++----
 frontend/src/Metamaps/DataModel/index.js      |  1 -
 frontend/src/Metamaps/GlobalUI/Search.js      |  3 +--
 frontend/src/Metamaps/Loading.js              | 20 ++++++++++++++
 frontend/src/Metamaps/Map/index.js            |  4 +--
 frontend/src/Metamaps/Router.js               |  6 ++---
 frontend/src/Metamaps/Views/ExploreMaps.js    |  6 ++---
 frontend/src/Metamaps/Visualize.js            |  4 +--
 frontend/src/Metamaps/index.js                |  2 ++
 10 files changed, 41 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/Metamaps/Loading.js

diff --git a/app/views/layouts/_foot.html.erb b/app/views/layouts/_foot.html.erb
index 1f5ad1c8..ebcc38c2 100644
--- a/app/views/layouts/_foot.html.erb
+++ b/app/views/layouts/_foot.html.erb
@@ -2,28 +2,13 @@
 <%= render :partial => 'layouts/templates' %>
 <%= render :partial => 'shared/metacodeBgColors' %>
 <script type="text/javascript" charset="utf-8">
-    // TODO move this into Metamaps.ServerData somehow
-    <% if current_user %>
-        Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
-    <% else %>
-        Metamaps.Active.Mapper = null;
-    <% end %>
+  <% if current_user %>
+    Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
+  <% else %>
+    Metamaps.Active.Mapper = null;
+  <% end %>
 
-    // TODO move this into frontend/
-    Metamaps.Loading = {
-        loader: new CanvasLoader('loading'),
-        hide: function () {
-          $('#loading').hide();
-        },
-        show: function () {
-          $('#loading').show();
-        }
-    };
-    Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
-    Metamaps.Loading.loader.setDiameter(28); // default is 40
-    Metamaps.Loading.loader.setDensity(41); // default is 40
-    Metamaps.Loading.loader.setRange(0.9); // default is 1.3
-    Metamaps.Loading.loader.show(); // Hidden by default
+  Metamaps.Loading.setup()
 </script>
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
 </body>
diff --git a/frontend/src/Metamaps/DataModel/MapCollection.js b/frontend/src/Metamaps/DataModel/MapCollection.js
index f72e1e0e..a08309df 100644
--- a/frontend/src/Metamaps/DataModel/MapCollection.js
+++ b/frontend/src/Metamaps/DataModel/MapCollection.js
@@ -3,12 +3,9 @@
 import Backbone from 'backbone'
 Backbone.$ = window.$
 
-import Map from './Map'
+import Loading from '../Loading'
 
-/*
- * Dependencies:
- *  - Metamaps.Loading
- */
+import Map from './Map'
 
 const MapCollection = Backbone.Collection.extend({
   model: Map,
@@ -50,7 +47,7 @@ const MapCollection = Backbone.Collection.extend({
   getMaps: function (cb) {
     var self = this
 
-    Metamaps.Loading.show()
+    Loading.show()
 
     if (this.page !== 'loadedAll') {
       var numBefore = this.length
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index 45da7156..fb80c268 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -25,7 +25,6 @@ import MappingCollection from './MappingCollection'
  * Dependencies:
  *  - Metamaps.Collaborators
  *  - Metamaps.Creators
- *  - Metamaps.Loading
  *  - Metamaps.Mappers
  *  - Metamaps.Mappings
  *  - Metamaps.Metacodes
diff --git a/frontend/src/Metamaps/GlobalUI/Search.js b/frontend/src/Metamaps/GlobalUI/Search.js
index 7ad1fbc1..82293ac3 100644
--- a/frontend/src/Metamaps/GlobalUI/Search.js
+++ b/frontend/src/Metamaps/GlobalUI/Search.js
@@ -18,8 +18,7 @@ const Search = {
   init: function () {
     var self = Search
 
-    // TODO does this overlap with Metamaps.Loading?
-    // devin sez: I'd like to remove Metamaps.Loading from the rails code
+    // this is similar to Metamaps.Loading, but it's for the search element
     var loader = new CanvasLoader('searchLoading')
     loader.setColor('#4fb5c0') // default is '#000000'
     loader.setDiameter(24) // default is 40
diff --git a/frontend/src/Metamaps/Loading.js b/frontend/src/Metamaps/Loading.js
new file mode 100644
index 00000000..97275547
--- /dev/null
+++ b/frontend/src/Metamaps/Loading.js
@@ -0,0 +1,20 @@
+/* global CanvasLoader, $ */
+
+const Loading = {
+  loader: new CanvasLoader('loading'),
+  hide: function () {
+    $('#loading').hide();
+  },
+  show: function () {
+    $('#loading').show();
+  },
+  setup: function () {
+    Loading.loader.setColor('#4fb5c0'); // default is '#000000'
+    Loading.loader.setDiameter(28); // default is 40
+    Loading.loader.setDensity(41); // default is 40
+    Loading.loader.setRange(0.9); // default is 1.3
+    Loading.loader.show(); // Hidden by default
+  }
+}
+
+export default Loading
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index bcf4397b..6bd4f00a 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -8,6 +8,7 @@ import Create from '../Create'
 import Filter from '../Filter'
 import GlobalUI from '../GlobalUI'
 import JIT from '../JIT'
+import Loading from '../Loading'
 import Realtime from '../Realtime'
 import Router from '../Router'
 import Selected from '../Selected'
@@ -24,7 +25,6 @@ import InfoBox from './InfoBox'
  * Dependencies:
  *  - Metamaps.DataModel
  *  - Metamaps.Erb
- *  - Metamaps.Loading
  *  - Metamaps.Mappers
  *  - Metamaps.Mappings
  *  - Metamaps.Maps
@@ -136,7 +136,7 @@ const Map = {
       Filter.checkMappers()
 
       Realtime.startActiveMap()
-      Metamaps.Loading.hide()
+      Loading.hide()
       
       // for mobile
       $('#header_content').html(map.get('name'))
diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js
index 8bbd6949..f55fab48 100644
--- a/frontend/src/Metamaps/Router.js
+++ b/frontend/src/Metamaps/Router.js
@@ -6,6 +6,7 @@ import Backbone from 'backbone'
 
 import Active from './Active'
 import GlobalUI from './GlobalUI'
+import Loading from './Loading'
 import Map from './Map'
 import Topic from './Topic'
 import Views from './Views'
@@ -15,7 +16,6 @@ import Visualize from './Visualize'
  * Metamaps.Router.js.erb
  *
  * Dependencies:
- *  - Metamaps.Loading
  *  - Metamaps.Maps
  */
 
@@ -134,7 +134,7 @@ const _Router = Backbone.Router.extend({
       self.timeoutId = setTimeout(navigate, 300)
     }
     if (Metamaps.Maps[capitalize].length === 0) {
-      Metamaps.Loading.show()
+      Loading.show()
       Views.ExploreMaps.pending = true
       setTimeout(function () {
         Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
@@ -178,7 +178,7 @@ const _Router = Backbone.Router.extend({
     Topic.end()
     Active.Topic = null
 
-    Metamaps.Loading.show()
+    Loading.show()
     Map.end()
     Map.launch(id)
   },
diff --git a/frontend/src/Metamaps/Views/ExploreMaps.js b/frontend/src/Metamaps/Views/ExploreMaps.js
index aa74626c..52d47ff3 100644
--- a/frontend/src/Metamaps/Views/ExploreMaps.js
+++ b/frontend/src/Metamaps/Views/ExploreMaps.js
@@ -6,12 +6,9 @@ import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
 import Active from '../Active'
 import GlobalUI from '../GlobalUI'
 import Realtime from '../Realtime'
+import Loading from '../Loading'
 import Maps from '../../components/Maps'
 
-/*
- *  - Metamaps.Loading
- */
-
 const ExploreMaps = {
   pending: false,
   mapper: null,
@@ -63,6 +60,7 @@ const ExploreMaps = {
     ).resize()
 
     if (cb) cb()
+    Loading.hide()
   },
   loadMore: function () {
     var self = ExploreMaps
diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js
index a70ae21c..c5323972 100644
--- a/frontend/src/Metamaps/Visualize.js
+++ b/frontend/src/Metamaps/Visualize.js
@@ -6,6 +6,7 @@ import $jit from '../patched/JIT'
 
 import Active from './Active'
 import JIT from './JIT'
+import Loading from './Loading'
 import Router from './Router'
 import TopicCard from './TopicCard'
 
@@ -13,7 +14,6 @@ import TopicCard from './TopicCard'
  * Metamaps.Visualize
  *
  * Dependencies:
- *  - Metamaps.Loading
  *  - Metamaps.Metacodes
  *  - Metamaps.Synapses
  *  - Metamaps.Topics
@@ -161,7 +161,7 @@ const Visualize = {
     if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
 
     function runAnimation () {
-      Metamaps.Loading.hide()
+      Loading.hide()
       // load JSON data, if it's not empty
       if (!self.loadLater) {
         // load JSON data.
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index 5dc99aa5..5611a478 100644
--- a/frontend/src/Metamaps/index.js
+++ b/frontend/src/Metamaps/index.js
@@ -15,6 +15,7 @@ import GlobalUI, {
 import Import from './Import'
 import JIT from './JIT'
 import Listeners from './Listeners'
+import Loading from './Loading'
 import Map, { CheatSheet, InfoBox } from './Map'
 import Mapper from './Mapper'
 import Mobile from './Mobile'
@@ -51,6 +52,7 @@ Metamaps.GlobalUI.ImportDialog = ImportDialog
 Metamaps.Import = Import
 Metamaps.JIT = JIT
 Metamaps.Listeners = Listeners
+Metamaps.Loading = Loading
 Metamaps.Map = Map
 Metamaps.Map.CheatSheet = CheatSheet
 Metamaps.Map.InfoBox = InfoBox

From 80269697994312aad39feb15ac849f2db6f06a78 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 21:41:05 +0800
Subject: [PATCH 6/9] start storing data in ServerData

---
 app/views/layouts/_foot.html.erb         |  4 +-
 app/views/maps/show.html.erb             | 19 +++++----
 app/views/topics/show.html.erb           | 29 +++++--------
 frontend/src/Metamaps/Active.js          | 13 +++++-
 frontend/src/Metamaps/DataModel/index.js | 53 ++++++++++++------------
 frontend/src/Metamaps/index.js           |  6 +--
 6 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/app/views/layouts/_foot.html.erb b/app/views/layouts/_foot.html.erb
index ebcc38c2..e309c65f 100644
--- a/app/views/layouts/_foot.html.erb
+++ b/app/views/layouts/_foot.html.erb
@@ -3,9 +3,9 @@
 <%= render :partial => 'shared/metacodeBgColors' %>
 <script type="text/javascript" charset="utf-8">
   <% if current_user %>
-    Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
+    Metamaps.ServerData.ActiveMapper = <%= current_user.to_json.html_safe %>
   <% else %>
-    Metamaps.Active.Mapper = null;
+    Metamaps.ServerData.ActiveMapper = null
   <% end %>
 
   Metamaps.Loading.setup()
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 8bdbfdee..ae391d6d 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -9,13 +9,14 @@
 <script>
 	Metamaps.currentSection = "map";
 	Metamaps.currentPage = <%= @map.id.to_s %>;
-    Metamaps.Active.Map = <%= @map.to_json.html_safe %>;
-    Metamaps.Mappers = <%= @allmappers.to_json.html_safe %>;
-    Metamaps.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
-    Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
-    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
-    Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;
-    Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
-    Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
-    Metamaps.Visualize.type = "ForceDirected";
+  Metamaps.ServerData = Metamaps.ServerData || {}
+  Metamaps.ServerData.ActiveMap = <%= @map.to_json.html_safe %>;
+  Metamaps.ServerData.Mappers = <%= @allmappers.to_json.html_safe %>;
+  Metamaps.ServerData.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
+  Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
+  Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
+  Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
+  Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
+  Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.Visualize.type = "ForceDirected";
 </script>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index 02a147c4..119f2f40 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -1,27 +1,20 @@
 <%#
+#
 # @file
-# This shows a topic view. It is used.
-# The first commented out section used to be a card at the top showing all
-# info. Now we're moving towards most screens looking the same. The
-# consequence of accessing data from this view is that you can't remove
-# the topic that corresponds to the page you're on. Originally, accessing this
-# page showed the topic with its neighbours arrayed around. Now it shows the
-# same, but there's no cues to say which topic's page you're on. So when the
-# map recenters on a new topic, it's like you're on that topic's page.
-# Nice, but the URL and being unable to remove the root node still hamper that
-# experience.
+# This shows a topic and its siblings.
 # URL: /topics/<topicid>
 #
-#%>
+%>
 
 <% content_for :title, @topic.name + " | Metamaps" %> 
 <% content_for :mobile_title, @topic.name %> 
 <script>
-    Metamaps.currentSection = "topic";
-    Metamaps.currentPage = <%= @topic.id.to_s %>;
-    Metamaps.Active.Topic = <%= @topic.to_json(user: current_user).html_safe %>;
-    Metamaps.Creators = <%= @allcreators.to_json.html_safe %>;
-    Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
-    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
-    Metamaps.Visualize.type = "RGraph";
+  Metamaps.currentSection = "topic"
+  Metamaps.currentPage = <%= @topic.id.to_s %>
+  Metamaps.ServerData = Metamaps.ServerData || {}
+  Metamaps.ServerData.ActiveTopic = <%= @topic.to_json(user: current_user).html_safe %>
+  Metamaps.ServerData.Creators = <%= @allcreators.to_json.html_safe %>
+  Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>
+  Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>
+  Metamaps.ServerData.VisualizeType = "RGraph"
 </script>
diff --git a/frontend/src/Metamaps/Active.js b/frontend/src/Metamaps/Active.js
index c61a8bb9..fe8bda6d 100644
--- a/frontend/src/Metamaps/Active.js
+++ b/frontend/src/Metamaps/Active.js
@@ -1,7 +1,16 @@
+import DataModelMap from './DataModel/Map'
+import DataModelMapper from './DataModel/Mapper'
+import DataModelTopic from './DataModel/Topic'
+
 const Active = {
   Map: null,
+  Mapper: null,
   Topic: null,
-  Mapper: null
-};
+  init: function(serverData) {
+    if (serverData.Map) Active.Map = new DataModelMap(severData.ActiveMap)
+    if (serverData.Mapper) Active.Mapper = new DataModelMapper(serverData.ActiveMapper)
+    if (serverData.Topic) Active.Topic = new DataModelTopic(serverData.ActiveTopic)
+  }
+}
 
 export default Active
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index fb80c268..bd9cc342 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -48,50 +48,51 @@ const DataModel = {
   Mapping: Mapping,
   MappingCollection: MappingCollection,
 
-  init: function () {
+  Metacodes: new MetacodeCollection(),
+  Topics: new TopicCollection(),
+  Synapses: new SynapseCollection(),
+  Mappings: new MappingCollection(),
+  Mappers: new MapperCollection(),
+  Collaborators: new MapperCollection(),
+  Creators: new MapperCollection(),
+
+  init: function (serverData) {
     var self = DataModel
 
-    Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
+    if (serverData.Metacodes) self.Metacodes = new MetacodeCollection(serverData.Metacodes)
 
     // attach collection event listeners
-    Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection()
-    Metamaps.Topics.on('add remove', function (topic) {
+    if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics)
+    self.Topics.on('add remove', function (topic) {
       InfoBox.updateNumbers()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
 
-    Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection()
-    Metamaps.Synapses.on('add remove', function (synapse) {
+    if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
+    self.Synapses.on('add remove', function (synapse) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMappers()
     })
 
-    if (Active.Map) {
-      Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
-      Metamaps.Mappings.on('add remove', function (mapping) {
-        InfoBox.updateNumbers()
-        Filter.checkSynapses()
-        Filter.checkMetacodes()
-        Filter.checkMappers()
-      })
-    }
+    if (serverData.Mappings) self.Mappings = new MappingCollection(serverData.Mappings)
+    self.Mappings.on('add remove', function (mapping) {
+      InfoBox.updateNumbers()
+      Filter.checkSynapses()
+      Filter.checkMetacodes()
+      Filter.checkMappers()
+    })
 
-    Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection()
-    Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : new self.MapperCollection()
-    Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
-
-    if (Active.Map) {
-      Active.Map = new self.Map(Active.Map)
-    }
-
-    if (Active.Topic) {
-      Active.Topic = new self.Topic(Active.Topic)
-    }
+    if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
+    if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
+    if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
   }
 }
 
+// Note: Topics, Metacodes, Synapses, Mappers, Mappings, Collaborators, Creators are not exported
+// You can access them by importing DataModel
+
 export { Map, MapCollection, Mapper, MapperCollection, Mapping, MappingCollection, Message, MessageCollection, Metacode, MetacodeCollection, Synapse, SynapseCollection, Topic, TopicCollection }
 
 export default DataModel
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index 5611a478..012af50b 100644
--- a/frontend/src/Metamaps/index.js
+++ b/frontend/src/Metamaps/index.js
@@ -10,7 +10,7 @@ import Create from './Create'
 import Debug from './Debug'
 import Filter from './Filter'
 import GlobalUI, {
-  Search, CreateMap, ImportDialog, Account as GlobalUI_Account
+  Search, CreateMap, ImportDialog, Account as GlobalUIAccount
 } from './GlobalUI'
 import Import from './Import'
 import JIT from './JIT'
@@ -47,7 +47,7 @@ Metamaps.Filter = Filter
 Metamaps.GlobalUI = GlobalUI
 Metamaps.GlobalUI.Search = Search
 Metamaps.GlobalUI.CreateMap = CreateMap
-Metamaps.GlobalUI.Account = GlobalUI_Account
+Metamaps.GlobalUI.Account = GlobalUIAccount
 Metamaps.GlobalUI.ImportDialog = ImportDialog
 Metamaps.Import = Import
 Metamaps.JIT = JIT
@@ -83,7 +83,7 @@ document.addEventListener('DOMContentLoaded', function () {
       Metamaps[prop].hasOwnProperty('init') &&
       typeof (Metamaps[prop].init) === 'function'
     ) {
-      Metamaps[prop].init()
+      Metamaps[prop].init(Metamaps.ServerData)
     }
   }
   // load whichever page you are on

From 7c9b6a220541c150556f0dc69c9f69aa85f0ffff Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 22:28:00 +0800
Subject: [PATCH 7/9] try to move all rails data into Metamaps.ServerData

Metamaps.Erb and currentPage and currentSection are still not in; should they be?
---
 app/views/explore/active.html.erb             |   4 +-
 app/views/explore/featured.html.erb           |   4 +-
 app/views/explore/mapper.html.erb             |  10 +-
 app/views/explore/mine.html.erb               |   4 +-
 app/views/explore/shared.html.erb             |   4 +-
 app/views/explore/starred.html.erb            |   4 +-
 app/views/layouts/_templates.html.erb         | 280 +++++++++---------
 app/views/main/home.html.erb                  |   5 +-
 app/views/maps/show.html.erb                  |   2 +-
 app/views/shared/_switchmetacodes.html.erb    |   4 +-
 frontend/src/Metamaps/Control.js              |  27 +-
 frontend/src/Metamaps/Create.js               |  18 +-
 .../src/Metamaps/DataModel/MapCollection.js   |   2 -
 frontend/src/Metamaps/DataModel/Synapse.js    |  12 +-
 frontend/src/Metamaps/DataModel/Topic.js      |  12 +-
 frontend/src/Metamaps/DataModel/index.js      |  50 ++--
 frontend/src/Metamaps/Filter.js               |  29 +-
 frontend/src/Metamaps/GlobalUI/CreateMap.js   |  14 +-
 frontend/src/Metamaps/GlobalUI/Search.js      |   1 -
 frontend/src/Metamaps/GlobalUI/index.js       |  38 ++-
 frontend/src/Metamaps/Import.js               |  42 +--
 frontend/src/Metamaps/JIT.js                  |  21 +-
 frontend/src/Metamaps/Map/InfoBox.js          |  36 +--
 frontend/src/Metamaps/Map/index.js            |  49 ++-
 frontend/src/Metamaps/Mapper.js               |   7 +-
 frontend/src/Metamaps/Realtime/receivable.js  |  29 +-
 frontend/src/Metamaps/Router.js               |  34 +--
 frontend/src/Metamaps/Synapse.js              |  46 ++-
 frontend/src/Metamaps/Topic.js                |  92 +++---
 frontend/src/Metamaps/TopicCard.js            |  11 +-
 frontend/src/Metamaps/Views/ExploreMaps.js    |   2 +-
 frontend/src/Metamaps/Views/Room.js           |  12 +-
 frontend/src/Metamaps/Visualize.js            |  27 +-
 33 files changed, 417 insertions(+), 515 deletions(-)

diff --git a/app/views/explore/active.html.erb b/app/views/explore/active.html.erb
index 0ca442e5..fd9ebe68 100644
--- a/app/views/explore/active.html.erb
+++ b/app/views/explore/active.html.erb
@@ -5,11 +5,11 @@
    # %>
 
 <script>
-  Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
-  Metamaps.currentPage = "active";
   <% content_for :title, "Explore Active Maps | Metamaps" %>
   <% content_for :mobile_title, "Recently Active" %>
 
   Metamaps.currentSection = "explore";
+  Metamaps.currentPage = "active";
+  Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/featured.html.erb b/app/views/explore/featured.html.erb
index 806b2fac..15ab97fc 100644
--- a/app/views/explore/featured.html.erb
+++ b/app/views/explore/featured.html.erb
@@ -5,11 +5,11 @@
    # %>
 
 <script>
-  Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
-  Metamaps.currentPage = "featured";
   <% content_for :title, "Explore Featured Maps | Metamaps" %>
   <% content_for :mobile_title, "Featured Maps" %>
 
   Metamaps.currentSection = "explore";
+  Metamaps.currentPage = "featured";
+  Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/mapper.html.erb b/app/views/explore/mapper.html.erb
index 68792f47..7669b808 100644
--- a/app/views/explore/mapper.html.erb
+++ b/app/views/explore/mapper.html.erb
@@ -5,14 +5,14 @@
    # %>
 
 <script>
-  Metamaps.Maps.Mapper = {
-    models: <%= @maps.to_json.html_safe %>,
-    id: <%= params[:id] %>
-  };
-  Metamaps.currentPage = "mapper";
   <% content_for :title, @user.name + " | Metamaps" %>
   <% content_for :mobile_title, @user.name %>
 
   Metamaps.currentSection = "explore";
+  Metamaps.currentPage = "mapper";
+  Metamaps.Maps.Mapper = {
+    models: <%= @maps.to_json.html_safe %>,
+    id: <%= params[:id] %>
+  };
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/mine.html.erb b/app/views/explore/mine.html.erb
index 8e39c296..8bf2da6f 100644
--- a/app/views/explore/mine.html.erb
+++ b/app/views/explore/mine.html.erb
@@ -5,11 +5,11 @@
    # %>
 
 <script>
-  Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
-  Metamaps.currentPage = "mine";
   <% content_for :title, "Explore My Maps | Metamaps" %>
   <% content_for :mobile_title, "My Maps" %>
 
+  Metamaps.currentPage = "mine";
   Metamaps.currentSection = "explore";
+  Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/shared.html.erb b/app/views/explore/shared.html.erb
index 246498a0..a47757ec 100644
--- a/app/views/explore/shared.html.erb
+++ b/app/views/explore/shared.html.erb
@@ -5,11 +5,11 @@
    # %>
 
 <script>
-  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
-  Metamaps.currentPage = "shared";
   <% content_for :title, "Explore Shared Maps | Metamaps" %>
   <% content_for :mobile_title, "Shared With Me" %>
 
+  Metamaps.currentPage = "shared";
   Metamaps.currentSection = "explore";
+  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/starred.html.erb b/app/views/explore/starred.html.erb
index 825dbf5d..83c8de13 100644
--- a/app/views/explore/starred.html.erb
+++ b/app/views/explore/starred.html.erb
@@ -5,11 +5,11 @@
    # %>
 
 <script>
-  Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>;
-  Metamaps.currentPage = "starred";
   <% content_for :title, "Starred Maps | Metamaps" %>
   <% content_for :mobile_title, "Starred Maps" %>
 
+  Metamaps.currentPage = "starred";
   Metamaps.currentSection = "explore";
+  Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index 921a7d88..9e298b3c 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -4,50 +4,49 @@
   #%>
 
 <div class="templates">
-    
-    <script type="text/template" id="mapInfoBoxTemplate">
-  <div class="requestTitle">Click here to name this map!</div>
-  <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
+  <script type="text/template" id="mapInfoBoxTemplate">
+    <div class="requestTitle">Click here to name this map!</div>
+    <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
   
-  <div class="mapInfoStat">
-    <div class="infoStatIcon mapContributors hoverForTip">
-      <img id="mapContribs" class="{{contributors_class}}"
-        width="25" height="25" src="{{contributor_image}}" />
-      <span class="count">{{contributor_count}}</span>
-      <div class="tip">{{{contributor_list}}}</div>
-    </div>
-    <div class="infoStatIcon mapTopics">
-      {{topic_count}}
-    </div>
-    <div class="infoStatIcon mapSynapses">
-      {{synapse_count}}
-    </div>
-    <div class="infoStatIcon mapPermission {{permission}} hoverForTip">
-      {{{map_creator_tip}}}
-    </div>
-    <div class="clearfloat"></div>
-  </div>
-  <div class="mapInfoDesc" id="mapInfoDesc">
-    {{{desc}}}
-  </div>
-  
-  <div class="mapInfoMeta">
-    <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
-    <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
-    <div class="mapInfoButtonsWrapper">
-      <div class="mapInfoDelete">
-        <div class="deleteMap"></div>
-        <span>Delete</span>
+    <div class="mapInfoStat">
+      <div class="infoStatIcon mapContributors hoverForTip">
+        <img id="mapContribs" class="{{contributors_class}}"
+          width="25" height="25" src="{{contributor_image}}" />
+        <span class="count">{{contributor_count}}</span>
+        <div class="tip">{{{contributor_list}}}</div>
       </div>
-      <div class="mapInfoShare">
-        <div class="mapInfoShareIcon"></div>
-        <span>Share</span>
+      <div class="infoStatIcon mapTopics">
+        {{topic_count}}
+      </div>
+      <div class="infoStatIcon mapSynapses">
+        {{synapse_count}}
+      </div>
+      <div class="infoStatIcon mapPermission {{permission}} hoverForTip">
+        {{{map_creator_tip}}}
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    <div class="mapInfoDesc" id="mapInfoDesc">
+      {{{desc}}}
+    </div>
+  
+    <div class="mapInfoMeta">
+      <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
+      <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
+      <div class="mapInfoButtonsWrapper">
+        <div class="mapInfoDelete">
+          <div class="deleteMap"></div>
+          <span>Delete</span>
+        </div>
+        <div class="mapInfoShare">
+          <div class="mapInfoShareIcon"></div>
+          <span>Share</span>
+        </div>
       </div>
     </div>
-  </div>
-    </script>
+  </script>
         
-    <script type="text/template" id="topicSearchTemplate">
+  <script type="text/template" id="topicSearchTemplate">
     <div class="result{{rtype}}">
       <div class="topicMetacode searchResIconWrapper">
         <img src="{{typeImageURL}}" class="topicIcon" />
@@ -68,17 +67,17 @@
           {{synapseCount}}
         </div>
         <div class="topicOriginatorIcon hoverForTip">
-            <img width="18" height="18" src="{{originatorImage}}">
-            <span class="tip topicOriginator">{{originator}}</span>
+          <img width="18" height="18" src="{{originatorImage}}">
+          <span class="tip topicOriginator">{{originator}}</span>
         </div>
         <div class="topicPermission {{permission}}">
         </div>
       </div>
       <div class="clearfloat"></div>
     </div>
-    </script>
+  </script>
 
-    <script type="text/template" id="mapSearchTemplate">
+  <script type="text/template" id="mapSearchTemplate">
     <div class="result{{rtype}}">
       <div class="searchResIconWrapper">
         <img class="icon" src="<%= asset_path('metamap36c.png') %>">
@@ -95,7 +94,7 @@
           {{synapseCount}}
         </div>
         <div class="mapContributorsIcon hoverForTip">
-            <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
+          <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
           <div class="tip"> 
             <ul>
               {{{contributorTip}}}
@@ -108,9 +107,9 @@
       </div>
       <div class="clearfloat"></div>
     </div>
-    </script>
+  </script>
 
-    <script type="text/template" id="mapperSearchTemplate">
+  <script type="text/template" id="mapperSearchTemplate">
     <div class="result{{rtype}}">
       <div class="searchResIconWrapper">
         <img class="icon" width="32" height="32" src="{{profile}}">
@@ -131,9 +130,9 @@
       </div>
       <div class="clearfloat"></div>
     </div>
-    </script>
+  </script>
 
-    <script type="text/template" id="collaboratorSearchTemplate">
+  <script type="text/template" id="collaboratorSearchTemplate">
     <div class="collabResult">
       <div class="collabIconWrapper">
         <img class="icon" width="25" height="25" src="{{profile}}">
@@ -143,95 +142,106 @@
       </div>
       <div class="clearfloat"></div>
     </div>
-    </script>
+  </script>
 
-    <script type="text/template" id="synapseAutocompleteTemplate">
-      <div class="result{{rtype}}">
-        <p class="autocompleteSection synapseDesc">{{label}}</p>
-        <div class="synapseMetadata">
-          <div class="synapseOriginatorIcon hoverForTip">
-              <img width="24" height="24" src="{{originatorImage}}" />
-              <span class="tooltips synapseOriginator">{{originator}}</span>
-          </div>
-          <div class="synapsePermission {{permission}}"></div>
+  <script type="text/template" id="synapseAutocompleteTemplate">
+    <div class="result{{rtype}}">
+      <p class="autocompleteSection synapseDesc">{{label}}</p>
+      <div class="synapseMetadata">
+        <div class="synapseOriginatorIcon hoverForTip">
+          <img width="24" height="24" src="{{originatorImage}}" />
+          <span class="tooltips synapseOriginator">{{originator}}</span>
         </div>
-        <div class="clearfloat"></div>
+        <div class="synapsePermission {{permission}}"></div>
       </div>
-    </script>
-
-    <script type="text/template" id="topicAutocompleteTemplate">
-      <div>
-        <img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
-        <p class="autocompleteSection topicTitle">{{label}}</p>
-        <div class="expandTopicMetadata"></div>
-        <div class="topicMetadata">
-          <div class="topicNumMaps">{{mapCount}}</div>
-          <div class="topicNumSynapses">{{synapseCount}}</div>
-          <div class="topicOriginatorIcon hoverForTip">
-              <img width="24" height="24" src="{{originatorImage}}" />
-              <span class="tooltips topicOriginator">{{originator}}</span>
-          </div>
-          <div class="topicPermission {{permission}}"></div>
-        </div>
-        <div class="clearfloat"></div>
-      </div>
-    </script>
-
-
-    <script type="text/template" id="topicCardTemplate">
-    <div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
-        <span class="title"> 
-            <div class="titleWrapper" id="titleActivator">      
-              <span class="best_in_place best_in_place_name"                      
-                    data-bip-url="/topics/{{id}}"                                     
-                    data-bip-object="topic"                                           
-                    data-bip-attribute="name"
-                    data-bip-activator="#titleActivator"           
-                    data-bip-value="{{name}}"
-                    data-bip-type="textarea">{{name}}</span>
-            </div> 
-        </span>
-        <div class="links">
-            <div class="linkItem icon">
-                <div class="metacodeTitle {{metacode_class}}">
-                  {{metacode}}
-                  <div class="expandMetacodeSelect"></div>
-                </div>
-                <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
-                <div class="metacodeSelect">{{{metacode_select}}}</div>
-            </div>
-            <div class="linkItem contributor">
-                <a href="/explore/mapper/{{userid}}" target="_blank"><img src="<%= asset_path('user.png') %>" class="contributorIcon" width="32" height="32" /></a>
-                <div class="contributorName">{{username}}</div>
-            </div>
-            <div class="linkItem mapCount">                  
-                <div class="mapCountIcon"></div>
-                {{map_count}} 
-                <div class ="hoverTip">Click to see which maps topic appears on</div>
-                <div class="tip"><ul>{{{inmaps}}}</ul></div>                              
-            </div>
-
-            <a href="/topics/{{id}}" target="_blank" class="linkItem synapseCount">
-              <div class="synapseCountIcon"></div>
-              {{synapse_count}}
-              <div class="tip">Click to see this topics synapses</div>
-            </a>
-            <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
-            <div class="clearfloat"></div>
-        </div>
-        <div class="scroll">
-            <div class="desc">
-                <span class="best_in_place best_in_place_desc" data-bip-url="/topics/{{id}}" data-bip-object="topic" data-bip-nil="{{desc_nil}}" data-bip-attribute="desc" data-bip-type="textarea" data-bip-value="{{desc_markdown}}">{{{desc_html}}}</span>
-                <div class="clearfloat"></div>
-            </div>
-        </div>
-        <div class="embeds">
-           {{{embeds}}}
-        </div>
-        <div class="attachments {{attachmentsHidden}}">
-            {{{attachments}}}
-        </div>
-        <div class="clearfloat"></div>
+      <div class="clearfloat"></div>
     </div>
-    </script>
+  </script>
+
+  <script type="text/template" id="topicAutocompleteTemplate">
+    <div>
+      <img class="autocompleteSection topicType" width="24" height="24"
+        src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
+      <p class="autocompleteSection topicTitle">{{label}}</p>
+      <div class="expandTopicMetadata"></div>
+      <div class="topicMetadata">
+        <div class="topicNumMaps">{{mapCount}}</div>
+        <div class="topicNumSynapses">{{synapseCount}}</div>
+        <div class="topicOriginatorIcon hoverForTip">
+          <img width="24" height="24" src="{{originatorImage}}" />
+          <span class="tooltips topicOriginator">{{originator}}</span>
+        </div>
+        <div class="topicPermission {{permission}}"></div>
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+  </script>
+
+  <script type="text/template" id="topicCardTemplate">
+    <div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
+      <span class="title"> 
+        <div class="titleWrapper" id="titleActivator">      
+          <span class="best_in_place best_in_place_name"                      
+            data-bip-url="/topics/{{id}}"                                     
+            data-bip-object="topic"                                           
+            data-bip-attribute="name"
+            data-bip-activator="#titleActivator"           
+            data-bip-value="{{name}}"
+            data-bip-type="textarea"
+          >
+            {{name}}
+          </span>
+        </div> 
+      </span>
+      <div class="links">
+        <div class="linkItem icon">
+          <div class="metacodeTitle {{metacode_class}}">
+            {{metacode}}
+          <div class="expandMetacodeSelect"></div>
+        </div>
+        <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
+        <div class="metacodeSelect">{{{metacode_select}}}</div>
+      </div>
+      <div class="linkItem contributor">
+        <a href="/explore/mapper/{{userid}}" target="_blank"><img src="<%= asset_path('user.png') %>" class="contributorIcon" width="32" height="32" /></a>
+        <div class="contributorName">{{username}}</div>
+      </div>
+      <div class="linkItem mapCount">                  
+        <div class="mapCountIcon"></div>
+        {{map_count}} 
+        <div class ="hoverTip">Click to see which maps topic appears on</div>
+        <div class="tip"><ul>{{{inmaps}}}</ul></div>                              
+      </div>
+
+      <a href="/topics/{{id}}" target="_blank" class="linkItem synapseCount">
+        <div class="synapseCountIcon"></div>
+        {{synapse_count}}
+        <div class="tip">Click to see this topics synapses</div>
+      </a>
+      <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
+      <div class="clearfloat"></div>
+      <div class="scroll">
+        <div class="desc">
+          <span class="best_in_place best_in_place_desc"
+                data-bip-url="/topics/{{id}}"
+                data-bip-object="topic"
+                data-bip-nil="{{desc_nil}}"
+                data-bip-attribute="desc"
+                data-bip-type="textarea"
+                data-bip-value="{{desc_markdown}}"
+          >
+            {{{desc_html}}}
+          </span>
+          <div class="clearfloat"></div>
+        </div>
+      </div>
+      <div class="embeds">
+        {{{embeds}}}
+      </div>
+      <div class="attachments {{attachmentsHidden}}">
+        {{{attachments}}}
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+  </script>
 </div>
diff --git a/app/views/main/home.html.erb b/app/views/main/home.html.erb
index d6e99b48..16870f13 100644
--- a/app/views/main/home.html.erb
+++ b/app/views/main/home.html.erb
@@ -33,7 +33,8 @@
     </div>
   </div>
 </div><!-- end yield -->
+
 <script>
-Metamaps.currentSection = "";
-Metamaps.currentPage = "";
+  Metamaps.currentSection = ''
+  Metamaps.currentPage = ''
 </script>
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index ae391d6d..b25c7610 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -18,5 +18,5 @@
   Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
   Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
   Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
-  Metamaps.Visualize.type = "ForceDirected";
+  Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>
diff --git a/app/views/shared/_switchmetacodes.html.erb b/app/views/shared/_switchmetacodes.html.erb
index 24739716..4c56dd41 100644
--- a/app/views/shared/_switchmetacodes.html.erb
+++ b/app/views/shared/_switchmetacodes.html.erb
@@ -117,6 +117,6 @@
 <div class="clearfloat"></div>
 
 <script>
-Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>";
-Metamaps.Create.selectedMetacodeSetIndex = <%= index %>;
+  Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>"
+  Metamaps.Create.selectedMetacodeSetIndex = <%= index %>
 </script>
diff --git a/frontend/src/Metamaps/Control.js b/frontend/src/Metamaps/Control.js
index 7662f47d..8305e097 100644
--- a/frontend/src/Metamaps/Control.js
+++ b/frontend/src/Metamaps/Control.js
@@ -1,9 +1,10 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import _ from 'lodash'
 import outdent from 'outdent'
 
 import Active from './Active'
+import DataModel from './DataModel'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
 import JIT from './JIT'
@@ -12,16 +13,6 @@ import Selected from './Selected'
 import Settings from './Settings'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Control.js
- *
- * Dependencies:
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const Control = {
   init: function () {},
   selectNode: function (node, e) {
@@ -72,7 +63,7 @@ const Control = {
       Control.deleteSelectedNodes()
     }
 
-    if (Metamaps.Topics.length === 0) {
+    if (DataModel.Topics.length === 0) {
       GlobalUI.showDiv('#instructions')
     }
   },
@@ -110,7 +101,7 @@ const Control = {
       var mappableid = topic.id
       var mapping = node.getData('mapping')
       topic.destroy()
-      Metamaps.Mappings.remove(mapping)
+      DataModel.Mappings.remove(mapping)
       $(document).trigger(JIT.events.deleteTopic, [{
         mappableid: mappableid
       }])
@@ -127,7 +118,7 @@ const Control = {
       })
       _.each(nodeids, function(nodeid) {
         if (Active.Topic.id !== nodeid) {
-          Metamaps.Topics.remove(nodeid)
+          DataModel.Topics.remove(nodeid)
           Control.hideNode(nodeid)
         }
       })
@@ -165,7 +156,7 @@ const Control = {
     var mappableid = topic.id
     var mapping = node.getData('mapping')
     mapping.destroy()
-    Metamaps.Topics.remove(topic)
+    DataModel.Topics.remove(topic)
     $(document).trigger(JIT.events.removeTopic, [{
       mappableid: mappableid
     }])
@@ -293,7 +284,7 @@ const Control = {
       synapse.destroy()
 
       // the server will destroy the mapping, we just need to remove it here
-      Metamaps.Mappings.remove(mapping)
+      DataModel.Mappings.remove(mapping)
       edge.getData('mappings').splice(index, 1)
       edge.getData('synapses').splice(index, 1)
       if (edge.getData('displayIndex')) {
@@ -348,7 +339,7 @@ const Control = {
     var mappableid = synapse.id
     mapping.destroy()
 
-    Metamaps.Synapses.remove(synapse)
+    DataModel.Synapses.remove(synapse)
 
     edge.getData('mappings').splice(index, 1)
     edge.getData('synapses').splice(index, 1)
@@ -432,7 +423,7 @@ const Control = {
 
     GlobalUI.notifyUser('Working...')
 
-    var metacode = Metamaps.Metacodes.get(metacode_id)
+    var metacode = DataModel.Metacodes.get(metacode_id)
 
     // variables to keep track of how many nodes and synapses you had the ability to change the permission of
     var nCount = 0
diff --git a/frontend/src/Metamaps/Create.js b/frontend/src/Metamaps/Create.js
index 1327821f..d12a5de5 100644
--- a/frontend/src/Metamaps/Create.js
+++ b/frontend/src/Metamaps/Create.js
@@ -1,5 +1,6 @@
-/* global Metamaps, $, Hogan, Bloodhound */
+/* global $, Hogan, Bloodhound */
 
+import DataModel from './DataModel'
 import Mouse from './Mouse'
 import Selected from './Selected'
 import Synapse from './Synapse'
@@ -7,15 +8,6 @@ import Topic from './Topic'
 import Visualize from './Visualize'
 import GlobalUI from './GlobalUI'
 
-/*
- * Metamaps.Create.js
- *
- * Dependencies:
- *  - Metamaps.DataModel
- *  - Metamaps.Metacodes
- *  - Metamaps.Topics
- */
-
 const Create = {
   isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
   selectedMetacodeSet: null,
@@ -59,7 +51,7 @@ const Create = {
     }
 
     var codesToSwitchToIds
-    var metacodeModels = new Metamaps.DataModel.MetacodeCollection()
+    var metacodeModels = new DataModel.MetacodeCollection()
     Create.selectedMetacodeSetIndex = index
     Create.selectedMetacodeSet = 'metacodeset-' + set
 
@@ -80,7 +72,7 @@ const Create = {
 
     // sort by name
     for (var i = 0; i < codesToSwitchToIds.length; i++) {
-      metacodeModels.add(Metamaps.Metacodes.get(codesToSwitchToIds[i]))
+      metacodeModels.add(DataModel.Metacodes.get(codesToSwitchToIds[i]))
     }
     metacodeModels.sort()
 
@@ -243,7 +235,7 @@ const Create = {
         $('.pinCarousel').removeClass('isPinned')
         Create.newTopic.pinned = false
       }
-      if (Metamaps.Topics.length === 0) {
+      if (DataModel.Topics.length === 0) {
         GlobalUI.showDiv('#instructions')
       }
       Create.newTopic.beingCreated = false
diff --git a/frontend/src/Metamaps/DataModel/MapCollection.js b/frontend/src/Metamaps/DataModel/MapCollection.js
index a08309df..69b2f5a8 100644
--- a/frontend/src/Metamaps/DataModel/MapCollection.js
+++ b/frontend/src/Metamaps/DataModel/MapCollection.js
@@ -1,5 +1,3 @@
-/* global Metamaps */
-
 import Backbone from 'backbone'
 Backbone.$ = window.$
 
diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js
index b9a3153b..0be1cfda 100644
--- a/frontend/src/Metamaps/DataModel/Synapse.js
+++ b/frontend/src/Metamaps/DataModel/Synapse.js
@@ -11,10 +11,10 @@ import Realtime from '../Realtime'
 import SynapseCard from '../SynapseCard'
 import Visualize from '../Visualize'
 
+import DataModel from './index'
+
 /*
- * Dependencies:
- *  - Metamaps.Mappings
- *  - Metamaps.Topics
+ * Metamaps.Erb
  */
 
 const Synapse = Backbone.Model.extend({
@@ -96,10 +96,10 @@ const Synapse = Backbone.Model.extend({
     else return false
   },
   getTopic1: function () {
-    return Metamaps.Topics.get(this.get('topic1_id'))
+    return DataModel.Topics.get(this.get('topic1_id'))
   },
   getTopic2: function () {
-    return Metamaps.Topics.get(this.get('topic2_id'))
+    return DataModel.Topics.get(this.get('topic2_id'))
   },
   getDirection: function () {
     var t1 = this.getTopic1()
@@ -113,7 +113,7 @@ const Synapse = Backbone.Model.extend({
   getMapping: function () {
     if (!Active.Map) return false
 
-    return Metamaps.Mappings.findWhere({
+    return DataModel.Mappings.findWhere({
       map_id: Active.Map.id,
       mappable_type: 'Synapse',
       mappable_id: this.isNew() ? this.cid : this.id
diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js
index 3d27814e..cd709a24 100644
--- a/frontend/src/Metamaps/DataModel/Topic.js
+++ b/frontend/src/Metamaps/DataModel/Topic.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import _ from 'lodash'
 import Backbone from 'backbone'
@@ -11,11 +11,7 @@ import Realtime from '../Realtime'
 import TopicCard from '../TopicCard'
 import Visualize from '../Visualize'
 
-/*
- * Dependencies:
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- */
+import DataModel from './index'
 
 const Topic = Backbone.Model.extend({
   urlRoot: '/topics',
@@ -99,12 +95,12 @@ const Topic = Backbone.Model.extend({
   },
   getDate: function () {},
   getMetacode: function () {
-    return Metamaps.Metacodes.get(this.get('metacode_id'))
+    return DataModel.Metacodes.get(this.get('metacode_id'))
   },
   getMapping: function () {
     if (!Active.Map) return false
 
-    return Metamaps.Mappings.findWhere({
+    return DataModel.Mappings.findWhere({
       map_id: Active.Map.id,
       mappable_type: 'Topic',
       mappable_id: this.isNew() ? this.cid : this.id
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index bd9cc342..c973cb3b 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -1,5 +1,3 @@
-/* global Metamaps */
-
 import Active from '../Active'
 import Filter from '../Filter'
 import { InfoBox } from '../Map'
@@ -19,19 +17,6 @@ import SynapseCollection from './SynapseCollection'
 import Mapping from './Mapping'
 import MappingCollection from './MappingCollection'
 
-/*
- * DataModel.js
- *
- * Dependencies:
- *  - Metamaps.Collaborators
- *  - Metamaps.Creators
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const DataModel = {
   Map: Map,
   MapCollection: MapCollection,
@@ -48,45 +33,50 @@ const DataModel = {
   Mapping: Mapping,
   MappingCollection: MappingCollection,
 
-  Metacodes: new MetacodeCollection(),
-  Topics: new TopicCollection(),
-  Synapses: new SynapseCollection(),
-  Mappings: new MappingCollection(),
-  Mappers: new MapperCollection(),
   Collaborators: new MapperCollection(),
   Creators: new MapperCollection(),
+  Mappers: new MapperCollection(),
+  Mappings: new MappingCollection(),
+  Messages: [],
+  Metacodes: new MetacodeCollection(),
+  Stars: [],
+  Synapses: new SynapseCollection(),
+  Topics: new TopicCollection(),
 
   init: function (serverData) {
     var self = DataModel
 
+    if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
+    if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
+    if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
+    if (serverData.Mappings) self.Mappings = new MappingCollection(serverData.Mappings)
+    if (serverData.Messages) self.Messages = serverData.Messages
     if (serverData.Metacodes) self.Metacodes = new MetacodeCollection(serverData.Metacodes)
-
-    // attach collection event listeners
+    if (serverData.Stars) self.Stars = serverData.Stars
+    if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
     if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics)
+
+    self.attachCollectionEvents()
+  },
+
+  attachCollectionEvents: function () {
+    var self = DataModel
     self.Topics.on('add remove', function (topic) {
       InfoBox.updateNumbers()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
-
-    if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
     self.Synapses.on('add remove', function (synapse) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMappers()
     })
-
-    if (serverData.Mappings) self.Mappings = new MappingCollection(serverData.Mappings)
     self.Mappings.on('add remove', function (mapping) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
-
-    if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
-    if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
-    if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
   }
 }
 
diff --git a/frontend/src/Metamaps/Filter.js b/frontend/src/Metamaps/Filter.js
index 59aa1bae..271e5758 100644
--- a/frontend/src/Metamaps/Filter.js
+++ b/frontend/src/Metamaps/Filter.js
@@ -1,23 +1,14 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import _ from 'lodash'
 
 import Active from './Active'
 import Control from './Control'
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
 import Settings from './Settings'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Filter.js.erb
- *
- * Dependencies:
- *  - Metamaps.Creators
- *  - Metamaps.Mappers
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
 const Filter = {
   filters: {
     name: '',
@@ -148,7 +139,7 @@ const Filter = {
     // the first option enables us to accept
     // ['Topics', 'Synapses'] as 'collection'
     if (typeof collection === 'object') {
-      Metamaps[collection[0]].each(function (model) {
+      DataModel[collection[0]].each(function (model) {
         var prop = model.get(propertyToCheck)
         if (prop !== null) {
           prop = prop.toString()
@@ -157,7 +148,7 @@ const Filter = {
           }
         }
       })
-      Metamaps[collection[1]].each(function (model) {
+      DataModel[collection[1]].each(function (model) {
         var prop = model.get(propertyToCheck)
         if (prop !== null) {
           prop = prop.toString()
@@ -167,7 +158,7 @@ const Filter = {
         }
       })
     } else if (typeof collection === 'string') {
-      Metamaps[collection].each(function (model) {
+      DataModel[collection].each(function (model) {
         var prop = model.get(propertyToCheck)
         if (prop !== null) {
           prop = prop.toString()
@@ -196,8 +187,8 @@ const Filter = {
     }
     // for each new filter to be added, create a list item for it and fade it in
     _.each(added, function (identifier) {
-      model = Metamaps[correlatedModel].get(identifier) ||
-      Metamaps[correlatedModel].find(function (model) {
+      model = DataModel[correlatedModel].get(identifier) ||
+      DataModel[correlatedModel].find(function (model) {
         return model.get(propertyToCheck) === identifier
       })
       li = model.prepareLiForFilter()
@@ -359,7 +350,7 @@ const Filter = {
 
     var opacityForFilter = onMap ? 0 : 0.4
 
-    Metamaps.Topics.each(function (topic) {
+    DataModel.Topics.each(function (topic) {
       var n = topic.get('node')
       var metacode_id = topic.get('metacode_id').toString()
 
@@ -400,11 +391,11 @@ const Filter = {
     })
 
     // flag all the edges back to 'untouched'
-    Metamaps.Synapses.each(function (synapse) {
+    DataModel.Synapses.each(function (synapse) {
       var e = synapse.get('edge')
       e.setData('touched', false)
     })
-    Metamaps.Synapses.each(function (synapse) {
+    DataModel.Synapses.each(function (synapse) {
       var e = synapse.get('edge')
       var desc
       var user_id = synapse.get('user_id').toString()
diff --git a/frontend/src/Metamaps/GlobalUI/CreateMap.js b/frontend/src/Metamaps/GlobalUI/CreateMap.js
index d53b4106..97110c91 100644
--- a/frontend/src/Metamaps/GlobalUI/CreateMap.js
+++ b/frontend/src/Metamaps/GlobalUI/CreateMap.js
@@ -1,13 +1,9 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Active from '../Active'
+import DataModel from '../DataModel'
 import GlobalUI from './index'
 
-/*
- * Metamaps.DataModel
- * Metamaps.Maps
- */
-
 const CreateMap = {
   newMap: null,
   emptyMapForm: '',
@@ -17,7 +13,7 @@ const CreateMap = {
   init: function () {
     var self = CreateMap
 
-    self.newMap = new Metamaps.DataModel.Map({ permission: 'commons' })
+    self.newMap = new DataModel.Map({ permission: 'commons' })
 
     self.bindFormEvents()
 
@@ -109,7 +105,7 @@ const CreateMap = {
   success: function (model) {
     var self = CreateMap
     // push the new map onto the collection of 'my maps'
-    Metamaps.Maps.Mine.add(model)
+    DataModel.Maps.Mine.add(model)
 
     GlobalUI.clearNotify()
     $('#wrapper').append(self.generateSuccessMessage(model.id))
@@ -128,7 +124,7 @@ const CreateMap = {
     }
 
     self.bindFormEvents()
-    self.newMap = new Metamaps.DataModel.Map({ permission: 'commons' })
+    self.newMap = new DataModel.Map({ permission: 'commons' })
 
     return false
   }
diff --git a/frontend/src/Metamaps/GlobalUI/Search.js b/frontend/src/Metamaps/GlobalUI/Search.js
index 82293ac3..eb5fe0a7 100644
--- a/frontend/src/Metamaps/GlobalUI/Search.js
+++ b/frontend/src/Metamaps/GlobalUI/Search.js
@@ -5,7 +5,6 @@ import Router from '../Router'
 
 /*
  * Metamaps.Erb
- * Metamaps.Maps
  */
 
 const Search = {
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index e82516c2..2444925a 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/frontend/src/Metamaps/GlobalUI/index.js
@@ -1,20 +1,16 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import clipboard from 'clipboard-js'
 
 import Active from '../Active'
 import Create from '../Create'
+import DataModel from '../DataModel'
 
 import Search from './Search'
 import CreateMap from './CreateMap'
 import Account from './Account'
 import ImportDialog from './ImportDialog'
 
-/*
- * Metamaps.DataModel
- * Metamaps.Maps
- */
-
 const GlobalUI = {
   notifyTimeout: null,
   lightbox: null,
@@ -38,26 +34,26 @@ const GlobalUI = {
     $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
 
     // initialize global backbone models and collections
-    if (Active.Mapper) Active.Mapper = new Metamaps.DataModel.Mapper(Active.Mapper)
+    if (Active.Mapper) Active.Mapper = new DataModel.Mapper(Active.Mapper)
 
-    var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []
-    var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []
-    var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : []
+    var myCollection = DataModel.Maps.Mine ? DataModel.Maps.Mine : []
+    var sharedCollection = DataModel.Maps.Shared ? DataModel.Maps.Shared : []
+    var starredCollection = DataModel.Maps.Starred ? DataModel.Maps.Starred : []
     var mapperCollection = []
     var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
-    if (Metamaps.Maps.Mapper) {
-      mapperCollection = Metamaps.Maps.Mapper.models
-      mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id
+    if (DataModel.Maps.Mapper) {
+      mapperCollection = DataModel.Maps.Mapper.models
+      mapperOptionsObj.mapperId = DataModel.Maps.Mapper.id
     }
-    var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
-    var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
-    Metamaps.Maps.Mine = new Metamaps.DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
-    Metamaps.Maps.Shared = new Metamaps.DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
-    Metamaps.Maps.Starred = new Metamaps.DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
+    var featuredCollection = DataModel.Maps.Featured ? DataModel.Maps.Featured : []
+    var activeCollection = DataModel.Maps.Active ? DataModel.Maps.Active : []
+    DataModel.Maps.Mine = new DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
+    DataModel.Maps.Shared = new DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
+    DataModel.Maps.Starred = new DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
     // 'Mapper' refers to another mapper
-    Metamaps.Maps.Mapper = new Metamaps.DataModel.MapCollection(mapperCollection, mapperOptionsObj)
-    Metamaps.Maps.Featured = new Metamaps.DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
-    Metamaps.Maps.Active = new Metamaps.DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+    DataModel.Maps.Mapper = new DataModel.MapCollection(mapperCollection, mapperOptionsObj)
+    DataModel.Maps.Featured = new DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
+    DataModel.Maps.Active = new DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
   },
   showDiv: function (selector) {
     $(selector).show()
diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js
index b829c0b1..d273edbb 100644
--- a/frontend/src/Metamaps/Import.js
+++ b/frontend/src/Metamaps/Import.js
@@ -1,26 +1,16 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import parse from 'csv-parse'
 import _ from 'lodash'
 
 import Active from './Active'
 import AutoLayout from './AutoLayout'
+import DataModel from './DataModel' 
 import GlobalUI from './GlobalUI'
 import Map from './Map'
 import Synapse from './Synapse'
 import Topic from './Topic'
 
-/*
- * Metamaps.Import.js.erb
- *
- * Dependencies:
- *  - Metamaps.DataModel
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const Import = {
   // note that user is not imported
   topicWhitelist: [
@@ -255,10 +245,10 @@ const Import = {
     parsedSynapses.forEach(function (synapse) {
       // only createSynapseWithParameters once both topics are persisted
       // if there isn't a cidMapping, check by topic name instead
-      var topic1 = Metamaps.Topics.get(self.cidMappings[synapse.topic1])
-      if (!topic1) topic1 = Metamaps.Topics.findWhere({ name: synapse.topic1 })
-      var topic2 = Metamaps.Topics.get(self.cidMappings[synapse.topic2])
-      if (!topic2) topic2 = Metamaps.Topics.findWhere({ name: synapse.topic2 })
+      var topic1 = DataModel.Topics.get(self.cidMappings[synapse.topic1])
+      if (!topic1) topic1 = DataModel.Topics.findWhere({ name: synapse.topic1 })
+      var topic2 = DataModel.Topics.get(self.cidMappings[synapse.topic2])
+      if (!topic2) topic2 = DataModel.Topics.findWhere({ name: synapse.topic2 })
 
       if (!topic1 || !topic2) {
         console.error("One of the two topics doesn't exist!")
@@ -291,15 +281,15 @@ const Import = {
     link, xloc, yloc, import_id, opts = {}) {
     var self = Import
     $(document).trigger(Map.events.editedByActiveMapper)
-    var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null
+    var metacode = DataModel.Metacodes.where({name: metacode_name})[0] || null
     if (metacode === null) {
-      metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0]
+      metacode = DataModel.Metacodes.where({ name: 'Wildcard' })[0]
       console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.')
     }
 
     var topic_permission = permission || Active.Map.get('permission')
     var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null
-    var topic = new Metamaps.DataModel.Topic({
+    var topic = new DataModel.Topic({
       name: name,
       metacode_id: metacode.id,
       permission: topic_permission,
@@ -308,19 +298,19 @@ const Import = {
       link: link || '',
       calculated_permission: Active.Map.get('permission')
     })
-    Metamaps.Topics.add(topic)
+    DataModel.Topics.add(topic)
 
     if (import_id !== null && import_id !== undefined) {
       self.cidMappings[import_id] = topic.cid
     }
 
-    var mapping = new Metamaps.DataModel.Mapping({
+    var mapping = new DataModel.Mapping({
       xloc: xloc,
       yloc: yloc,
       mappable_id: topic.cid,
       mappable_type: 'Topic'
     })
-    Metamaps.Mappings.add(mapping)
+    DataModel.Mappings.add(mapping)
 
     // this function also includes the creation of the topic in the database
     Topic.renderTopic(mapping, topic, true, true, {
@@ -340,20 +330,20 @@ const Import = {
       return
     } // if
 
-    var synapse = new Metamaps.DataModel.Synapse({
+    var synapse = new DataModel.Synapse({
       desc: desc || '',
       category: category || 'from-to',
       permission: permission,
       topic1_id: topic1.id,
       topic2_id: topic2.id
     })
-    Metamaps.Synapses.add(synapse)
+    DataModel.Synapses.add(synapse)
 
-    var mapping = new Metamaps.DataModel.Mapping({
+    var mapping = new DataModel.Mapping({
       mappable_type: 'Synapse',
       mappable_id: synapse.cid
     })
-    Metamaps.Mappings.add(mapping)
+    DataModel.Mappings.add(mapping)
 
     Synapse.renderSynapse(mapping, synapse, node1, node2, true)
   },
diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js
index f8bc51e8..e57244c0 100644
--- a/frontend/src/Metamaps/JIT.js
+++ b/frontend/src/Metamaps/JIT.js
@@ -8,6 +8,7 @@ import $jit from '../patched/JIT'
 import Active from './Active'
 import Control from './Control'
 import Create from './Create'
+import DataModel from './DataModel'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
 import Map from './Map'
@@ -25,10 +26,6 @@ import clipboard from 'clipboard-js'
 
 /*
  * Metamaps.Erb
- * Metamaps.Mappings
- * Metamaps.Metacodes
- * Metamaps.Synapses
- * Metamaps.Topics
  */
 
 let panningInt
@@ -140,15 +137,15 @@ const JIT = {
     self.vizData = []
     Visualize.loadLater = false
 
-    const results = self.convertModelsToJIT(Metamaps.Topics, Metamaps.Synapses)
+    const results = self.convertModelsToJIT(DataModel.Topics, DataModel.Synapses)
 
     self.vizData = results[0]
 
     // clean up the synapses array in case of any faulty data
     _.each(results[1], function (synapse) {
       mapping = synapse.getMapping()
-      Metamaps.Synapses.remove(synapse)
-      if (Metamaps.Mappings) Metamaps.Mappings.remove(mapping)
+      DataModel.Synapses.remove(synapse)
+      if (DataModel.Mappings) DataModel.Mappings.remove(mapping)
     })
 
     // set up addTopic instructions in case they delete all the topics
@@ -1191,7 +1188,7 @@ const JIT = {
     eY = -1 * eY
 
     const edgesToToggle = []
-    Metamaps.Synapses.each(function (synapse) {
+    DataModel.Synapses.each(function (synapse) {
       const e = synapse.get('edge')
       if (edgesToToggle.indexOf(e) === -1) {
         edgesToToggle.push(e)
@@ -1579,15 +1576,15 @@ const JIT = {
     loader.setRange(0.9) // default is 1.3
     loader.show() // Hidden by default
 
-    const topics = Metamaps.Topics.map(function (t) { return t.id })
-    const topicsString = topics.join()
+    const topics = DataModel.Topics.map(function (t) { return t.id })
+    const topics_string = topics.join()
 
     const successCallback = function (data) {
       $('#loadingSiblings').remove()
 
       for (var key in data) {
-        const string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')'
-        $('#fetchSiblingList').append('<li class="getSiblings" data-id="' + key + '">' + string + '</li>')
+        const string = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})`
+        $('#fetchSiblingList').append(`<li class="getSiblings" data-id="${key}">${string}</li>`)
       }
 
       $('.rc-siblings .getSiblings').click(function () {
diff --git a/frontend/src/Metamaps/Map/InfoBox.js b/frontend/src/Metamaps/Map/InfoBox.js
index 79fa6c4d..95455fd4 100644
--- a/frontend/src/Metamaps/Map/InfoBox.js
+++ b/frontend/src/Metamaps/Map/InfoBox.js
@@ -3,17 +3,13 @@
 import outdent from 'outdent'
 
 import Active from '../Active'
+import DataModel from '../DataModel'
 import GlobalUI from '../GlobalUI'
 import Router from '../Router'
 import Util from '../Util'
 
 /*
- * Metamaps.Collaborators
  * Metamaps.Erb
- * Metamaps.Mappers
- * Metamaps.Maps
- * Metamaps.Synapses
- * Metamaps.Topics
  */
 
 const InfoBox = {
@@ -106,7 +102,7 @@ const InfoBox = {
 
     var isCreator = map.authorizePermissionChange(Active.Mapper)
     var canEdit = map.authorizeToEdit(Active.Mapper)
-    var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var relevantPeople = map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
     var shareable = map.get('permission') !== 'private'
 
     obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
@@ -251,24 +247,24 @@ const InfoBox = {
   },
   removeCollaborator: function (collaboratorId) {
     var self = InfoBox
-    Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
-    var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+    DataModel.Collaborators.remove(DataModel.Collaborators.get(collaboratorId))
+    var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id })
     $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
     self.updateNumbers()
   },
   addCollaborator: function (newCollaboratorId) {
     var self = InfoBox
 
-    if (Metamaps.Collaborators.get(newCollaboratorId)) {
+    if (DataModel.Collaborators.get(newCollaboratorId)) {
       GlobalUI.notifyUser('That user already has access')
       return
     }
 
     function callback(mapper) {
-      Metamaps.Collaborators.add(mapper)
-      var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+      DataModel.Collaborators.add(mapper)
+      var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id })
       $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
-      var name = Metamaps.Collaborators.get(newCollaboratorId).get('name')
+      var name = DataModel.Collaborators.get(newCollaboratorId).get('name')
       GlobalUI.notifyUser(name + ' will be notified by email')
       self.updateNumbers()
     }
@@ -289,7 +285,7 @@ const InfoBox = {
   },
   createContributorList: function () {
     var self = InfoBox
-    var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
     var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
     var string = ''
     string += '<ul>'
@@ -315,7 +311,7 @@ const InfoBox = {
 
     var self = InfoBox
     var mapper = Active.Mapper
-    var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
 
     var contributors_class = ''
     if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
@@ -333,8 +329,8 @@ const InfoBox = {
     $('.mapContributors .tip').unbind().click(function (event) {
       event.stopPropagation()
     })
-    $('.mapTopics').text(Metamaps.Topics.length)
-    $('.mapSynapses').text(Metamaps.Synapses.length)
+    $('.mapTopics').text(DataModel.Topics.length)
+    $('.mapSynapses').text(DataModel.Synapses.length)
 
     $('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted())
   },
@@ -388,10 +384,10 @@ const InfoBox = {
 
     if (doIt && authorized) {
       InfoBox.close()
-      Metamaps.Maps.Active.remove(map)
-      Metamaps.Maps.Featured.remove(map)
-      Metamaps.Maps.Mine.remove(map)
-      Metamaps.Maps.Shared.remove(map)
+      DataModel.Maps.Active.remove(map)
+      DataModel.Maps.Featured.remove(map)
+      DataModel.Maps.Mine.remove(map)
+      DataModel.Maps.Shared.remove(map)
       map.destroy()
       Router.home()
       GlobalUI.notifyUser('Map eliminated!')
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index 6bd4f00a..7ff806a5 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -1,10 +1,12 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import outdent from 'outdent'
 
 import Active from '../Active'
 import AutoLayout from '../AutoLayout'
 import Create from '../Create'
+import DataModel from '../DataModel'
+import DataModelMap from '../DataModel/Map'
 import Filter from '../Filter'
 import GlobalUI from '../GlobalUI'
 import JIT from '../JIT'
@@ -23,14 +25,7 @@ import InfoBox from './InfoBox'
  * Metamaps.Map.js.erb
  *
  * Dependencies:
- *  - Metamaps.DataModel
  *  - Metamaps.Erb
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Maps
- *  - Metamaps.Messages
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
  */
 
 const Map = {
@@ -83,15 +78,15 @@ const Map = {
   },
   launch: function (id) {
     var start = function (data) {
-      Active.Map = new Metamaps.DataModel.Map(data.map)
-      Metamaps.Mappers = new Metamaps.DataModel.MapperCollection(data.mappers)
-      Metamaps.Collaborators = new Metamaps.DataModel.MapperCollection(data.collaborators)
-      Metamaps.Topics = new Metamaps.DataModel.TopicCollection(data.topics)
-      Metamaps.Synapses = new Metamaps.DataModel.SynapseCollection(data.synapses)
-      Metamaps.Mappings = new Metamaps.DataModel.MappingCollection(data.mappings)
-      Metamaps.Messages = data.messages
-      Metamaps.Stars = data.stars
-      Metamaps.DataModel.attachCollectionEvents()
+      Active.Map = new DataModelMap(data.map)
+      DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
+      DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
+      DataModel.Topics = new DataModel.TopicCollection(data.topics)
+      DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
+      DataModel.Mappings = new DataModel.MappingCollection(data.mappings)
+      DataModel.Messages = data.messages
+      DataModel.Stars = data.stars
+      DataModel.attachCollectionEvents()
 
       var map = Active.Map
       var mapper = Active.Mapper
@@ -164,9 +159,9 @@ const Map = {
     }
   },
   updateStar: function () {
-    if (!Active.Mapper || !Metamaps.Stars) return
+    if (!Active.Mapper || !DataModel.Stars) return
     // update the star/unstar icon
-    if (Metamaps.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
+    if (DataModel.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
       $('.starMap').addClass('starred')
       $('.starMap .tooltipsAbove').html('Unstar')
     } else {
@@ -179,8 +174,8 @@ const Map = {
 
     if (!Active.Map) return
     $.post('/maps/' + Active.Map.id + '/star')
-    Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
-    Metamaps.Maps.Starred.add(Active.Map)
+    DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
+    DataModel.Maps.Starred.add(Active.Map)
     GlobalUI.notifyUser('Map is now starred')
     self.updateStar()
   },
@@ -189,8 +184,8 @@ const Map = {
 
     if (!Active.Map) return
     $.post('/maps/' + Active.Map.id + '/unstar')
-    Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
-    Metamaps.Maps.Starred.remove(Active.Map)
+    DataModel.Stars = DataModel.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
+    DataModel.Maps.Starred.remove(Active.Map)
     self.updateStar() 
   },
   fork: function () {
@@ -218,7 +213,7 @@ const Map = {
       }
     })
     // collect the unfiltered synapses
-    Metamaps.Synapses.each(function (synapse) {
+    DataModel.Synapses.each(function (synapse) {
       var desc = synapse.get('desc')
 
       var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
@@ -239,8 +234,8 @@ const Map = {
   },
   leavePrivateMap: function () {
     var map = Active.Map
-    Metamaps.Maps.Active.remove(map)
-    Metamaps.Maps.Featured.remove(map)
+    DataModel.Maps.Active.remove(map)
+    DataModel.Maps.Featured.remove(map)
     Router.home()
     GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
   },
@@ -259,7 +254,7 @@ const Map = {
   },
   editedByActiveMapper: function () {
     if (Active.Mapper) {
-      Metamaps.Mappers.add(Active.Mapper)
+      DataModel.Mappers.add(Active.Mapper)
     }
   },
   exportImage: function () {
diff --git a/frontend/src/Metamaps/Mapper.js b/frontend/src/Metamaps/Mapper.js
index 4beff8bf..03919378 100644
--- a/frontend/src/Metamaps/Mapper.js
+++ b/frontend/src/Metamaps/Mapper.js
@@ -1,9 +1,6 @@
 /* global $ */
 
-/*
- * Dependencies:
- *  Metamaps.DataModel
- */
+import DataModel from './DataModel'
 
 const Mapper = {
   // this function is to retrieve a mapper JSON object from the database
@@ -12,7 +9,7 @@ const Mapper = {
     $.ajax({
       url: `/users/${id}.json`,
       success: data => {
-        callback(new Metamaps.DataModel.Mapper(data))
+        callback(new DataModel.Mapper(data))
       }
     })
   }
diff --git a/frontend/src/Metamaps/Realtime/receivable.js b/frontend/src/Metamaps/Realtime/receivable.js
index c1432333..4ae838ab 100644
--- a/frontend/src/Metamaps/Realtime/receivable.js
+++ b/frontend/src/Metamaps/Realtime/receivable.js
@@ -302,9 +302,10 @@ export const newMapper = self => data => {
 
     var notifyMessage = data.username + ' just joined the map'
     if (firstOtherPerson) {
-      notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>'
+      notifyMessage += ' <button type="button" class="toast-button button">Suggest A Video Call</button>'
     }
     GlobalUI.notifyUser(notifyMessage)
+    $('#toast button').click(e => self.inviteACall(data.userid))
     self.sendMapperInfo(data.userid)
   }
 }
@@ -335,9 +336,11 @@ export const invitedToCall = self => inviter => {
   var username = self.mappersOnMap[inviter].name
   var notifyText = '<img src="' + self['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
   notifyText += username + ' is inviting you to a conversation. Join live?'
-  notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>'
-  notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
+  notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
+  notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
   GlobalUI.notifyUser(notifyText, true)
+  $('#toast button.yes').click(e => self.acceptCall(inviter))
+  $('#toast button.no').click(e => self.denyCall(inviter))
 }
 
 export const invitedToJoin = self => inviter => {
@@ -346,9 +349,11 @@ export const invitedToJoin = self => inviter => {
 
   var username = self.mappersOnMap[inviter].name
   var notifyText = username + ' is inviting you to the conversation. Join?'
-  notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
-  notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>'
+  notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
+  notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
   GlobalUI.notifyUser(notifyText, true)
+  $('#toast button.yes').click(e => self.joinCall())
+  $('#toast button.no').click(e => self.denyInvite(inviter))
 }
 
 export const mapperJoinedCall = self => id => {
@@ -385,18 +390,24 @@ export const mapperLeftCall = self => id => {
 
 export const callInProgress = self => () => {
   var notifyText = "There's a conversation happening, want to join?"
-  notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
-  notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
+  notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
+  notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
   GlobalUI.notifyUser(notifyText, true)
+  $('#toast button.yes').click(e => self.joinCall())
+  $('#toast button.no').click(e => GlobalUI.clearNotify())
+
   self.room.conversationInProgress()
 }
 
 export const callStarted = self => () => {
   if (self.inConversation) return
   var notifyText = "There's a conversation starting, want to join?"
-  notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
-  notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
+  notifyText += ' <button type="button" class="toast-button button">Yes</button>'
+  notifyText += ' <button type="button" class="toast-button button btn-no">No</button>'
   GlobalUI.notifyUser(notifyText, true)
+  $('#toast button.yes').click(e => self.joinCall())
+  $('#toast button.no').click(e => GlobalUI.clearNotify())
+
   self.room.conversationInProgress()
 }
 
diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js
index f55fab48..9046c112 100644
--- a/frontend/src/Metamaps/Router.js
+++ b/frontend/src/Metamaps/Router.js
@@ -1,8 +1,7 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Backbone from 'backbone'
-//TODO is this line good or bad?
-//Backbone.$ = window.$
+Backbone.$ = window.$
 
 import Active from './Active'
 import GlobalUI from './GlobalUI'
@@ -12,13 +11,6 @@ import Topic from './Topic'
 import Views from './Views'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Router.js.erb
- *
- * Dependencies:
- *  - Metamaps.Maps
- */
-
 const _Router = Backbone.Router.extend({
   currentPage: '',
   currentSection: '',
@@ -57,10 +49,10 @@ const _Router = Backbone.Router.extend({
 
       GlobalUI.showDiv('#explore')
 
-      Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
-      if (Metamaps.Maps.Active.length === 0) {
+      Views.ExploreMaps.setCollection(DataModel.Maps.Active)
+      if (DataModel.Maps.Active.length === 0) {
         Views.ExploreMaps.pending = true
-        Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
+        DataModel.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
       } else {
         Views.ExploreMaps.render(navigate)
       }
@@ -109,23 +101,23 @@ const _Router = Backbone.Router.extend({
 
     // this will mean it's a mapper page being loaded
     if (id) {
-      if (Metamaps.Maps.Mapper.mapperId !== id) {
+      if (DataModel.Maps.Mapper.mapperId !== id) {
         // empty the collection if we are trying to load the maps
         // collection of a different mapper than we had previously
-        Metamaps.Maps.Mapper.reset()
-        Metamaps.Maps.Mapper.page = 1
+        DataModel.Maps.Mapper.reset()
+        DataModel.Maps.Mapper.page = 1
       }
-      Metamaps.Maps.Mapper.mapperId = id
+      DataModel.Maps.Mapper.mapperId = id
     }
 
-    Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
+    Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
 
     var navigate = function () {
       var path = '/explore/' + self.currentPage
 
       // alter url if for mapper profile page
       if (self.currentPage === 'mapper') {
-        path += '/' + Metamaps.Maps.Mapper.mapperId
+        path += '/' + DataModel.Maps.Mapper.mapperId
       }
       
       self.navigate(path)
@@ -133,11 +125,11 @@ const _Router = Backbone.Router.extend({
     var navigateTimeout = function () {
       self.timeoutId = setTimeout(navigate, 300)
     }
-    if (Metamaps.Maps[capitalize].length === 0) {
+    if (DataModel.Maps[capitalize].length === 0) {
       Loading.show()
       Views.ExploreMaps.pending = true
       setTimeout(function () {
-        Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
+        DataModel.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
       }, 300) // wait 300 milliseconds till the other animations are done to do the fetch
     } else {
       if (id) {
diff --git a/frontend/src/Metamaps/Synapse.js b/frontend/src/Metamaps/Synapse.js
index 4b80c05a..824aad4b 100644
--- a/frontend/src/Metamaps/Synapse.js
+++ b/frontend/src/Metamaps/Synapse.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Active from './Active'
 import Control from './Control'
@@ -9,36 +9,24 @@ import Selected from './Selected'
 import Settings from './Settings'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Synapse.js.erb
- *
- * Dependencies:
- *  - Metamaps.DataModel
- *  - Metamaps.Mappings
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const noOp = () => {}
+
 const Synapse = {
   // this function is to retrieve a synapse JSON object from the database
   // @param id = the id of the synapse to retrieve
   get: function (id, callback = noOp) {
     // if the desired topic is not yet in the local topic repository, fetch it
-    if (Metamaps.Synapses.get(id) == undefined) {
+    if (DataModel.Synapses.get(id) == undefined) {
       $.ajax({
         url: '/synapses/' + id + '.json',
         success: function (data) {
-          Metamaps.Synapses.add(data)
-          callback(Metamaps.Synapses.get(id))
+          DataModel.Synapses.add(data)
+          callback(DataModel.Synapses.get(id))
         }
       })
-    } else callback(Metamaps.Synapses.get(id))
+    } else callback(DataModel.Synapses.get(id))
   },
-  /*
-   *
-   *
-   */
+
   renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
     var self = Synapse
 
@@ -98,12 +86,12 @@ const Synapse = {
     // for each node in this array we will create a synapse going to the position2 node.
     var synapsesToCreate = []
 
-    topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
+    topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
     node2 = topic2.get('node')
 
     var len = Selected.Nodes.length
     if (len == 0) {
-      topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
+      topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
       synapsesToCreate[0] = topic1.get('node')
     } else if (len > 0) {
       synapsesToCreate = Selected.Nodes
@@ -112,18 +100,18 @@ const Synapse = {
     for (var i = 0; i < synapsesToCreate.length; i++) {
       node1 = synapsesToCreate[i]
       topic1 = node1.getData('topic')
-      synapse = new Metamaps.DataModel.Synapse({
+      synapse = new DataModel.Synapse({
         desc: Create.newSynapse.description,
         topic1_id: topic1.isNew() ? topic1.cid : topic1.id,
         topic2_id: topic2.isNew() ? topic2.cid : topic2.id,
       })
-      Metamaps.Synapses.add(synapse)
+      DataModel.Synapses.add(synapse)
 
-      mapping = new Metamaps.DataModel.Mapping({
+      mapping = new DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.cid,
       })
-      Metamaps.Mappings.add(mapping)
+      DataModel.Mappings.add(mapping)
 
       // this function also includes the creation of the synapse in the database
       self.renderSynapse(mapping, synapse, node1, node2, true)
@@ -139,14 +127,14 @@ const Synapse = {
       node2
 
     self.get(id, synapse => {
-      var mapping = new Metamaps.DataModel.Mapping({
+      var mapping = new DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.id,
       })
-      Metamaps.Mappings.add(mapping)
-      topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
+      DataModel.Mappings.add(mapping)
+      topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
       node1 = topic1.get('node')
-      topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
+      topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
       node2 = topic2.get('node')
       Create.newSynapse.hide()
       self.renderSynapse(mapping, synapse, node1, node2, true)
diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js
index 38596b9e..05cd54f1 100644
--- a/frontend/src/Metamaps/Topic.js
+++ b/frontend/src/Metamaps/Topic.js
@@ -1,10 +1,11 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import $jit from '../patched/JIT'
 
 import Active from './Active'
 import AutoLayout from './AutoLayout'
 import Create from './Create'
+import DataModel from './DataModel'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
 import JIT from './JIT'
@@ -17,41 +18,30 @@ import TopicCard from './TopicCard'
 import Util from './Util'
 import Visualize from './Visualize'
 
-
-/*
- * Metamaps.Topic.js.erb
- *
- * Dependencies:
- *  - Metamaps.DataModel
- *  - Metamaps.Creators
- *  - Metamaps.Mappings
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
 const noOp = () => {}
+
 const Topic = {
   // this function is to retrieve a topic JSON object from the database
   // @param id = the id of the topic to retrieve
   get: function (id, callback = noOp) {
     // if the desired topic is not yet in the local topic repository, fetch it
-    if (Metamaps.Topics.get(id) == undefined) {
+    if (DataModel.Topics.get(id) == undefined) {
       $.ajax({
         url: '/topics/' + id + '.json',
         success: function (data) {
-          Metamaps.Topics.add(data)
-          callback(Metamaps.Topics.get(id))
+          DataModel.Topics.add(data)
+          callback(DataModel.Topics.get(id))
         }
       })
-    } else callback(Metamaps.Topics.get(id))
+    } else callback(DataModel.Topics.get(id))
   },
   launch: function (id) {
-    var bb = Metamaps.DataModel
     var start = function (data) {
-      Active.Topic = new bb.Topic(data.topic)
-      Metamaps.Creators = new bb.MapperCollection(data.creators)
-      Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
-      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
-      Metamaps.DataModel.attachCollectionEvents()
+      Active.Topic = new DataModel.Topic(data.topic)
+      DataModel.Creators = new DataModel.MapperCollection(data.creators)
+      DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives))
+      DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
+      DataModel.attachCollectionEvents()
 
       document.title = Active.Topic.get('name') + ' | Metamaps'
 
@@ -101,7 +91,7 @@ const Topic = {
         }
       })
       Router.navigate('/topics/' + nodeid)
-      Active.Topic = Metamaps.Topics.get(nodeid)
+      Active.Topic = DataModel.Topics.get(nodeid)
     }
   },
   fetchRelatives: function (nodes, metacode_id) {
@@ -109,10 +99,10 @@ const Topic = {
 
     var node = $.isArray(nodes) ? nodes[0] : nodes
 
-    var topics = Metamaps.Topics.map(function (t) { return t.id })
+    var topics = DataModel.Topics.map(function (t) { return t.id })
     var topics_string = topics.join()
 
-    var creators = Metamaps.Creators.map(function (t) { return t.id })
+    var creators = DataModel.Creators.map(function (t) { return t.id })
     var creators_string = creators.join()
 
     var topic = node.getData('topic')
@@ -124,13 +114,13 @@ const Topic = {
         window.setTimeout(function() { successCallback(data) }, 100)
         return
       }
-      if (data.creators.length > 0) Metamaps.Creators.add(data.creators)
-      if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
-      if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
+      if (data.creators.length > 0) DataModel.Creators.add(data.creators)
+      if (data.topics.length > 0) DataModel.Topics.add(data.topics)
+      if (data.synapses.length > 0) DataModel.Synapses.add(data.synapses)
 
-      var topicColl = new Metamaps.DataModel.TopicCollection(data.topics)
+      var topicColl = new DataModel.TopicCollection(data.topics)
       topicColl.add(topic)
-      var synapseColl = new Metamaps.DataModel.SynapseCollection(data.synapses)
+      var synapseColl = new DataModel.SynapseCollection(data.synapses)
 
       var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
       Visualize.mGraph.op.sum(graph, {
@@ -142,7 +132,7 @@ const Topic = {
       var i, l, t, s
 
       Visualize.mGraph.graph.eachNode(function (n) {
-        t = Metamaps.Topics.get(n.id)
+        t = DataModel.Topics.get(n.id)
         t.set({ node: n }, { silent: true })
         t.updateNode()
 
@@ -152,7 +142,7 @@ const Topic = {
 
             l = edge.getData('synapseIDs').length
             for (i = 0; i < l; i++) {
-              s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              s = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
               s.set({ edge: edge }, { silent: true })
               s.updateEdge()
             }
@@ -309,25 +299,25 @@ const Topic = {
 
     $(document).trigger(Map.events.editedByActiveMapper)
 
-    var metacode = Metamaps.Metacodes.get(Create.newTopic.metacode)
+    var metacode = DataModel.Metacodes.get(Create.newTopic.metacode)
 
-    var topic = new Metamaps.DataModel.Topic({
+    var topic = new DataModel.Topic({
       name: Create.newTopic.name,
       metacode_id: metacode.id,
       defer_to_map_id: Active.Map.id
     })
-    Metamaps.Topics.add(topic)
+    DataModel.Topics.add(topic)
 
     if (Create.newTopic.pinned) {
-      var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+      var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
     }
-    var mapping = new Metamaps.DataModel.Mapping({
+    var mapping = new DataModel.Mapping({
       xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
       yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
       mappable_id: topic.cid,
       mappable_type: 'Topic',
     })
-    Metamaps.Mappings.add(mapping)
+    DataModel.Mappings.add(mapping)
 
     // these can't happen until the value is retrieved, which happens in the line above
     if (!Create.newTopic.pinned) Create.newTopic.hide()
@@ -348,15 +338,15 @@ const Topic = {
 
     self.get(id, (topic) => {
       if (Create.newTopic.pinned) {
-        var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+        var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
       }
-      var mapping = new Metamaps.Backbone.Mapping({
+      var mapping = new DataModel.Mapping({
         xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
         yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
         mappable_type: 'Topic',
         mappable_id: topic.id,
       })
-      Metamaps.Mappings.add(mapping)
+      DataModel.Mappings.add(mapping)
 
       self.renderTopic(mapping, topic, true, true)
       // this blocked the enterKeyHandler from creating a new topic as well
@@ -364,11 +354,11 @@ const Topic = {
     })
   },
   getMapFromAutocomplete: function (data) {
-    var self = Metamaps.Topic
+    var self = Topic
 
-    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+    $(document).trigger(Map.events.editedByActiveMapper)
 
-    var metacode = Metamaps.Metacodes.findWhere({ name: 'Metamap' })
+    var metacode = DataModel.Metacodes.findWhere({ name: 'Metamap' })
     var topic = new Metamaps.Backbone.Topic({
       name: data.name,
       metacode_id: metacode.id,
@@ -377,13 +367,13 @@ const Topic = {
     })
     Metamaps.Topics.add(topic)
 
-    var mapping = new Metamaps.DataModel.Mapping({
-      xloc: Metamaps.Create.newTopic.x,
-      yloc: Metamaps.Create.newTopic.y,
+    var mapping = new DataModel.Mapping({
+      xloc: Create.newTopic.x,
+      yloc: Create.newTopic.y,
       mappable_id: topic.cid,
       mappable_type: 'Topic',
     })
-    Metamaps.Mappings.add(mapping)
+    DataModel.Mappings.add(mapping)
 
     // these can't happen until the value is retrieved, which happens in the line above
     if (!Create.newTopic.pinned) Create.newTopic.hide()
@@ -399,14 +389,14 @@ const Topic = {
     $(document).trigger(Map.events.editedByActiveMapper)
 
     self.get(id, (topic) => {
-      var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
-      var mapping = new Metamaps.DataModel.Mapping({
+      var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
+      var mapping = new DataModel.Mapping({
         xloc: nextCoords.x,
         yloc: nextCoords.y,
         mappable_type: 'Topic',
         mappable_id: topic.id,
       })
-      Metamaps.Mappings.add(mapping)
+      DataModel.Mappings.add(mapping)
       self.renderTopic(mapping, topic, true, true)
       GlobalUI.notifyUser('Topic was added to your map!')
     })
diff --git a/frontend/src/Metamaps/TopicCard.js b/frontend/src/Metamaps/TopicCard.js
index 936e1d2d..dd172971 100644
--- a/frontend/src/Metamaps/TopicCard.js
+++ b/frontend/src/Metamaps/TopicCard.js
@@ -1,18 +1,13 @@
-/* global Metamaps, $, CanvasLoader, Countable, Hogan, embedly */
+/* global $, CanvasLoader, Countable, Hogan, embedly */
 
 import Active from './Active'
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
 import Mapper from './Mapper'
 import Router from './Router'
 import Util from './Util'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.TopicCard.js
- *
- * Dependencies:
- *  - Metamaps.Metacodes
- */
 const TopicCard = {
   openTopicCard: null, // stores the topic that's currently open
   authorizedToEdit: false, // stores boolean for edit permission for open topic card
@@ -182,7 +177,7 @@ const TopicCard = {
     var metacodeLiClick = function () {
       selectingMetacode = false
       var metacodeId = parseInt($(this).attr('data-id'))
-      var metacode = Metamaps.Metacodes.get(metacodeId)
+      var metacode = DataModel.Metacodes.get(metacodeId)
       $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
         .append('<div class="expandMetacodeSelect"></div>')
         .attr('class', 'metacodeTitle mbg' + metacode.id)
diff --git a/frontend/src/Metamaps/Views/ExploreMaps.js b/frontend/src/Metamaps/Views/ExploreMaps.js
index 52d47ff3..3f69fe8c 100644
--- a/frontend/src/Metamaps/Views/ExploreMaps.js
+++ b/frontend/src/Metamaps/Views/ExploreMaps.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import React from 'react'
 import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js
index 9bbd5e31..ff8975d2 100644
--- a/frontend/src/Metamaps/Views/Room.js
+++ b/frontend/src/Metamaps/Views/Room.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Backbone from 'backbone'
 import attachMediaStream from 'attachmediastream'
@@ -7,16 +7,12 @@ import attachMediaStream from 'attachmediastream'
 // Backbone.$ = window.$
 
 import Active from '../Active'
+import DataModel from '../DataModel'
 import Realtime from '../Realtime'
 
 import ChatView from './ChatView'
 import VideoView from './VideoView'
 
-/*
- * Dependencies:
- *   Metamaps.DataModel
- */
-
 const Room = function(opts) {
   var self = this
 
@@ -170,14 +166,14 @@ Room.prototype.init = function () {
     var self = this
       //this.roomRef.child('messages').push(data)
       if (self.chat.alertSound) self.chat.sound.play('sendchat')
-      var m = new Metamaps.DataModel.Message({
+      var m = new DataModel.Message({
         message: data.message,
         resource_id: Active.Map.id,
         resource_type: "Map"
       })
       m.save(null, {
         success: function (model, response) {
-          self.addMessages(new Metamaps.DataModel.MessageCollection(model), false, true)
+          self.addMessages(new DataModel.MessageCollection(model), false, true)
           $(document).trigger(Room.events.newMessage, [model])
         },
         error: function (model, response) {
diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js
index c5323972..720ef598 100644
--- a/frontend/src/Metamaps/Visualize.js
+++ b/frontend/src/Metamaps/Visualize.js
@@ -1,24 +1,16 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import _ from 'lodash'
 
 import $jit from '../patched/JIT'
 
 import Active from './Active'
+import DataModel from './DataModel'
 import JIT from './JIT'
 import Loading from './Loading'
 import Router from './Router'
 import TopicCard from './TopicCard'
 
-/*
- * Metamaps.Visualize
- *
- * Dependencies:
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const Visualize = {
   mGraph: null, // a reference to the graph object.
   cameraPosition: null, // stores the camera position when using a 3D visualization
@@ -27,6 +19,9 @@ const Visualize = {
   touchDragNode: null,
   init: function () {
     var self = Visualize
+
+    if (serverData.VisualizeType) self.type = serverData.VisualizeType
+
     // disable awkward dragging of the canvas element that would sometimes happen
     $('#infovis-canvas').on('dragstart', function (event) {
       event.preventDefault()
@@ -59,7 +54,7 @@ const Visualize = {
       var i, l, startPos, endPos, topic, synapse
 
       self.mGraph.graph.eachNode(function (n) {
-        topic = Metamaps.Topics.get(n.id)
+        topic = DataModel.Topics.get(n.id)
         topic.set({ node: n }, { silent: true })
         topic.updateNode()
 
@@ -69,7 +64,7 @@ const Visualize = {
 
             l = edge.getData('synapseIDs').length
             for (i = 0; i < l; i++) {
-              synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
               synapse.set({ edge: edge }, { silent: true })
               synapse.updateEdge()
             }
@@ -84,7 +79,7 @@ const Visualize = {
       var i, l, startPos, endPos, topic, synapse
 
       self.mGraph.graph.eachNode(function (n) {
-        topic = Metamaps.Topics.get(n.id)
+        topic = DataModel.Topics.get(n.id)
         topic.set({ node: n }, { silent: true })
         topic.updateNode()
         mapping = topic.getMapping()
@@ -95,7 +90,7 @@ const Visualize = {
 
             l = edge.getData('synapseIDs').length
             for (i = 0; i < l; i++) {
-              synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
               synapse.set({ edge: edge }, { silent: true })
               synapse.updateEdge()
             }
@@ -189,12 +184,12 @@ const Visualize = {
     // hold for a maximum of 80 passes, or 4 seconds of waiting time
     var tries = 0
     function hold () {
-      var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
+      var unique = _.uniq(DataModel.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
         requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
         loadedCount = 0
 
       _.each(requiredMetacodes, function (metacode_id) {
-        var metacode = Metamaps.Metacodes.get(metacode_id),
+        var metacode = DataModel.Metacodes.get(metacode_id),
           img = metacode ? metacode.get('image') : false
 
         if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) {

From 518782e1c7c4dd304b9d0092d9d0c8fe649a6b23 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 2 Oct 2016 22:37:38 +0800
Subject: [PATCH 8/9] remove Metamaps.Erb

---
 .../javascripts/Metamaps.ServerData.js.erb    | 18 ++++++++++++++
 app/assets/javascripts/application.js         |  2 +-
 .../javascripts/src/Metamaps.Erb.js.erb       | 24 -------------------
 frontend/src/Metamaps/Account.js              | 20 ++++++----------
 frontend/src/Metamaps/DataModel/Synapse.js    |  8 ++-----
 frontend/src/Metamaps/GlobalUI/Search.js      | 10 +++-----
 frontend/src/Metamaps/JIT.js                  | 10 +++-----
 frontend/src/Metamaps/Map/InfoBox.js          | 12 ++++------
 frontend/src/Metamaps/Map/index.js            |  7 ------
 frontend/src/Metamaps/Views/ChatView.js       |  9 ++-----
 frontend/src/patched/JIT.js                   |  2 +-
 11 files changed, 41 insertions(+), 81 deletions(-)
 create mode 100644 app/assets/javascripts/Metamaps.ServerData.js.erb
 delete mode 100644 app/assets/javascripts/src/Metamaps.Erb.js.erb

diff --git a/app/assets/javascripts/Metamaps.ServerData.js.erb b/app/assets/javascripts/Metamaps.ServerData.js.erb
new file mode 100644
index 00000000..86c8d2b9
--- /dev/null
+++ b/app/assets/javascripts/Metamaps.ServerData.js.erb
@@ -0,0 +1,18 @@
+/* global Metamaps */
+
+/* erb variables from rails */
+Metamaps.ServerData = Metamaps.ServerData || {}
+Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
+Metamaps.ServerData['user.png'] = '<%= asset_path('user.png') %>'
+Metamaps.ServerData['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
+Metamaps.ServerData['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
+Metamaps.ServerData['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
+Metamaps.ServerData['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
+Metamaps.ServerData['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
+Metamaps.ServerData['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
+Metamaps.ServerData.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
+Metamaps.ServerData.REALTIME_SERVER = '<%= ENV['REALTIME_SERVER'] %>'
+Metamaps.ServerData.RAILS_ENV = '<%= ENV['RAILS_ENV'] %>'
+Metamaps.ServerData.VERSION = '<%= METAMAPS_VERSION %>'
+Metamaps.ServerData.BUILD = '<%= METAMAPS_BUILD %>'
+Metamaps.ServerData.LAST_UPDATED = '<%= METAMAPS_LAST_UPDATED %>'
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 051edc8b..d669012a 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -14,5 +14,5 @@
 //= require jquery-ui
 //= require jquery_ujs
 //= require_directory ./lib
-//= require ./src/Metamaps.Erb
 //= require ./webpacked/metamaps.bundle
+//= require ./Metamaps.ServerData
diff --git a/app/assets/javascripts/src/Metamaps.Erb.js.erb b/app/assets/javascripts/src/Metamaps.Erb.js.erb
deleted file mode 100644
index 57f26c98..00000000
--- a/app/assets/javascripts/src/Metamaps.Erb.js.erb
+++ /dev/null
@@ -1,24 +0,0 @@
-/* global Metamaps */
-
-/*
- * Metamaps.Erb.js.erb
- */
-
-/* erb variables from rails */
-window.Metamaps = window.Metamaps || {}
-Metamaps.Erb = {}
-Metamaps.Erb['REALTIME_SERVER'] = '<%= ENV['REALTIME_SERVER'] %>'
-Metamaps.Erb['RAILS_ENV'] = '<%= ENV['RAILS_ENV'] %>'
-Metamaps.Erb['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
-Metamaps.Erb['user.png'] = '<%= asset_path('user.png') %>'
-Metamaps.Erb['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
-Metamaps.Erb['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
-Metamaps.Erb['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
-Metamaps.Erb['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
-Metamaps.Erb['import-example.png'] = '<%= asset_path('import-example.png') %>'
-Metamaps.Erb['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
-Metamaps.Erb['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
-Metamaps.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
-Metamaps.VERSION = '<%= METAMAPS_VERSION %>'
-Metamaps.BUILD = '<%= METAMAPS_BUILD %>'
-Metamaps.LAST_UPDATED = '<%= METAMAPS_LAST_UPDATED %>'
diff --git a/frontend/src/Metamaps/Account.js b/frontend/src/Metamaps/Account.js
index 1ac87811..15b6f30b 100644
--- a/frontend/src/Metamaps/Account.js
+++ b/frontend/src/Metamaps/Account.js
@@ -1,17 +1,17 @@
 /* global $, CanvasLoader */
 
-/* 
- * Metamaps.Erb
- */
-
 const Account = {
   listenersInitialized: false,
+  userIconUrl: null,
   initListeners: function () {
     var self = Account
 
     $('#user_image').change(self.showImagePreview)
     self.listenersInitialized = true
   },
+  init: function (serverData) {
+    Account.userIconUrl = serverData['user.png']
+  },
   toggleChangePicture: function () {
     var self = Account
 
@@ -25,24 +25,18 @@ const Account = {
     if (!self.listenersInitialized) self.initListeners()
   },
   closeChangePicture: function () {
-    var self = Account
-
     $('.userImageMenu').hide()
   },
   showLoading: function () {
-    var self = Account
-
     var loader = new CanvasLoader('accountPageLoading')
-    loader.setColor('#4FC059'); // default is '#000000'
+    loader.setColor('#4FC059') // default is '#000000'
     loader.setDiameter(28) // default is 40
     loader.setDensity(41) // default is 40
-    loader.setRange(0.9); // default is 1.3
+    loader.setRange(0.9) // default is 1.3
     loader.show() // Hidden by default
     $('#accountPageLoading').show()
   },
   showImagePreview: function () {
-    var self = Account
-
     var file = $('#user_image')[0].files[0]
 
     var reader = new window.FileReader()
@@ -90,7 +84,7 @@ const Account = {
     var self = Account
 
     $('.userImageDiv canvas').remove()
-    $('.userImageDiv img').attr('src', window.Metamaps.Erb['user.png']).show()
+    $('.userImageDiv img').attr('src', self.userIconUrl).show()
     $('.userImageMenu').hide()
 
     var input = $('#user_image')
diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js
index 0be1cfda..09f75743 100644
--- a/frontend/src/Metamaps/DataModel/Synapse.js
+++ b/frontend/src/Metamaps/DataModel/Synapse.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import _ from 'lodash'
 import Backbone from 'backbone'
@@ -13,10 +13,6 @@ import Visualize from '../Visualize'
 
 import DataModel from './index'
 
-/*
- * Metamaps.Erb
- */
-
 const Synapse = Backbone.Model.extend({
   urlRoot: '/synapses',
   blacklist: ['edge', 'created_at', 'updated_at'],
@@ -82,7 +78,7 @@ const Synapse = Backbone.Model.extend({
   prepareLiForFilter: function () {
     var li = ''
     li += '<li data-id="' + this.get('desc') + '">'
-    li += '<img src="' + Metamaps.Erb['synapse16.png'] + '"'
+    li += '<img src="' + Metamaps.ServerData['synapse16.png'] + '"'
     li += ' alt="synapse icon" />'
     li += '<p>' + this.get('desc') + '</p></li>'
     return li
diff --git a/frontend/src/Metamaps/GlobalUI/Search.js b/frontend/src/Metamaps/GlobalUI/Search.js
index eb5fe0a7..1d4b82e4 100644
--- a/frontend/src/Metamaps/GlobalUI/Search.js
+++ b/frontend/src/Metamaps/GlobalUI/Search.js
@@ -1,12 +1,8 @@
-/* global Metamaps, $, Hogan, Bloodhound, CanvasLoader */
+/* global $, Hogan, Bloodhound, CanvasLoader */
 
 import Active from '../Active'
 import Router from '../Router'
 
-/*
- * Metamaps.Erb
- */
-
 const Search = {
   locked: false,
   isOpen: false,
@@ -54,7 +50,7 @@ const Search = {
           return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
             value: 'No results',
             label: 'No results',
-            typeImageURL: Metamaps.Erb['icons/wildcard.png'],
+            typeImageURL: Metamaps.ServerData['icons/wildcard.png'],
             rtype: 'noresult'
           })
         },
@@ -122,7 +118,7 @@ const Search = {
             value: 'No results',
             label: 'No results',
             rtype: 'noresult',
-            profile: Metamaps.Erb['user.png']
+            profile: Metamaps.ServerData['user.png']
           })
         },
         header: mapperheader,
diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js
index e57244c0..cbcd131b 100644
--- a/frontend/src/Metamaps/JIT.js
+++ b/frontend/src/Metamaps/JIT.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $, Image, CanvasLoader */
+/* global $, Image, CanvasLoader */
 
 import _ from 'lodash'
 import outdent from 'outdent'
@@ -24,10 +24,6 @@ import Util from './Util'
 import Visualize from './Visualize'
 import clipboard from 'clipboard-js'
 
-/*
- * Metamaps.Erb
- */
-
 let panningInt
 
 const JIT = {
@@ -69,10 +65,10 @@ const JIT = {
     $('.takeScreenshot').click(Map.exportImage)
 
     self.topicDescImage = new Image()
-    self.topicDescImage.src = Metamaps.Erb['topic_description_signifier.png']
+    self.topicDescImage.src = Metamaps.ServerData['topic_description_signifier.png']
 
     self.topicLinkImage = new Image()
-    self.topicLinkImage.src = Metamaps.Erb['topic_link_signifier.png']
+    self.topicLinkImage.src = Metamaps.ServerData['topic_link_signifier.png']
   },
   /**
    * convert our topic JSON into something JIT can use
diff --git a/frontend/src/Metamaps/Map/InfoBox.js b/frontend/src/Metamaps/Map/InfoBox.js
index 95455fd4..a3e31f19 100644
--- a/frontend/src/Metamaps/Map/InfoBox.js
+++ b/frontend/src/Metamaps/Map/InfoBox.js
@@ -1,4 +1,4 @@
-/* global Metamaps, $, Hogan, Bloodhound, Countable */
+/* global $, Hogan, Bloodhound, Countable */
 
 import outdent from 'outdent'
 
@@ -8,10 +8,6 @@ import GlobalUI from '../GlobalUI'
 import Router from '../Router'
 import Util from '../Util'
 
-/*
- * Metamaps.Erb
- */
-
 const InfoBox = {
   isOpen: false,
   changing: false,
@@ -112,7 +108,7 @@ const InfoBox = {
     obj['contributor_count'] = relevantPeople.length
     obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : ''
     obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : ''
-    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.Erb['user.png']
+    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.ServerData['user.png']
     obj['contributor_list'] = self.createContributorList()
 
     obj['user_name'] = isCreator ? 'You' : map.get('user_name')
@@ -214,7 +210,7 @@ const InfoBox = {
                     value: "No results",
                     label: "No results",
                     rtype: "noresult",
-                    profile: Metamaps.Erb['user.png'],
+                    profile: Metamaps.ServerData['user.png'],
                 });
             },
             suggestion: function(s) {
@@ -317,7 +313,7 @@ const InfoBox = {
     if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
     else if (relevantPeople.length > 2) contributors_class = 'multiple'
 
-    var contributors_image = Metamaps.Erb['user.png']
+    var contributors_image = Metamaps.ServerData['user.png']
     if (relevantPeople.length > 0) {
       // get the first contributor and use their image
       contributors_image = relevantPeople.models[0].get('image')
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index 7ff806a5..578c1f9f 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -21,13 +21,6 @@ import Visualize from '../Visualize'
 import CheatSheet from './CheatSheet'
 import InfoBox from './InfoBox'
 
-/*
- * Metamaps.Map.js.erb
- *
- * Dependencies:
- *  - Metamaps.Erb
- */
-
 const Map = {
   events: {
     editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js
index 8febe9e1..fe33ac68 100644
--- a/frontend/src/Metamaps/Views/ChatView.js
+++ b/frontend/src/Metamaps/Views/ChatView.js
@@ -1,9 +1,4 @@
-/* global Metamaps, $ */
-
-/*
- * Dependencies:
- *  Metamaps.Erb
- */
+/* global $ */
 
 import Backbone from 'backbone'
 import { Howl } from 'howler'
@@ -128,7 +123,7 @@ var Private = {
   },
   initializeSounds: function () {
     this.sound = new Howl({
-      src: [Metamaps.Erb['sounds/MM_sounds.mp3'], Metamaps.Erb['sounds/MM_sounds.ogg']],
+      src: [Metamaps.ServerData['sounds/MM_sounds.mp3'], Metamaps.ServerData['sounds/MM_sounds.ogg']],
       sprite: {
         joinmap: [0, 561],
         leavemap: [1000, 592],
diff --git a/frontend/src/patched/JIT.js b/frontend/src/patched/JIT.js
index d3cac135..a41f1c65 100644
--- a/frontend/src/patched/JIT.js
+++ b/frontend/src/patched/JIT.js
@@ -3261,7 +3261,7 @@ var Canvas;
           ctx = base.getCtx(),
           scale = base.scaleOffsetX;
       //var pattern = new Image();
-      //pattern.src = Metamaps.Erb['cubes.png']
+      //pattern.src = Metamaps.ServerData['cubes.png']
       //var ptrn = ctx.createPattern(pattern, 'repeat');
       //ctx.fillStyle = ptrn;
       ctx.fillStyle = Metamaps.Settings.colors.background;

From 2f4fe525ce584ef2d472d5159c210e2369509e1f Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Mon, 3 Oct 2016 08:32:37 +0800
Subject: [PATCH 9/9] Fix a bunch of errors and style issues

---
 app/views/explore/active.html.erb             |  2 +-
 app/views/explore/featured.html.erb           |  2 +-
 app/views/explore/mapper.html.erb             |  2 +-
 app/views/explore/mine.html.erb               |  2 +-
 app/views/explore/shared.html.erb             |  2 +-
 app/views/explore/starred.html.erb            |  2 +-
 app/views/maps/show.html.erb                  |  4 +-
 frontend/src/Metamaps/Account.js              |  6 +-
 frontend/src/Metamaps/Active.js               | 11 +---
 frontend/src/Metamaps/DataModel/Map.js        |  4 +-
 .../src/Metamaps/DataModel/MapCollection.js   |  2 +-
 frontend/src/Metamaps/DataModel/Mapper.js     |  2 +-
 .../Metamaps/DataModel/MapperCollection.js    |  2 +-
 frontend/src/Metamaps/DataModel/Mapping.js    |  2 +-
 .../Metamaps/DataModel/MappingCollection.js   |  2 +-
 frontend/src/Metamaps/DataModel/Message.js    |  2 +-
 .../Metamaps/DataModel/MessageCollection.js   |  2 +-
 frontend/src/Metamaps/DataModel/Metacode.js   |  2 +-
 .../Metamaps/DataModel/MetacodeCollection.js  |  2 +-
 frontend/src/Metamaps/DataModel/Synapse.js    | 14 ++---
 .../Metamaps/DataModel/SynapseCollection.js   |  2 +-
 frontend/src/Metamaps/DataModel/Topic.js      |  2 +-
 .../src/Metamaps/DataModel/TopicCollection.js |  2 +-
 frontend/src/Metamaps/DataModel/index.js      | 51 ++++++++++++++--
 frontend/src/Metamaps/GlobalUI/CreateMap.js   | 29 ++++++----
 frontend/src/Metamaps/GlobalUI/Search.js      |  9 ++-
 frontend/src/Metamaps/GlobalUI/index.js       | 34 ++---------
 frontend/src/Metamaps/Import.js               |  6 +-
 frontend/src/Metamaps/JIT.js                  | 20 ++-----
 frontend/src/Metamaps/Loading.js              | 17 +++---
 frontend/src/Metamaps/Map/InfoBox.js          | 13 +++--
 frontend/src/Metamaps/Map/index.js            |  6 +-
 frontend/src/Metamaps/Router.js               |  3 +-
 frontend/src/Metamaps/Synapse.js              |  1 +
 frontend/src/Metamaps/Topic.js                |  6 +-
 frontend/src/Metamaps/TopicCard.js            | 58 ++++++++++---------
 frontend/src/Metamaps/Views/ChatView.js       |  6 +-
 frontend/src/Metamaps/Views/Room.js           |  3 +-
 frontend/src/Metamaps/Views/index.js          |  2 +
 frontend/src/Metamaps/Visualize.js            |  2 +-
 frontend/src/Metamaps/index.js                | 20 ++++---
 frontend/src/patched/JIT.js                   |  2 +
 package.json                                  |  1 +
 webpack.config.js                             | 11 +++-
 44 files changed, 201 insertions(+), 174 deletions(-)

diff --git a/app/views/explore/active.html.erb b/app/views/explore/active.html.erb
index fd9ebe68..e6e2a3a6 100644
--- a/app/views/explore/active.html.erb
+++ b/app/views/explore/active.html.erb
@@ -10,6 +10,6 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "active";
-  Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Active = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/featured.html.erb b/app/views/explore/featured.html.erb
index 15ab97fc..9396ebdc 100644
--- a/app/views/explore/featured.html.erb
+++ b/app/views/explore/featured.html.erb
@@ -10,6 +10,6 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "featured";
-  Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Featured = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/mapper.html.erb b/app/views/explore/mapper.html.erb
index 7669b808..bf3e73c0 100644
--- a/app/views/explore/mapper.html.erb
+++ b/app/views/explore/mapper.html.erb
@@ -10,7 +10,7 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "mapper";
-  Metamaps.Maps.Mapper = {
+  Metamaps.ServerData.Mapper = {
     models: <%= @maps.to_json.html_safe %>,
     id: <%= params[:id] %>
   };
diff --git a/app/views/explore/mine.html.erb b/app/views/explore/mine.html.erb
index 8bf2da6f..21f034c3 100644
--- a/app/views/explore/mine.html.erb
+++ b/app/views/explore/mine.html.erb
@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "mine";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Mine = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/shared.html.erb b/app/views/explore/shared.html.erb
index a47757ec..0f01fcf0 100644
--- a/app/views/explore/shared.html.erb
+++ b/app/views/explore/shared.html.erb
@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "shared";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Shared = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/explore/starred.html.erb b/app/views/explore/starred.html.erb
index 83c8de13..125c3e76 100644
--- a/app/views/explore/starred.html.erb
+++ b/app/views/explore/starred.html.erb
@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "starred";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Starred = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index b25c7610..4ecbd274 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -16,7 +16,7 @@
   Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
   Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
   Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
-  Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
-  Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
+  Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
   Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>
diff --git a/frontend/src/Metamaps/Account.js b/frontend/src/Metamaps/Account.js
index 15b6f30b..b7e1fe79 100644
--- a/frontend/src/Metamaps/Account.js
+++ b/frontend/src/Metamaps/Account.js
@@ -1,6 +1,9 @@
 /* global $, CanvasLoader */
 
 const Account = {
+  init: function (serverData) {
+    Account.userIconUrl = serverData['user.png']
+  },
   listenersInitialized: false,
   userIconUrl: null,
   initListeners: function () {
@@ -9,9 +12,6 @@ const Account = {
     $('#user_image').change(self.showImagePreview)
     self.listenersInitialized = true
   },
-  init: function (serverData) {
-    Account.userIconUrl = serverData['user.png']
-  },
   toggleChangePicture: function () {
     var self = Account
 
diff --git a/frontend/src/Metamaps/Active.js b/frontend/src/Metamaps/Active.js
index fe8bda6d..ddd44152 100644
--- a/frontend/src/Metamaps/Active.js
+++ b/frontend/src/Metamaps/Active.js
@@ -1,16 +1,7 @@
-import DataModelMap from './DataModel/Map'
-import DataModelMapper from './DataModel/Mapper'
-import DataModelTopic from './DataModel/Topic'
-
 const Active = {
   Map: null,
   Mapper: null,
-  Topic: null,
-  init: function(serverData) {
-    if (serverData.Map) Active.Map = new DataModelMap(severData.ActiveMap)
-    if (serverData.Mapper) Active.Mapper = new DataModelMapper(serverData.ActiveMapper)
-    if (serverData.Topic) Active.Topic = new DataModelTopic(serverData.ActiveTopic)
-  }
+  Topic: null
 }
 
 export default Active
diff --git a/frontend/src/Metamaps/DataModel/Map.js b/frontend/src/Metamaps/DataModel/Map.js
index 3ae47d1a..2ab98575 100644
--- a/frontend/src/Metamaps/DataModel/Map.js
+++ b/frontend/src/Metamaps/DataModel/Map.js
@@ -2,10 +2,10 @@
 
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
-import { InfoBox } from '../Map'
+import InfoBox from '../Map/InfoBox'
 import Mapper from '../Mapper'
 import Realtime from '../Realtime'
 
diff --git a/frontend/src/Metamaps/DataModel/MapCollection.js b/frontend/src/Metamaps/DataModel/MapCollection.js
index 69b2f5a8..22bbcf7b 100644
--- a/frontend/src/Metamaps/DataModel/MapCollection.js
+++ b/frontend/src/Metamaps/DataModel/MapCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Loading from '../Loading'
 
diff --git a/frontend/src/Metamaps/DataModel/Mapper.js b/frontend/src/Metamaps/DataModel/Mapper.js
index 3627fbd6..39e83503 100644
--- a/frontend/src/Metamaps/DataModel/Mapper.js
+++ b/frontend/src/Metamaps/DataModel/Mapper.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 import outdent from 'outdent'
 
 const Mapper = Backbone.Model.extend({
diff --git a/frontend/src/Metamaps/DataModel/MapperCollection.js b/frontend/src/Metamaps/DataModel/MapperCollection.js
index e0ce2bed..836ee48f 100644
--- a/frontend/src/Metamaps/DataModel/MapperCollection.js
+++ b/frontend/src/Metamaps/DataModel/MapperCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Mapper from './Mapper'
 
diff --git a/frontend/src/Metamaps/DataModel/Mapping.js b/frontend/src/Metamaps/DataModel/Mapping.js
index 8bf92ed2..282c419f 100644
--- a/frontend/src/Metamaps/DataModel/Mapping.js
+++ b/frontend/src/Metamaps/DataModel/Mapping.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Map from '../Map'
diff --git a/frontend/src/Metamaps/DataModel/MappingCollection.js b/frontend/src/Metamaps/DataModel/MappingCollection.js
index e475e098..9a69f56b 100644
--- a/frontend/src/Metamaps/DataModel/MappingCollection.js
+++ b/frontend/src/Metamaps/DataModel/MappingCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Mapping from './Mapping'
 
diff --git a/frontend/src/Metamaps/DataModel/Message.js b/frontend/src/Metamaps/DataModel/Message.js
index f7dc9bee..00f1cf4b 100644
--- a/frontend/src/Metamaps/DataModel/Message.js
+++ b/frontend/src/Metamaps/DataModel/Message.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 const Message = Backbone.Model.extend({
   urlRoot: '/messages',
diff --git a/frontend/src/Metamaps/DataModel/MessageCollection.js b/frontend/src/Metamaps/DataModel/MessageCollection.js
index a572c212..3ce440eb 100644
--- a/frontend/src/Metamaps/DataModel/MessageCollection.js
+++ b/frontend/src/Metamaps/DataModel/MessageCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Message from './Message'
 
diff --git a/frontend/src/Metamaps/DataModel/Metacode.js b/frontend/src/Metamaps/DataModel/Metacode.js
index f9bd06cf..fbd13755 100644
--- a/frontend/src/Metamaps/DataModel/Metacode.js
+++ b/frontend/src/Metamaps/DataModel/Metacode.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 import outdent from 'outdent'
 
 const Metacode = Backbone.Model.extend({
diff --git a/frontend/src/Metamaps/DataModel/MetacodeCollection.js b/frontend/src/Metamaps/DataModel/MetacodeCollection.js
index ff4626d1..03c41613 100644
--- a/frontend/src/Metamaps/DataModel/MetacodeCollection.js
+++ b/frontend/src/Metamaps/DataModel/MetacodeCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Metacode from './Metacode'
 
diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js
index 09f75743..a60611a3 100644
--- a/frontend/src/Metamaps/DataModel/Synapse.js
+++ b/frontend/src/Metamaps/DataModel/Synapse.js
@@ -1,8 +1,9 @@
 /* global $ */
 
 import _ from 'lodash'
+import outdent from 'outdent'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'
@@ -76,12 +77,11 @@ const Synapse = Backbone.Model.extend({
     this.on('change:desc', Filter.checkSynapses, this)
   },
   prepareLiForFilter: function () {
-    var li = ''
-    li += '<li data-id="' + this.get('desc') + '">'
-    li += '<img src="' + Metamaps.ServerData['synapse16.png'] + '"'
-    li += ' alt="synapse icon" />'
-    li += '<p>' + this.get('desc') + '</p></li>'
-    return li
+    return outdent`
+      <li data-id="${this.get('desc')}">
+        <img src="${DataModel.synapseIconUrl}" alt="synapse icon" />
+        <p>${this.get('desc')}</p>
+      </li>`
   },
   authorizeToEdit: function (mapper) {
     if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
diff --git a/frontend/src/Metamaps/DataModel/SynapseCollection.js b/frontend/src/Metamaps/DataModel/SynapseCollection.js
index 86bf8c47..8d315353 100644
--- a/frontend/src/Metamaps/DataModel/SynapseCollection.js
+++ b/frontend/src/Metamaps/DataModel/SynapseCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Synapse from './Synapse'
 
diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js
index cd709a24..d8426c92 100644
--- a/frontend/src/Metamaps/DataModel/Topic.js
+++ b/frontend/src/Metamaps/DataModel/Topic.js
@@ -2,7 +2,7 @@
 
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'
diff --git a/frontend/src/Metamaps/DataModel/TopicCollection.js b/frontend/src/Metamaps/DataModel/TopicCollection.js
index 4bcaf622..a1de51d6 100644
--- a/frontend/src/Metamaps/DataModel/TopicCollection.js
+++ b/frontend/src/Metamaps/DataModel/TopicCollection.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Topic from './Topic'
 
diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js
index c973cb3b..4e62113d 100644
--- a/frontend/src/Metamaps/DataModel/index.js
+++ b/frontend/src/Metamaps/DataModel/index.js
@@ -37,6 +37,17 @@ const DataModel = {
   Creators: new MapperCollection(),
   Mappers: new MapperCollection(),
   Mappings: new MappingCollection(),
+  Maps: {
+    Mine: [],
+    Shared: [],
+    Starred: [],
+    Mapper: {
+      models: [],
+      mapperId: null
+    },
+    Featured: [],
+    Active: []
+  },
   Messages: [],
   Metacodes: new MetacodeCollection(),
   Stars: [],
@@ -46,6 +57,15 @@ const DataModel = {
   init: function (serverData) {
     var self = DataModel
 
+    // workaround circular import problem
+    if (!self.MapCollection.model) self.MapCollection.model = Map
+
+    self.synapseIconUrl = serverData['synapse16.png']
+
+    if (serverData.ActiveMap) Active.Map = new Map(serverData.ActiveMap)
+    if (serverData.ActiveMapper) Active.Mapper = new Mapper(serverData.ActiveMapper)
+    if (serverData.ActiveTopic) Active.Topic = new Topic(serverData.ActiveTopic)
+
     if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
     if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
     if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
@@ -56,22 +76,43 @@ const DataModel = {
     if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
     if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics)
 
+    // initialize global backbone models and collections
+    if (Active.Mapper) Active.Mapper = new self.Mapper(Active.Mapper)
+
+    var myCollection = serverData.Mine ? serverData.Mine : []
+    var sharedCollection = serverData.Shared ? serverData.Shared : []
+    var starredCollection = serverData.Starred ? serverData.Starred : []
+    var mapperCollection = []
+    var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
+    if (self.Maps.Mapper.mapperId) {
+      mapperCollection = serverData.Mapper.models
+      mapperOptionsObj.mapperId = serverData.Mapper.id
+    }
+    var featuredCollection = serverData.Featured ? serverData.Featured : []
+    var activeCollection = serverData.Active ? serverData.Active : []
+
+    self.Maps.Mine = new MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
+    self.Maps.Shared = new MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
+    self.Maps.Starred = new MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
+    // 'Mapper' refers to another mapper
+    self.Maps.Mapper = new MapCollection(mapperCollection, mapperOptionsObj)
+    self.Maps.Featured = new MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
+    self.Maps.Active = new MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+
     self.attachCollectionEvents()
   },
-
   attachCollectionEvents: function () {
-    var self = DataModel
-    self.Topics.on('add remove', function (topic) {
+    DataModel.Topics.on('add remove', function (topic) {
       InfoBox.updateNumbers()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
-    self.Synapses.on('add remove', function (synapse) {
+    DataModel.Synapses.on('add remove', function (synapse) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMappers()
     })
-    self.Mappings.on('add remove', function (mapping) {
+    DataModel.Mappings.on('add remove', function (mapping) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMetacodes()
diff --git a/frontend/src/Metamaps/GlobalUI/CreateMap.js b/frontend/src/Metamaps/GlobalUI/CreateMap.js
index 97110c91..11c8deb9 100644
--- a/frontend/src/Metamaps/GlobalUI/CreateMap.js
+++ b/frontend/src/Metamaps/GlobalUI/CreateMap.js
@@ -1,7 +1,10 @@
 /* global $ */
 
+import outdent from 'outdent'
+
 import Active from '../Active'
 import DataModel from '../DataModel'
+import DataModelMap from '../DataModel/Map'
 import GlobalUI from './index'
 
 const CreateMap = {
@@ -13,7 +16,7 @@ const CreateMap = {
   init: function () {
     var self = CreateMap
 
-    self.newMap = new DataModel.Map({ permission: 'commons' })
+    self.newMap = new DataModelMap({ permission: 'commons' })
 
     self.bindFormEvents()
 
@@ -40,15 +43,6 @@ const CreateMap = {
       $(this).remove()
     })
   },
-  generateSuccessMessage: function (id) {
-    var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"
-    stringStart += id
-    stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"
-    stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "
-    var page = Active.Map ? 'map' : 'page'
-    var stringEnd = '</a></div>'
-    return stringStart + page + stringEnd
-  },
   switchPermission: function () {
     var self = CreateMap
 
@@ -108,7 +102,20 @@ const CreateMap = {
     DataModel.Maps.Mine.add(model)
 
     GlobalUI.clearNotify()
-    $('#wrapper').append(self.generateSuccessMessage(model.id))
+    $('#wrapper').append(outdent`
+      <div id="mapCreatedSuccess">
+        <h6>SUCCESS!</h6>
+        Your map has been created. Do you want to:
+        <a id="mapGo" href="/maps/${model.id}">Go to your new map</a>
+        <span>OR</span>
+        <a id="mapStay" href="#">Stay on this ${Active.Map ? 'map' : 'page'}</a>
+      </div>
+    `)
+    $('#mapGo').click(e => GlobalUI.CreateMap.closeSuccess())
+    $('#mapStay').click(e => {
+      GlobalUI.CreateMap.closeSuccess()
+      return false
+    })
   },
   reset: function (id) {
     var self = CreateMap
diff --git a/frontend/src/Metamaps/GlobalUI/Search.js b/frontend/src/Metamaps/GlobalUI/Search.js
index 1d4b82e4..0859b941 100644
--- a/frontend/src/Metamaps/GlobalUI/Search.js
+++ b/frontend/src/Metamaps/GlobalUI/Search.js
@@ -10,9 +10,12 @@ const Search = {
   limitMapsToMe: false,
   changing: false,
   optionsInitialized: false,
-  init: function () {
+  init: function (serverData) {
     var self = Search
 
+    self.wildcardIconUrl = serverData['icons/wildcard.png']
+    self.userIconUrl = serverData['user.png']
+
     // this is similar to Metamaps.Loading, but it's for the search element
     var loader = new CanvasLoader('searchLoading')
     loader.setColor('#4fb5c0') // default is '#000000'
@@ -50,7 +53,7 @@ const Search = {
           return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
             value: 'No results',
             label: 'No results',
-            typeImageURL: Metamaps.ServerData['icons/wildcard.png'],
+            typeImageURL: self.wildcardIconUrl,
             rtype: 'noresult'
           })
         },
@@ -118,7 +121,7 @@ const Search = {
             value: 'No results',
             label: 'No results',
             rtype: 'noresult',
-            profile: Metamaps.ServerData['user.png']
+            profile: self.userIconUrl
           })
         },
         header: mapperheader,
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index 2444925a..d1a0b6ba 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/frontend/src/Metamaps/GlobalUI/index.js
@@ -2,9 +2,7 @@
 
 import clipboard from 'clipboard-js'
 
-import Active from '../Active'
 import Create from '../Create'
-import DataModel from '../DataModel'
 
 import Search from './Search'
 import CreateMap from './CreateMap'
@@ -14,13 +12,13 @@ import ImportDialog from './ImportDialog'
 const GlobalUI = {
   notifyTimeout: null,
   lightbox: null,
-  init: function () {
+  init: function (serverData) {
     var self = GlobalUI
 
-    self.Search.init()
-    self.CreateMap.init()
-    self.Account.init()
-    self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox)
+    self.Search.init(serverData)
+    self.CreateMap.init(serverData)
+    self.Account.init(serverData)
+    self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
 
     if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
 
@@ -32,28 +30,6 @@ const GlobalUI = {
     })
 
     $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
-
-    // initialize global backbone models and collections
-    if (Active.Mapper) Active.Mapper = new DataModel.Mapper(Active.Mapper)
-
-    var myCollection = DataModel.Maps.Mine ? DataModel.Maps.Mine : []
-    var sharedCollection = DataModel.Maps.Shared ? DataModel.Maps.Shared : []
-    var starredCollection = DataModel.Maps.Starred ? DataModel.Maps.Starred : []
-    var mapperCollection = []
-    var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
-    if (DataModel.Maps.Mapper) {
-      mapperCollection = DataModel.Maps.Mapper.models
-      mapperOptionsObj.mapperId = DataModel.Maps.Mapper.id
-    }
-    var featuredCollection = DataModel.Maps.Featured ? DataModel.Maps.Featured : []
-    var activeCollection = DataModel.Maps.Active ? DataModel.Maps.Active : []
-    DataModel.Maps.Mine = new DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
-    DataModel.Maps.Shared = new DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
-    DataModel.Maps.Starred = new DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
-    // 'Mapper' refers to another mapper
-    DataModel.Maps.Mapper = new DataModel.MapCollection(mapperCollection, mapperOptionsObj)
-    DataModel.Maps.Featured = new DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
-    DataModel.Maps.Active = new DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
   },
   showDiv: function (selector) {
     $(selector).show()
diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js
index d273edbb..8436c148 100644
--- a/frontend/src/Metamaps/Import.js
+++ b/frontend/src/Metamaps/Import.js
@@ -5,7 +5,7 @@ import _ from 'lodash'
 
 import Active from './Active'
 import AutoLayout from './AutoLayout'
-import DataModel from './DataModel' 
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
 import Map from './Map'
 import Synapse from './Synapse'
@@ -218,7 +218,7 @@ const Import = {
     parsedTopics.forEach(topic => {
       let coords = { x: topic.x, y: topic.y }
       if (!coords.x || !coords.y) {
-        coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+        coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
       }
 
       if (!topic.name && topic.link ||
@@ -351,7 +351,7 @@ const Import = {
   handleURL: function (url, opts = {}) {
     let coords = opts.coords
     if (!coords || coords.x === undefined || coords.y === undefined) {
-      coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+      coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
     }
 
     const name = opts.name || 'Link'
diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js
index cbcd131b..7cbce927 100644
--- a/frontend/src/Metamaps/JIT.js
+++ b/frontend/src/Metamaps/JIT.js
@@ -51,7 +51,7 @@ const JIT = {
   /**
    * This method will bind the event handlers it is interested and initialize the class.
    */
-  init: function () {
+  init: function (serverData) {
     const self = JIT
 
     $('.zoomIn').click(self.zoomIn)
@@ -65,10 +65,10 @@ const JIT = {
     $('.takeScreenshot').click(Map.exportImage)
 
     self.topicDescImage = new Image()
-    self.topicDescImage.src = Metamaps.ServerData['topic_description_signifier.png']
+    self.topicDescImage.src = serverData['topic_description_signifier.png']
 
     self.topicLinkImage = new Image()
-    self.topicLinkImage.src = Metamaps.ServerData['topic_link_signifier.png']
+    self.topicLinkImage.src = serverData['topic_link_signifier.png']
   },
   /**
    * convert our topic JSON into something JIT can use
@@ -313,17 +313,6 @@ const JIT = {
         panning: 'avoid nodes',
         zooming: 28 // zoom speed. higher is more sensible
       },
-      // background: {
-      //    type: 'Metamaps'
-      // },
-      // NodeStyles: {
-      //  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
@@ -649,7 +638,6 @@ const JIT = {
     },
     // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
     background: {
-      // type: 'Metamaps',
       levelDistance: 200,
       numberOfCircles: 4,
       CanvasStyles: {
@@ -1573,7 +1561,7 @@ const JIT = {
     loader.show() // Hidden by default
 
     const topics = DataModel.Topics.map(function (t) { return t.id })
-    const topics_string = topics.join()
+    const topicsString = topics.join()
 
     const successCallback = function (data) {
       $('#loadingSiblings').remove()
diff --git a/frontend/src/Metamaps/Loading.js b/frontend/src/Metamaps/Loading.js
index 97275547..b1fc2abb 100644
--- a/frontend/src/Metamaps/Loading.js
+++ b/frontend/src/Metamaps/Loading.js
@@ -1,19 +1,20 @@
 /* global CanvasLoader, $ */
 
 const Loading = {
-  loader: new CanvasLoader('loading'),
+  loader: null, // needs CanvasLoader to be defined
   hide: function () {
-    $('#loading').hide();
+    $('#loading').hide()
   },
   show: function () {
-    $('#loading').show();
+    $('#loading').show()
   },
   setup: function () {
-    Loading.loader.setColor('#4fb5c0'); // default is '#000000'
-    Loading.loader.setDiameter(28); // default is 40
-    Loading.loader.setDensity(41); // default is 40
-    Loading.loader.setRange(0.9); // default is 1.3
-    Loading.loader.show(); // Hidden by default
+    if (!Loading.loader) Loading.loader = new CanvasLoader('loading')
+    Loading.loader.setColor('#4fb5c0') // default is '#000000'
+    Loading.loader.setDiameter(28) // default is 40
+    Loading.loader.setDensity(41) // default is 40
+    Loading.loader.setRange(0.9) // default is 1.3
+    Loading.loader.show() // Hidden by default
   }
 }
 
diff --git a/frontend/src/Metamaps/Map/InfoBox.js b/frontend/src/Metamaps/Map/InfoBox.js
index a3e31f19..bf56dc90 100644
--- a/frontend/src/Metamaps/Map/InfoBox.js
+++ b/frontend/src/Metamaps/Map/InfoBox.js
@@ -34,7 +34,8 @@ const InfoBox = {
       data-bip-activator="#mapInfoDesc"
       data-bip-value="{{desc}}"
     >{{desc}}</span>`,
-  init: function () {
+  userImageUrl: '',
+  init: function (serverData) {
     var self = InfoBox
 
     $('.mapInfoIcon').click(self.toggleBox)
@@ -46,7 +47,9 @@ const InfoBox = {
     self.attachEventListeners() 
 
     self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
-    
+
+    self.userImageUrl = serverData['user.png']
+
     var querystring = window.location.search.replace(/^\?/, '')
     if (querystring == 'new') { 
       self.open()
@@ -108,7 +111,7 @@ const InfoBox = {
     obj['contributor_count'] = relevantPeople.length
     obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : ''
     obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : ''
-    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.ServerData['user.png']
+    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : self.userImageUrl
     obj['contributor_list'] = self.createContributorList()
 
     obj['user_name'] = isCreator ? 'You' : map.get('user_name')
@@ -210,7 +213,7 @@ const InfoBox = {
                     value: "No results",
                     label: "No results",
                     rtype: "noresult",
-                    profile: Metamaps.ServerData['user.png'],
+                    profile: self.userImageUrl
                 });
             },
             suggestion: function(s) {
@@ -313,7 +316,7 @@ const InfoBox = {
     if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
     else if (relevantPeople.length > 2) contributors_class = 'multiple'
 
-    var contributors_image = Metamaps.ServerData['user.png']
+    var contributors_image = self.userImageUrl
     if (relevantPeople.length > 0) {
       // get the first contributor and use their image
       contributors_image = relevantPeople.models[0].get('image')
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index 578c1f9f..b616e95f 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -25,7 +25,7 @@ const Map = {
   events: {
     editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
   },
-  init: function () {
+  init: function (serverData) {
     var self = Map
     
     $('#wrapper').mousedown(function (e){
@@ -44,8 +44,8 @@ const Map = {
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
 
     self.updateStar()
-    InfoBox.init()
-    CheatSheet.init()
+    InfoBox.init(serverData)
+    CheatSheet.init(serverData)
 
     $('.viewOnly .requestAccess').click(self.requestAccess)
 
diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js
index 9046c112..74648ac1 100644
--- a/frontend/src/Metamaps/Router.js
+++ b/frontend/src/Metamaps/Router.js
@@ -1,9 +1,10 @@
 /* global $ */
 
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from './Active'
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
 import Loading from './Loading'
 import Map from './Map'
diff --git a/frontend/src/Metamaps/Synapse.js b/frontend/src/Metamaps/Synapse.js
index 824aad4b..0345690d 100644
--- a/frontend/src/Metamaps/Synapse.js
+++ b/frontend/src/Metamaps/Synapse.js
@@ -3,6 +3,7 @@
 import Active from './Active'
 import Control from './Control'
 import Create from './Create'
+import DataModel from './DataModel'
 import JIT from './JIT'
 import Map from './Map'
 import Selected from './Selected'
diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js
index 05cd54f1..08ac0661 100644
--- a/frontend/src/Metamaps/Topic.js
+++ b/frontend/src/Metamaps/Topic.js
@@ -359,13 +359,13 @@ const Topic = {
     $(document).trigger(Map.events.editedByActiveMapper)
 
     var metacode = DataModel.Metacodes.findWhere({ name: 'Metamap' })
-    var topic = new Metamaps.Backbone.Topic({
+    var topic = new DataModel.Topic({
       name: data.name,
       metacode_id: metacode.id,
-      defer_to_map_id: Metamaps.Active.Map.id,
+      defer_to_map_id: Active.Map.id,
       link: window.location.origin + '/maps/' + data.id
     })
-    Metamaps.Topics.add(topic)
+    DataModel.Topics.add(topic)
 
     var mapping = new DataModel.Mapping({
       xloc: Create.newTopic.x,
diff --git a/frontend/src/Metamaps/TopicCard.js b/frontend/src/Metamaps/TopicCard.js
index dd172971..6e798ee6 100644
--- a/frontend/src/Metamaps/TopicCard.js
+++ b/frontend/src/Metamaps/TopicCard.js
@@ -11,9 +11,16 @@ import Visualize from './Visualize'
 const TopicCard = {
   openTopicCard: null, // stores the topic that's currently open
   authorizedToEdit: false, // stores boolean for edit permission for open topic card
-  init: function () {
+  RAILS_ENV: undefined,
+  init: function (serverData) {
     var self = TopicCard
 
+    if (serverData.RAILS_ENV) {
+      self.RAILS_ENV = serverData.RAILS_ENV
+    } else {
+      console.error('RAILS_ENV is not defined! See TopicCard.js init function.')
+    }
+
     // initialize best_in_place editing
     $('.authenticated div.permission.canEdit .best_in_place').best_in_place()
 
@@ -84,6 +91,23 @@ const TopicCard = {
     $('.attachments').removeClass('hidden')
     $('.CardOnGraph').removeClass('hasAttachment')
   },
+  showLinkLoader: function() {
+    var loader = new CanvasLoader('embedlyLinkLoader')
+    loader.setColor('#4fb5c0'); // default is '#000000'
+    loader.setDiameter(28) // default is 40
+    loader.setDensity(41) // default is 40
+    loader.setRange(0.9); // default is 1.3
+    loader.show() // Hidden by default
+  },
+  showLink: function(topic) {
+    var e = embedly('card', document.getElementById('embedlyLink'))
+    if (!e && TopicCard.RAILS_ENV != 'development') {
+      TopicCard.handleInvalidLink()
+    } else if (!e) {
+      $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
+      $('#embedlyLinkLoader').hide()
+    }
+  },
   bindShowCardListeners: function (topic) {
     var self = TopicCard
     var showCard = document.getElementById('showcard')
@@ -123,20 +147,9 @@ const TopicCard = {
           $('.attachments').addClass('hidden')
           $('.embeds').append(embedlyEl)
           $('.embeds').append('<div id="embedlyLinkLoader"></div>')
-          var loader = new CanvasLoader('embedlyLinkLoader')
-          loader.setColor('#4fb5c0'); // default is '#000000'
-          loader.setDiameter(28) // default is 40
-          loader.setDensity(41) // default is 40
-          loader.setRange(0.9); // default is 1.3
-          loader.show() // Hidden by default
-          var e = embedly('card', document.getElementById('embedlyLink'))
-          if (!e && Metamaps.Erb.RAILS_ENV != 'development') {
-            self.handleInvalidLink()
-          }
-          else if (!e) {
-            $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
-            $('#embedlyLinkLoader').hide()
-          }
+
+          self.showLinkLoader()
+          self.showLink(topic)
         }
       }, 100)
     }
@@ -145,20 +158,9 @@ const TopicCard = {
 
     // initialize the link card, if there is a link
     if (topic.get('link') && topic.get('link') !== '') {
-      var loader = new CanvasLoader('embedlyLinkLoader')
-      loader.setColor('#4fb5c0'); // default is '#000000'
-      loader.setDiameter(28) // default is 40
-      loader.setDensity(41) // default is 40
-      loader.setRange(0.9); // default is 1.3
-      loader.show() // Hidden by default
-      var e = embedly('card', document.getElementById('embedlyLink'))
+      self.showLinkLoader()
+      self.showLink(topic)
       self.showLinkRemover()
-      if (!e && Metamaps.Erb.RAILS_ENV != 'development') {
-        self.handleInvalidLink()
-      } else if (!e) {
-        $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
-        $('#embedlyLinkLoader').hide()
-      }
     }
 
     var selectingMetacode = false
diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js
index fe33ac68..7175949f 100644
--- a/frontend/src/Metamaps/Views/ChatView.js
+++ b/frontend/src/Metamaps/Views/ChatView.js
@@ -121,9 +121,9 @@ var Private = {
       Handlers.inputBlur.call(self)
     })
   },
-  initializeSounds: function () {
+  initializeSounds: function (soundUrls) {
     this.sound = new Howl({
-      src: [Metamaps.ServerData['sounds/MM_sounds.mp3'], Metamaps.ServerData['sounds/MM_sounds.ogg']],
+      src: soundUrls,
       sprite: {
         joinmap: [0, 561],
         leavemap: [1000, 592],
@@ -243,7 +243,7 @@ const ChatView = function (messages, mapper, room) {
   Private.attachElements.call(this)
   Private.addEventListeners.call(this)
   Private.initialMessages.call(this)
-  Private.initializeSounds.call(this)
+  Private.initializeSounds.call(this, room.soundUrls)
   this.$container.css({
     right: '-300px'
   })
diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js
index ff8975d2..f0821a10 100644
--- a/frontend/src/Metamaps/Views/Room.js
+++ b/frontend/src/Metamaps/Views/Room.js
@@ -13,7 +13,7 @@ import Realtime from '../Realtime'
 import ChatView from './ChatView'
 import VideoView from './VideoView'
 
-const Room = function(opts) {
+const Room = function(opts = {}) {
   var self = this
 
   this.isActiveRoom = false
@@ -31,6 +31,7 @@ const Room = function(opts) {
   this.chat = new ChatView(this.messages, this.currentMapper, this.room)
 
   this.videos = {}
+  this.soundUrls = opts.soundUrls
 
   this.init()
 }
diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js
index 39104b18..17b592d6 100644
--- a/frontend/src/Metamaps/Views/index.js
+++ b/frontend/src/Metamaps/Views/index.js
@@ -15,4 +15,6 @@ const Views = {
   VideoView,
   Room
 }
+
+export { ExploreMaps, ChatView, VideoView, Room }
 export default Views
diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js
index 720ef598..3760a33a 100644
--- a/frontend/src/Metamaps/Visualize.js
+++ b/frontend/src/Metamaps/Visualize.js
@@ -17,7 +17,7 @@ const Visualize = {
   type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
   loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
   touchDragNode: null,
-  init: function () {
+  init: function (serverData) {
     var self = Visualize
 
     if (serverData.VisualizeType) self.type = serverData.VisualizeType
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index 012af50b..696d1539 100644
--- a/frontend/src/Metamaps/index.js
+++ b/frontend/src/Metamaps/index.js
@@ -1,5 +1,3 @@
-/* global Metamaps */
-
 import Account from './Account'
 import Active from './Active'
 import Admin from './Admin'
@@ -34,7 +32,7 @@ import Util from './Util'
 import Views from './Views'
 import Visualize from './Visualize'
 
-Metamaps = window.Metamaps || {}
+const Metamaps = window.Metamaps || {}
 Metamaps.Account = Account
 Metamaps.Active = Active
 Metamaps.Admin = Admin
@@ -72,6 +70,10 @@ Metamaps.Topic = Topic
 Metamaps.TopicCard = TopicCard
 Metamaps.Util = Util
 Metamaps.Views = Views
+Metamaps.Views.ExploreMaps = ExploreMaps
+Metamaps.Views.ChatView = ChatView
+Metamaps.Views.VideoView = VideoView
+Metamaps.Views.Room = Room
 Metamaps.Visualize = Visualize
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -90,19 +92,19 @@ document.addEventListener('DOMContentLoaded', function () {
   if (Metamaps.currentSection === 'explore') {
     const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
 
-    Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
+    Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
     if (Metamaps.currentPage === 'mapper') {
-      Views.ExploreMaps.fetchUserThenRender()
+      ExploreMaps.fetchUserThenRender()
     } else {
-      Views.ExploreMaps.render()
+      ExploreMaps.render()
     }
     GlobalUI.showDiv('#explore')
   } else if (Metamaps.currentSection === '' && Active.Mapper) {
-    Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
-    Views.ExploreMaps.render()
+    ExploreMaps.setCollection(DataModel.Maps.Active)
+    ExploreMaps.render()
     GlobalUI.showDiv('#explore')
   } else if (Active.Map || Active.Topic) {
-    Metamaps.Loading.show()
+    Loading.show()
     JIT.prepareVizData()
     GlobalUI.showDiv('#infovis')
   }
diff --git a/frontend/src/patched/JIT.js b/frontend/src/patched/JIT.js
index a41f1c65..d4c3154a 100644
--- a/frontend/src/patched/JIT.js
+++ b/frontend/src/patched/JIT.js
@@ -11349,4 +11349,6 @@ $jit.ForceDirected3D.$extend = true;
 
 })($jit.ForceDirected3D);
 
+// START METAMAPS CODE
 export default $jit
+// END METAMAPS CODE
diff --git a/package.json b/package.json
index 940f7c58..e33a6e0a 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
   "devDependencies": {
     "babel-eslint": "^6.1.2",
     "chai": "^3.5.0",
+    "circular-dependency-plugin": "^2.0.0",
     "eslint": "^3.5.0",
     "eslint-config-standard": "^6.2.0",
     "eslint-plugin-promise": "^2.0.1",
diff --git a/webpack.config.js b/webpack.config.js
index 644ff002..423616f9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,6 +12,13 @@ if (NODE_ENV === 'production') {
   plugins.push(new webpack.optimize.UglifyJsPlugin({
     compress: { warnings: false }
   }))
+} else {
+  // enable this to test for circular dependencies
+  // const CircularDependencyPlugin = require('circular-dependency-plugin')
+  // plugins.push(new CircularDependencyPlugin({
+  //   exclude: /^node_modules\//,
+  //   failOnError: true
+  // }))
 }
 
 const devtool = NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map'
@@ -28,9 +35,7 @@ const config = module.exports = {
       {
         test: /\.(js|jsx)?$/,
         exclude: /node_modules/,
-        loaders: [
-          'babel-loader?cacheDirectory&retainLines=true'
-        ]
+        loader: 'babel-loader?cacheDirectory&retainLines=true'
       }
     ]
   },