From 0ff54067a1ade066b4204f99d0af69fa2971ccd0 Mon Sep 17 00:00:00 2001
From: AlexDM0 <alexdemulder@gmail.com>
Date: Wed, 22 Jan 2014 14:09:49 +0100
Subject: [PATCH] created UI sector, starting to rework selection (generalize
 it over nodes and edges), edge implementation later.

---
 dist/vis.js                          | 597 +++++++++++++++++----------
 examples/graph/img/UI/downarrow.png  | Bin 0 -> 3930 bytes
 examples/graph/img/UI/leftarrow.png  | Bin 0 -> 3936 bytes
 examples/graph/img/UI/minus.png      | Bin 0 -> 3739 bytes
 examples/graph/img/UI/plus.png       | Bin 0 -> 3970 bytes
 examples/graph/img/UI/rightarrow.png | Bin 0 -> 3988 bytes
 examples/graph/img/UI/uparrow.png    | Bin 0 -> 3922 bytes
 src/graph/Graph.js                   | 475 ++++++++++++---------
 src/graph/Node.js                    |  51 ++-
 src/graph/SectorsMixin.js            |  72 +++-
 src/graph/SelectionMixin.js          |  27 ++
 11 files changed, 773 insertions(+), 449 deletions(-)
 create mode 100644 examples/graph/img/UI/downarrow.png
 create mode 100644 examples/graph/img/UI/leftarrow.png
 create mode 100644 examples/graph/img/UI/minus.png
 create mode 100644 examples/graph/img/UI/plus.png
 create mode 100644 examples/graph/img/UI/rightarrow.png
 create mode 100644 examples/graph/img/UI/uparrow.png
 create mode 100644 src/graph/SelectionMixin.js

diff --git a/dist/vis.js b/dist/vis.js
index ad623cdd..e946d96b 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -8784,6 +8784,8 @@ function Node(properties, imagelist, grouplist, constants) {
   this.y = 0;
   this.xFixed = false;
   this.yFixed = false;
+  this.horizontalAlignLeft = true; // these are for the UI
+  this.verticalAlignTop    = true; // these are for the UI
   this.radius = constants.nodes.radius;
   this.baseRadiusValue = constants.nodes.radius;
   this.radiusFixed = false;
@@ -8888,6 +8890,10 @@ Node.prototype.setProperties = function(properties, constants) {
   if (properties.y !== undefined)         {this.y = properties.y;}
   if (properties.value !== undefined)     {this.value = properties.value;}
 
+  // UI properties
+  if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+  if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+
   if (this.id === undefined) {
     throw "Node must have an id";
   }
@@ -9224,6 +9230,7 @@ Node.prototype.isOverlappingWith = function(obj) {
 
 Node.prototype._resizeImage = function (ctx) {
   // TODO: pre calculate the image size
+
   if (!this.width || !this.height) {  // undefined or 0
     var width, height;
     if (this.value) {
@@ -9246,9 +9253,9 @@ Node.prototype._resizeImage = function (ctx) {
     this.height = height;
 
     if (this.width && this.height) {
-      this.width += this.clusterSize * this.clusterSizeWidthFactor;
-      this.height += this.clusterSize * this.clusterSizeHeightFactor;
-      this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+      this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+      this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+      this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
     }
   }
 
@@ -9271,6 +9278,8 @@ Node.prototype._drawImage = function (ctx) {
       ctx.globalAlpha = 0.5;
       ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
     }
+
+    // draw the image
     ctx.globalAlpha = 1.0;
     ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
     yLabel = this.y + this.height / 2;
@@ -9291,9 +9300,9 @@ Node.prototype._resizeBox = function (ctx) {
     this.width = textSize.width + 2 * margin;
     this.height = textSize.height + 2 * margin;
 
-    this.width += this.clusterSize * 0.5 * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * 0.5 * this.clusterSizeHeightFactor;
-    //this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
+//    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -9340,9 +9349,9 @@ Node.prototype._resizeDatabase = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -9389,9 +9398,9 @@ Node.prototype._resizeCircle = function (ctx) {
     this.height = diameter;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * 0.5*this.clusterSizeRadiusFactor;
+//    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
+//    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -9437,9 +9446,9 @@ Node.prototype._resizeEllipse = function (ctx) {
     }
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -9502,9 +9511,9 @@ Node.prototype._resizeShape = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * 0.5 * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -9561,9 +9570,9 @@ Node.prototype._resizeText = function (ctx) {
     this.height = textSize.height + 2 * margin;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -10621,6 +10630,19 @@ var SectorMixin = {
   },
 
 
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices to
+   * those of the UI sector.
+   *
+   * @private
+   */
+  _switchToUISector : function() {
+    this.nodeIndices = this.sectors["UI"]["nodeIndices"];
+    this.nodes       = this.sectors["UI"]["nodes"];
+    this.edges       = this.sectors["UI"]["edges"];
+  },
+
+
   /**
    * This function sets the global references to nodes, edges and nodeIndices back to
    * those of the currently active sector.
@@ -10898,11 +10920,11 @@ var SectorMixin = {
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we dont pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
-   * @param {*} [args]            |   Optional: arguments to pass to the runFunction
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
-  _doInAllActiveSectors : function(runFunction,args) {
-    if (args === undefined) {
+  _doInAllActiveSectors : function(runFunction,argument) {
+    if (argument === undefined) {
       for (var sector in this.sectors["active"]) {
         if (this.sectors["active"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
@@ -10916,7 +10938,13 @@ var SectorMixin = {
         if (this.sectors["active"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
           this._switchToActiveSector(sector);
-          this[runFunction](args);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
         }
       }
     }
@@ -10929,13 +10957,13 @@ var SectorMixin = {
    * This runs a function in all frozen sectors. This is used in the _redraw().
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   we don't pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
-   * @param {*} [args]            |   Optional: arguments to pass to the runFunction
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
-  _doInAllFrozenSectors : function(runFunction,args) {
-    if (args === undefined) {
+  _doInAllFrozenSectors : function(runFunction,argument) {
+    if (argument === undefined) {
       for (var sector in this.sectors["frozen"]) {
         if (this.sectors["frozen"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
@@ -10949,7 +10977,13 @@ var SectorMixin = {
         if (this.sectors["frozen"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
           this._switchToFrozenSector(sector);
-          this[runFunction](args);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
         }
       }
     }
@@ -10957,11 +10991,38 @@ var SectorMixin = {
   },
 
 
+  /**
+   * This runs a function in all frozen sectors. This is used in the _redraw().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we don't pass the function itself because then the "this" is the window object
+   *                              |   instead of the Graph object
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  _doInUISector : function(runFunction,argument) {
+    this._switchToUISector();
+    if (argument === undefined) {
+      this[runFunction]();
+    }
+    else {
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    this._loadLatestSector();
+  },
+
+
   /**
    * This runs a function in all sectors. This is used in the _redraw().
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   we don't pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
    * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
    * @private
@@ -12139,12 +12200,25 @@ function Graph (container, data, options) {
     maxIterations: 1000  // maximum number of iteration to stabilize
   };
 
+  this.groups = new Groups(); // object with groups
+  this.images = new Images(); // object with images
+  this.images.setOnloadCallback(function () {
+    graph._redraw();
+  });
+
+
+  // create a frame and canvas
+  this._create();
+
   // call the constructor of the cluster object
   this._loadClusterSystem();
 
   // call the sector constructor
   this._loadSectorSystem();
 
+  // load the UI system.
+  this._loadUISystem();
+
   var graph = this;
   this.freezeSimulation = false;// freeze the simulation
   this.tapTimer = 0;            // timer to detect doubleclick or double tap
@@ -12197,21 +12271,12 @@ function Graph (container, data, options) {
     }
   };
 
-  this.groups = new Groups(); // object with groups
-  this.images = new Images(); // object with images
-  this.images.setOnloadCallback(function () {
-    graph._redraw();
-  });
-
   // properties of the data
   this.moving = false;    // True if any of the nodes have an undefined position
 
   this.selection = [];
   this.timer = undefined;
 
-  // create a frame and canvas
-  this._create();
-
   // apply options
   this.setOptions(options);
 
@@ -13206,6 +13271,8 @@ Graph.prototype.setSize = function(width, height) {
 
   this.frame.canvas.width = this.frame.canvas.clientWidth;
   this.frame.canvas.height = this.frame.canvas.clientHeight;
+
+  this._relocateUI();
 };
 
 /**
@@ -13547,6 +13614,8 @@ Graph.prototype._redraw = function() {
 
   // restore original scaling and translation
   ctx.restore();
+
+  this._doInUISector("_drawNodes",ctx,true);
 };
 
 /**
@@ -13645,9 +13714,14 @@ Graph.prototype._yToCanvas = function(y) {
  * Redraw all nodes
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
+ * @param {Boolean} [alwaysShow]
  * @private
  */
-Graph.prototype._drawNodes = function(ctx) {
+Graph.prototype._drawNodes = function(ctx,alwaysShow) {
+  if (alwaysShow === undefined) {
+    alwaysShow = false;
+  }
+
   // first draw the unselected nodes
   var nodes = this.nodes;
   var selected = [];
@@ -13659,7 +13733,7 @@ Graph.prototype._drawNodes = function(ctx) {
         selected.push(id);
       }
       else {
-        if (nodes[id].inArea()) {
+        if (nodes[id].inArea() || alwaysShow) {
           nodes[id].draw(ctx);
         }
       }
@@ -13668,7 +13742,7 @@ Graph.prototype._drawNodes = function(ctx) {
 
   // draw the selected nodes on top
   for (var s = 0, sMax = selected.length; s < sMax; s++) {
-    if (nodes[selected[s]].inArea()) {
+    if (nodes[selected[s]].inArea() || alwaysShow) {
       nodes[selected[s]].draw(ctx);
     }
   }
@@ -13746,211 +13820,197 @@ Graph.prototype._initializeForceCalculation = function() {
  * @private
  */
 Graph.prototype._calculateForces = function() {
-  // stop calculation if there is only one node
-  if (this.nodeIndices.length == 1) {
-    this.nodes[this.nodeIndices[0]]._setForce(0,0);
-  }
-  // if there are too many nodes on screen, we cluster without repositioning
-  else if (this.nodeIndices.length > this.constants.clustering.absoluteMaxNumberOfNodes && this.constants.clustering.enabled == true) {
-    this.clusterToFit(this.constants.clustering.reduceToMaxNumberOfNodes, false);
-    this._initializeForceCalculation();
-  }
-  else {
-    this.canvasTopLeft = {"x": (0-this.translation.x)/this.scale,
-                          "y": (0-this.translation.y)/this.scale};
-    this.canvasBottomRight = {"x": (this.frame.canvas.clientWidth -this.translation.x)/this.scale,
-                              "y": (this.frame.canvas.clientHeight-this.translation.y)/this.scale};
-    var centerPos = {"x":0.5*(this.canvasTopLeft.x + this.canvasBottomRight.x),
-                     "y":0.5*(this.canvasTopLeft.y + this.canvasBottomRight.y)}
-
-    // create a local edge to the nodes and edges, that is faster
-    var dx, dy, angle, distance, fx, fy,
-      repulsingForce, springForce, length, edgeLength,
-      node, node1, node2, edge, edgeId, i, j, nodeId, xCenter, yCenter;
-    var clusterSize;
-    var nodes = this.nodes;
-    var edges = this.edges;
-
-
-    // Gravity is required to keep separated groups from floating off
-    // the forces are reset to zero in this loop by using _setForce instead
-    // of _addForce
-    var gravity = 0.08;
-    for (i = 0; i < this.nodeIndices.length; i++) {
-        node = nodes[this.nodeIndices[i]];
-        // gravity does not apply when we are in a pocket sector
-        if (this._sector() == "default") {
-          dx = -node.x + centerPos.x;
-          dy = -node.y + centerPos.y;
-
-          angle = Math.atan2(dy, dx);
-          fx = Math.cos(angle) * gravity;
-          fy = Math.sin(angle) * gravity;
-        }
-        else {
-          fx = 0;
-          fy = 0;
-        }
-        node._setForce(fx, fy);
+  this.canvasTopLeft = {"x": (0-this.translation.x)/this.scale,
+                        "y": (0-this.translation.y)/this.scale};
+  this.canvasBottomRight = {"x": (this.frame.canvas.clientWidth -this.translation.x)/this.scale,
+                            "y": (this.frame.canvas.clientHeight-this.translation.y)/this.scale};
+  var centerPos = {"x":0.5*(this.canvasTopLeft.x + this.canvasBottomRight.x),
+                   "y":0.5*(this.canvasTopLeft.y + this.canvasBottomRight.y)}
+
+  // create a local edge to the nodes and edges, that is faster
+  var dx, dy, angle, distance, fx, fy,
+    repulsingForce, springForce, length, edgeLength,
+    node, node1, node2, edge, edgeId, i, j, nodeId, xCenter, yCenter;
+  var clusterSize;
+  var nodes = this.nodes;
+  var edges = this.edges;
 
-        node.updateDamping(this.nodeIndices.length);
-    }
+  // Gravity is required to keep separated groups from floating off
+  // the forces are reset to zero in this loop by using _setForce instead
+  // of _addForce
+  var gravity = 0.08;
+  for (i = 0; i < this.nodeIndices.length; i++) {
+      node = nodes[this.nodeIndices[i]];
+      // gravity does not apply when we are in a pocket sector
+      if (this._sector() == "default") {
+        dx = -node.x + centerPos.x;
+        dy = -node.y + centerPos.y;
+
+        angle = Math.atan2(dy, dx);
+        fx = Math.cos(angle) * gravity;
+        fy = Math.sin(angle) * gravity;
+      }
+      else {
+        fx = 0;
+        fy = 0;
+      }
+      node._setForce(fx, fy);
 
-    this.updateLabels();
+      node.updateDamping(this.nodeIndices.length);
+  }
 
-    // repulsing forces between nodes
-    var minimumDistance = this.constants.nodes.distance,
-        steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+  // repulsing forces between nodes
+  var minimumDistance = this.constants.nodes.distance,
+      steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
 
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < this.nodeIndices.length-1; i++) {
-      node1 = nodes[this.nodeIndices[i]];
-      for (j = i+1; j < this.nodeIndices.length; j++) {
-        node2 = nodes[this.nodeIndices[j]];
-        clusterSize = (node1.clusterSize + node2.clusterSize - 2);
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+  // we loop from i over all but the last entree in the array
+  // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+  for (i = 0; i < this.nodeIndices.length-1; i++) {
+    node1 = nodes[this.nodeIndices[i]];
+    for (j = i+1; j < this.nodeIndices.length; j++) {
+      node2 = nodes[this.nodeIndices[j]];
+      clusterSize = (node1.clusterSize + node2.clusterSize - 2);
+      dx = node2.x - node1.x;
+      dy = node2.y - node1.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
 
 
-        // clusters have a larger region of influence
-        minimumDistance = (clusterSize == 0) ? this.constants.nodes.distance : (this.constants.nodes.distance * (1 + clusterSize * this.constants.clustering.distanceAmplification));
-        if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
-          angle = Math.atan2(dy, dx);
+      // clusters have a larger region of influence
+      minimumDistance = (clusterSize == 0) ? this.constants.nodes.distance : (this.constants.nodes.distance * (1 + clusterSize * this.constants.clustering.distanceAmplification));
+      if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
+        angle = Math.atan2(dy, dx);
 
-          if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
-            repulsingForce = 1.0;
-          }
-          else {
-            // TODO: correct factor for repulsing force
-            //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-            //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-            repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
-          }
-          // amplify the repulsion for clusters.
-          repulsingForce *= (clusterSize == 0) ? 1 : 1 + clusterSize * this.constants.clustering.forceAmplification;
+        if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
+          repulsingForce = 1.0;
+        }
+        else {
+          // TODO: correct factor for repulsing force
+          //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+          //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+          repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
+        }
+        // amplify the repulsion for clusters.
+        repulsingForce *= (clusterSize == 0) ? 1 : 1 + clusterSize * this.constants.clustering.forceAmplification;
 
-          fx = Math.cos(angle) * repulsingForce;
-          fy = Math.sin(angle) * repulsingForce;
+        fx = Math.cos(angle) * repulsingForce;
+        fy = Math.sin(angle) * repulsingForce;
 
-          node1._addForce(-fx, -fy);
-          node2._addForce(fx, fy);
-        }
+        node1._addForce(-fx, -fy);
+        node2._addForce(fx, fy);
       }
     }
+  }
 
 /*
-    // repulsion of the edges on the nodes and
-    for (var nodeId in nodes) {
-      if (nodes.hasOwnProperty(nodeId)) {
-        node = nodes[nodeId];
-        for(var edgeId in edges) {
-          if (edges.hasOwnProperty(edgeId)) {
-            edge = edges[edgeId];
-
-            // get the center of the edge
-            xCenter = edge.from.x+(edge.to.x - edge.from.x)/2;
-            yCenter = edge.from.y+(edge.to.y - edge.from.y)/2;
-
-            // calculate normally distributed force
-            dx = node.x - xCenter;
-            dy = node.y - yCenter;
-            distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
-              angle = Math.atan2(dy, dx);
-
-              if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
-                repulsingForce = 1.0;
-              }
-              else {
-                // TODO: correct factor for repulsing force
-                //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-                //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-                repulsingForce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)); // TODO: customize the repulsing force
-              }
-              fx = Math.cos(angle) * repulsingForce;
-              fy = Math.sin(angle) * repulsingForce;
-              node._addForce(fx, fy);
-              edge.from._addForce(-fx/2,-fy/2);
-              edge.to._addForce(-fx/2,-fy/2);
+  // repulsion of the edges on the nodes and
+  for (var nodeId in nodes) {
+    if (nodes.hasOwnProperty(nodeId)) {
+      node = nodes[nodeId];
+      for(var edgeId in edges) {
+        if (edges.hasOwnProperty(edgeId)) {
+          edge = edges[edgeId];
+
+          // get the center of the edge
+          xCenter = edge.from.x+(edge.to.x - edge.from.x)/2;
+          yCenter = edge.from.y+(edge.to.y - edge.from.y)/2;
+
+          // calculate normally distributed force
+          dx = node.x - xCenter;
+          dy = node.y - yCenter;
+          distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
+            angle = Math.atan2(dy, dx);
+
+            if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
+              repulsingForce = 1.0;
+            }
+            else {
+              // TODO: correct factor for repulsing force
+              //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+              //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+              repulsingForce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)); // TODO: customize the repulsing force
             }
+            fx = Math.cos(angle) * repulsingForce;
+            fy = Math.sin(angle) * repulsingForce;
+            node._addForce(fx, fy);
+            edge.from._addForce(-fx/2,-fy/2);
+            edge.to._addForce(-fx/2,-fy/2);
           }
         }
       }
     }
+  }
 */
 
-    // forces caused by the edges, modelled as springs
-    for (edgeId in edges) {
-      if (edges.hasOwnProperty(edgeId)) {
-        edge = edges[edgeId];
-        if (edge.connected) {
-          // only calculate forces if nodes are in the same sector
-          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
-            clusterSize = (edge.to.clusterSize + edge.from.clusterSize - 2);
-            dx = (edge.to.x - edge.from.x);
-            dy = (edge.to.y - edge.from.y);
-            //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
-            //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
-            //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
-            edgeLength = edge.length;
-            // this implies that the edges between big clusters are longer
-            edgeLength += clusterSize * this.constants.clustering.edgeGrowth;
-            length =  Math.sqrt(dx * dx + dy * dy);
-            angle = Math.atan2(dy, dx);
+  // forces caused by the edges, modelled as springs
+  for (edgeId in edges) {
+    if (edges.hasOwnProperty(edgeId)) {
+      edge = edges[edgeId];
+      if (edge.connected) {
+        // only calculate forces if nodes are in the same sector
+        if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
+          clusterSize = (edge.to.clusterSize + edge.from.clusterSize - 2);
+          dx = (edge.to.x - edge.from.x);
+          dy = (edge.to.y - edge.from.y);
+          //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
+          //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
+          //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
+          edgeLength = edge.length;
+          // this implies that the edges between big clusters are longer
+          edgeLength += clusterSize * this.constants.clustering.edgeGrowth;
+          length =  Math.sqrt(dx * dx + dy * dy);
+          angle = Math.atan2(dy, dx);
 
-            springForce = edge.stiffness * (edgeLength - length);
+          springForce = edge.stiffness * (edgeLength - length);
 
-            fx = Math.cos(angle) * springForce;
-            fy = Math.sin(angle) * springForce;
+          fx = Math.cos(angle) * springForce;
+          fy = Math.sin(angle) * springForce;
 
-            edge.from._addForce(-fx, -fy);
-            edge.to._addForce(fx, fy);
-          }
+          edge.from._addForce(-fx, -fy);
+          edge.to._addForce(fx, fy);
         }
       }
     }
+  }
 /*
-    // TODO: re-implement repulsion of edges
-
-     // repulsing forces between edges
-     var minimumDistance = this.constants.edges.distance,
-     steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
-     for (var l = 0; l < edges.length; l++) {
-     //Keep distance from other edge centers
-     for (var l2 = l + 1; l2 < this.edges.length; l2++) {
-     //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
-     //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
-     //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
-     var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
-     ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
-     l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
-     l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
-
-     // calculate normally distributed force
-     dx = l2x - lx,
-     dy = l2y - ly,
-     distance = Math.sqrt(dx * dx + dy * dy),
-     angle = Math.atan2(dy, dx),
-
-
-     // TODO: correct factor for repulsing force
-     //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-     //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-     repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
-     fx = Math.cos(angle) * repulsingforce,
-     fy = Math.sin(angle) * repulsingforce;
-
-     edges[l].from._addForce(-fx, -fy);
-     edges[l].to._addForce(-fx, -fy);
-     edges[l2].from._addForce(fx, fy);
-     edges[l2].to._addForce(fx, fy);
-     }
-     }
+  // TODO: re-implement repulsion of edges
+
+   // repulsing forces between edges
+   var minimumDistance = this.constants.edges.distance,
+   steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+   for (var l = 0; l < edges.length; l++) {
+   //Keep distance from other edge centers
+   for (var l2 = l + 1; l2 < this.edges.length; l2++) {
+   //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
+   //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
+   //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
+   var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+   ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+   l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
+   l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
+
+   // calculate normally distributed force
+   dx = l2x - lx,
+   dy = l2y - ly,
+   distance = Math.sqrt(dx * dx + dy * dy),
+   angle = Math.atan2(dy, dx),
+
+
+   // TODO: correct factor for repulsing force
+   //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+   //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+   repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
+   fx = Math.cos(angle) * repulsingforce,
+   fy = Math.sin(angle) * repulsingforce;
+
+   edges[l].from._addForce(-fx, -fy);
+   edges[l].to._addForce(-fx, -fy);
+   edges[l2].from._addForce(fx, fy);
+   edges[l2].to._addForce(fx, fy);
+   }
+   }
 */
-  }
 };
 
 
@@ -14076,12 +14136,17 @@ Graph.prototype._loadSectorSystem = function() {
   this.sectors = {};
   this.activeSector = ["default"];
   this.sectors["active"] = {};
-  this.sectors["active"][this.activeSector[this.activeSector.length-1]] = {"nodes":{},
-                                                                           "edges":{},
-                                                                           "nodeIndices":[],
-                                                                           "formationScale": 1.0,
-                                                                           "drawingNode": undefined};
+  this.sectors["active"]["default"] = {"nodes":{},
+                                       "edges":{},
+                                       "nodeIndices":[],
+                                       "formationScale": 1.0,
+                                       "drawingNode": undefined};
   this.sectors["frozen"] = {};
+  this.sectors["UI"] = {"nodes":{},
+                        "edges":{},
+                        "nodeIndices":[],
+                        "formationScale": 1.0,
+                        "drawingNode": undefined};
 
   this.nodeIndices = this.sectors["active"][this.activeSector[this.activeSector.length-1]]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
   for (var mixinFunction in SectorMixin) {
@@ -14090,6 +14155,90 @@ Graph.prototype._loadSectorSystem = function() {
     }
   }
 };
+
+
+
+Graph.prototype._loadUISystem = function() {
+  this._loadUIElements();
+}
+
+Graph.prototype._loadUIElements = function() {
+  var DIR = 'img/UI/';
+  this.UIclientWidth = this.frame.canvas.clientWidth;
+  this.UIclientHeight = this.frame.canvas.clientHeight;
+  var UINodes = [
+    {id: 'UI_up',    shape: 'image', image: DIR + 'uparrow.png',
+      verticalAlignTop: false,  x: 50,  y: this.UIclientHeight - 50},
+    {id: 'UI_down',  shape: 'image', image: DIR + 'downarrow.png',
+      verticalAlignTop: false,  x: 50,  y: this.UIclientHeight - 20},
+    {id: 'UI_left',  shape: 'image', image: DIR + 'leftarrow.png',
+      verticalAlignTop: false,  x: 20,  y: this.UIclientHeight - 20},
+    {id: 'UI_right', shape: 'image', image: DIR + 'rightarrow.png',
+      verticalAlignTop: false,  x: 80,  y: this.UIclientHeight - 20},
+    {id: 'UI_plus',  shape: 'image', image: DIR + 'plus.png',
+      verticalAlignTop: false,  x: 130, y: this.UIclientHeight - 20},
+    {id: 'UI_minus', shape: 'image', image: DIR + 'minus.png',
+      verticalAlignTop: false,  x: 160, y: this.UIclientHeight - 20}
+  ];
+
+  for (var i = 0; i < UINodes.length; i++) {
+    this.sectors["UI"]['nodes'][UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants);
+  }
+};
+
+Graph.prototype._relocateUI = function() {
+  var xOffset = this.UIclientWidth - this.frame.canvas.clientWidth;
+  var yOffset = this.UIclientHeight - this.frame.canvas.clientHeight;
+  this.UIclientWidth = this.frame.canvas.clientWidth;
+  this.UIclientHeight = this.frame.canvas.clientHeight;
+  var node = null;
+  for (var nodeId in this.sectors["UI"]["nodes"]) {
+    if (this.sectors["UI"]["nodes"].hasOwnProperty(nodeId)) {
+      node = this.sectors["UI"]["nodes"][nodeId];
+      if (!node.horizontalAlignLeft) {
+        node.x -= xOffset;
+      }
+      if (!node.verticalAlignTop) {
+        node.y -= yOffset;
+      }
+    }
+  }
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /**
  * vis.js module exports
  */
diff --git a/examples/graph/img/UI/downarrow.png b/examples/graph/img/UI/downarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..83ad74d6d7716e8b3806059f5604ef6b31c75769
GIT binary patch
literal 3930
zcmV-g52f&lP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkYPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z000DqNkl<Zc-p*|zit#s5XOI1-7~Yx+Sq0ZumchT(2*e|A`lsm;P~>(cmk5kd5jBi
zb`m)O0Xjrz$!4V^07QcS&w6*e`+{+|duGRw+}#8_GriqiRbPGeRgVk?1E$j{z$*Xo
zB_fE(aZwbAi1763)8C&zfBxIy;UTlx3=vscq^dvN^r}l$DT;#OaL9`nFaCW0{{622
zE3aO?3jfFT<;$0_y}cdEvi!x0h`xFA=Iqg<N7r_DcL^a-RTUya2m$YX@;ro)qKgPz
zz=x_LA{Y_G7{nOt#aLOEc<*`n@+FhW1Zyo82;O@)oldFi8db$wi-_QTz<Y-e0YU&g
z&IO91V10d^5CSL1$1J?Z8iO$gr-}&y69V2^j4^ocIX^$gT1#1$gb=)qIWWdhRTTin
zn2RU^&Vi=Lm9n(db<OM7uK{@Y@FCZ)UuUscq<xGrsA}uIC<@B5yv%!-9Pu7Pz&V%T
z4j~XiU^KeMr%#`lOeWm8afA7M-Xc;;PY5(XHS1zZ;{KZFEDn0_@y@r5#%n%b;GE;h
zlP5fT_Kd+`z}eZ^5|cyx_0VS{L7jWkED3qBTx`{NUK9nVr>A`X{+$36*0##3ReDWm
z3Ho^1_5zc9?eiZIq+>ub$FHjE=CLQ@%aUlAe3dvTpc!!@c|;`L`(W*&*)p6%p{h9N
zmSD^0MYblRS@gNFyv}pyQjWWDMFHuGL^SBVPw)A95dm%BO`>8Hk@o(!>s_3zs(A00
zV2j4Q_o&enaTnrfsCjRrxkRqG!KJvH#N_yYS(cY@t7+u#Lg~7a`ctUmK)%4afQU~b
zFdPmO3g_qNIOiIPbS~9?j#hLucc8bN;-siD#y~(J!0PHM`}_O6d-sm@wKeMLl*f-B
zqpIxh@AGl*Be%A0@!-J&Ha0d`EEbvU>Jr0yBhKOW-V+Pgd(Z9Lx4D1+KGs^+*Vj2Z
zI^y2Fd)&EmhpMVl^eIv!y|DMP`jUA8k;aL-uDN^nE~C+i!C=7J+8T9T1F*8P!g##F
z!NE~H$)K@4idllaw@JiOX(rk99Q$fjReb*ZnGixEOHmXY92{|Sa>DBBDuOgMZ44^y
zdT$Z8ubHb_j9%tPtz|x+v$?s6s`BmIw*+mx4~Ij%_lfDMir6-}@~AcDBt>T}#%OCS
z@3G_Yn8U+ERF##L73#WXI-4;XjV_$b40Y6NDdMhI)*8%3edf9xqaF+feEs^B(P+eM
zHe)m#Ciqp`(e?AEqg?sq$k4vi<#;^i;NYMY`C_qHDxX}}^PaxM>ReqKC1R;fI_KEf
z*q|s1&d$!#*{iQ^`{Xtmj*G0d6h(m%L9@nw)fxKc&719}0u7rxbsNvr(M}$*R8^(%
zyfpV7)5&{oAon_|T<rD{&M2SpxkpyTs%n@_CZnC59p1iun;6`8ex}oJ`<&^6HFmS(
z<72kAwg9XZk<*=>oj>;W_O|1pt?zTB+pB+c)ai~#WHvW9`S9VxU$fclZz;<X=Nv^*
o-22h@&%gE2Hk-|MMTCC_0AHso68#mZi2wiq07*qoM6N<$g6-jwpa1{>

literal 0
HcmV?d00001

diff --git a/examples/graph/img/UI/leftarrow.png b/examples/graph/img/UI/leftarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..24f9b66c1af7be0e1f4e499215c6f50a7d5a13a1
GIT binary patch
literal 3936
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

literal 0
HcmV?d00001

diff --git a/examples/graph/img/UI/minus.png b/examples/graph/img/UI/minus.png
new file mode 100644
index 0000000000000000000000000000000000000000..af0011e279c25032da4a815ec7b74205962cd2df
GIT binary patch
literal 3739
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
FV1lM~1C#&&

literal 0
HcmV?d00001

diff --git a/examples/graph/img/UI/plus.png b/examples/graph/img/UI/plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..255395e371a44f57f4e613ea3c6bcc93d4af8774
GIT binary patch
literal 3970
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

literal 0
HcmV?d00001

diff --git a/examples/graph/img/UI/rightarrow.png b/examples/graph/img/UI/rightarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4dad7f75c6f0c635f7b5d33b96f32e0deeda72e
GIT binary patch
literal 3988
zcmV;F4{Pv=P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkYPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z000EPNkl<Zc-p*|zi$&+5XV3B-rL=n*d~!KM1%$b;!q@{6i84~Qqs9Z*I&n9Kyy8R
z#ucQy=4g;oAS5nI6D1NT(t!YhEZJ6K$Gi4>?+W{EcGqj}io07W-grIpX1?>|JF~K~
zvch;g259jgUm}8toJLWEhzJiKKK$kB)2BZV1_QDzLqryolv00t=(0;GMHEFe8V#O3
zd-mJ@{{Bw@%@;3T`2XYj^5u)~bUHqc<831%YHx3EbpQVSOUK8@c<)J)1QEe|k8>{f
z+<Tv+3lW%y52X|$f)+uvMzqGvpT%*EbB^cFpL23@f-wdIc;}oQkH?&!pQDt*7=wu5
zoX0tf^B%kh9L`ZT3Mj2-MzzK&h4vopJ<b@k);Q-#(-dP2aUA2lcP8XOYfX|Q0O<Ka
zN_ngWl_OUaQyowS#NiyR^}_ckiiqPl*EQAR2zT#2*4jMWA<QLt2k3Gk1$iaHEKnZr
zeePg5-xPBe9y;g1v()GX<eAJY;1vhLr-M2hrW&#f#iB8pALW6$oGKufawJNvr)K&g
z^tGW@O6R`T`Hx7BPN4u{b#)cz99fnv?d#dUWyGr767oI9LC=+qF({>IG*<ZZ=@Y$P
zk1JQMkR(Z-&!UlqC{%MCepE_ftzA$kR&W$WSZmqe-zSb^K79DV-Me?$+}va^7?k9L
zPUx0Wj)RBZdyFx(S}ms2X{jQEj8cjuN$7UF+`fIAn>TNAaB#rh-X5Eqo9yiDaCz-A
z!?WSMJryFV6n<0nEJ+g5H09{%2<KeMXfZlT67lU@m+5rMy?gg~^ym?vKY!-!+qb-W
z^@{7)uXE?eJ4A6*;`(qe6_?hUcB{qjFJE$ac*u<#H}ayXA{G&{EMsS92j?99exJ3q
zH6A~H%*T%(dGqECy<U$84<68LHu2sshB`bD5z<LUqtT$#>2T}TEk>hJ$=jmgIF6Z2
zCiMG#lu}G46T00l*REaT$&)9%fB&9duSdJxo{>sjI|Z7Xrc<`Jw=u@h?RK%&)(!-%
zHRtE&j7B3iHa3_{CPY!h`uaL)n)3DQSJv0pF~;O6E4G=cB1S>8)x;P>nx;7Cm`<ly
zYjX+>I^*$}qoX5~Qf&ONK^(^nheL+LA=X;rBwlcOX;q5|&N`Hmd}svr61i|PkpI@!
z7LCRwhNB^8XJ@lIX}4z`;(TdXEM+dOb%E?zV6mdd)>_)_HqB;}!Jv<|mR7rkW;O=3
z)+o7{PSp*?RC71$TMgdgYskMSm&8fV>48uX@_8<ElsWSiQ0G-0{_>&V>sh;q+T-(s
zbCg9xg}l}xt`77WgQ<%VS+n$254>0&1d!4)P}Hdnby3(_Tf1H6?Vx5&Ar(}`LM;|n
zb*7i9x=7?Q-yrG=ta`7qT3rOIAWWb#V+>Igp+!)}{G%PZXg~m|Fk5kw1v^E=k|c==
z`_jZYboJ0eZmRjpf16LXP!~bYIhUs`JQoo$N-2MGa<aO+yUXj>uS?Zkol13vt0All
zYglnlPfyv}+5#{}M25S&yT87B_pUP<jh4QSlvkO>_E`1`6K1@KaP{g{4h|0f$g=ED
uiQ^b+Em0KR`QH1_zxC3VW!bTa@Yeu1RZB$-oY6o40000<MNUMnLSTY$4T|dk

literal 0
HcmV?d00001

diff --git a/examples/graph/img/UI/uparrow.png b/examples/graph/img/UI/uparrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..80843618afb5651b4707a989a160eb095676973b
GIT binary patch
literal 3922
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

literal 0
HcmV?d00001

diff --git a/src/graph/Graph.js b/src/graph/Graph.js
index ce05e4bd..94bf5a5b 100644
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@@ -87,12 +87,25 @@ function Graph (container, data, options) {
     maxIterations: 1000  // maximum number of iteration to stabilize
   };
 
+  this.groups = new Groups(); // object with groups
+  this.images = new Images(); // object with images
+  this.images.setOnloadCallback(function () {
+    graph._redraw();
+  });
+
+
+  // create a frame and canvas
+  this._create();
+
   // call the constructor of the cluster object
   this._loadClusterSystem();
 
   // call the sector constructor
   this._loadSectorSystem();
 
+  // load the UI system.
+  this._loadUISystem();
+
   var graph = this;
   this.freezeSimulation = false;// freeze the simulation
   this.tapTimer = 0;            // timer to detect doubleclick or double tap
@@ -145,21 +158,12 @@ function Graph (container, data, options) {
     }
   };
 
-  this.groups = new Groups(); // object with groups
-  this.images = new Images(); // object with images
-  this.images.setOnloadCallback(function () {
-    graph._redraw();
-  });
-
   // properties of the data
   this.moving = false;    // True if any of the nodes have an undefined position
 
   this.selection = [];
   this.timer = undefined;
 
-  // create a frame and canvas
-  this._create();
-
   // apply options
   this.setOptions(options);
 
@@ -1154,6 +1158,8 @@ Graph.prototype.setSize = function(width, height) {
 
   this.frame.canvas.width = this.frame.canvas.clientWidth;
   this.frame.canvas.height = this.frame.canvas.clientHeight;
+
+  this._relocateUI();
 };
 
 /**
@@ -1495,6 +1501,8 @@ Graph.prototype._redraw = function() {
 
   // restore original scaling and translation
   ctx.restore();
+
+  this._doInUISector("_drawNodes",ctx,true);
 };
 
 /**
@@ -1593,9 +1601,14 @@ Graph.prototype._yToCanvas = function(y) {
  * Redraw all nodes
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
+ * @param {Boolean} [alwaysShow]
  * @private
  */
-Graph.prototype._drawNodes = function(ctx) {
+Graph.prototype._drawNodes = function(ctx,alwaysShow) {
+  if (alwaysShow === undefined) {
+    alwaysShow = false;
+  }
+
   // first draw the unselected nodes
   var nodes = this.nodes;
   var selected = [];
@@ -1607,7 +1620,7 @@ Graph.prototype._drawNodes = function(ctx) {
         selected.push(id);
       }
       else {
-        if (nodes[id].inArea()) {
+        if (nodes[id].inArea() || alwaysShow) {
           nodes[id].draw(ctx);
         }
       }
@@ -1616,7 +1629,7 @@ Graph.prototype._drawNodes = function(ctx) {
 
   // draw the selected nodes on top
   for (var s = 0, sMax = selected.length; s < sMax; s++) {
-    if (nodes[selected[s]].inArea()) {
+    if (nodes[selected[s]].inArea() || alwaysShow) {
       nodes[selected[s]].draw(ctx);
     }
   }
@@ -1694,211 +1707,197 @@ Graph.prototype._initializeForceCalculation = function() {
  * @private
  */
 Graph.prototype._calculateForces = function() {
-  // stop calculation if there is only one node
-  if (this.nodeIndices.length == 1) {
-    this.nodes[this.nodeIndices[0]]._setForce(0,0);
-  }
-  // if there are too many nodes on screen, we cluster without repositioning
-  else if (this.nodeIndices.length > this.constants.clustering.absoluteMaxNumberOfNodes && this.constants.clustering.enabled == true) {
-    this.clusterToFit(this.constants.clustering.reduceToMaxNumberOfNodes, false);
-    this._initializeForceCalculation();
-  }
-  else {
-    this.canvasTopLeft = {"x": (0-this.translation.x)/this.scale,
-                          "y": (0-this.translation.y)/this.scale};
-    this.canvasBottomRight = {"x": (this.frame.canvas.clientWidth -this.translation.x)/this.scale,
-                              "y": (this.frame.canvas.clientHeight-this.translation.y)/this.scale};
-    var centerPos = {"x":0.5*(this.canvasTopLeft.x + this.canvasBottomRight.x),
-                     "y":0.5*(this.canvasTopLeft.y + this.canvasBottomRight.y)}
-
-    // create a local edge to the nodes and edges, that is faster
-    var dx, dy, angle, distance, fx, fy,
-      repulsingForce, springForce, length, edgeLength,
-      node, node1, node2, edge, edgeId, i, j, nodeId, xCenter, yCenter;
-    var clusterSize;
-    var nodes = this.nodes;
-    var edges = this.edges;
-
-
-    // Gravity is required to keep separated groups from floating off
-    // the forces are reset to zero in this loop by using _setForce instead
-    // of _addForce
-    var gravity = 0.08;
-    for (i = 0; i < this.nodeIndices.length; i++) {
-        node = nodes[this.nodeIndices[i]];
-        // gravity does not apply when we are in a pocket sector
-        if (this._sector() == "default") {
-          dx = -node.x + centerPos.x;
-          dy = -node.y + centerPos.y;
-
-          angle = Math.atan2(dy, dx);
-          fx = Math.cos(angle) * gravity;
-          fy = Math.sin(angle) * gravity;
-        }
-        else {
-          fx = 0;
-          fy = 0;
-        }
-        node._setForce(fx, fy);
+  this.canvasTopLeft = {"x": (0-this.translation.x)/this.scale,
+                        "y": (0-this.translation.y)/this.scale};
+  this.canvasBottomRight = {"x": (this.frame.canvas.clientWidth -this.translation.x)/this.scale,
+                            "y": (this.frame.canvas.clientHeight-this.translation.y)/this.scale};
+  var centerPos = {"x":0.5*(this.canvasTopLeft.x + this.canvasBottomRight.x),
+                   "y":0.5*(this.canvasTopLeft.y + this.canvasBottomRight.y)}
+
+  // create a local edge to the nodes and edges, that is faster
+  var dx, dy, angle, distance, fx, fy,
+    repulsingForce, springForce, length, edgeLength,
+    node, node1, node2, edge, edgeId, i, j, nodeId, xCenter, yCenter;
+  var clusterSize;
+  var nodes = this.nodes;
+  var edges = this.edges;
 
-        node.updateDamping(this.nodeIndices.length);
-    }
+  // Gravity is required to keep separated groups from floating off
+  // the forces are reset to zero in this loop by using _setForce instead
+  // of _addForce
+  var gravity = 0.08;
+  for (i = 0; i < this.nodeIndices.length; i++) {
+      node = nodes[this.nodeIndices[i]];
+      // gravity does not apply when we are in a pocket sector
+      if (this._sector() == "default") {
+        dx = -node.x + centerPos.x;
+        dy = -node.y + centerPos.y;
+
+        angle = Math.atan2(dy, dx);
+        fx = Math.cos(angle) * gravity;
+        fy = Math.sin(angle) * gravity;
+      }
+      else {
+        fx = 0;
+        fy = 0;
+      }
+      node._setForce(fx, fy);
 
-    this.updateLabels();
+      node.updateDamping(this.nodeIndices.length);
+  }
 
-    // repulsing forces between nodes
-    var minimumDistance = this.constants.nodes.distance,
-        steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+  // repulsing forces between nodes
+  var minimumDistance = this.constants.nodes.distance,
+      steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
 
 
-    // we loop from i over all but the last entree in the array
-    // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < this.nodeIndices.length-1; i++) {
-      node1 = nodes[this.nodeIndices[i]];
-      for (j = i+1; j < this.nodeIndices.length; j++) {
-        node2 = nodes[this.nodeIndices[j]];
-        clusterSize = (node1.clusterSize + node2.clusterSize - 2);
-        dx = node2.x - node1.x;
-        dy = node2.y - node1.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
+  // we loop from i over all but the last entree in the array
+  // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+  for (i = 0; i < this.nodeIndices.length-1; i++) {
+    node1 = nodes[this.nodeIndices[i]];
+    for (j = i+1; j < this.nodeIndices.length; j++) {
+      node2 = nodes[this.nodeIndices[j]];
+      clusterSize = (node1.clusterSize + node2.clusterSize - 2);
+      dx = node2.x - node1.x;
+      dy = node2.y - node1.y;
+      distance = Math.sqrt(dx * dx + dy * dy);
 
 
-        // clusters have a larger region of influence
-        minimumDistance = (clusterSize == 0) ? this.constants.nodes.distance : (this.constants.nodes.distance * (1 + clusterSize * this.constants.clustering.distanceAmplification));
-        if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
-          angle = Math.atan2(dy, dx);
+      // clusters have a larger region of influence
+      minimumDistance = (clusterSize == 0) ? this.constants.nodes.distance : (this.constants.nodes.distance * (1 + clusterSize * this.constants.clustering.distanceAmplification));
+      if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
+        angle = Math.atan2(dy, dx);
 
-          if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
-            repulsingForce = 1.0;
-          }
-          else {
-            // TODO: correct factor for repulsing force
-            //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-            //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-            repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
-          }
-          // amplify the repulsion for clusters.
-          repulsingForce *= (clusterSize == 0) ? 1 : 1 + clusterSize * this.constants.clustering.forceAmplification;
+        if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
+          repulsingForce = 1.0;
+        }
+        else {
+          // TODO: correct factor for repulsing force
+          //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+          //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+          repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
+        }
+        // amplify the repulsion for clusters.
+        repulsingForce *= (clusterSize == 0) ? 1 : 1 + clusterSize * this.constants.clustering.forceAmplification;
 
-          fx = Math.cos(angle) * repulsingForce;
-          fy = Math.sin(angle) * repulsingForce;
+        fx = Math.cos(angle) * repulsingForce;
+        fy = Math.sin(angle) * repulsingForce;
 
-          node1._addForce(-fx, -fy);
-          node2._addForce(fx, fy);
-        }
+        node1._addForce(-fx, -fy);
+        node2._addForce(fx, fy);
       }
     }
+  }
 
 /*
-    // repulsion of the edges on the nodes and
-    for (var nodeId in nodes) {
-      if (nodes.hasOwnProperty(nodeId)) {
-        node = nodes[nodeId];
-        for(var edgeId in edges) {
-          if (edges.hasOwnProperty(edgeId)) {
-            edge = edges[edgeId];
-
-            // get the center of the edge
-            xCenter = edge.from.x+(edge.to.x - edge.from.x)/2;
-            yCenter = edge.from.y+(edge.to.y - edge.from.y)/2;
-
-            // calculate normally distributed force
-            dx = node.x - xCenter;
-            dy = node.y - yCenter;
-            distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
-              angle = Math.atan2(dy, dx);
-
-              if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
-                repulsingForce = 1.0;
-              }
-              else {
-                // TODO: correct factor for repulsing force
-                //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-                //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-                repulsingForce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)); // TODO: customize the repulsing force
-              }
-              fx = Math.cos(angle) * repulsingForce;
-              fy = Math.sin(angle) * repulsingForce;
-              node._addForce(fx, fy);
-              edge.from._addForce(-fx/2,-fy/2);
-              edge.to._addForce(-fx/2,-fy/2);
+  // repulsion of the edges on the nodes and
+  for (var nodeId in nodes) {
+    if (nodes.hasOwnProperty(nodeId)) {
+      node = nodes[nodeId];
+      for(var edgeId in edges) {
+        if (edges.hasOwnProperty(edgeId)) {
+          edge = edges[edgeId];
+
+          // get the center of the edge
+          xCenter = edge.from.x+(edge.to.x - edge.from.x)/2;
+          yCenter = edge.from.y+(edge.to.y - edge.from.y)/2;
+
+          // calculate normally distributed force
+          dx = node.x - xCenter;
+          dy = node.y - yCenter;
+          distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < 2*minimumDistance) { // at 2.0 * the minimum distance, the force is 0.000045
+            angle = Math.atan2(dy, dx);
+
+            if (distance < 0.5*minimumDistance) { // at 0.5 * the minimum distance, the force is 0.993307
+              repulsingForce = 1.0;
             }
+            else {
+              // TODO: correct factor for repulsing force
+              //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+              //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+              repulsingForce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)); // TODO: customize the repulsing force
+            }
+            fx = Math.cos(angle) * repulsingForce;
+            fy = Math.sin(angle) * repulsingForce;
+            node._addForce(fx, fy);
+            edge.from._addForce(-fx/2,-fy/2);
+            edge.to._addForce(-fx/2,-fy/2);
           }
         }
       }
     }
+  }
 */
 
-    // forces caused by the edges, modelled as springs
-    for (edgeId in edges) {
-      if (edges.hasOwnProperty(edgeId)) {
-        edge = edges[edgeId];
-        if (edge.connected) {
-          // only calculate forces if nodes are in the same sector
-          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
-            clusterSize = (edge.to.clusterSize + edge.from.clusterSize - 2);
-            dx = (edge.to.x - edge.from.x);
-            dy = (edge.to.y - edge.from.y);
-            //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
-            //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
-            //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
-            edgeLength = edge.length;
-            // this implies that the edges between big clusters are longer
-            edgeLength += clusterSize * this.constants.clustering.edgeGrowth;
-            length =  Math.sqrt(dx * dx + dy * dy);
-            angle = Math.atan2(dy, dx);
+  // forces caused by the edges, modelled as springs
+  for (edgeId in edges) {
+    if (edges.hasOwnProperty(edgeId)) {
+      edge = edges[edgeId];
+      if (edge.connected) {
+        // only calculate forces if nodes are in the same sector
+        if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
+          clusterSize = (edge.to.clusterSize + edge.from.clusterSize - 2);
+          dx = (edge.to.x - edge.from.x);
+          dy = (edge.to.y - edge.from.y);
+          //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
+          //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
+          //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
+          edgeLength = edge.length;
+          // this implies that the edges between big clusters are longer
+          edgeLength += clusterSize * this.constants.clustering.edgeGrowth;
+          length =  Math.sqrt(dx * dx + dy * dy);
+          angle = Math.atan2(dy, dx);
 
-            springForce = edge.stiffness * (edgeLength - length);
+          springForce = edge.stiffness * (edgeLength - length);
 
-            fx = Math.cos(angle) * springForce;
-            fy = Math.sin(angle) * springForce;
+          fx = Math.cos(angle) * springForce;
+          fy = Math.sin(angle) * springForce;
 
-            edge.from._addForce(-fx, -fy);
-            edge.to._addForce(fx, fy);
-          }
+          edge.from._addForce(-fx, -fy);
+          edge.to._addForce(fx, fy);
         }
       }
     }
+  }
 /*
-    // TODO: re-implement repulsion of edges
-
-     // repulsing forces between edges
-     var minimumDistance = this.constants.edges.distance,
-     steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
-     for (var l = 0; l < edges.length; l++) {
-     //Keep distance from other edge centers
-     for (var l2 = l + 1; l2 < this.edges.length; l2++) {
-     //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
-     //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
-     //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
-     var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
-     ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
-     l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
-     l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
-
-     // calculate normally distributed force
-     dx = l2x - lx,
-     dy = l2y - ly,
-     distance = Math.sqrt(dx * dx + dy * dy),
-     angle = Math.atan2(dy, dx),
-
-
-     // TODO: correct factor for repulsing force
-     //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-     //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-     repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
-     fx = Math.cos(angle) * repulsingforce,
-     fy = Math.sin(angle) * repulsingforce;
-
-     edges[l].from._addForce(-fx, -fy);
-     edges[l].to._addForce(-fx, -fy);
-     edges[l2].from._addForce(fx, fy);
-     edges[l2].to._addForce(fx, fy);
-     }
-     }
+  // TODO: re-implement repulsion of edges
+
+   // repulsing forces between edges
+   var minimumDistance = this.constants.edges.distance,
+   steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+   for (var l = 0; l < edges.length; l++) {
+   //Keep distance from other edge centers
+   for (var l2 = l + 1; l2 < this.edges.length; l2++) {
+   //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
+   //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
+   //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
+   var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+   ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+   l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
+   l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
+
+   // calculate normally distributed force
+   dx = l2x - lx,
+   dy = l2y - ly,
+   distance = Math.sqrt(dx * dx + dy * dy),
+   angle = Math.atan2(dy, dx),
+
+
+   // TODO: correct factor for repulsing force
+   //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+   //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+   repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
+   fx = Math.cos(angle) * repulsingforce,
+   fy = Math.sin(angle) * repulsingforce;
+
+   edges[l].from._addForce(-fx, -fy);
+   edges[l].to._addForce(-fx, -fy);
+   edges[l2].from._addForce(fx, fy);
+   edges[l2].to._addForce(fx, fy);
+   }
+   }
 */
-  }
 };
 
 
@@ -2024,12 +2023,17 @@ Graph.prototype._loadSectorSystem = function() {
   this.sectors = {};
   this.activeSector = ["default"];
   this.sectors["active"] = {};
-  this.sectors["active"][this.activeSector[this.activeSector.length-1]] = {"nodes":{},
-                                                                           "edges":{},
-                                                                           "nodeIndices":[],
-                                                                           "formationScale": 1.0,
-                                                                           "drawingNode": undefined};
+  this.sectors["active"]["default"] = {"nodes":{},
+                                       "edges":{},
+                                       "nodeIndices":[],
+                                       "formationScale": 1.0,
+                                       "drawingNode": undefined};
   this.sectors["frozen"] = {};
+  this.sectors["UI"] = {"nodes":{},
+                        "edges":{},
+                        "nodeIndices":[],
+                        "formationScale": 1.0,
+                        "drawingNode": undefined};
 
   this.nodeIndices = this.sectors["active"][this.activeSector[this.activeSector.length-1]]["nodeIndices"];  // the node indices list is used to speed up the computation of the repulsion fields
   for (var mixinFunction in SectorMixin) {
@@ -2037,4 +2041,87 @@ Graph.prototype._loadSectorSystem = function() {
       Graph.prototype[mixinFunction] = SectorMixin[mixinFunction];
     }
   }
-};
\ No newline at end of file
+};
+
+
+
+Graph.prototype._loadUISystem = function() {
+  this._loadUIElements();
+}
+
+Graph.prototype._loadUIElements = function() {
+  var DIR = 'img/UI/';
+  this.UIclientWidth = this.frame.canvas.clientWidth;
+  this.UIclientHeight = this.frame.canvas.clientHeight;
+  var UINodes = [
+    {id: 'UI_up',    shape: 'image', image: DIR + 'uparrow.png',
+      verticalAlignTop: false,  x: 50,  y: this.UIclientHeight - 50},
+    {id: 'UI_down',  shape: 'image', image: DIR + 'downarrow.png',
+      verticalAlignTop: false,  x: 50,  y: this.UIclientHeight - 20},
+    {id: 'UI_left',  shape: 'image', image: DIR + 'leftarrow.png',
+      verticalAlignTop: false,  x: 20,  y: this.UIclientHeight - 20},
+    {id: 'UI_right', shape: 'image', image: DIR + 'rightarrow.png',
+      verticalAlignTop: false,  x: 80,  y: this.UIclientHeight - 20},
+    {id: 'UI_plus',  shape: 'image', image: DIR + 'plus.png',
+      verticalAlignTop: false,  x: 130, y: this.UIclientHeight - 20},
+    {id: 'UI_minus', shape: 'image', image: DIR + 'minus.png',
+      verticalAlignTop: false,  x: 160, y: this.UIclientHeight - 20}
+  ];
+
+  for (var i = 0; i < UINodes.length; i++) {
+    this.sectors["UI"]['nodes'][UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants);
+  }
+};
+
+Graph.prototype._relocateUI = function() {
+  var xOffset = this.UIclientWidth - this.frame.canvas.clientWidth;
+  var yOffset = this.UIclientHeight - this.frame.canvas.clientHeight;
+  this.UIclientWidth = this.frame.canvas.clientWidth;
+  this.UIclientHeight = this.frame.canvas.clientHeight;
+  var node = null;
+  for (var nodeId in this.sectors["UI"]["nodes"]) {
+    if (this.sectors["UI"]["nodes"].hasOwnProperty(nodeId)) {
+      node = this.sectors["UI"]["nodes"][nodeId];
+      if (!node.horizontalAlignLeft) {
+        node.x -= xOffset;
+      }
+      if (!node.verticalAlignTop) {
+        node.y -= yOffset;
+      }
+    }
+  }
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/graph/Node.js b/src/graph/Node.js
index ca1442c0..1f067753 100644
--- a/src/graph/Node.js
+++ b/src/graph/Node.js
@@ -44,6 +44,8 @@ function Node(properties, imagelist, grouplist, constants) {
   this.y = 0;
   this.xFixed = false;
   this.yFixed = false;
+  this.horizontalAlignLeft = true; // these are for the UI
+  this.verticalAlignTop    = true; // these are for the UI
   this.radius = constants.nodes.radius;
   this.baseRadiusValue = constants.nodes.radius;
   this.radiusFixed = false;
@@ -148,6 +150,10 @@ Node.prototype.setProperties = function(properties, constants) {
   if (properties.y !== undefined)         {this.y = properties.y;}
   if (properties.value !== undefined)     {this.value = properties.value;}
 
+  // UI properties
+  if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
+  if (properties.verticalAlignTop    !== undefined) {this.verticalAlignTop    = properties.verticalAlignTop;}
+
   if (this.id === undefined) {
     throw "Node must have an id";
   }
@@ -484,6 +490,7 @@ Node.prototype.isOverlappingWith = function(obj) {
 
 Node.prototype._resizeImage = function (ctx) {
   // TODO: pre calculate the image size
+
   if (!this.width || !this.height) {  // undefined or 0
     var width, height;
     if (this.value) {
@@ -506,9 +513,9 @@ Node.prototype._resizeImage = function (ctx) {
     this.height = height;
 
     if (this.width && this.height) {
-      this.width += this.clusterSize * this.clusterSizeWidthFactor;
-      this.height += this.clusterSize * this.clusterSizeHeightFactor;
-      this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+      this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+      this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+      this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
     }
   }
 
@@ -531,6 +538,8 @@ Node.prototype._drawImage = function (ctx) {
       ctx.globalAlpha = 0.5;
       ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
     }
+
+    // draw the image
     ctx.globalAlpha = 1.0;
     ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
     yLabel = this.y + this.height / 2;
@@ -551,9 +560,9 @@ Node.prototype._resizeBox = function (ctx) {
     this.width = textSize.width + 2 * margin;
     this.height = textSize.height + 2 * margin;
 
-    this.width += this.clusterSize * 0.5 * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * 0.5 * this.clusterSizeHeightFactor;
-    //this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
+//    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -600,9 +609,9 @@ Node.prototype._resizeDatabase = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -649,9 +658,9 @@ Node.prototype._resizeCircle = function (ctx) {
     this.height = diameter;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * 0.5*this.clusterSizeRadiusFactor;
+//    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
+//    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -697,9 +706,9 @@ Node.prototype._resizeEllipse = function (ctx) {
     }
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -762,9 +771,9 @@ Node.prototype._resizeShape = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * 0.5 * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
   }
 };
 
@@ -821,9 +830,9 @@ Node.prototype._resizeText = function (ctx) {
     this.height = textSize.height + 2 * margin;
 
     // scaling used for clustering
-    this.width += this.clusterSize * this.clusterSizeWidthFactor;
-    this.height += this.clusterSize * this.clusterSizeHeightFactor;
-    this.radius += this.clusterSize * this.clusterSizeRadiusFactor;
+    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
+    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
+    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
   }
 };
 
diff --git a/src/graph/SectorsMixin.js b/src/graph/SectorsMixin.js
index 860103b5..3950dc00 100644
--- a/src/graph/SectorsMixin.js
+++ b/src/graph/SectorsMixin.js
@@ -70,6 +70,19 @@ var SectorMixin = {
   },
 
 
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices to
+   * those of the UI sector.
+   *
+   * @private
+   */
+  _switchToUISector : function() {
+    this.nodeIndices = this.sectors["UI"]["nodeIndices"];
+    this.nodes       = this.sectors["UI"]["nodes"];
+    this.edges       = this.sectors["UI"]["edges"];
+  },
+
+
   /**
    * This function sets the global references to nodes, edges and nodeIndices back to
    * those of the currently active sector.
@@ -347,11 +360,11 @@ var SectorMixin = {
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we dont pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
-   * @param {*} [args]            |   Optional: arguments to pass to the runFunction
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
-  _doInAllActiveSectors : function(runFunction,args) {
-    if (args === undefined) {
+  _doInAllActiveSectors : function(runFunction,argument) {
+    if (argument === undefined) {
       for (var sector in this.sectors["active"]) {
         if (this.sectors["active"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
@@ -365,7 +378,13 @@ var SectorMixin = {
         if (this.sectors["active"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
           this._switchToActiveSector(sector);
-          this[runFunction](args);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
         }
       }
     }
@@ -378,13 +397,13 @@ var SectorMixin = {
    * This runs a function in all frozen sectors. This is used in the _redraw().
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   we don't pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
-   * @param {*} [args]            |   Optional: arguments to pass to the runFunction
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
-  _doInAllFrozenSectors : function(runFunction,args) {
-    if (args === undefined) {
+  _doInAllFrozenSectors : function(runFunction,argument) {
+    if (argument === undefined) {
       for (var sector in this.sectors["frozen"]) {
         if (this.sectors["frozen"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
@@ -398,7 +417,13 @@ var SectorMixin = {
         if (this.sectors["frozen"].hasOwnProperty(sector)) {
           // switch the global references to those of this sector
           this._switchToFrozenSector(sector);
-          this[runFunction](args);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            this[runFunction](args[0],args[1]);
+          }
+          else {
+            this[runFunction](argument);
+          }
         }
       }
     }
@@ -406,11 +431,38 @@ var SectorMixin = {
   },
 
 
+  /**
+   * This runs a function in all frozen sectors. This is used in the _redraw().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we don't pass the function itself because then the "this" is the window object
+   *                              |   instead of the Graph object
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  _doInUISector : function(runFunction,argument) {
+    this._switchToUISector();
+    if (argument === undefined) {
+      this[runFunction]();
+    }
+    else {
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        this[runFunction](args[0],args[1]);
+      }
+      else {
+        this[runFunction](argument);
+      }
+    }
+    this._loadLatestSector();
+  },
+
+
   /**
    * This runs a function in all sectors. This is used in the _redraw().
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   we don't pass the function itself because then the "this" is the window object
    *                              |   instead of the Graph object
    * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
    * @private
diff --git a/src/graph/SelectionMixin.js b/src/graph/SelectionMixin.js
new file mode 100644
index 00000000..156a34c7
--- /dev/null
+++ b/src/graph/SelectionMixin.js
@@ -0,0 +1,27 @@
+
+var SelectionMixin = {
+
+  _getNodeAt : function(pointer) {
+
+  },
+
+  _getEdgeAt : function(pointer) {
+
+  },
+
+  _handleTap : function() {
+
+  },
+
+  _selectObject : function() {
+
+  },
+
+  _deselectObject : function() {
+
+  }
+
+
+
+
+}