Fix a bunch of errors and style issues

app/views/explore/active.html.erb

@@ -10,6 +10,6 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "active";
-  Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Active = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

app/views/explore/featured.html.erb

@@ -10,6 +10,6 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "featured";
-  Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Featured = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

app/views/explore/mapper.html.erb

@@ -10,7 +10,7 @@
 
   Metamaps.currentSection = "explore";
   Metamaps.currentPage = "mapper";
-  Metamaps.Maps.Mapper = {
+  Metamaps.ServerData.Mapper = {
     models: <%= @maps.to_json.html_safe %>,
     id: <%= params[:id] %>
   };

app/views/explore/mine.html.erb

@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "mine";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Mine = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

app/views/explore/shared.html.erb

@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "shared";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Shared = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

app/views/explore/starred.html.erb

@@ -10,6 +10,6 @@
 
   Metamaps.currentPage = "starred";
   Metamaps.currentSection = "explore";
-  Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>;
+  Metamaps.ServerData.Starred = <%= @maps.to_json.html_safe %>;
   Metamaps.GlobalUI.Search.focus();
 </script>

app/views/maps/show.html.erb

@@ -16,7 +16,7 @@
   Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
   Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
   Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
-  Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
+  Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
-  Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
   Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>

frontend/src/Metamaps/Account.js

@@ -1,6 +1,9 @@
 /* global $, CanvasLoader */
 
 const Account = {
+  init: function (serverData) {
+    Account.userIconUrl = serverData['user.png']
+  },
   listenersInitialized: false,
   userIconUrl: null,
   initListeners: function () {
@@ -9,9 +12,6 @@ const Account = {
     $('#user_image').change(self.showImagePreview)
     self.listenersInitialized = true
   },
-  init: function (serverData) {
-    Account.userIconUrl = serverData['user.png']
-  },
   toggleChangePicture: function () {
     var self = Account
 

frontend/src/Metamaps/Active.js

@@ -1,16 +1,7 @@
-import DataModelMap from './DataModel/Map'
-import DataModelMapper from './DataModel/Mapper'
-import DataModelTopic from './DataModel/Topic'
-
 const Active = {
   Map: null,
   Mapper: null,
-  Topic: null,
+  Topic: null
-  init: function(serverData) {
-    if (serverData.Map) Active.Map = new DataModelMap(severData.ActiveMap)
-    if (serverData.Mapper) Active.Mapper = new DataModelMapper(serverData.ActiveMapper)
-    if (serverData.Topic) Active.Topic = new DataModelTopic(serverData.ActiveTopic)
-  }
 }
 
 export default Active

frontend/src/Metamaps/DataModel/Map.js

@@ -2,10 +2,10 @@
 
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
-import { InfoBox } from '../Map'
+import InfoBox from '../Map/InfoBox'
 import Mapper from '../Mapper'
 import Realtime from '../Realtime'
 

frontend/src/Metamaps/DataModel/MapCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Loading from '../Loading'
 

frontend/src/Metamaps/DataModel/Mapper.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 import outdent from 'outdent'
 
 const Mapper = Backbone.Model.extend({

frontend/src/Metamaps/DataModel/MapperCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Mapper from './Mapper'
 

frontend/src/Metamaps/DataModel/Mapping.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Map from '../Map'

frontend/src/Metamaps/DataModel/MappingCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Mapping from './Mapping'
 

frontend/src/Metamaps/DataModel/Message.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 const Message = Backbone.Model.extend({
   urlRoot: '/messages',

frontend/src/Metamaps/DataModel/MessageCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Message from './Message'
 

frontend/src/Metamaps/DataModel/Metacode.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 import outdent from 'outdent'
 
 const Metacode = Backbone.Model.extend({

frontend/src/Metamaps/DataModel/MetacodeCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Metacode from './Metacode'
 

frontend/src/Metamaps/DataModel/Synapse.js

@@ -1,8 +1,9 @@
 /* global $ */
 
 import _ from 'lodash'
+import outdent from 'outdent'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'
@@ -76,12 +77,11 @@ const Synapse = Backbone.Model.extend({
     this.on('change:desc', Filter.checkSynapses, this)
   },
   prepareLiForFilter: function () {
-    var li = ''
+    return outdent`
-    li += '<li data-id="' + this.get('desc') + '">'
+      <li data-id="${this.get('desc')}">
-    li += '<img src="' + Metamaps.ServerData['synapse16.png'] + '"'
+        <img src="${DataModel.synapseIconUrl}" alt="synapse icon" />
-    li += ' alt="synapse icon" />'
+        <p>${this.get('desc')}</p>
-    li += '<p>' + this.get('desc') + '</p></li>'
+      </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

frontend/src/Metamaps/DataModel/SynapseCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Synapse from './Synapse'
 

frontend/src/Metamaps/DataModel/Topic.js

@@ -2,7 +2,7 @@
 
 import _ from 'lodash'
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'

frontend/src/Metamaps/DataModel/TopicCollection.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Topic from './Topic'
 

frontend/src/Metamaps/DataModel/index.js

@@ -37,6 +37,17 @@ const DataModel = {
   Creators: new MapperCollection(),
   Mappers: new MapperCollection(),
   Mappings: new MappingCollection(),
+  Maps: {
+    Mine: [],
+    Shared: [],
+    Starred: [],
+    Mapper: {
+      models: [],
+      mapperId: null
+    },
+    Featured: [],
+    Active: []
+  },
   Messages: [],
   Metacodes: new MetacodeCollection(),
   Stars: [],
@@ -46,6 +57,15 @@ const DataModel = {
   init: function (serverData) {
     var self = DataModel
 
+    // workaround circular import problem
+    if (!self.MapCollection.model) self.MapCollection.model = Map
+
+    self.synapseIconUrl = serverData['synapse16.png']
+
+    if (serverData.ActiveMap) Active.Map = new Map(serverData.ActiveMap)
+    if (serverData.ActiveMapper) Active.Mapper = new Mapper(serverData.ActiveMapper)
+    if (serverData.ActiveTopic) Active.Topic = new Topic(serverData.ActiveTopic)
+
     if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
     if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
     if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
@@ -56,22 +76,43 @@ const DataModel = {
     if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
     if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics)
 
+    // initialize global backbone models and collections
+    if (Active.Mapper) Active.Mapper = new self.Mapper(Active.Mapper)
+
+    var myCollection = serverData.Mine ? serverData.Mine : []
+    var sharedCollection = serverData.Shared ? serverData.Shared : []
+    var starredCollection = serverData.Starred ? serverData.Starred : []
+    var mapperCollection = []
+    var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
+    if (self.Maps.Mapper.mapperId) {
+      mapperCollection = serverData.Mapper.models
+      mapperOptionsObj.mapperId = serverData.Mapper.id
+    }
+    var featuredCollection = serverData.Featured ? serverData.Featured : []
+    var activeCollection = serverData.Active ? serverData.Active : []
+
+    self.Maps.Mine = new MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
+    self.Maps.Shared = new MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
+    self.Maps.Starred = new MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
+    // 'Mapper' refers to another mapper
+    self.Maps.Mapper = new MapCollection(mapperCollection, mapperOptionsObj)
+    self.Maps.Featured = new MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
+    self.Maps.Active = new MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+
     self.attachCollectionEvents()
   },
-
   attachCollectionEvents: function () {
-    var self = DataModel
+    DataModel.Topics.on('add remove', function (topic) {
-    self.Topics.on('add remove', function (topic) {
       InfoBox.updateNumbers()
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
-    self.Synapses.on('add remove', function (synapse) {
+    DataModel.Synapses.on('add remove', function (synapse) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMappers()
     })
-    self.Mappings.on('add remove', function (mapping) {
+    DataModel.Mappings.on('add remove', function (mapping) {
       InfoBox.updateNumbers()
       Filter.checkSynapses()
       Filter.checkMetacodes()

frontend/src/Metamaps/GlobalUI/CreateMap.js

@@ -1,7 +1,10 @@
 /* global $ */
 
+import outdent from 'outdent'
+
 import Active from '../Active'
 import DataModel from '../DataModel'
+import DataModelMap from '../DataModel/Map'
 import GlobalUI from './index'
 
 const CreateMap = {
@@ -13,7 +16,7 @@ const CreateMap = {
   init: function () {
     var self = CreateMap
 
-    self.newMap = new DataModel.Map({ permission: 'commons' })
+    self.newMap = new DataModelMap({ permission: 'commons' })
 
     self.bindFormEvents()
 
@@ -40,15 +43,6 @@ const CreateMap = {
       $(this).remove()
     })
   },
-  generateSuccessMessage: function (id) {
-    var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"
-    stringStart += id
-    stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"
-    stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "
-    var page = Active.Map ? 'map' : 'page'
-    var stringEnd = '</a></div>'
-    return stringStart + page + stringEnd
-  },
   switchPermission: function () {
     var self = CreateMap
 
@@ -108,7 +102,20 @@ const CreateMap = {
     DataModel.Maps.Mine.add(model)
 
     GlobalUI.clearNotify()
-    $('#wrapper').append(self.generateSuccessMessage(model.id))
+    $('#wrapper').append(outdent`
+      <div id="mapCreatedSuccess">
+        <h6>SUCCESS!</h6>
+        Your map has been created. Do you want to:
+        <a id="mapGo" href="/maps/${model.id}">Go to your new map</a>
+        <span>OR</span>
+        <a id="mapStay" href="#">Stay on this ${Active.Map ? 'map' : 'page'}</a>
+      </div>
+    `)
+    $('#mapGo').click(e => GlobalUI.CreateMap.closeSuccess())
+    $('#mapStay').click(e => {
+      GlobalUI.CreateMap.closeSuccess()
+      return false
+    })
   },
   reset: function (id) {
     var self = CreateMap

frontend/src/Metamaps/GlobalUI/Search.js

@@ -10,9 +10,12 @@ const Search = {
   limitMapsToMe: false,
   changing: false,
   optionsInitialized: false,
-  init: function () {
+  init: function (serverData) {
     var self = Search
 
+    self.wildcardIconUrl = serverData['icons/wildcard.png']
+    self.userIconUrl = serverData['user.png']
+
     // this is similar to Metamaps.Loading, but it's for the search element
     var loader = new CanvasLoader('searchLoading')
     loader.setColor('#4fb5c0') // default is '#000000'
@@ -50,7 +53,7 @@ const Search = {
           return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
             value: 'No results',
             label: 'No results',
-            typeImageURL: Metamaps.ServerData['icons/wildcard.png'],
+            typeImageURL: self.wildcardIconUrl,
             rtype: 'noresult'
           })
         },
@@ -118,7 +121,7 @@ const Search = {
             value: 'No results',
             label: 'No results',
             rtype: 'noresult',
-            profile: Metamaps.ServerData['user.png']
+            profile: self.userIconUrl
           })
         },
         header: mapperheader,

frontend/src/Metamaps/GlobalUI/index.js

@@ -2,9 +2,7 @@
 
 import clipboard from 'clipboard-js'
 
-import Active from '../Active'
 import Create from '../Create'
-import DataModel from '../DataModel'
 
 import Search from './Search'
 import CreateMap from './CreateMap'
@@ -14,13 +12,13 @@ import ImportDialog from './ImportDialog'
 const GlobalUI = {
   notifyTimeout: null,
   lightbox: null,
-  init: function () {
+  init: function (serverData) {
     var self = GlobalUI
 
-    self.Search.init()
+    self.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())
 
@@ -32,28 +30,6 @@ const GlobalUI = {
     })
 
     $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
-
-    // initialize global backbone models and collections
-    if (Active.Mapper) Active.Mapper = new DataModel.Mapper(Active.Mapper)
-
-    var myCollection = DataModel.Maps.Mine ? DataModel.Maps.Mine : []
-    var sharedCollection = DataModel.Maps.Shared ? DataModel.Maps.Shared : []
-    var starredCollection = DataModel.Maps.Starred ? DataModel.Maps.Starred : []
-    var mapperCollection = []
-    var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
-    if (DataModel.Maps.Mapper) {
-      mapperCollection = DataModel.Maps.Mapper.models
-      mapperOptionsObj.mapperId = DataModel.Maps.Mapper.id
-    }
-    var featuredCollection = DataModel.Maps.Featured ? DataModel.Maps.Featured : []
-    var activeCollection = DataModel.Maps.Active ? DataModel.Maps.Active : []
-    DataModel.Maps.Mine = new DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
-    DataModel.Maps.Shared = new DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
-    DataModel.Maps.Starred = new DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
-    // 'Mapper' refers to another mapper
-    DataModel.Maps.Mapper = new DataModel.MapCollection(mapperCollection, mapperOptionsObj)
-    DataModel.Maps.Featured = new DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
-    DataModel.Maps.Active = new DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
   },
   showDiv: function (selector) {
     $(selector).show()

frontend/src/Metamaps/Import.js

@@ -218,7 +218,7 @@ const Import = {
     parsedTopics.forEach(topic => {
       let coords = { x: topic.x, y: topic.y }
       if (!coords.x || !coords.y) {
-        coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+        coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
       }
 
       if (!topic.name && topic.link ||
@@ -351,7 +351,7 @@ const Import = {
   handleURL: function (url, opts = {}) {
     let coords = opts.coords
     if (!coords || coords.x === undefined || coords.y === undefined) {
-      coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
+      coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
     }
 
     const name = opts.name || 'Link'

frontend/src/Metamaps/JIT.js

@@ -51,7 +51,7 @@ const JIT = {
   /**
    * This method will bind the event handlers it is interested and initialize the class.
    */
-  init: function () {
+  init: function (serverData) {
     const self = JIT
 
     $('.zoomIn').click(self.zoomIn)
@@ -65,10 +65,10 @@ const JIT = {
     $('.takeScreenshot').click(Map.exportImage)
 
     self.topicDescImage = new Image()
-    self.topicDescImage.src = Metamaps.ServerData['topic_description_signifier.png']
+    self.topicDescImage.src = serverData['topic_description_signifier.png']
 
     self.topicLinkImage = new Image()
-    self.topicLinkImage.src = Metamaps.ServerData['topic_link_signifier.png']
+    self.topicLinkImage.src = serverData['topic_link_signifier.png']
   },
   /**
    * convert our topic JSON into something JIT can use
@@ -313,17 +313,6 @@ const JIT = {
         panning: 'avoid nodes',
         zooming: 28 // zoom speed. higher is more sensible
       },
-      // background: {
-      //    type: 'Metamaps'
-      // },
-      // NodeStyles: {
-      //  enable: true,
-      //  type: 'Native',
-      //  stylesHover: {
-      //    dim: 30
-      //  },
-      //  duration: 300
-      // },
       // Change node and edge styles such as
       // color and width.
       // These properties are also set per node
@@ -649,7 +638,6 @@ const JIT = {
     },
     // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
     background: {
-      // type: 'Metamaps',
       levelDistance: 200,
       numberOfCircles: 4,
       CanvasStyles: {
@@ -1573,7 +1561,7 @@ const JIT = {
     loader.show() // Hidden by default
 
     const topics = DataModel.Topics.map(function (t) { return t.id })
-    const topics_string = topics.join()
+    const topicsString = topics.join()
 
     const successCallback = function (data) {
       $('#loadingSiblings').remove()

frontend/src/Metamaps/Loading.js

@@ -1,19 +1,20 @@
 /* global CanvasLoader, $ */
 
 const Loading = {
-  loader: new CanvasLoader('loading'),
+  loader: null, // needs CanvasLoader to be defined
   hide: function () {
-    $('#loading').hide();
+    $('#loading').hide()
   },
   show: function () {
-    $('#loading').show();
+    $('#loading').show()
   },
   setup: function () {
-    Loading.loader.setColor('#4fb5c0'); // default is '#000000'
+    if (!Loading.loader) Loading.loader = new CanvasLoader('loading')
-    Loading.loader.setDiameter(28); // default is 40
+    Loading.loader.setColor('#4fb5c0') // default is '#000000'
-    Loading.loader.setDensity(41); // default is 40
+    Loading.loader.setDiameter(28) // default is 40
-    Loading.loader.setRange(0.9); // default is 1.3
+    Loading.loader.setDensity(41) // default is 40
-    Loading.loader.show(); // Hidden by default
+    Loading.loader.setRange(0.9) // default is 1.3
+    Loading.loader.show() // Hidden by default
   }
 }
 

frontend/src/Metamaps/Map/InfoBox.js

@@ -34,7 +34,8 @@ const InfoBox = {
       data-bip-activator="#mapInfoDesc"
       data-bip-value="{{desc}}"
     >{{desc}}</span>`,
-  init: function () {
+  userImageUrl: '',
+  init: function (serverData) {
     var self = InfoBox
 
     $('.mapInfoIcon').click(self.toggleBox)
@@ -47,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()
@@ -108,7 +111,7 @@ const InfoBox = {
     obj['contributor_count'] = relevantPeople.length
     obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : ''
     obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : ''
-    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.ServerData['user.png']
+    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : self.userImageUrl
     obj['contributor_list'] = self.createContributorList()
 
     obj['user_name'] = isCreator ? 'You' : map.get('user_name')
@@ -210,7 +213,7 @@ const InfoBox = {
                     value: "No results",
                     label: "No results",
                     rtype: "noresult",
-                    profile: Metamaps.ServerData['user.png'],
+                    profile: self.userImageUrl
                 });
             },
             suggestion: function(s) {
@@ -313,7 +316,7 @@ const InfoBox = {
     if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
     else if (relevantPeople.length > 2) contributors_class = 'multiple'
 
-    var contributors_image = Metamaps.ServerData['user.png']
+    var contributors_image = self.userImageUrl
     if (relevantPeople.length > 0) {
       // get the first contributor and use their image
       contributors_image = relevantPeople.models[0].get('image')

frontend/src/Metamaps/Map/index.js

@@ -25,7 +25,7 @@ const Map = {
   events: {
     editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
   },
-  init: function () {
+  init: function (serverData) {
     var self = Map
     
     $('#wrapper').mousedown(function (e){
@@ -44,8 +44,8 @@ const Map = {
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
 
     self.updateStar()
-    InfoBox.init()
+    InfoBox.init(serverData)
-    CheatSheet.init()
+    CheatSheet.init(serverData)
 
     $('.viewOnly .requestAccess').click(self.requestAccess)
 

frontend/src/Metamaps/Router.js

@@ -1,9 +1,10 @@
 /* global $ */
 
 import Backbone from 'backbone'
-Backbone.$ = window.$
+try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from './Active'
+import DataModel from './DataModel'
 import GlobalUI from './GlobalUI'
 import Loading from './Loading'
 import Map from './Map'

frontend/src/Metamaps/Synapse.js

@@ -3,6 +3,7 @@
 import Active from './Active'
 import Control from './Control'
 import Create from './Create'
+import DataModel from './DataModel'
 import JIT from './JIT'
 import Map from './Map'
 import Selected from './Selected'

frontend/src/Metamaps/Topic.js

@@ -359,13 +359,13 @@ const Topic = {
     $(document).trigger(Map.events.editedByActiveMapper)
 
     var metacode = DataModel.Metacodes.findWhere({ name: 'Metamap' })
-    var topic = new Metamaps.Backbone.Topic({
+    var topic = new DataModel.Topic({
       name: data.name,
       metacode_id: metacode.id,
-      defer_to_map_id: Metamaps.Active.Map.id,
+      defer_to_map_id: Active.Map.id,
       link: window.location.origin + '/maps/' + data.id
     })
-    Metamaps.Topics.add(topic)
+    DataModel.Topics.add(topic)
 
     var mapping = new DataModel.Mapping({
       xloc: Create.newTopic.x,

frontend/src/Metamaps/TopicCard.js

@@ -11,9 +11,16 @@ import Visualize from './Visualize'
 const TopicCard = {
   openTopicCard: null, // stores the topic that's currently open
   authorizedToEdit: false, // stores boolean for edit permission for open topic card
-  init: function () {
+  RAILS_ENV: undefined,
+  init: function (serverData) {
     var self = TopicCard
 
+    if (serverData.RAILS_ENV) {
+      self.RAILS_ENV = serverData.RAILS_ENV
+    } else {
+      console.error('RAILS_ENV is not defined! See TopicCard.js init function.')
+    }
+
     // initialize best_in_place editing
     $('.authenticated div.permission.canEdit .best_in_place').best_in_place()
 
@@ -84,6 +91,23 @@ const TopicCard = {
     $('.attachments').removeClass('hidden')
     $('.CardOnGraph').removeClass('hasAttachment')
   },
+  showLinkLoader: function() {
+    var loader = new CanvasLoader('embedlyLinkLoader')
+    loader.setColor('#4fb5c0'); // default is '#000000'
+    loader.setDiameter(28) // default is 40
+    loader.setDensity(41) // default is 40
+    loader.setRange(0.9); // default is 1.3
+    loader.show() // Hidden by default
+  },
+  showLink: function(topic) {
+    var e = embedly('card', document.getElementById('embedlyLink'))
+    if (!e && TopicCard.RAILS_ENV != 'development') {
+      TopicCard.handleInvalidLink()
+    } else if (!e) {
+      $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
+      $('#embedlyLinkLoader').hide()
+    }
+  },
   bindShowCardListeners: function (topic) {
     var self = TopicCard
     var showCard = document.getElementById('showcard')
@@ -123,20 +147,9 @@ const TopicCard = {
           $('.attachments').addClass('hidden')
           $('.embeds').append(embedlyEl)
           $('.embeds').append('<div id="embedlyLinkLoader"></div>')
-          var loader = new CanvasLoader('embedlyLinkLoader')
+
-          loader.setColor('#4fb5c0'); // default is '#000000'
+          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)
     }
@@ -145,20 +158,9 @@ const TopicCard = {
 
     // initialize the link card, if there is a link
     if (topic.get('link') && topic.get('link') !== '') {
-      var loader = new CanvasLoader('embedlyLinkLoader')
+      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

frontend/src/Metamaps/Views/ChatView.js

@@ -121,9 +121,9 @@ var Private = {
       Handlers.inputBlur.call(self)
     })
   },
-  initializeSounds: function () {
+  initializeSounds: function (soundUrls) {
     this.sound = new Howl({
-      src: [Metamaps.ServerData['sounds/MM_sounds.mp3'], Metamaps.ServerData['sounds/MM_sounds.ogg']],
+      src: soundUrls,
       sprite: {
         joinmap: [0, 561],
         leavemap: [1000, 592],
@@ -243,7 +243,7 @@ const ChatView = function (messages, mapper, room) {
   Private.attachElements.call(this)
   Private.addEventListeners.call(this)
   Private.initialMessages.call(this)
-  Private.initializeSounds.call(this)
+  Private.initializeSounds.call(this, room.soundUrls)
   this.$container.css({
     right: '-300px'
   })

frontend/src/Metamaps/Views/Room.js

@@ -13,7 +13,7 @@ import Realtime from '../Realtime'
 import ChatView from './ChatView'
 import VideoView from './VideoView'
 
-const Room = function(opts) {
+const Room = function(opts = {}) {
   var self = this
 
   this.isActiveRoom = false
@@ -31,6 +31,7 @@ const Room = function(opts) {
   this.chat = new ChatView(this.messages, this.currentMapper, this.room)
 
   this.videos = {}
+  this.soundUrls = opts.soundUrls
 
   this.init()
 }

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

@@ -17,7 +17,7 @@ const Visualize = {
   type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
   loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
   touchDragNode: null,
-  init: function () {
+  init: function (serverData) {
     var self = Visualize
 
     if (serverData.VisualizeType) self.type = serverData.VisualizeType

frontend/src/Metamaps/index.js

@@ -1,5 +1,3 @@
-/* global Metamaps */
-
 import Account from './Account'
 import Active from './Active'
 import Admin from './Admin'
@@ -34,7 +32,7 @@ import Util from './Util'
 import Views from './Views'
 import Visualize from './Visualize'
 
-Metamaps = window.Metamaps || {}
+const Metamaps = window.Metamaps || {}
 Metamaps.Account = Account
 Metamaps.Active = Active
 Metamaps.Admin = Admin
@@ -72,6 +70,10 @@ Metamaps.Topic = Topic
 Metamaps.TopicCard = TopicCard
 Metamaps.Util = Util
 Metamaps.Views = Views
+Metamaps.Views.ExploreMaps = ExploreMaps
+Metamaps.Views.ChatView = ChatView
+Metamaps.Views.VideoView = VideoView
+Metamaps.Views.Room = Room
 Metamaps.Visualize = Visualize
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -90,19 +92,19 @@ document.addEventListener('DOMContentLoaded', function () {
   if (Metamaps.currentSection === 'explore') {
     const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
 
-    Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
+    Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
     if (Metamaps.currentPage === 'mapper') {
-      Views.ExploreMaps.fetchUserThenRender()
+      ExploreMaps.fetchUserThenRender()
     } else {
-      Views.ExploreMaps.render()
+      ExploreMaps.render()
     }
     GlobalUI.showDiv('#explore')
   } else if (Metamaps.currentSection === '' && Active.Mapper) {
-    Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
+    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

@@ -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'
-        ]
       }
     ]
   },