Merge pull request #707 from metamaps/feature/split-out-backbone

finish removing global Metamaps references from frontend code

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

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

app/assets/javascripts/src/Metamaps.Erb.js.erb

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

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.ServerData.Active = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

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.ServerData.Featured = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

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.ServerData.Mapper = {
+    models: <%= @maps.to_json.html_safe %>,
+    id: <%= params[:id] %>
+  };
   Metamaps.GlobalUI.Search.focus();
 </script>

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.ServerData.Mine = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

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.ServerData.Shared = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

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.ServerData.Starred = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

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 %>
+    Metamaps.ServerData.ActiveMapper = <%= current_user.to_json.html_safe %>
   <% else %>
-        Metamaps.Active.Mapper = null;
+    Metamaps.ServerData.ActiveMapper = null
   <% end %>
 
-    // TODO move this into frontend/
+  Metamaps.Loading.setup()
-    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
 </script>
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
 </body>

app/views/layouts/_templates.html.erb

@@ -4,7 +4,6 @@
   #%>
 
 <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>
@@ -161,7 +160,8 @@
 
   <script type="text/template" id="topicAutocompleteTemplate">
     <div>
-        <img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
+      <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">
@@ -177,7 +177,6 @@
     </div>
   </script>
 
-
   <script type="text/template" id="topicCardTemplate">
     <div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
       <span class="title"> 
@@ -188,7 +187,10 @@
             data-bip-attribute="name"
             data-bip-activator="#titleActivator"           
             data-bip-value="{{name}}"
-                    data-bip-type="textarea">{{name}}</span>
+            data-bip-type="textarea"
+          >
+            {{name}}
+          </span>
         </div> 
       </span>
       <div class="links">
@@ -218,10 +220,18 @@
       </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>
+          <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>

app/views/main/home.html.erb

@@ -33,7 +33,8 @@
     </div>
   </div>
 </div><!-- end yield -->
+
 <script>
-Metamaps.currentSection = "";
+  Metamaps.currentSection = ''
-Metamaps.currentPage = "";
+  Metamaps.currentPage = ''
 </script>

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.ServerData = Metamaps.ServerData || {}
-    Metamaps.Mappers = <%= @allmappers.to_json.html_safe %>;
+  Metamaps.ServerData.ActiveMap = <%= @map.to_json.html_safe %>;
-    Metamaps.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
+  Metamaps.ServerData.Mappers = <%= @allmappers.to_json.html_safe %>;
-    Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
+  Metamaps.ServerData.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
-    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
+  Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
-    Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;
+  Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
-    Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
+  Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
-    Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
-    Metamaps.Visualize.type = "ForceDirected";
+  Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>

app/views/shared/_switchmetacodes.html.erb

@@ -117,6 +117,6 @@
 <div class="clearfloat"></div>
 
 <script>
-Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>";
+  Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>"
-Metamaps.Create.selectedMetacodeSetIndex = <%= index %>;
+  Metamaps.Create.selectedMetacodeSetIndex = <%= index %>
 </script>

app/views/topics/show.html.erb

@@ -1,27 +1,20 @@
 <%#
+#
 # @file
-# This shows a topic view. It is used.
+# This shows a topic and its siblings.
-# 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.
 # URL: /topics/<topicid>
 #
-#%>
+%>
 
 <% content_for :title, @topic.name + " | Metamaps" %> 
 <% content_for :mobile_title, @topic.name %> 
 <script>
-    Metamaps.currentSection = "topic";
+  Metamaps.currentSection = "topic"
-    Metamaps.currentPage = <%= @topic.id.to_s %>;
+  Metamaps.currentPage = <%= @topic.id.to_s %>
-    Metamaps.Active.Topic = <%= @topic.to_json(user: current_user).html_safe %>;
+  Metamaps.ServerData = Metamaps.ServerData || {}
-    Metamaps.Creators = <%= @allcreators.to_json.html_safe %>;
+  Metamaps.ServerData.ActiveTopic = <%= @topic.to_json(user: current_user).html_safe %>
-    Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
+  Metamaps.ServerData.Creators = <%= @allcreators.to_json.html_safe %>
-    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
+  Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>
-    Metamaps.Visualize.type = "RGraph";
+  Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>
+  Metamaps.ServerData.VisualizeType = "RGraph"
 </script>

frontend/src/Metamaps/Account.js

@@ -1,11 +1,11 @@
 /* global $, CanvasLoader */
 
-/* 
- * Metamaps.Erb
- */
-
 const Account = {
+  init: function (serverData) {
+    Account.userIconUrl = serverData['user.png']
+  },
   listenersInitialized: false,
+  userIconUrl: null,
   initListeners: 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')

frontend/src/Metamaps/Active.js

@@ -1,7 +1,7 @@
 const Active = {
   Map: null,
-  Topic: null,
+  Mapper: null,
-  Mapper: null
+  Topic: null
-};
+}
 
 export default Active

frontend/src/Metamaps/Backbone/index.js

@@ -1,663 +0,0 @@
-/* global Metamaps, Backbone, $ */
-
-import _ from 'lodash'
-import Backbone from 'backbone'
-Backbone.$ = window.$
-
-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'
-
-/*
- * Metamaps.Backbone.js.erb
- *
- * Dependencies:
- *  - Metamaps.Collaborators
- *  - Metamaps.Creators
- *  - Metamaps.Loading
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
-const _Backbone = {}
-
-_Backbone.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)
-    }
-  }
-})
-_Backbone.MapsCollection = Backbone.Collection.extend({
-  model: _Backbone.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)
-    }
-  }
-})
-
-_Backbone.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
-     */
-  }
-})
-_Backbone.MessageCollection = Backbone.Collection.extend({
-  model: _Backbone.Message,
-  url: '/messages'
-})
-
-_Backbone.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
-  }
-})
-
-_Backbone.MapperCollection = Backbone.Collection.extend({
-  model: _Backbone.Mapper,
-  url: '/users'
-})
-
-_Backbone.init = function () {
-  var self = _Backbone
-
-  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 () {
-    Metamaps.Topics.on('add remove', function (topic) {
-      InfoBox.updateNumbers()
-      Filter.checkMetacodes()
-      Filter.checkMappers()
-    })
-
-    Metamaps.Synapses.on('add remove', function (synapse) {
-      InfoBox.updateNumbers()
-      Filter.checkSynapses()
-      Filter.checkMappers()
-    })
-
-    if (Active.Map) {
-      Metamaps.Mappings.on('add remove', function (mapping) {
-        InfoBox.updateNumbers()
-        Filter.checkSynapses()
-        Filter.checkMetacodes()
-        Filter.checkMappers()
-      })
-    }
-  }
-  self.attachCollectionEvents()
-}; // end _Backbone.init
-
-export default _Backbone

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

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.Backbone
- *  - 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.Backbone.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

frontend/src/Metamaps/DataModel/Map.js

@@ -0,0 +1,92 @@
+/* global $ */
+
+import _ from 'lodash'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Active from '../Active'
+import InfoBox from '../Map/InfoBox'
+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

frontend/src/Metamaps/DataModel/MapCollection.js

@@ -0,0 +1,76 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Loading from '../Loading'
+
+import Map from './Map'
+
+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
+
+    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

frontend/src/Metamaps/DataModel/Mapper.js

@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+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

frontend/src/Metamaps/DataModel/MapperCollection.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Mapper from './Mapper'
+
+const MapperCollection = Backbone.Collection.extend({
+  model: Mapper,
+  url: '/users'
+})
+
+export default MapperCollection

frontend/src/Metamaps/DataModel/Mapping.js

@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+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

frontend/src/Metamaps/DataModel/MappingCollection.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Mapping from './Mapping'
+
+const MappingCollection = Backbone.Collection.extend({
+  model: Mapping,
+  url: '/mappings'
+})
+
+export default MappingCollection

frontend/src/Metamaps/DataModel/Message.js

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+const Message = Backbone.Model.extend({
+  urlRoot: '/messages',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  }
+})
+
+export default Message

frontend/src/Metamaps/DataModel/MessageCollection.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Message from './Message'
+
+const MessageCollection = Backbone.Collection.extend({
+  model: Message,
+  url: '/messages'
+})
+
+export default MessageCollection

frontend/src/Metamaps/DataModel/Metacode.js

@@ -0,0 +1,21 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+import outdent from 'outdent'
+
+const Metacode = Backbone.Model.extend({
+  initialize: function () {
+    var image = new window.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

frontend/src/Metamaps/DataModel/MetacodeCollection.js

@@ -0,0 +1,16 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+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

frontend/src/Metamaps/DataModel/Synapse.js

@@ -0,0 +1,179 @@
+/* global $ */
+
+import _ from 'lodash'
+import outdent from 'outdent'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Active from '../Active'
+import Filter from '../Filter'
+import JIT from '../JIT'
+import Realtime from '../Realtime'
+import SynapseCard from '../SynapseCard'
+import Visualize from '../Visualize'
+
+import DataModel from './index'
+
+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 () {
+    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
+    else return false
+  },
+  authorizePermissionChange: function (mapper) {
+    if (mapper && this.get('user_id') === mapper.get('id')) return true
+    else return false
+  },
+  getTopic1: function () {
+    return DataModel.Topics.get(this.get('topic1_id'))
+  },
+  getTopic2: function () {
+    return DataModel.Topics.get(this.get('topic2_id'))
+  },
+  getDirection: function () {
+    var t1 = this.getTopic1()
+    var t2 = this.getTopic2()
+
+    return t1 && t2 ? [
+      t1.get('node').id,
+      t2.get('node').id
+    ] : false
+  },
+  getMapping: function () {
+    if (!Active.Map) return false
+
+    return DataModel.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

frontend/src/Metamaps/DataModel/SynapseCollection.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Synapse from './Synapse'
+
+const SynapseCollection = Backbone.Collection.extend({
+  model: Synapse,
+  url: '/synapses'
+})
+
+export default SynapseCollection

frontend/src/Metamaps/DataModel/Topic.js

@@ -0,0 +1,176 @@
+/* global $ */
+
+import _ from 'lodash'
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Active from '../Active'
+import Filter from '../Filter'
+import JIT from '../JIT'
+import Realtime from '../Realtime'
+import TopicCard from '../TopicCard'
+import Visualize from '../Visualize'
+
+import DataModel from './index'
+
+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 DataModel.Metacodes.get(this.get('metacode_id'))
+  },
+  getMapping: function () {
+    if (!Active.Map) return false
+
+    return DataModel.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

frontend/src/Metamaps/DataModel/TopicCollection.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone'
+try { Backbone.$ = window.$ } catch (err) {}
+
+import Topic from './Topic'
+
+const TopicCollection = Backbone.Collection.extend({
+  model: Topic,
+  url: '/topics'
+})
+
+export default TopicCollection

frontend/src/Metamaps/DataModel/index.js

@@ -0,0 +1,129 @@
+import Active from '../Active'
+import Filter from '../Filter'
+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'
+
+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,
+
+  Collaborators: new MapperCollection(),
+  Creators: new MapperCollection(),
+  Mappers: new MapperCollection(),
+  Mappings: new MappingCollection(),
+  Maps: {
+    Mine: [],
+    Shared: [],
+    Starred: [],
+    Mapper: {
+      models: [],
+      mapperId: null
+    },
+    Featured: [],
+    Active: []
+  },
+  Messages: [],
+  Metacodes: new MetacodeCollection(),
+  Stars: [],
+  Synapses: new SynapseCollection(),
+  Topics: new TopicCollection(),
+
+  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)
+    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)
+    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)
+
+    // 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 () {
+    DataModel.Topics.on('add remove', function (topic) {
+      InfoBox.updateNumbers()
+      Filter.checkMetacodes()
+      Filter.checkMappers()
+    })
+    DataModel.Synapses.on('add remove', function (synapse) {
+      InfoBox.updateNumbers()
+      Filter.checkSynapses()
+      Filter.checkMappers()
+    })
+    DataModel.Mappings.on('add remove', function (mapping) {
+      InfoBox.updateNumbers()
+      Filter.checkSynapses()
+      Filter.checkMetacodes()
+      Filter.checkMappers()
+    })
+  }
+}
+
+// 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

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) ||
+      model = DataModel[correlatedModel].get(identifier) ||
-      Metamaps[correlatedModel].find(function (model) {
+      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()

frontend/src/Metamaps/GlobalUI/CreateMap.js

@@ -1,13 +1,12 @@
-/* global Metamaps, $ */
+/* global $ */
+
+import outdent from 'outdent'
 
 import Active from '../Active'
+import DataModel from '../DataModel'
+import DataModelMap from '../DataModel/Map'
 import GlobalUI from './index'
 
-/*
- * Metamaps.Backbone
- * Metamaps.Maps
- */
-
 const CreateMap = {
   newMap: null,
   emptyMapForm: '',
@@ -17,7 +16,7 @@ const CreateMap = {
   init: function () {
     var self = CreateMap
 
-    self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
+    self.newMap = new DataModelMap({ permission: 'commons' })
 
     self.bindFormEvents()
 
@@ -44,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
 
@@ -109,10 +99,23 @@ 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))
+    $('#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
@@ -128,7 +131,7 @@ const CreateMap = {
     }
 
     self.bindFormEvents()
-    self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
+    self.newMap = new DataModel.Map({ permission: 'commons' })
 
     return false
   }

frontend/src/Metamaps/GlobalUI/Search.js

@@ -1,13 +1,8 @@
-/* global Metamaps, $, Hogan, Bloodhound, CanvasLoader */
+/* global $, Hogan, Bloodhound, CanvasLoader */
 
 import Active from '../Active'
 import Router from '../Router'
 
-/*
- * Metamaps.Erb
- * Metamaps.Maps
- */
-
 const Search = {
   locked: false,
   isOpen: false,
@@ -15,11 +10,13 @@ const Search = {
   limitMapsToMe: false,
   changing: false,
   optionsInitialized: false,
-  init: function () {
+  init: function (serverData) {
     var self = Search
 
-    // TODO does this overlap with Metamaps.Loading?
+    self.wildcardIconUrl = serverData['icons/wildcard.png']
-    // devin sez: I'd like to remove Metamaps.Loading from the rails code
+    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'
     loader.setDiameter(24) // default is 40
@@ -56,7 +53,7 @@ const Search = {
           return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
             value: 'No results',
             label: 'No results',
-            typeImageURL: Metamaps.Erb['icons/wildcard.png'],
+            typeImageURL: self.wildcardIconUrl,
             rtype: 'noresult'
           })
         },
@@ -124,7 +121,7 @@ const Search = {
             value: 'No results',
             label: 'No results',
             rtype: 'noresult',
-            profile: Metamaps.Erb['user.png']
+            profile: self.userIconUrl
           })
         },
         header: mapperheader,

frontend/src/Metamaps/GlobalUI/index.js

@@ -1,8 +1,7 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import clipboard from 'clipboard-js'
 
-import Active from '../Active'
 import Create from '../Create'
 
 import Search from './Search'
@@ -10,21 +9,16 @@ import CreateMap from './CreateMap'
 import Account from './Account'
 import ImportDialog from './ImportDialog'
 
-/*
- * Metamaps.Backbone
- * Metamaps.Maps
- */
-
 const GlobalUI = {
   notifyTimeout: null,
   lightbox: null,
-  init: function () {
+  init: function (serverData) {
     var self = GlobalUI
 
-    self.Search.init()
+    self.Search.init(serverData)
-    self.CreateMap.init()
+    self.CreateMap.init(serverData)
-    self.Account.init()
+    self.Account.init(serverData)
-    self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox)
+    self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
 
     if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
 
@@ -36,28 +30,6 @@ 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)
-
-    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 mapperCollection = []
-    var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
-    if (Metamaps.Maps.Mapper) {
-      mapperCollection = Metamaps.Maps.Mapper.models
-      mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id
-    }
-    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' })
-    // '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' })
   },
   showDiv: function (selector) {
     $(selector).show()

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.Backbone
- *  - Metamaps.Mappings
- *  - Metamaps.Metacodes
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const Import = {
   // note that user is not imported
   topicWhitelist: [
@@ -228,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 ||
@@ -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])
+      var topic1 = DataModel.Topics.get(self.cidMappings[synapse.topic1])
-      if (!topic1) topic1 = Metamaps.Topics.findWhere({ name: synapse.topic1 })
+      if (!topic1) topic1 = DataModel.Topics.findWhere({ name: synapse.topic1 })
-      var topic2 = Metamaps.Topics.get(self.cidMappings[synapse.topic2])
+      var topic2 = DataModel.Topics.get(self.cidMappings[synapse.topic2])
-      if (!topic2) topic2 = Metamaps.Topics.findWhere({ name: 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.Backbone.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.Backbone.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.Backbone.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.Backbone.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)
   },
@@ -361,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'

frontend/src/Metamaps/JIT.js

@@ -1,4 +1,4 @@
-/* global Metamaps, $, Image, CanvasLoader */
+/* global $, Image, CanvasLoader */
 
 import _ from 'lodash'
 import outdent from 'outdent'
@@ -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'
@@ -23,14 +24,6 @@ import Util from './Util'
 import Visualize from './Visualize'
 import clipboard from 'clipboard-js'
 
-/*
- * Metamaps.Erb
- * Metamaps.Mappings
- * Metamaps.Metacodes
- * Metamaps.Synapses
- * Metamaps.Topics
- */
-
 let panningInt
 
 const JIT = {
@@ -58,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)
@@ -72,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 = serverData['topic_description_signifier.png']
 
     self.topicLinkImage = new Image()
-    self.topicLinkImage.src = Metamaps.Erb['topic_link_signifier.png']
+    self.topicLinkImage.src = serverData['topic_link_signifier.png']
   },
   /**
    * convert our topic JSON into something JIT can use
@@ -140,15 +133,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)
+      DataModel.Synapses.remove(synapse)
-      if (Metamaps.Mappings) Metamaps.Mappings.remove(mapping)
+      if (DataModel.Mappings) DataModel.Mappings.remove(mapping)
     })
 
     // set up addTopic instructions in case they delete all the topics
@@ -320,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
@@ -656,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: {
@@ -1191,7 +1172,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 +1560,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 topics = DataModel.Topics.map(function (t) { return t.id })
     const topicsString = topics.join()
 
     const successCallback = function (data) {
       $('#loadingSiblings').remove()
 
       for (var key in data) {
-        const string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')'
+        const string = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})`
-        $('#fetchSiblingList').append('<li class="getSiblings" data-id="' + key + '">' + string + '</li>')
+        $('#fetchSiblingList').append(`<li class="getSiblings" data-id="${key}">${string}</li>`)
       }
 
       $('.rc-siblings .getSiblings').click(function () {

frontend/src/Metamaps/Loading.js

@@ -0,0 +1,21 @@
+/* global CanvasLoader, $ */
+
+const Loading = {
+  loader: null, // needs CanvasLoader to be defined
+  hide: function () {
+    $('#loading').hide()
+  },
+  show: function () {
+    $('#loading').show()
+  },
+  setup: function () {
+    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
+  }
+}
+
+export default Loading

frontend/src/Metamaps/Map/InfoBox.js

@@ -1,21 +1,13 @@
-/* global Metamaps, $, Hogan, Bloodhound, Countable */
+/* global $, Hogan, Bloodhound, Countable */
 
 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 = {
   isOpen: false,
   changing: false,
@@ -42,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)
@@ -55,6 +48,8 @@ const InfoBox = {
 
     self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
 
+    self.userImageUrl = serverData['user.png']
+
     var querystring = window.location.search.replace(/^\?/, '')
     if (querystring == 'new') { 
       self.open()
@@ -106,7 +101,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')
@@ -116,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.Erb['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')
@@ -218,7 +213,7 @@ const InfoBox = {
                     value: "No results",
                     label: "No results",
                     rtype: "noresult",
-                    profile: Metamaps.Erb['user.png'],
+                    profile: self.userImageUrl
                 });
             },
             suggestion: function(s) {
@@ -251,24 +246,24 @@ const InfoBox = {
   },
   removeCollaborator: function (collaboratorId) {
     var self = InfoBox
-    Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
+    DataModel.Collaborators.remove(DataModel.Collaborators.get(collaboratorId))
-    var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+    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)
+      DataModel.Collaborators.add(mapper)
-      var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+      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 +284,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,13 +310,13 @@ 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'
     else if (relevantPeople.length > 2) contributors_class = 'multiple'
 
-    var contributors_image = Metamaps.Erb['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')
@@ -333,8 +328,8 @@ const InfoBox = {
     $('.mapContributors .tip').unbind().click(function (event) {
       event.stopPropagation()
     })
-    $('.mapTopics').text(Metamaps.Topics.length)
+    $('.mapTopics').text(DataModel.Topics.length)
-    $('.mapSynapses').text(Metamaps.Synapses.length)
+    $('.mapSynapses').text(DataModel.Synapses.length)
 
     $('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted())
   },
@@ -388,10 +383,10 @@ const InfoBox = {
 
     if (doIt && authorized) {
       InfoBox.close()
-      Metamaps.Maps.Active.remove(map)
+      DataModel.Maps.Active.remove(map)
-      Metamaps.Maps.Featured.remove(map)
+      DataModel.Maps.Featured.remove(map)
-      Metamaps.Maps.Mine.remove(map)
+      DataModel.Maps.Mine.remove(map)
-      Metamaps.Maps.Shared.remove(map)
+      DataModel.Maps.Shared.remove(map)
       map.destroy()
       Router.home()
       GlobalUI.notifyUser('Map eliminated!')

frontend/src/Metamaps/Map/index.js

@@ -1,13 +1,16 @@
-/* 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'
+import Loading from '../Loading'
 import Realtime from '../Realtime'
 import Router from '../Router'
 import Selected from '../Selected'
@@ -18,26 +21,11 @@ import Visualize from '../Visualize'
 import CheatSheet from './CheatSheet'
 import InfoBox from './InfoBox'
 
-/*
- * Metamaps.Map.js.erb
- *
- * Dependencies:
- *  - Metamaps.Backbone
- *  - Metamaps.Erb
- *  - Metamaps.Loading
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Maps
- *  - Metamaps.Messages
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
-
 const Map = {
   events: {
     editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
   },
-  init: function () {
+  init: function (serverData) {
     var self = Map
     
     $('#wrapper').mousedown(function (e){
@@ -56,8 +44,8 @@ const Map = {
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
 
     self.updateStar()
-    InfoBox.init()
+    InfoBox.init(serverData)
-    CheatSheet.init()
+    CheatSheet.init(serverData)
 
     $('.viewOnly .requestAccess').click(self.requestAccess)
 
@@ -82,17 +70,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)
+      Active.Map = new DataModelMap(data.map)
-      Metamaps.Mappers = new bb.MapperCollection(data.mappers)
+      DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
-      Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
+      DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
-      Metamaps.Topics = new bb.TopicCollection(data.topics)
+      DataModel.Topics = new DataModel.TopicCollection(data.topics)
-      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
+      DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
-      Metamaps.Mappings = new bb.MappingCollection(data.mappings)
+      DataModel.Mappings = new DataModel.MappingCollection(data.mappings)
-      Metamaps.Messages = data.messages
+      DataModel.Messages = data.messages
-      Metamaps.Stars = data.stars
+      DataModel.Stars = data.stars
-      Metamaps.Backbone.attachCollectionEvents()
+      DataModel.attachCollectionEvents()
 
       var map = Active.Map
       var mapper = Active.Mapper
@@ -137,7 +124,7 @@ const Map = {
       Filter.checkMappers()
 
       Realtime.startActiveMap()
-      Metamaps.Loading.hide()
+      Loading.hide()
       
       // for mobile
       $('#header_content').html(map.get('name'))
@@ -165,9 +152,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 {
@@ -180,8 +167,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 })
+    DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
-    Metamaps.Maps.Starred.add(Active.Map)
+    DataModel.Maps.Starred.add(Active.Map)
     GlobalUI.notifyUser('Map is now starred')
     self.updateStar()
   },
@@ -190,8 +177,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 })
+    DataModel.Stars = DataModel.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
-    Metamaps.Maps.Starred.remove(Active.Map)
+    DataModel.Maps.Starred.remove(Active.Map)
     self.updateStar() 
   },
   fork: function () {
@@ -219,7 +206,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
@@ -240,8 +227,8 @@ const Map = {
   },
   leavePrivateMap: function () {
     var map = Active.Map
-    Metamaps.Maps.Active.remove(map)
+    DataModel.Maps.Active.remove(map)
-    Metamaps.Maps.Featured.remove(map)
+    DataModel.Maps.Featured.remove(map)
     Router.home()
     GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
   },
@@ -260,7 +247,7 @@ const Map = {
   },
   editedByActiveMapper: function () {
     if (Active.Mapper) {
-      Metamaps.Mappers.add(Active.Mapper)
+      DataModel.Mappers.add(Active.Mapper)
     }
   },
   exportImage: function () {

frontend/src/Metamaps/Mapper.js

@@ -1,9 +1,6 @@
 /* global $ */
 
-/*
+import DataModel from './DataModel'
- * Dependencies:
- *  Metamaps.Backbone
- */
 
 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.Backbone.Mapper(data))
+        callback(new DataModel.Mapper(data))
       }
     })
   }

frontend/src/Metamaps/Realtime/index.js

@@ -1,23 +1,11 @@
-/* global Metamaps, $ */
+/* global $ */
-
-/*
- * Metamaps.Realtime.js
- *
- * Dependencies:
- *  - Metamaps.Backbone
- *  - Metamaps.Erb
- *  - Metamaps.Mappers
- *  - Metamaps.Mappings
- *  - Metamaps.Messages
- *  - Metamaps.Synapses
- *  - Metamaps.Topics
- */
 
 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 () {

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)
+    DataModel.Synapses.remove(synapse)
-    Metamaps.Mappings.remove(mapping)
+    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)
+      DataModel.Synapses.add(response)
-      synapse = Metamaps.Synapses.get(response.id)
+      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)
+      DataModel.Mappings.add(response)
-      mapping = Metamaps.Mappings.get(response.id)
+      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)
+    DataModel.Topics.remove(topic)
-    Metamaps.Mappings.remove(mapping)
+    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)
+      DataModel.Topics.add(response)
-      topic = Metamaps.Topics.get(response.id)
+      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)
+      DataModel.Mappings.add(response)
-      mapping = Metamaps.Mappings.get(response.id)
+      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
@@ -301,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)
   }
 }
@@ -332,11 +334,13 @@ 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 yes">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 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 => {
@@ -345,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 yes">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 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 => {
@@ -384,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 yes">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 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">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 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()
 }
 

frontend/src/Metamaps/Router.js

@@ -1,24 +1,17 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Backbone from 'backbone'
-//TODO is this line good or bad?
+try { Backbone.$ = window.$ } catch (err) {}
-//Backbone.$ = window.$
 
 import Active from './Active'
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
+import Loading from './Loading'
 import Map from './Map'
 import Topic from './Topic'
 import Views from './Views'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Router.js.erb
- *
- * Dependencies:
- *  - Metamaps.Loading
- *  - Metamaps.Maps
- */
-
 const _Router = Backbone.Router.extend({
   currentPage: '',
   currentSection: '',
@@ -57,10 +50,10 @@ const _Router = Backbone.Router.extend({
 
       GlobalUI.showDiv('#explore')
 
-      Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
+      Views.ExploreMaps.setCollection(DataModel.Maps.Active)
-      if (Metamaps.Maps.Active.length === 0) {
+      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 +102,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()
+        DataModel.Maps.Mapper.reset()
-        Metamaps.Maps.Mapper.page = 1
+        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 +126,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) {
-      Metamaps.Loading.show()
+      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) {
@@ -178,7 +171,7 @@ const _Router = Backbone.Router.extend({
     Topic.end()
     Active.Topic = null
 
-    Metamaps.Loading.show()
+    Loading.show()
     Map.end()
     Map.launch(id)
   },

frontend/src/Metamaps/Synapse.js

@@ -1,44 +1,33 @@
-/* global Metamaps, $ */
+/* global $ */
 
 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'
 import Settings from './Settings'
 import Visualize from './Visualize'
 
-/*
- * Metamaps.Synapse.js.erb
- *
- * Dependencies:
- *  - Metamaps.Backbone
- *  - 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)
+          DataModel.Synapses.add(data)
-          callback(Metamaps.Synapses.get(id))
+          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 +87,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 +101,18 @@ const Synapse = {
     for (var i = 0; i < synapsesToCreate.length; i++) {
       node1 = synapsesToCreate[i]
       topic1 = node1.getData('topic')
-      synapse = new Metamaps.Backbone.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.Backbone.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 +128,14 @@ const Synapse = {
       node2
 
     self.get(id, synapse => {
-      var mapping = new Metamaps.Backbone.Mapping({
+      var mapping = new DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.id,
       })
-      Metamaps.Mappings.add(mapping)
+      DataModel.Mappings.add(mapping)
-      topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
+      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)

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.Backbone
- *  - 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)
+          DataModel.Topics.add(data)
-          callback(Metamaps.Topics.get(id))
+          callback(DataModel.Topics.get(id))
         }
       })
-    } else callback(Metamaps.Topics.get(id))
+    } else callback(DataModel.Topics.get(id))
   },
   launch: function (id) {
-    var bb = Metamaps.Backbone
     var start = function (data) {
-      Active.Topic = new bb.Topic(data.topic)
+      Active.Topic = new DataModel.Topic(data.topic)
-      Metamaps.Creators = new bb.MapperCollection(data.creators)
+      DataModel.Creators = new DataModel.MapperCollection(data.creators)
-      Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
+      DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives))
-      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
+      DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
-      Metamaps.Backbone.attachCollectionEvents()
+      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.creators.length > 0) DataModel.Creators.add(data.creators)
-      if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
+      if (data.topics.length > 0) DataModel.Topics.add(data.topics)
-      if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
+      if (data.synapses.length > 0) DataModel.Synapses.add(data.synapses)
 
-      var topicColl = new Metamaps.Backbone.TopicCollection(data.topics)
+      var topicColl = new DataModel.TopicCollection(data.topics)
       topicColl.add(topic)
-      var synapseColl = new Metamaps.Backbone.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.Backbone.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.Backbone.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,26 +354,26 @@ 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({
+    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 Metamaps.Backbone.Mapping({
+    var mapping = new DataModel.Mapping({
-      xloc: Metamaps.Create.newTopic.x,
+      xloc: Create.newTopic.x,
-      yloc: Metamaps.Create.newTopic.y,
+      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 nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
-      var mapping = new Metamaps.Backbone.Mapping({
+      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!')
     })

frontend/src/Metamaps/TopicCard.js

@@ -1,24 +1,26 @@
-/* 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
-  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()
 
@@ -89,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')
@@ -128,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'
+          self.showLinkLoader()
-          loader.setDiameter(28) // default is 40
+          self.showLink(topic)
-          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()
-          }
         }
       }, 100)
     }
@@ -150,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')
+      self.showLinkLoader()
-      loader.setColor('#4fb5c0'); // default is '#000000'
+      self.showLink(topic)
-      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.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
@@ -182,7 +179,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)

frontend/src/Metamaps/Views/ChatView.js

@@ -1,9 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
-
-/*
- * Dependencies:
- *  Metamaps.Erb
- */
 
 import Backbone from 'backbone'
 import { Howl } from 'howler'
@@ -126,9 +121,9 @@ var Private = {
       Handlers.inputBlur.call(self)
     })
   },
-  initializeSounds: function () {
+  initializeSounds: function (soundUrls) {
     this.sound = new Howl({
-      src: [Metamaps.Erb['sounds/MM_sounds.mp3'], Metamaps.Erb['sounds/MM_sounds.ogg']],
+      src: soundUrls,
       sprite: {
         joinmap: [0, 561],
         leavemap: [1000, 592],
@@ -248,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'
   })

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
@@ -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

frontend/src/Metamaps/Views/Room.js

@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global $ */
 
 import Backbone from 'backbone'
 import attachMediaStream from 'attachmediastream'
@@ -7,17 +7,13 @@ 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'
 
-/*
+const Room = function(opts = {}) {
- * Dependencies:
- *   Metamaps.Backbone
- */
-
-const Room = function(opts) {
   var self = this
 
   this.isActiveRoom = false
@@ -35,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()
 }
@@ -170,14 +167,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 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 DataModel.MessageCollection(model), false, true)
           $(document).trigger(Room.events.newMessage, [model])
         },
         error: function (model, response) {

frontend/src/Metamaps/Views/index.js

@@ -15,4 +15,6 @@ const Views = {
   VideoView,
   Room
 }
+
+export { ExploreMaps, ChatView, VideoView, Room }
 export default Views

frontend/src/Metamaps/Visualize.js

@@ -1,32 +1,27 @@
-/* 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.Loading
- *  - 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
   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
+
     // 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()
             }
@@ -161,7 +156,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.
@@ -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))) {

frontend/src/Metamaps/index.js

@@ -1,20 +1,19 @@
-/* global Metamaps */
-
 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'
 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'
 import Listeners from './Listeners'
+import Loading from './Loading'
 import Map, { CheatSheet, InfoBox } from './Map'
 import Mapper from './Mapper'
 import Mobile from './Mobile'
@@ -33,12 +32,12 @@ 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
 Metamaps.AutoLayout = AutoLayout
-Metamaps.Backbone = Backbone
+Metamaps.DataModel = DataModel
 Metamaps.Control = Control
 Metamaps.Create = Create
 Metamaps.Debug = Debug
@@ -46,11 +45,12 @@ 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
 Metamaps.Listeners = Listeners
+Metamaps.Loading = Loading
 Metamaps.Map = Map
 Metamaps.Map.CheatSheet = CheatSheet
 Metamaps.Map.InfoBox = InfoBox
@@ -70,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 () {
@@ -81,26 +85,26 @@ 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
   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)
+    ExploreMaps.setCollection(DataModel.Maps.Active)
-    Views.ExploreMaps.render()
+    ExploreMaps.render()
     GlobalUI.showDiv('#explore')
   } else if (Active.Map || Active.Topic) {
-    Metamaps.Loading.show()
+    Loading.show()
     JIT.prepareVizData()
     GlobalUI.showDiv('#infovis')
   }

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;
@@ -11349,4 +11349,6 @@ $jit.ForceDirected3D.$extend = true;
 
 })($jit.ForceDirected3D);
 
+// START METAMAPS CODE
 export default $jit
+// END METAMAPS CODE

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",

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: [
+        loader: 'babel-loader?cacheDirectory&retainLines=true'
-          'babel-loader?cacheDirectory&retainLines=true'
-        ]
       }
     ]
   },