Merge lp:~bcsaller/juju-gui/viewmodel-improvements into lp:juju-gui/experimental

[Benjamin Saller]

View model improvements

Change BoundingBoxes to retain reference to module. This allows box models
to directly resolve the db.Model backing them. This also allow access to the
DOMNode in the canvas directly. Certain features of box directly depend on
methods being available in the passed in module, mocking this is still
possible and shown in tests.

https://codereview.appspot.com/7231067/

[Benjamin Saller (bcsaller)]

Reviewers: mp+145755_code.launchpad.net,

Message:
Please take a look.

Description:
View model improvements

Change BoundingBoxes to retain reference to module. This allows box
models
to directly resolve the db.Model backing them. This also allow access to
the
DOMNode in the canvas directly. Certain features of box directly depend
on
methods being available in the passed in module, mocking this is still
possible and shown in tests.

https://code.launchpad.net/~bcsaller/juju-gui/viewmodel-improvements/+merge/145755

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/7231067/

Affected files:
   A [revision details]
   M app/views/service.js
   M app/views/topology/service.js
   M app/views/utils.js
   M test/test_environment_view.js
   M test/test_service_module.js
   M test/test_topology.js
   M undocumented

[Gary Poster (gary)]

Hey Ben. I was just skimming this and admiring it in a pre-review kind of way when I noticed that there's a conflict in test/test_service_module.js. Could you resolve it before anyone digs in?

Thanks

Gary

[lp:~bcsaller/juju-gui/viewmodel-improvements]

353. By Benjamin Saller on 2013-01-31

merge trunk

[Nicola Larosa (teknico)]

Land with changes.

This looks like a nice refactoring. Thanks for regenerating the
"undocumented" file. Please have a look at the comments below.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode102
app/views/topology/service.js:102: serviceDblClick: function(d, self) {
A more descriptive name than "d" on these methods would be nice, some
day.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode902
app/views/topology/service.js:902: destroyServiceConfirm: function(m,
view) {
Ditto for "m". Can we do away with these one-letter names, anyway? They
hamper readability.

https://codereview.appspot.com/7231067/diff/1/app/views/utils.js
File app/views/utils.js (right):

https://codereview.appspot.com/7231067/diff/1/app/views/utils.js#newcode611
app/views/utils.js:611: * Utility class that encapsulates Y.Models and
keeps their position
It is not a class anymore, is it? Can this comment be converted to a YUI
comment block somehow?

https://codereview.appspot.com/7231067/diff/1/app/views/utils.js#newcode861
app/views/utils.js:861: * @param {ServiceModule} Module holding box
canvas and context.
s/Module/module/

https://codereview.appspot.com/7231067/diff/1/app/views/utils.js#newcode865
app/views/utils.js:865: **/
Add a "@method toBoundingBoxes" directive, and remove one asterisk from
the block closing mark.

https://codereview.appspot.com/7231067/diff/1/app/views/utils.js#newcode889
app/views/utils.js:889: * relation.getAttrs() plus "source", "target",
and other convenience data.
Indent the text, to show that it continues from the line above.

https://codereview.appspot.com/7231067/diff/1/test/test_environment_view.js
File test/test_environment_view.js (right):

https://codereview.appspot.com/7231067/diff/1/test/test_environment_view.js#newcode846
test/test_environment_view.js:846: // update using pos
s/pos/position/ ?

https://codereview.appspot.com/7231067/diff/1/test/test_environment_view.js#newcode887
test/test_environment_view.js:887:
boxes.wordpress.id.should.equal('wordpress');
Nicer. :-)

https://codereview.appspot.com/7231067/

[Nicola Larosa (teknico)]

Uhm, I should mention that while "make test-prod" completes
successfully, in "make test-debug" mocha times out after setup, right
before running the tests. "make test-debug" does complete successfully
in trunk, here.

https://codereview.appspot.com/7231067/

[lp:~bcsaller/juju-gui/viewmodel-improvements]

354. By Benjamin Saller on 2013-01-31

the check is at the level of the menu, not the destroy action

355. By Benjamin Saller on 2013-01-31

lint

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7231067/

[Gary Poster (gary)]

I was in the middle of a review--with a long hiatus for various calls
and other responsibilities--when you made the new version. These
comments are from the previous revision, so they may or may not still be
pertinent. I'm sending them off and will start a new review after
lunch.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode102
app/views/topology/service.js:102: serviceDblClick: function(d, self) {
On 2013/01/31 10:44:24, teknico wrote:
> A more descriptive name than "d" on these methods would be nice, some
day.

+1

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode201
app/views/topology/service.js:201: var service = box;
Shouldn't this be box.model? If so, why does it still work? If it is
really ok for this to be the box, why should we call it the service?

Please address this one way or another so it is clear to the reader what
is going on--and, if necessary, tested that the method is doing what we
expect.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode242
app/views/topology/service.js:242: views.toBoundingBoxes(this,
db.services, this.service_boxes);
So, this mutates something or other? I need to go read it...

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode243
app/views/topology/service.js:243: this.services =
Y.Object.values(this.service_boxes);
Why do we have to stash this?

If we really want this on the module, I'd like it initialized and
explained in the initializer, the way you do with service_boxes.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode245
app/views/topology/service.js:245: // XXX: containment breaking alias,
do we need this?
If we do, then we should only store service_boxes on topo, and not
locally on "this," right? (No need to change this now, just a fly-by
thought.)

https://codereview.appspot.com/7231067/

[Madison Scott-Clary (makyo)]

Reviewing this in light of the possible changes to my current branch.
Overall I think it's really good stuff (I like the new box object much
better, as it makes things a little more readable, to me), and will help
me out in SOME respects, but only a few. Thanks for the work. I'll
defer to the others for landability, as they've got good comments.

https://codereview.appspot.com/7231067/

[Madison Scott-Clary (makyo)]

Increasing the number of units for a service is not reflected in the
environment view (increased WP from 1 to 10; service isn't resized,
health graph remains the same, unit count still says 1). Additionally,
I receive some errors when trying to create relationships between
services. Sometimes, it'll fail out when trying to find available
endpoints, and sometimes it dies on creating a relation. I was trying
with haproxy. After doing so, several things seemed to fail in a
cascade.

https://codereview.appspot.com/7231067/

[Benjamin Saller (bcsaller)]

On 2013/01/31 19:51:03, matthew.scott wrote:
> Increasing the number of units for a service is not reflected in the
environment
> view (increased WP from 1 to 10; service isn't resized, health graph
remains the
> same, unit count still says 1). Additionally, I receive some errors
when trying
> to create relationships between services. Sometimes, it'll fail out
when trying
> to find available endpoints, and sometimes it dies on creating a
relation. I
> was trying with haproxy. After doing so, several things seemed to
fail in a
> cascade.

You found a pre-existing bug but the fix is a small delta. Trying to
only incrementally render the env view lead to calling update() and
rendered()
on dbchange but we were only doing this when env view was the current
view. This has been changed in the branch to always update the env view
on db change as well as any other actions that need to be taken.

https://codereview.appspot.com/7231067/

[Gary Poster (gary)]

Hi Ben. Thank you for this very nice branch.

Land with changes, as documented in this review and my previous one.

I asked Matt to look at this as well if he has time. I didn't have time
to look at it during normal hours, but already had some comments waiting
in the wings, so decided to complete my review.

Gary

https://codereview.appspot.com/7231067/diff/10/app/views/topology/relation.js
File app/views/topology/relation.js (right):

https://codereview.appspot.com/7231067/diff/10/app/views/topology/relation.js#newcode779
app/views/topology/relation.js:779: return (relation.source.modelId ===
service.modelId ||
These sorts of changes--change calls to attrs--are throughout the
branch, and nice.

https://codereview.appspot.com/7231067/diff/10/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7231067/diff/10/app/views/topology/service.js#newcode256
app/views/topology/service.js:256: views.toBoundingBoxes(this,
db.services, this.service_boxes);
 From comment on previous partial review: I now see that
this.service_boxes is mutated. Cool.

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js
File app/views/utils.js (right):

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js#newcode618
app/views/utils.js:618: function positionProp(name) {
Nice.

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js#newcode790
app/views/utils.js:790: getNearestConnector: {
Now that it is a property, wouldn't this be better as a noun,
"nearestConnector"?

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js#newcode817
app/views/utils.js:817: getConnectorPair: {
Likewise: "connectorPair"?

https://codereview.appspot.com/7231067/diff/10/test/test_environment_view.js
File test/test_environment_view.js (right):

https://codereview.appspot.com/7231067/diff/10/test/test_environment_view.js#newcode910
test/test_environment_view.js:910: it('must be able to update boxes with
new model data',
Nice test.

https://codereview.appspot.com/7231067/diff/10/undocumented
File undocumented (right):

https://codereview.appspot.com/7231067/diff/10/undocumented#newcode247
undocumented:247: app/models/charm.js:50 "initializer"
We went from 234 to 247 undocumented functions. It's our policy to try
to keep that number stable or lower even when we regenerate the
"undocumented" file. I reviewed why the number went up, and I see that
it is largely or exclusively because of the property getter and setter
functions in the utils work you did. You documented the properties
quite nicely, so, without a counterargument to convince me otherwise,
this case seems to be one in which our yuidoc linter needs to be
improved. Therefore, I'd like to honor our policy, but I'd ask you to
do it by simply filing a bug against our yuidoc linter describing the
situation, and how the linter could be improved to no longer complain
about this situation. If you'd also like to document 13 random
functions arbitrarily to keep our count down, I won't stop you, but I do
not ask for that and in fact would prefer if that task did not slow
landing the branch down.

https://codereview.appspot.com/7231067/

[Benjamin Saller (bcsaller)]

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode243
app/views/topology/service.js:243: this.services =
Y.Object.values(this.service_boxes);
On 2013/01/31 17:30:12, gary.poster wrote:
> Why do we have to stash this?

> If we really want this on the module, I'd like it initialized and
explained in
> the initializer, the way you do with service_boxes.

removed.

https://codereview.appspot.com/7231067/diff/1/app/views/topology/service.js#newcode245
app/views/topology/service.js:245: // XXX: containment breaking alias,
do we need this?
On 2013/01/31 17:30:12, gary.poster wrote:
> If we do, then we should only store service_boxes on topo, and not
locally on
> "this," right? (No need to change this now, just a fly-by thought.)
Moved to topo.

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js
File app/views/utils.js (right):

https://codereview.appspot.com/7231067/diff/10/app/views/utils.js#newcode790
app/views/utils.js:790: getNearestConnector: {
On 2013/02/01 02:26:05, gary.poster wrote:
> Now that it is a property, wouldn't this be better as a noun,
> "nearestConnector"?

these two methods take arguments and are not normal properties so they
retain the 'get' prefix.

https://codereview.appspot.com/7231067/

[Benjamin Saller (bcsaller)]

*** Submitted:

View model improvements

Change BoundingBoxes to retain reference to module. This allows box
models
to directly resolve the db.Model backing them. This also allow access to
the
DOMNode in the canvas directly. Certain features of box directly depend
on
methods being available in the passed in module, mocking this is still
possible and shown in tests.

R=teknico, gary.poster, matthew.scott
CC=
https://codereview.appspot.com/7231067

https://codereview.appspot.com/7231067/

=== modified file 'app/views/service.js'
--- app/views/service.js	2013-01-24 19:11:19 +0000
+++ app/views/service.js	2013-01-31 16:56:20 +0000
@@ -118,7 +118,6 @@
           getModelURL = this.get('getModelURL'),
           db = this.get('db'),
           unit_names = ev.unit_names;
-      console.log('_removeUnitCallback with: ', arguments);
 
       if (ev.err) {
         db.notifications.add(
 
=== modified file 'app/views/topology/relation.js'
--- app/views/topology/relation.js	2013-01-30 12:38:03 +0000
+++ app/views/topology/relation.js	2013-01-31 16:56:20 +0000
@@ -776,8 +776,8 @@
      */
     subordinateRelationsForService: function(service) {
       return this.relations.filter(function(relation) {
-        return (relation.source.modelId() === service.modelId() ||
-            relation.target.modelId() === service.modelId()) &&
+        return (relation.source.modelId === service.modelId ||
+            relation.target.modelId === service.modelId) &&
             relation.isSubordinate;
       });
     },
 
=== modified file 'app/views/topology/service.js'
--- app/views/topology/service.js	2013-01-30 12:38:03 +0000
+++ app/views/topology/service.js	2013-01-31 16:56:20 +0000
@@ -102,7 +102,7 @@
     serviceDblClick: function(d, self) {
       // Just show the service on double-click.
       var topo = self.get('component'),
-          service = topo.serviceForBox(d);
+          service = d.model;
       // The browser sends a click event right before the dblclick one, and it
       // opens the service menu: close it before moving to the service details.
       self.service_click_actions.hideServiceMenu(null, self);
@@ -194,7 +194,7 @@
       // Get the service element
       var topo = context.get('component');
       var box = topo.get('active_service');
-      var service = topo.serviceForBox(box);
+      var service = box.model;
       context.service_click_actions
              .hideServiceMenu(d, context);
       context.service_click_actions
@@ -210,7 +210,7 @@
       // Get the service element
       var topo = context.get('component');
       var box = topo.get('active_service');
-      var service = topo.serviceForBox(box);
+      var service = box;
       context.service_click_actions
              .hideServiceMenu(box, context);
       context.service_click_actions
@@ -252,31 +252,16 @@
       var topo = this.get('component');
       var vis = topo.vis;
       var db = topo.get('db');
-      var services = db.services.map(views.toBoundingBox);
-
-      this.services = services;
-
-      Y.each(services, function(service) {
-        // Update services  with existing positions.
-        // In the future it would be better to sync
-        // the model to the existing box.
-        var existing = this.service_boxes[service.id];
-        if (existing) {
-          service.pos = existing.pos;
-          service.inDrag = existing.inDrag;
-        }
-        service.margins(service.subordinate ?
-                        this.subordinate_margins :
-                        this.service_margins);
-        this.service_boxes[service.id] = service;
-      }, this);
+
+      views.toBoundingBoxes(this, db.services, this.service_boxes);
+      this.services = Y.Object.values(this.service_boxes);
 
       // XXX: containment breaking alias, do we need this?
       topo.service_boxes = this.service_boxes;
 
       // Nodes are mapped by modelId tuples.
       this.node = vis.selectAll('.service')
-                     .data(services, function(d) {return d.modelId();});
+                     .data(this.services, function(d) {return d.modelId;});
     },
 
     /**
@@ -363,7 +348,7 @@
       }
 
       selection.attr('transform', function(d, i) {
-        return d.translateStr();
+        return d.translateStr;
       });
       if (topo.get('active_service') === d) {
         self.updateServiceMenuLocation();
@@ -443,7 +428,7 @@
           })
         .call(this.dragBehavior)
         .attr('transform', function(d) {
-            return d.translateStr();
+            return d.translateStr;
           })
         .call(self.createServiceNode);
 
@@ -529,7 +514,7 @@
       // binding as the event handler will
       // use that index.
       node.each(function(d) {
-        var service = topo.serviceForBox(d),
+        var service = d.model,
             annotations = service.get('annotations'),
             x, y;
 
@@ -667,7 +652,7 @@
             return d.w / 10 * 7;
           })
         .attr('y', function(d) {
-            return d.getRelativeCenter()[1] - (d.w / 6) / 2;
+            return d.relativeCenter[1] - (d.w / 6) / 2;
           })
         .append('title')
         .text(function(d) {
@@ -712,7 +697,7 @@
 
       node.select('.service-status')
         .attr('transform', function(d) {
-            return 'translate(' + d.getRelativeCenter() + ')';
+            return 'translate(' + d.relativeCenter + ')';
           });
       node.select('.service-health-mask')
         .attr('width', function(d) {
@@ -838,7 +823,7 @@
         var cp_width = cp.getClientRect().width,
                 menu_left = service.x * z + service.w * z / 2 <
                 this.width * z / 2,
-                service_center = service.getRelativeCenter();
+                service_center = service.relativeCenter;
         if (menu_left) {
           cp.removeClass('left')
                 .addClass('right');
@@ -896,7 +881,7 @@
       showServiceMenu: function(box, module, context) {
         var serviceMenu = module.get('container').one('#service-menu');
         var topo = module.get('component');
-        var service = topo.serviceForBox(box);
+        var service = box.model;
 
         if (box && !serviceMenu.hasClass('active')) {
           topo.set('active_service', box);
@@ -950,12 +935,12 @@
        */
       destroyServiceConfirm: function(m, view) {
         // Set service in view.
-        view.set('destroy_service', m);
+        view.set('destroy_service', m.model);
 
         // Show dialog.
         view.set('destroy_dialog', views.createModalPanel(
             'Are you sure you want to destroy the service? ' +
-                'This cannot be undone.',
+            'This cannot be undone.',
             '#destroy-modal-panel',
             'Destroy Service',
             Y.bind(function(ev) {
@@ -963,9 +948,8 @@
               var btn = ev.target;
               btn.set('disabled', true);
               view.service_click_actions
-                      .destroyService(m, view, btn);
-            },
-            this)));
+              .destroyService(m, view, btn);
+            }, this)));
       },
 
       /*
@@ -976,15 +960,14 @@
       destroyService: function(m, view, btn) {
         var env = view.get('component').get('env'),
             service = view.get('destroy_service');
-        env.destroy_service(
-            service.get('id'),
-            Y.bind(this._destroyCallback, view,
-                   service, view, btn));
+        env.destroy_service(service.get('id'),
+                            Y.bind(this._destroyCallback, view,
+                                   service, view, btn));
       },
 
       _destroyCallback: function(service, view, btn, ev) {
         var getModelURL = view.get('component').get('getModelURL'),
-                db = view.get('component').get('db');
+            db = view.get('component').get('db');
         if (ev.err) {
           db.notifications.add(
               new models.Notification({
@@ -993,8 +976,7 @@
                 level: 'error',
                 link: getModelURL(service),
                 modelId: service
-              })
-          );
+              }));
         } else {
           var relations = db.relations.get_relations_for_service(service);
           Y.each(relations, function(relation) {
@@ -1007,7 +989,6 @@
         btn.set('disabled', false);
       }
 
-
     }
   }, {
     ATTRS: {}
 
=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-01-24 17:43:57 +0000
+++ app/views/utils.js	2013-01-31 16:56:20 +0000
@@ -607,224 +607,277 @@
   };
 
 
-
   /*
-   * Utility class that encapsulates Y.Models and keeps their positional
+   * Utility class that encapsulates Y.Models and keeps their position
    * state within an svg canvas.
    *
    * As a convenience attributes of the encapsulated model are exposed
    * directly as attributes.
    */
-  function BoundingBox() {
-    var x, y, w, h, value, modelId, boxMargins;
-    function Box() {}
-
-    Box.model = function(_) {
-      if (!arguments.length) {
-        return modelId;
-      }
-      modelId = [_.name, _.get('id')];
-
-      // Copy all the attrs from model to Box
-      Y.mix(Box, _.getAttrs());
-      return Box;
-    };
-
-    Box.margins = function(_) {
-      if (!arguments.length) {
-        return boxMargins;
-      }
-      boxMargins = _;
-      return Box;
-    };
-
-    Object.defineProperties(Box, {
-      pos: {
-        writeable: true,
-        get: function() {
-          return {x: this.x, y: this.y, w: this.w, h: this.h};
-        },
-        set: function(value) {
-          Y.mix(this, value, true, ['x', 'y', 'w', 'h']);
-        }
-      },
-      x: {
-        writeable: true,
-        get: function() { return x;},
-        set: function(value) {
-          this.px = this.x;
-          x = value;
-          return this;}
-      },
-      y: {
-        writeable: true,
-        get: function() { return y;},
-        set: function(value) {
-          this.py = this.y;
-          y = value;
-          return this;
-        }
-      }
-    });
-
-    Box.getXY = function() {return [this.x, this.y];};
-    Box.getWH = function() {return [this.w, this.h];};
+  var _box = {};
+  function positionProp(name) {
+    return {
+      get: function() {return this['_' + name];},
+      set: function(value) {
+        this['p' + name] = this['_' + name];
+        this['_' + name] = value;
+      }
+    };
+  }
+
+  Object.defineProperties(_box, {
+    x: positionProp('x'),
+    y: positionProp('y'),
+    w: positionProp('w'),
+    h: positionProp('h'),
+
+    pos: {
+      get: function() { return {x: this.x, y: this.y, w: this.w, h: this.h};},
+      set: function(value) {
+        Y.mix(this, value, true, ['x', 'y', 'w', 'h']);
+      }
+    },
+
+    translateStr: {
+      get: function() { return 'translate(' + this.x + ',' + this.y + ')';}
+    },
+
+    model: {
+      get: function() {
+        if (!this._modelName) { return null;}
+        return this.topology.serviceForBox(this);
+      },
+      set: function(value) {
+        if (Y.Lang.isValue(value)) {
+          Y.mix(this, value.getAttrs(), true);
+          this._modelName = value.name;
+        }
+      }
+    },
+    modelId: {
+      get: function() { return this._modelName + '-' + this.id;}
+    },
+    node: {
+      get: function() { return this.module.getServiceNode(this.id);}
+    },
+    topology: {
+      get: function() { return this.module.get('component');}
+    },
+    xy: {
+      get: function() { return [this.x, this.y];}
+    },
+    wh: {
+      get: function() { return [this.w, this.h];}
+    },
+
+    /*
+     * Extract margins from the supplied module.
+     */
+    margins: {
+      get: function() {
+        if (!this.module) {
+          // Used in testing.
+          return {top: 0, bottom: 0, left: 0, right: 0};
+        }
+        if (this.subordinate) {
+          return this.module.subordinate_margins;
+        }
+        return this.module.service_margins;
+      }
+    },
 
     /*
      * Returns the center of the box with the origin being the upper-left
      * corner of the box.
      */
-    Box.getRelativeCenter = function() {
-      var margins = this.margins();
-      return [
-        (this.w / 2) + (margins &&
-              (margins.left * this.w / 2 -
-                margins.right * this.w / 2) || 0),
-        (this.h / 2) - (margins &&
-              (margins.bottom * this.h / 2 -
-                margins.top * this.h / 2) || 0)
-      ];
-    };
+    relativeCenter: {
+      get: function() {
+        var margins = this.margins;
+        return [
+          (this.w / 2) + (margins &&
+                          (margins.left * this.w / 2 -
+                           margins.right * this.w / 2) || 0),
+          (this.h / 2) - (margins &&
+                          (margins.bottom * this.h / 2 -
+                           margins.top * this.h / 2) || 0)
+        ];}
+    },
 
     /*
      * Returns the absolute center of the box on the canvas.
      */
-    Box.getCenter = function() {
-      var center = this.getRelativeCenter();
-      center[0] += this.x;
-      center[1] += this.y;
-      return center;
-    };
-
+    center: {
+      get: function() {
+        var c = this.relativeCenter;
+        c[0] += this.x;
+        c[1] += this.y;
+        return c;
+      }
+    },
 
     /*
      * Returns true if a given point in the form [x, y] is within the box.
+     * Transform could be extracted from the topology but the current
+     * arguments ease testing.
      */
-    Box.containsPoint = function(point, transform) {
-      transform = transform || {
-        scale: function() { return 1; },
-        translate: function() { return [0, 0]; }
-      };
-      var s = transform.scale(), tr = transform.translate();
-      if (point[0] >= this.x * s + tr[0] &&
-          point[0] <= this.x * s + this.w * s + tr[0] &&
-          point[1] >= this.y * s + tr[1] &&
-          point[1] <= this.y * s + this.h * s + tr[1]) {
-        return true;
+    containsPoint: {
+      writable: true, // For test overrides.
+      configurable: true,
+      value: function(point, transform) {
+        transform = transform || {
+          scale: function() { return 1; },
+          translate: function() { return [0, 0]; }
+        };
+        var tr = transform.translate(),
+            s = transform.scale();
+
+        return (point[0] >= this.x * s + tr[0] &&
+                point[0] <= this.x * s + this.w * s + tr[0] &&
+                point[1] >= this.y * s + tr[1] &&
+                point[1] <= this.y * s + this.h * s + tr[1]);
       }
-      return false;
-    };
+    },
 
     /*
-     * Return the 50% points along each side as xy pairs
+     * Return the 50% points along each side as [x, y] pairs.
      */
-    Box.getConnectors = function() {
-      // Since the service nodes have a shadow that takes up a bit of
-      // space on the sides and bottom of the actual node itself, add a bit
-      // of a margin to the actual connecting points. The margin is specified
-      // as a percentage of the width or height, as those are affected by the
-      // scale. This is calculated by taking the distance of the shadow from
-      // the edge of the actual shape and calculating it as a percentage of
-      // the total height of the shape.
-      var margins = this.margins();
-      return {
-        top: [
-          this.x + (this.w / 2),
-          this.y + (margins && (margins.top * this.h) || 0)
-        ],
-        right: [
-          this.x + this.w - (margins && (margins.right * this.w) || 0),
-          this.y + (this.h / 2) - (
-              margins && (margins.bottom * this.h / 2 -
-                          margins.top * this.h / 2) || 0)
-        ],
-        bottom: [
-          this.x + (this.w / 2),
-          this.y + this.h - (margins && (margins.bottom * this.h) || 0)
-        ],
-        left: [
-          this.x + (margins && (margins.left * this.w) || 0),
-          this.y + (this.h / 2) - (
-              margins && (margins.bottom * this.h / 2 -
-                          margins.top * this.h / 2) || 0)
-        ]
-      };
-    };
+    connectors: {
+      get: function() {
+        // Since the service nodes have a shadow that takes up a bit of
+        // space on the sides and bottom of the actual node itself, add a bit
+        // of a margin to the actual connecting points. The margin is specified
+        // as a percentage of the width or height, as those are affected by the
+        // scale. This is calculated by taking the distance of the shadow from
+        // the edge of the actual shape and calculating it as a percentage of
+        // the total height of the shape.
+        var margins = this.margins;
+        return {
+          top: [
+            this.x + (this.w / 2),
+            this.y + (margins && (margins.top * this.h) || 0)
+          ],
+          right: [
+            this.x + this.w - (margins && (margins.right * this.w) || 0),
+            this.y + (this.h / 2) - (
+                margins && (margins.bottom * this.h / 2 -
+                            margins.top * this.h / 2) || 0)
+          ],
+          bottom: [
+            this.x + (this.w / 2),
+            this.y + this.h - (margins && (margins.bottom * this.h) || 0)
+          ],
+          left: [
+            this.x + (margins && (margins.left * this.w) || 0),
+            this.y + (this.h / 2) - (
+                margins && (margins.bottom * this.h / 2 -
+                            margins.top * this.h / 2) || 0)
+          ]
+        };
+      }
+    },
 
-    Box._distance = function(xy1, xy2) {
-      return Math.sqrt(Math.pow(xy1[0] - xy2[0], 2) +
-                       Math.pow(xy1[1] - xy2[1], 2));
-    };
+    _distance: {
+      value: function(xy1, xy2) {
+        return Math.sqrt(Math.pow(xy1[0] - xy2[0], 2) +
+                         Math.pow(xy1[1] - xy2[1], 2));
+      }
+    },
 
     /*
      * Connectors are defined on four borders, find the one closes to
      * another BoundingBox
      */
-    Box.getNearestConnector = function(other_box) {
-      var connectors = this.getConnectors(),
-          result = null,
-          shortest_d = Infinity,
-          source = other_box;
-      // duck typing
-      if ('getXY' in other_box) {
-        source = other_box.getXY();
+    getNearestConnector: {
+      value: function(box_or_xy) {
+        var connectors = this.connectors,
+            result = null,
+            shortest_d = Infinity,
+            source = box_or_xy;
+
+        if (box_or_xy.xy !== undefined) {
+          source = box_or_xy.xy;
+        }
+        Y.each(connectors, function(ep) {
+          // Take the distance of each XY pair
+          var d = this._distance(source, ep);
+          if (!Y.Lang.isValue(result) || d < shortest_d) {
+            shortest_d = d;
+            result = ep;
+          }
+        }, this);
+        return result;
       }
-
-      Y.each(connectors, function(ep) {
-        // Take the distance of each XY pair
-        var d = this._distance(source, ep);
-        if (!Y.Lang.isValue(result) || d < shortest_d) {
-          shortest_d = d;
-          result = ep;
-        }
-      }, this);
-      return result;
-    };
+    },
 
     /*
      * Return [this.connector.XY, other.connector.XY] (in that order)
      * that as nearest to each other. This can be used to define start-end
      * points for routing.
      */
-    Box.getConnectorPair = function(other_box) {
-      var sc = Box.getConnectors(),
-          oc = other_box.getConnectors(),
-          result = null,
-          shortest_d = Infinity;
-
-      Y.each(sc, function(ep1) {
-        Y.each(oc, function(ep2) {
-          // Take the distance of each XY pair
-          var d = this._distance(ep1, ep2);
-          if (!Y.Lang.isValue(result) || d < shortest_d) {
-            shortest_d = d;
-            result = [ep1, ep2];
-          }
-        }, other_box);
-      }, this);
-      return result;
-    };
-
-    Box.translateStr = function() {
-      return 'translate(' + this.getXY() + ')';
-    };
-
-    Box.modelId = function() {
-      return modelId[0] + '-' + modelId[1];
-    };
-
-    return Box;
+    getConnectorPair: {
+      value: function(other_box) {
+        var sc = this.connectors,
+            oc = other_box.connectors,
+            result = null,
+            shortest_d = Infinity;
+
+        Y.each(sc, function(ep1) {
+          Y.each(oc, function(ep2) {
+            // Take the distance of each XY pair
+            var d = this._distance(ep1, ep2);
+            if (!Y.Lang.isValue(result) || d < shortest_d) {
+              shortest_d = d;
+              result = [ep1, ep2];
+            }
+          }, other_box);
+        }, this);
+        return result;
+      }
+    }
+  });
+
+  /**
+   * @method BoundingBox
+   * @param {Module} module Typically service module.
+   * @param {Model} model Model object.
+   * @return {BoundingBox} A Box model.
+   */
+  function BoundingBox(module, model) {
+    var b = Object.create(_box);
+    b.module = module;
+    b.model = model;
+
+    return b;
   }
 
   views.BoundingBox = BoundingBox;
 
-  views.toBoundingBox = function(model) {
-    var box = new BoundingBox();
-    box.model(model);
-    return box;
+  /**
+   * Covert an Array of services into BoundingBoxes. If
+   * existing is supplied it should be a map of {id: box}
+   * and will be updated in place by merging changed attribute
+   * into the index.
+   *
+   * @param {ServiceModule} Module holding box canvas and context.
+   * @param {ModelList} services Service modellist.
+   * @param {Object} existing id:box mapping.
+   * @return {Object} id:box mapping.
+   **/
+  views.toBoundingBoxes = function(module, services, existing) {
+    var result = existing || {};
+    Y.each(services, function() {
+      var id = this.get('id');
+      if (result[id] !== undefined) {
+        result[id].model = this;
+      } else {
+        result[id] = new BoundingBox(module, this);
+      }
+    });
+    return result;
   };
 
 
+
   /**
    * Decorate a relation with some related/derived data.
    *
@@ -841,9 +894,9 @@
       source: source,
       target: target,
       compositeId: (
-          source.modelId() +
+          source.modelId +
           (hasRelations ? ':' + relation.endpoints[0][1].name : '') +
-          '-' + target.modelId() +
+          '-' + target.modelId +
           (hasRelations ? ':' + relation.endpoints[1][1].name : ''))
     };
     Y.mix(decorated, relation.getAttrs());
 
=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2013-01-29 19:12:52 +0000
+++ test/test_environment_view.js	2013-01-31 16:56:20 +0000
@@ -789,7 +789,7 @@
   });
 
   describe('view model support infrastructure', function() {
-    var Y, views, models;
+    var Y, views, models, module, service;
 
     before(function(done) {
       Y = YUI(GlobalConfig).use(['juju-views', 'juju-models'],
@@ -800,48 +800,46 @@
           });
     });
 
+    beforeEach(function() {
+      service = new models.Service({
+        id: 'mediawiki',
+        exposed: true});
+      module = {
+        topology: {
+          serviceForBox: function() {return service;}
+        }};
+    });
+
     it('must be able to get us nearest connectors',
        function() {
-         var b1 = views.BoundingBox(),
-         b2 = views.BoundingBox();
+         var b1 = views.BoundingBox(module, service),
+         b2 = views.BoundingBox(module, service);
 
-         // raw poperty access
+         // raw property access
          b1.x = 0; b1.y = 0;
          b1.w = 100; b1.h = 200;
 
          // Use pos to set b2
          b2.pos = {x: 200, y: 300, w: 100, h: 200};
 
-         b1.getXY().should.eql([0, 0]);
-         b2.getWH().should.eql([100, 200]);
+         b1.xy.should.eql([0, 0]);
+         b2.wh.should.eql([100, 200]);
 
-         b1.margins({
-           top: 0,
-           bottom: 0,
-           right: 0,
-           left: 0
-         });
          b1.getNearestConnector([0, 0]);
 
          b1.getNearestConnector(b2).should
-          .eql(b1.getConnectors().bottom);
+          .eql(b1.connectors.bottom);
 
-         b2.margins({
-           top: 0,
-           bottom: 0,
-           right: 0,
-           left: 0
-         });
          b2.getNearestConnector(b1).should
-          .eql(b2.getConnectors().top);
+          .eql(b2.connectors.top);
 
          b1.getConnectorPair(b2).should.eql([
-           b1.getConnectors().bottom,
-           b2.getConnectors().top]);
+           b1.connectors.bottom,
+           b2.connectors.top]);
        });
 
     it('must be able to tell if a point is inside a box', function() {
-      var b = views.BoundingBox();
+      var b = views.BoundingBox(module, service);
       b.pos = {x: 100, y: 100, w: 50, h: 50};
 
       b.containsPoint([125, 125]).should.equal(true);
@@ -850,10 +848,10 @@
 
     it('must be able to save and restore old position information',
        function() {
-         var b1 = views.BoundingBox(),
-         b2 = views.BoundingBox();
+         var b1 = views.BoundingBox(module, service),
+             b2 = views.BoundingBox(module, service);
 
-         // raw poperty access
+         // raw property access
          b1.x = 0; b1.y = 0;
          b1.w = 100; b1.h = 200;
 
@@ -872,13 +870,10 @@
 
        });
 
-    it('must be able to access model attributes easily', function() {
-      var service = new models.Service({id: 'mediawiki',
-        exposed: true}),
-          b1 = new views.BoundingBox();
-      b1.model(service);
+    it('must be able to access model attributes', function() {
+      var b1 = new views.BoundingBox(module, service);
 
-      b1.modelId().should.equal('service-mediawiki');
+      b1.modelId.should.equal('service-mediawiki');
 
       // properties of the model have mapped to the box
       b1.id.should.equal('mediawiki');
@@ -887,36 +882,49 @@
 
     it('must be able to update position data and not touch model data',
        function() {
-         var service = new models.Service({id: 'mediawiki',
-           exposed: true}),
-         b1 = new views.BoundingBox();
-         b1.model(service);
+         var b1 = views.BoundingBox(module, service);
          b1.x = 0; b1.y = 0;
          b1.w = 100; b1.h = 200;
          b1.id.should.equal('mediawiki');
 
          // X/Y updated, other keys ignored
-         b1.pos = {x: 100, y: 100, id: 'mediawiki'};
+         b1.pos = {x: 100, y: 100, id: 'blubber'};
          b1.x.should.equal(100);
          b1.id.should.equal('mediawiki');
-
        });
 
     it('must be able to map from sequence of models to boundingboxes',
        function() {
          var services = new models.ServiceList();
          services.add([{id: 'mysql'},
-           {id: 'haproxy'},
-           {id: 'memcache'},
-           {id: 'wordpress'}]);
-
-         services.size().should.equal(4);
-         var boxes = services.map(views.toBoundingBox);
-         boxes.length.should.equal(4);
-         boxes[0].id.should.equal('mysql');
-         boxes[3].id.should.equal('wordpress');
-       });
-
+                       {id: 'haproxy'},
+                       {id: 'memcache'},
+                       {id: 'wordpress'}]);
+
+         services.size().should.equal(4);
+         var boxes = views.toBoundingBoxes(module, services);
+         boxes.mysql.id.should.equal('mysql');
+         boxes.wordpress.id.should.equal('wordpress');
+       });
+
+    it('must be able to update boxes with new model data',
+       function() {
+         var services = new models.ServiceList();
+         services.add([{id: 'mysql', exposed: false},
+                       {id: 'haproxy'},
+                       {id: 'memcache'},
+                       {id: 'wordpress'}]);
+
+         services.size().should.equal(4);
+         var boxes = views.toBoundingBoxes(module, services);
+         var mysql = services.getById('mysql');
+
+         boxes.mysql.exposed.should.equal(false);
+         mysql.set('exposed', true);
+
+         // The third argument here implies an update.
+         views.toBoundingBoxes(module, services, boxes);
+         boxes.mysql.exposed.should.equal(true);
+       });
   });
-
 })();
 
=== modified file 'test/test_service_module.js'
--- test/test_service_module.js	2013-01-29 18:59:37 +0000
+++ test/test_service_module.js	2013-01-31 16:56:20 +0000
@@ -232,6 +232,20 @@
     cancelButton.simulate('click');
   });
 
+  it('should prevent the Juju GUI service from being destroyed', function() {
+    var service = db.services.add({
+      id: 'gui',
+      charm: 'cs:precise/juju-gui-7'
+    });
+    var box = views.BoundingBox(serviceModule, service);
+    var menu = view.get('container').one('#service-menu');
+    view.topo.set('active_service', service);
+
+    serviceModule.service_click_actions
+                 .toggleServiceMenu(box, serviceModule, serviceModule);
+    menu.one('.destroy-service').hasClass('disabled').should.equal(true);
+  });
+
   it('must not process service clicks after a dragend', function() {
     // Test the work-around that prevents serviceClick from doing its work if
     // called after dragend.  Behaviour-driven testing via a tool such as
 
=== modified file 'test/test_topology.js'
--- test/test_topology.js	2013-01-28 19:45:48 +0000
+++ test/test_topology.js	2013-01-31 16:56:20 +0000
@@ -93,83 +93,4 @@
        Y.Lang.isValue(topo.vis).should.equal(true);
      });
 
-  it('should prevent the Juju GUI service from being destroyed', function() {
-    var service = {
-      charm: 'cs:precise/juju-gui-7'
-    };
-    var fauxTopo = {
-      get: function() {
-        return null;
-      },
-      serviceForBox: function() {
-        return service;
-      }
-    };
-    // The context is used to do the destroying, so if it does not have the
-    // destroy method, an exception will be raised if the service would be
-    // destroyed.
-    var context = {
-      get: function(name) {
-        if (name === 'component') {
-          return fauxTopo;
-        }
-      },
-      service_click_actions: {
-        hideServiceMenu: function() {},
-        destroyServiceConfirm: function() {}
-      }
-    };
-    topo.modules.ServiceModule.destroyServiceClick(undefined, context);
-  });
-});
-
-describe('service menu', function() {
-  var Y, views;
-
-  before(function(done) {
-    Y = YUI(GlobalConfig).use(['juju-topology'], function(Y) {
-      views = Y.namespace('juju.views');
-      done();
-    });
-  });
-
-  it('should disable the "Destroy" menu for the Juju GUI service', function() {
-    var service = {
-      charm: 'cs:precise/juju-gui-7'
-    };
-    var addedClassName;
-    var menu = {
-      hasClass: function() {
-        return false;
-      },
-      addClass: function() {},
-      one: function() {
-        return {
-          addClass: function(className) {
-            addedClassName = className;
-          }
-        };
-      }
-    };
-    var fauxView = {
-      get: function(name) {
-        if (name === 'container') {
-          return {one: function() { return menu; }};
-        } else if (name === 'component') {
-          return {
-            set: function() {},
-            serviceForBox: function() {
-              return service;
-            }
-          };
-        }
-      },
-      updateServiceMenuLocation: function() {}
-    };
-    var view = new views.ServiceModule();
-    view.service_click_actions.toggleServiceMenu(
-        service, fauxView, undefined);
-    assert.equal(addedClassName, 'disabled');
-  });
-
 });
 
=== modified file 'undocumented'
--- undocumented	2013-01-25 17:51:29 +0000
+++ undocumented	2013-01-31 16:56:20 +0000
@@ -1,16 +1,16 @@
-app/store/env.js:306 "status"
-app/store/env.js:31 "initializer"
-app/store/env.js:120 "_dispatch_rpc_result"
-app/store/env.js:107 "dispatch_result"
-app/store/env.js:112 "_dispatch_event"
-app/store/env.js:222 "get_charm"
-app/store/env.js:76 "on_message"
-app/store/env.js:72 "on_close"
-app/store/env.js:49 "destructor"
-app/store/env.js:226 "get_service"
-app/store/env.js:70 "on_open"
-app/store/env.js:54 "connect"
-app/store/env.js:401 "get_endpoints"
+app/store/env.js:73 "on_open"
+app/store/env.js:229 "get_service"
+app/store/env.js:115 "_dispatch_event"
+app/store/env.js:79 "on_message"
+app/store/env.js:404 "get_endpoints"
+app/store/env.js:110 "dispatch_result"
+app/store/env.js:309 "status"
+app/store/env.js:75 "on_close"
+app/store/env.js:57 "connect"
+app/store/env.js:34 "initializer"
+app/store/env.js:123 "_dispatch_rpc_result"
+app/store/env.js:52 "destructor"
+app/store/env.js:225 "get_charm"
 app/store/charm.js:24 "find"
 app/store/charm.js:11 "success"
 app/store/charm.js:65 "_normalizeCharms"
@@ -25,32 +25,46 @@
 app/store/notifications.js:25 "message"
 app/store/notifications.js:129 "title"
 app/store/notifications.js:137 "message"
+app/views/utils.js:732 "scale"
 app/views/utils.js:166 "substitute"
-app/views/utils.js:569 "isFloat"
 app/views/utils.js:251 "hasSVGClass"
+app/views/utils.js:637 "get"
 app/views/utils.js:296 "toggleSVGClass"
-app/views/utils.js:646 "set"
-app/views/utils.js:645 "get"
+app/views/utils.js:784 "value"
+app/views/utils.js:698 "get"
 app/views/utils.js:135 "noop"
-app/views/utils.js:653 "get"
 app/views/utils.js:259 "addSVGClass"
+app/views/utils.js:577 "isFloat"
+app/views/utils.js:218 "renderable_charm"
 app/views/utils.js:138 "console"
-app/views/utils.js:218 "renderable_charm"
+app/views/utils.js:730 "value"
 app/views/utils.js:113 "noop"
 app/views/utils.js:280 "removeSVGClass"
+app/views/utils.js:714 "get"
 app/views/utils.js:371 "_addAlertMessage"
-app/views/utils.js:698 "translate"
 app/views/utils.js:228 "humanizeNumber"
-app/views/utils.js:654 "set"
 app/views/utils.js:339 "action"
+app/views/utils.js:618 "positionProp"
 app/views/utils.js:195 "bindModelView"
-app/views/utils.js:565 "isInt"
-app/views/utils.js:610 "BoundingBox"
-app/views/utils.js:639 "set"
+app/views/utils.js:667 "get"
+app/views/utils.js:644 "get"
+app/views/utils.js:622 "set"
+app/views/utils.js:573 "isInt"
+app/views/utils.js:638 "set"
+app/views/utils.js:822 "value"
+app/views/utils.js:670 "get"
+app/views/utils.js:673 "get"
+app/views/utils.js:749 "get"
+app/views/utils.js:733 "translate"
+app/views/utils.js:681 "get"
+app/views/utils.js:621 "get"
 app/views/utils.js:419 "invokeCallback"
-app/views/utils.js:612 "Box"
+app/views/utils.js:661 "get"
+app/views/utils.js:653 "set"
+app/views/utils.js:664 "get"
+app/views/utils.js:649 "get"
 app/views/utils.js:132 "native"
-app/views/utils.js:697 "scale"
+app/views/utils.js:795 "value"
 app/views/environment.js:24 "initializer"
 app/views/charm-panel.js:1168 "calculatePanelPosition"
 app/views/charm-panel.js:476 "initializer"
@@ -103,35 +117,35 @@
 app/views/unit.js:292 "retryRelation"
 app/views/unit.js:157 "confirmRemoved"
 app/views/unit.js:185 "_removeUnitCallback"
-app/views/service.js:875 "render"
-app/views/service.js:338 "fitToWindow"
-app/views/service.js:688 "render"
-app/views/service.js:288 "initializer"
-app/views/service.js:740 "saveConfig"
-app/views/service.js:191 "_destroyCallback"
+app/views/service.js:263 "_exposeServiceCallback"
+app/views/service.js:501 "updateConstraints"
+app/views/service.js:338 "getHeight"
+app/views/service.js:229 "unexposeService"
 app/views/service.js:116 "_removeUnitCallback"
-app/views/service.js:264 "_exposeServiceCallback"
-app/views/service.js:257 "exposeService"
-app/views/service.js:770 "_setConfigCallback"
+app/views/service.js:405 "render"
+app/views/service.js:699 "showErrors"
+app/views/service.js:769 "_setConfigCallback"
+app/views/service.js:874 "render"
+app/views/service.js:417 "confirmRemoved"
 app/views/service.js:52 "_modifyUnits"
-app/views/service.js:406 "render"
-app/views/service.js:418 "confirmRemoved"
-app/views/service.js:339 "getHeight"
-app/views/service.js:182 "destroyService"
-app/views/service.js:440 "doRemoveRelation"
-app/views/service.js:887 "filterUnits"
-app/views/service.js:615 "render"
+app/views/service.js:256 "exposeService"
+app/views/service.js:181 "destroyService"
+app/views/service.js:614 "render"
+app/views/service.js:527 "_setConstraintsCallback"
+app/views/service.js:287 "initializer"
+app/views/service.js:687 "render"
 app/views/service.js:30 "modifyUnits"
-app/views/service.js:300 "getServiceTabs"
-app/views/service.js:166 "confirmDestroy"
-app/views/service.js:502 "updateConstraints"
-app/views/service.js:528 "_setConstraintsCallback"
+app/views/service.js:739 "saveConfig"
+app/views/service.js:886 "filterUnits"
+app/views/service.js:190 "_destroyCallback"
+app/views/service.js:466 "_removeRelationCallback"
+app/views/service.js:236 "_unexposeServiceCallback"
+app/views/service.js:337 "fitToWindow"
 app/views/service.js:88 "_addUnitCallback"
 app/views/service.js:23 "resetUnits"
-app/views/service.js:700 "showErrors"
-app/views/service.js:230 "unexposeService"
-app/views/service.js:237 "_unexposeServiceCallback"
-app/views/service.js:467 "_removeRelationCallback"
+app/views/service.js:165 "confirmDestroy"
+app/views/service.js:299 "getServiceTabs"
+app/views/service.js:439 "doRemoveRelation"
 app/views/topology/panzoom.js:151 "rescale"
 app/views/topology/panzoom.js:77 "zoomHandler"
 app/views/topology/panzoom.js:47 "renderSlider"
@@ -140,55 +154,55 @@
 app/views/topology/panzoom.js:123 "_fire_zoom"
 app/views/topology/panzoom.js:105 "zoom_out"
 app/views/topology/panzoom.js:33 "componentBound"
-app/views/topology/relation.js:269 "addRelButtonClicked"
-app/views/topology/relation.js:362 "snapOutOfService"
-app/views/topology/relation.js:514 "cancelRelationBuild"
-app/views/topology/relation.js:602 "ambiguousAddRelationCheck"
+app/views/topology/relation.js:836 "relationClick"
+app/views/topology/relation.js:517 "cancelRelationBuild"
+app/views/topology/relation.js:429 "addRelationDragEnd"
 app/views/topology/relation.js:55 "initializer"
-app/views/topology/relation.js:247 "updateSubordinateRelationsCount"
-app/views/topology/relation.js:262 "draglineClicked"
-app/views/topology/relation.js:169 "drawRelationGroup"
-app/views/topology/relation.js:123 "updateLinks"
+app/views/topology/relation.js:593 "addRelationStart"
+app/views/topology/relation.js:367 "snapOutOfService"
 app/views/topology/relation.js:65 "update"
-app/views/topology/relation.js:378 "addRelationDragStart"
-app/views/topology/relation.js:85 "renderedHandler"
-app/views/topology/relation.js:290 "addRelation"
+app/views/topology/relation.js:274 "addRelButtonClicked"
+app/views/topology/relation.js:237 "drawRelation"
+app/views/topology/relation.js:84 "renderedHandler"
+app/views/topology/relation.js:460 "_removeRelationCallback"
+app/views/topology/relation.js:295 "addRelation"
+app/views/topology/relation.js:174 "drawRelationGroup"
+app/views/topology/relation.js:60 "render"
+app/views/topology/relation.js:689 "addRelationEnd"
+app/views/topology/relation.js:267 "draglineClicked"
+app/views/topology/relation.js:485 "removeRelationConfirm"
+app/views/topology/relation.js:409 "addRelationDrag"
+app/views/topology/relation.js:88 "processRelation"
+app/views/topology/relation.js:772 "subordinateRelationsForService"
+app/views/topology/relation.js:728 "_addRelationCallback"
+app/views/topology/relation.js:605 "ambiguousAddRelationCheck"
+app/views/topology/relation.js:252 "updateSubordinateRelationsCount"
+app/views/topology/relation.js:338 "snapToService"
+app/views/topology/relation.js:779 "subRelBlockMouseEnter"
+app/views/topology/relation.js:383 "addRelationDragStart"
+app/views/topology/relation.js:128 "updateLinks"
 app/views/topology/relation.js:448 "removeRelation"
-app/views/topology/relation.js:778 "subRelBlockMouseEnter"
-app/views/topology/relation.js:835 "relationClick"
-app/views/topology/relation.js:60 "render"
-app/views/topology/relation.js:403 "addRelationDrag"
-app/views/topology/relation.js:727 "_addRelationCallback"
-app/views/topology/relation.js:590 "addRelationStart"
-app/views/topology/relation.js:89 "processRelation"
-app/views/topology/relation.js:232 "drawRelation"
-app/views/topology/relation.js:771 "subordinateRelationsForService"
-app/views/topology/relation.js:457 "_removeRelationCallback"
-app/views/topology/relation.js:333 "snapToService"
-app/views/topology/relation.js:423 "addRelationDragEnd"
-app/views/topology/relation.js:686 "addRelationEnd"
-app/views/topology/relation.js:787 "subRelBlockMouseLeave"
-app/views/topology/relation.js:482 "removeRelationConfirm"
-app/views/topology/service.js:966 "destroyService"
-app/views/topology/service.js:758 "fade"
-app/views/topology/service.js:777 "renderedHandler"
-app/views/topology/service.js:934 "show_service"
-app/views/topology/service.js:136 "serviceMouseLeave"
-app/views/topology/service.js:108 "serviceDblClick"
-app/views/topology/service.js:746 "show"
-app/views/topology/service.js:752 "hide"
-app/views/topology/service.js:214 "serviceAddRelMouseDown"
-app/views/topology/service.js:380 "update"
-app/views/topology/service.js:242 "updateData"
-app/views/topology/service.js:975 "_destroyCallback"
-app/views/topology/service.js:74 "initializer"
-app/views/topology/service.js:84 "serviceClick"
-app/views/topology/service.js:825 "updateServiceMenuLocation"
-app/views/topology/service.js:233 "serviceAddRelMouseUp"
-app/views/topology/service.js:172 "serviceStatusMouseOut"
-app/views/topology/service.js:288 "dragend"
-app/views/topology/service.js:118 "serviceMouseEnter"
-app/views/topology/service.js:943 "destroyServiceConfirm"
+app/views/topology/relation.js:788 "subRelBlockMouseLeave"
+app/views/topology/service.js:893 "show_service"
+app/views/topology/service.js:112 "serviceMouseEnter"
+app/views/topology/service.js:731 "hide"
+app/views/topology/service.js:208 "serviceAddRelMouseDown"
+app/views/topology/service.js:130 "serviceMouseLeave"
+app/views/topology/service.js:737 "fade"
+app/views/topology/service.js:166 "serviceStatusMouseOut"
+app/views/topology/service.js:78 "serviceClick"
+app/views/topology/service.js:68 "initializer"
+app/views/topology/service.js:267 "dragend"
+app/views/topology/service.js:227 "serviceAddRelMouseUp"
+app/views/topology/service.js:784 "updateServiceMenuLocation"
+app/views/topology/service.js:725 "show"
+app/views/topology/service.js:102 "serviceDblClick"
+app/views/topology/service.js:924 "destroyService"
+app/views/topology/service.js:359 "update"
+app/views/topology/service.js:902 "destroyServiceConfirm"
+app/views/topology/service.js:236 "updateData"
+app/views/topology/service.js:932 "_destroyCallback"
+app/views/topology/service.js:756 "renderedHandler"
 app/views/topology/topology.js:163 "getter"
 app/views/topology/topology.js:172 "setter"
 app/views/topology/topology.js:159 "getter"
@@ -199,7 +213,6 @@
 app/views/topology/topology.js:177 "setter"
 app/views/topology/topology.js:26 "initializer"
 app/views/topology/topology.js:63 "renderOnce"
-app/views/topology/viewport.js:31 "resized"
 app/models/models.js:357 "getNotificationsForModel"
 app/models/models.js:429 "getModelListByModelName"
 app/models/models.js:420 "getModelById"
@@ -224,11 +237,11 @@
 app/models/models.js:239 "has_relation_for_endpoint"
 app/models/models.js:324 "add"
 app/models/models.js:338 "trim"
-app/models/endpoints.js:40 "add"
-app/models/endpoints.js:29 "convert"
-app/models/charm.js:155 "validator"
-app/models/charm.js:113 "parse"
-app/models/charm.js:77 "sync"
-app/models/charm.js:105 "failure"
-app/models/charm.js:48 "initializer"
-app/models/charm.js:129 "compare"
+app/models/endpoints.js:42 "add"
+app/models/endpoints.js:30 "convert"
+app/models/charm.js:157 "validator"
+app/models/charm.js:115 "parse"
+app/models/charm.js:79 "sync"
+app/models/charm.js:131 "compare"
+app/models/charm.js:107 "failure"
+app/models/charm.js:50 "initializer"