diff --git a/Animation.js b/Animation.js
index cd00a0fb7..41ec4c976 100644
--- a/Animation.js
+++ b/Animation.js
@@ -27,15 +27,18 @@ function newAnimation () {
 
   let totalConsumption = 0
   let totalCounter = 0
-
+  let pointerIcon
+  let videoRecorder
   return thisObject
 
   function finalize () {
     thisObject.stop()
+    pointerIcon = undefined
+    videoRecorder = undefined
   }
 
   function initialize () {
-
+    videoRecorder = newVideoRecorder()
   }
 
   function start () {
@@ -73,8 +76,9 @@ function newAnimation () {
         let mustExecute
 
         // console.clear()
-
+        let row = 0
         for (const [key, callBackFunction] of callBackFunctions.entries()) {
+          row++
           switch (key) {
             case 'Floating Space Physics':
               chanceToExecute = 50
@@ -86,14 +90,13 @@ function newAnimation () {
             }
 
           }
+          let timeConsumed = 0
           if (mustExecute === true) {
             let t0 = performance.now()
             callBackFunction()
             let t1 = performance.now()
-            let timeConsumed = t1 - t0
-            if (key === 'Chart Space Draw') {
-              // console.log(key, (totalConsumption / totalCounter).toFixed(1))
-
+            timeConsumed = t1 - t0
+            if (key === 'Charting Space Draw') {
               if (Math.random() * 100 > 99) {
                 totalConsumption = 0
                 totalCounter = 0
@@ -109,18 +112,37 @@ function newAnimation () {
         }
 
         /* Performance Check */
-
-        for (const [key, timeConsumed] of performanceMap.entries()) {
-          let percentage = timeConsumed * 100 / totalTimeConsumed
-          if (key === 'Chart Space Draw') {
-                      // console.log(key, percentage.toFixed(0))
+        if (SHOW_ANIMATION_PERFORMACE === true) {
+          row = 0
+          for (const [key, timeConsumed] of performanceMap.entries()) {
+            row++
+            labelToPrint = key + '   ' + timeConsumed.toFixed(4)
+            printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED)
+            let percentage = timeConsumed * 100 / totalTimeConsumed
+            labelToPrint = key + '   ' + percentage.toFixed(1) + '%'
+            printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
           }
+
+          /* Other Variables */
+          row++
+          printLabel(DEBUG.variable1, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable2, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
         }
       } else {
         browserCanvas.width = 1
         browserCanvas.height = 1
       }
 
+      /* Media Recording */
+      if (areWeRecording === true) {
+        videoRecorder.recordCanvas()
+      }
+
       /* We request the next frame to be drawn, and stablishing a loop */
 
       /* Use this code for full animation speed. */
@@ -148,4 +170,3 @@ function newAnimation () {
     browserCanvasContext.fill()
   }
 }
-
diff --git a/Canvas.js b/Canvas.js
index a37e2f31e..50e4a896e 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -32,13 +32,14 @@ function newCanvas () {
   let thisObject = {
     eventHandler: undefined,
     topSpace: undefined,
-    chartSpace: undefined,
+    chartingSpace: undefined,
     floatingSpace: undefined,
     panelsSpace: undefined,
     cockpitSpace: undefined,
     bottomSpace: undefined,
-    designerSpace: undefined,
+    designSpace: undefined,
     animation: undefined,
+    mouse: undefined,
     initialize: initialize,
     finalize: finalize
   }
@@ -49,11 +50,18 @@ function newCanvas () {
   let lastContainerMouseOver
   let lastShortcutKeyRejection
 
+  thisObject.mouse = {
+    position: {
+      x: 0,
+      y: 0
+    },
+    action: ''
+  }
   return thisObject
 
   function finalize () {
     try {
-      thisObject.chartSpace.finalize()
+      thisObject.chartingSpace.finalize()
       thisObject.floatingSpace.finalize()
 
       browserCanvas.removeEventListener('mousedown', onMouseDown, false)
@@ -73,9 +81,12 @@ function newCanvas () {
       browserCanvas.removeEventListener('drop', onDragDrop, false)
 
       browserCanvas.removeEventListener('keydown', onKeyDown, false)
+      browserCanvas.removeEventListener('keyup', onKeyUp, false)
 
       splashScreen = undefined
       lastContainerMouseOver = undefined
+
+      hisObject.mouse = undefined
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
@@ -95,8 +106,8 @@ function newCanvas () {
       thisObject.topSpace = newTopSpace()
       thisObject.topSpace.initialize()
 
-      thisObject.designerSpace = newDesignerSpace()
-      thisObject.designerSpace.initialize()
+      thisObject.designSpace = newDesignSpace()
+      thisObject.designSpace.initialize()
 
       thisObject.cockpitSpace = newCockpitSpace()
       thisObject.cockpitSpace.initialize()
@@ -104,8 +115,8 @@ function newCanvas () {
       thisObject.panelsSpace = newPanelsSpace()
       thisObject.panelsSpace.initialize()
 
-      thisObject.chartSpace = newChartSpace()
-      thisObject.chartSpace.initialize()
+      thisObject.chartingSpace = newChartingSpace()
+      thisObject.chartingSpace.initialize()
 
       thisObject.bottomSpace = thisObject.cockpitSpace
 
@@ -122,16 +133,16 @@ function newCanvas () {
       /* Spcaces Physics */
       animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics)
       animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics)
-      animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
-      animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics)
+      animation.addCallBackFunction('Charting Space Physics', thisObject.chartingSpace.physics)
+      animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
 
       /* Spcaces Drawing */
       animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
-      animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw)
+      animation.addCallBackFunction('Charting Space Draw', thisObject.chartingSpace.draw)
       animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
-      animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
+      animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw)
       animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
       animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw)
       animation.start()
@@ -155,6 +166,7 @@ function newCanvas () {
 
       /* Keyboard events */
       window.addEventListener('keydown', onKeyDown, true)
+      window.addEventListener('keyup', onKeyUp, true)
 
       /* Mouse Events */
       browserCanvas.addEventListener('mousedown', onMouseDown, false)
@@ -194,8 +206,52 @@ function newCanvas () {
     }
   }
 
+  function checkMediaRecording (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)) {
+      let constructorParams
+      switch (event.keyCode) {
+        case 119: { //  F8
+          downloadCanvas('Superalgos.image.capture')
+          return
+          break
+        }
+        case 120: { //  F9
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'}
+          break
+        }
+        case 121: { //  F10
+          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' }
+          break
+        }
+        default: return
+      }
+
+      if (areWeRecording === false) {
+        console.log('RECORDING', constructorParams.format)
+        mediaRecorder = new CCapture(constructorParams)
+        mediaRecorder.start()
+        areWeRecording = true
+      } else {
+        console.log('SAVING', constructorParams.format)
+        areWeRecording = false
+        mediaRecorder.stop()
+        mediaRecorder.save()
+      }
+    }
+  }
+
+  function onKeyUp (event) {
+    thisObject.mouse.event = event
+    thisObject.mouse.action = 'key up'
+  }
+
   function onKeyDown (event) {
-    let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
+    thisObject.mouse.event = event
+    thisObject.mouse.action = 'key down'
+
+    checkMediaRecording(event)
+
+    let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
       if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) {
         if (nodeOnFocus.payload.uiObject.codeEditor.visible === true) {
@@ -231,61 +287,52 @@ function newCanvas () {
       }
     }
 
-    if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Regenerates APP SCHEMA FILE
-      /*
-      for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
-        let schemaNode = APP_SCHEMA_ARRAY[i]
-        schemaNode.addLeftIcons = true
+    if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Dev Tool when used with F11
+      if (SHOW_ANIMATION_PERFORMACE === false) {
+        SHOW_ANIMATION_PERFORMACE = true
+      } else {
+        SHOW_ANIMATION_PERFORMACE = false
       }
-      */
-      let text = JSON.stringify(APP_SCHEMA_ARRAY)
-      let fileName = 'AppSchema.json'
-      download(fileName, text)
       return
     }
 
-    if (event.altKey === true && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
     }
 
-    if (event.altKey === true && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
       thisObject.cockpitSpace.toBottom()
       return
     }
 
-    if (event.altKey === true && event.code === 'ArrowLeft' || event.altKey === true && event.code === 'ArrowRight') {
-      thisObject.cockpitSpace.toMiddle()
-      return
-    }
-
-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft') {
       thisObject.cockpitSpace.moveUp()
       return
     }
 
-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
       thisObject.cockpitSpace.moveDown()
       return
     }
 
     if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowLeft') {
-      canvas.chartSpace.oneScreenLeft()
+      canvas.chartingSpace.oneScreenLeft()
       return
     }
 
     if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowRight') {
-      canvas.chartSpace.oneScreenRight()
+      canvas.chartingSpace.oneScreenRight()
       return
     }
 
     if (event.shiftKey === true && event.code === 'ArrowUp') {
-      canvas.chartSpace.oneScreenUp()
+      canvas.chartingSpace.oneScreenUp()
       return
     }
 
     if (event.shiftKey === true && event.code === 'ArrowDown') {
-      canvas.chartSpace.oneScreenDown()
+      canvas.chartingSpace.oneScreenDown()
       return
     }
 
@@ -333,7 +380,7 @@ function newCanvas () {
         /* From here we prevent the default behaviour */
         event.preventDefault()
 
-        let nodeUsingThisKey = canvas.designerSpace.workspace.getNodeByShortcutKey(event.key)
+        let nodeUsingThisKey = canvas.designSpace.workspace.getNodeByShortcutKey(event.key)
 
         if (nodeOnFocus === undefined && nodeUsingThisKey !== undefined) {
           /* Then we displace the whole workspace to center it at the node using this key */
@@ -424,7 +471,7 @@ function newCanvas () {
             x: event.x,
             y: event.y
           }
-          thisObject.designerSpace.workspace.spawn(reader.result, mousePosition)
+          thisObject.designSpace.workspace.spawn(reader.result, mousePosition)
         }
       }
     } catch (err) {
@@ -434,20 +481,32 @@ function newCanvas () {
 
   function onMouseDown (event) {
     try {
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN,
-        button: event.button
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      switch (event.buttons) {
+        case 1: {
+          thisObject.mouse.action = 'clicking with left button'
+          break
+        }
+        case 2: {
+          thisObject.mouse.action = 'clicking with right button'
+          break
+        }
       }
 
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+
       dragVector.downX = point.x
       dragVector.downY = point.y
 
       let container
 
-            /* We check if the mouse is over an element of the Strategy Space / */
+            /* We check if the mouse is over an element of the Design Space / */
 
-      container = thisObject.designerSpace.getContainer(point)
+      container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
         containerBeingDragged = container
@@ -491,7 +550,7 @@ function newCanvas () {
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isDraggeable === true && event.button === 2) {
+      if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
         containerBeingDragged = container
         containerDragStarted = true
         containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -503,18 +562,20 @@ function newCanvas () {
         return
       }
 
-           /*  we check if it is over any of the existing containers at the Chart Space. */
+           /*  we check if it is over any of the existing containers at the Charting Space. */
 
-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined) {
-        if (container.isDraggeable === true && event.button === 2) {
+        if (container.isDraggeable === true) {
           containerBeingDragged = container
           containerDragStarted = true
           containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
           return
         } else {
-          viewPortBeingDragged = true
+          if (container.isClickeable === false) {
+            viewPortBeingDragged = true
+          }
           return
         }
       }
@@ -544,16 +605,16 @@ function newCanvas () {
         ignoreNextClick = false
         return
       }
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
 
       let container
 
-            /* We check if the mouse is over an element of the Strategy Space / */
+            /* We check if the mouse is over an element of the Design Space / */
 
-      container = thisObject.designerSpace.getContainer(point)
+      container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -587,9 +648,9 @@ function newCanvas () {
         return
       }
 
-           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
 
-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -625,15 +686,19 @@ function newCanvas () {
 
   function onMouseMove (event) {
     try {
-      /* Processing the event */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      thisObject.mouse.action = 'moving'
 
-      if (canvas.chartSpace.viewport !== undefined) {
-        canvas.chartSpace.viewport.mousePosition.x = point.x
-        canvas.chartSpace.viewport.mousePosition.y = point.y
+      /* Processing the event */
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+
+      if (canvas.chartingSpace.viewport !== undefined) {
+        canvas.chartingSpace.viewport.mousePosition.x = point.x
+        canvas.chartingSpace.viewport.mousePosition.y = point.y
       }
 
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
@@ -673,26 +738,22 @@ function newCanvas () {
 
   function onMouseOver (event) {
     try {
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+
       if (containerDragStarted === true) {
-        let point = {
-          x: event.pageX,
-          y: event.pageY - CURRENT_TOP_MARGIN
-        }
         containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
 
        /* Then we check who is the current object underneeth the mounse. */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
 
       let container
 
       /* We check if the mouse is over an element of the Strategy Space / */
-      if (thisObject.designerSpace !== undefined) {
-        container = thisObject.designerSpace.getContainer(point)
+      if (thisObject.designSpace !== undefined) {
+        container = thisObject.designSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()
@@ -730,9 +791,9 @@ function newCanvas () {
         }
       }
 
-       /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
-      if (thisObject.chartSpace !== undefined) {
-        container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
+       /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
+      if (thisObject.chartingSpace !== undefined) {
+        container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()
@@ -766,6 +827,11 @@ function newCanvas () {
 
   function onMouseWheel (event) {
     try {
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      thisObject.mouse.action = 'wheel'
+
            // cross-browser wheel delta
       var event = window.event || event // old IE support
       event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
@@ -795,16 +861,16 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-          /*   Chart Space. */
+          /*   Charting Space. */
 
-      container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
+      container = canvas.chartingSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
       if (container !== undefined && container.isWheelable === true) {
         container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
       if (container !== undefined) {
-        canvas.chartSpace.viewport.onMouseWheel(event)
+        canvas.chartingSpace.viewport.onMouseWheel(event)
         return false
       }
 
@@ -856,52 +922,64 @@ function newCanvas () {
   function checkDrag (event) {
     try {
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
+        thisObject.mouse.event = event
+        thisObject.mouse.position.x = event.pageX
+        thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+        thisObject.mouse.action = 'dragging'
+
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)
 
-        if (containerDragStarted || viewPortBeingDragged) {
+        if (viewPortBeingDragged) {
           let displaceVector = {
             x: dragVector.upX - dragVector.downX,
             y: dragVector.upY - dragVector.downY
           }
 
-          if (containerBeingDragged !== undefined && containerBeingDragged.insideViewport === true) {
-            let downCopy = {
-              x: dragVector.downX,
-              y: dragVector.downY
-            }
-
-            let downNoZoom
-            downNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(downCopy)
-
-            let upCopy = {
-              x: dragVector.upX,
-              y: dragVector.upY
-            }
-
-            let upNoZoom
-            upNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(upCopy)
-
-            displaceVector = {
-              x: upNoZoom.x - downNoZoom.x,
-              y: upNoZoom.y - downNoZoom.y
-            }
-          }
-
-          if (viewPortBeingDragged) {
-            canvas.chartSpace.viewport.displace(displaceVector)
-          }
-
+          canvas.chartingSpace.viewport.displace(displaceVector)
+        }
+        if (containerDragStarted) {
           if (containerBeingDragged !== undefined) {
-            let moveSucceed = containerBeingDragged.displace(displaceVector)
-            if (moveSucceed === false) {
-              deactivateDragging(event)
+            if (containerBeingDragged.space === 'Charting Space') {
+              let downCopy = {
+                x: dragVector.downX,
+                y: dragVector.downY
+              }
+
+              let downNoZoom
+              downNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(downCopy)
+
+              let upCopy = {
+                x: dragVector.upX,
+                y: dragVector.upY
+              }
+
+              let upNoZoom
+              upNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(upCopy)
+
+              displaceVector = {
+                x: upNoZoom.x - downNoZoom.x,
+                y: upNoZoom.y - downNoZoom.y
+              }
+
+              let moveSucceed = containerBeingDragged.displace(displaceVector)
+              if (moveSucceed === false) {
+                deactivateDragging(event)
+              }
+            } else {
+              let displaceVector = {
+                x: dragVector.upX - dragVector.downX,
+                y: dragVector.upY - dragVector.downY
+              }
+              let moveSucceed = containerBeingDragged.displace(displaceVector)
+              if (moveSucceed === false) {
+                deactivateDragging(event)
+              }
             }
           }
         }
 
-               /* Finally we set the starting point of the new dragVector at this current point. */
-
+        /* Finally we set the starting point of the new dragVector at this current point. */
         dragVector.downX = dragVector.upX
         dragVector.downY = dragVector.upY
       }
diff --git a/ChartsSpace/ChartUtilities.js b/ChartingSpace/ChartUtilities.js
similarity index 100%
rename from ChartsSpace/ChartUtilities.js
rename to ChartingSpace/ChartUtilities.js
diff --git a/ChartsSpace/CoordinateSystem.js b/ChartingSpace/CoordinateSystem.js
similarity index 50%
rename from ChartsSpace/CoordinateSystem.js
rename to ChartingSpace/CoordinateSystem.js
index 6edfffcab..4fbfc24bd 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartingSpace/CoordinateSystem.js
@@ -15,6 +15,15 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
+    autoMinXScale: true,
+    autoMaxXScale: true,
+    autoMinYScale: true,
+    autoMaxYScale: true,
+    physics: physics,
+    reportXValue: reportXValue,
+    reportYValue: reportYValue,
+    zoomX: zoomX,
+    zoomY: zoomY,
     recalculateScale: recalculateScale,
     transformThisPoint: transformThisPoint,
     transformThisPoint2: transformThisPoint2,
@@ -42,6 +51,14 @@ function newCoordinateSystem () {
   thisObject.eventHandler = newEventHandler()
   thisObject.eventHandler.name = 'Coordinate System'
 
+  let newXMax = -VERY_LARGE_NUMBER
+  let newXMin = VERY_LARGE_NUMBER
+  let noXValueReported = true
+
+  let newYMax = -VERY_LARGE_NUMBER
+  let newYMin = VERY_LARGE_NUMBER
+  let noYValueReported = true
+
   return thisObject
 
   function finalize () {
@@ -51,11 +68,11 @@ function newCoordinateSystem () {
 
   function initialize (minValue, maxValue, pMaxWidth, pMaxHeight) {
     /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
-    thisObject.min.x = minValue.x // * 0.999; // 0.1% less
-    thisObject.max.x = maxValue.x // * 1.001; // 0.1% more
+    thisObject.min.x = minValue.x
+    thisObject.max.x = maxValue.x
 
-    thisObject.min.y = minValue.y // * 0.999; // 0.1% less
-    thisObject.max.y = maxValue.y // * 1.001; // 0.1% more
+    thisObject.min.y = minValue.y
+    thisObject.max.y = maxValue.y
 
     thisObject.maxWidth = pMaxWidth
     thisObject.maxHeight = pMaxHeight
@@ -63,12 +80,119 @@ function newCoordinateSystem () {
     recalculateScale()
   }
 
-  function recalculateScale () {
-    /* Defines the initial Zoom level at center position. */
+  function physics () {
+    let mustRecalculate = false
+
+    if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true) && noXValueReported === false) {
+      if (thisObject.autoMaxXScale === true && thisObject.max.x !== newXMax) {
+        thisObject.max.x = newXMax
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMaxXScale === true) {
+        newXMax = -VERY_LARGE_NUMBER
+      }
+
+      if (thisObject.autoMinXScale === true && thisObject.min.x !== newXMin) {
+        thisObject.min.x = newXMin
+        newXMin = VERY_LARGE_NUMBER
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMinXScale === true) {
+        newXMin = VERY_LARGE_NUMBER
+      }
+
+      /* Reseting this to start over at each cycle. */
+      noXValueReported = true
+    }
+
+    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
+      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newYMax) {
+        thisObject.max.y = newYMax
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMaxYScale === true) {
+        newYMax = -VERY_LARGE_NUMBER
+      }
+
+      if (thisObject.autoMinYScale === true && thisObject.min.y !== newYMin) {
+        thisObject.min.y = newYMin
+        newYMin = VERY_LARGE_NUMBER
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMinYScale === true) {
+        newYMin = VERY_LARGE_NUMBER
+      }
+
+      /* Reseting this to start over at each cycle. */
+      noYValueReported = true
+    }
+
+    if (mustRecalculate === true) {
+      recalculateScale()
+    }
+  }
+
+  function reportXValue (value) {
+    if (thisObject.autoMinXScale === true) {
+      if (value < newXMin) { newXMin = value }
+      noXValueReported = false
+    }
+    if (thisObject.autoMaxXScale === true) {
+      if (value > newXMax) { newXMax = value }
+      noXValueReported = false
+    }
+  }
+
+  function reportYValue (value) {
+    if (thisObject.autoMinYScale === true) {
+      if (value < newYMin) { newYMin = value }
+      noYValueReported = false
+    }
+    if (thisObject.autoMaxYScale === true) {
+      if (value > newYMax) { newYMax = value }
+      noYValueReported = false
+    }
+  }
+
+  function zoomX (factor, mousePosition, container) {
+    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+    let leftDistance = mouseAtCointainer.x
+    let rightDistance = container.frame.width - mouseAtCointainer.x
+    let diff = thisObject.max.x - thisObject.min.x
+    let min = thisObject.min.x + diff * factor * leftDistance / (container.frame.width / 2)
+    let max = thisObject.max.x - diff * factor * rightDistance / (container.frame.width / 2)
+
+    if (min < max) {
+      thisObject.min.x = min
+      thisObject.max.x = max
+      thisObject.recalculateScale()
+    }
+  }
+
+  function zoomY (factor, mousePosition, container) {
+    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+    let topDistance = mouseAtCointainer.y
+    let bottomDistance = container.frame.height - mouseAtCointainer.y
+    let diff = thisObject.max.y - thisObject.min.y
+    let min = thisObject.min.y + diff * factor * bottomDistance / (container.frame.height / 2)
+    let max = thisObject.max.y - diff * factor * topDistance / (container.frame.height / 2)
+
+    if (min < max) {
+      thisObject.min.y = min
+      thisObject.max.y = max
+      thisObject.recalculateScale()
+    }
+  }
+
+  function recalculateScale (event) {
     thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
     thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
 
-    thisObject.eventHandler.raiseEvent('Scale Changed')
+    thisObject.eventHandler.raiseEvent('Scale Changed', event)
   }
 
   function initializeX (minValue, maxValue, maxWidth) {
diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js
new file mode 100644
index 000000000..f40dffd2f
--- /dev/null
+++ b/ChartingSpace/EdgeEditor.js
@@ -0,0 +1,475 @@
+function newEdgeEditor () {
+  const MODULE_NAME = 'Edge Editor'
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    isVisible: true,
+    physics: physics,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  const EDGE_SIZE = 6
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = true
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.detectMouseOver = true
+
+  let buttonUsedForDragging
+  let isMouseOver
+  let whereIsMouseOver = 'outside'
+
+  let coordinateSystem
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+  let onDragStartedEventSubscriptionId
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    mouse = undefined
+  }
+
+  function initialize (pCoordinateSystem) {
+    coordinateSystem = pCoordinateSystem
+
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+  }
+
+  function onMouseOver (event) {
+    isMouseOver = true
+    mouse = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function onDragStarted (event) {
+    switch (event.buttons) {
+      case 1: {
+        buttonUsedForDragging = 'left mouse button'
+        break
+      }
+      case 2: {
+        buttonUsedForDragging = 'right mouse button'
+        break
+      }
+    }
+  }
+
+  function getContainer (event, purpose) {
+    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
+      let point = {
+        x: event.x,
+        y: event.y
+      }
+      point = unTransformThisPoint(point, thisObject.container)
+
+      if (point.x <= 0) {
+        whereIsMouseOver = 'left'
+        return thisObject.container
+      }
+
+      if (point.x >= thisObject.container.frame.width) {
+        whereIsMouseOver = 'right'
+        return thisObject.container
+      }
+
+      if (point.y <= 0) {
+        whereIsMouseOver = 'top'
+        return thisObject.container
+      }
+
+      if (point.y >= thisObject.container.frame.height) {
+        whereIsMouseOver = 'bottom'
+        return thisObject.container
+      }
+
+      whereIsMouseOver = 'center'
+      switch (purpose) {
+        case GET_CONTAINER_PURPOSE.MOUSE_OVER:
+          return // We will let the Time Machine to handle this situation.
+          break
+        case GET_CONTAINER_PURPOSE.DRAGGING:
+          return thisObject.container
+          break
+      }
+    }
+  }
+
+  function physics () {
+    if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
+
+    let dragVector = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    const MIN_WIDTH = 100
+    const MIN_HEIGHT = 50
+
+    switch (whereIsMouseOver) {
+      case 'center': {
+        switch (buttonUsedForDragging) {
+          case 'right mouse button': {
+            /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
+            thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
+            thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
+            thisObject.container.parentContainer.eventHandler.raiseEvent('onDisplace')
+            break
+          }
+          case 'left mouse button': {
+            let point = {
+              x: -dragVector.x,
+              y: -dragVector.y
+            }
+            let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+            let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+            let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+            coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+            coordinateSystem.max.y = newMaxRate
+            let event = {
+              type: 'center dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
+        break
+      }
+      case 'top' : {
+        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT && dragVector.y > 0) {
+          return
+        }
+
+        let point = {
+          x: dragVector.x,
+          y: dragVector.y
+        }
+        let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            coordinateSystem.max.y = newMaxRate
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            let event = {
+              type: 'top dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'bottom' : {
+        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) {
+          return
+        }
+
+        let point = {
+          x: dragVector.x,
+          y: dragVector.y + thisObject.container.frame.height
+        }
+        let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            coordinateSystem.min.y = newMinRate
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            let event = {
+              type: 'bottom dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'left' : {
+        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) {
+          return
+        }
+        let point = {
+          x: dragVector.x,
+          y: dragVector.y
+        }
+        let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'right' : {
+        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) {
+          return
+        }
+
+        let point = {
+          x: dragVector.x + thisObject.container.frame.width,
+          y: dragVector.y
+        }
+        let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            coordinateSystem.max.x = newMaxDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+    }
+  }
+
+  function drawForeground () {
+    let MARGIN = 1
+    let edgeSize
+    let lineWidth
+
+    if (whereIsMouseOver === 'outside' || isMouseOver === false) {
+      edgeSize = EDGE_SIZE / 2
+      lineWidth = 0.1
+    } else {
+      edgeSize = EDGE_SIZE
+      lineWidth = 0.5
+    }
+
+    const OPACITY = 1
+
+    pointA1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointA2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointA3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointA4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointB1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointB2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointB3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointB4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointA1 = transformThisPoint(pointA1, thisObject.container)
+    pointA2 = transformThisPoint(pointA2, thisObject.container)
+    pointA3 = transformThisPoint(pointA3, thisObject.container)
+    pointA4 = transformThisPoint(pointA4, thisObject.container)
+
+    pointB1 = transformThisPoint(pointB1, thisObject.container)
+    pointB2 = transformThisPoint(pointB2, thisObject.container)
+    pointB3 = transformThisPoint(pointB3, thisObject.container)
+    pointB4 = transformThisPoint(pointB4, thisObject.container)
+
+    pointA1 = {
+      x: pointA1.x - MARGIN,
+      y: pointA1.y - MARGIN
+    }
+
+    pointA2 = {
+      x: pointA2.x + MARGIN,
+      y: pointA2.y - MARGIN
+    }
+
+    pointA3 = {
+      x: pointA3.x + MARGIN,
+      y: pointA3.y + MARGIN
+    }
+
+    pointA4 = {
+      x: pointA4.x - MARGIN,
+      y: pointA4.y + MARGIN
+    }
+
+    pointB1 = {
+      x: pointB1.x - edgeSize,
+      y: pointB1.y - edgeSize
+    }
+
+    pointB2 = {
+      x: pointB2.x + edgeSize,
+      y: pointB2.y - edgeSize
+    }
+
+    pointB3 = {
+      x: pointB3.x + edgeSize,
+      y: pointB3.y + edgeSize
+    }
+
+    pointB4 = {
+      x: pointB4.x - edgeSize,
+      y: pointB4.y + edgeSize
+    }
+
+    pointA1 = canvas.chartingSpace.viewport.fitIntoViewport(pointA1)
+    pointA2 = canvas.chartingSpace.viewport.fitIntoViewport(pointA2)
+    pointA3 = canvas.chartingSpace.viewport.fitIntoViewport(pointA3)
+    pointA4 = canvas.chartingSpace.viewport.fitIntoViewport(pointA4)
+
+    pointB1 = canvas.chartingSpace.viewport.fitIntoViewport(pointB1)
+    pointB2 = canvas.chartingSpace.viewport.fitIntoViewport(pointB2)
+    pointB3 = canvas.chartingSpace.viewport.fitIntoViewport(pointB3)
+    pointB4 = canvas.chartingSpace.viewport.fitIntoViewport(pointB4)
+
+    browserCanvasContext.setLineDash([0, 0])
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('top')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('right')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('bottom')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('left')
+
+    function drawEdge (edgeType) {
+      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+      } else {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+      }
+      browserCanvasContext.fill()
+      browserCanvasContext.stroke()
+    }
+  }
+}
diff --git a/ChartsSpace/PlottersManager.js b/ChartingSpace/PlottersManager.js
similarity index 100%
rename from ChartsSpace/PlottersManager.js
rename to ChartingSpace/PlottersManager.js
diff --git a/ChartsSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
similarity index 81%
rename from ChartsSpace/TimeMachine.js
rename to ChartingSpace/TimeMachine.js
index 02c872aed..71122a7d9 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -21,6 +21,7 @@ function newTimeMachine () {
     timeScale: undefined,
     rateScale: undefined,
     payload: undefined,
+    edgeEditor: undefined,
     timelineCharts: [],
     fitFunction: fitFunction,
     physics: physics,
@@ -49,12 +50,11 @@ function newTimeMachine () {
   let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
-  let timeScaleValueEventSuscriptionId
   let timeScaleMouseOverEventSuscriptionId
-  let rateScaleValueEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
+  let onScaleChangedEventSubscriptionId
 
   setupContainer()
   return thisObject
@@ -63,7 +63,7 @@ function newTimeMachine () {
     thisObject.container = newContainer()
     thisObject.container.initialize(MODULE_NAME)
     thisObject.container.fitFunction = thisObject.fitFunction
-    thisObject.container.isDraggeable = true
+    thisObject.container.isDraggeable = false
     thisObject.container.insideViewport = true
     thisObject.container.detectMouseOver = true
 
@@ -72,8 +72,9 @@ function newTimeMachine () {
   }
 
   function finalize () {
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+    timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     if (thisObject.timeScale !== undefined) {
       finalizeTimeScale()
@@ -101,6 +102,7 @@ function newTimeMachine () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.payload = undefined
+    thisObject.edgeEditor = undefined
 
     mouse = undefined
     timelineChartsMap = undefined
@@ -112,7 +114,6 @@ function newTimeMachine () {
   function finalizeTimeScale () {
     if (thisObject.timeScale === undefined) { return }
 
-    thisObject.timeScale.container.eventHandler.stopListening(timeScaleValueEventSuscriptionId)
     thisObject.timeScale.container.eventHandler.stopListening(timeScaleMouseOverEventSuscriptionId)
     thisObject.timeScale.finalize()
     thisObject.timeScale = undefined
@@ -121,7 +122,6 @@ function newTimeMachine () {
   function finalizeRateScale () {
     if (thisObject.rateScale === undefined) { return }
 
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
     thisObject.rateScale.finalize()
     thisObject.rateScale = undefined
@@ -139,17 +139,22 @@ function newTimeMachine () {
   function initialize (callBackFunction) {
     timeFrame = INITIAL_TIME_PERIOD
     loadFrame(thisObject.payload, thisObject.container.frame)
+    saveFrame(thisObject.payload, thisObject.container.frame)
 
     recalculateCoordinateSystem()
     recalculateCurrentDatetime()
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onViewportPositionChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+    onViewportZoomChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    onScaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
-    onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
-    onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    thisObject.edgeEditor = newEdgeEditor()
+    thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
+    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
-    callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+    callBackFunction()
   }
 
   function onMouseOver (event) {
@@ -188,23 +193,9 @@ function newTimeMachine () {
     thisObject.timeScale.fitFunction = thisObject.fitFunction
     thisObject.timeScale.payload = thisObject.payload.node.timeScale.payload
 
-    timeScaleValueEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Time Scale Value Changed', timeScaleValueChanged)
     timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOverScale', timeScaleMouseOver)
     thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
-    function timeScaleValueChanged (event) {
-      if (event.isUserAction === true) {
-        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
-        recalculateCoordinateSystem()
-        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, false, true, event.mousePosition)
-      } else {
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
-        recalculateCoordinateSystem()
-      }
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
     function timeScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
     }
@@ -215,25 +206,9 @@ function newTimeMachine () {
     thisObject.rateScale.fitFunction = thisObject.fitFunction
     thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
-    rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
     thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container, thisObject.container)
 
-    function rateScaleValueChanged (event) {
-      if (event.isUserAction === true) {
-        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-        recalculateCoordinateSystem()
-        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, true, false, event.mousePosition)
-      } else {
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-        recalculateCoordinateSystem()
-      }
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-      thisObject.container.eventHandler.raiseEvent('Upstream Rate Scale Value Changed', event)
-    }
     function rateScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
     }
@@ -270,25 +245,33 @@ function newTimeMachine () {
     let container
 
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
-      container = thisObject.rateScale.getContainer(point)
+      container = thisObject.rateScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            return container
+          }
         }
       }
     }
 
     if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) {
-      container = thisObject.timeScale.getContainer(point)
+      container = thisObject.timeScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            return container
+          }
         }
       }
     }
 
     if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
-      container = thisObject.timeFrameScale.getContainer(point)
+      container = thisObject.timeFrameScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -303,12 +286,25 @@ function newTimeMachine () {
           if (thisObject.container.frame.isThisPointHere(point) === true) {
             return container
           }
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            if (thisObject.container.frame.isThisPointHere(point) === true) {
+              return container
+            }
+          }
         }
       }
     }
 
-    if (thisObject.container.frame.isThisPointHere(point) === true) {
-      return thisObject.container
+    container = thisObject.edgeEditor.getContainer(point, purpose)
+    if (container !== undefined) {
+      return container
+    } else {
+      if (thisObject.container.isForThisPurpose(purpose)) {
+        if (thisObject.container.frame.isThisPointHere(point) === true) {
+          return thisObject.container
+        }
+      }
     }
   }
 
@@ -324,14 +320,18 @@ function newTimeMachine () {
     }
   }
 
+  function onScaleChanged () {
+    recalculateCurrentDatetime()
+  }
+
   function recalculateCurrentDatetime () {
      /*
      The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
      must calculate.
      */
     let center = {
-      x: (canvas.chartSpace.viewport.visibleArea.bottomRight.x - canvas.chartSpace.viewport.visibleArea.bottomLeft.x) / 2,
-      y: (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2
+      x: (canvas.chartingSpace.viewport.visibleArea.bottomRight.x - canvas.chartingSpace.viewport.visibleArea.bottomLeft.x) / 2,
+      y: (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2
     }
 
     center = unTransformThisPoint(center, thisObject.container)
@@ -346,7 +346,7 @@ function newTimeMachine () {
   }
 
   function fitFunction (point, fullVisible, margin, topMargin, bottomMargin) {
-     /* We prevent a point to be out of the container AND out of the Chart Space in general */
+     /* We prevent a point to be out of the container AND out of the Charting Space in general */
 
     let returnPoint = {
       x: point.x,
@@ -376,12 +376,15 @@ function newTimeMachine () {
     if (returnPoint.y - margin - topMargin < upCorner.y) { returnPoint.y = upCorner.y + margin + topMargin }
     if (returnPoint.y + margin + bottomMargin > bottonCorner.y) { returnPoint.y = bottonCorner.y - margin - bottomMargin }
 
-    returnPoint = canvas.chartSpace.fitFunction(returnPoint, fullVisible)
+    returnPoint = canvas.chartingSpace.fitFunction(returnPoint, fullVisible)
 
     return returnPoint
   }
 
   function physics () {
+    thisObject.edgeEditor.physics()
+    timeMachineCoordinateSystem.physics()
+
     saveFrame(thisObject.payload, thisObject.container.frame)
     if (thisObject.container.frame.isInViewPort()) {
       childrenPhysics()
@@ -391,10 +394,12 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort()) {
-      canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
+    if (thisObject.container.frame.isInViewPort() && canvas.chartingSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
     } else {
-      canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.hide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.hide(thisObject.payload.node.id, 'Plotter Panel')
     }
   }
 
@@ -475,7 +480,7 @@ function newTimeMachine () {
       timelineChart.container.frame.height = thisObject.container.frame.height
       timelineChart.container.frame.position.x = 0
       timelineChart.container.frame.position.y = 0
-      timelineChart.initialize(timeMachineCoordinateSystem)
+      timelineChart.initialize(timeMachineCoordinateSystem, timeFrame)
 
       /* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */
       timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver)
@@ -521,6 +526,8 @@ function newTimeMachine () {
   }
 
   function draw () {
+    if (thisObject.payload === undefined) { return }
+    if (thisObject.payload.node === undefined) { return }
     if (thisObject.container.frame.isInViewPort()) {
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
         let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]
@@ -533,7 +540,7 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     } else {
-      let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+      let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
       if (icon !== undefined) {
         if (icon.canDrawIcon === true) {
           let imageSize = 40
@@ -569,13 +576,33 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
       }
 
-      let style = {
-        color: UI_COLOR.BLACK,
-        opacity: 1,
-        lineWidth: 1,
-        lineDash: [1, 3]
+      drawLabel()
+      thisObject.edgeEditor.drawForeground()
+    }
+  }
+
+  function drawLabel () {
+  /* Draw Title Above the Container */
+    let position = {
+      x: 0,
+      y: 0
+    }
+    let imageSize = 25
+    let fontSize = 25
+    let opacity = 1
+    let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    position = transformThisPoint(position, thisObject.container)
+    printLabel(thisObject.payload.node.name, position.x + 30, position.y - 10, opacity, fontSize)
+
+    if (icon !== undefined) {
+      if (icon.canDrawIcon === true) {
+        browserCanvasContext.drawImage(
+        icon, position.x - 0,
+        position.y - 30,
+        imageSize,
+        imageSize)
       }
-      thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
     }
   }
 
@@ -590,16 +617,6 @@ function newTimeMachine () {
       y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
     }
 
-    if (thisObject.timeScale !== undefined) {
-      minValue.x = thisObject.timeScale.fromDate
-      maxValue.x = thisObject.timeScale.toDate
-    }
-
-    if (thisObject.rateScale !== undefined) {
-      minValue.y = thisObject.rateScale.minValue
-      maxValue.y = thisObject.rateScale.maxValue
-    }
-
     timeMachineCoordinateSystem.initialize(
           minValue,
           maxValue,
diff --git a/ChartsSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js
similarity index 83%
rename from ChartsSpace/TimelineChart.js
rename to ChartingSpace/TimelineChart.js
index fa6b444aa..ce39cf53d 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartingSpace/TimelineChart.js
@@ -38,11 +38,8 @@ function newTimelineChart () {
 
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
-  let rateScaleValueEventSuscriptionId
   let rateScaleUpstreamEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
-  let rateScaleOffsetEventSuscriptionId
-  let rateScaleUpstreamDimensionsEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
   let scaleChangedEventSubscriptionId
@@ -65,7 +62,7 @@ function newTimelineChart () {
   }
 
   function finalize () {
-    coordinateSystem.eventHandler.stopListening(timelineChartCoordinateSystem)
+    coordinateSystem.eventHandler.stopListening(scaleChangedEventSubscriptionId)
 
     if (thisObject.layersManager !== undefined) {
       finalizeLayersManager()
@@ -124,35 +121,56 @@ function newTimelineChart () {
   function finalizeRateScale () {
     if (thisObject.rateScale === undefined) { return }
 
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleOffsetEventSuscriptionId)
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
     thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
-    thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamDimensionsEventSuscriptionId)
     thisObject.rateScale.finalize()
     thisObject.rateScale = undefined
 
     /* Resets the local container with the dimessions of its parent, the Time Machine */
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
-    thisObject.container.frame.height = TIME_MACHINE_HEIGHT
-    thisObject.container.frame.width = TIME_MACHINE_WIDTH
+    thisObject.container.frame.height = thisObject.container.parentContainer.frame.height
+    thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
   }
 
-  function initialize (pTimeMachineCoordinateSystem) {
+  function initialize (pTimeMachineCoordinateSystem, pTimeFrame) {
      /* We load the logow we will need for the background. */
 
     timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
     coordinateSystem = timeMachineCoordinateSystem
-    onScaleChanged()
+    initializeCoordinateSystem()
 
-    timeFrame = INITIAL_TIME_PERIOD
+    timeFrame = pTimeFrame
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     scaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
   }
 
+  function initializeCoordinateSystem () {
+    let minValue = {
+      x: timeMachineCoordinateSystem.min.x,
+      y: 0
+    }
+
+    let maxValue = {
+      x: timeMachineCoordinateSystem.max.x,
+      y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
+    }
+
+    if (thisObject.rateScale !== undefined) {
+      minValue.y = thisObject.rateScale.minValue
+      maxValue.y = thisObject.rateScale.maxValue
+    }
+
+    timelineChartCoordinateSystem.initialize(
+          minValue,
+          maxValue,
+          thisObject.container.frame.width,
+          thisObject.container.frame.height
+      )
+  }
+
   function initializeLayersManager () {
     let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
     layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
@@ -181,36 +199,9 @@ function newTimelineChart () {
     thisObject.rateScale.fitFunction = thisObject.fitFunction
     thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
-    rateScaleOffsetEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Offset Changed', rateScaleOffsetChanged)
-    rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
-    rateScaleUpstreamEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Upstream Rate Scale Value Changed', rateScaleUpstreamChanged)
-    rateScaleUpstreamDimensionsEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', rateScaleUpstreamDimensioinsChanged)
     thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
 
-    function rateScaleUpstreamDimensioinsChanged () {
-      thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * thisObject.rateScale.scale
-      recalculateCoordinateSystem()
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
-
-    function rateScaleUpstreamChanged (event) {
-      // thisObject.rateScale.setScale(event.scale)
-    }
-
-    function rateScaleOffsetChanged (event) {
-      if (thisObject.container.frame.offset.y !== event.offset) {
-        thisObject.container.frame.offset.y = event.offset
-        thisObject.container.eventHandler.raiseEvent('onDisplace')
-      }
-    }
-
-    function rateScaleValueChanged (event) {
-      thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-      recalculateCoordinateSystem()
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
-
     function rateScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
     }
@@ -240,9 +231,16 @@ function newTimelineChart () {
     }
   }
 
-  function onScaleChanged () {
+  function onScaleChanged (event) {
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.onUpstreamScaleChanged(event)
+    }
     timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
     timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
+    timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
+    timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
+    timelineChartCoordinateSystem.autoMinXScale = timeMachineCoordinateSystem.autoMinXScale
+    timelineChartCoordinateSystem.autoMaxXScale = timeMachineCoordinateSystem.autoMaxXScale
     timelineChartCoordinateSystem.recalculateScale()
   }
 
@@ -292,7 +290,7 @@ function newTimelineChart () {
     let container
 
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
-      container = thisObject.rateScale.getContainer(point)
+      container = thisObject.rateScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -301,7 +299,7 @@ function newTimelineChart () {
     }
 
     if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
-      container = thisObject.timeFrameScale.getContainer(point)
+      container = thisObject.timeFrameScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -320,7 +318,7 @@ function newTimelineChart () {
   }
 
   function thisObjectPhysics () {
-
+    timelineChartCoordinateSystem.physics()
   }
 
   function syncWithDesignerLayersManager () {
@@ -346,10 +344,16 @@ function newTimelineChart () {
     if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
       finalizeRateScale()
       coordinateSystem = timeMachineCoordinateSystem
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+      }
     }
     if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
       initializeRateScale()
       coordinateSystem = timelineChartCoordinateSystem
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+      }
     }
     if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
       finalizeTimeFrameScale()
@@ -400,28 +404,4 @@ function newTimelineChart () {
   function drawChartsBackground () {
     drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
   }
-
-  function recalculateCoordinateSystem () {
-    let minValue = {
-      x: timelineChartCoordinateSystem.min.x,
-      y: 0
-    }
-
-    let maxValue = {
-      x: timelineChartCoordinateSystem.max.x,
-      y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
-    }
-
-    if (thisObject.rateScale !== undefined) {
-      minValue.y = thisObject.rateScale.minValue
-      maxValue.y = thisObject.rateScale.maxValue
-    }
-
-    timelineChartCoordinateSystem.initialize(
-          minValue,
-          maxValue,
-          thisObject.container.frame.width,
-          thisObject.container.frame.height
-      )
-  }
 }
diff --git a/ChartsSpace/ViewPort.js b/ChartingSpace/Viewport.js
similarity index 87%
rename from ChartsSpace/ViewPort.js
rename to ChartingSpace/Viewport.js
index 354c43747..2a054191c 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartingSpace/Viewport.js
@@ -34,7 +34,9 @@ function newViewport () {
     transformThisPoint: transformThisPoint,
     unTransformThisPoint: unTransformThisPoint,
     isThisPointVisible: isThisPointVisible,
+    isThisPointInViewport: isThisPointInViewport,
     fitIntoVisibleArea: fitIntoVisibleArea,
+    fitIntoViewport: fitIntoViewport,
     displace: displace,
     physics: physics,
     raiseEvents: raiseEvents,
@@ -174,6 +176,7 @@ function newViewport () {
   }
 
   function onMouseWheel (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)) { return }
     let morePower = 1
     let amount = event.delta
     if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
@@ -219,25 +222,40 @@ function newViewport () {
   }
 
   function fitIntoVisibleArea (point) {
-       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
-
-    if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
-      point.x = thisObject.visibleArea.bottomRight.x + 1
+    let pointCopy = {
+      x: point.x,
+      y: point.y
     }
 
-    if (point.x < thisObject.visibleArea.topLeft.x - 1) {
-      point.x = thisObject.visibleArea.topLeft.x - 1
+    /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+    if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
+      pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
     }
 
-    if (point.y > thisObject.visibleArea.bottomRight.y + 1) {
-      point.y = thisObject.visibleArea.bottomRight.y + 1
+    if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
+      pointCopy.x = thisObject.visibleArea.topLeft.x - 1
     }
 
-    if (point.y < thisObject.visibleArea.topLeft.y - 1) {
-      point.y = thisObject.visibleArea.topLeft.y - 1
+    if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
+      pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
     }
 
-    return point
+    if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
+      pointCopy.y = thisObject.visibleArea.topLeft.y - 1
+    }
+
+    return pointCopy
+  }
+
+  function fitIntoViewport (point) {
+    let pointCopy = {
+      x: point.x,
+      y: point.y
+    }
+    if (pointCopy.y > COCKPIT_SPACE_POSITION) {
+      pointCopy.y = COCKPIT_SPACE_POSITION
+    }
+    return pointCopy
   }
 
   function displace (displaceVector, recalculate) {
@@ -310,11 +328,15 @@ function newViewport () {
   }
 
   function isThisPointVisible (point) {
-    if (visibleArea === undefined) {
-      getVisibleArea()
+    if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
+      return false
+    } else {
+      return true
     }
+  }
 
-    if (point.x < visibleArea.topLeft.x || point.x > visibleArea.bottomRight.x || point.y < visibleArea.topLeft.y || point.y > visibleArea.bottomRight.y) {
+  function isThisPointInViewport (point) {
+    if (point.y > COCKPIT_SPACE_POSITION) {
       return false
     } else {
       return true
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ChainAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
rename to DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeChildren.js b/DesignSpace/Workspace/FunctionLibraries/NodeChildren.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeChildren.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeChildren.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeCloning.js b/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeCloning.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeCloning.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeDeleter.js b/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeDeleter.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/OnFocus.js b/DesignSpace/Workspace/FunctionLibraries/OnFocus.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/OnFocus.js
rename to DesignSpace/Workspace/FunctionLibraries/OnFocus.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js b/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js
rename to DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
rename to DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/SessionFunctions.js b/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/SessionFunctions.js
rename to DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ShortcutKeys.js b/DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ShortcutKeys.js
rename to DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/TaskFunctions.js b/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/TaskFunctions.js
rename to DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
similarity index 99%
rename from DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
rename to DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
index 40466a029..96f7bfef3 100644
--- a/DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
+++ b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
@@ -384,7 +384,7 @@ function newUiObjectsFromNodes () {
     payload.node = node
     payload.parentNode = parentNode
     payload.chainParent = chainParent
-    payload.onMenuItemClick = canvas.designerSpace.workspace.onMenuItemClick
+    payload.onMenuItemClick = canvas.designSpace.workspace.onMenuItemClick
 
     node.payload = payload
     node.type = uiObjectType
diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignSpace/Workspace/Workspace.js
similarity index 89%
rename from DesignerSpace/Workspace/Workspace.js
rename to DesignSpace/Workspace/Workspace.js
index 9c2bb4721..e9075d8a7 100644
--- a/DesignerSpace/Workspace/Workspace.js
+++ b/DesignSpace/Workspace/Workspace.js
@@ -87,6 +87,8 @@ function newWorkspace () {
       }
       functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
       thisObject.enabled = true
+
+      setInterval(saveWorkspace, 5000)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
@@ -108,11 +110,13 @@ function newWorkspace () {
     functionLibraryReferenceAttachDetach.referenceAttachNode(node, attachToNode, thisObject.workspaceNode.rootNodes)
   }
 
-  function physics () {
-    if (thisObject.enabled !== true) { return }
-
+  function saveWorkspace () {
     let textToSave = stringifyWorkspace()
     window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave)
+  }
+
+  function physics () {
+    if (thisObject.enabled !== true) { return }
 
     if (workingAtTask > 0) {
       circularProgressBar.physics()
@@ -136,7 +140,7 @@ function newWorkspace () {
           workingAtTask++
           break
         case 5:
-          canvas.chartSpace.reset()
+          canvas.chartingSpace.reset()
           workingAtTask++
           break
         case 6:
@@ -178,9 +182,23 @@ function newWorkspace () {
         if (rootNode.networkNodes !== undefined) {
           for (let j = 0; j < rootNode.networkNodes.length; j++) {
             let networkNode = rootNode.networkNodes[j]
-            for (let i = 0; i < networkNode.taskManagers.length; i++) {
-              let taskManager = networkNode.taskManagers[i]
-              taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
+            if (networkNode.dataMining !== undefined) {
+              for (let i = 0; i < networkNode.dataMining.taskManagers.length; i++) {
+                let taskManager = networkNode.dataMining.taskManagers[i]
+                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
+              }
+            }
+            if (networkNode.testingEnvironment !== undefined) {
+              for (let i = 0; i < networkNode.testingEnvironment.taskManagers.length; i++) {
+                let taskManager = networkNode.testingEnvironment.taskManagers[i]
+                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
+              }
+            }
+            if (networkNode.productionEnvironment !== undefined) {
+              for (let i = 0; i < networkNode.productionEnvironment.taskManagers.length; i++) {
+                let taskManager = networkNode.productionEnvironment.taskManagers[i]
+                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
+              }
             }
           }
         }
@@ -260,14 +278,14 @@ function newWorkspace () {
         {
           let text = stringifyWorkspace(true)
           let fileName = 'Share - ' + payload.node.type + ' - ' + payload.node.name + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
         break
       case 'Backup Workspace':
         {
           let text = stringifyWorkspace(false)
           let fileName = 'Backup - ' + payload.node.type + ' - ' + payload.node.name + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
         break
       case 'Edit Code':
@@ -284,7 +302,7 @@ function newWorkspace () {
             nodeName = '.' + nodeName
           }
           let fileName = 'Share - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
@@ -299,7 +317,7 @@ function newWorkspace () {
             nodeName = ' ' + nodeName
           }
           let fileName = 'Backup - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
@@ -314,7 +332,7 @@ function newWorkspace () {
             nodeName = ' ' + nodeName
           }
           let fileName = 'Clone - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js
index 4a66f3679..b54779f50 100644
--- a/FloatingSpace/CircularMenuItem.js
+++ b/FloatingSpace/CircularMenuItem.js
@@ -203,19 +203,19 @@ function newCircularMenuItem () {
       temporaryStatus === STATUS_SECONDARY_WORK_FAILED
     ) && thisObject.secondaryAction !== undefined
       ) {
-      thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
-      thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
+      thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
+      thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
     } else {
       if (thisObject.relatedUiObject !== undefined) {
-        thisObject.iconOn = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
-        thisObject.iconOff = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+        thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+        thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
       } else {
         if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
-          thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.iconPathOn)
-          thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.iconPathOff)
+          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
+          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
         } else {
-          thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
-          thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
         }
       }
     }
@@ -307,7 +307,7 @@ function newCircularMenuItem () {
 
         if (event !== undefined) {
           if (event.type === 'Secondary Action Already Executed') {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
+            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
             return
           }
         }
@@ -316,11 +316,11 @@ function newCircularMenuItem () {
         if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
           if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
             if (thisObject.workDoneLabel !== undefined) {
-              setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_PRIMARY_WORK_DONE)
+              setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
             }
           } else {
             if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
+              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
             }
           }
         } else {
@@ -331,7 +331,7 @@ function newCircularMenuItem () {
             }
           } else {
             if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
+              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
             }
           }
         }
@@ -339,11 +339,11 @@ function newCircularMenuItem () {
       function onSecondaryCallBack (err) {
         if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
           if (thisObject.secondaryWorkDoneLabel !== undefined) {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
+            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
           }
         } else {
           if (thisObject.secondaryWorkFailedLabel != undefined) {
-            setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_SECONDARY_WORK_FAILED)
+            setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
           }
         }
       }
diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js
index bc83446dd..6e9ce5833 100644
--- a/FloatingSpace/FloatingObject.js
+++ b/FloatingSpace/FloatingObject.js
@@ -261,7 +261,7 @@ function newFloatingObject () {
       if (parent.payload.position === undefined) { return }
 
       let distanceToParent = Math.sqrt(Math.pow(parent.payload.position.x - thisObject.container.frame.position.x, 2) + Math.pow(parent.payload.position.y - thisObject.container.frame.position.y, 2))  // ... we calculate the distance ...
-      let parentChildren = canvas.designerSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
+      let parentChildren = canvas.designSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
       let axisCount = parentChildren.childrenCount
       let axisIndex = parentChildren.childIndex
       let baseAngle = 0
diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js
index 77996ee22..ee4510d2c 100644
--- a/FloatingSpace/UiObject.js
+++ b/FloatingSpace/UiObject.js
@@ -427,7 +427,7 @@ function newUiObject () {
 
     if (previousDistanceToChainParent !== undefined) {
       if (ratio > THRESHOLD) {
-        canvas.designerSpace.workspace.chainDetachNode(thisObject.payload.node)
+        canvas.designSpace.workspace.chainDetachNode(thisObject.payload.node)
       }
     }
   }
@@ -534,7 +534,7 @@ function newUiObject () {
 
     if (previousDistanceToReferenceParent !== undefined) {
       if (ratio > THRESHOLD) {
-        canvas.designerSpace.workspace.referenceDetachNode(thisObject.payload.node)
+        canvas.designSpace.workspace.referenceDetachNode(thisObject.payload.node)
       }
     }
   }
@@ -657,7 +657,7 @@ function newUiObject () {
   }
 
   function iconPhysics () {
-    icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
     let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
     if (nodeDefinition.alternativeIcons !== undefined) {
       let nodeToUse = thisObject.payload.node
@@ -685,7 +685,7 @@ function newUiObject () {
             iconName = alternativeIcon.iconName
           }
         }
-        let newIcon = canvas.designerSpace.iconCollection.get(iconName)
+        let newIcon = canvas.designSpace.iconCollection.get(iconName)
         if (newIcon !== undefined) {
           icon = newIcon
         }
@@ -694,7 +694,7 @@ function newUiObject () {
       }
     }
 
-    executingIcon = canvas.designerSpace.iconCollection.get('attractive')
+    executingIcon = canvas.designSpace.iconCollection.get('attractive')
   }
 
   function onFocus () {
@@ -748,12 +748,12 @@ function newUiObject () {
 
   function onDragFinished (event) {
     if (isChainAttaching === true) {
-      canvas.designerSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
+      canvas.designSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
       chainAttachToNode = undefined
       isChainAttaching = false
     }
     if (isReferenceAttaching === true) {
-      canvas.designerSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
+      canvas.designSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
       referenceAttachToNode = undefined
       isReferenceAttaching = false
     }
diff --git a/FloatingSpace/UiObjectConstructor.js b/FloatingSpace/UiObjectConstructor.js
index 1df4c95a6..ac5ee4dd3 100644
--- a/FloatingSpace/UiObjectConstructor.js
+++ b/FloatingSpace/UiObjectConstructor.js
@@ -327,6 +327,7 @@ function newUiObjectConstructor () {
   function setFloatingObjectBasicProperties (floatingObject, payload) {
     const FRICTION = 0.95
     const INITIAL_FRICTION = 0.97
+    const INITIAL_FONT_SIZE = 12
 
     switch (payload.node.type) {
       case 'Workspace': {
@@ -375,7 +376,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(500)
       floatingObject.initializeRadius(45)
       floatingObject.initializeImageSize(80)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
     }
@@ -386,7 +387,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(600)
       floatingObject.initializeRadius(45)
       floatingObject.initializeImageSize(80)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
@@ -401,7 +402,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(300)
       floatingObject.initializeRadius(40)
       floatingObject.initializeImageSize(70)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
 
@@ -416,7 +417,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(150)
       floatingObject.initializeRadius(35)
       floatingObject.initializeImageSize(60)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
 
@@ -431,7 +432,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(75)
       floatingObject.initializeRadius(30)
       floatingObject.initializeImageSize(50)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
 
@@ -446,7 +447,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(50)
       floatingObject.initializeRadius(25)
       floatingObject.initializeImageSize(40)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
     }
@@ -457,7 +458,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(25)
       floatingObject.initializeRadius(20)
       floatingObject.initializeImageSize(30)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
     }
diff --git a/FloatingSpace/UiObjectTitle.js b/FloatingSpace/UiObjectTitle.js
index b014cd958..efb8a1da2 100644
--- a/FloatingSpace/UiObjectTitle.js
+++ b/FloatingSpace/UiObjectTitle.js
@@ -273,7 +273,7 @@ function newUiObjectTitle () {
           label = trimTitle(label)
 
           labelPoint = {
-            x: 0,
+            x: 5,
             y: thisObject.container.frame.height * 0.8
           }
 
diff --git a/Frame.js b/Frame.js
index ed8a0a25d..3f8bb1590 100644
--- a/Frame.js
+++ b/Frame.js
@@ -52,7 +52,7 @@ function newFrame () {
   }
 
   function isInViewPort () {
-   /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartSpace.viewport */
+   /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartingSpace.viewport */
 
     point1 = {
       x: 0,
@@ -69,7 +69,7 @@ function newFrame () {
     point1 = transformThisPoint(point1, thisObject.container)
     point3 = transformThisPoint(point3, thisObject.container)
 
-    if (point1.x < canvas.chartSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartSpace.viewport.visibleArea.topLeft.y) {
+    if (point1.x < canvas.chartingSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartingSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartingSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
       return true
     } else {
       return false
@@ -160,11 +160,13 @@ function newFrame () {
     return point
   }
 
-  function isThisPointHere (point, outsideViewPort, dontTransform) {
- // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+  function isThisPointHere (point, outsideViewPort, dontTransform, padding) {
+    // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+    // The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size)
+
+    if (padding === undefined) { padding = 0 }
 
        /* We need not to modify the point received, so me make a copy of it. */
-
     let checkPoint = {
       x: point.x,
       y: point.y
@@ -193,7 +195,7 @@ function newFrame () {
     }
 
     if (thisObject.type === 'Rectangle') {
-      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width - padding || checkPoint.y > thisObject.height - padding) {
         return false
       } else {
         return true
diff --git a/Globals.js b/Globals.js
index 22a3d5d2d..24454d260 100644
--- a/Globals.js
+++ b/Globals.js
@@ -41,6 +41,11 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
+const DEBUG = {}
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 5 // This regulates some behavious changes that happens when the user zoom out below this level.
+const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5  // This help regulate when to change the Time Frame base on the level of zoom out.
+const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 5  
+
 let FONT_ASPECT_RATIO = 0.32;
 
 
@@ -116,7 +121,7 @@ let dailyFilePeriods =
 
 dailyFilePeriods = JSON.parse(dailyFilePeriods);
 
-window.AT_BREAKPOINT = false;
+SHOW_ANIMATION_PERFORMACE = false;
 
 let testUser = window.localStorage.getItem("test_user")
 let LOGGED_IN_USER_LOCAL_STORAGE_KEY
@@ -160,10 +165,10 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000;
 const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000;
 const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 
-let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the canvas.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
+let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
 let INITIAL_ZOOM_LEVEL = -28.25       // This is the zoom level at the view port in which the APP starts.
-let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the canvas.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
-let VERY_LARGE_NUMBER = 100000000000
+let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
+let VERY_LARGE_NUMBER = 100000000000000
 
 let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
 let AT_FULL_SCREEN_MODE = false
@@ -175,7 +180,7 @@ maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that proj
 const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;
 
-const TOP_SPACE_HEIGHT = 2
+const TOP_SPACE_HEIGHT = 40
 const COCKPIT_SPACE_HEIGHT = 30;
 const BREAKPOINT_HEIGHT = 15;
 const SIDE_PANEL_WIDTH = 450
@@ -202,11 +207,14 @@ const PERIOD_05_MIN = "05-min";
 const PERIOD_01_MIN = "01-min";
 
 /*
-We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
+We define here the size of the chartingSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
 */
 
-const TIME_MACHINE_WIDTH = 250;
-const TIME_MACHINE_HEIGHT = 250 / 50;
+const TIME_MACHINE_WIDTH = 320;
+const TIME_MACHINE_HEIGHT = 120;
+
+let mediaRecorder // to downloadText canvas animation as a mediaRecorder
+let areWeRecording = false
 
 function toRadians(angle) {
     return angle * (Math.PI / 180);
diff --git a/Panels/Layer.js b/Panels/Layer.js
index 85300f606..f17574b6c 100644
--- a/Panels/Layer.js
+++ b/Panels/Layer.js
@@ -472,7 +472,7 @@ function newLayer () {
 
     let icon2
     if (plotterModule.code.icon !== undefined) {
-      icon2 = canvas.designerSpace.iconCollection.get(plotterModule.code.icon)
+      icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon)
     }
 
     let icon3 = getIcon(baseAsset)
@@ -490,9 +490,9 @@ function newLayer () {
         }
       }
       if (iconName !== undefined) {
-        icon = canvas.designerSpace.iconCollection.get(iconName)
+        icon = canvas.designSpace.iconCollection.get(iconName)
       } else {
-        icon = canvas.designerSpace.iconCollection.get(nodeDefinition.icon)
+        icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
       }
       return icon
     }
diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js
index 98684a18e..9381a844b 100644
--- a/Panels/LayersPanel.js
+++ b/Panels/LayersPanel.js
@@ -27,7 +27,6 @@ function newLayersPanel () {
 
   const LAYER_SEPARATION = 0
 
-  let visible = true
   let headerHeight = 40
   let footerHeight = 10
   let layerHeight = 70
@@ -61,8 +60,8 @@ function newLayersPanel () {
     thisObject.container.frame.height = headerHeight
 
     let position = { // Default position
-      x: canvas.chartSpace.viewport.visibleArea.topLeft.x,
-      y: canvas.chartSpace.viewport.visibleArea.topLeft.y
+      x: canvas.chartingSpace.viewport.visibleArea.topLeft.x,
+      y: canvas.chartingSpace.viewport.visibleArea.topLeft.y
     }
 
     thisObject.container.frame.position = position
@@ -188,12 +187,14 @@ function newLayersPanel () {
   }
 
   function panelSizePhysics () {
-    let viewPortHeight = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - canvas.chartSpace.viewport.visibleArea.topLeft.y
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
+
+    let viewPortHeight = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y
 
     if (viewPortHeight < headerHeight) {
-      visible = false
+      thisObject.visible = false
     } else {
-      visible = true
+      thisObject.visible = true
     }
 
     if (desiredPanelHeight > viewPortHeight) {
@@ -239,6 +240,7 @@ function newLayersPanel () {
   }
 
   function getContainer (point) {
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
     let container
 
     container = thisObject.panelTabButton.getContainer(point)
@@ -367,7 +369,7 @@ function newLayersPanel () {
   }
 
   function draw () {
-    if (isInitialized === false || visible === false) { return }
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
 
     // thisObject.container.frame.draw(false, false, false, thisObject.fitFunction)
 
@@ -384,8 +386,8 @@ function newLayersPanel () {
     let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
     let label3 = ''
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
 
     let backgroundColor = UI_COLOR.BLACK
 
diff --git a/Panels/PanelTabButton.js b/Panels/PanelTabButton.js
index 484fa66a8..2d4b37565 100644
--- a/Panels/PanelTabButton.js
+++ b/Panels/PanelTabButton.js
@@ -58,7 +58,7 @@ function newPanelTabButton () {
     upPosition.y = thisObject.parentContainer.frame.position.y
 
     downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
 
     transitionPosition.x = upPosition.x
     transitionPosition.y = upPosition.y
@@ -96,10 +96,10 @@ function newPanelTabButton () {
     if (isInitialized === false) { return }
 
     upPosition.x = thisObject.parentContainer.frame.position.x
-    upPosition.y = canvas.chartSpace.viewport.visibleArea.topRight.y
+    upPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
 
     downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
 
     if (thisObject.status === 'going down') {
       if (transitionPosition.y < downPosition.y) {
diff --git a/Panels/PanelsVisibleButton.js b/Panels/PanelsVisibleButton.js
index fe8d20e08..b2266845e 100644
--- a/Panels/PanelsVisibleButton.js
+++ b/Panels/PanelsVisibleButton.js
@@ -16,6 +16,7 @@ function newPanelsVisibleButton () {
   thisObject.container.name = 'Panels Visible Button'
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
   thisObject.container.frame.containerName = 'Panels Visible Button'
 
   let onMouseClickEventSuscriptionId
@@ -73,9 +74,9 @@ function newPanelsVisibleButton () {
   function draw () {
     let icon
     if (thisObject.showPanels === true) {
-      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+      icon = canvas.designSpace.iconCollection.get('plotter-panel')
     } else {
-      icon = canvas.designerSpace.iconCollection.get('social-bot')
+      icon = canvas.designSpace.iconCollection.get('toggle-panel-off')
     }
 
     drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
diff --git a/Panels/PlotterPanel.js b/Panels/PlotterPanel.js
index 28d38f488..24ef4f91f 100644
--- a/Panels/PlotterPanel.js
+++ b/Panels/PlotterPanel.js
@@ -47,8 +47,8 @@ function newPlotterPanel () {
     thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
     thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
 
-    thisObject.container.frame.position.x = canvas.chartSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
-    thisObject.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
+    thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
+    thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
 
     panelTabButton = newPanelTabButton()
     panelTabButton.parentContainer = thisObject.container
diff --git a/Plotter.js b/Plotter.js
index 97b818a28..e23e87dc3 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -8,6 +8,7 @@ function newPlotter () {
   let thisObject = {
     currentRecord: undefined,
     container: undefined,
+    fitFunction: undefined,
     onDailyFileLoaded: onDailyFileLoaded,
     initialize: initialize,
     finalize: finalize,
@@ -24,7 +25,7 @@ function newPlotter () {
 
   let coordinateSystem
   let plotterModuleConfig
-  let slotHeight = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topLeft.y) / 10  // This is the amount of slots available
+  let slotHeight = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y) / 10  // This is the amount of slots available
   let mustRecalculateDataPoints = false
   let atMousePositionFillStyles = new Map()
   let atMousePositionStrokeStyles = new Map()
@@ -60,13 +61,14 @@ function newPlotter () {
     try {
       /* Stop listening to the necesary events. */
       thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
-      canvas.chartSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
-      canvas.chartSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
+      canvas.chartingSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
+      canvas.chartingSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
       canvas.eventHandler.stopListening(dragFinishedEventSubscriptionId)
       thisObject.container.eventHandler.stopListening(dimmensionsChangedEventSubscriptionId)
       marketFiles.eventHandler.stopListening(marketFilesUpdatedEventSubscriptionId)
       dailyFiles.eventHandler.stopListening(dailyFilesUpdatedEventSubscriptionId)
       thisObject.container.eventHandler.stopListening(onDisplaceEventSubscriptionId)
+      thisObject.fitFunction = undefined
 
       /* Clear References */
       marketFiles = undefined
@@ -111,8 +113,8 @@ function newPlotter () {
       fileCursor = dailyFiles.getFileCursor(pTimeFrame)
 
       /* Listen to the necesary events. */
-      zoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
-      offsetChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+      zoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+      offsetChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
       dragFinishedEventSubscriptionId = canvas.eventHandler.listenToEvent('Drag Finished', onDragFinished)
       marketFilesUpdatedEventSubscriptionId = marketFiles.eventHandler.listenToEvent('Files Updated', onMarketFilesUpdated)
       dailyFilesUpdatedEventSubscriptionId = dailyFiles.eventHandler.listenToEvent('Files Updated', onDailyFilesUpdated)
@@ -146,7 +148,7 @@ function newPlotter () {
   }
 
   function onMouseOver (event) {
-    let userPosition = getDateFromPoint(event, thisObject.container, coordinateSystem)
+    let userPosition = getDateFromPointAtBrowserCanvas(event, thisObject.container, coordinateSystem)
     userPositionDate = userPosition.valueOf()
   }
 
@@ -374,8 +376,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -427,8 +429,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -518,13 +520,13 @@ function newPlotter () {
         beginPoint = transformThisPoint(beginPoint, thisObject.container)
         endPoint = transformThisPoint(endPoint, thisObject.container)
 
-        beginPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(beginPoint)
-        endPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(endPoint)
+        beginPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(beginPoint)
+        endPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(endPoint)
 
         beginPoint = thisObject.fitFunction(beginPoint)
         endPoint = thisObject.fitFunction(endPoint)
 
-        if (endPoint.x < canvas.chartSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartSpace.viewport.visibleArea.bottomRight.x) {
+        if (endPoint.x < canvas.chartingSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartingSpace.viewport.visibleArea.bottomRight.x) {
           continue
         }
 
@@ -545,7 +547,6 @@ function newPlotter () {
 
         if (productDefinition.referenceParent.shapes === undefined) { continue }
         if (productDefinition.referenceParent.shapes.chartPoints === undefined) { continue }
-
         let dataPoints = new Map()
         if (record.dataPoints !== undefined && mustRecalculateDataPoints === false) {
           /* We use the datapoints already calculated. */
@@ -567,6 +568,8 @@ function newPlotter () {
                   x: x,
                   y: y
                 }
+                /* Contributing to Auto-Scale */
+                coordinateSystem.reportYValue(dataPoint.y)
 
               /*
               The information we store in files is independent from the charing system and its coordinate systems.
@@ -574,7 +577,7 @@ function newPlotter () {
               */
                 dataPoint = coordinateSystem.transformThisPoint(dataPoint)
                 dataPoint = transformThisPoint(dataPoint, thisObject.container)
-                dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
+                dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                 dataPoint = thisObject.fitFunction(dataPoint)
 
               /* Store the data point at the local map */
@@ -583,7 +586,7 @@ function newPlotter () {
                 if (plotterModuleConfig !== undefined) {
                   if (plotterModuleConfig.slot !== undefined) {
                   /* We reset the y coordinate since it will be transformed with another coordinate system to fit into a slot. */
-                    dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartSpace.viewport.visibleArea.topLeft.y
+                    dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartingSpace.viewport.visibleArea.topLeft.y
                   }
                 }
               }
@@ -723,7 +726,8 @@ function newPlotter () {
                 y: dataPointObject.y
               }
               /* We make sure the points do not fall outside the viewport visible area. This step allways need to be done.  */
-              dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
+              dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
+              dataPoint = thisObject.fitFunction(dataPoint)
               if (k === 0) {
                 browserCanvasContext.moveTo(dataPoint.x, dataPoint.y)
               } else {
@@ -765,7 +769,12 @@ function newPlotter () {
         }
       }
 
-      mustRecalculateDataPoints = false
+      if (coordinateSystem.autoMinYScale === true || coordinateSystem.autosMaxScale === true) {
+        mustRecalculateDataPoints = true
+      } else {
+        mustRecalculateDataPoints = false
+      }
+
       logged = false
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] plotChart -> err = ' + err.stack) }
diff --git a/Dashboard.js b/PostLoader.js
similarity index 71%
rename from Dashboard.js
rename to PostLoader.js
index 3d82092d0..bb34c97ea 100644
--- a/Dashboard.js
+++ b/PostLoader.js
@@ -45,18 +45,6 @@ function newDashboard () {
 
         if (canvas !== undefined) { canvas.finalize() }
 
-        /* Here we check where we are executing. In case we are Local we need to create a Local Dummy User and Data Mine. */
-
-        if (window.canvasApp.executingAt === 'Local') {
-          window.localStorage.setItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY, 'Local Access Token')       // Dummy Access Token
-          window.localStorage.setItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY, '{"authId":"x|x","alias":"user"}')  // Dummy Local User
-        }
-
-        /* Here we used to have a call to the DataMines Module to get the profile pictures. That was removed but to keep things working, we do this: */
-
-        window.canvasApp.context.dataMineProfileImages = new Map()
-        window.canvasApp.context.fbProfileImages = new Map()
-
         setTimeout(delayedStart, DEBUG_START_UP_DELAY)
       }
     } catch (err) {
@@ -88,7 +76,7 @@ function newDashboard () {
   function setBrowserEvents () {
     window.onbeforeunload = onBrowserClosed
     function onBrowserClosed () {
-      // canvas.designerSpace.workspace.stopAllRunningTasks()
+      // canvas.designSpace.workspace.stopAllRunningTasks()
     }
   }
 }
diff --git a/Project.njsproj b/Project.njsproj
index 3dedf7ed3..886b43884 100644
--- a/Project.njsproj
+++ b/Project.njsproj
@@ -145,7 +145,7 @@
     <Compile Include="Candle.js" />
     <Compile Include="Canvas.js" />
     <Compile Include="Scales\ChartGrid.js" />
-    <Compile Include="Spaces\ChartSpace.js" />
+    <Compile Include="Spaces\ChartingSpace.js" />
     <Compile Include="ChartUtilities.js" />
     <Compile Include="Container.js" />
     <Compile Include="Dashboard.js" />
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
new file mode 100644
index 000000000..1034443ca
--- /dev/null
+++ b/Scales/AutoScaleButton.js
@@ -0,0 +1,194 @@
+function newAutoScaleButton () {
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    parentContainer: undefined,
+    autoMinScale: undefined,
+    autoMaxScale: undefined,
+    setStatus: setStatus,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize,
+    finalize: finalize
+  }
+
+   /* Cointainer stuff */
+  thisObject.container = newContainer()
+  thisObject.container.name = 'Auto Scale Button'
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+  thisObject.container.frame.containerName = 'Auto Scale Button'
+
+  const ICON_SIZE = 36
+  let onMouseWheelEventSubscriptionId
+  let coordinateSystem
+  let axis
+  let currentStatus
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    thisObject.parentContainer = undefined
+    thisObject.panels = undefined
+
+    coordinateSystem = undefined
+    axis = undefined
+  }
+
+  function initialize (pAxis, pCoordinateSystem) {
+    axis = pAxis
+    coordinateSystem = pCoordinateSystem
+    thisObject.autoMinScale = coordinateSystem.autoMinYScale
+    thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
+
+    switch (axis) {
+      case 'X': {
+        thisObject.container.frame.width = ICON_SIZE
+        thisObject.container.frame.height = ICON_SIZE
+
+        let position = {
+          x: thisObject.container.parentContainer.frame.width * 7 / 8,
+          y: thisObject.container.parentContainer.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
+      case 'Y': {
+        thisObject.container.frame.width = ICON_SIZE
+        thisObject.container.frame.height = ICON_SIZE
+
+        let position = {
+          x: thisObject.container.parentContainer.frame.width * 7 / 8,
+          y: thisObject.container.parentContainer.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
+    }
+    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+  }
+
+  function setStatus (autoMinScale, autoMaxScale) {
+    thisObject.autoMinScale = autoMinScale
+    thisObject.autoMaxScale = autoMaxScale
+
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+      currentStatus = 1
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+      currentStatus = 2
+    }
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+      currentStatus = 3
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+      currentStatus = 4
+    }
+  }
+  function onMouseWheel (event) {
+    let factor
+    let delta = event.wheelDelta
+    if (delta < 0) {
+      delta = -1
+    } else {
+      delta = 1
+    }
+    currentStatus = currentStatus + delta
+    if (currentStatus === 5) { currentStatus = 1 }
+    if (currentStatus === 0) { currentStatus = 4 }
+
+    switch (currentStatus) {
+      case 1: {
+        thisObject.autoMinScale = false
+        thisObject.autoMaxScale = false
+        update()
+        return
+      }
+      case 2: {
+        thisObject.autoMinScale = true
+        thisObject.autoMaxScale = false
+        update()
+        return
+      }
+      case 3: {
+        thisObject.autoMinScale = false
+        thisObject.autoMaxScale = true
+        update()
+        return
+      }
+      case 4: {
+        thisObject.autoMinScale = true
+        thisObject.autoMaxScale = true
+        update()
+        return
+      }
+    }
+
+    function update () {
+      switch (axis) {
+        case 'X': {
+          coordinateSystem.autoMinXScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxXScale = thisObject.autoMaxScale
+          break
+        }
+        case 'Y': {
+          coordinateSystem.autoMinYScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
+          break
+        }
+      }
+
+      coordinateSystem.recalculateScale()
+    }
+  }
+
+  function getContainer (point, purpose) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    }
+  }
+
+  function draw () {
+    let icon
+    switch (axis) {
+      case 'X': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
+        }
+        drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
+        break
+      }
+      case 'Y': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
+        }
+        drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
+        break
+      }
+    }
+  }
+}
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 9536a0b82..07b2396a7 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -6,13 +6,11 @@ function newRateScale () {
     rate: undefined,
     fitFunction: undefined,
     payload: undefined,
-    scale: undefined,
-    offset: undefined,
     minValue: undefined,
     maxValue: undefined,
     isVisible: true,
     layersOn: undefined,
-    setScale: setScale,
+    onUpstreamScaleChanged: onUpstreamScaleChanged,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
@@ -22,18 +20,6 @@ function newRateScale () {
     finalize: finalize
   }
 
-  const DEFAULT_SCALE = 50
-  const STEP_SCALE = 1
-  const MIN_SCALE = 0
-  const MAX_SCALE = 100
-  const SNAP_THRESHOLD_SCALE = 1
-
-  const DEFAULT_OFFSET = 0
-  const STEP_OFFSET = 1
-  const MIN_OFFSET = -1000
-  const MAX_OFFSET = 1000
-  const SNAP_THRESHOLD_OFFSET = 3
-
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
@@ -45,7 +31,9 @@ function newRateScale () {
   thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
   thisObject.container.frame.height = 40
 
-  thisObject.offset = DEFAULT_OFFSET
+  let draggeableContainer = newContainer()
+  draggeableContainer.initialize(MODULE_NAME + ' Draggeable')
+  draggeableContainer.isDraggeable = true
 
   let visible = true
   let isMouseOver
@@ -53,6 +41,7 @@ function newRateScale () {
   let onMouseWheelEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onScaleChangedEventSubscriptionId
 
   let coordinateSystem
   let limitingContainer
@@ -65,14 +54,15 @@ function newRateScale () {
     }
   }
 
-  let offsetTimer = 0
-  let scaleTimer = 0
+  let scaleDisplayTimer = 0
+  let autoScaleButton
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -83,6 +73,9 @@ function newRateScale () {
     limitingContainer = undefined
     rateCalculationsContainer = undefined
     mouse = undefined
+
+    autoScaleButton.finalize()
+    autoScaleButton = undefined
   }
 
   function initialize (pCoordinateSystem, pLimitingContainer, pRateCalculationsContainer) {
@@ -96,13 +89,13 @@ function newRateScale () {
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
+
+    autoScaleButton = newAutoScaleButton()
+    autoScaleButton.container.connectToParent(thisObject.container)
+    autoScaleButton.initialize('Y', coordinateSystem)
 
-    thisObject.scale = DEFAULT_SCALE
     readObjectState()
-
-    let event = {}
-    event.scale = thisObject.scale
-    thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -125,6 +118,10 @@ function newRateScale () {
     }
   }
 
+  function onScaleChanged () {
+    saveObjectState()
+  }
+
   function onMouseOver (event) {
     isMouseOver = true
     event.containerId = thisObject.container.id
@@ -133,80 +130,36 @@ function newRateScale () {
 
   function onMouseNotOver () {
     isMouseOver = false
-    offsetTimer = 0
-    scaleTimer = 0
+    scaleDisplayTimer = 0
   }
 
   function onMouseWheel (event) {
-    let morePower = 1
-    let delta
-
     if (event.shiftKey === true) {
-      if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
-      delta = event.wheelDelta
-      if (delta < 0) {
-        thisObject.offset = thisObject.offset - STEP_OFFSET * morePower
-        if (thisObject.offset < MIN_OFFSET) { thisObject.offset = STEP_OFFSET }
-      } else {
-        thisObject.offset = thisObject.offset + STEP_OFFSET * morePower
-        if (thisObject.offset > MAX_OFFSET) { thisObject.offset = MAX_OFFSET }
-      }
-
-      if (
-        thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
-        thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
-      ) {
-        event.offset = 0
-      } else {
-        event.offset = -thisObject.offset
-      }
-
-      event.isUserAction = true
-      thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
-
-      saveObjectState()
-      offsetTimer = 100
-      scaleTimer = 0
-    } else {
-      if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
-      delta = event.wheelDelta
-      if (delta < 0) {
-        thisObject.scale = thisObject.scale - STEP_SCALE * morePower
-        if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
-      } else {
-        thisObject.scale = thisObject.scale + STEP_SCALE * morePower
-        if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
-      }
-
-      finishScaleChange(event)
+      autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
+      return
     }
-  }
 
-  function setScale (scale) {
-    thisObject.scale = scale
-    let event = {}
-    finishScaleChange(event)
-  }
+    let factor
+    let morePower = 10
+    if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
 
-  function finishScaleChange (event) {
-    if (
-      thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-      thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-    ) {
-      event.scale = DEFAULT_SCALE
+    let delta = event.wheelDelta
+    if (delta < 0) {
+      factor = -0.01 * morePower
     } else {
-      event.scale = thisObject.scale
+      factor = 0.01 * morePower
     }
-    event.isUserAction = true
-    thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
 
-    saveObjectState()
-    offsetTimer = 0
-    scaleTimer = 100
+    coordinateSystem.zoomY(factor, event, limitingContainer)
+    scaleDisplayTimer = 100
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) {
+        return draggeableContainer
+      }
+
       return thisObject.container
     }
   }
@@ -214,11 +167,10 @@ function newRateScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = thisObject.scale / MAX_SCALE * 100
-      code.scale = code.scale.toFixed(0)
-      code.offset = thisObject.offset
-      code.minValue = thisObject.minValue
-      code.maxValue = thisObject.maxValue
+      code.minValue = coordinateSystem.min.y
+      code.maxValue = coordinateSystem.max.y
+      code.autoMinScale = coordinateSystem.autoMinYScale
+      code.autoMaxScale = coordinateSystem.autoMaxYScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -229,60 +181,29 @@ function newRateScale () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
-      if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
-        // not using this value
-      } else {
-        code.scale = code.scale / 100 * MAX_SCALE
-        if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
-        if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
-
-        if (code.scale !== thisObject.scale) {
-          thisObject.scale = code.scale
-          let event = {}
-          if (
-            thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-            thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-          ) {
-            event.scale = DEFAULT_SCALE
-          } else {
-            event.scale = thisObject.scale
-          }
-          thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
-        }
-      }
-
-      if (isNaN(code.offset) || code.offset === null || code.offset === undefined) {
-        // not using this value
-      } else {
-        if (code.offset < MIN_OFFSET) { code.offset = MIN_OFFSET }
-        if (code.offset > MAX_OFFSET) { code.offset = MAX_OFFSET }
-
-        if (code.offset !== thisObject.offset) {
-          thisObject.offset = code.offset
-          let event = {}
-          if (
-            thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
-            thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
-          ) {
-            event.offset = 0
-          } else {
-            event.offset = -thisObject.offset
-          }
-          thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
-        }
-      }
-
       if (
       (isNaN(code.minValue) || code.minValue === null || code.minValue === undefined) ||
       (isNaN(code.maxValue) || code.maxValue === null || code.maxValue === undefined)
         ) {
         // not using this value
       } else {
-        if (thisObject.minValue !== code.minValue || thisObject.maxValue !== code.maxValue) {
+        if (
+          thisObject.minValue !== code.minValue ||
+          thisObject.maxValue !== code.maxValue ||
+          coordinateSystem.autoMinYScale !== code.autoMinScale ||
+          coordinateSystem.autoMaxYScale !== code.autoMaxScale
+        ) {
           thisObject.minValue = code.minValue
           thisObject.maxValue = code.maxValue
           coordinateSystem.min.y = thisObject.minValue
           coordinateSystem.max.y = thisObject.maxValue
+
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
+            coordinateSystem.autoMinYScale = code.autoMinScale
+            coordinateSystem.autoMaxYScale = code.autoMaxScale
+            autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
+          }
+
           coordinateSystem.recalculateScale()
         }
       }
@@ -293,10 +214,76 @@ function newRateScale () {
   }
 
   function physics () {
-    offsetTimer--
-    scaleTimer--
+    scaleDisplayTimer--
     readObjectState()
     positioningPhysics()
+    draggingPhysics()
+  }
+
+  function draggingPhysics () {
+    if (draggeableContainer.frame.position.y === 0) { return }
+
+    let dragVector = {
+      x: draggeableContainer.frame.position.x,
+      y: draggeableContainer.frame.position.y
+    }
+
+    draggeableContainer.frame.position.x = 0
+    draggeableContainer.frame.position.y = 0
+
+    let point = {
+      x: 0,
+      y: -dragVector.y
+    }
+
+    let newMaxRate = getRateFromPointAtContainer(point, limitingContainer, coordinateSystem)
+    let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+
+    coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+    coordinateSystem.max.y = newMaxRate
+    coordinateSystem.recalculateScale()
+  }
+
+  function onUpstreamScaleChanged (event) {
+    if (event === undefined) { return }
+    if (event.type === 'center dragged') {
+      let point = {
+        x: event.dragVector.x,
+        y: -event.dragVector.y
+      }
+      let newMinDate = getDateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+      let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+      let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+      let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+      coordinateSystem.min.x = newMinDate.valueOf()
+      coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+      coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+      coordinateSystem.max.y = newMaxRate
+
+      coordinateSystem.recalculateScale()
+    }
+    if (event.type === 'top dragged') {
+      let point = {
+        x: event.dragVector.x,
+        y: event.dragVector.y
+      }
+      let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+
+      coordinateSystem.max.y = newMaxRate
+      coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
+      coordinateSystem.recalculateScale()
+    }
+    if (event.type === 'bottom dragged') {
+      let point = {
+        x: event.dragVector.x,
+        y: event.dragVector.y + rateCalculationsContainer.frame.height
+      }
+      let newMinRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+
+      coordinateSystem.min.y = newMinRate
+      coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
+      coordinateSystem.recalculateScale()
+    }
   }
 
   function positioningPhysics () {
@@ -347,10 +334,10 @@ function newRateScale () {
     /* Mouse Position Rate Calculation */
     let ratePoint = {
       x: 0,
-      y: mouse.position.y + thisObject.offset
+      y: mouse.position.y
     }
 
-    thisObject.rate = getRateFromPoint(ratePoint, rateCalculationsContainer, coordinateSystem)
+    thisObject.rate = getRateFromPointAtBrowserCanvas(ratePoint, rateCalculationsContainer, coordinateSystem)
 
     /* rateScale Positioning */
     ratePoint = {
@@ -387,6 +374,7 @@ function newRateScale () {
 
   function draw () {
     drawScaleBox()
+    autoScaleButton.draw()
     if (visible === false) {
       drawScaleDisplayCover(thisObject.container)
     }
@@ -395,12 +383,14 @@ function newRateScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
-      drawArrows()
+      autoScaleButton.draw()
     }
   }
 
   function drawScaleBox () {
     if (thisObject.rate === undefined) { return }
+    if (thisObject.payload === undefined) { return }
+    if (thisObject.payload.node === undefined) { return }
 
     let rate = thisObject.rate
 
@@ -416,123 +406,18 @@ function newRateScale () {
     let label1 = thisObject.payload.node.payload.parentNode.name
     let label2 = (Math.trunc(rate)).toLocaleString()
     let label3 = labelArray[1]
+    if (label3 === undefined) { label3 = '00' }
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     let backgroundColor = UI_COLOR.BLACK
 
-    if (offsetTimer > 0) {
-      label2 = thisObject.offset.toFixed(0)
-      label3 = 'OFFSET'
-    }
-
-    if (scaleTimer > 0) {
-      label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
+    if (scaleDisplayTimer > 0) {
+      label2 = (coordinateSystem.scale.y * 10000).toFixed(2)
       label3 = 'SCALE'
     }
 
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
-
-  function drawArrows () {
-    if (visible === false || thisObject.rate === undefined) { return }
-
-    const X_OFFSET = thisObject.container.frame.width / 2
-    const Y_OFFSET = thisObject.container.frame.height / 2
-    const HEIGHT = 6
-    const WIDTH = 18
-    const LINE_WIDTH = 3
-    const OPACITY = 0.2
-    const DISTANCE_BETWEEN_ARROWS = 10
-    const MIN_DISTANCE_FROM_CENTER = 30
-    const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
-    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 215 + DISTANCE_BETWEEN_ARROWS
-
-    let ARROW_DIRECTION = 0
-
-    ARROW_DIRECTION = -1
-    drawTwoArrows()
-    ARROW_DIRECTION = 1
-    drawTwoArrows()
-
-    function drawTwoArrows () {
-      point1 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point2 = {
-        x: X_OFFSET,
-        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point3 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point1 = thisObject.container.frame.frameThisPoint(point1)
-      point2 = thisObject.container.frame.frameThisPoint(point2)
-      point3 = thisObject.container.frame.frameThisPoint(point3)
-
-      point4 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point5 = {
-        x: X_OFFSET,
-        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point6 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point4 = thisObject.container.frame.frameThisPoint(point4)
-      point5 = thisObject.container.frame.frameThisPoint(point5)
-      point6 = thisObject.container.frame.frameThisPoint(point6)
-
-      point7 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point8 = {
-        x: X_OFFSET,
-        y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point9 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point7 = thisObject.container.frame.frameThisPoint(point7)
-      point8 = thisObject.container.frame.frameThisPoint(point8)
-      point9 = thisObject.container.frame.frameThisPoint(point9)
-
-      browserCanvasContext.setLineDash([0, 0])
-
-      browserCanvasContext.beginPath()
-
-      browserCanvasContext.moveTo(point1.x, point1.y)
-      browserCanvasContext.lineTo(point2.x, point2.y)
-      browserCanvasContext.lineTo(point3.x, point3.y)
-
-      browserCanvasContext.moveTo(point4.x, point4.y)
-      browserCanvasContext.lineTo(point5.x, point5.y)
-      browserCanvasContext.lineTo(point6.x, point6.y)
-
-      browserCanvasContext.moveTo(point7.x, point7.y)
-      browserCanvasContext.lineTo(point8.x, point8.y)
-      browserCanvasContext.lineTo(point9.x, point9.y)
-
-      browserCanvasContext.lineWidth = LINE_WIDTH
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-      browserCanvasContext.stroke()
-    }
-  }
 }
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index 0f684274f..5015c1e31 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -21,7 +21,8 @@ function newTimeFrameScale () {
   const TIME_PERIOD_DEFAULT_VALUE = 0
   const MIN_HEIGHT = 50
 
-  let visible = true
+  let previousIsVisible = true
+  let greyOutCoverLayer = false
   let isMouseOver
 
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
@@ -60,7 +61,7 @@ function newTimeFrameScale () {
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
@@ -80,7 +81,7 @@ function newTimeFrameScale () {
     newTimeFrame()
 
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onViewportZoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    onViewportZoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
@@ -88,12 +89,12 @@ function newTimeFrameScale () {
   function onMouseOverSomeTimeMachineContainer (event) {
     if (event.containerId === undefined) {
       /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
-      visible = true
+      greyOutCoverLayer = false
     } else {
       if (event.containerId === thisObject.container.id) {
-        visible = true
+        greyOutCoverLayer = false
       } else {
-        visible = false
+        greyOutCoverLayer = true
         turnOnCounter = 0
       }
     }
@@ -118,6 +119,22 @@ function newTimeFrameScale () {
   function physics () {
     readObjectState()
     positioningPhysics()
+    zoomOutPhysics()
+  }
+
+  function zoomOutPhysics () {
+    if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+      let event = {}
+      event.timeFrame = thisObject.timeFrame
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = true
+    }
+    if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+      let event = {}
+      event.timeFrame = ONE_DAY_IN_MILISECONDS
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = false
+    }
   }
 
   function positioningPhysics () {
@@ -186,7 +203,8 @@ function newTimeFrameScale () {
     thisObject.isVisible = true
     thisObject.payload.isVisible = true
     if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
-        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y) {
+        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
       thisObject.isVisible = false
       thisObject.payload.isVisible = false
     }
@@ -303,7 +321,7 @@ function newTimeFrameScale () {
 
   function draw () {
     drawScaleBox()
-    if (visible === false) {
+    if (greyOutCoverLayer === true) {
       drawScaleDisplayCover(thisObject.container)
     }
   }
@@ -322,8 +340,8 @@ function newTimeFrameScale () {
     let label2 = label[0]
     let label3 = label[1].toUpperCase()
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     let backgroundColor = UI_COLOR.BLACK
 
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 7e822a723..f87354e66 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -2,7 +2,6 @@ function newTimeScale () {
   const MODULE_NAME = 'Time Scale'
 
   let thisObject = {
-    scale: undefined,
     container: undefined,
     date: undefined,
     fitFunction: undefined,
@@ -19,12 +18,6 @@ function newTimeScale () {
     finalize: finalize
   }
 
-  const DEFAULT_SCALE = 0
-  const STEP_SCALE = 2.5
-  const MIN_SCALE = 0
-  const MAX_SCALE = 250
-  const SNAP_THRESHOLD_SCALE = 0
-
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
@@ -37,11 +30,13 @@ function newTimeScale () {
   thisObject.container.frame.height = 40
 
   let visible = true
+  let autoScaleButton
   let isMouseOver
 
   let onMouseWheelEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onScaleChangedEventSubscriptionId
 
   let coordinateSystem
   let limitingContainer
@@ -52,13 +47,14 @@ function newTimeScale () {
       y: 0
     }
   }
-  let scaleTimer = 0
+
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -68,25 +64,25 @@ function newTimeScale () {
     coordinateSystem = undefined
     limitingContainer = undefined
     mouse = undefined
+
+    autoScaleButton.finalize()
+    autoScaleButton = undefined
   }
 
   function initialize (pCoordinateSystem, pLimitingContainer) {
     coordinateSystem = pCoordinateSystem
     limitingContainer = pLimitingContainer
 
-    thisObject.fromDate = coordinateSystem.min.x
-    thisObject.toDate = coordinateSystem.max.x
-
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
+
+    autoScaleButton = newAutoScaleButton()
+    autoScaleButton.container.connectToParent(thisObject.container)
+    autoScaleButton.initialize('X', coordinateSystem)
 
-    thisObject.scale = DEFAULT_SCALE
     readObjectState()
-
-    let event = {}
-    event.scale = thisObject.scale
-    thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -117,39 +113,32 @@ function newTimeScale () {
 
   function onMouseNotOver () {
     isMouseOver = false
-    scaleTimer = 0
   }
 
   function onMouseWheel (event) {
-    let morePower = 1
-    if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
+    if (event.shiftKey === true) {
+      autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
+      return
+    }
+    let factor
+    let morePower = 10
+    if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
 
-    delta = event.wheelDelta
+    let delta = event.wheelDelta
     if (delta < 0) {
-      thisObject.scale = thisObject.scale - STEP_SCALE * morePower
-      if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
+      factor = -0.01 * morePower
     } else {
-      thisObject.scale = thisObject.scale + STEP_SCALE * morePower
-      if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
+      factor = 0.01 * morePower
     }
 
-    if (
-      thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-      thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-    ) {
-      event.scale = DEFAULT_SCALE
-    } else {
-      event.scale = thisObject.scale
-    }
-
-    event.isUserAction = true
-    thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
-
-    saveObjectState()
-    scaleTimer = 100
+    coordinateSystem.zoomX(factor, event, limitingContainer, MODULE_NAME)
   }
 
-  function getContainer (point) {
+  function onScaleChanged () {
+    saveObjectState()
+  }
+
+  function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
     }
@@ -158,10 +147,10 @@ function newTimeScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = thisObject.scale / MAX_SCALE * 100
-      code.scale = code.scale.toFixed(0)
-      code.fromDate = (new Date(thisObject.fromDate)).toISOString()
-      code.toDate = (new Date(thisObject.toDate)).toISOString()
+      code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
+      code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
+      code.autoMinScale = coordinateSystem.autoMinXScale
+      code.autoMaxScale = coordinateSystem.autoMaxXScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -172,28 +161,6 @@ function newTimeScale () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
-      if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
-         // not using this value
-      } else {
-        code.scale = code.scale / 100 * MAX_SCALE
-        if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
-        if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
-
-        if (code.scale !== thisObject.scale) {
-          thisObject.scale = code.scale
-          let event = {}
-          if (
-            thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-            thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-          ) {
-            event.scale = DEFAULT_SCALE
-          } else {
-            event.scale = thisObject.scale
-          }
-          thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
-        }
-      }
-
       if (
       (isNaN(Date.parse(code.fromDate)) || code.fromDate === null || code.fromDate === undefined) ||
       (isNaN(Date.parse(code.toDate)) || code.toDate === null || code.toDate === undefined)
@@ -205,6 +172,12 @@ function newTimeScale () {
           thisObject.toDate = Date.parse(code.toDate)
           coordinateSystem.min.x = thisObject.fromDate
           coordinateSystem.max.x = thisObject.toDate
+
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
+            coordinateSystem.autoMinXScale = code.autoMinScale
+            coordinateSystem.autoMaxXScale = code.autoMaxScale
+            autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
+          }
           coordinateSystem.recalculateScale()
         }
       }
@@ -215,7 +188,6 @@ function newTimeScale () {
   }
 
   function physics () {
-    scaleTimer--
     readObjectState()
     positioningPhysics()
   }
@@ -245,7 +217,7 @@ function newTimeScale () {
       y: 0
     }
 
-    let mouseDate = getDateFromPoint(timePoint, limitingContainer, coordinateSystem)
+    let mouseDate = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
 
     thisObject.date = new Date(mouseDate)
 
@@ -269,13 +241,15 @@ function newTimeScale () {
 
     thisObject.isVisible = true
     if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
-        thisObject.container.frame.position.y < upCorner.y) {
+        thisObject.container.frame.position.y < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
       thisObject.isVisible = false
     }
   }
 
   function draw () {
     drawScaleBox()
+    autoScaleButton.draw()
     if (visible === false) {
       drawScaleDisplayCover(thisObject.container)
     }
@@ -284,7 +258,7 @@ function newTimeScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
-      drawArrows()
+      autoScaleButton.draw()
     }
   }
 
@@ -297,117 +271,11 @@ function newTimeScale () {
     let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label3 = labelArray[4]
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     let backgroundColor = UI_COLOR.BLACK
 
-    if (scaleTimer > 0) {
-      label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
-      label3 = 'SCALE'
-    }
-
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
-
-  function drawArrows () {
-    if (visible === false || thisObject.date === undefined) { return }
-
-    const X_OFFSET = thisObject.container.frame.width / 2
-    const Y_OFFSET = thisObject.container.frame.height / 2 - 10
-    const HEIGHT = 18
-    const WIDTH = 6
-    const LINE_WIDTH = 3
-    const OPACITY = 0.2
-    const DISTANCE_BETWEEN_ARROWS = 10
-    const MIN_DISTANCE_FROM_CENTER = 110
-    const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
-    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + MAX_SCALE + DISTANCE_BETWEEN_ARROWS
-
-    let ARROW_DIRECTION = 0
-
-    ARROW_DIRECTION = -1
-    drawTwoArrows()
-    ARROW_DIRECTION = 1
-    drawTwoArrows()
-
-    function drawTwoArrows () {
-      point1 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point2 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point3 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point1 = thisObject.container.frame.frameThisPoint(point1)
-      point2 = thisObject.container.frame.frameThisPoint(point2)
-      point3 = thisObject.container.frame.frameThisPoint(point3)
-
-      point4 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point5 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point6 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point4 = thisObject.container.frame.frameThisPoint(point4)
-      point5 = thisObject.container.frame.frameThisPoint(point5)
-      point6 = thisObject.container.frame.frameThisPoint(point6)
-
-      point7 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point8 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point9 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point7 = thisObject.container.frame.frameThisPoint(point7)
-      point8 = thisObject.container.frame.frameThisPoint(point8)
-      point9 = thisObject.container.frame.frameThisPoint(point9)
-
-      browserCanvasContext.setLineDash([0, 0])
-
-      browserCanvasContext.beginPath()
-
-      browserCanvasContext.moveTo(point1.x, point1.y)
-      browserCanvasContext.lineTo(point2.x, point2.y)
-      browserCanvasContext.lineTo(point3.x, point3.y)
-
-      browserCanvasContext.moveTo(point4.x, point4.y)
-      browserCanvasContext.lineTo(point5.x, point5.y)
-      browserCanvasContext.lineTo(point6.x, point6.y)
-
-      browserCanvasContext.moveTo(point7.x, point7.y)
-      browserCanvasContext.lineTo(point8.x, point8.y)
-      browserCanvasContext.lineTo(point9.x, point9.y)
-
-      browserCanvasContext.lineWidth = LINE_WIDTH
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-      browserCanvasContext.stroke()
-    }
-  }
 }
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartingSpace.js
similarity index 83%
rename from Spaces/ChartSpace.js
rename to Spaces/ChartingSpace.js
index d5cc45486..be86e976b 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartingSpace.js
@@ -6,8 +6,8 @@ changes, then all charts in it are replotted with the corresponging data.
 
 */
 
-function newChartSpace () {
-  const MODULE_NAME = 'Chart Space'
+function newChartingSpace () {
+  const MODULE_NAME = 'Charting Space'
   const ERROR_LOG = true
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
@@ -84,7 +84,7 @@ function newChartSpace () {
   }
 
   function initialize () {
-    let rootNodes = canvas.designerSpace.workspace.workspaceNode.rootNodes
+    let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
     for (let i = 0; i < rootNodes.length; i++) {
       let rootNode = rootNodes[i]
       if (rootNode.type === 'Charting Space') {
@@ -93,7 +93,7 @@ function newChartSpace () {
     }
 
     if (thisObject.payload === undefined) {
-      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Designer Space in order to enable Charts. PLease create one and refreash your browser. ') }
+      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Design Space in order to enable Charts. PLease create one and refreash your browser. ') }
       return
     }
 
@@ -112,6 +112,7 @@ function newChartSpace () {
 
   function getContainer (point, purpose) {
     if (thisObject.visible !== true) { return }
+    if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
 
     let container
 
@@ -123,25 +124,31 @@ function newChartSpace () {
       }
     }
 
-    /* Now we see which is the inner most container that has it */
+    /*
+    Now we see which is the inner most container that has it.
+    In this case we will ask all the time machines even if one of them already returned a matching container.
+    This will help the others know they are not on ofcus
+    */
+    let containerFound
     for (let i = 0; i < thisObject.timeMachines.length; i++) {
       container = thisObject.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
         if (purpose !== undefined) {
-          if (container.isForThisPurpose(purpose)) {
-            if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-              return container
-            }
-          }
+          containerFound = container
         } else {
           if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            return container
+            containerFound = container
           }
         }
       }
     }
+    if (containerFound !== undefined) {
+      containerFound.space = 'Charting Space'
+      return containerFound
+    }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      thisObject.container.space = 'Charting Space'
       return thisObject.container
     } else {
       return undefined
@@ -160,7 +167,7 @@ function newChartSpace () {
       y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector)
+    canvas.chartingSpace.viewport.displace(displaceVector)
   }
 
   function oneScreenDown () {
@@ -169,7 +176,7 @@ function newChartSpace () {
       y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector)
+    canvas.chartingSpace.viewport.displace(displaceVector)
   }
 
   function oneScreenLeft () {
@@ -178,7 +185,7 @@ function newChartSpace () {
       y: 0
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector, true)
+    canvas.chartingSpace.viewport.displace(displaceVector, true)
   }
 
   function oneScreenRight () {
@@ -187,7 +194,7 @@ function newChartSpace () {
       y: 0
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector, true)
+    canvas.chartingSpace.viewport.displace(displaceVector, true)
   }
 
   function fitFunction (point, fullVisible) {
@@ -258,16 +265,21 @@ function newChartSpace () {
     if (thisObject.payload.node === undefined) { return }
     syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
 
-    if (thisObject.payload.node.timeMachines !== undefined) {
-      for (let j = 0; j < thisObject.payload.node.timeMachines.length; j++) {
-        let node = thisObject.payload.node.timeMachines[j]
-        let timeMachine = timeMachinesMap.get(node.id)
-        if (timeMachine === undefined) {
+    if (thisObject.payload.node.dashboards !== undefined) {
+      for (let i = 0; i < thisObject.payload.node.dashboards.length; i++) {
+        let dashboard = thisObject.payload.node.dashboards[i]
+        if (dashboard.timeMachines !== undefined) {
+          for (let j = 0; j < dashboard.timeMachines.length; j++) {
+            let node = dashboard.timeMachines[j]
+            let timeMachine = timeMachinesMap.get(node.id)
+            if (timeMachine === undefined) {
               /* The time machine node is new, thus we need to initialize a new timeMachine */
-          initializeTimeMachine(node, syncWithDesignerLoop)
-        } else {
+              initializeTimeMachine(node, syncWithDesignerLoop)
+            } else {
               /* The time machine already exists, we tag it as existing at the current loop. */
-          timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+              timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+            }
+          }
         }
       }
     }
@@ -302,16 +314,11 @@ function newChartSpace () {
       timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
       timeMachine.initialize(onTimeMachineInitialized)
 
-      function onTimeMachineInitialized (err) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] syncWithDesigner -> initializeTimeMachine -> Initialization Failed. -> Err ' + err.message) }
-          return
-        }
-
+      function onTimeMachineInitialized () {
         thisObject.timeMachines.push(timeMachine)
         timeMachine.payload.uiObject.setValue('')
-        if (canvas.chartSpace.viewport !== undefined) {
-          canvas.chartSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+        if (canvas.chartingSpace.viewport !== undefined) {
+          canvas.chartingSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
         }
       }
     }
@@ -326,8 +333,8 @@ function newChartSpace () {
       thisObject.visible = true
     }
 
-    if (canvas.chartSpace.viewport !== undefined) {
-      canvas.chartSpace.viewport.resize()
+    if (canvas.chartingSpace.viewport !== undefined) {
+      canvas.chartingSpace.viewport.resize()
     }
   }
 
diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index 3fd7ac075..01fea0e08 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -48,7 +48,7 @@
      thisObject.container.frame.position.x = 0
 
      let INITIAL_POSITION
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        let localStorage = window.localStorage.getItem(MODULE_NAME)
        if (localStorage !== null) {
          storage = JSON.parse(localStorage)
@@ -80,10 +80,21 @@
    function resize () {
      thisObject.container.frame.width = browserCanvas.width
      thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT
+
+     switch (thisObject.status) {
+       case 'BOTTOM': {
+         thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+         break
+       }
+       case 'TOP': {
+         thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
+         break
+       }
+     }
    }
 
    function toTop () {
-     thisObject.container.frame.position.y = 0
+     thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
    }
 
    function toBottom () {
@@ -95,14 +106,14 @@
    }
 
    function moveUp () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y - browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
      if (thisObject.container.frame.position.y < 0) {
        thisObject.container.frame.position.y = 0
      }
    }
 
    function moveDown () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y + browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
      if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
        thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
      }
@@ -121,7 +132,7 @@
 
      thisObject.status = 'MIDDLE'
 
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        thisObject.container.isDraggeable = true
      } else {
        thisObject.container.isDraggeable = false
@@ -130,15 +141,15 @@
      if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) {
        thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
        thisObject.status = 'BOTTOM'
-       canvas.designerSpace.makeInvisible()
+       canvas.designSpace.makeInvisible()
        canvas.floatingSpace.makeInvisible()
      } else {
-       canvas.designerSpace.makeVisible()
+       canvas.designSpace.makeVisible()
        canvas.floatingSpace.makeVisible()
      }
 
-     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
-       thisObject.container.frame.position.y = 0
+     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
+       thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
        thisObject.status = 'TOP'
        canvas.panelsSpace.visible = false
      } else {
@@ -150,8 +161,8 @@
        spacePosition: COCKPIT_SPACE_POSITION
      }
      window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
-     if (canvas.chartSpace.viewport !== undefined) {
-       canvas.chartSpace.viewport.resize()
+     if (canvas.chartingSpace.viewport !== undefined) {
+       canvas.chartingSpace.viewport.resize()
      }
    }
 
@@ -162,6 +173,7 @@
      // if (container !== undefined) { return container }
 
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+       thisObject.container.space = 'Cockpit Space'
        return thisObject.container
      } else {
        return undefined
@@ -207,7 +219,7 @@
      browserCanvasContext.closePath()
      browserCanvasContext.fill()
 
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        arrow()
      }
    }
diff --git a/Spaces/DesignerSpace.js b/Spaces/DesignSpace.js
similarity index 88%
rename from Spaces/DesignerSpace.js
rename to Spaces/DesignSpace.js
index add5dd2f2..d1c1f7faf 100644
--- a/Spaces/DesignerSpace.js
+++ b/Spaces/DesignSpace.js
@@ -1,5 +1,5 @@
 
-function newDesignerSpace () {
+function newDesignSpace () {
   const MODULE_NAME = 'Strategy Space'
   let thisObject = {
     sidePanel: undefined,
@@ -241,7 +241,31 @@ function newDesignerSpace () {
       'task-manager',
       'session-based-data',
       'session-independent-data',
-      'session-reference'
+      'session-reference',
+      'dashboard',
+      'toggle-auto-scale-manual',
+      'toggle-auto-scale-auto-min-max',
+      'toggle-auto-scale-auto-max',
+      'toggle-auto-scale-auto-min',
+      'toggle-panel-off',
+      'toggle-auto-time-scale-auto-min',
+      'toggle-auto-time-scale-auto-max',
+      'toggle-auto-time-scale-auto-min-max',
+      'toggle-auto-time-scale-manual',
+      'mouse-pointer',
+      'mouse-left-click',
+      'mouse-right-click',
+      'mouse-wheel-up',
+      'mouse-wheel-down',
+      'mouse-wheel-click',
+      'key-alt',
+      'key-shift',
+      'key-ctrl',
+      'hand-drag',
+      'key-down',
+      'key-left',
+      'key-right',
+      'key-up'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {
@@ -280,7 +304,10 @@ function newDesignerSpace () {
 
     if (thisObject.sidePanel !== undefined) {
       container = thisObject.sidePanel.getContainer(point)
-      if (container !== undefined) { return container }
+      if (container !== undefined) {
+        container.space = 'Design Space'
+        return container
+      }
     }
 
     return
diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js
index 0737e8ed0..bd84fd983 100644
--- a/Spaces/FloatingSpace.js
+++ b/Spaces/FloatingSpace.js
@@ -237,9 +237,13 @@ function newFloatingSpace () {
     let container
 
     container = thisObject.floatingLayer.getContainer(point)
-    if (container !== undefined) { return container }
+    if (container !== undefined) {
+      container.space = 'Floating Space'
+      return container
+    }
 
     if (visible === true) {
+      thisObject.container.space = 'Floating Space'
       return thisObject.container
     }
   }
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index 52f4fa087..b1bd3ebc6 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -8,8 +8,8 @@ function newPanelsSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
-    makeVisible: makeVisible,
-    makeInvisible: makeInvisible,
+    unHide: unHide,
+    hide: hide,
     createNewPanel: createNewPanel,
     destroyPanel: destroyPanel,
     getPanel: getPanel,
@@ -43,8 +43,8 @@ function newPanelsSpace () {
       case 'Layers Panel':
         {
           panel = newLayersPanel()
-          panel.fitFunction = canvas.chartSpace.fitFunction
-          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+          panel.fitFunction = canvas.chartingSpace.fitFunction
+          panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
           panel.type = 'Layers Panel'
           break
         }
@@ -52,14 +52,14 @@ function newPanelsSpace () {
         {
           if (pParameters.panelNode.code.isLegacy !== true) {
             panel = newPlotterPanel()
-            panel.fitFunction = canvas.chartSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.fitFunction = canvas.chartingSpace.fitFunction
+            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
             panel.session = pSession
             panel.initialize(pParameters.panelNode)
           } else {
             panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.code.codeName)
-            panel.fitFunction = canvas.chartSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.fitFunction = canvas.chartingSpace.fitFunction
+            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
             panel.session = pSession
             panel.initialize()
           }
@@ -76,20 +76,20 @@ function newPanelsSpace () {
     return panel.handle
   }
 
-  function makeVisible (owner, type) {
+  function unHide (owner, type) {
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
       if (panel.owner === owner && panel.type === type) {
-        panel.isVisible = true
+        panel.isHidden = false
       }
     }
   }
 
-  function makeInvisible (owner, type) {
+  function hide (owner, type) {
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
       if (panel.owner === owner && panel.type === type) {
-        panel.isVisible = false
+        panel.isHidden = true
       }
     }
   }
@@ -130,7 +130,7 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-        let owner = canvas.chartSpace.inViewport.get(panel.owner)
+        let owner = canvas.chartingSpace.inViewport.get(panel.owner)
         if (owner !== undefined) {
           if (panel.physics !== undefined) {
             panel.physics()
@@ -144,7 +144,7 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-
+        if (panel.isVisible === false || panel.isHidden === true) { continue }
         /* setting the speed of the panel */
         if (panel.container.speed === undefined) {
           panel.container.speed = {
@@ -162,8 +162,8 @@ function newPanelsSpace () {
         centerPoint.y = centerPoint.y + panel.container.frame.height / 2
 
         /* Lets see which quadrant the panel is at */
-        let verticalLine = (canvas.chartSpace.viewport.visibleArea.topRight.x - canvas.chartSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartSpace.viewport.visibleArea.topLeft.x
-        let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartSpace.viewport.visibleArea.topRight.y
+        let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
+        let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
 
         if (panel.panelTabButton !== undefined) {
           if (panel.panelTabButton.status === 'up') {
@@ -208,18 +208,18 @@ function newPanelsSpace () {
             panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
           }
         }
-        if (panel.container.frame.height <= canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) {
+        if (panel.container.frame.height <= canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) {
           if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
             panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
             isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y < canvas.chartSpace.viewport.visibleArea.topLeft.y) {
-              panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.topLeft.y
+            if (panel.container.frame.position.y < canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
+              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topLeft.y
             }
           } else {
             panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
             isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartSpace.viewport.visibleArea.bottomRight.y) {
-              panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
+            if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartingSpace.viewport.visibleArea.bottomRight.y) {
+              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
             }
           }
         }
@@ -246,7 +246,7 @@ function newPanelsSpace () {
 
       for (let i = 0; i < currentIndex; i++) {
         let panel = thisObject.panels[i]
-        if (panel.isVisible === true) {
+        if (panel.isVisible === true && panel.isHidden === false) {
           if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
             pushOut(currentContainer, panel.container, panel.gravitatesTowards)
           }
@@ -317,9 +317,11 @@ function newPanelsSpace () {
 
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
-      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        panel.draw()
+        if (panel.isVisible === true && panel.isHidden === false) {
+          panel.draw()
+        }
       }
     }
   }
@@ -334,14 +336,18 @@ function newPanelsSpace () {
       */
     for (let i = thisObject.panels.length - 1; i >= 0; i--) {
       let panel = thisObject.panels[i]
-      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        container = panel.getContainer(point)
+        if (panel.isVisible === true && panel.isHidden === false) {
+          container = panel.getContainer(point)
+        }
       }
       if (container !== undefined) {
+        container.space = 'Panels Space'
         return container
       }
     }
+    thisObject.container.space = 'Panels Space'
     return thisObject.container
   }
 }
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 7a2b22fb6..905a93894 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -7,43 +7,50 @@ function newTopSpace () {
     initialize: initialize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize()
 
   resize()
 
-  container.isDraggeable = false
-
+  thisObject.container.isDraggeable = false
+  let backgroundImage
+  let logoImage
   return thisObject
 
   function initialize () {
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+    backgroundImage = new Image()
+    logoImage = new Image()
+
+    loadImage('superalgos-header-background', backgroundImage)
+    loadImage('superalgos-logo-for-color-background', logoImage)
+
+    function loadImage (name, image) {
+      const PATH = 'Images/'
+
+      image.onload = onImageLoad
+      image.fileName = name
+
+      function onImageLoad () {
+        image.canDraw = true
+      }
+      image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+    }
   }
 
   function resize () {
     thisObject.container.frame.width = browserCanvas.width
     thisObject.container.frame.height = TOP_SPACE_HEIGHT
 
-    container.frame.position.x = 0
+    thisObject.container.frame.position.x = 0
     try {
-      container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y
+      thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y
     } catch (e) { }
   }
 
   function getContainer (point) {
-    let container
-    return
 
-    container = thisObject.currentEvent.getContainer(point)
-    if (container !== undefined) { return container }
-
-    container = thisObject.login.getContainer(point)
-    if (container !== undefined) { return container }
-
-        /* The point does not belong to any inner container, so we return the current container. */
-
-    return thisObject.container
   }
 
   function draw () {
@@ -54,15 +61,48 @@ function newTopSpace () {
   }
 
   function drawBackground () {
+    /* Solid Color */
     let opacity = 1
-
     browserCanvasContext.beginPath()
-
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
-
+    if (areWeRecording === true) {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+    } else {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+    }
     browserCanvasContext.closePath()
-
     browserCanvasContext.fill()
+
+    /* Background Image */
+    if (backgroundImage !== undefined) {
+      if (backgroundImage.canDraw === true) {
+        let imagePosition = {
+          x: 0,
+          y: 0
+        }
+
+        browserCanvasContext.drawImage(
+          backgroundImage, imagePosition.x,
+          imagePosition.y,
+          browserCanvas.width,
+          TOP_SPACE_HEIGHT - 2)
+      }
+    }
+
+    /* Logo Image */
+    if (logoImage !== undefined) {
+      if (logoImage.canDraw === true) {
+        let imagePosition = {
+          x: 10,
+          y: 0
+        }
+
+        browserCanvasContext.drawImage(
+          logoImage, imagePosition.x,
+          imagePosition.y,
+          150,
+          TOP_SPACE_HEIGHT - 2)
+      }
+    }
   }
 }
diff --git a/SplashScreen.js b/SplashScreen.js
index 9768aaa82..5fe6da376 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -43,7 +43,7 @@ function newSplashScreen () {
       canDrawLogo = true
     }
 
-    logo.src = window.canvasApp.urlPrefix + 'Images/Superalgos-logo-horz-sm-t.png'
+    logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
 
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
   }
@@ -71,12 +71,9 @@ function newSplashScreen () {
         /* Set the background. */
 
     browserCanvasContext.beginPath()
-
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
     browserCanvasContext.closePath()
-
     browserCanvasContext.fill()
 
     if (canDrawLogo === false) { return }
@@ -107,11 +104,11 @@ function newSplashScreen () {
       stepsInitializationCounter = 99
     }
 
-    let fontSize = 10
+    let fontSize = 15
 
     let labelPoint = {
-      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 25,
-      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 80 + yDisplacement
+      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
+      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
     }
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -123,13 +120,13 @@ function newSplashScreen () {
 
         /* Algo Bots Competitions Sub Title */
 
-    fontSize = 15
+    fontSize = 35
 
     title = 'Beta'
 
     titlePoint = {
       x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
-      y: thisObject.container.frame.height / 2 - fontSize * 2 + 80 + yDisplacement
+      y: thisObject.container.frame.height / 2 + 70 + yDisplacement
     }
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
diff --git a/Utilities.js b/Utilities.js
index d9c134816..2588156b9 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -82,7 +82,7 @@ function convertTimeFrameToName (pTimeFrame) {
   }
 }
 
-function download (filename, text) {
+function downloadText (filename, text) {
   let element = document.createElement('a')
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
   element.setAttribute('download', filename)
@@ -92,20 +92,37 @@ function download (filename, text) {
   document.body.removeChild(element)
 }
 
+function downloadCanvas (filename) {
+  let data = browserCanvas.toDataURL('image/png', 1)
+  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
+  data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
+
+  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
+  data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
+
+  let element = document.createElement('a')
+  element.setAttribute('href', data)
+  element.setAttribute('download', filename + '.PNG')
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+};
+
 function transformThisPoint (point, container) {
     /* We make the point relative to the current frame */
 
   point = container.frame.frameThisPoint(point)
 
-    /* We pass this point through the canvas.chartSpace.viewport lends, meaning we apply the canvas.chartSpace.viewport zoom and displacement. */
+    /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
 
-  point = canvas.chartSpace.viewport.transformThisPoint(point)
+  point = canvas.chartingSpace.viewport.transformThisPoint(point)
 
   return point
 }
 
 function unTransformThisPoint (point, container) {
-  point = canvas.chartSpace.viewport.unTransformThisPoint(point)
+  point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
   point = container.frame.unframeThisPoint(point)
 
   return point
@@ -124,7 +141,7 @@ function pad (str, max) {
   return str.length < max ? pad('0' + str, max) : str
 }
 
-function getDateFromPoint (point, container, coordinateSystem) {
+function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
@@ -133,13 +150,43 @@ function getDateFromPoint (point, container, coordinateSystem) {
   return date
 }
 
-function getRateFromPoint (point, container, coordinateSystem) {
+function getDateFromPointAtChartsSpace (point, container, coordinateSystem) {
+  point = container.frame.unframeThisPoint(point)
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  let date = new Date(point.x)
+
+  return date
+}
+
+function getDateFromPointAtContainer (point, container, coordinateSystem) {
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  let date = new Date(point.x)
+
+  return date
+}
+
+function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
   return point.y
 }
 
+function getRateFromPointAtChartingSpace (point, container, coordinateSystem) {
+  point = container.frame.unframeThisPoint(point)
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  return point.y
+}
+
+function getRateFromPointAtContainer (point, container, coordinateSystem) {
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  return point.y
+}
+
 function getMilisecondsFromPoint (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
@@ -153,14 +200,14 @@ function moveToUserPosition (container, currentDate, currentRate, coordinateSyst
     y: currentRate
   }
 
-  /* Put this point in the coordinate system of the canvas.chartSpace.viewport */
+  /* Put this point in the coordinate system of the canvas.chartingSpace.viewport */
   targetPoint = coordinateSystem.transformThisPoint(targetPoint)
   targetPoint = transformThisPoint(targetPoint, container)
 
   let displaceVector
 
-  let targetNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(targetPoint)
-  let mouseNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(mousePosition)
+  let targetNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(targetPoint)
+  let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mousePosition)
 
   displaceVector = {
     x: mouseNoZoom.x - targetNoZoom.x,
@@ -181,16 +228,14 @@ function removeTime (datetime) {
   return dateOnly
 }
 
-function printLabel (labelToPrint, x, y, opacity, fontSize) {
+function printLabel (labelToPrint, x, y, opacity, fontSize, color) {
   let labelPoint
+  if (color === undefined) { color = UI_COLOR.DARK }
 
   browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
   let label = '' + labelToPrint
-
   let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
+  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
   browserCanvasContext.fillText(label, x, y)
 }
 
diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js
index f534964ca..7ce98884c 100644
--- a/Utilities/RoundedCornersBackground.js
+++ b/Utilities/RoundedCornersBackground.js
@@ -131,6 +131,7 @@ function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, containe
       }
 
       imagePosition = container.frame.frameThisPoint(imagePosition)
+
       browserCanvasContext.drawImage(
         icon, imagePosition.x,
         imagePosition.y,
diff --git a/VideoRecorder.js b/VideoRecorder.js
new file mode 100644
index 000000000..e84336c95
--- /dev/null
+++ b/VideoRecorder.js
@@ -0,0 +1,173 @@
+function newVideoRecorder () {
+  let thisObject = {
+    recordCanvas: recordCanvas
+  }
+  let lastAction
+  return thisObject
+
+  function recordCanvas () {
+    {
+      const DISTANCE_BETWEEN_ICONS = 35
+      const ICON_SIZES = 50
+
+      let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+      let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
+
+      let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+      let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+      let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+      let imagePosition
+      let buttonPressedIcon
+
+      if (canvas.mouse.action === 'key down' && lastAction === 'dragging') {
+        canvas.mouse.action = 'dragging'
+      }
+      switch (canvas.mouse.action) {
+        case 'moving': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+        case 'dragging': {
+          pointerIcon = draggingIcon
+          break
+        }
+        case 'wheel': {
+          if (canvas.mouse.event.delta > 0) {
+            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
+          } else {
+            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
+          }
+
+          break
+        }
+        case 'key down': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+        case 'key up': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+      }
+
+      lastAction = canvas.mouse.action
+
+      imagePosition = {
+        x: canvas.mouse.position.x,
+        y: canvas.mouse.position.y
+      }
+      drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+      switch (canvas.mouse.event.buttons) {
+        case 0: {
+          buttonPressedIcon = undefined
+          break
+        }
+        case 1: {
+          buttonPressedIcon = leftClickIcon
+          break
+        }
+        case 2: {
+          buttonPressedIcon = rightClickIcon
+          break
+        }
+        case 3: {
+          buttonPressedIcon = undefined
+          break
+        }
+        case 4: {
+          buttonPressedIcon = wheelClickIcon
+          break
+        }
+      }
+
+      let firstRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 1
+      let secondRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 2
+      let icon
+
+      imagePosition = {
+        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 2,
+        y: canvas.mouse.position.y
+      }
+      drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+      if (canvas.mouse.event.shiftKey === true) {
+        icon = canvas.designSpace.iconCollection.get('key-shift')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+          y: canvas.mouse.position.y + firstRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+        icon = canvas.designSpace.iconCollection.get('key-ctrl')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+          y: canvas.mouse.position.y + secondRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.altKey === true) {
+        icon = canvas.designSpace.iconCollection.get('key-alt')
+        imagePosition = {
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 3 + ICON_SIZES * 0,
+          y: canvas.mouse.position.y + secondRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowUp') {
+        icon = canvas.designSpace.iconCollection.get('key-up')
+        imagePosition = {
+          x: canvas.mouse.position.x - 0,
+          y: canvas.mouse.position.y + firstRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowDown') {
+        icon = canvas.designSpace.iconCollection.get('key-down')
+        imagePosition = {
+          x: canvas.mouse.position.x - 0,
+          y: canvas.mouse.position.y + secondRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowLeft') {
+        icon = canvas.designSpace.iconCollection.get('key-left')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 0 - ICON_SIZES * 1,
+          y: canvas.mouse.position.y + secondRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowRight') {
+        icon = canvas.designSpace.iconCollection.get('key-right')
+        imagePosition = {
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 0 + ICON_SIZES * 1,
+          y: canvas.mouse.position.y + secondRow
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      function drawMousePointer (icon, imagePosition, imageSize) {
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            browserCanvasContext.drawImage(
+              icon, imagePosition.x,
+              imagePosition.y,
+              imageSize,
+              imageSize)
+          }
+        }
+      }
+      mediaRecorder.capture(browserCanvas)
+    }
+  }
+}
+