5 files changed, 51 insertions, 21 deletions
diff --git a/res/client/css/partials/graph-view.scss b/res/client/css/partials/graph-view.scss
index 2652ee9c..9667a154 100644
--- a/res/client/css/partials/graph-view.scss
+++ b/res/client/css/partials/graph-view.scss
@@ -78,7 +78,7 @@
 }
 
 .circle.bubble {
-  fill: rgba(255,255,255,0.9);
+  fill: rgba(255,255,255,0.4);
   pointer-events:none;
 }
 .circle.exit {
diff --git a/res/client/css/style.css b/res/client/css/style.css
index 3f36ed31..473513bd 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -373,7 +373,7 @@ body.debug .debug-ui-right {
   stroke-opacity: 0.5; }
 
 .circle.bubble {
-  fill: rgba(255, 255, 255, 0.9);
+  fill: rgba(255, 255, 255, 0.4);
   pointer-events: none; }
 
 .circle.exit {
diff --git a/src/client/rz_core.js b/src/client/rz_core.js
index bc9fc61b..1bfd0b78 100644
--- a/src/client/rz_core.js
+++ b/src/client/rz_core.js
@@ -263,6 +263,10 @@ var initDrawingArea = function () {
     d3.select("svg").on("dblclick.zoom", null); // disable zoom on double click
 
     $('svg').click(svg_click_handler);
+    var bubble_property =
+        edit_graph.diffBus.map(function () {
+            return edit_graph.nodes().length == 0 ? 0 : 180;
+        }).skipDuplicates();
 
     main_graph_view = graph_view.GraphView({
             parent_element: vis,
@@ -274,13 +278,7 @@ var initDrawingArea = function () {
             node_text_dy: node_text_dy,
             svgInput: svgInput,
             // FIXME: good place to animate bubble radius
-            bubble_property: edit_graph.diffBus.map(function () {
-                if (edit_graph.nodes().length == 0) {
-                    return 0;
-                } else {
-                    return 180;
-                }
-            }),
+            bubble_property: bubble_property,
         });
     edit_graph_view = graph_view.GraphView({
             parent_element: vis,
@@ -290,6 +288,7 @@ var initDrawingArea = function () {
             temporary: true,
             node_text_dx: node_text_dx,
             node_text_dy: node_text_dy,
+            bubble_property: bubble_property,
         });
 
     // $('#canvas_d3').dblclick(canvas_handler_dblclick); - see #138
diff --git a/src/client/view/bubble.js b/src/client/view/bubble.js
new file mode 100644
index 00000000..70dc5d09
--- /dev/null
+++ b/src/client/view/bubble.js
@@ -0,0 +1,28 @@
+define(["jquery", "Bacon"], function ($, Bacon) {
+function Bubble(raw_parent, radius) {
+    var xmlns = "http://www.w3.org/2000/svg";
+    var g = document.createElementNS(xmlns, 'g');
+    var circle = document.createElementNS(xmlns, 'circle');
+
+    var setTransformToCenter = function (elem) {
+        var width = $(document.body).innerWidth();
+        var height = $(document.body).innerHeight();
+
+        elem.setAttribute('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+    }
+
+    g.appendChild(circle);
+    raw_parent.appendChild(g);
+    setTransformToCenter(g);
+    circle.className.baseVal = 'circle bubble';
+    circle.id = 'bubble';
+
+    radius.onValue(function (r) {
+        setTransformToCenter(g);
+        circle.setAttribute("r", r);
+    })
+}
+return {
+    Bubble:Bubble
+}
+});
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index d191df90..f8180495 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -25,8 +25,8 @@
  * which resulted in overly complex (read: undefined/buggy) code.
  */
 
-define(['d3', 'Bacon', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view'],
-function(d3 ,  Bacon ,  util ,  selection      ,  view_helpers,  model_diff  ,  view) {
+define(['d3', 'Bacon', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble'],
+function(d3 ,  Bacon ,  util ,  selection      ,  view_helpers,  model_diff  ,  view, view_bubble) {
 
 /* debugging helper */
 function enableDebugViewOfDiffs(graph)
@@ -126,16 +126,19 @@ function GraphView(spec) {
     //
     // Animation target is set by stream, and initialized if not already
     if (spec.bubble_property) {
-        spec.bubble_property
-            .skipDuplicates()
-            .onValue(function (r) {
-                var now = (new Date()).getTime();
-                gv.layout_animation.bubble_radius.target = r;
-                gv.layout_animation.bubble_radius.start = gv.bubble_radius;
-                gv.layout_animation.starttime = now;
-                gv.layout_animation.endtime = now + 300; // FIXME: use constant change?
-                start_layout_animation();
-            });
+        if (temporary) {
+            view_bubble.Bubble(parent_element[0][0], spec.bubble_property);
+        } else {
+            spec.bubble_property
+                .onValue(function (r) {
+                    var now = (new Date()).getTime();
+                    gv.layout_animation.bubble_radius.target = r;
+                    gv.layout_animation.bubble_radius.start = gv.bubble_radius;
+                    gv.layout_animation.starttime = now;
+                    gv.layout_animation.endtime = now + 300; // FIXME: use constant change?
+                    start_layout_animation();
+                });
+        }
     }
 
     graph.diffBus.onValue(function (diff) {