Focusing on Services

At the heart of the Juju GUI environment view are the service blocks, which provide you with a quick overview at a glance of both how your environment is structured and how well things are going.  There has been some work done recently and more to come to help bring these more into focus and show the information needed to the user.

Automatic service placement

Prior to the ability to store a service’s position on the canvas in Juju, services were placed with a circle-packing algorithm which attempted to space them out appropriately.  This worked well for small environments but crowded larger environments together, and wound up being less than ideal.  Storing the positions helped alleviate this in some cases: one could drag services to where they made sense and have them stay there.  This doesn’t cover a read-only scenario, however, and so we’ve helped alleviate this problem by removing scaling from the pack layout, which caused larger environments to become cluttered. This allows all services to be positioned a good distance from each other, no matter the number of them on the canvas.

Additionally, some work has been done around adding new services.  When a service was created before, it was run through the pack layout algorithm.  However, with just one service being placed, the algorithm always placed it in the center of the canvas.  Adding multiple services would result in them being stacked one on top of the other.  To solve this, new services are no longer run through the pack layout, but instead through an outside algorithm.  This means that, when adding a new service, the GUI will find the smallest polygon that can be drawn around all of the existing services (called the convex hull) and place the new service outside of that polygon.  This way, creating new services never places one service on top of another.


A problem we ran into in some instances has to do with centering the services in the viewport.  SVGs are a coordinate plane: services are positioned absolutely with x and coordinates.  When the GUI first opens, it starts with the coordinates (0, 0) in the upper left hand corner of the viewport.  However, this means that if the services have been dragged outside of the viewport’s area on starting, the canvas will appear empty.  We used the convex hull algorithm again to help us out with this problem.  Once we have the polygon which contains all services, we can find its center of mass (called a centroid) and place that point at the center of the canvas.  All services will surround this point.

This runs by default when the GUI starts up, so that the environment view is centered.  However, the GUI also centers the canvas when a new service is created.  Instead of passing all of the services, though, just the new one is passed to the centering code, which centers the newly created service in the viewport.  If you ever pan away from your services by accident, you can re-center them by hitting ‘)’ (Shift+0).

We’re continually working to improve the environment view to make it more readable and usable, finding the right balance of information to expose up front without providing an arcane or confusing graph.  Focusing on the services which make up the environment is a big part of that, and we’re working to make that the best experience possible.