Merge lp:~bcsaller/juju-gui/persistent-layout into lp:juju-gui/experimental

[Benjamin Saller]

Support for service positions from server

Provides support for loading initial and updated position
from annotations stored on the server. Updates occur
via a shared codepath with the drag event handler
to ensure proper updates are applied over time.

There is still an issue with deltas interrupting the drag.

https://codereview.appspot.com/7132061/

[Benjamin Saller (bcsaller)]

Reviewers: mp+143980_code.launchpad.net,

Message:
Please take a look.

Description:
Support for service positions from server

Provides support for loading initial and updated position
from annotations stored on the server. Updates occur
via a shared codepath with the drag event handler
to ensure proper updates are applied over time.

https://code.launchpad.net/~bcsaller/juju-gui/persistent-layout/+merge/143980

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/app.js
   M app/models/models.js
   M app/views/environment.js
   M app/views/topology/service.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. Thank you for getting this in.

The branch has some conflicts. They don't look too bad, but they will take at least a bit of investigation. I might have a chance to try and resolve them Sunday so we can expedite the review.

Thanks

Gary

On Jan 19, 2013, at 2:13 AM, Benjamin Saller <email address hidden> wrote:

> Reviewers: mp+143980_code.launchpad.net,
>
> Message:
> Please take a look.
>
> Description:
> Support for service positions from server
>
> Provides support for loading initial and updated position
> from annotations stored on the server. Updates occur
> via a shared codepath with the drag event handler
> to ensure proper updates are applied over time.
>
> https://code.launchpad.net/~bcsaller/juju-gui/persistent-layout/+merge/143980
>
> (do not edit description out of merge proposal)
>
>
> Please review this at https://codereview.appspot.com/7132061/
>
> Affected files:
> A [revision details]
> M app/app.js
> M app/models/models.js
> M app/views/environment.js
> M app/views/topology/service.js
> M test/test_environment_view.js
> M test/test_service_module.js
> M test/test_topology.js
> M undocumented
>
>
>
> --
> https://code.launchpad.net/~bcsaller/juju-gui/persistent-layout/+merge/143980
> Your team Juju GUI Hackers is requested to review the proposed merge of lp:~bcsaller/juju-gui/persistent-layout into lp:juju-gui.

[lp:~bcsaller/juju-gui/persistent-layout]

333. By Benjamin Saller on 2013-01-19

merge trunk

334. By Benjamin Saller on 2013-01-19

Don't fear the linter

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7132061/

[Benjamin Saller (bcsaller)]

Thanks for taking a peek, I resolved the merge and proposed again.

https://codereview.appspot.com/7132061/

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7132061/

[Gary Poster (gary)]

Hi Ben. Thank you for this branch. Land with changes (specifically
reinstating some of Nicola's changes that you lost, as mentioned below).

Tests pass for me.

The functionality works well, except for variants of the pre-existing
bug 1099921: moving services while the delta stream is being processed
leads to unexpected and undesired behavior. Either the drag is stopped,
or the drag completes but the processed location then moves the service
to where it was before. Hopefully we can get that addressed soon.

If it helps move things along in terms of Monday/Tuesday delivery, I
would be OK with you landing this and then responding to the
second/subsequent reviews in a separate branch. OTOH, if it doesn't
help you, don't do it. :-)

Thanks

Gary

https://codereview.appspot.com/7132061/diff/6001/app/app.js
File app/app.js (right):

https://codereview.appspot.com/7132061/diff/6001/app/app.js#newcode351
app/app.js:351: active.update();
cool

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

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode28
app/views/topology/service.js:28: mouseout: 'serviceStatusMouseOut'
Moving the functions out of the event registration does make it easier
to read. However, it makes the diff much harder to read. For instance,
AFAICT, there are no changes to these functions, but I'm coming to that
conclusion by eyeball rather than by mechanical diff. This would be the
kind of change I'd like to see in a separate branch to keep the branch
size down, to reduce the development time, and to ease reviews of the
pertinent code changes to actually implement this feature.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode33
app/views/topology/service.js:33: * relation.
We now have this comment both in the event registration and in the
function definition. I'm not sure that inline event handler functions
don't have their place, to be honest. If we do separate them, I think
we can only expect to maintain comments in one place. I believe that
the place should be the function, so I would recommend deleting this
copy of the comment.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode65
app/views/topology/service.js:65: toggleControlPanel: {callback:
function() {
I prefer the change that Nicola made, that you have reverted. In that
change, he renamed "ControlPanel" to "ServiceMenu," which seemed like a
naming improvement to Nicola and to his two reviewers. He also was able
to be explicit that we only needed to "hide" here, which would be nice
if we can manage it.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode178
app/views/topology/service.js:178:
self.service_click_actions.toggleControlPanel(null, self);
You've reverted Nicola's changes. I think they were improvements, but
even if you disagree, socially a discussion would be better. Please
don't do this.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode189
app/views/topology/service.js:189: .toggleControlPanel(box, con...

[Benjamin Saller (bcsaller)]

Thanks for the review, I'll attempt to address the issues today.

https://codereview.appspot.com/7132061/

[Francesco Banconi (frankban)]

Hi Ben, thanks for this branch.
I have not so much to add to Gary's review. Please see just the one
comment below.

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

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode514
app/views/topology/service.js:514: topo.fire('serviceMoved', {service:
d});
Isn't serviceMoved already fired by self.drag?

https://codereview.appspot.com/7132061/

[lp:~bcsaller/juju-gui/persistent-layout]

335. By Benjamin Saller on 2013-01-21

review changes

[Benjamin Saller (bcsaller)]

https://codereview.appspot.com/7132061/diff/6001/app/app.js
File app/app.js (right):

https://codereview.appspot.com/7132061/diff/6001/app/app.js#newcode351
app/app.js:351: active.update();
On 2013/01/20 15:58:45, gary.poster wrote:
> cool

Thanks, cutting to this should actually be a big improvement. I was
worried there would still be more work left before this would work
properly but it seems fine like this. This cuts the number of render
passes substantially and reduces the amount of work we do quite a lot.

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

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode33
app/views/topology/service.js:33: * relation.
On 2013/01/20 15:58:45, gary.poster wrote:
> We now have this comment both in the event registration and in the
function
> definition. I'm not sure that inline event handler functions don't
have their
> place, to be honest. If we do separate them, I think we can only
expect to
> maintain comments in one place. I believe that the place should be
the
> function, so I would recommend deleting this copy of the comment.

Agreed with comment placement, this was the result of trying to quickly
cut a smaller branch, bad porting.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode65
app/views/topology/service.js:65: toggleControlPanel: {callback:
function() {
On 2013/01/20 15:58:45, gary.poster wrote:
> I prefer the change that Nicola made, that you have reverted. In that
change,
> he renamed "ControlPanel" to "ServiceMenu," which seemed like a naming
> improvement to Nicola and to his two reviewers. He also was able to
be explicit
> that we only needed to "hide" here, which would be nice if we can
manage it.

Not intentional, this is how the trunk merge fell out. I'll restore his
version (which I had a hand in as well and agreed with).

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode178
app/views/topology/service.js:178:
self.service_click_actions.toggleControlPanel(null, self);
On 2013/01/20 15:58:45, gary.poster wrote:
> You've reverted Nicola's changes. I think they were improvements, but
even if
> you disagree, socially a discussion would be better. Please don't do
this.

Bad Merge, fixed.

https://codereview.appspot.com/7132061/diff/6001/app/views/topology/service.js#newcode201
app/views/topology/service.js:201: .toggleControlPanel(box, context);
On 2013/01/20 15:58:45, gary.poster wrote:
> You've reverted Nicola's changes. Please don't do this.

Same

https://codereview.appspot.com/7132061/diff/6001/test/test_environment_view.js
File test/test_environment_view.js (right):

https://codereview.appspot.com/7132061/diff/6001/test/test_environment_view.js#newcode112
test/test_environment_view.js:112: db.on_delta({data:
Y.clone(environment_delta)});
This change may be worth of review comment. This is needed because we
delete annotations once their x/y has been read and applied. This
creates an issue in testing because its a reference all the way back to
the original test data stub.

https://codereview.appsp...

[Benjamin Saller (bcsaller)]

*** Submitted:

Support for service positions from server

Provides support for loading initial and updated position
from annotations stored on the server. Updates occur
via a shared codepath with the drag event handler
to ensure proper updates are applied over time.

There is still an issue with deltas interrupting the drag.

R=gary.poster, frankban
CC=
https://codereview.appspot.com/7132061

https://codereview.appspot.com/7132061/

=== modified file 'app/app.js'
--- app/app.js	2013-01-18 18:54:21 +0000
+++ app/app.js	2013-01-21 15:11:21 +0000
@@ -325,6 +325,7 @@
       Y.log(evt, 'debug', 'App: Database changed');
 
       var self = this;
+      var active = this.get('activeView');
 
       // Compare endpoints map against db to see if it needs to be changed.
       var updateNeeded = this.db.services.some(function(service) {
@@ -346,7 +347,11 @@
       }
 
       // Redispatch to current view to update.
-      this.dispatch();
+      if (active && active.name === 'EnvironmentView') {
+        active.update();
+      } else {
+        this.dispatch();
+      }
     },
 
     /**

=== modified file 'app/models/models.js'
--- app/models/models.js	2012-11-20 16:55:43 +0000
+++ app/models/models.js	2013-01-21 15:11:21 +0000
@@ -32,7 +32,6 @@
           Y.each(data, function(value, key) {
             o[key] = value;
           });
-          // XXX Fire model changed event manually if we need it later?
         }
       }
     }

=== modified file 'app/store/notifications.js'
--- app/store/notifications.js	2012-11-16 08:25:02 +0000
+++ app/store/notifications.js	2013-01-21 15:11:21 +0000
@@ -146,7 +146,6 @@
          * Process new delta stream events and see if we need new notifications
          */
         generate_notices: function(delta_evt) {
-          console.log('Generating Notices', this, this.getAttrs());
           var self = this,
               rules = this.ingest_rules,
               app = this.get('app'),
@@ -161,18 +160,18 @@
                     model;
 
             /*
-                 * Data ingestion rules
-                 *  Create notifications for incoming deltas
-                 *  Promote some notifications to the 'show me' list
-                 *  Also:
-                 *  - for each change event see if there is an notice
-                 *   relating to that object in the model list
-                 *    -- see if the current change event invalidates the need
-                 *       to show the existing notices
-                 *    -- make the new notice as 'must see' or not (
-                 *       errors, etc)
-                 *  - add a notification for the event
-                 */
+             * Data ingestion rules
+             *  Create notifications for incoming deltas
+             *  Promote some notifications to the 'show me' list
+             *  Also:
+             *  - for each change event see if there is an notice
+             *   relating to that object in the model list
+             *    -- see if the current change event invalidates the need
+             *       to show the existing notices
+             *    -- make the new notice as 'must see' or not (
+             *       errors, etc)
+             *  - add a notification for the event
+             */
 
             // Dispatch ingestion rules (which may mutate either the
             // current 'notifications' or models within it (notice status)

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2013-01-15 09:27:53 +0000
+++ app/views/environment.js	2013-01-21 15:11:21 +0000
@@ -28,6 +28,27 @@
             preventable: false});
         },
 
+        /**
+         * Wrapper around topo.update. Rather than
+         * re-rendering a whole topology the view
+         * can require data updates when needed.
+         * Ideally even this shouldn't be needed
+         * as we can observe ModelList change events
+         * and debounce update calculations
+         * internally.
+         *
+         * @method update
+         * @chainable
+         **/
+        update: function() {
+          this.topo.update();
+          return this;
+        },
+
+        /**
+         * @method render
+         * @chainable
+         **/
         render: function() {
           var container = this.get('container'),
               topo = this.topo;

=== modified file 'app/views/topology/service.js'
--- app/views/topology/service.js	2013-01-18 21:31:45 +0000
+++ app/views/topology/service.js	2013-01-21 15:11:21 +0000
@@ -24,29 +24,11 @@
         },
 
         '.service-status': {
-          mouseover: {callback: function(d, self) {
-            d3.select(this)
-            .select('.unit-count')
-            .attr('class', 'unit-count show-count');
-          }},
-          mouseout: {callback: function(d, self) {
-            d3.select(this)
-            .select('.unit-count')
-            .attr('class', 'unit-count hide-count');
-          }}
+          mouseover: 'serviceStatusMouseOver',
+          mouseout: 'serviceStatusMouseOut'
         },
-        '.topology .crosshatch-background rect:first-child': {
-          /**
-           * If the user clicks on the background we cancel any active add
-           * relation.
-           */
-          click: {callback: function(d, self) {
-            var container = self.get('container'),
-                topo = self.get('component');
-            container.all('.environment-menu.active').removeClass('active');
-            self.service_click_actions.hideServiceMenu(null, self);
-            topo.fire('clearState');
-          }}
+        '.zoomPlane': {
+         click: 'zoomPlaneClick'
         },
         '.graph-list-picker .picker-button': {
           click: 'showGraphListPicker'
@@ -56,63 +38,16 @@
         },
         // Menu/Controls
         '.view-service': {
-          /** The user clicked on the "View" menu item. */
-          click: {callback: function(data, context) {
-            // Get the service element
-            var topo = context.get('component');
-            var box = topo.get('active_service');
-            var service = topo.serviceForBox(box);
-            context.service_click_actions
-              .hideServiceMenu(box, context);
-            context.service_click_actions
-              .show_service(service, context);
-          }}
+          click: 'viewServiceClick'
         },
         '.destroy-service': {
-          /** The user clicked on the "Destroy" menu item. */
-          click: {callback: function(data, context) {
-            // Get the service element
-            var topo = context.get('component');
-            var box = topo.get('active_service');
-            var service = topo.serviceForBox(box);
-            // The user is not allowed to destroy the Juju GUI service because
-            // it would break the application they are currently using.
-            if (utils.isGuiService(service)) {
-              return;
-            }
-            context.service_click_actions
-              .hideServiceMenu(box, context);
-            context.service_click_actions
-              .destroyServiceConfirm(service, context);
-          }}
+          click: 'destroyServiceClick'
         }
       },
       d3: {
         '.service': {
-          'mousedown.addrel': {callback: function(d, context) {
-            var evt = d3.event;
-            var topo = context.get('component');
-            context.longClickTimer = Y.later(750, this, function(d, e) {
-              // Provide some leeway for accidental dragging.
-              if ((Math.abs(d.x - d.oldX) + Math.abs(d.y - d.oldY)) /
-                  2 > 5) {
-                return;
-              }
-
-              // Sometimes mouseover is fired after the mousedown, so ensure
-              // we have the correct event in d3.event for d3.mouse().
-              d3.event = e;
-
-              // Start the process of adding a relation
-              topo.fire('addRelationDragStart', {service: d});
-            }, [d, evt], false);
-          }},
-          'mouseup.addrel': {callback: function(d, context) {
-            // Cancel the long-click timer if it exists.
-            if (context.longClickTimer) {
-              context.longClickTimer.cancel();
-            }
-          }}
+          'mousedown.addrel': 'serviceAddRelMouseDown',
+          'mouseup.addrel': 'serviceAddRelMouseUp'
         }
       },
       yui: {
@@ -120,6 +55,9 @@
         show: 'show',
         hide: 'hide',
         fade: 'fade',
+        dragstart: 'dragstart',
+        drag: 'drag',
+        dragend: 'dragend',
         hideServiceMenu: {callback: function() {
           this.service_click_actions.hideServiceMenu(null, this);
         }},
@@ -127,6 +65,10 @@
       }
     },
 
+    // Margins applied on update to Box instances.
+    subordinate_margins: {top: 0.05, bottom: 0.1, left: 0.084848, right: 0.084848},
+    service_margins: {top: 0, bottom: 0.1667, left: 0.086758, right: 0.086758},
+
     initializer: function(options) {
       ServiceModule.superclass.constructor.apply(this, arguments);
 
@@ -210,6 +152,82 @@
       topo.fire('mouseMove');
     },
 
+    /**
+     * Handle mouseover service status
+     **/
+    serviceStatusMouseOver: function(d, context) {
+      d3.select(this)
+        .select('.unit-count')
+        .attr('class', 'unit-count show-count');
+    },
+
+    serviceStatusMouseOut: function(d, context) {
+      d3.select(this)
+        .select('.unit-count')
+        .attr('class', 'unit-count hide-count');
+    },
+
+    /**
+     * If the user clicks on the background we cancel any active add
+     * relation.
+     */
+    zoomPlaneClick: function(d, self) {
+      var container = self.get('container'),
+          topo = self.get('component');
+      container.all('.environment-menu.active').removeClass('active');
+      self.service_click_actions.toggleControlPanel(null, self);
+      topo.fire('clearState');
+    },
+
+    /** The user clicked on the "View" menu item. */
+    viewServiceClick: function(d, context) {
+      // Get the service element
+      var topo = context.get('component');
+      var box = topo.get('active_service');
+      var service = topo.serviceForBox(box);
+      context.service_click_actions
+             .toggleControlPanel(box, context);
+      context.service_click_actions
+             .show_service(service, context);
+    },
+
+    /** The user clicked on the "Destroy" menu item. */
+    destroyServiceClick: function(data, context) {
+      // Get the service element
+      var topo = context.get('component');
+      var box = topo.get('active_service');
+      var service = topo.serviceForBox(box);
+      context.service_click_actions
+             .toggleControlPanel(box, context);
+      context.service_click_actions
+             .destroyServiceConfirm(service, context);
+    },
+
+    serviceAddRelMouseDown: function(d, context) {
+      var evt = d3.event;
+      var topo = context.get('component');
+      context.longClickTimer = Y.later(750, this, function(d, e) {
+        // Provide some leeway for accidental dragging.
+        if ((Math.abs(d.x - d.oldX) + Math.abs(d.y - d.oldY)) /
+            2 > 5) {
+          return;
+        }
+
+        // Sometimes mouseover is fired after the mousedown, so ensure
+        // we have the correct event in d3.event for d3.mouse().
+        d3.event = e;
+
+        // Start the process of adding a relation
+        topo.fire('addRelationDragStart', {service: d});
+      }, [d, evt], false);
+    },
+
+    serviceAddRelMouseUp: function(d, context) {
+      // Cancel the long-click timer if it exists.
+      if (context.longClickTimer) {
+        context.longClickTimer.cancel();
+      }
+    },
     /*
      * Sync view models with current db.models.
      */
@@ -224,46 +242,122 @@
 
       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 ?
-                {
-                  top: 0.05,
-                  bottom: 0.1,
-                  left: 0.084848,
-                  right: 0.084848} :
-                {
-                  top: 0,
-                  bottom: 0.1667,
-                  left: 0.086758,
-                  right: 0.086758});
+                        this.subordinate_margins :
+                        this.service_margins);
         this.service_boxes[service.id] = service;
       }, this);
+
+      // 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(services, function(d) {
+                       return d.modelId();});
     },
 
     /**
-     * Handle dragend events for a service.
+     * Handle drag events for a service.
      *
      * @param {object} svc A service object.
      * @param {object} i Unused.
      * @return {undefined} Side effects only.
      */
-    _dragend: function(d, i) {
-      var topo = this.get('component');
+    dragstart: function(d, self) {
+      var topo = self.get('component');
+      d.oldX = d.x;
+      d.oldY = d.y;
+      self.get('container').all('.environment-menu.active')
+          .removeClass('active');
+      self.service_click_actions.hideServiceMenu(null, self);
+      console.log('dragstart');
+    },
+
+    dragend: function(d,  self) {
+      var topo = self.get('component');
       if (topo.buildingRelation) {
         topo.fire('addRelationDragEnd');
       }
-      // Do not update annotations if the GUI is in read-only mode.
-      else if (!topo.get('env').get('readOnly')) {
-        topo.get('env').update_annotations(d.id, {'gui.x': d.x, 'gui.y': d.y});
-      }
+      else {
+        topo.get('env').update_annotations(
+            d.id, {'gui.x': d.x, 'gui.y': d.y},
+        function() {
+          // Force a reposition at the end.
+          d.inDrag = false;
+          //self.drag.call(self.getServiceNode(d.id),
+          //               d, self, {x:d.x, y: d.y}, false);
+        });
+      }
+      console.log('dragend');
+    },
+
+    /**
+     * Specialized drag event handler
+     * when called as an event handler it
+     * Allows optional extra param, pos
+     * which when used overrides the mouse
+     * handling. This method can then be
+     * though of as 'drag to position'.
+     *
+     * @method drag
+     * @param {Box} d viewModel BoundingBox.
+     * @param {ServiceModule} self ServiceModule.
+     * @param {Object} pos (optional) containing x/y numbers.
+     * @param {Boolean} includeTransition (optional) Use transition to drag.
+     *
+     * [At the time of this writing useTransition works in practice but
+     * introduces a timing issue in the tests.]
+     **/
+    drag: function(d, self, pos, includeTransition) {
+      var topo = self.get('component');
+      var selection = d3.select(this);
+
+      if (topo.buildingRelation) {
+        topo.fire('addRelationDrag', { box: d });
+        return;
+      }
+      if (self.longClickTimer) {
+        self.longClickTimer.cancel();
+      }
+      // Translate the service (and, potentially, menu).
+      if (pos) {
+        d.x = pos.x;
+        d.y = pos.y;
+        // Explicitly reassign data.
+        selection = selection.data([d]);
+      } else {
+        d.x += d3.event.dx;
+        d.y += d3.event.dy;
+      }
+
+      if (includeTransition) {
+        selection = selection.transition()
+                             .duration(500)
+                             .ease('elastic');
+      }
+
+      selection.attr('transform', function(d, i) {
+        return d.translateStr();
+      });
+      if (topo.get('active_service') === d) {
+        self.updateServiceMenuLocation();
+      }
+
+      // Clear any state while dragging.
+      self.get('container').all('.environment-menu.active')
+          .removeClass('active');
+      topo.fire('cancelRelationBuild');
+      // Update relation lines for just this service.
+      topo.fire('serviceMoved', { service: d });
+      console.log('drag');
     },
 
     /*
@@ -291,46 +385,16 @@
                       .padding(300);
       }
 
+      if (!this.dragBehavior) {
+        this.dragBehavior = d3.behavior.drag()
+            .on('dragstart', function(d) { self.dragstart.call(this, d, self);})
+            .on('drag', function(d) { self.drag.call(this, d, self);})
+            .on('dragend', function(d) { self.dragend.call(this, d, self);});
+      }
+
       //Process any changed data.
       this.updateData();
 
-      var drag = d3.behavior.drag()
-            .on('dragstart', function(d) {
-                d.oldX = d.x;
-                d.oldY = d.y;
-                self.get('container').all('.environment-menu.active')
-                  .removeClass('active');
-                self.service_click_actions.hideServiceMenu(null, self);
-              })
-            .on('drag', function(d, i) {
-                if (topo.buildingRelation) {
-                  topo.fire('addRelationDrag', { box: d });
-                } else {
-                  if (self.longClickTimer) {
-                    self.longClickTimer.cancel();
-                  }
-
-                  // Translate the service (and, potentially, menu).
-                  d.x += d3.event.dx;
-                  d.y += d3.event.dy;
-                  d3.select(this).attr('transform', function(d, i) {
-                    return d.translateStr();
-                  });
-                  if (topo.get('active_service') === d) {
-                    self.updateServiceMenuLocation();
-                  }
-
-                  // Clear any state while dragging.
-                  self.get('container').all('.environment-menu.active')
-                    .removeClass('active');
-                  topo.fire('cancelRelationBuild');
-
-                  // Update relation lines for just this service.
-                  topo.fire('serviceMoved', { service: d });
-                }
-              })
-            .on('dragend', Y.bind(this._dragend, this));
-
       // Generate a node for each service, draw it as a rect with
       // labels for service and charm.
       var node = this.node;
@@ -344,32 +408,49 @@
       var new_services = this.services.filter(function(boundingBox) {
         return !Y.Lang.isNumber(boundingBox.x);
       });
-      this.tree.nodes({children: new_services});
-
+      if (new_services) {
+        this.tree.nodes({children: new_services});
+      }
       // enter
       node
         .enter().append('g')
         .attr('class', function(d) {
             return (d.subordinate ? 'subordinate ' : '') + 'service';
           })
-        .call(drag)
+        .call(this.dragBehavior)
         .attr('transform', function(d) {
             return d.translateStr();
           })
-        .call(function() {
-            // Create new nodes.
-            self.createServiceNode(this);
-          });
+        .call(self.createServiceNode);
 
       // Update all nodes.
       self.updateServiceNodes(node);
 
       // Remove old nodes.
       node.exit()
+          .each(function(d) {
+            delete self.service_boxes[d.id];
+          })
           .remove();
     },
 
     /**
+     * Get a d3 selected node for a given service by id.
+     *
+     * @method getServiceNode
+     * @return  {d3.selection} selection || null.
+     **/
+    getServiceNode: function(id) {
+      if (this.node === undefined) {
+        return null;
+      }
+      var node = this.node.filter(function(d, i) {
+        return d.id === id;
+      });
+      return node && node[0][0] || null;
+    },
+
+    /**
      * @method createServiceNode fills a service node with empty structures
      *                           that will be filled out in the update stage.
      * @param {object} node the node to construct.
@@ -415,6 +496,30 @@
           service_scale_width = this.service_scale_width,
           service_scale_height = this.service_scale_height;
 
+      // Apply Position Annotations
+      // This is done after the services_boxes
+      // binding as the event handler will
+      // use that index.
+      node.each(function(d) {
+        var service = topo.serviceForBox(d),
+            annotations = service.get('annotations'),
+            x, y;
+
+        if (!annotations) {return;}
+        x = annotations['gui.x'],
+        y = annotations['gui.y'];
+        if (!d ||
+            (x !== undefined && x !== d.x) &&
+            (y !== undefined && y !== d.y)) {
+          // Delete gui.x and gui.y from annotations
+          // as we use the values.
+          delete annotations['gui.x'];
+          delete annotations['gui.y'];
+          if (!d.inDrag) {
+            self.drag.call(this, d, self, {x: x, y: y});
+          }
+        }});
+
       // Size the node for drawing.
       node.attr('width', function(d) {
         // NB: if a service has zero units, as is possible with
@@ -659,8 +764,6 @@
     renderedHandler: function() {
       var container = this.get('container');
 
-      this.update();
-
       // Ensure relation labels are sized properly.
       container.all('.rel-label').each(function(label) {
         var width = label.one('text').getClientRect().width + 10;
@@ -769,13 +872,13 @@
        *
        * @method showServiceMenu
        * @param {object} box The presentation state for the service.
-       * @param {object} view The environment view.
+       * @param {object} module The service module..
        * @param {object} context The service context.
        * @return {undefined} Side effects only.
        */
-      showServiceMenu: function(box, view, context) {
-        var svc_menu = view.get('container').one('#service-menu');
-        var topo = view.get('component');
+      showServiceMenu: function(box, module, context) {
+        var svc_menu = module.get('container').one('#service-menu');
+        var topo = module.get('component');
         var service = topo.serviceForBox(box);
 
         if (box && !svc_menu.hasClass('active')) {
@@ -786,7 +889,7 @@
           if (utils.isGuiService(service)) {
             svc_menu.one('.destroy-service').addClass('disabled');
           }
-          view.updateServiceMenuLocation();
+          module.updateServiceMenuLocation();
         }
       },
 
@@ -795,13 +898,13 @@
        *
        * @method hideServiceMenu
        * @param {object} box The presentation state for the service (unused).
-       * @param {object} view The environment view.
+       * @param {object} module The service module.
        * @param {object} context The service context (unused).
        * @return {undefined} Side effects only.
        */
-      hideServiceMenu: function(box, view, context) {
-        var svc_menu = view.get('container').one('#service-menu');
-        var topo = view.get('component');
+      hideServiceMenu: function(box, module, context) {
+        var svc_menu = module.get('container').one('#service-menu');
+        var topo = module.get('component');
 
         if (svc_menu.hasClass('active')) {
           svc_menu.removeClass('active');

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2013-01-18 10:15:33 +0000
+++ test/test_environment_view.js	2013-01-21 15:11:21 +0000
@@ -11,7 +11,8 @@
         ['service', 'add', {
           'charm': 'cs:precise/wordpress-6',
           'id': 'wordpress',
-          'exposed': false
+          'exposed': false,
+          'annotations': {'gui.x': 100, 'gui.y': 200}
         }],
         ['service', 'add', {
           'charm': 'cs:precise/mediawiki-3',
@@ -92,7 +93,6 @@
         env = new juju.Environment({conn: conn});
         env.connect();
         conn.open();
-        env.dispatch_result(environment_delta);
         done();
       });
     });
@@ -102,12 +102,14 @@
       done();
     });
 
-    beforeEach(function(done) {
+    beforeEach(function() {
       container = Y.Node.create('<div />').setStyle('visibility', 'hidden');
       Y.one('body').prepend(container);
       db = new models.Database();
-      db.on_delta({data: environment_delta});
-      done();
+      // Use a clone to avoid any mutation
+      // to the input set (as happens with processed
+      // annotations, its a direct reference).
+      db.on_delta({data: Y.clone(environment_delta)});
     });
 
     afterEach(function(done) {
@@ -396,6 +398,43 @@
       });
     });
 
+    it('must be able to use position annotations',
+       function() {
+         var view = new views.environment({
+           container: container,
+           db: db,
+           env: env
+         });
+         var tmp_data = {
+           op: 'delta',
+           result: [
+             ['service', 'add',
+               {
+                 'subordinate': true,
+                 'charm': 'cs:precise/wordpress-6',
+                 'id': 'wordpress',
+                 'annotations': {'gui.x': 374.1, 'gui.y': 211.2}
+               }]]};
+         var properTransform = /translate\((\d+\.?\d*),(\d+\.?\d*)\)/;
+         var node, match;
+
+         view.render();
+
+         // Test values from initial load.
+         node = view.topo.modules.ServiceModule.getServiceNode('wordpress');
+         match = node.getAttribute('transform').match(properTransform);
+         match[1].should.eql('100');
+         match[2].should.eql('200');
+
+         db.on_delta({ data: tmp_data });
+         view.update();
+
+         //On annotation change  position should be updated.
+         match = node.getAttribute('transform').match(properTransform);
+         match[1].should.eql('374.1');
+         match[2].should.eql('211.2');
+       });
+
     it('must be able to render subordinate relation indicators',
        function() {
          var view = new views.environment({

=== modified file 'test/test_service_module.js'
--- test/test_service_module.js	2013-01-18 18:42:37 +0000
+++ test/test_service_module.js	2013-01-21 15:11:21 +0000
@@ -56,7 +56,7 @@
            { id: 'wordpress',
              x: 100.1,
              y: 200.2};
-       serviceModule._dragend(d, 0);
+       serviceModule.dragend(d, serviceModule);
        assert.isTrue(called);
        location['gui.x'].should.equal(100.1);
        location['gui.y'].should.equal(200.2);
@@ -70,7 +70,7 @@
              y: 200.2};
        var topo = serviceModule.get('component');
        topo.buildingRelation = true;
-       serviceModule._dragend(d, 0);
+       serviceModule.dragend(d, serviceModule);
        assert.isFalse(called);
        location['gui.x'].should.equal(0);
        location['gui.y'].should.equal(0);

=== modified file 'test/test_topology.js'
--- test/test_topology.js	2013-01-21 13:43:21 +0000
+++ test/test_topology.js	2013-01-21 15:11:21 +0000
@@ -113,10 +113,13 @@
         if (name === 'component') {
           return fauxTopo;
         }
+      },
+      service_click_actions: {
+        toggleControlPanel: function() {},
+        destroyServiceConfirm: function() {}
       }
     };
-    topo.events.ServiceModule.scene['.destroy-service'].click.callback(
-        undefined, context);
+    topo.modules.ServiceModule.destroyServiceClick(undefined, context);
   });
 });
 
@@ -153,9 +156,18 @@
         if (name === 'container') {
           return {one: function() { return menu; }};
         } else if (name === 'component') {
+<<<<<<< TREE
           return { set: function() {},
                    serviceForBox: function(box) { return service;}
                  };
+=======
+          return {
+            set: function() {},
+            serviceForBox: function() {
+              return service;
+            }
+          };
+>>>>>>> MERGE-SOURCE
         }
       },
       updateServiceMenuLocation: function() {}

=== modified file 'undocumented'
--- undocumented	2013-01-18 18:42:37 +0000
+++ undocumented	2013-01-21 15:11:21 +0000
@@ -1,18 +1,18 @@
-app/app.js:599 "callback"
 app/app.js:100 "callback"
-app/store/env.js:223 "status"
-app/store/env.js:175 "get_service"
-app/store/env.js:69 "on_open"
-app/store/env.js:27 "initializer"
-app/store/env.js:78 "on_message"
-app/store/env.js:73 "on_close"
-app/store/env.js:171 "get_charm"
-app/store/env.js:45 "destructor"
-app/store/env.js:111 "dispatch_result"
-app/store/env.js:117 "_dispatch_event"
-app/store/env.js:126 "_dispatch_rpc_result"
-app/store/env.js:268 "get_endpoints"
-app/store/env.js:50 "connect"
+app/app.js:648 "callback"
+app/store/env.js:31 "initializer"
+app/store/env.js:239 "get_service"
+app/store/env.js:55 "connect"
+app/store/env.js:83 "on_message"
+app/store/env.js:74 "on_open"
+app/store/env.js:235 "get_charm"
+app/store/env.js:78 "on_close"
+app/store/env.js:116 "dispatch_result"
+app/store/env.js:415 "get_endpoints"
+app/store/env.js:320 "status"
+app/store/env.js:131 "_dispatch_rpc_result"
+app/store/env.js:50 "destructor"
+app/store/env.js:122 "_dispatch_event"
 app/store/charm.js:66 "_normalizeCharms"
 app/store/charm.js:24 "find"
 app/store/charm.js:11 "success"
@@ -27,38 +27,39 @@
 app/store/notifications.js:25 "message"
 app/store/notifications.js:129 "title"
 app/store/notifications.js:137 "message"
-app/views/utils.js:370 "_addAlertMessage"
-app/views/utils.js:825 "BoxPair"
-app/views/utils.js:702 "scale"
-app/views/utils.js:227 "humanizeNumber"
-app/views/utils.js:137 "console"
-app/views/utils.js:828 "pair"
+app/views/utils.js:166 "substitute"
+app/views/utils.js:251 "hasSVGClass"
+app/views/utils.js:296 "toggleSVGClass"
+app/views/utils.js:616 "BoundingBox"
+app/views/utils.js:135 "noop"
+app/views/utils.js:259 "addSVGClass"
+app/views/utils.js:642 "get"
+app/views/utils.js:138 "console"
+app/views/utils.js:703 "scale"
+app/views/utils.js:704 "translate"
+app/views/utils.js:218 "renderable_charm"
+app/views/utils.js:826 "BoxPair"
 app/views/utils.js:113 "noop"
-app/views/utils.js:617 "Box"
-app/views/utils.js:250 "hasSVGClass"
-app/views/utils.js:338 "action"
-app/views/utils.js:134 "noop"
-app/views/utils.js:658 "get"
-app/views/utils.js:217 "renderable_charm"
-app/views/utils.js:651 "set"
-app/views/utils.js:641 "get"
-app/views/utils.js:566 "isInt"
-app/views/utils.js:615 "BoundingBox"
-app/views/utils.js:570 "isFloat"
-app/views/utils.js:650 "get"
-app/views/utils.js:703 "translate"
-app/views/utils.js:418 "invokeCallback"
-app/views/utils.js:559 "toString"
-app/views/utils.js:295 "toggleSVGClass"
-app/views/utils.js:258 "addSVGClass"
-app/views/utils.js:659 "set"
-app/views/utils.js:279 "removeSVGClass"
-app/views/utils.js:194 "bindModelView"
-app/views/utils.js:165 "substitute"
-app/views/utils.js:644 "set"
-app/views/utils.js:131 "native"
+app/views/utils.js:280 "removeSVGClass"
+app/views/utils.js:371 "_addAlertMessage"
+app/views/utils.js:829 "pair"
+app/views/utils.js:228 "humanizeNumber"
+app/views/utils.js:339 "action"
+app/views/utils.js:567 "isInt"
+app/views/utils.js:195 "bindModelView"
+app/views/utils.js:618 "Box"
+app/views/utils.js:651 "get"
+app/views/utils.js:560 "toString"
+app/views/utils.js:645 "set"
+app/views/utils.js:419 "invokeCallback"
+app/views/utils.js:571 "isFloat"
+app/views/utils.js:132 "native"
+app/views/utils.js:652 "set"
+app/views/utils.js:660 "set"
+app/views/utils.js:659 "get"
 app/views/environment.js:24 "initializer"
-app/views/environment.js:31 "render"
+app/views/environment.js:31 "update"
+app/views/environment.js:36 "render"
 app/views/charm-panel.js:1168 "calculatePanelPosition"
 app/views/charm-panel.js:476 "initializer"
 app/views/charm-panel.js:250 "render"
@@ -111,126 +112,130 @@
 app/views/unit.js:297 "retryRelation"
 app/views/unit.js:118 "confirmResolved"
 app/views/unit.js:23 "initializer"
-app/views/service.js:488 "updateConstraints"
-app/views/service.js:514 "_setConstraintsCallback"
-app/views/service.js:846 "filterUnits"
+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:547 "render"
-app/views/service.js:372 "render"
-app/views/service.js:451 "_removeRelationCallback"
+app/views/service.js:740 "saveConfig"
 app/views/service.js:191 "_destroyCallback"
-app/views/service.js:338 "fitToWindow"
 app/views/service.js:116 "_removeUnitCallback"
-app/views/service.js:737 "_setConfigCallback"
-app/views/service.js:402 "confirmRemoved"
 app/views/service.js:264 "_exposeServiceCallback"
-app/views/service.js:667 "showErrors"
 app/views/service.js:257 "exposeService"
-app/views/service.js:800 "render"
+app/views/service.js:888 "filterUnits"
+app/views/service.js:770 "_setConfigCallback"
 app/views/service.js:52 "_modifyUnits"
-app/views/service.js:707 "saveConfig"
-app/views/service.js:608 "render"
+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:615 "render"
 app/views/service.js:30 "modifyUnits"
-app/views/service.js:424 "doRemoveRelation"
 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: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/topology/panzoom.js:94 "zoom_out"
+app/views/service.js:467 "_removeRelationCallback"
+app/views/topology/panzoom.js:151 "rescale"
 app/views/topology/panzoom.js:77 "zoomHandler"
 app/views/topology/panzoom.js:47 "renderSlider"
-app/views/topology/panzoom.js:112 "_fire_zoom"
-app/views/topology/panzoom.js:165 "renderedHandler"
-app/views/topology/panzoom.js:103 "zoom_in"
-app/views/topology/panzoom.js:140 "rescale"
+app/views/topology/panzoom.js:114 "zoom_in"
+app/views/topology/panzoom.js:176 "renderedHandler"
+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:78 "processRelation"
-app/views/topology/relation.js:403 "_removeRelationCallback"
-app/views/topology/relation.js:325 "addRelationDragStart"
-app/views/topology/relation.js:460 "cancelRelationBuild"
-app/views/topology/relation.js:391 "removeRelation"
-app/views/topology/relation.js:309 "snapOutOfService"
-app/views/topology/relation.js:724 "subRelBlockMouseEnter"
-app/views/topology/relation.js:632 "addRelationEnd"
-app/views/topology/relation.js:350 "addRelationDrag"
-app/views/topology/relation.js:280 "snapToService"
-app/views/topology/relation.js:251 "draglineClicked"
-app/views/topology/relation.js:158 "drawRelationGroup"
-app/views/topology/relation.js:112 "updateLinks"
-app/views/topology/relation.js:428 "removeRelationConfirm"
-app/views/topology/relation.js:236 "updateSubordinateRelationsCount"
-app/views/topology/relation.js:55 "render"
-app/views/topology/relation.js:270 "addRelation"
-app/views/topology/relation.js:257 "addRelButtonClicked"
-app/views/topology/relation.js:781 "relationClick"
-app/views/topology/relation.js:673 "_addRelationCallback"
-app/views/topology/relation.js:717 "subordinateRelationsForService"
-app/views/topology/relation.js:372 "addRelationDragEnd"
-app/views/topology/relation.js:90 "processRelations"
-app/views/topology/relation.js:50 "initializer"
-app/views/topology/relation.js:536 "addRelationStart"
-app/views/topology/relation.js:733 "subRelBlockMouseLeave"
-app/views/topology/relation.js:60 "update"
-app/views/topology/relation.js:221 "drawRelation"
-app/views/topology/relation.js:74 "renderedHandler"
-app/views/topology/relation.js:548 "ambiguousAddRelationCheck"
-app/views/topology/service.js:635 "renderedHandler"
-app/views/topology/service.js:181 "serviceMouseLeave"
-app/views/topology/service.js:604 "show"
-app/views/topology/service.js:219 "updateData"
-app/views/topology/service.js:668 "showGraphListPicker"
-app/views/topology/service.js:610 "hide"
-app/views/topology/service.js:747 "show_service"
-app/views/topology/service.js:616 "fade"
-app/views/topology/service.js:128 "initializer"
-app/views/topology/service.js:156 "serviceDblClick"
-app/views/topology/service.js:138 "serviceClick"
-app/views/topology/service.js:258 "update"
-app/views/topology/service.js:163 "serviceMouseEnter"
-app/views/topology/service.js:779 "destroyService"
-app/views/topology/service.js:678 "hideGraphListPicker"
-app/views/topology/service.js:788 "_destroyCallback"
-app/views/topology/service.js:756 "destroyServiceConfirm"
-app/views/topology/service.js:685 "updateServiceMenuLocation"
-app/views/topology/topology.js:137 "serviceForBox"
-app/views/topology/topology.js:175 "setter"
-app/views/topology/topology.js:174 "getter"
-app/views/topology/topology.js:107 "computeScales"
-app/views/topology/topology.js:157 "getter"
+app/views/topology/relation.js:269 "addRelButtonClicked"
+app/views/topology/relation.js:101 "processRelations"
+app/views/topology/relation.js:362 "snapOutOfService"
+app/views/topology/relation.js:456 "_removeRelationCallback"
+app/views/topology/relation.js:513 "cancelRelationBuild"
+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:378 "addRelationDragStart"
+app/views/topology/relation.js:834 "relationClick"
+app/views/topology/relation.js:85 "renderedHandler"
+app/views/topology/relation.js:601 "ambiguousAddRelationCheck"
+app/views/topology/relation.js:481 "removeRelationConfirm"
+app/views/topology/relation.js:60 "render"
+app/views/topology/relation.js:770 "subordinateRelationsForService"
+app/views/topology/relation.js:403 "addRelationDrag"
+app/views/topology/relation.js:425 "addRelationDragEnd"
+app/views/topology/relation.js:89 "processRelation"
+app/views/topology/relation.js:232 "drawRelation"
+app/views/topology/relation.js:685 "addRelationEnd"
+app/views/topology/relation.js:290 "addRelation"
+app/views/topology/relation.js:726 "_addRelationCallback"
+app/views/topology/relation.js:589 "addRelationStart"
+app/views/topology/relation.js:786 "subRelBlockMouseLeave"
+app/views/topology/relation.js:444 "removeRelation"
+app/views/topology/relation.js:333 "snapToService"
+app/views/topology/relation.js:65 "update"
+app/views/topology/relation.js:777 "subRelBlockMouseEnter"
+app/views/topology/service.js:727 "show"
+app/views/topology/service.js:799 "hideGraphListPicker"
+app/views/topology/service.js:72 "initializer"
+app/views/topology/service.js:288 "dragend"
+app/views/topology/service.js:789 "showGraphListPicker"
+app/views/topology/service.js:947 "destroyService"
+app/views/topology/service.js:206 "serviceAddRelMouseDown"
+app/views/topology/service.js:110 "serviceMouseEnter"
+app/views/topology/service.js:225 "serviceAddRelMouseUp"
+app/views/topology/service.js:164 "serviceStatusMouseOut"
+app/views/topology/service.js:739 "fade"
+app/views/topology/service.js:234 "updateData"
+app/views/topology/service.js:82 "serviceClick"
+app/views/topology/service.js:733 "hide"
+app/views/topology/service.js:758 "renderedHandler"
+app/views/topology/service.js:915 "show_service"
+app/views/topology/service.js:924 "destroyServiceConfirm"
+app/views/topology/service.js:364 "update"
+app/views/topology/service.js:128 "serviceMouseLeave"
+app/views/topology/service.js:956 "_destroyCallback"
+app/views/topology/service.js:100 "serviceDblClick"
+app/views/topology/service.js:806 "updateServiceMenuLocation"
+app/views/topology/topology.js:163 "getter"
+app/views/topology/topology.js:172 "setter"
+app/views/topology/topology.js:159 "getter"
+app/views/topology/topology.js:109 "computeScales"
+app/views/topology/topology.js:176 "getter"
+app/views/topology/topology.js:171 "getter"
+app/views/topology/topology.js:139 "serviceForBox"
+app/views/topology/topology.js:177 "setter"
+app/views/topology/topology.js:26 "initializer"
 app/views/topology/topology.js:63 "renderOnce"
-app/views/topology/topology.js:26 "initializer"
-app/views/topology/topology.js:161 "getter"
-app/views/topology/topology.js:169 "getter"
-app/views/topology/topology.js:170 "setter"
-app/views/topology/viewport.js:43 "resized"
-app/models/models.js:305 "setter"
-app/models/models.js:430 "getModelListByModelName"
-app/models/models.js:325 "add"
-app/models/models.js:171 "update_service_unit_aggregates"
-app/models/models.js:358 "getNotificationsForModel"
-app/models/models.js:69 "process_delta"
-app/models/models.js:456 "on_delta"
-app/models/models.js:421 "getModelById"
-app/models/models.js:149 "get_informative_states_for_service"
-app/models/models.js:204 "process_delta"
-app/models/models.js:339 "trim"
-app/models/models.js:385 "initializer"
-app/models/models.js:437 "getModelFromChange"
-app/models/models.js:273 "get_relations_for_service"
-app/models/models.js:330 "comparator"
-app/models/models.js:120 "add"
-app/models/models.js:112 "_setDefaultsAndCalculatedValues"
-app/models/models.js:297 "valueFn"
-app/models/models.js:446 "reset"
-app/models/models.js:130 "get_units_for_service"
-app/models/models.js:108 "process_delta"
-app/models/models.js:345 "removeOldest"
-app/models/models.js:240 "has_relation_for_endpoint"
-app/models/models.js:231 "process_delta"
+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"
+app/models/models.js:68 "process_delta"
+app/models/models.js:445 "reset"
+app/models/models.js:304 "setter"
+app/models/models.js:119 "add"
+app/models/models.js:384 "initializer"
+app/models/models.js:344 "removeOldest"
+app/models/models.js:455 "on_delta"
+app/models/models.js:272 "get_relations_for_service"
+app/models/models.js:436 "getModelFromChange"
+app/models/models.js:107 "process_delta"
+app/models/models.js:148 "get_informative_states_for_service"
+app/models/models.js:170 "update_service_unit_aggregates"
+app/models/models.js:230 "process_delta"
+app/models/models.js:129 "get_units_for_service"
+app/models/models.js:296 "valueFn"
+app/models/models.js:111 "_setDefaultsAndCalculatedValues"
+app/models/models.js:329 "comparator"
+app/models/models.js:203 "process_delta"
+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:43 "add"
 app/models/endpoints.js:32 "convert"
 app/models/charm.js:155 "validator"