fix topic view keyboard shortcuts (#597)

* fix topic view selection crash on centerAndReveal

* topic view shortcuts switch to Alt

* change delete behaviour to be smarter

* fetchRelatives recursively handles arrays

* update topic url and Metamaps.Active.Topic when you center

* make heroku work 4 realz

app/assets/javascripts/src/Metamaps.Control.js

@@ -113,9 +113,14 @@ Metamaps.Control = {
   removeSelectedNodes: function () { // refers to removing topics permanently from a map
     if (Metamaps.Active.Topic) {
       // hideNode will handle synapses as well
-      _.each(Metamaps.Selected.Nodes, function(node) {
+      var nodeids = _.map(Metamaps.Selected.Nodes, function(node) {
-        Metamaps.Control.hideNode(node.id)
+        return node.id
-        Metamaps.Topics.remove(node.id)
+      })
+      _.each(nodeids, function(nodeid) {
+        if (Metamaps.Active.Topic.id !== nodeid) {
+          Metamaps.Topics.remove(nodeid)
+          Metamaps.Control.hideNode(nodeid)
+        }
       })
       return
     }

app/assets/javascripts/src/Metamaps.JIT.js

@@ -1336,7 +1336,7 @@ Metamaps.JIT = {
     if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>'
 
     if (Metamaps.Active.Topic) {
-      menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic<div class="rc-keyboard">Ctrl+E</div></li>'
+      menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic<div class="rc-keyboard">Alt+E</div></li>'
     }
     menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>'
     if (Metamaps.Active.Mapper) {
@@ -1361,7 +1361,7 @@ Metamaps.JIT = {
       // set up the get sibling menu as a "lazy load"
       // only fill in the submenu when they hover over the get siblings list item
       var siblingMenu = '<ul id="fetchSiblingList"> \
-                                <li class="fetchAll">All<div class="rc-keyboard">Ctrl+R</div></li> \
+                                <li class="fetchAll">All<div class="rc-keyboard">Alt+R</div></li> \
                                 <li id="loadingSiblings"></li> \
                             </ul>'
       menustring += '<li class="rc-siblings"><div class="rc-icon"></div>Reveal siblings' + siblingMenu + '<div class="expandLi"></div></li>'

app/assets/javascripts/src/Metamaps.Listeners.js

@@ -44,16 +44,21 @@ Metamaps.Listeners = {
           }
           break
         case 69: // if e or E is pressed
-          if (e.ctrlKey) {
+          if (e.ctrlKey && Metamaps.Active.Map) {
             e.preventDefault()
+            Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
+            break
+          }
+          if (e.altKey && Metamaps.Active.Topic) {
+            e.preventDefault()
+
             if (Metamaps.Active.Topic) {
               self.centerAndReveal(Metamaps.Selected.Nodes, {
                 center: true,
                 reveal: false
               })
-            } else if (Metamaps.Active.Map) {
-              Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
             }
+            break
           }
           break
         case 72: // if h or H is pressed
@@ -71,7 +76,7 @@ Metamaps.Listeners = {
           }
           break
         case 82: // if r or R is pressed
-          if (e.ctrlKey && Metamaps.Active.Topic) {
+          if (e.altKey && Metamaps.Active.Topic) {
             e.preventDefault()
             self.centerAndReveal(Metamaps.Selected.Nodes, {
               center: false,
@@ -80,7 +85,7 @@ Metamaps.Listeners = {
           }
           break
         case 84: // if t or T is pressed
-          if (e.ctrlKey && Metamaps.Active.Topic) {
+          if (e.altKey && Metamaps.Active.Topic) {
             e.preventDefault()
             self.centerAndReveal(Metamaps.Selected.Nodes, {
               center: true,
@@ -103,11 +108,14 @@ Metamaps.Listeners = {
   centerAndReveal: function(nodes, opts) {
     if (nodes.length < 1) return
     var node = nodes[nodes.length - 1]
-    if (opts.center) {
+    if (opts.center && opts.reveal) {
+      Metamaps.Topic.centerOn(node.id, function() {
+        Metamaps.Topic.fetchRelatives(nodes)
+      })
+    } else if (opts.center) {
       Metamaps.Topic.centerOn(node.id)
-    }
+    } else if (opts.reveal) {
-    if (opts.reveal) {
+      Metamaps.Topic.fetchRelatives(nodes)
-      Metamaps.Topic.fetchRelatives(node)
     }
   }
 }; // end Metamaps.Listeners

app/assets/javascripts/src/Metamaps.Topic.js

@@ -99,16 +99,25 @@ Metamaps.Topic = {
       Metamaps.Filter.close()
     }
   },
-  centerOn: function (nodeid) {
+  centerOn: function (nodeid, callback) {
+    // don't clash with fetchRelatives
     if (!Metamaps.Visualize.mGraph.busy) {
       Metamaps.Visualize.mGraph.onClick(nodeid, {
         hideLabels: false,
         duration: 1000,
-        onComplete: function () {}
+        onComplete: function () {
+          if (callback) callback()
+        }
       })
+      Metamaps.Router.navigate('/topics/' + nodeid)
+      Metamaps.Active.Topic = Metamaps.Topics.get(nodeid)
     }
   },
-  fetchRelatives: function (node, metacode_id) {
+  fetchRelatives: function (nodes, metacode_id) {
+    var self = this
+
+    var node = $.isArray(nodes) ? nodes[0] : nodes
+
     var topics = Metamaps.Topics.map(function (t) { return t.id })
     var topics_string = topics.join()
 
@@ -117,7 +126,13 @@ Metamaps.Topic = {
 
     var topic = node.getData('topic')
 
-    var successCallback = function (data) {
+    var successCallback;
+    successCallback = function (data) {
+      if (Metamaps.Visualize.mGraph.busy) {
+        // don't clash with centerOn
+        window.setTimeout(function() { successCallback(data) }, 100)
+        return
+      }
       if (data.creators.length > 0) Metamaps.Creators.add(data.creators)
       if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
       if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
@@ -153,13 +168,16 @@ Metamaps.Topic = {
           }
         })
       })
+      if ($.isArray(nodes) && nodes.length > 1) {
+        self.fetchRelatives(nodes.slice(1), metacode_id)
+      }
     }
 
     var paramsString = metacode_id ? 'metacode=' + metacode_id + '&' : ''
     paramsString += 'network=' + topics_string + '&creators=' + creators_string
 
     $.ajax({
-      type: 'Get',
+      type: 'GET',
       url: '/topics/' + topic.id + '/relatives.json?' + paramsString,
       success: successCallback,
       error: function () {}

app/views/shared/_cheatsheet.html.erb

@@ -26,9 +26,9 @@
   </ul>
 
   <div id="csTopicView">    
-    <div class="csItem"><span class="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Ctrl + E</div>
+    <div class="csItem"><span class="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Alt + E</div>
-    <div class="csItem"><span class="csTitle">Reveal the siblings for a Topic:</span> Right-click and choose 'Reveal siblings' OR Ctrl + R</div>
+    <div class="csItem"><span class="csTitle">Reveal the siblings for a Topic:</span> Right-click and choose 'Reveal siblings' OR Alt + R</div>
-    <div class="csItem"><span class="csTitle">Center topic and reveal siblings:</span> Ctrl + T</div>
+    <div class="csItem"><span class="csTitle">Center topic and reveal siblings:</span> Alt + T</div>
   </div>
   
   <div id="csCreatingTopics">    

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "metamaps-frontend",
+  "name": "metamaps",
   "version": "1.0.0",
-  "description": "Metamaps frontend - currently just tests",
+  "description": "Metamaps webpacked javascript code",
   "scripts": {
     "build": "webpack",
     "build:watch": "webpack --watch",
@@ -17,22 +17,20 @@
     "url": "https://github.com/metamaps/metamaps/issues"
   },
   "homepage": "https://github.com/metamaps/metamaps#readme",
-  "devDependencies": {
+  "dependencies": {
     "babel-cli": "^6.11.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
+    "backbone": "^1.0.0",
     "chai": "^3.5.0",
     "jquery": "^1.12.1",
     "mocha": "^2.4.5",
-    "webpack": "^1.13.1"
-  },
-  "dependencies": {
-    "backbone": "^1.0.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
     "requirejs": "^2.1.1",
-    "underscore": "^1.4.4"
+    "underscore": "^1.4.4",
+    "webpack": "^1.13.1"
   }
 }