Merge pull request #114 from AAMasters/develop

Beta 5

Animation.js

@@ -144,12 +144,20 @@ function newAnimation () {
         browserCanvas.height = 1
       }
 
-      /* Media Recording */
+      /* Video Recording */
       videoRecorder.physics()
-      if (areWeRecording === true) {
+      if (ARE_WE_RECORDING_A_VIDEO === true) {
         videoRecorder.recordCanvas()
       }
 
+      /* Panorama Recording */
+      if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
+        if (PANORAMA_WAS_PANNED === true) {
+          addToMarketPanorama()
+          PANORAMA_WAS_PANNED = false
+        }
+      }
+
       /* We request the next frame to be drawn, and stablishing a loop */
 
       /* Use this code for full animation speed. */
@@ -168,6 +176,7 @@ function newAnimation () {
   }
 
   function clearBrowserCanvas () {
+    if (canWeDraw === false) { return }
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
     browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height)
   }

Canvas.js

@@ -3,7 +3,6 @@ let browserCanvasContext          // The context of the canvas object.
 
 let stepsInitializationCounter = 0         // This counter the initialization steps required to be able to turn off the splash screen.
 let marketInitializationCounter = 0        // This counter the initialization of markets required to be able to turn off the splash screen.
-let splashScreenNeeded = true
 
 function newCanvas () {
   const MODULE_NAME = 'Canvas'
@@ -32,12 +31,13 @@ function newCanvas () {
   let thisObject = {
     eventHandler: undefined,
     topSpace: undefined,
+    sideSpace: undefined,
     chartingSpace: undefined,
     floatingSpace: undefined,
     panelsSpace: undefined,
     cockpitSpace: undefined,
-    bottomSpace: undefined,
     designSpace: undefined,
+    splashScreen: undefined,
     animation: undefined,
     mouse: undefined,
     shorcutNumbers: new Map(),
@@ -47,7 +47,6 @@ function newCanvas () {
 
   thisObject.eventHandler = newEventHandler()
 
-  let splashScreen
   let lastContainerMouseOver
   let lastShortcutKeyRejection
 
@@ -63,6 +62,7 @@ function newCanvas () {
 
   function finalize () {
     try {
+      thisObject.sideSpace.finalize()
       thisObject.chartingSpace.finalize()
       thisObject.floatingSpace.finalize()
       thisObject.shorcutNumbers = undefined
@@ -86,7 +86,7 @@ function newCanvas () {
       browserCanvas.removeEventListener('keydown', onKeyDown, false)
       browserCanvas.removeEventListener('keyup', onKeyUp, false)
 
-      splashScreen = undefined
+      thisObject.splashScreen = undefined
       lastContainerMouseOver = undefined
 
       hisObject.mouse = undefined
@@ -109,22 +109,22 @@ function newCanvas () {
       thisObject.topSpace = newTopSpace()
       thisObject.topSpace.initialize()
 
-      thisObject.designSpace = newDesignSpace()
-      thisObject.designSpace.initialize()
-
       thisObject.cockpitSpace = newCockpitSpace()
       thisObject.cockpitSpace.initialize()
 
+      thisObject.designSpace = newDesignSpace()
+      thisObject.designSpace.initialize()
+
       thisObject.panelsSpace = newPanelsSpace()
       thisObject.panelsSpace.initialize()
 
       thisObject.chartingSpace = newChartingSpace()
       thisObject.chartingSpace.initialize()
 
-      thisObject.bottomSpace = thisObject.cockpitSpace
+      thisObject.sideSpace = newSideSpace()
+      thisObject.sideSpace.initialize()
 
-      splashScreen = newSplashScreen()
-      splashScreen.initialize()
+      thisObject.splashScreen = newSplashScreen()
 
       let animation = newAnimation()
       animation.initialize()
@@ -137,6 +137,7 @@ function newCanvas () {
       animation.addCallBackFunction('Charting Space Physics', thisObject.chartingSpace.physics)
       animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
+      animation.addCallBackFunction('Side Space Physics', thisObject.sideSpace.physics)
 
       /* Spcaces Drawing */
       animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
@@ -145,7 +146,8 @@ function newCanvas () {
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.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.addCallBackFunction('Side Space Draw', thisObject.sideSpace.draw)
+      animation.addCallBackFunction('Splash Screen Draw', thisObject.splashScreen.draw)
       animation.start()
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
@@ -211,30 +213,35 @@ function newCanvas () {
     if ((event.ctrlKey === true || event.metaKey === true)) {
       let constructorParams
       switch (event.keyCode) {
+        case 118: { //  F7
+          downloadPanorama('Superalgos.Market.Panorama')
+          return
+          break
+        }
         case 119: { //  F8
-          downloadCanvas('Superalgos.image.capture')
+          downloadCanvas('Superalgos.Image.Capture', browserCanvas)
           return
           break
         }
         case 120: { //  F9
-          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'}
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.Video.Capture'}
           break
         }
         case 121: { //  F10
-          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' }
+          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.Video.Capture' }
           break
         }
         default: return
       }
 
-      if (areWeRecording === false) {
+      if (ARE_WE_RECORDING_A_VIDEO === false) {
         console.log('RECORDING', constructorParams.format)
         mediaRecorder = new CCapture(constructorParams)
         mediaRecorder.start()
-        areWeRecording = true
+        ARE_WE_RECORDING_A_VIDEO = true
       } else {
         console.log('SAVING', constructorParams.format)
-        areWeRecording = false
+        ARE_WE_RECORDING_A_VIDEO = false
         mediaRecorder.stop()
         mediaRecorder.save()
       }
@@ -295,11 +302,7 @@ function newCanvas () {
     }
 
     if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'S' || event.key === 's')) {
-      let saved = canvas.designSpace.workspace.save()
-      if (saved === true) {
-        canvas.cockpitSpace.setStatus('Workspace Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
-      }
-
+      canvas.designSpace.workspace.save()
       event.preventDefault()
       return
     }
@@ -578,8 +581,21 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Design Space / */
+      /* We check if the mouse is over an element of the Side Space / */
+      container = thisObject.sideSpace.getContainer(point)
 
+      if (container !== undefined && container.isDraggeable === true) {
+        containerBeingDragged = container
+        containerDragStarted = true
+        containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
+        return
+      }
+
+      if (container !== undefined && container.isDraggeable === false) {
+        return
+      }
+
+      /* We check if the mouse is over an element of the Design Space / */
       container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -593,8 +609,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the Top Space / */
-
+      /* We check if the mouse is over an element of the Top Space / */
       container = thisObject.topSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -604,8 +619,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the CockpitSpace / */
-
+      /* We check if the mouse is over an element of the CockpitSpace / */
       container = thisObject.cockpitSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -620,8 +634,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a panel/ */
-
+      /* We check if the mouse is over a panel/ */
       container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined && event.shiftKey === false) {
@@ -640,8 +653,7 @@ function newCanvas () {
         return
       }
 
-           /*  we check if it is over any of the existing containers at the Charting Space. */
-
+      /*  we check if it is over any of the existing containers at the Charting Space. */
       container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined) {
@@ -698,8 +710,15 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Design Space / */
+      /* We check if the mouse is over an element of the Side Space / */
+      container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
+      if (container !== undefined && container.isClickeable === true) {
+        container.eventHandler.raiseEvent('onMouseClick', point)
+        return
+      }
+
+      /* We check if the mouse is over an element of the Design Space / */
       container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -707,8 +726,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the Top Space / */
-
+      /* We check if the mouse is over an element of the Top Space / */
       container = thisObject.topSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -716,8 +734,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the CockpitSpace / */
-
+      /* We check if the mouse is over an element of the CockpitSpace / */
       container = thisObject.cockpitSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -725,8 +742,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a panel/ */
-
+      /* We check if the mouse is over a panel/ */
       container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -734,8 +750,7 @@ function newCanvas () {
         return
       }
 
-           /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
-
+      /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
       container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -837,6 +852,16 @@ function newCanvas () {
 
       let container
 
+      /* We check if the mouse is over an element of the Designe Space / */
+      if (thisObject.sideSpace !== undefined) {
+        container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
+
+        if (container !== undefined && container.detectMouseOver === true) {
+          containerFound()
+          return
+        }
+      }
+
       /* We check if the mouse is over an element of the Designe Space / */
       if (thisObject.designSpace !== undefined) {
         container = thisObject.designSpace.getContainer(point)
@@ -934,6 +959,16 @@ function newCanvas () {
 
       event.mousePosition = point
       let container
+
+      /* Side Space */
+      container = canvas.sideSpace.getContainer({ x: point.x, y: point.y })
+
+      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.
+      }
+
+      /* Panel Space */
       container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {
@@ -941,8 +976,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-           /* We try the CockpitSpace. */
-
+      /* We try the CockpitSpace. */
       container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {
@@ -950,8 +984,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-          /*   Charting Space. */
-
+      /*   Charting Space. */
       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)
@@ -963,8 +996,7 @@ function newCanvas () {
         return false
       }
 
-         /* We try second with floating objects. */
-
+      /* We try second with floating objects. */
       container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {

ChartingSpace/EdgeEditor.js

@@ -195,9 +195,18 @@ function newEdgeEditor () {
     }
 
     if (event.shiftKey === false && event.ctrlKey === false && event.code === 'ArrowRight') {
-      onDragStarted(event)
-      thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
-      whatHappened = 'left or right arrow key pressed'
+      if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
+        if (PANORAMA_WAS_PANNED === false) {
+          PANORAMA_WAS_PANNED = true
+          onDragStarted(event)
+          thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP * 2
+          whatHappened = 'left or right arrow key pressed'
+        }
+      } else {
+        onDragStarted(event)
+        thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
+        whatHappened = 'left or right arrow key pressed'
+      }
       return
     }
 

ChartingSpace/PlottersManager.js

@@ -99,7 +99,7 @@ function newPlottersManager () {
       for (let i = 0; i < layer.definition.referenceParent.referenceParent.datasets.length; i++) {
         let dataset = layer.definition.referenceParent.referenceParent.datasets[i]
 
-        switch (dataset.code.type) {
+        switch (dataset.config.type) {
           case 'Market Files': {
             storage.onMarketFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Market File Loaded', layer.onMarketFileLoaded)
           }
@@ -125,8 +125,8 @@ function newPlottersManager () {
         }
       }
 
-      let baseAsset = layer.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent.code.codeName
-      let quotedAsset = layer.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent.code.codeName
+      let baseAsset = layer.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent.config.codeName
+      let quotedAsset = layer.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent.config.codeName
       let market = {
         baseAsset: baseAsset,
         quotedAsset: quotedAsset
@@ -146,8 +146,8 @@ function newPlottersManager () {
         }
       }
 
-      let host = layer.networkNode.code.host
-      let webPort = layer.networkNode.code.webPort
+      let host = layer.networkNode.config.host
+      let webPort = layer.networkNode.config.webPort
       if (host === undefined) { host = 'localhost' }
       if (webPort === undefined) { webPort = window.location.port }
 
@@ -174,10 +174,10 @@ function newPlottersManager () {
             /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
             let plotter
 
-            if (plotterModule.code.isLegacy !== true) {
+            if (plotterModule.config.isLegacy !== true) {
               plotter = newPlotter()
             } else {
-              plotter = getNewPlotter(dataMine.code.codeName, plotterModule.parentNode.code.codeName, plotterModule.code.codeName)
+              plotter = getNewPlotter(dataMine.config.codeName, plotterModule.parentNode.config.codeName, plotterModule.config.codeName)
             }
 
             plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
@@ -203,9 +203,9 @@ function newPlottersManager () {
                     let panel = plotterModule.panels[i]
 
                     let parameters = {
-                      dataMine: dataMine.code.codeName,
-                      plotterCodeName: plotterModule.parentNode.code.codeName,
-                      moduleCodeName: plotterModule.code.codeName,
+                      dataMine: dataMine.config.codeName,
+                      plotterCodeName: plotterModule.parentNode.config.codeName,
+                      moduleCodeName: plotterModule.config.codeName,
                       panelNode: panel
                     }
 

ChartingSpace/Viewport.js

@@ -369,10 +369,10 @@ function newViewport () {
 
     /* Save the zoom at the node config, so that the user can change it if he wishes to. */
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      code.zoom = (thisObject.zoomTargetLevel - MIN_ZOOM_LEVEL) / (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) * 100
-      code.zoom = code.zoom.toFixed(2)
-      thisObject.payload.node.code = JSON.stringify(code)
+      let config = JSON.parse(thisObject.payload.node.config)
+      config.zoom = (thisObject.zoomTargetLevel - MIN_ZOOM_LEVEL) / (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) * 100
+      config.zoom = config.zoom.toFixed(2)
+      thisObject.payload.node.config = JSON.stringify(config)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
     }
@@ -383,18 +383,18 @@ function newViewport () {
 
     /* Read the zoom level from the node config */
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
+      let config = JSON.parse(thisObject.payload.node.config)
 
-      if (isNaN(code.zoom) || code.zoom === null || code.zoom === undefined) {
+      if (isNaN(config.zoom) || config.zoom === null || config.zoom === undefined) {
         saveObjectState()
         return
       }
-      code.zoom = code.zoom / 100 * (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) + MIN_ZOOM_LEVEL
-      if (code.zoom < MIN_ZOOM_LEVEL) { code.zoom = MIN_ZOOM_LEVEL }
-      if (code.zoom > MAX_ZOOM_LEVEL) { code.zoom = MAX_ZOOM_LEVEL }
+      config.zoom = config.zoom / 100 * (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) + MIN_ZOOM_LEVEL
+      if (config.zoom < MIN_ZOOM_LEVEL) { config.zoom = MIN_ZOOM_LEVEL }
+      if (config.zoom > MAX_ZOOM_LEVEL) { config.zoom = MAX_ZOOM_LEVEL }
 
-      if (code.zoom.toFixed(2) !== thisObject.zoomTargetLevel.toFixed(2)) {
-        newZoomLevel(code.zoom)
+      if (config.zoom.toFixed(2) !== thisObject.zoomTargetLevel.toFixed(2)) {
+        newZoomLevel(config.zoom)
       } else {
         saveObjectState()
       }

CockpitSpace/Speedometer.js

@@ -181,18 +181,6 @@ function newSpeedometer () {
 
     /* We put the thisObject.params.VALUE in the middle */
 
-    fontSize = 22
-    if (thisObject.params.VALUE > 999) {
-      fontSize = 18
-    }
-    if (thisObject.params.VALUE > 9999) {
-      fontSize = 14
-    }
-    if (thisObject.params.VALUE > 99999) {
-      fontSize = 10
-    }
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-
     label = thisObject.params.VALUE
 
     if (isNaN(label) === false) {
@@ -202,6 +190,22 @@ function newSpeedometer () {
       if (label === 0) { label = label.toFixed(2) }
     }
 
+    fontSize = 22
+    if (label.length > 8) {
+      fontSize = 18
+    }
+    if (label.length > 10) {
+      fontSize = 14
+    }
+    if (label.length > 12) {
+      fontSize = 10
+    }
+    if (label.length > 14) {
+      fontSize = 8
+    }
+
+    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+
     // label = label.substring(0, 6)
 
     xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7

DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js

@@ -44,7 +44,7 @@ function newCCXTFunctions () {
         if (existingExchange === undefined) {
           let newExchange = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Crypto Exchange')
           newExchange.name = exchange.name
-          newExchange.code = '{ \n\"codeName\": \"' + exchange.id + '\"\n}'
+          newExchange.config = '{ \n\"codeName\": \"' + exchange.id + '\"\n}'
           newExchange.payload.floatingObject.collapseToggle()
           newExchange.exchangeAssets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
           newExchange.exchangeMarkets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
@@ -114,7 +114,7 @@ function newCCXTFunctions () {
           function addAsset (name) {
             let newAsseet = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Asset')
             newAsseet.name = name
-            newAsseet.code = '{ \n\"codeName\": \"' + name + '\"\n}'
+            newAsseet.config = '{ \n\"codeName\": \"' + name + '\"\n}'
           }
         }
       }
@@ -182,7 +182,7 @@ function newCCXTFunctions () {
           function addMarket (name, baseAsset, quotedAsset) {
             let newMarket = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Market')
             newMarket.name = name
-            newMarket.code = '{ \n\"codeName\": \"' + name + '\"\n}'
+            newMarket.config = '{ \n\"codeName\": \"' + name + '\"\n}'
             newMarket.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
             newMarket.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
             newMarket.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE

DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js

@@ -31,11 +31,11 @@ function newChainAttachDetach () {
         return
       }
       default: {
-        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        let nodeDefinition = getNodeDefinition (node)
         if (nodeDefinition !== undefined) {
         /* Detach from parent */
           if (node.payload.parentNode !== undefined) {
-            let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type)
+            let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
             if (parentNodeDefinition !== undefined) {
               if (parentNodeDefinition.properties !== undefined) {
                 for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
@@ -166,13 +166,13 @@ function newChainAttachDetach () {
       }
         break
       default: {
-        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        let nodeDefinition = getNodeDefinition (node)
         if (nodeDefinition !== undefined) {
           node.payload.parentNode = attachToNode
           node.payload.chainParent = attachToNode
           /* Attach to new parent */
           if (node.payload.parentNode !== undefined) {
-            let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type)
+            let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
             if (parentNodeDefinition !== undefined) {
               if (parentNodeDefinition.properties !== undefined) {
                 for (let i = 0; i < parentNodeDefinition.properties.length; i++) {

DesignSpace/Workspace/FunctionLibraries/DependenciesFilter.js

@@ -14,7 +14,7 @@ function newDependenciesFilter () {
     function recursiveFilter (node) {
       filter(node.code)
 
-      let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+      let nodeDefinition = getNodeDefinition (node)
       if (nodeDefinition !== undefined) {
         if (nodeDefinition.properties !== undefined) {
           let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.

DesignSpace/Workspace/FunctionLibraries/NodeChildren.js

@@ -14,7 +14,7 @@ function newNodeChildren () {
       childrenCount: 0,
       childIndex: undefined
     }
-    let parentNodeDefinition = APP_SCHEMA_MAP.get(parentNode.type)
+    let parentNodeDefinition = getNodeDefinition (parentNode)
     if (parentNodeDefinition !== undefined) {
       if (parentNodeDefinition.properties !== undefined) {
         let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
@@ -34,7 +34,7 @@ function newNodeChildren () {
               }
                 break
               case 'array': {
-                let nodeDefinition = APP_SCHEMA_MAP.get(childNode.type)
+                let nodeDefinition = getNodeDefinition (childNode)
                 if (nodeDefinition !== undefined) {
                   let nodePropertyArray = parentNode[property.name]
                   for (let j = 0; j < nodePropertyArray.length; j++) {

DesignSpace/Workspace/FunctionLibraries/NodeCloning.js

@@ -19,12 +19,13 @@ function newNodeCloning () {
 
     function cloneNode (node) {
       if (node === undefined) { return }
-      let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+      let nodeDefinition = getNodeDefinition(node)
       if (nodeDefinition !== undefined) {
         let object = {
           type: node.type,
           name: node.name,
-          code: node.code
+          code: node.code,
+          config: node.config
         }
 
       /* Children Nodes */
@@ -71,12 +72,13 @@ function newNodeCloning () {
 
     function redirectReferenceParents (node) {
       if (node === undefined) { return }
-      let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+      let nodeDefinition = getNodeDefinition(node)
       if (nodeDefinition !== undefined) {
         let object = {
           type: node.type,
           name: node.name,
-          code: node.code
+          code: node.code,
+          config: node.config
         }
 
       /* Children Nodes */

DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js

@@ -29,7 +29,7 @@ function newNodeDeleter () {
       node.payload.referenceParent.payload.uiObject.isShowing = false
     }
 
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition (node)
     if (nodeDefinition !== undefined) {
       /* Remove all of its own children nodes. */
       if (nodeDefinition.properties !== undefined) {
@@ -63,7 +63,7 @@ function newNodeDeleter () {
       /* Remove node from parent */
       if (node.payload !== undefined) {
         if (node.payload.parentNode !== undefined) {
-          let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type)
+          let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
           if (parentNodeDefinition !== undefined) {
             if (parentNodeDefinition.properties !== undefined) {
               for (let i = 0; i < parentNodeDefinition.properties.length; i++) {

DesignSpace/Workspace/FunctionLibraries/OnFocus.js

@@ -7,7 +7,7 @@ function newOnFocus () {
   function getNodeThatIsOnFocus (node) {
     if (node === undefined) { return }
     if (node.payload === undefined) { return }
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition (node)
     if (nodeDefinition !== undefined) {
       /* First we ask the question to ourself */
       if (node.payload.uiObject.isOnFocus === true) {

DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js

@@ -9,17 +9,18 @@ function newProtocolNode () {
   }
   return thisObject
 
-  function getProtocolNode (node, removePersonalData, parseCode, includeIds, includePayload, includeReferencesInSavedPayload, lightingPath) {
+  function getProtocolNode (node, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, lightingPath) {
     if (node === undefined) { return }
     if (node.payload === undefined) { return }
 
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition(node)
     if (nodeDefinition !== undefined) {
       if (removePersonalData === true && nodeDefinition.isPersonalData === true) { return }
       let object = {
         type: node.type,
         name: node.name,
-        code: node.code
+        code: node.code,
+        config: node.config
       }
 
       /* Children Nodes */
@@ -31,11 +32,11 @@ function newProtocolNode () {
             case 'node': {
               if (node[property.name] !== undefined) {
                 if (lightingPath === undefined) {
-                  object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseCode, includeIds, includeReferencesInSavedPayload, includePayload)
+                  object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
                 } else {
                   let newLightingPath = getNewLightingPath(lightingPath, node.type, property.childType)
                   if (newLightingPath !== undefined) {
-                    object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseCode, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                    object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
                   }
                 }
               }
@@ -47,7 +48,7 @@ function newProtocolNode () {
                   let nodePropertyArray = node[property.name]
                   object[property.name] = []
                   for (let m = 0; m < nodePropertyArray.length; m++) {
-                    let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseCode, includeIds, includeReferencesInSavedPayload, includePayload)
+                    let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
                     if (protocolNode !== undefined) {
                       object[property.name].push(protocolNode)
                     }
@@ -58,7 +59,7 @@ function newProtocolNode () {
                     let nodePropertyArray = node[property.name]
                     object[property.name] = []
                     for (let m = 0; m < nodePropertyArray.length; m++) {
-                      let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseCode, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                      let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
                       if (protocolNode !== undefined) {
                         object[property.name].push(protocolNode)
                       }
@@ -76,25 +77,25 @@ function newProtocolNode () {
       if (node.payload.parentNode !== undefined) {
         let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.parentNode.type)
         if (newLightingPath !== undefined) {
-          object.parentNode = getProtocolNode(node.payload.parentNode, removePersonalData, parseCode, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+          object.parentNode = getProtocolNode(node.payload.parentNode, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
         }
       }
       if (node.payload.referenceParent !== undefined) {
         let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.referenceParent.type)
         if (newLightingPath !== undefined) {
-          object.referenceParent = getProtocolNode(node.payload.referenceParent, removePersonalData, parseCode, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+          object.referenceParent = getProtocolNode(node.payload.referenceParent, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
         }
       }
 
-      if (parseCode && object.code !== undefined && nodeDefinition.editors !== undefined) {
+      if (parseConfig && object.config !== undefined && nodeDefinition.editors !== undefined) {
         if (nodeDefinition.editors.config === true) {
           try {
-            object.code = JSON.parse(node.code)
+            object.config = JSON.parse(node.config)
           } catch (err) {
             if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> err = ' + err.stack) }
             if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.type = ' + node.type) }
             if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.name = ' + node.name) }
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.code = ' + node.code) }
+            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.config = ' + node.config) }
             if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.id = ' + node.id) }
           }
         }

DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js

@@ -6,7 +6,7 @@ function newSessionFunctions () {
 
   return thisObject
 
-  function runSession (node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, callBackFunction) {
+  function runSession (node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, resume, callBackFunction) {
     if (validations(node) !== true) {
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
       return
@@ -37,7 +37,28 @@ function newSessionFunctions () {
     'Close Stage->Close Execution->' +
     'Announcement->Formula->'
 
-    let tradingSystem = functionLibraryProtocolNode.getProtocolNode(node.payload.referenceParent, false, true, true, false, false, lightingPath)
+    let tradingSystem = functionLibraryProtocolNode.getProtocolNode(node.tradingSystemReference.payload.referenceParent, false, true, true, false, false, lightingPath)
+
+    lightingPath = '' +
+    'Trading Engine->' +
+    'Episode->Current->Last->Previous->' +
+    'Episode Counters->Episode Statistics->' +
+    'Periods->Positions->Hits->Fails->' +
+    'Profit Loss->Hit Ratio->Days->ROI->Anualized Rate Of Return->User Defined Statistic->' +
+    'Formula->' +
+    'Balance->Base Asset->Quoted Asset->' +
+    'Distance To Event->' +
+    'Trigger On->Trigger Off->Take Position->Close Position->Next Phase->Move To Phase->' +
+    'Strategy->' +
+    'Begin->End->Strategy Name->Index->Stage Type->Status->Begin Rate->End Rate->Situation Name->' +
+    'Strategy Counters->Periods->' +
+    'Position->' +
+    'Begin->End->Rate->Size->Exit Type->Status->Begin Rate->End Rate->Situation Name->' +
+    'Position Counters->Periods->' +
+    'Position Statistics->Days->ROI->User Defined Statistic->' +
+    'Formula'
+
+    let tradingEngine = functionLibraryProtocolNode.getProtocolNode(node.tradingEngineReference.payload.referenceParent, false, true, true, false, false, lightingPath)
 
     lightingPath = '' +
     'Backtesting Session->Paper Trading Session->Fordward Testing Session->Live Trading Session->' +
@@ -48,13 +69,16 @@ function newSessionFunctions () {
 
     let session = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, lightingPath)
 
-    let dependencyFilter = functionLibraryDependenciesFilter.createFilter(node.payload.referenceParent)
+    let dependencyFilter = functionLibraryDependenciesFilter.createFilter(node.tradingSystemReference.payload.referenceParent)
 
     /* Raise event to run the session */
     let event = {
+      appSchema: JSON.stringify(APP_SCHEMA_ARRAY),
       session: JSON.stringify(session),
       tradingSystem: JSON.stringify(tradingSystem),
-      dependencyFilter: JSON.stringify(dependencyFilter)
+      tradingEngine: JSON.stringify(tradingEngine),
+      dependencyFilter: JSON.stringify(dependencyFilter),
+      resume: resume
     }
 
     eventsServerClient.raiseEvent(key, 'Run Session', event)
@@ -121,8 +145,23 @@ function newSessionFunctions () {
       return
     }
 
-    if (node.payload.referenceParent === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to reference a Trading System.')
+    if (node.tradingSystemReference === undefined) {
+      node.payload.uiObject.setErrorMessage('Session needs a child Trading System Reference.')
+      return
+    }
+
+    if (node.tradingEngineReference === undefined) {
+      node.payload.uiObject.setErrorMessage('Session needs a child Trading Engine Reference.')
+      return
+    }
+
+    if (node.tradingSystemReference.payload.referenceParent === undefined) {
+      node.payload.uiObject.setErrorMessage('Trading System Reference needs to reference a Trading System.')
+      return
+    }
+
+    if (node.tradingEngineReference.payload.referenceParent === undefined) {
+      node.payload.uiObject.setErrorMessage('Trading Engine Reference needs to reference a Trading Engine.')
       return
     }
     return true

DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js

@@ -6,7 +6,7 @@ function newShortcutKeys () {
 
   function getNodeByShortcutKey (node, searchingKey) {
     if (node === undefined) { return }
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition (node)
     if (nodeDefinition !== undefined) {
       /* Check Self first */
       if (node.payload.uiObject.shortcutKey === searchingKey) {

DesignSpace/Workspace/FunctionLibraries/SuperScripts.js

@@ -18,7 +18,7 @@ function newSuperScriptsFunctions () {
         if (exchange === undefined) {
           functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, target, target)
         } else {
-          let definition = APP_SCHEMA_MAP.get(target.type)
+          let definition = getNodeDefinition (target)
           for (let i = 0; i < definition.properties.length; i++) {
             let property = definition.properties[i]
             if (property.childType === exchangeNodeType) {

DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js

@@ -1,5 +1,7 @@
 function newUiObjectsFromNodes () {
   thisObject = {
+    runTasks: runTasks,
+    runSessions: runSessions,
     recreateWorkspace: recreateWorkspace,
     tryToConnectChildrenWithReferenceParents: tryToConnectChildrenWithReferenceParents,
     createUiObjectFromNode: createUiObjectFromNode,
@@ -14,7 +16,7 @@ function newUiObjectsFromNodes () {
 
   return thisObject
 
-  function recreateWorkspace (node, replacingCurrentWorkspace) {
+  function recreateWorkspace (node, callBackFunction) {
     mapOfNodes = new Map()
     tasksToRun = []
     sessionsToRun = []
@@ -22,16 +24,16 @@ function newUiObjectsFromNodes () {
     addIncludedNodes()
 
     function addIncludedNodes () {
-      blobService = newFileStorage()
+      let blobService = newFileStorage()
 
-      // if (node.code === undefined) {
-      node.code = '{ \n"includeDataMines": ["Masters", "Sparta", "TradingEngines"],\n"includeTradingSystems": ["Sparta-WHB-BTC-USDT", "Example-ETH-USDT", "Sparta-BRR-BTC-USDT"],\n"includeSuperScripts": ["Masters"]\n }'
+      // if (node.config === undefined) {
+      node.config = '{ \n"includeDataMines": ["Masters", "Sparta", "Masters-Trading"],\n"includeTradingSystems": ["Sparta-WHB-BTC-USDT", "Example-ETH-USDT", "Sparta-BRR-BTC-USDT"],\n"includeSuperScripts": ["Masters"]\n }'
       // }
 
-      let code = JSON.parse(node.code)
-      let includeDataMines = code.includeDataMines
-      let includeTradingSystems = code.includeTradingSystems
-      let includeSuperScripts = code.includeSuperScripts
+      let config = JSON.parse(node.config)
+      let includeDataMines = config.includeDataMines
+      let includeTradingSystems = config.includeTradingSystems
+      let includeSuperScripts = config.includeSuperScripts
 
       let totalIncluded = 0
 
@@ -47,9 +49,9 @@ function newUiObjectsFromNodes () {
           for (let i = 0; i < node.rootNodes.length; i++) {
             let rootNode = node.rootNodes[i]
             if (rootNode.type === 'Data Mine') {
-              if (rootNode.code !== undefined) {
-                let code = JSON.parse(rootNode.code)
-                if (code.name === name) {
+              if (rootNode.config !== undefined) {
+                let config = JSON.parse(rootNode.config)
+                if (config.name === name) {
                   rootNodes.splice(i, 1)
                 }
               }
@@ -76,9 +78,9 @@ function newUiObjectsFromNodes () {
           for (let i = 0; i < node.rootNodes.length; i++) {
             let rootNode = node.rootNodes[i]
             if (rootNode.type === 'Trading System') {
-              if (rootNode.code !== undefined) {
-                let code = JSON.parse(rootNode.code)
-                if (code.name === name) {
+              if (rootNode.config !== undefined) {
+                let config = JSON.parse(rootNode.config)
+                if (config.name === name) {
                   rootNodes.splice(i, 1)
                 }
               }
@@ -105,9 +107,9 @@ function newUiObjectsFromNodes () {
           for (let i = 0; i < node.rootNodes.length; i++) {
             let rootNode = node.rootNodes[i]
             if (rootNode.type === 'Super Scripts') {
-              if (rootNode.code !== undefined) {
-                let code = JSON.parse(rootNode.code)
-                if (code.name === name) {
+              if (rootNode.config !== undefined) {
+                let config = JSON.parse(rootNode.config)
+                if (config.name === name) {
                   rootNodes.splice(i, 1)
                 }
               }
@@ -135,15 +137,8 @@ function newUiObjectsFromNodes () {
 
       tryToConnectChildrenWithReferenceParents()
 
-      if (replacingCurrentWorkspace === true) {
-     // We need to wait all tasks that were potentially running to stop
-        setTimeout(runTasks, 70000)
-     // We give a few seconds for the tasks to start
-        setTimeout(runSessions, 80000)
-      } else {
-        runTasks()
-     // We give a few seconds for the tasks to start
-        setTimeout(runSessions, 10000)
+      if (callBackFunction !== undefined) {
+        callBackFunction() // The recreation of the workspace is complete
       }
     }
   }
@@ -184,10 +179,33 @@ function newUiObjectsFromNodes () {
     }
   }
 
+  function migrateCodeToConfig (node, nodeDefinition) {
+    /* Code needed to Migrante from Beta 5 to Beta a Workspace */
+    if (nodeDefinition.editors !== undefined) {
+      if (nodeDefinition.editors.config === true) {
+        if (node.code !== undefined) {
+          node.config = node.code
+          node.code = undefined
+        }
+      }
+    }
+  }
+
   function createUiObjectFromNode (node, parentNode, chainParent, positionOffset) {
+    /* Code needed to Migrante from Beta 5 to Beta 6 a Trading System
+    if (node.type === 'Take Profit') {
+      node.type = 'Managed Take Profit'
+    }
+    if (node.type === 'Stop') {
+      node.type = 'Managed Stop Loss'
+    }
+    */
+
     /* Get node definition */
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition(node)
     if (nodeDefinition !== undefined) {
+      migrateCodeToConfig(node, nodeDefinition)
+
       /* Resolve Initial Values */
       if (nodeDefinition.initialValues !== undefined) {
         if (nodeDefinition.initialValues.code !== undefined) {
@@ -195,12 +213,17 @@ function newUiObjectsFromNodes () {
             node.code = nodeDefinition.initialValues.code
           }
         }
+        if (nodeDefinition.initialValues.config !== undefined) {
+          if (node.config === undefined) {
+            node.config = nodeDefinition.initialValues.config
+          }
+        }
       }
 
       /* For the cases where an node is not chained to its parent but to the one at the parent before it at its collection */
       if (nodeDefinition.chainedToSameType === true) {
         if (parentNode !== undefined) {
-          let parentNodeDefinition = APP_SCHEMA_MAP.get(parentNode.type)
+          let parentNodeDefinition = getNodeDefinition(parentNode)
           if (parentNodeDefinition !== undefined) {
             if (parentNodeDefinition.properties !== undefined) {
               for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
@@ -268,12 +291,12 @@ function newUiObjectsFromNodes () {
       type: type
     }
 
-    let parentNodeDefinition = APP_SCHEMA_MAP.get(parentNode.type)
+    let parentNodeDefinition = getNodeDefinition(parentNode)
     if (parentNodeDefinition === undefined) {
       console.log('Cannot addUIOBject from parent of ' + type + ' because that type it is not defined at the APP_SCHEMA.')
     }
       /* Resolve Initial Values */
-    let nodeDefinition = APP_SCHEMA_MAP.get(object.type)
+    let nodeDefinition = getNodeDefinition(object)
 
     if (nodeDefinition === undefined) {
       console.log('Cannot addUIOBject of ' + type + ' because that type it is not defined at the APP_SCHEMA.')
@@ -284,6 +307,11 @@ function newUiObjectsFromNodes () {
         object.code = nodeDefinition.initialValues.code
       }
     }
+    if (nodeDefinition.initialValues !== undefined) {
+      if (nodeDefinition.initialValues.config !== undefined) {
+        object.config = nodeDefinition.initialValues.config
+      }
+    }
 
     if (nodeDefinition.isHierarchyHead === true) {
       parentNode.rootNodes.push(object)
@@ -326,6 +354,9 @@ function newUiObjectsFromNodes () {
         if (nodeDefinition.initialValues.code !== undefined) {
           object.code = nodeDefinition.initialValues.code
         }
+        if (nodeDefinition.initialValues.config !== undefined) {
+          object.config = nodeDefinition.initialValues.config
+        }
       }
     }
 
@@ -398,7 +429,7 @@ function newUiObjectsFromNodes () {
   }
 
   function addMissingChildren (node) {
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+    let nodeDefinition = getNodeDefinition(node)
 
       /* Connect to Parent */
     if (nodeDefinition.properties !== undefined) {

DesignSpace/Workspace/Workspace.js

@@ -11,6 +11,7 @@ function newWorkspace () {
     enabled: false,
     nodeChildren: undefined,
     eventsServerClients: new Map(),
+    replaceWorkspaceByLoadingOne: replaceWorkspaceByLoadingOne,
     save: saveWorkspace,
     getHierarchyHeads: getHierarchyHeads,
     getNodeThatIsOnFocus: getNodeThatIsOnFocus,
@@ -68,7 +69,7 @@ function newWorkspace () {
   let workingAtTask = 0
   let circularProgressBar = newBusyProgressBar()
   circularProgressBar.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
-  let droppedNode
+  let loadedWorkspaceNode
   let sessionTimestamp = (new Date()).valueOf()
   window.localStorage.setItem('Session Timestamp', sessionTimestamp)
 
@@ -85,24 +86,56 @@ function newWorkspace () {
 
   function initialize () {
     try {
-      let reset = window.localStorage.getItem('Reset')
-      let savedWorkspace = window.localStorage.getItem(CANVAS_APP_NAME + '.' + 'Workspace')
+      let lastUsedWorkspace = window.localStorage.getItem('Last Used Workspace')
 
-      if (savedWorkspace === null || reset !== null) {
-        thisObject.workspaceNode = getWorkspace()
+      if (lastUsedWorkspace !== 'undefined' && lastUsedWorkspace !== null && lastUsedWorkspace !== undefined) {
+        let blobService = newFileStorage()
+        blobService.getFileFromHost('LoadWorkspace' + '/' + lastUsedWorkspace, onFileReceived, true)
+        function onFileReceived (err, text, response) {
+          if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+            canvas.cockpitSpace.setStatus('Could not load the last Workspace used, called "' + lastUsedWorkspace + '". Will switch to the default Workspace instead.', 500, canvas.cockpitSpace.statusTypes.WARNING)
+            thisObject.workspaceNode = getWorkspace() // This is the default workspace that comes with the system.
+            recreateWorkspace()
+            return
+          }
+          thisObject.workspaceNode = JSON.parse(text)
+          recreateWorkspace()
+        }
       } else {
-        thisObject.workspaceNode = JSON.parse(savedWorkspace)
+        thisObject.workspaceNode = getWorkspace() // This is the default workspace that comes with the system.
+        recreateWorkspace()
       }
-      functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
-      setupEventsServerClients()
-      thisObject.enabled = true
 
-      setInterval(saveWorkspace, 60000)
+      function recreateWorkspace () {
+        functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode, finishInitialization)
+      }
+
+      function finishInitialization () {
+        setupEventsServerClients()
+        runTasksAndSessions(false)
+        thisObject.enabled = true
+        canvas.cockpitSpace.initializePosition()
+        canvas.splashScreen.initialize()
+        setInterval(saveWorkspace, 60000)
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
   }
 
+  function runTasksAndSessions (replacingCurrentWorkspace) {
+    if (replacingCurrentWorkspace === true) {
+   // We need to wait all tasks that were potentially running to stop
+      setTimeout(functionLibraryUiObjectsFromNodes.runTasks, 70000)
+   // We give a few seconds for the tasks to start
+      setTimeout(functionLibraryUiObjectsFromNodes.runSessions, 80000)
+    } else {
+      functionLibraryUiObjectsFromNodes.runTasks()
+   // We give a few seconds for the tasks to start
+      setTimeout(functionLibraryUiObjectsFromNodes.runSessions, 10000)
+    }
+  }
+
   function setupEventsServerClients () {
     for (let i = 0; i < thisObject.workspaceNode.rootNodes.length; i++) {
       let rootNode = thisObject.workspaceNode.rootNodes[i]
@@ -115,9 +148,9 @@ function newWorkspace () {
           let webSocketsPort
           /* At this point the node does not have the payload property yet, that is why we have to do this manually */
           try {
-            let code = JSON.parse(networkNode.code)
-            host = code.host
-            webSocketsPort = code.webSocketsPort
+            let config = JSON.parse(networkNode.config)
+            host = config.host
+            webSocketsPort = config.webSocketsPort
           } catch (err) {
             console.log('[ERROR] networkNode ' + networkNode.name + ' has an invalid configuration. Cannot know the host name and webSocketsPort.')
             return
@@ -170,6 +203,23 @@ function newWorkspace () {
       let textToSave = stringifyWorkspace()
       window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave)
       window.localStorage.setItem('Session Timestamp', sessionTimestamp)
+
+      if (workspace.name !== undefined) {
+        let url = 'SaveWorkspace/' + workspace.name
+        callServer(textToSave, url, onResponse)
+      }
+
+      function onResponse (err) {
+        if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+          window.localStorage.setItem('Last Used Workspace', workspace.name)
+          window.localStorage.setItem('Session Timestamp', sessionTimestamp)
+          if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
+            canvas.cockpitSpace.setStatus(workspace.name + ' Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
+          }
+        } else {
+          canvas.cockpitSpace.setStatus('Could not save the Workspace at the Backend. Please check the Backend Console for more information.', 150, canvas.cockpitSpace.statusTypes.WARNING)
+        }
+      }
       return true
     }
   }
@@ -203,13 +253,14 @@ function newWorkspace () {
           workingAtTask++
           break
         case 3:
-          thisObject.workspaceNode = droppedNode
-          droppedNode = undefined
+          thisObject.workspaceNode = loadedWorkspaceNode
+          loadedWorkspaceNode = undefined
           workingAtTask++
           break
         case 4:
-          functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode, true)
+          functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
           setupEventsServerClients()
+          runTasksAndSessions(true)
           workingAtTask++
           break
         case 5:
@@ -294,7 +345,7 @@ function newWorkspace () {
     let nodes = []
     for (let i = 0; i < thisObject.workspaceNode.rootNodes.length; i++) {
       let rootNode = thisObject.workspaceNode.rootNodes[i]
-      let nodeDefinition = APP_SCHEMA_MAP.get(rootNode.type)
+      let nodeDefinition = getNodeDefinition(rootNode)
       if (nodeDefinition !== undefined) {
         if (nodeDefinition.isHierarchyHead === true) {
           nodes.push(rootNode)
@@ -304,6 +355,30 @@ function newWorkspace () {
     return nodes
   }
 
+  function replaceWorkspaceByLoadingOne (name) {
+    let blobService = newFileStorage()
+    blobService.getFileFromHost('LoadWorkspace' + '/' + name, onFileReceived, true)
+    function onFileReceived (err, text, response) {
+      if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+        canvas.cockpitSpace.setStatus('Could not load the Workspace called "' + name + '". ', 500, canvas.cockpitSpace.statusTypes.WARNING)
+        return
+      }
+
+      loadedWorkspaceNode = JSON.parse(text)
+      saveWorkspace()
+      canvas.cockpitSpace.toTop()
+
+      let position = {
+        x: browserCanvas.width / 2,
+        y: browserCanvas.height / 2
+      }
+
+      circularProgressBar.initialize(position)
+      circularProgressBar.visible = true
+      workingAtTask = 1
+    }
+  }
+
   function spawn (nodeText, mousePointer) {
     try {
       let point = {
@@ -314,9 +389,10 @@ function newWorkspace () {
       spawnPosition.x = point.x
       spawnPosition.y = point.y
 
-      droppedNode = JSON.parse(nodeText)
+      let droppedNode = JSON.parse(nodeText)
 
       if (droppedNode.type === 'Workspace') {
+        loadedWorkspaceNode = droppedNode
         circularProgressBar.initialize(mousePointer)
         circularProgressBar.visible = true
         workingAtTask = 1
@@ -485,7 +561,12 @@ function newWorkspace () {
         break
       case 'Run Session':
         {
-          functionLibrarySessionFunctions.runSession(payload.node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, callBackFunction)
+          functionLibrarySessionFunctions.runSession(payload.node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, false, callBackFunction)
+        }
+        break
+      case 'Resume Session':
+        {
+          functionLibrarySessionFunctions.runSession(payload.node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, true, callBackFunction)
         }
         break
       case 'Stop Session':
@@ -508,9 +589,19 @@ function newWorkspace () {
           referenceDetachNode(payload.node)
         }
         break
+      case 'Push Code to Javascript Code':
+        {
+          payload.node.javascriptCode.code = payload.node.code
+        }
+        break
+      case 'Fetch Code to Javascript Code':
+        {
+          payload.node.code = payload.node.javascriptCode.code
+        }
+        break
       case 'Open Documentation':
         {
-          let definition = APP_SCHEMA_MAP.get(payload.node.type)
+          let definition = getNodeDefinition(payload.node)
           if (definition !== undefined) {
             if (definition.docURL !== undefined) {
               let newTab = window.open(definition.docURL, '_blank')

FloatingSpace/ConfigEditor.js

@@ -52,10 +52,10 @@ function newConfigEditor () {
       thisObject.visible = false
       let textArea = document.getElementById('textArea')
       textArea.style.display = 'none'
-      thisObject.payload.node.code = textArea.value
+      thisObject.payload.node.config = textArea.value
 
       try {
-        let code = JSON.parse(thisObject.payload.node.code)
+        let config = JSON.parse(thisObject.payload.node.config)
       } catch (err) {
         thisObject.payload.uiObject.setErrorMessage(err.message, 10)
       }
@@ -72,7 +72,7 @@ function newConfigEditor () {
     thisObject.payload.uiObject.setErrorMessage('', 0)
 
     let textArea = document.getElementById('textArea')
-    textArea.value = payload.node.code
+    textArea.value = payload.node.config
     textArea.style = 'resize: none;' +
                      ' border: none;' +
                      ' outline: none;' +
@@ -94,7 +94,7 @@ function newConfigEditor () {
     if (thisObject.visible === true) {
       if (point.x === VERY_LARGE_NUMBER) {
         /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
-        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+        anyone can react. In our case, the config editor has a text area that is not part of the canvas, so the event is
         triggered. We compensate recognizing this coordinate and returning our container. */
         return thisObject.container
       }

FloatingSpace/Picker.js

@@ -25,8 +25,8 @@ function newPicker () {
   thisObject.container.frame.radius = 0
   thisObject.container.frame.position.x = 0
   thisObject.container.frame.position.y = 0
-  thisObject.container.frame.width = 200
-  thisObject.container.frame.height = 120
+  thisObject.container.frame.width = 150
+  thisObject.container.frame.height = 60
 
   let isMouseOver
   let optionsList
@@ -175,7 +175,7 @@ function newPicker () {
   }
 
   function drawForeground () {
-    const FONT_SIZE = 20
+    const FONT_SIZE = 15
     const VISIBLE_LABELS = 5
     let fontSize
     let fontColor
@@ -190,11 +190,11 @@ function newPicker () {
       fontColor = UI_COLOR.LIGHT_GREY
       switch (i) {
         case 0:
-          fontSize = FONT_SIZE - 10
+          fontSize = FONT_SIZE - 5
           opacity = 0.4
           break
         case 1:
-          fontSize = FONT_SIZE - 5
+          fontSize = FONT_SIZE - 3
           opacity = 0.5
           break
         case 2:
@@ -203,11 +203,11 @@ function newPicker () {
           opacity = 1
           break
         case 3:
-          fontSize = FONT_SIZE - 5
+          fontSize = FONT_SIZE - 3
           opacity = 0.5
           break
         case 4:
-          fontSize = FONT_SIZE - 10
+          fontSize = FONT_SIZE - 5
           opacity = 0.4
           break
       }

FloatingSpace/UiObject.js

@@ -363,7 +363,7 @@ function newUiObject () {
   }
 
   function childrenRunningPhysics () {
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
     if (nodeDefinition.properties === undefined) { return }
     let monitorChildrenRunning = false
     for (let i = 0; i < nodeDefinition.properties.length; i++) {
@@ -407,7 +407,7 @@ function newUiObject () {
     let nearbyFloatingObjects = thisObject.payload.floatingObject.nearbyFloatingObjects
     let compatibleTypes
 
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
     if (nodeDefinition !== undefined) {
       if (nodeDefinition.chainAttachesTo !== undefined) {
         compatibleTypes = nodeDefinition.chainAttachesTo.compatibleTypes
@@ -429,10 +429,10 @@ function newUiObject () {
       let nearbyNode = floatingObject.payload.node
       if (compatibleTypes.indexOf('->' + nearbyNode.type + '->') >= 0) {
         /* Discard App Schema defined objects with busy coonection ports */
-        nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+        nodeDefinition = getNodeDefinition(thisObject.payload.node)
         if (nodeDefinition !== undefined) {
           let mustContinue = false
-          let parentNodeDefinition = APP_SCHEMA_MAP.get(nearbyNode.type)
+          let parentNodeDefinition = getNodeDefinition(nearbyNode)
           if (parentNodeDefinition !== undefined) {
             if (parentNodeDefinition.properties !== undefined) {
               for (let j = 0; j < parentNodeDefinition.properties.length; j++) {
@@ -560,7 +560,7 @@ function newUiObject () {
     let nearbyFloatingObjects = thisObject.payload.floatingObject.nearbyFloatingObjects
     let compatibleTypes
 
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
     if (nodeDefinition !== undefined) {
       if (nodeDefinition.referenceAttachesTo !== undefined) {
         compatibleTypes = nodeDefinition.referenceAttachesTo.compatibleTypes
@@ -842,7 +842,7 @@ function newUiObject () {
 
   function iconPhysics () {
     icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
     if (nodeDefinition.alternativeIcons !== undefined) {
       let nodeToUse = thisObject.payload.node
       if (nodeDefinition.alternativeIcons === 'Use Reference Parent') {
@@ -859,15 +859,15 @@ function newUiObject () {
           }
         }
       }
-      nodeDefinition = APP_SCHEMA_MAP.get(nodeToUse.type)
-      let code = nodeToUse.code
+      nodeDefinition = getNodeDefinition(nodeToUse)
+      let config = nodeToUse.config
       try {
-        code = JSON.parse(code)
+        config = JSON.parse(config)
         let alternativeIcon
         let iconName
         for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
           alternativeIcon = nodeDefinition.alternativeIcons[i]
-          if (alternativeIcon.codeName === code.codeName) {
+          if (alternativeIcon.codeName === config.codeName) {
             iconName = alternativeIcon.iconName
           }
         }
@@ -1205,7 +1205,26 @@ function newUiObject () {
     }
   }
 
+  function isEditorVisible () {
+    if (thisObject.codeEditor !== undefined) {
+      if (thisObject.codeEditor.visible === true) { return true }
+    }
+
+    if (thisObject.configEditor !== undefined) {
+      if (thisObject.configEditor.visible === true) { return true }
+    }
+
+    if (thisObject.conditionEditor !== undefined) {
+      if (thisObject.conditionEditor.visible === true) { return true }
+    }
+
+    if (thisObject.formulaEditor !== undefined) {
+      if (thisObject.formulaEditor.visible === true) { return true }
+    }
+  }
+
   function drawText () {
+    if (isEditorVisible() === true) { return }
 /* Text Follows */
     let position = {
       x: 0,
@@ -1242,7 +1261,7 @@ function newUiObject () {
 
         if (canvas.floatingSpace.inMapMode === true) {
           labelPoint.y = labelPoint.y - 20
-          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          let nodeDefinition = getNodeDefinition(thisObject.payload.node)
           if (nodeDefinition !== undefined) {
             if (nodeDefinition.isHierarchyHead !== true) {
               return
@@ -1332,7 +1351,7 @@ function newUiObject () {
       label = currentValue
       if (!isNaN(label)) {
         if (currentValue.toFixed !== undefined) {
-          label = currentValue.toFixed(2)
+          label = dynamicDecimals(currentValue, 2)
         }
       }
 
@@ -1559,7 +1578,7 @@ function newUiObject () {
 
       browserCanvasContext.fill()
 
-      let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+      let nodeDefinition = getNodeDefinition(thisObject.payload.node)
       if (nodeDefinition !== undefined) {
         if (nodeDefinition.isHierarchyHead === true) {
           VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 2.8
@@ -1741,7 +1760,7 @@ function newUiObject () {
         let totalImageSize = additionalImageSize + thisObject.payload.floatingObject.currentImageSize
         if (canvas.floatingSpace.inMapMode === true) {
           totalImageSize = canvas.floatingSpace.transformImagesizeToMap(totalImageSize)
-          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          let nodeDefinition = getNodeDefinition(thisObject.payload.node)
           if (nodeDefinition !== undefined) {
             if (nodeDefinition.isHierarchyHead !== true) {
               totalImageSize = totalImageSize / 4

FloatingSpace/UiObjectConstructor.js

@@ -74,7 +74,7 @@ function newUiObjectConstructor () {
     */
 
     if (userAddingNew === true) {
-      let definition = APP_SCHEMA_MAP.get(payload.parentNode.type)
+      let definition = getNodeDefinition (payload.parentNode)
       if (definition.properties !== undefined) {
         for (let i = 0; i < definition.properties.length; i++) {
           let property = definition.properties[i]
@@ -406,7 +406,7 @@ function newUiObjectConstructor () {
   function getMenuItemsInitialValues (uiObject, floatingObject, payload) {
     let menuItemsInitialValues = []
 
-    let nodeDefinition = APP_SCHEMA_MAP.get(payload.node.type)
+    let nodeDefinition = getNodeDefinition (payload.node)
     if (nodeDefinition !== undefined) {
       if (nodeDefinition.editors !== undefined) {
         if (nodeDefinition.editors.config === true) {
@@ -495,7 +495,7 @@ function newUiObjectConstructor () {
       }
 
       default: {
-        let nodeDefinition = APP_SCHEMA_MAP.get(payload.node.type)
+        let nodeDefinition = getNodeDefinition (payload.node)
         if (nodeDefinition !== undefined) {
           switch (nodeDefinition.level) {
             case 0: {

FloatingSpace/UiObjectTitle.js

@@ -51,7 +51,7 @@ function newUiObjectTitle () {
     thisObject.payload = payload
 
     thisObject.allwaysVisible = false // Default value
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition (thisObject.payload.node)
     if (nodeDefinition !== undefined) {
       if (nodeDefinition.isTitleAllwaysVisible === true) {
         thisObject.allwaysVisible = true
@@ -100,7 +100,7 @@ function newUiObjectTitle () {
     if (thisObject.payload.title === undefined) { return }
 
     /* It is possible to override the default title by setting the APP SCHEMA property 'title' */
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition (thisObject.payload.node)
     if (nodeDefinition.title !== undefined) {
       thisObject.payload.title = ''
       thisObject.payload.node.name = ''
@@ -221,7 +221,7 @@ function newUiObjectTitle () {
   }
 
   function onMouseClick (event) {
-    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    let nodeDefinition = getNodeDefinition (thisObject.payload.node)
     if (nodeDefinition.title !== undefined) { return }
 
     let checkPoint = {
@@ -329,7 +329,7 @@ function newUiObjectTitle () {
             labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
             labelPoint.y = labelPoint.y - 35
 
-            let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+            let nodeDefinition = getNodeDefinition (thisObject.payload.node)
             if (nodeDefinition !== undefined) {
               if (nodeDefinition.isHierarchyHead !== true) {
                 return

Globals.js

@@ -190,8 +190,7 @@ const MAX_PLOTABLE_DATE = maxDate;
 
 const TOP_SPACE_HEIGHT = 40
 const COCKPIT_SPACE_HEIGHT = 30;
-const BREAKPOINT_HEIGHT = 15;
-const SIDE_PANEL_WIDTH = 450
+const SIDE_PANEL_WIDTH = 350
 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT
 
 const LAYER_STATUS = {
@@ -222,7 +221,13 @@ const TIME_MACHINE_WIDTH = 8;
 const TIME_MACHINE_HEIGHT = 8;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
-let areWeRecording = false
+let marketPanoramaCanvas 
+let ARE_WE_RECORDING_A_VIDEO = false
+let ARE_WE_RECORDING_A_MARKET_PANORAMA = false
+let PANORAMA_WAS_PANNED = false
+let CURRENT_PANORAMA_POSITION = 0
+
+let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents.
 
 function toRadians(angle) {
     return angle * (Math.PI / 180);

Panels/Layer.js

@@ -170,7 +170,7 @@ function newLayer () {
                         'Plotter Module->Plotter->' +
                         'Shapes->' +
                         'Chart Points->Point->Point Formula->' +
-                        'Polygon->Polygon Body->Style->Style Condition->Style->' +
+                        'Polygon->Polygon Condition->Polygon Body->Style->Style Condition->Style->' +
                         'Polygon Border->Style->Style Condition->Style->' +
                         'Polygon Vertex->Point->' +
                         'Plotter Panel->Javascript Code->Panel Data->Data Formula->'
@@ -200,7 +200,7 @@ function newLayer () {
       /* Get ready to draw this layer */
       thisObject.baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent
       thisObject.quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent
-      thisObject.market = thisObject.baseAsset.code.codeName + '/' + thisObject.quotedAsset.code.codeName
+      thisObject.market = thisObject.baseAsset.config.codeName + '/' + thisObject.quotedAsset.config.codeName
       thisObject.exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
 
       /* Some basic validations. */
@@ -226,8 +226,8 @@ function newLayer () {
 
       thisObject.exchangeIcon = getIcon(thisObject.exchange)
 
-      if (thisObject.plotterModule.code.icon !== undefined) {
-        thisObject.plotterTypeIcon = canvas.designSpace.iconCollection.get(thisObject.plotterModule.code.icon)
+      if (thisObject.plotterModule.config.icon !== undefined) {
+        thisObject.plotterTypeIcon = canvas.designSpace.iconCollection.get(thisObject.plotterModule.config.icon)
       }
 
       thisObject.baseAssetIcon = getIcon(thisObject.baseAsset)
@@ -240,12 +240,12 @@ function newLayer () {
       }
 
       function getIcon (node) {
-        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        let nodeDefinition = getNodeDefinition(node)
         let iconName
         if (nodeDefinition.alternativeIcons !== undefined) {
           for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
             alternativeIcon = nodeDefinition.alternativeIcons[i]
-            if (alternativeIcon.codeName === node.code.codeName) {
+            if (alternativeIcon.codeName === node.config.codeName) {
               iconName = alternativeIcon.iconName
             }
           }

Panels/PlotterPanel.js

@@ -151,24 +151,24 @@ function newPlotterPanel () {
         }
       }
 
-      if (panelData.code.valueDecimals !== undefined) {
+      if (panelData.config.valueDecimals !== undefined) {
         if (value !== undefined) {
           if (isNaN(value) === false) {
-            value = value.toFixed(panelData.code.valueDecimals)
+            value = dynamicDecimals(value, panelData.config.valueDecimals)
           }
         }
       }
 
-      if (panelData.code.labelText !== undefined) {
-        labelText = panelData.code.labelText
+      if (panelData.config.labelText !== undefined) {
+        labelText = panelData.config.labelText
       }
 
-      if (panelData.code.labelPosition !== undefined) {
-        labelPosition = panelData.code.labelPosition
+      if (panelData.config.labelPosition !== undefined) {
+        labelPosition = panelData.config.labelPosition
       }
 
-      if (panelData.code.valuePosition !== undefined) {
-        valuePosition = panelData.code.valuePosition
+      if (panelData.config.valuePosition !== undefined) {
+        valuePosition = panelData.config.valuePosition
       }
 
       printLabel(labelText, X_AXIS, UI_PANEL.HEIGHT.NORMAL * labelPosition / 100 / heightFactor, '0.60', undefined, undefined, true, thisObject.container, thisObject.fitFunction)

Plotter.js

@@ -277,8 +277,8 @@ function newPlotter () {
       let record = {}
       for (let j = 0; j < recordDefinition.properties.length; j++) {
         let property = recordDefinition.properties[j]
-        if (property.code.isCalculated !== true) {
-          record[property.code.codeName] = dataFile[i][j]
+        if (property.config.isCalculated !== true) {
+          record[property.config.codeName] = dataFile[i][j]
         }
       }
 
@@ -310,7 +310,7 @@ function newPlotter () {
       timeFrame: timeFrame,
       ONE_DAY_IN_MILISECONDS: ONE_DAY_IN_MILISECONDS
     }
-    let variable = {} // This is the structure where the user will define its own variables that will be shared across different code blocks and formulas.
+    let variable = {} // This is the structure where the user will define its own variables that will be shared across different config blocks and formulas.
     let results = []
 
     /* This is Initialization Code */
@@ -345,13 +345,13 @@ function newPlotter () {
           /* For each calculated property we apply its formula */
           for (let j = 0; j < recordDefinition.properties.length; j++) {
             let property = recordDefinition.properties[j]
-            if (property.code.isCalculated === true) {
+            if (property.config.isCalculated === true) {
               if (property.formula !== undefined) {
                 if (property.formula.code !== undefined) {
                   try {
                     let newValue = eval(property.formula.code)
                     let currentRecord = product
-                    currentRecord[property.code.codeName] = newValue
+                    currentRecord[property.config.codeName] = newValue
                   } catch (err) {
                     logger.write('[ERROR] calculationsProcedure -> loop -> formula -> Error executing User Code. Error = ' + err.stack.stack)
                     logger.write('[ERROR] calculationsProcedure -> loop -> formula -> Error executing User Code. product = ' + JSON.stringify(product))
@@ -570,23 +570,23 @@ function newPlotter () {
                 let x = 0
                 let y = 0
                 eval(point.pointFormula.code)
-                let dataPoint = {
+                let rawPoint = {
                   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.
               That means that the first thing we allways need to do is to trasform these points to the coordinate system of the timeline.
               */
-                dataPoint = coordinateSystem.transformThisPoint(dataPoint)
+                let dataPoint
+                dataPoint = coordinateSystem.transformThisPoint(rawPoint)
                 dataPoint = transformThisPoint(dataPoint, thisObject.container)
                 dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                 dataPoint = thisObject.fitFunction(dataPoint)
 
               /* Store the data point at the local map */
+                dataPoint.rawPoint = rawPoint
                 dataPoints.set(point.id, dataPoint)
               }
             }
@@ -598,6 +598,12 @@ function newPlotter () {
 
         for (let j = 0; j < productDefinition.referenceParent.shapes.polygons.length; j++) {
           let polygon = productDefinition.referenceParent.shapes.polygons[j]
+          /* We will check if we need to plot this Polygon or not. */
+          if (polygon.polygonCondition !== undefined) {
+            let mustPlot = eval(polygon.polygonCondition.code)
+            if (mustPlot !== true) { continue }
+          }
+
           let calculatedStyle
 
           /* Finding out the fill style */
@@ -616,9 +622,9 @@ function newPlotter () {
             } else {
               /* Get the default style if exists */
               if (polygon.polygonBody.style !== undefined) {
-                if (polygon.polygonBody.style.code !== undefined) {
-                  if (polygon.polygonBody.style.code.default !== undefined) {
-                    let bodyStyle = polygon.polygonBody.style.code.default
+                if (polygon.polygonBody.style.config !== undefined) {
+                  if (polygon.polygonBody.style.config.default !== undefined) {
+                    let bodyStyle = polygon.polygonBody.style.config.default
                     if (bodyStyle.opacity !== undefined) { fillStyle.opacity = bodyStyle.opacity }
                     if (bodyStyle.paletteColor !== undefined) { fillStyle.paletteColor = eval(bodyStyle.paletteColor) }
                   }
@@ -631,7 +637,7 @@ function newPlotter () {
                   let value = eval(condition.code)
                   if (value === true) {
                     if (condition.style !== undefined) {
-                      let bodyStyle = condition.style.code
+                      let bodyStyle = condition.style.config
                       if (bodyStyle.opacity !== undefined) { fillStyle.opacity = bodyStyle.opacity }
                       if (bodyStyle.paletteColor !== undefined) { fillStyle.paletteColor = eval(bodyStyle.paletteColor) }
                     }
@@ -640,8 +646,8 @@ function newPlotter () {
               }
               /* Get the atMousePosition style if exists */
               if (polygon.polygonBody.style !== undefined) {
-                if (polygon.polygonBody.style.code.atMousePosition !== undefined) {
-                  let atMousePositionStyleDefinition = polygon.polygonBody.style.code.atMousePosition
+                if (polygon.polygonBody.style.config.atMousePosition !== undefined) {
+                  let atMousePositionStyleDefinition = polygon.polygonBody.style.config.atMousePosition
                   let atMousePositionStyle = {}
                   if (atMousePositionStyleDefinition.opacity !== undefined) { atMousePositionStyle.opacity = atMousePositionStyleDefinition.opacity }
                   if (atMousePositionStyleDefinition.paletteColor !== undefined) { atMousePositionStyle.paletteColor = eval(atMousePositionStyleDefinition.paletteColor) }
@@ -671,9 +677,9 @@ function newPlotter () {
             } else {
               /* Get the default style if exists */
               if (polygon.polygonBorder.style !== undefined) {
-                if (polygon.polygonBorder.style.code !== undefined) {
-                  if (polygon.polygonBorder.style.code.default !== undefined) {
-                    let borderStyle = polygon.polygonBorder.style.code.default
+                if (polygon.polygonBorder.style.config !== undefined) {
+                  if (polygon.polygonBorder.style.config.default !== undefined) {
+                    let borderStyle = polygon.polygonBorder.style.config.default
                     if (borderStyle.opacity !== undefined) { strokeStyle.opacity = borderStyle.opacity }
                     if (borderStyle.paletteColor !== undefined) { strokeStyle.paletteColor = eval(borderStyle.paletteColor) }
                     if (borderStyle.lineWidth !== undefined) { strokeStyle.lineWidth = borderStyle.lineWidth }
@@ -688,7 +694,7 @@ function newPlotter () {
                   let value = eval(condition.code)
                   if (value === true) {
                     if (condition.style !== undefined) {
-                      let borderStyle = condition.style.code
+                      let borderStyle = condition.style.config
                       if (borderStyle.opacity !== undefined) { strokeStyle.opacity = borderStyle.opacity }
                       if (borderStyle.paletteColor !== undefined) { strokeStyle.paletteColor = eval(borderStyle.paletteColor) }
                       if (borderStyle.lineWidth !== undefined) { strokeStyle.lineWidth = borderStyle.lineWidth }
@@ -699,8 +705,8 @@ function newPlotter () {
               }
               /* Get the atMousePosition style if exists */
               if (polygon.polygonBorder.style !== undefined) {
-                if (polygon.polygonBorder.style.code.atMousePosition !== undefined) {
-                  let atMousePositionStyleDefinition = polygon.polygonBorder.style.code.atMousePosition
+                if (polygon.polygonBorder.style.config.atMousePosition !== undefined) {
+                  let atMousePositionStyleDefinition = polygon.polygonBorder.style.config.atMousePosition
                   let atMousePositionStyle = {}
                   if (atMousePositionStyleDefinition.opacity !== undefined) { atMousePositionStyle.opacity = atMousePositionStyleDefinition.opacity }
                   if (atMousePositionStyleDefinition.paletteColor !== undefined) { atMousePositionStyle.paletteColor = eval(atMousePositionStyleDefinition.paletteColor) }
@@ -724,6 +730,12 @@ function newPlotter () {
                 console.log('[WARN] You have a Polygon Vertex not referencing any Point.')
                 continue
               }
+
+              /* Contributing to Auto-Scale */
+              if (dataPointObject.rawPoint.y > 1 && dataPointObject.rawPoint.y !== undefined && isNaN(dataPointObject.rawPoint.y) === false) {
+                coordinateSystem.reportYValue(dataPointObject.rawPoint.y)
+              }
+
               let dataPoint = {
                 x: dataPointObject.x,
                 y: dataPointObject.y

PostLoader.js

@@ -29,10 +29,8 @@ function newDashboard () {
         for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
           let nodeDefinition = APP_SCHEMA_ARRAY[i]
           let key = nodeDefinition.type
-
           APP_SCHEMA_MAP.set(key, nodeDefinition)
         }
-
         startCanvas()
       }
 

ProductStorage.js

@@ -85,7 +85,7 @@ function newProductStorage (name) {
       for (let i = 0; i < product.datasets.length; i++) {
         let dataset = product.datasets[i]
 
-        switch (dataset.code.type) {
+        switch (dataset.config.type) {
           case 'Market Files': {
             dataSetsToLoad++
 
@@ -122,7 +122,7 @@ function newProductStorage (name) {
           }
             break
           default:
-            if (ERROR_LOG === true) { logger.write('[WARN] initialize -> dataset with no type defined or type not supported -> dataset.code.type = ' + dataset.code.type) }
+            if (ERROR_LOG === true) { logger.write('[WARN] initialize -> dataset with no type defined or type not supported -> dataset.config.type = ' + dataset.config.type) }
         }
 
         function onMarketFileReady (err, pCaller) {

Scales/RateScale.js

@@ -255,12 +255,12 @@ function newRateScale () {
 
   function saveObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      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)
+      let config = JSON.parse(thisObject.payload.node.config)
+      config.minValue = coordinateSystem.min.y
+      config.maxValue = coordinateSystem.max.y
+      config.autoMinScale = coordinateSystem.autoMinYScale
+      config.autoMaxScale = coordinateSystem.autoMaxYScale
+      thisObject.payload.node.config = JSON.stringify(config, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
     }
@@ -268,29 +268,29 @@ function newRateScale () {
 
   function readObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
+      let config = JSON.parse(thisObject.payload.node.config)
 
       if (
-      (isNaN(code.minValue) || code.minValue === null || code.minValue === undefined) ||
-      (isNaN(code.maxValue) || code.maxValue === null || code.maxValue === undefined)
+      (isNaN(config.minValue) || config.minValue === null || config.minValue === undefined) ||
+      (isNaN(config.maxValue) || config.maxValue === null || config.maxValue === undefined)
         ) {
         // not using this value
       } else {
         if (
-          thisObject.minValue !== code.minValue ||
-          thisObject.maxValue !== code.maxValue ||
-          coordinateSystem.autoMinYScale !== code.autoMinScale ||
-          coordinateSystem.autoMaxYScale !== code.autoMaxScale
+          thisObject.minValue !== config.minValue ||
+          thisObject.maxValue !== config.maxValue ||
+          coordinateSystem.autoMinYScale !== config.autoMinScale ||
+          coordinateSystem.autoMaxYScale !== config.autoMaxScale
         ) {
-          thisObject.minValue = code.minValue
-          thisObject.maxValue = code.maxValue
+          thisObject.minValue = config.minValue
+          thisObject.maxValue = config.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)
+          if (config.autoMinScale !== undefined && (config.autoMinScale === true || config.autoMinScale === false) && config.autoMaxScale !== undefined && (config.autoMaxScale === true || config.autoMaxScale === false)) {
+            coordinateSystem.autoMinYScale = config.autoMinScale
+            coordinateSystem.autoMaxYScale = config.autoMaxScale
+            autoScaleButton.setStatus(config.autoMinScale, config.autoMaxScale)
           }
 
           coordinateSystem.recalculateScale()

Scales/TimeFrameScale.js

@@ -313,9 +313,9 @@ function newTimeFrameScale () {
 
   function saveObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      code.value = timeFrameLabel
-      thisObject.payload.node.code = JSON.stringify(code)
+      let config = JSON.parse(thisObject.payload.node.config)
+      config.value = timeFrameLabel
+      thisObject.payload.node.config = JSON.stringify(config)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
     }
@@ -323,14 +323,14 @@ function newTimeFrameScale () {
 
   function readObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      if (code.value !== timeFrameLabel) {
+      let config = JSON.parse(thisObject.payload.node.config)
+      if (config.value !== timeFrameLabel) {
         let found = false
         for (let i = 0; i < timeFramesMasterArray.length; i++) {
           let timeFrameArray = timeFramesMasterArray[i]
           for (let j = 0; j < timeFrameArray.length; j++) {
             let record = timeFrameArray[j]
-            if (code.value === record[1]) {
+            if (config.value === record[1]) {
               filePeriodIndex = i
               timeFrameIndex = j
               found = true

Scales/TimeScale.js

@@ -172,12 +172,12 @@ function newTimeScale () {
 
   function saveObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      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)
+      let config = JSON.parse(thisObject.payload.node.config)
+      config.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
+      config.toDate = (new Date(coordinateSystem.max.x)).toISOString()
+      config.autoMinScale = coordinateSystem.autoMinXScale
+      config.autoMaxScale = coordinateSystem.autoMaxXScale
+      thisObject.payload.node.config = JSON.stringify(config, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
     }
@@ -185,24 +185,24 @@ function newTimeScale () {
 
   function readObjectState () {
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
+      let config = JSON.parse(thisObject.payload.node.config)
 
       if (
-      (isNaN(Date.parse(code.fromDate)) || code.fromDate === null || code.fromDate === undefined) ||
-      (isNaN(Date.parse(code.toDate)) || code.toDate === null || code.toDate === undefined)
+      (isNaN(Date.parse(config.fromDate)) || config.fromDate === null || config.fromDate === undefined) ||
+      (isNaN(Date.parse(config.toDate)) || config.toDate === null || config.toDate === undefined)
         ) {
         // not using this value
       } else {
-        if (thisObject.fromDate !== Date.parse(code.fromDate) || thisObject.toDate !== Date.parse(code.toDate)) {
-          thisObject.fromDate = Date.parse(code.fromDate)
-          thisObject.toDate = Date.parse(code.toDate)
+        if (thisObject.fromDate !== Date.parse(config.fromDate) || thisObject.toDate !== Date.parse(config.toDate)) {
+          thisObject.fromDate = Date.parse(config.fromDate)
+          thisObject.toDate = Date.parse(config.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)
+          if (config.autoMinScale !== undefined && (config.autoMinScale === true || config.autoMinScale === false) && config.autoMaxScale !== undefined && (config.autoMaxScale === true || config.autoMaxScale === false)) {
+            coordinateSystem.autoMinXScale = config.autoMinScale
+            coordinateSystem.autoMaxXScale = config.autoMaxScale
+            autoScaleButton.setStatus(config.autoMinScale, config.autoMaxScale)
           }
           coordinateSystem.recalculateScale()
         }

SideSpace/ListItem.js

@@ -0,0 +1,107 @@
+function newListItem () {
+  const MODULE_NAME = 'List Item'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    physics: physics,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize()
+  thisObject.container.isDraggeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.detectMouseOver = true
+  thisObject.container.isClickeable = true
+  thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
+  thisObject.container.frame.height = SIDE_PANEL_WIDTH * 0.75
+
+  let name
+  let type
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+  let onMouseClickEventSubscriptionId
+
+  let isMouseOver = false
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+  }
+
+  function initialize (pName, pType) {
+    name = pName
+    type = pType
+
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+  }
+
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    }
+  }
+
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function onMouseClick (event) {
+    canvas.designSpace.workspace.replaceWorkspaceByLoadingOne(name)
+  }
+
+  function physics () {
+
+  }
+
+  function draw () {
+    let icon = canvas.designSpace.iconByUiObjectType.get(type)
+    let backgroundColor = UI_COLOR.BLACK
+    let labelColor
+
+    const RED_LINE_HIGHT = 4
+    const OPACITY = 1
+
+    let params = {
+      cornerRadius: 0,
+      lineWidth: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      castShadow: false,
+      backgroundColor: backgroundColor,
+      opacity: OPACITY
+    }
+
+    if (isMouseOver === false) {
+      labelColor = UI_COLOR.WHITE
+    } else {
+      labelColor = UI_COLOR.TITANIUM_YELLOW
+    }
+
+    roundedCornersBackground(params)
+
+    drawLabel(name, 1 / 2, 3.0 / 10, -5, 0, 15, thisObject.container, labelColor)
+    drawLabel(type, 1 / 2, 7.2 / 10, -5, 0, 15, thisObject.container, labelColor)
+    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 80, thisObject.container)
+  }
+}

SideSpace/ListView.js

@@ -0,0 +1,271 @@
+function newListView () {
+  const MODULE_NAME = 'List View'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    fitFunction: undefined,
+    container: undefined,
+    listItems: [],
+    payload: undefined,
+    isVisible: false,
+    resize: resize,
+    turnOn: turnOn,
+    turnOff: turnOff,
+    physics: physics,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize()
+  thisObject.container.isDraggeable = false
+  thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
+
+  let isInitialized = false
+
+  let listItemsMap = new Map()
+  let visibleListItems = []
+  let firstVisibleListItem
+
+  let headerHeight = 40
+  let footerHeight = 30
+  let listItemHeight = SIDE_PANEL_WIDTH * 0.75
+
+  let posibleVisibleListItems
+
+  let itemSeparation
+
+  let onMouseWheelEventSuscriptionId
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
+
+    listItemsMap = undefined
+    visibleListItems = undefined
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+
+    thisObject.payload = undefined
+    thisObject = undefined
+  }
+
+  function initialize () {
+    thisObject.container.name = MODULE_NAME
+    thisObject.container.frame.containerName = thisObject.container.name
+    thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
+
+    let position = { // Default position
+      x: SIDE_PANEL_WIDTH * 0.25 / 2,
+      y: 20
+    }
+
+    thisObject.container.frame.position = position
+
+    onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+
+    resize()
+    turnOn()
+  }
+
+  function resize () {
+    thisObject.container.frame.height = browserCanvas.height - thisObject.container.frame.position.y * 2
+
+    let spaceForListItems = (thisObject.container.frame.height - headerHeight - footerHeight)
+    posibleVisibleListItems = Math.trunc(spaceForListItems / (listItemHeight))
+    if ((posibleVisibleListItems - 1) !== 0) {
+      itemSeparation = (spaceForListItems - listItemHeight * posibleVisibleListItems) / (posibleVisibleListItems - 1)
+    } else {
+      itemSeparation = 0
+    }
+  }
+
+  function turnOn () {
+    firstVisibleListItem = 1
+
+    callServer(undefined, 'ListWorkspaces', onResponse)
+
+    function onResponse (err, text) {
+      if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Could not load the list of your workspaces from the backend.  ') }
+        return
+      }
+
+      let workspacelist = JSON.parse(text)
+      thisObject.listItems = []
+      for (let i = 0; i < workspacelist.length; i++) {
+        let workspace = workspacelist[i].replace('.json', '')
+        let listItem = newListItem()
+        listItem.initialize(workspace, 'Workspace')
+        listItem.container.connectToParent(thisObject.container, false, false)
+
+        thisObject.listItems.push(listItem)
+      }
+      calculateVisbleListItems()
+      isInitialized = true
+      thisObject.isVisible = true
+    }
+  }
+
+  function turnOff () {
+    thisObject.isVisible = false
+  }
+
+  function onMouseWheel (event) {
+    delta = event.wheelDelta
+    if (delta > 0) {
+      delta = -1
+    } else {
+      delta = 1
+    }
+
+    firstVisibleListItem = firstVisibleListItem + delta
+
+    calculateVisbleListItems()
+  }
+
+  function calculateVisbleListItems () {
+    let availableSlots = Math.trunc(posibleVisibleListItems)
+
+    if (firstVisibleListItem < 1) { firstVisibleListItem = 1 }
+    if (firstVisibleListItem > (thisObject.listItems.length - availableSlots + 1)) { firstVisibleListItem = thisObject.listItems.length - availableSlots + 1 }
+
+    visibleListItems = []
+
+    for (let i = 0; i < thisObject.listItems.length; i++) {
+      if (i + 1 >= firstVisibleListItem && i + 1 < firstVisibleListItem + availableSlots) {
+        let listItem = thisObject.listItems[i]
+
+        listItem.container.frame.position.x = 0
+        listItem.container.frame.position.y = (listItemHeight + itemSeparation) * visibleListItems.length + headerHeight
+
+         /* Add to Visible Product Array */
+        visibleListItems.push(listItem)
+      }
+    }
+  }
+
+  function getContainer (point, purpose) {
+    if (isInitialized === false || thisObject.isVisible === false) { return }
+    let container
+
+     /* First we check if thisObject point is inside thisObject space. */
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+       /* Now we see which is the inner most container that has it */
+      for (let i = 0; i < visibleListItems.length; i++) {
+        container = visibleListItems[i].getContainer(point)
+
+        if (container !== undefined) {
+          if (container.isForThisPurpose(purpose) === true) {
+            return container
+          }
+        }
+      }
+
+      return thisObject.container
+    }
+  }
+
+  function childrenPhysics () {
+    for (let i = 0; i < thisObject.listItems.length; i++) {
+      let listItem = thisObject.listItems[i]
+      listItem.physics()
+    }
+  }
+
+  function physics () {
+    if (isInitialized === false || thisObject.isVisible === false) { return }
+    if (isInitialized === false) { return }
+    if (thisObject.isVisible === false) { return }
+    childrenPhysics()
+  }
+
+  function draw () {
+    if (isInitialized === false || thisObject.isVisible === false) { return }
+
+    drawBackground()
+    drawChildren()
+    drawScrollBar()
+  }
+
+  function drawChildren () {
+    for (let i = 0; i < visibleListItems.length; i++) {
+      let listItem = visibleListItems[i]
+      if (listItem !== undefined) {
+        listItem.draw()
+      }
+    }
+  }
+
+  function drawBackground () {
+    let label = 'Your Workspaces'
+
+    let backgroundColor = UI_COLOR.WHITE
+    let params = {
+      cornerRadius: 5,
+      lineWidth: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      castShadow: false,
+      backgroundColor: backgroundColor,
+      opacity: 1
+    }
+
+    roundedCornersBackground(params)
+
+    drawLabel(label, 1 / 2, 0, 0, 25, 15, thisObject.container, UI_COLOR.BLACK)
+  }
+
+  function drawScrollBar () {
+    if (thisObject.listItems.length > posibleVisibleListItems && posibleVisibleListItems > 0) {
+      let xOffset = 4
+      let barTopPoint = {
+        x: thisObject.container.frame.width - xOffset,
+        y: headerHeight
+      }
+      let barBottomPoint = {
+        x: thisObject.container.frame.width - xOffset,
+        y: thisObject.container.frame.height - footerHeight
+      }
+      let ratio = (posibleVisibleListItems * listItemHeight + (posibleVisibleListItems - 1) * itemSeparation) / (thisObject.listItems.length * listItemHeight + (thisObject.listItems.length - 1) * itemSeparation)
+      let handleHeight = posibleVisibleListItems * (listItemHeight * ratio) + (posibleVisibleListItems - 1) * itemSeparation * ratio
+      let handleTopPoint = {
+        x: thisObject.container.frame.width - xOffset,
+        y: headerHeight + (listItemHeight * ratio * (firstVisibleListItem - 1) + itemSeparation * ratio * (firstVisibleListItem - 1))
+      }
+      let handleBottomPoint = {
+        x: thisObject.container.frame.width - xOffset,
+        y: handleTopPoint.y + handleHeight
+      }
+      barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
+      barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
+      handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
+      handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
+      browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
+      browserCanvasContext.closePath()
+      browserCanvasContext.setLineDash([0, 0])
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
+      browserCanvasContext.stroke()
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
+      browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
+      browserCanvasContext.closePath()
+      browserCanvasContext.setLineDash([0, 0])
+      browserCanvasContext.lineWidth = 4
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
+      browserCanvasContext.stroke()
+    }
+  }
+}

SideSpace/SidePanelTab.js

@@ -3,6 +3,8 @@ function newSidePanelTab () {
   let thisObject = {
     pointerDirection: 'left',
     container: undefined,
+    resize: resize,
+    physics: physics,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize
@@ -27,20 +29,27 @@ function newSidePanelTab () {
   function initialize () {
     thisObject.container.frame.width = TAB_WIDTH
     thisObject.container.frame.height = TAB_HEIGHT
-    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
-    thisObject.container.frame.position.y = 20
 
     ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
 
     thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    resize()
     isInitialized = true
   }
 
+  function resize () {
+    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+    thisObject.container.frame.position.y = 69
+    setClosed()
+  }
+
   function onMouseClick (event) {
     if (thisObject.pointerDirection === 'left') {
       animation = 'opening'
+      thisObject.container.eventHandler.raiseEvent('opening')
     } else {
       animation = 'closing'
+      thisObject.container.eventHandler.raiseEvent('closing')
     }
   }
 
@@ -53,9 +62,13 @@ function newSidePanelTab () {
     }
   }
 
-  function draw () {
+  function physics () {
     if (isInitialized === false) { return }
     animate()
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
     borders()
     arrow()
   }
@@ -66,28 +79,37 @@ function newSidePanelTab () {
     if (animation === 'opening') {
       xOffset = xOffset + STEP
       thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-      if (xOffset > thisObject.container.parentContainer.frame.width) {
-        animation = 'none'
-        xOffset = thisObject.container.parentContainer.frame.width
-        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-        thisObject.container.parentContainer.status = 'visible'
-        thisObject.pointerDirection = 'right'
+      if (xOffset >= thisObject.container.parentContainer.frame.width) {
+        setOpened()
+        thisObject.container.eventHandler.raiseEvent('opened')
       }
     }
 
     if (animation === 'closing') {
       xOffset = xOffset - STEP
       thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-      if (xOffset < 0) {
-        animation = 'none'
-        xOffset = 0
-        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
-        thisObject.container.parentContainer.status = 'hidden'
-        thisObject.pointerDirection = 'left'
+      if (xOffset <= 0) {
+        setClosed()
+        thisObject.container.eventHandler.raiseEvent('closed')
       }
     }
   }
 
+  function setOpened () {
+    animation = 'none'
+    xOffset = thisObject.container.parentContainer.frame.width
+    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+    thisObject.container.parentContainer.status = 'visible'
+    thisObject.pointerDirection = 'right'
+  }
+  function setClosed () {
+    animation = 'none'
+    xOffset = 0
+    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+    thisObject.container.parentContainer.status = 'hidden'
+    thisObject.pointerDirection = 'left'
+  }
+
   function arrow () {
     let point1
     let point2
@@ -213,4 +235,3 @@ function newSidePanelTab () {
     browserCanvasContext.stroke()
   }
 }
-

Spaces/ChartingSpace.js

@@ -92,12 +92,16 @@ function newChartingSpace () {
 
   function initialize () {
     if (isInitialized === true) { return }
+    if (canvas.designSpace === undefined) { return }
+    if (canvas.designSpace.workspace === undefined) { return }
 
     let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
     for (let i = 0; i < rootNodes.length; i++) {
       let rootNode = rootNodes[i]
-      if (rootNode.type === 'Charting Space') {
-        thisObject.payload = rootNode.payload
+      if (rootNode !== null) {
+        if (rootNode.type === 'Charting Space') {
+          thisObject.payload = rootNode.payload
+        }
       }
     }
 
@@ -402,6 +406,7 @@ function newChartingSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.visible === false) { return }
     drawBackground()
 

Spaces/CockpitSpace.js

@@ -20,7 +20,8 @@
      physics: physics,
      getContainer: getContainer,
      finalize: finalize,
-     initialize: initialize
+     initialize: initialize,
+     initializePosition: initializePosition
    }
 
    thisObject.container = newContainer()
@@ -39,6 +40,7 @@
    let statusCounter = 0
    let statusText
    let statusType
+   let isInitilized = false
 
    return thisObject
 
@@ -52,6 +54,15 @@
    }
 
    function initialize () {
+     canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+     selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+
+     thisObject.fullscreen = newFullScreen()
+     thisObject.fullscreen.container.connectToParent(thisObject.container)
+     thisObject.fullscreen.initialize()
+   }
+
+   function initializePosition () {
      thisObject.container.frame.position.x = 0
 
      let INITIAL_POSITION
@@ -68,13 +79,7 @@
        INITIAL_POSITION = 100
        thisObject.container.frame.position.y = browserCanvas.height * INITIAL_POSITION / 100 - COCKPIT_SPACE_HEIGHT
      }
-
-     canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
-     selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-
-     thisObject.fullscreen = newFullScreen()
-     thisObject.fullscreen.container.connectToParent(thisObject.container)
-     thisObject.fullscreen.initialize()
+     isInitilized = true
    }
 
    function onMouseClick (event) {
@@ -148,6 +153,7 @@
      thisObject.fullscreen.physics()
    }
    function thisObjectPhysics () {
+     if (isInitilized === false) { return }
      /* Check the limits */
 
      thisObject.status = 'MIDDLE'
@@ -201,6 +207,7 @@
    }
 
    function draw () {
+     if (canWeDraw === false) { return }
      thisObject.container.frame.draw(false, false)
 
      drawBackground()
@@ -266,8 +273,10 @@
        printLabel(statusText, position.x, position.y, 1, 15, textColor, true, thisObject.container)
      }
 
-     if (canvas.designSpace.workspace.enabled === true && statusText === undefined) {
-       arrow()
+     if (canvas.designSpace !== undefined) {
+       if (canvas.designSpace.workspace.enabled === true && statusText === undefined) {
+         arrow()
+       }
      }
    }
 

Spaces/DesignSpace.js

@@ -285,7 +285,13 @@ function newDesignSpace () {
       'arrangement-vertical-right',
       'arrangement-vertical-left',
       'arrangement-concave',
-      'move-to-phase-event'
+      'move-to-phase-event',
+      'open-execution',
+      'move-order',
+      'market-order',
+      'limit-order',
+      'execution-algorithm',
+      'cancel-order'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {
@@ -334,6 +340,7 @@ function newDesignSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.sidePanel !== undefined) {
       thisObject.sidePanel.draw()
     }

Spaces/FloatingSpace.js

@@ -415,6 +415,7 @@ function newFloatingSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (visible === false) { return }
     drawBackground()
     thisObject.floatingLayer.draw()

Spaces/PanelsSpace.js

@@ -50,14 +50,14 @@ function newPanelsSpace () {
         }
       case 'Plotter Panel':
         {
-          if (pParameters.panelNode.code.isLegacy !== true) {
+          if (pParameters.panelNode.config.isLegacy !== true) {
             panel = newPlotterPanel()
             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 = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.config.codeName)
             panel.fitFunction = canvas.chartingSpace.fitFunction
             panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
             panel.session = pSession
@@ -336,6 +336,7 @@ function newPanelsSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     if (thisObject.visible !== true) { return }
 
     thisObject.container.frame.draw(false, false)

Spaces/SideSpace.js

@@ -1,12 +1,13 @@
-function newSidePanel () {
-  const MODULE_NAME = 'Side Panel'
+function newSideSpace () {
+  const MODULE_NAME = 'Side Space'
   let thisObject = {
-    areas: [],
     sidePanelTab: undefined,
     container: undefined,
+    physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   let isInitialized = false
@@ -16,9 +17,16 @@ function newSidePanel () {
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = true
   thisObject.container.status = 'hidden'
 
+  let listView
+
   resize()
+
+  let openingEventSubscriptionId
+  let closedEventSubscriptionId
+  let browserResizedEventSubscriptionId
   return thisObject
 
   function initialize () {
@@ -26,21 +34,48 @@ function newSidePanel () {
     thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
     thisObject.sidePanelTab.initialize()
 
-    canvas.eventHandler.listenToEvent('Browser Resized', resize)
+    browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+    initializeListView()
     isInitialized = true
   }
 
+  function finalize () {
+    canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
+    thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
+    thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
+  }
+
+  function initializeListView () {
+    listView = newListView()
+    listView.initialize()
+    listView.container.connectToParent(thisObject.container, false, false)
+    openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn)
+    closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff)
+  }
+
   function resize () {
     thisObject.container.frame.width = SIDE_PANEL_WIDTH
     thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
     thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
     thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
+
+    if (listView !== undefined) {
+      listView.resize()
+    }
+
+    if (thisObject.sidePanelTab !== undefined) {
+      thisObject.sidePanelTab.resize()
+    }
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     let container
 
-    container = thisObject.sidePanelTab.getContainer(point)
+    container = thisObject.sidePanelTab.getContainer(point, purpose)
+    if (container !== undefined) { return container }
+
+    container = listView.getContainer(point, purpose)
     if (container !== undefined) { return container }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -50,15 +85,17 @@ function newSidePanel () {
     }
   }
 
+  function physics () {
+    thisObject.sidePanelTab.physics()
+    listView.physics()
+  }
+
   function draw () {
+    if (canWeDraw === false) { return }
     if (isInitialized === false) { return }
     borders()
     thisObject.sidePanelTab.draw()
-
-    for (let i = 0; i < thisObject.areas.length; i++) {
-      let area = thisObject.areas[i]
-      area.draw()
-    }
+    listView.draw()
   }
 
   function borders () {

Spaces/TopSpace.js

@@ -54,6 +54,7 @@ function newTopSpace () {
   }
 
   function draw () {
+    if (canWeDraw === false) { return }
     thisObject.container.frame.draw(false, false)
 
     drawBackground()
@@ -65,7 +66,7 @@ function newTopSpace () {
     let opacity = 1
     browserCanvasContext.beginPath()
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    if (areWeRecording === true) {
+    if (ARE_WE_RECORDING_A_VIDEO === true) {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
     } else {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'

SplashScreen.js

@@ -13,7 +13,7 @@ function newSplashScreen () {
     initialize: initialize
   }
 
-  var container = newContainer()
+  let container = newContainer()
   container.initialize()
   thisObject.container = container
 
@@ -31,21 +31,22 @@ function newSplashScreen () {
 
   let logo
   let canDrawLogo = false
+  let isInitialized = false
+  let splashScreenNeeded = true
 
   return thisObject
 
   function initialize () {
     logo = new Image()
-
     logo.onload = onImageLoad
 
     function onImageLoad () {
       canDrawLogo = true
     }
-
     logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
-
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+    isInitialized = true
   }
 
   function resize () {
@@ -54,6 +55,7 @@ function newSplashScreen () {
   }
 
   function draw () {
+    if (isInitialized === false) { return }
     if (splashScreenNeeded === false) {
       stepsInitializationCounter = 100
       canDrawLogo = false
@@ -101,6 +103,7 @@ function newSplashScreen () {
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false
+      canWeDraw = true
       stepsInitializationCounter = 99
     }
 
@@ -122,7 +125,7 @@ function newSplashScreen () {
 
     fontSize = 35
 
-    title = 'Beta 4'
+    title = 'Beta 5'
 
     titlePoint = {
       x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,

Utilities.js

@@ -1,25 +1,6 @@
-function drawContainerBackground (container, color, opacity, fitFunction) {
-  let fromPoint = {
-    x: 0,
-    y: 0
-  }
-
-  let toPoint = {
-    x: container.frame.width,
-    y: container.frame.height
-  }
-
-  fromPoint = transformThisPoint(fromPoint, container)
-  toPoint = transformThisPoint(toPoint, container)
-
-  fromPoint = fitFunction(fromPoint)
-  toPoint = fitFunction(toPoint)
-
-  browserCanvasContext.beginPath()
-  browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
-  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
-  browserCanvasContext.closePath()
-  browserCanvasContext.fill()
+function getNodeDefinition (node) {
+  let key = node.type
+  return APP_SCHEMA_MAP.get(key)
 }
 
 function dynamicDecimals (value, minDecimals) {
@@ -38,50 +19,6 @@ function dynamicDecimals (value, minDecimals) {
   return returnValue
 }
 
-function savePropertyAtNodeConfig (payload, propertyName, value) {
-  try {
-    let code = JSON.parse(payload.node.code)
-    code[propertyName] = value
-    payload.node.code = JSON.stringify(code, null, 4)
-  } catch (err) {
-     // we ignore errors here since most likely they will be parsing errors.
-  }
-}
-
-function loadPropertyFromNodeConfig (payload, propertyName) {
-  try {
-    let code = JSON.parse(payload.node.code)
-    return code[propertyName]
-  } catch (err) {
-     // we ignore errors here since most likely they will be parsing errors.
-  }
-}
-
-function saveFrame (payload, frame) {
-  payload.frame = {
-    position: {
-      x: frame.position.x,
-      y: frame.position.y
-    },
-    width: frame.width,
-    height: frame.height,
-    radius: frame.radius
-  }
-}
-
-function loadFrame (payload, frame) {
-  if (payload.node.savedPayload !== undefined) {
-    if (payload.node.savedPayload.frame !== undefined) {
-      frame.position.x = payload.node.savedPayload.frame.position.x
-      frame.position.y = payload.node.savedPayload.frame.position.y
-      frame.width = payload.node.savedPayload.frame.width
-      frame.height = payload.node.savedPayload.frame.height
-      frame.radius = payload.node.savedPayload.frame.radius
-      payload.node.savedPayload.frame = undefined
-    }
-  }
-}
-
 function convertTimeFrameToName (pTimeFrame) {
   for (let i = 0; i < dailyFilePeriods.length; i++) {
     let period = dailyFilePeriods[i]
@@ -98,52 +35,6 @@ function convertTimeFrameToName (pTimeFrame) {
   }
 }
 
-function downloadText (filename, text) {
-  let element = document.createElement('a')
-  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
-  element.setAttribute('download', filename)
-  element.style.display = 'none'
-  document.body.appendChild(element)
-  element.click()
-  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.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
-
-  point = canvas.chartingSpace.viewport.transformThisPoint(point)
-
-  return point
-}
-
-function unTransformThisPoint (point, container) {
-  point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
-  point = container.frame.unframeThisPoint(point)
-
-  return point
-}
-
 function nextPorwerOf10 (number) {
   for (let i = -10; i <= 10; i++) {
     if (number < Math.pow(10, i)) {
@@ -157,59 +48,6 @@ function pad (str, max) {
   return str.length < max ? pad('0' + str, max) : str
 }
 
-function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
-  point = unTransformThisPoint(point, container)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
-
-  let date = new Date(point.x)
-
-  return date
-}
-
-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)
-
-  return point.x
-}
-
 function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) {
   let targetPoint = {
     x: currentDate.valueOf(),
@@ -244,50 +82,6 @@ function removeTime (datetime) {
   return dateOnly
 }
 
-function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) {
-  if (labelToPrint === undefined) { return }
-  let labelPoint
-  if (color === undefined) { color = UI_COLOR.DARK }
-  if (fontSize === undefined) { fontSize = 10 };
-
-  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  let label = labelToPrint
-  if (isNaN(label) === false && label !== '') {
-    if (fixedDecimals !== true) {
-      label = dynamicDecimals(labelToPrint)
-    }
-    label = label.toLocaleString()
-    if (noDecimals === true) {
-      label = Math.trunc(label)
-    }
-  }
-
-  let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-  if (center === true) {
-    labelPoint = {
-      x: x - xOffset,
-      y: y
-    }
-  } else {
-    labelPoint = {
-      x: x,
-      y: y
-    }
-  }
-
-  if (container !== undefined) {
-    labelPoint = container.frame.frameThisPoint(labelPoint)
-  }
-
-  if (fitFunction !== undefined) {
-    labelPoint = fitFunction(labelPoint)
-  }
-
-  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
-  browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-}
-
 function newUniqueId () {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)

Utilities/CoordinateTransformations.js

@@ -0,0 +1,18 @@
+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.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
+
+  point = canvas.chartingSpace.viewport.transformThisPoint(point)
+
+  return point
+}
+
+function unTransformThisPoint (point, container) {
+  point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
+  point = container.frame.unframeThisPoint(point)
+
+  return point
+}

Utilities/DateRateTransformations.js

@@ -0,0 +1,53 @@
+function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
+  point = unTransformThisPoint(point, container)
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  let date = new Date(point.x)
+
+  return date
+}
+
+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)
+
+  return point.x
+}
+

Utilities/Download.js

@@ -0,0 +1,58 @@
+function downloadText (filename, text) {
+  let element = document.createElement('a')
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+  element.setAttribute('download', filename)
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+}
+
+function downloadCanvas (filename, canvasToUse) {
+  let data = canvasToUse.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 downloadPanorama (filename) {
+  let INITIAL_WIDTH = 800
+  let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH
+
+  if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
+    /* We start recording the panorame. */
+    ARE_WE_RECORDING_A_MARKET_PANORAMA = true
+    marketPanoramaCanvas = document.createElement('canvas')
+    marketPanoramaCanvas.width = INITIAL_WIDTH * 50
+    marketPanoramaCanvas.height = browserCanvas.height
+    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height)
+    CURRENT_PANORAMA_POSITION = INITIAL_WIDTH
+  } else {
+    /* We stop recording and download the resulting image. */
+    ARE_WE_RECORDING_A_MARKET_PANORAMA = false
+    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height)
+    let finalResultCanvas = document.createElement('canvas')
+    finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH
+    finalResultCanvas.height = browserCanvas.height
+    finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height)
+    downloadCanvas(filename, finalResultCanvas)
+    marketPanoramaCanvas = undefined
+  }
+}
+
+function addToMarketPanorama () {
+  let SECTION_WIDTH = 80 * 2
+  let INITIAL_POSITION = 800 - SECTION_WIDTH
+  marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height)
+  CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH
+}

Utilities/DrawPrint.js

@@ -150,3 +150,72 @@ function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, containe
     }
   }
 }
+
+function drawContainerBackground (container, color, opacity, fitFunction) {
+  let fromPoint = {
+    x: 0,
+    y: 0
+  }
+
+  let toPoint = {
+    x: container.frame.width,
+    y: container.frame.height
+  }
+
+  fromPoint = transformThisPoint(fromPoint, container)
+  toPoint = transformThisPoint(toPoint, container)
+
+  fromPoint = fitFunction(fromPoint)
+  toPoint = fitFunction(toPoint)
+
+  browserCanvasContext.beginPath()
+  browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
+  browserCanvasContext.closePath()
+  browserCanvasContext.fill()
+}
+
+function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) {
+  if (labelToPrint === undefined) { return }
+  let labelPoint
+  if (color === undefined) { color = UI_COLOR.DARK }
+  if (fontSize === undefined) { fontSize = 10 };
+
+  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+  let label = labelToPrint
+  if (isNaN(label) === false && label !== '') {
+    if (fixedDecimals !== true) {
+      label = dynamicDecimals(labelToPrint)
+    }
+    label = label.toLocaleString()
+    if (noDecimals === true) {
+      label = Math.trunc(label)
+    }
+  }
+
+  let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+  if (center === true) {
+    labelPoint = {
+      x: x - xOffset,
+      y: y
+    }
+  } else {
+    labelPoint = {
+      x: x,
+      y: y
+    }
+  }
+
+  if (container !== undefined) {
+    labelPoint = container.frame.frameThisPoint(labelPoint)
+  }
+
+  if (fitFunction !== undefined) {
+    labelPoint = fitFunction(labelPoint)
+  }
+
+  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
+  browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+}
+

Utilities/LoadSaveFrame.js

@@ -0,0 +1,24 @@
+function saveFrame (payload, frame) {
+  payload.frame = {
+    position: {
+      x: frame.position.x,
+      y: frame.position.y
+    },
+    width: frame.width,
+    height: frame.height,
+    radius: frame.radius
+  }
+}
+
+function loadFrame (payload, frame) {
+  if (payload.node.savedPayload !== undefined) {
+    if (payload.node.savedPayload.frame !== undefined) {
+      frame.position.x = payload.node.savedPayload.frame.position.x
+      frame.position.y = payload.node.savedPayload.frame.position.y
+      frame.width = payload.node.savedPayload.frame.width
+      frame.height = payload.node.savedPayload.frame.height
+      frame.radius = payload.node.savedPayload.frame.radius
+      payload.node.savedPayload.frame = undefined
+    }
+  }
+}

Utilities/NodeConfig.js

@@ -0,0 +1,18 @@
+function savePropertyAtNodeConfig (payload, propertyName, value) {
+  try {
+    let config = JSON.parse(payload.node.config)
+    config[propertyName] = value
+    payload.node.config = JSON.stringify(config, null, 4)
+  } catch (err) {
+     // we ignore errors here since most likely they will be parsing errors.
+  }
+}
+
+function loadPropertyFromNodeConfig (payload, propertyName) {
+  try {
+    let config = JSON.parse(payload.node.config)
+    return config[propertyName]
+  } catch (err) {
+     // we ignore errors here since most likely they will be parsing errors.
+  }
+}