low hanging fruit

Here is my TODO list:

already done
==> Account.js <==
==> Admin.js <==
==> AutoLayout.js <==
==> Listeners.js <==
==> Mapper.js <==
==> Organize.js <==
==> PasteInput.js <==
==> ReactComponents.js <==
==> Util.js <==

TODO (I think) simple to make modular
==> Backbone.js <==
==> Control.js <==
==> Create.js <==
==> Filter.js <==
==> Import.js <==
==> Mobile.js <==
==> Synapse.js <==
==> SynapseCard.js <==
==> Topic.js <==
==> TopicCard.js <==
==> Views.js <==
==> Visualize.js <==

TODO hard to make modular
==> Constants.js <==
==> Debug.js <==
==> GlobalUI.js <==
==> JIT.js <==
==> Map.js <==
==> Realtime.js <==
==> Router.js <==

frontend/src/Metamaps/Account.js

@@ -1,14 +1,6 @@
-window.Metamaps = window.Metamaps || {}
-/* global Metamaps, $ */
+/* uses window.Metamaps.Erb */
 
-/*
- * Metamaps.Account.js.erb
- *
- * Dependencies:
- *  - Metamaps.Erb
- */
-
-Metamaps.Account = {
+const Account = {
   listenersInitialized: false,
   init: function () {
     var self = Metamaps.Account
@@ -20,24 +12,24 @@ Metamaps.Account = {
     self.listenersInitialized = true
   },
   toggleChangePicture: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     $('.userImageMenu').toggle()
     if (!self.listenersInitialized) self.initListeners()
   },
   openChangePicture: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     $('.userImageMenu').show()
     if (!self.listenersInitialized) self.initListeners()
   },
   closeChangePicture: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     $('.userImageMenu').hide()
   },
   showLoading: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     var loader = new CanvasLoader('accountPageLoading')
     loader.setColor('#4FC059'); // default is '#000000'
@@ -48,7 +40,7 @@ Metamaps.Account = {
     $('#accountPageLoading').show()
   },
   showImagePreview: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     var file = $('#user_image')[0].files[0]
 
@@ -94,10 +86,10 @@ Metamaps.Account = {
     }
   },
   removePicture: function () {
-    var self = Metamaps.Account
+    var self = Account
 
     $('.userImageDiv canvas').remove()
-    $('.userImageDiv img').attr('src', Metamaps.Erb['user.png']).show()
+    $('.userImageDiv img').attr('src', window.Metamaps.Erb['user.png']).show()
     $('.userImageMenu').hide()
 
     var input = $('#user_image')
@@ -122,4 +114,4 @@ Metamaps.Account = {
   }
 }
 
-export default Metamaps.Account
+export default Account

frontend/src/Metamaps/Admin.js

@@ -4,26 +4,26 @@ const Admin = {
   selectMetacodes: [],
   allMetacodes: [],
   init: function () {
-    var self = Metamaps.Admin
+    var self = Admin
 
     $('#metacodes_value').val(self.selectMetacodes.toString())
   },
   selectAll: function () {
-    var self = Metamaps.Admin
+    var self = Admin
 
     $('.editMetacodes li').removeClass('toggledOff')
     self.selectMetacodes = self.allMetacodes.slice(0)
     $('#metacodes_value').val(self.selectMetacodes.toString())
   },
   deselectAll: function () {
-    var self = Metamaps.Admin
+    var self = Admin
 
     $('.editMetacodes li').addClass('toggledOff')
     self.selectMetacodes = []
     $('#metacodes_value').val(0)
   },
   liClickHandler: function () {
-    var self = Metamaps.Admin
+    var self = Admin
 
     if ($(this).attr('class') != 'toggledOff') {
       $(this).addClass('toggledOff')
@@ -38,7 +38,7 @@ const Admin = {
     }
   },
   validate: function () {
-    var self = Metamaps.Admin
+    var self = Admin
 
     if (self.selectMetacodes.length == 0) {
       alert('Would you pretty please select at least one metacode for the set?')

frontend/src/Metamaps/Listeners.js

@@ -1,8 +1,6 @@
 /* global Metamaps, $ */
 
 /*
- * Metamaps.Listeners.js.erb
- *
  * Dependencies:
  *  - Metamaps.Active
  *  - Metamaps.Control

frontend/src/Metamaps/Mapper.js

@@ -1,9 +1,5 @@
-/* global Metamaps */
+import Backbone from './Backbone'
 
-/*
- * Dependencies:
- *  - Metamaps.Backbone
- */
 const Mapper = {
   // this function is to retrieve a mapper JSON object from the database
   // @param id = the id of the mapper to retrieve
@@ -13,7 +9,7 @@ const Mapper = {
       if (!response.ok) throw response
       return response.json()
     }).then(payload => {
-      callback(new Metamaps.Backbone.Mapper(payload))
+      callback(new Backbone.Mapper(payload))
     })
   }
 }

frontend/src/Metamaps/Mobile.js

@@ -10,7 +10,7 @@
 
 const Mobile = {
   init: function () {
-    var self = Metamaps.Mobile
+    var self = Mobile
     
     $('#menu_icon').click(self.toggleMenu)
     $('#mobile_menu li a').click(self.liClick)

frontend/src/Metamaps/Organize.js

@@ -1,21 +1,18 @@
-/* global Metamaps, $ */
+/* global $ */
+
+import Visualize from './Visualize'
+import JIT from './JIT'
 
-/*
- * Metamaps.Organize.js.erb
- *
- * Dependencies:
- *  - Metamaps.Visualize
- */
 const Organize = {
   arrange: function (layout, centerNode) {
     // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
     if (layout == 'grid') {
-      var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
+      var numNodes = _.size(Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
       var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
       var GRIDSPACE = 400
       var row = 0
       var column = 0
-      Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+      Visualize.mGraph.graph.eachNode(function (n) {
         if (column == numColumns) {
           column = 0
           row += 1
@@ -26,14 +23,14 @@ const Organize = {
         n.setPos(newPos, 'end')
         column += 1
       })
-      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+      Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
     } else if (layout == 'grid_full') {
       // this will always be an integer, the # of nodes on your graph visualization
-      var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes)
+      var numNodes = _.size(Visualize.mGraph.graph.nodes)
       // var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
       // var GRIDSPACE = 400
-      var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height
-      var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width
+      var height = Visualize.mGraph.canvas.getSize(0).height
+      var width = Visualize.mGraph.canvas.getSize(0).width
       var totalArea = height * width
       var cellArea = totalArea / numNodes
       var ratio = height / width
@@ -44,7 +41,7 @@ const Organize = {
       var totalCells = row * column
 
       if (totalCells)
-        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+        Visualize.mGraph.graph.eachNode(function (n) {
           if (column == numColumns) {
             column = 0
             row += 1
@@ -55,7 +52,7 @@ const Organize = {
           n.setPos(newPos, 'end')
           column += 1
         })
-      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+      Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
     } else if (layout == 'radial') {
       var centerX = centerNode.getPos().x
       var centerY = centerNode.getPos().y
@@ -87,16 +84,16 @@ const Organize = {
         })
       }
       radial(centerNode, 1, 0)
-      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+      Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
     } else if (layout == 'center_viewport') {
       var lowX = 0,
         lowY = 0,
         highX = 0,
         highY = 0
-      var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX
-      var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY
+      var oldOriginX = Visualize.mGraph.canvas.translateOffsetX
+      var oldOriginY = Visualize.mGraph.canvas.translateOffsetY
 
-      Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+      Visualize.mGraph.graph.eachNode(function (n) {
         if (n.id === 1) {
           lowX = n.getPos().x
           lowY = n.getPos().y

frontend/src/Metamaps/PasteInput.js

@@ -1,12 +1,7 @@
-/* global Metamaps, $ */
+/* global $ */
 
-/*
- * Metamaps.PasteInput.js.erb
- *
- * Dependencies:
- *  - Metamaps.Import
- *  - Metamaps.AutoLayout
- */
+import AutoLayout from './AutoLayout'
+import Import from './Import'
 
 const PasteInput = {
   // thanks to https://github.com/kevva/url-regex
@@ -74,13 +69,13 @@ const PasteInput = {
   handleURL: function (text, coords) {
     var title = 'Link'
     if (!coords || !coords.x || !coords.y) {
-      coords = Metamaps.AutoLayout.getNextCoord()
+      coords = AutoLayout.getNextCoord()
     }
 
     var import_id = null  // don't store a cidMapping
     var permission = null // use default
 
-    Metamaps.Import.createTopicWithParameters(
+    Import.createTopicWithParameters(
       title,
       'Reference', // metacode - todo fix
       permission,
@@ -101,11 +96,11 @@ const PasteInput = {
   },
 
   handleJSON: function (text) {
-    Metamaps.Import.handleJSON(text)
+    Import.handleJSON(text)
   },
 
   handleTSV: function (text) {
-    Metamaps.Import.handleTSV(text)
+    Import.handleTSV(text)
   }
 }