its vorkingg....

frontend/src/ConvoAlgo/index.js

@@ -108,11 +108,11 @@ export const generateObjectCoordinates = (layoutObject, focalTopicId, focalCoord
       // set the focalCoord to be what it already was
       coords[topic.id] = focalCoords
     } else if (!parent && !child) {
-      coords[topic.id] = {x: 0, y: 150}
+      coords[topic.id] = {x: 0, y: 250}
     } else if (parent) {
       coords[topic.id] = {
         x: coords[parent.id].x + 250,
-        y: coords[parent.id].y
+        y: coords[parent.id].y - (parent.id === focalTopicId ? 250 : 0)
       }
     } else if (child) {
       coords[topic.id] = {

frontend/src/Metamaps/Engine.js

@@ -18,8 +18,7 @@ const Engine = {
   run: init => {
     if (init) {
       if (Active.Mapper && Object.keys(Visualize.mGraph.graph.nodes).length) {
-        Engine.setFocusNode(Engine.findFocusNode(Visualize.mGraph.graph.nodes))
-        Engine.runLayout(true)
+        Engine.setFocusNode(Engine.findFocusNode(Visualize.mGraph.graph.nodes), true)
       }
     }
   },
@@ -56,16 +55,17 @@ const Engine = {
   findFocusNode: nodes => {
     return last(sortBy(values(nodes), n => new Date(n.getData('topic').get('created_at'))))
   },
-  setFocusNode: node => {
+  setFocusNode: (node, init) => {
     if (!Active.Mapper) return
     Create.newSynapse.focusNode = node
     Mouse.focusNodeCoords = node.pos
     Mouse.newNodeCoords = {
-      x: node.x + 200,
-      y: node.y
+      x: node.pos.x + 200,
+      y: node.pos.y
     }
     Create.newSynapse.updateForm()
     Create.newTopic.position()
+    Engine.runLayout(init)
   },
   addEdge: edge => {
     Engine.runLayout()

frontend/src/Metamaps/Realtime/index.js

@@ -5,6 +5,7 @@ import SocketIoConnection from 'simplewebrtc/socketioconnection'
 
 import Active from '../Active'
 import Cable from '../Cable'
+import Create from '../Create'
 import DataModel from '../DataModel'
 import JIT from '../JIT'
 import Util from '../Util'
@@ -234,8 +235,13 @@ let Realtime = {
   setupLocalEvents: function() {
     var self = Realtime
     // local event listeners that trigger events
-    $(document).on(JIT.events.zoom + '.map', self.positionPeerIcons)
-    $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
+    const panOrZoom = () => {
+      self.positionPeerIcons()
+      Create.newSynapse.updateForm()
+      Create.newTopic.position()
+    }
+    $(document).on(JIT.events.zoom + '.map', panOrZoom)
+    $(document).on(JIT.events.pan + '.map', panOrZoom)
     $(document).on('mousemove.map', function(event) {
       var pixels = {
         x: event.pageX,