make render a callback and use async apply for ease of use

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -4,6 +4,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router, browserHistory } from 'react-router'
 import { merge } from 'lodash'
+import apply from 'async/apply'
 
 import { notifyUser } from './index.js'
 import ImportDialog from './ImportDialog'
@@ -157,7 +158,7 @@ const ReactApp = {
     }
   },
   getContextMenuProps: function() {
-    const self = ReactApp
+    const { render } = ReactApp
     return {
       // values
       contextMenu: !!(ContextMenu.clickedNode || ContextMenu.clickedEdge),
@@ -167,15 +168,15 @@ const ReactApp = {
       contextFetchingSiblingsData: ContextMenu.fetchingSiblingsData,
       contextSiblingsData: ContextMenu.siblingsData,
       // functions
-      contextDelete: ContextMenu.delete,
-      contextRemove: ContextMenu.remove,
-      contextHide: ContextMenu.hide,
-      contextCenterOn: ContextMenu.centerOn,
-      contextPopoutTopic: ContextMenu.popoutTopic,
-      contextUpdatePermissions: ContextMenu.updatePermissions,
-      contextOnMetacodeSelect: ContextMenu.onMetacodeSelect,
-      contextFetchSiblings: ContextMenu.fetchSiblings,
-      contextPopulateSiblings: ContextMenu.populateSiblings
+      contextDelete: apply(ContextMenu.delete, render),
+      contextRemove: apply(ContextMenu.remove, render),
+      contextHide: apply(ContextMenu.hide, render),
+      contextCenterOn: apply(ContextMenu.centerOn, render),
+      contextPopoutTopic: apply(ContextMenu.popoutTopic, render),
+      contextUpdatePermissions: apply(ContextMenu.updatePermissions, render),
+      contextOnMetacodeSelect: apply(ContextMenu.onMetacodeSelect, render),
+      contextFetchSiblings: apply(ContextMenu.fetchSiblings, render),
+      contextPopulateSiblings: apply(ContextMenu.populateSiblings, render)
     }
   },
   getTopicProps: function() {

frontend/src/Metamaps/JIT.js

@@ -350,7 +350,7 @@ const JIT = {
         // Add also a click handler to nodes
         onClick: function(node, eventInfo, e) {
           // remove the rightclickmenu
-          ContextMenu.reset()
+          ContextMenu.reset(ReactApp.render)
 
           if (Mouse.boxStartCoordinates) {
             if (e.ctrlKey) {
@@ -391,7 +391,7 @@ const JIT = {
         // Add also a click handler to nodes
         onRightClick: function(node, eventInfo, e) {
           // remove the rightclickmenu
-          ContextMenu.reset()
+          ContextMenu.reset(ReactApp.render)
 
           if (Mouse.boxStartCoordinates) {
             Create.newSynapse.hide()
@@ -1007,7 +1007,7 @@ const JIT = {
       TopicCard.hideCard()
       SynapseCard.hideCard()
       Create.newTopic.hide()
-      ContextMenu.reset()
+      ContextMenu.reset(ReactApp.render)
       // reset the draw synapse positions to false
       Mouse.synapseStartCoordinates = []
       Mouse.synapseEndCoordinates = null
@@ -1355,7 +1355,7 @@ const JIT = {
 
     // select the node
     Control.selectNode(node, e)
-    ContextMenu.selectNode(node, {x: e.clientX, y: e.clientY})
+    ContextMenu.selectNode(ReactApp.render, node, {x: e.clientX, y: e.clientY})
 
   }, // selectNodeOnRightClickHandler,
   selectEdgeOnClickHandler: function(adj, e) {
@@ -1406,7 +1406,7 @@ const JIT = {
     e.stopPropagation()
     if (Visualize.mGraph.busy) return
     Control.selectEdge(adj)
-    ContextMenu.selectEdge(adj, {x: e.clientX, y: e.clientY})
+    ContextMenu.selectEdge(ReactApp.render, adj, {x: e.clientX, y: e.clientY})
   }, // selectEdgeOnRightClickHandler
   SmoothPanning: function() {
     const sx = Visualize.mGraph.canvas.scaleOffsetX

frontend/src/Metamaps/Map/index.js

@@ -138,7 +138,7 @@ const Map = {
     if (Active.Map) {
       $('.main').removeClass('compressed')
       AutoLayout.resetSpiral()
-      ContextMenu.reset()
+      ContextMenu.reset(ReactApp.render)
       TopicCard.hideCard()
       SynapseCard.hideCard()
       Create.newTopic.hide(true) // true means force (and override pinned)

frontend/src/Metamaps/Topic.js

@@ -69,7 +69,7 @@ const Topic = {
   },
   end: function() {
     if (Active.Topic) {
-      ContextMenu.reset()
+      ContextMenu.reset(ReactApp.render)
       TopicCard.hideCard()
       SynapseCard.hideCard()
     }

frontend/src/Metamaps/Views/ContextMenu.js

@@ -1,6 +1,5 @@
 import Control from '../Control'
 import DataModel from '../DataModel'
-import { ReactApp } from '../GlobalUI'
 import Selected from '../Selected'
 import Topic from '../Topic'
 
@@ -10,58 +9,58 @@ const ContextMenu = {
   pos: {x: 0, y: 0},
   fetchingSiblingsData: false,
   siblingsData: null,
-  selectNode: (node, pos) => {
+  selectNode: (render, node, pos) => {
     ContextMenu.pos = pos
     ContextMenu.clickedNode = node
     ContextMenu.clickedEdge = null
     ContextMenu.fetchingSiblingsData = false
     ContextMenu.siblingsData = null
-    ReactApp.render()
+    render()
   },
-  selectEdge: (edge, pos) => {
+  selectEdge: (render, edge, pos) => {
     ContextMenu.pos = pos
     ContextMenu.clickedNode = null
     ContextMenu.clickedEdge = edge
     ContextMenu.fetchingSiblingsData = false
     ContextMenu.siblingsData = null
-    ReactApp.render()
+    render()
   },
-  reset: () => {
+  reset: (render) => {
     ContextMenu.fetchingSiblingsData = false
     ContextMenu.siblingsData = null
     ContextMenu.clickedNode = null
     ContextMenu.clickedEdge = null
-    ReactApp.render()
+    render()
   },
-  delete: () => {
+  delete: (render) => {
     Control.deleteSelected()
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  remove: () => {
+  remove: (render) => {
     Control.removeSelectedEdges()
     Control.removeSelectedNodes()
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  hide: () => {
+  hide: (render) => {
     Control.hideSelectedEdges()
     Control.hideSelectedNodes()
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  centerOn: (id) => {
+  centerOn: (render, id) => {
     Topic.centerOn(id)
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  popoutTopic: (id) => {
-    ContextMenu.reset()
+  popoutTopic: (render, id) => {
+    ContextMenu.reset(render)
     const win = window.open('/topics/' + id, '_blank')
     win.focus()
   },
-  updatePermissions: (permission) => {
+  updatePermissions: (render, permission) => {
     // will be 'commons' 'public' or 'private'
     Control.updateSelectedPermissions(permission)
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  onMetacodeSelect: (id, metacodeId) => {
+  onMetacodeSelect: (render, id, metacodeId) => {
     if (Selected.Nodes.length > 1) {
       // batch update multiple topics
       Control.updateSelectedMetacodes(metacodeId)
@@ -71,16 +70,16 @@ const ContextMenu = {
         metacode_id: metacodeId
       })
     }
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  fetchSiblings: (node, metacodeId) => {
+  fetchSiblings: (render, node, metacodeId) => {
     Topic.fetchSiblings(node, metacodeId)
-    ContextMenu.reset()
+    ContextMenu.reset(render)
   },
-  populateSiblings: function(id) {
+  populateSiblings: (render, id) => {
     // depending on how many topics are selected, do different things
     ContextMenu.fetchingSiblingsData = true
-    ReactApp.render()
+    render()
 
     const topics = DataModel.Topics.map(function(t) { return t.id })
     const topicsString = topics.join()
@@ -93,7 +92,7 @@ const ContextMenu = {
         data[key] = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})`
       }
       ContextMenu.siblingsData = data
-      ReactApp.render()
+      render()
     }
 
     $.ajax({

package.json

@@ -21,6 +21,7 @@
   "homepage": "https://github.com/metamaps/metamaps#readme",
   "dependencies": {
     "ajaxq": "0.0.7",
+    "async": "2.5.0",
     "attachmediastream": "2.0.0",
     "autolinker": "1.4.3",
     "babel-cli": "6.26.0",