its aliiiiive

app/models/synapse.rb

@@ -43,31 +43,21 @@ class Synapse < ApplicationRecord
     super(methods: [:user_name, :user_image, :collaborator_ids])
   end
 
-  def after_created
-    filteredSynapse = {
+  def filtered
+    {
       id: id,
       permission: permission,
       user_id: user_id,
       collaborator_ids: collaborator_ids
     }
-    filteredTopic1 = {
-      id: topic1_id,
-      permission: topic1.permission,
-      user_id: topic1.user_id,
-      collaborator_ids: topic1.collaborator_ids
-    }
-    filteredTopic2 = {
-      id: topic2_id,
-      permission: topic2.permission,
-      user_id: topic2.user_id,
-      collaborator_ids: topic2.collaborator_ids
-    }
+  end
+
+  def after_created
     data = {
-      synapse: filteredSynapse,
-      topic1: filteredTopic1,
-      topic2: filteredTopic2
+      synapse: filtered,
+      topic1: topic1.filtered,
+      topic2: topic2.filtered
     }
-    # include the filtered topics here too
     ActionCable.server.broadcast 'topic_' + topic1_id.to_s, type: 'newSynapse', data: data 
     ActionCable.server.broadcast 'topic_' + topic2_id.to_s, type: 'newSynapse', data: data 
   end

app/models/topic.rb

@@ -90,6 +90,15 @@ class Topic < ApplicationRecord
     end
   end
 
+  def filtered
+    {
+      id: id,
+      permission: permission,
+      user_id: user_id,
+      collaborator_ids: collaborator_ids
+    }
+  end
+
   # TODO: move to a decorator?
   def synapses_csv(output_format = 'array')
     output = []

frontend/src/Metamaps/Cable.js

@@ -2,6 +2,7 @@
 
 import Active from './Active'
 import DataModel from './DataModel'
+import Topic from './Topic'
 
 const Cable = {
   topicSubs: {},
@@ -13,6 +14,10 @@ const Cable = {
     let self = Cable
     DataModel.Topics.models.forEach(topic => self.subTopic(topic.id))  
   },
+  subUnsubbedTopics: (topic1id, topic2id) => {
+    if (!Cable.topicSubs[topic1id]) Cable.subTopic(topic1id)
+    if (!Cable.topicSubs[topic2id]) Cable.subTopic(topic2id)
+  },
   subTopic: id => {
     let self = Cable
     self.topicSubs[id] = self.cable.subscriptions.create({
@@ -36,13 +41,12 @@ const Cable = {
   },
   // begin event functions
   newSynapse: data => {
-    console.log(data)
     const m = Active.Mapper
     const s = new DataModel.Synapse(data.synapse)
     const t1 = new DataModel.Topic(data.topic1)
     const t2 = new DataModel.Topic(data.topic2)
     if (t1.authorizeToShow(m) && t2.authorizeToShow(m) && s.authorizeToShow(m)) {
-      console.log('authorized')
+      Topic.fetchForTopicView(data.synapse.id)
     }
   }
 }

frontend/src/Metamaps/JIT.js

@@ -69,6 +69,28 @@ const JIT = {
     self.topicLinkImage = new Image()
     self.topicLinkImage.src = serverData['topic_link_signifier.png']
   },
+  connectModelsToGraph: function () {
+      var i, l, t, s
+
+      Visualize.mGraph.graph.eachNode(function(n) {
+        t = DataModel.Topics.get(n.id)
+        t.set({ node: n }, { silent: true })
+        t.updateNode()
+
+        n.eachAdjacency(function(edge) {
+          if (!edge.getData('init')) {
+            edge.setData('init', true)
+
+            l = edge.getData('synapseIDs').length
+            for (i = 0; i < l; i++) {
+              s = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
+              s.set({ edge: edge }, { silent: true })
+              s.updateEdge()
+            }
+          }
+        })
+      })
+  },
   /**
    * convert our topic JSON into something JIT can use
    */

frontend/src/Metamaps/Topic.js

@@ -44,7 +44,7 @@ const Topic = {
       DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
       DataModel.attachCollectionEvents()
 
-      DataModel.Topics.models.forEach(topic => Cable.subTopic(topic.id))
+      Cable.subAllTopics()
 
       document.title = Active.Topic.get('name') + ' | Metamaps'
 
@@ -98,6 +98,62 @@ const Topic = {
       Active.Topic = DataModel.Topics.get(nodeid)
     }
   },
+  fetchForTopicView: function(synapseId) {
+    var self = this
+
+    var successCallback
+    successCallback = function(data) {
+      data = data.data
+      if (Visualize.mGraph.busy) {
+        // don't clash with centerOn
+        window.setTimeout(function() { successCallback(data) }, 100)
+        return
+      }
+      // todo: these won't work when the api works as expected
+      const topic1user = {
+        id: data.topic1.user_id,
+        image: data.topic1.user_image,
+        name: data.topic1.name
+      }   
+      const topic2user = {
+        id: data.topic2.user_id,
+        image: data.topic2.user_image,
+        name: data.topic2.name
+      }   
+      let creators = [data.user, topic1user, topic2user]
+      DataModel.Creators.add(creators)
+      DataModel.Topics.add(data.topic1)
+      DataModel.Topics.add(data.topic2)
+      Cable.subUnsubbedTopics(data.topic1.id, data.topic2.id)
+      var topicColl = new DataModel.TopicCollection([data.topic1, data.topic2])
+
+      data.topic1_id = data.topic1.id
+      data.topic2_id = data.topic2.id
+      data.user_id = data.user.id
+      delete data.topic1
+      delete data.topic2
+      delete data.user
+      DataModel.Synapses.add(data)
+      var synapseColl = new DataModel.SynapseCollection(data)
+
+      var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
+      console.log(graph)
+      Visualize.mGraph.op.sum(graph, {
+        type: 'fade',
+        duration: 500,
+        hideLabels: false
+      })
+      JIT.connectModelsToGraph()
+    }
+
+
+    $.ajax({
+      type: 'GET',
+      url: '/api/v2/synapses/' + synapseId + '?embed=topic1,topic2,user',
+      success: successCallback,
+      error: function() {}
+    })
+  },
   fetchRelatives: function(nodes, metacodeId) {
     var self = this
 
@@ -132,27 +188,8 @@ const Topic = {
         duration: 500,
         hideLabels: false
       })
+      JIT.connectModelsToGraph() 
 
-      var i, l, t, s
-
-      Visualize.mGraph.graph.eachNode(function(n) {
-        t = DataModel.Topics.get(n.id)
-        t.set({ node: n }, { silent: true })
-        t.updateNode()
-
-        n.eachAdjacency(function(edge) {
-          if (!edge.getData('init')) {
-            edge.setData('init', true)
-
-            l = edge.getData('synapseIDs').length
-            for (i = 0; i < l; i++) {
-              s = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
-              s.set({ edge: edge }, { silent: true })
-              s.updateEdge()
-            }
-          }
-        })
-      })
       if ($.isArray(nodes) && nodes.length > 1) {
         self.fetchRelatives(nodes.slice(1), metacodeId)
       }