Merge pull request #395 from Luis-Fernando-Molina/develop

Contribution: This is my contribution to Superalgos
2021-01-17 21:04:44 +01:00
commit 213c25efa2
@@ -590,7 +590,6 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                switch (requestParameters[2]) { // switch by command
                    case 'Contribute': {
                        try {
-                            console.log(JSON.stringify(requestParameters))
                            const commitMessage = unescape(requestParameters[3])
                            const username = unescape(requestParameters[4])
                            const token = unescape(requestParameters[5])
@@ -0,0 +1,14 @@
+{
+    "type": "Client",
+    "definition": {
+        "text": "The Client, together with the TS and the UI is one of the three core components of the Superalgos Software.",
+        "updated": 1610911936882
+    },
+    "paragraphs": [
+        {
+            "style": "Success",
+            "text": "The Client is what users run.",
+            "updated": 1610912048355
+        }
+    ]
+}
@@ -0,0 +1,14 @@
+{
+    "type": "TS",
+    "definition": {
+        "text": "TS is the abbreviation of Task Server, one of the core components of the Superalgos Software.",
+        "updated": 1610912495126
+    },
+    "paragraphs": [
+        {
+            "style": "Success",
+            "text": "TS is also the root object of a data structure available at runtime within the Task Server.",
+            "updated": 1610911849966
+        }
+    ]
+}
@@ -0,0 +1,13 @@
+{
+    "type": "UI",
+    "definition": {
+        "text": "UI is an abbreviation for User Interface (user interface), which refers to the operation screen and operation method of the software. In Superalgos the UI is a Web App that runs at an Internet Browser.",
+        "updated": 1610911735769
+    },
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "Left click and Edit to enter edit mode and change this text. ENTER to write new paragraphs. ESC to exit edit mode."
+        }
+    ]
+}
@@ -0,0 +1,18 @@
+{
+    "topic": "TS Process Errors",
+    "pageNumber": "1",
+    "type": "TS Process Error - Unexpected Error",
+    "definition": {
+        "text": "Write here a summary for this topic page."
+    },
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "Left click and Edit to enter edit mode and change this text. ENTER to write new paragraphs. ESC to exit edit mode."
+        },
+        {
+            "style": "Error",
+            "text": "Unexpected Error"
+        }
+    ]
+}
@@ -0,0 +1,106 @@
+{
+    "topic": "UI Websockets Errors",
+    "pageNumber": "1",
+    "type": "UI Websockets Error - Bad Configuration",
+    "definition": {
+        "text": "To enable websockets communications from the UI to Superalgos Clients, we need to read the config of the Network Node. If anything is wrong with that configuration, the UI will not be able to communicate with the Client via websockets and many things, like running a Task will not be possible.",
+        "updated": 1610887696051
+    },
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "There are several reasons for the UI Web Sockets Client to report a Bad Configuration error. They are all listed below.",
+            "updated": 1610889008413
+        },
+        {
+            "style": "Anchor",
+            "text": "Invalid JSON Format"
+        },
+        {
+            "style": "Title",
+            "text": "Reason #1: Invalid JSON Format",
+            "updated": 1610889030985
+        },
+        {
+            "style": "Text",
+            "text": "To enable websockets communications from the UI to Superalgos Clients, we need to read the config of the Network Node. In this case this configuration is unreadable because is not correctly formatted in JSON."
+        },
+        {
+            "style": "Error",
+            "text": "Bad Configuration - Invalid JSON Format",
+            "updated": 1610889068414
+        },
+        {
+            "style": "Success",
+            "text": "Edit the configuration and double check that is correctly formatted. If needed, copy the text to an online JSON formatter to see clearly which is the problem.",
+            "updated": 1610887620569
+        },
+        {
+            "style": "Note",
+            "text": "This page contains several error conditions. When clicking at the Error Menssage at a node, you are redirected within this page to the section where the the error that is happening at that node is explained."
+        },
+        {
+            "style": "Anchor",
+            "text": "Host Property Not Found"
+        },
+        {
+            "style": "Title",
+            "text": "Reason #2: Host Property Not Found"
+        },
+        {
+            "style": "Text",
+            "text": "The following property was expected and not found at the Network Node config:",
+            "updated": 1610889169227
+        },
+        {
+            "style": "Json",
+            "text": "host"
+        },
+        {
+            "style": "Error",
+            "text": "Bad Configuration - Host Property Not Found",
+            "updated": 1610889199843
+        },
+        {
+            "style": "Success",
+            "text": "Double check that you did not misspell this property. It's value should be the hostName or IP number of the computer / server hosting the Superalgos Client.",
+            "updated": 1610889251223
+        },
+        {
+            "style": "Note",
+            "text": "This page contains several error conditions. When clicking at the Error Menssage at a node, you are redirected within this page to the section where the the error that is happening at that node is explained."
+        },
+        {
+            "style": "Anchor",
+            "text": "WebSocketsPort Property Not Found",
+            "updated": 1610889501929
+        },
+        {
+            "style": "Title",
+            "text": "Reason #3: WebSocketsPort Property Not Found"
+        },
+        {
+            "style": "Text",
+            "text": "The following property was expected and not found at the Network Node config:"
+        },
+        {
+            "style": "Json",
+            "text": "webSocketsPort",
+            "updated": 1610889416628
+        },
+        {
+            "style": "Error",
+            "text": "Error: Bad Configuration - WebSocketsPort Property Not Found",
+            "updated": 1610889423432
+        },
+        {
+            "style": "Success",
+            "text": "Tip: Double check that you did not misspell this property. It's value should be the port number configured for the Client Websockets Interface.",
+            "updated": 1610889486046
+        },
+        {
+            "style": "Note",
+            "text": "This page contains several error conditions. When clicking at the Error Menssage at a node, you are redirected within this page to the section where the the error that is happening at that node is explained."
+        }
+    ]
+}
@@ -58,15 +58,10 @@

    function run(callBackFunction) {
        try {
-            loop();
+            loop()

            function loop() {
                try {
-                    function pad(str, max) {
-                        str = str.toString();
-                        return str.length < max ? pad(" " + str, max) : str;
-                    }
-
                    /* For each loop we want to create a new log file. */
                    if (TS.projects.superalgos.globals.loggerVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).BOT_MAIN_LOOP_LOGGER_MODULE_OBJECT !== undefined) {
                        TS.projects.superalgos.globals.loggerVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).BOT_MAIN_LOOP_LOGGER_MODULE_OBJECT.finalize()
@@ -798,8 +793,17 @@

            function processStopped() {
                if (TS.projects.superalgos.globals.taskVariables.FATAL_ERROR_MESSAGE !== undefined) {
-                    TS.projects.superalgos.functionLibraries.processFunctions.processError(
-                        TS.projects.superalgos.globals.processVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).PROCESS_KEY, undefined, "An unexpected error caused the Process to stop.")
+                    TS.projects.superalgos.functionLibraries.processFunctions.processError
+                        (
+                            TS.projects.superalgos.globals.processVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).PROCESS_KEY,
+                            undefined,
+                            "An unexpected error caused the Process to stop.",
+                            {
+                                project: 'Superalgos',
+                                category: 'Topic',
+                                type: 'TS Process Error - Unexpected Error'
+                            }
+                        )
                } else {
                    TS.projects.superalgos.globals.taskConstants.EVENT_SERVER_CLIENT_MODULE_OBJECT.raiseEvent(
                        TS.projects.superalgos.globals.processVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).PROCESS_KEY, 'Stopped')
@@ -19,52 +19,58 @@ exports.newSuperalgosFunctionLibrariesProcessFunctions = function () {
        TS.projects.superalgos.globals.taskConstants.EVENT_SERVER_CLIENT_MODULE_OBJECT.raiseEvent(TS.projects.superalgos.globals.processVariables.VARIABLES_BY_PROCESS_INDEX_MAP.get(processIndex).PROCESS_KEY, 'Heartbeat', event)
    }

-    function processError (processKey, node, errorMessage) {
+    function processError (processKey, node, errorMessage, docs) {
        let event
        if (node !== undefined) {
            event = {
                nodeName: node.name,
                nodeType: node.type,
                nodeId: node.id,
-                errorMessage: errorMessage
+                errorMessage: errorMessage,
+                docs: docs
            }
        } else {
            event = {
-                errorMessage: errorMessage
+                errorMessage: errorMessage,
+                docs: docs
            }
        }
        TS.projects.superalgos.globals.taskConstants.EVENT_SERVER_CLIENT_MODULE_OBJECT.raiseEvent(processKey, 'Error', event)
    }

-    function processWarning (processKey, node, warningMessage) {
+    function processWarning (processKey, node, warningMessage, docs) {
        let event
        if (node !== undefined) {
            event = {
                nodeName: node.name,
                nodeType: node.type,
                nodeId: node.id,
-                warningMessage: warningMessage
+                warningMessage: warningMessage,
+                docs: docs
            }
        } else {
            event = {
-                warningMessage: warningMessage
+                warningMessage: warningMessage,
+                docs: docs
            }
        }
        TS.projects.superalgos.globals.taskConstants.EVENT_SERVER_CLIENT_MODULE_OBJECT.raiseEvent(processKey, 'Warning', event)
    }

-    function processInfo (processKey, node, infoMessage) {
+    function processInfo (processKey, node, infoMessage, docs) {
        let event
        if (node !== undefined) {
            event = {
                nodeName: node.name,
                nodeType: node.type,
                nodeId: node.id,
-                infoMessage: infoMessage
+                infoMessage: infoMessage,
+                docs: docs
            }
        } else {
            event = {
-                infoMessage: infoMessage
+                infoMessage: infoMessage,
+                docs: docs
            }
        }
        TS.projects.superalgos.globals.taskConstants.EVENT_SERVER_CLIENT_MODULE_OBJECT.raiseEvent(processKey, 'Info', event)
@@ -731,7 +731,7 @@ function newSuperalgosDocsCommmandInterface() {
                let orderedArray = UI.projects.superalgos.utilities.docs.buildOrderedPageIndex(
                    project,
                    'Topic',
-                    review
+                    topic
                )

                pageNumber = orderedArray.length + 1
@@ -771,7 +771,7 @@ function newSuperalgosDocsCommmandInterface() {
                let orderedArray = UI.projects.superalgos.utilities.docs.buildOrderedPageIndex(
                    project,
                    'Tutorial',
-                    review
+                    tutorial
                )

                pageNumber = orderedArray.length + 1
@@ -66,6 +66,7 @@ function newSuperalgosDocsDocumentPage() {
            if (thisObject.docsSchemaDocument === undefined) {
                // Use the New Node Template
                let template = {
+                    updated: true,
                    type: UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.type,
                    definition: { text: "Write here the definition of this " + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.category + "." },
                    paragraphs: [
@@ -4,7 +4,7 @@ function newUiObject() {
    const ERROR_LOG = true

    const logger = newWebDebugLog()
-    
+

    let thisObject = {
        fitFunction: undefined,
@@ -19,6 +19,7 @@ function newUiObject() {
        conditionEditor: undefined,
        formulaEditor: undefined,
        uiObjectTitle: undefined,
+        uiObjectMessage: undefined,
        circularProgressBar: undefined,
        isRunning: undefined,
        isPlaying: undefined,
@@ -124,6 +125,10 @@ function newUiObject() {
    let warningMessage = ''
    let infoMessage = ''

+    let errorDocs = undefined
+    let warningDocs = undefined
+    let infoDocs = undefined
+
    let currentValue = 0
    let valueMinDecimals = undefined
    let currentPercentage = ''
@@ -171,6 +176,8 @@ function newUiObject() {
        thisObject.menu = undefined
        thisObject.uiObjectTitle.finalize()
        thisObject.uiObjectTitle = undefined
+        thisObject.uiObjectMessage.finalize()
+        thisObject.uiObjectMessage = undefined
        thisObject.fitFunction = undefined
        thisObject.isVisibleFunction = undefined

@@ -200,6 +207,10 @@ function newUiObject() {
        lastHeartBeat = undefined

        onRunningCallBackFunction = undefined
+
+        errorDocs = undefined
+        warningDocs = undefined
+        infoDocs = undefined
    }

    function finalizeEventsServerClient() {
@@ -237,10 +248,18 @@ function newUiObject() {

        thisObject.uiObjectTitle = newUiObjectTitle()
        thisObject.uiObjectTitle.isVisibleFunction = thisObject.isVisibleFunction
-        thisObject.uiObjectTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
+        thisObject.uiObjectTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false,  true, true)
        thisObject.uiObjectTitle.fitFunction = thisObject.fitFunction
        thisObject.uiObjectTitle.initialize(thisObject.payload)

+        /* Initialize UI Object Message */
+
+        thisObject.uiObjectMessage = newUiObjectMessage()
+        thisObject.uiObjectMessage.isVisibleFunction = thisObject.isVisibleFunction
+        thisObject.uiObjectMessage.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, true)
+        thisObject.uiObjectMessage.fitFunction = thisObject.fitFunction
+        thisObject.uiObjectMessage.initialize(thisObject.payload)
+
        /* Load UI Object Image */

        iconPhysics()
@@ -305,6 +324,9 @@ function newUiObject() {
                if (container !== undefined) { return container }
            }

+            container = thisObject.uiObjectMessage.getContainer(point)
+            if (container !== undefined) { return container }
+
            container = thisObject.menu.getContainer(point)
            if (container !== undefined) { return container }
        }
@@ -320,12 +342,16 @@ function newUiObject() {
        thisObject.menu.invisiblePhysics()
        childrenRunningPhysics()
        thisObject.uiObjectTitle.physics()
+        thisObject.uiObjectMessage.physics()
    }

    function physics() {
        thisObject.menu.physics()
        thisObject.uiObjectTitle.physics()

+        thisObject.menu.physics()
+        thisObject.uiObjectMessage.physics()
+
        if (thisObject.codeEditor !== undefined) {
            thisObject.codeEditor.physics()
        }
@@ -676,6 +702,11 @@ function newUiObject() {
            if (errorMessageCounter < 0) {
                errorMessageCounter = 0
                thisObject.hasError = false
+
+                if (thisObject.uiObjectMessage.type === 'Error') {
+                    thisObject.uiObjectMessage.text = undefined
+                    thisObject.uiObjectMessage.type = undefined
+                }
            }
        }

@@ -684,6 +715,11 @@ function newUiObject() {
            if (warningMessageCounter < 0) {
                warningMessageCounter = 0
                thisObject.hasWarning = false
+
+                if (thisObject.uiObjectMessage.type === 'Warning') {
+                    thisObject.uiObjectMessage.text = undefined
+                    thisObject.uiObjectMessage.type = undefined
+                }
            }
        }

@@ -692,6 +728,11 @@ function newUiObject() {
            if (infoMessageCounter < 0) {
                infoMessageCounter = 0
                thisObject.hasInfo = false
+
+                if (thisObject.uiObjectMessage.type === 'Info') {
+                    thisObject.uiObjectMessage.text = undefined
+                    thisObject.uiObjectMessage.type = undefined
+                }
            }
        }

@@ -798,9 +839,10 @@ function newUiObject() {
        runningAtBackendCounter = 5
    }

-    function setErrorMessage(message, duration) {
+    function setErrorMessage(message, duration, docs) {
        if (message !== undefined) {
            errorMessage = message
+            errorDocs = docs
            thisObject.hasError = true
            if (duration === undefined) { duration = 2 }
            errorMessageCounter = 100 * duration
@@ -830,12 +872,19 @@ function newUiObject() {

    function resetErrorMessage() {
        errorMessage = undefined
+        errorDocs = undefined
        thisObject.hasError = false
+
+        if (thisObject.uiObjectMessage.type === 'Error') {
+            thisObject.uiObjectMessage.text = undefined
+            thisObject.uiObjectMessage.type = undefined
+        }
    }

-    function setWarningMessage(message, duration) {
+    function setWarningMessage(message, duration, docs) {
        if (message !== undefined) {
            warningMessage = message
+            warningDocs = docs
            thisObject.hasWarning = true
            if (duration === undefined) { duration = 1 }
            warningMessageCounter = 100 * duration
@@ -865,12 +914,19 @@ function newUiObject() {

    function resetWarningMessage() {
        warningMessage = undefined
+        warningDocs = undefined
        thisObject.hasWarning = false
+
+        if (thisObject.uiObjectMessage.type === 'Warning') {
+            thisObject.uiObjectMessage.text = undefined
+            thisObject.uiObjectMessage.type = undefined
+        }
    }

-    function setInfoMessage(message, duration) {
+    function setInfoMessage(message, duration, docs) {
        if (message !== undefined) {
            infoMessage = message
+            infoDocs = docs
            thisObject.hasInfo = true
            if (duration === undefined) { duration = 1 }
            infoMessageCounter = 100 * duration
@@ -900,7 +956,13 @@ function newUiObject() {

    function resetInfoMessage() {
        infoMessage = undefined
+        infoDocs = undefined
        thisObject.hasInfo = false
+
+        if (thisObject.uiObjectMessage.type === 'Info') {
+            thisObject.uiObjectMessage.text = undefined
+            thisObject.uiObjectMessage.type = undefined
+        }
    }

    function getValue() {
@@ -1057,7 +1119,7 @@ function newUiObject() {
            async function onError(message) {

                let uiObject = await getTargetUiObject(message)
-                uiObject.setErrorMessage(message.event.errorMessage, 10)
+                uiObject.setErrorMessage(message.event.errorMessage, 10, message.event.docs)

                let event = {
                    type: 'Secondary Action Already Executed'
@@ -1076,7 +1138,7 @@ function newUiObject() {

            async function onWarning(message) {
                let uiObject = await getTargetUiObject(message)
-                uiObject.setWarningMessage(message.event.warningMessage, 10)
+                uiObject.setWarningMessage(message.event.warningMessage, 10, message.event.docs)
            }
        }

@@ -1090,7 +1152,7 @@ function newUiObject() {

            async function onInfo(message) {
                let uiObject = await getTargetUiObject(message)
-                uiObject.setInfoMessage(message.event.infoMessage, 10)
+                uiObject.setInfoMessage(message.event.infoMessage, 10, message.event.docs)
            }
        }
    }
@@ -1346,6 +1408,7 @@ function newUiObject() {
            drawPercentage()
            drawStatus()
            thisObject.uiObjectTitle.draw()
+            thisObject.uiObjectMessage.draw()
            drawNodeType()
        }
    }
@@ -1431,6 +1494,7 @@ function newUiObject() {

            if (drawTitle === true) {
                thisObject.uiObjectTitle.draw()
+                thisObject.uiObjectMessage.draw()
            }
        }
    }
@@ -1677,94 +1741,29 @@ function newUiObject() {

    function drawErrorMessage() {
        if (thisObject.hasError === false) { return }
-        drawMessage(errorMessage, UI_COLOR.RUSTED_RED)
+
+        thisObject.uiObjectMessage.text = errorMessage
+        thisObject.uiObjectMessage.type = 'Error'
+        thisObject.uiObjectMessage.docs = errorDocs
    }

    function drawWarningMessage() {
        if (thisObject.hasError === true) { return }
        if (thisObject.hasWarning !== true) { return }
-        drawMessage(warningMessage, UI_COLOR.TITANIUM_YELLOW)
+
+        thisObject.uiObjectMessage.text = warningMessage
+        thisObject.uiObjectMessage.type = 'Warning'
+        thisObject.uiObjectMessage.docs = warningDocs
    }

    function drawInfoMessage() {
        if (thisObject.hasError === true) { return }
        if (thisObject.hasWarning === true) { return }
        if (thisObject.hasInfo !== true) { return }
-        drawMessage(infoMessage, UI_COLOR.TURQUOISE)
-    }

-    function drawMessage(message, textColor) {
-
-        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
-            return
-        }
-        if (thisObject.codeEditor !== undefined && thisObject.codeEditor.visible === true) { return }
-        if (thisObject.formulaEditor !== undefined && thisObject.formulaEditor.visible === true) { return }
-        if (thisObject.confitionEditor !== undefined && thisObject.confitionEditor.visible === true) { return }
-        if (thisObject.configEditor !== undefined && thisObject.configEditor.visible === true) { return }
-
-        /* Text Follows */
-        let position = {
-            x: 0,
-            y: 0
-        }
-
-        position = thisObject.container.frame.frameThisPoint(position)
-
-        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
-            position = UI.projects.superalgos.spaces.floatingSpace.transformPointToMap(position)
-        }
-
-        let radius = thisObject.payload.floatingObject.container.frame.radius
-        /* Label Text */
-        let labelPoint
-        let fontSize = thisObject.payload.floatingObject.currentFontSize * 3 / 4
-        let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
-        let label
-
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-        if (radius > 6) {
-            const IDEAL_LABEL_LENGTH = 80
-
-            label = message
-
-            if (label !== undefined && label !== null) {
-                if (label.length > IDEAL_LABEL_LENGTH) {
-                    if (label.length > IDEAL_LABEL_LENGTH * 3) {
-                        label = label.substring(0, IDEAL_LABEL_LENGTH * 3) + '...'
-                    }
-                    fontSize = thisObject.payload.floatingObject.currentFontSize * 2 / 4
-                }
-
-                if (thisObject.isOnFocus === true) {
-                    /* Split the line into Phrases */
-                    let phrases = splitTextIntoPhrases(label, 5)
-
-                    for (let i = 0; i < phrases.length; i++) {
-                        let phrase = phrases[i]
-                        labelPoint = {
-                            x: position.x - getTextWidth(phrase) / 2,
-                            y: position.y + lineSeparator * (6 - phrases.length + 1 + i) + 30
-                        }
-                        printMessage(phrase)
-                    }
-                } else {
-                    if (label.length < 50) {
-                        labelPoint = {
-                            x: position.x - getTextWidth(label) / 2,
-                            y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 6
-                        }
-                        printMessage(label)
-                    }
-                }
-
-                function printMessage(text) {
-                    browserCanvasContext.fillStyle = 'rgba(' + textColor + ', 1)'
-                    browserCanvasContext.fillText(text, labelPoint.x, labelPoint.y)
-                }
-            }
-        }
+        thisObject.uiObjectMessage.text = infoMessage
+        thisObject.uiObjectMessage.type = 'Info'
+        thisObject.uiObjectMessage.docs = infoDocs
    }

    function drawValue() {
@@ -0,0 +1,203 @@
+
+function newUiObjectMessage() {
+    const MODULE_NAME = 'UI Object Message'
+
+    let thisObject = {
+        fitFunction: undefined,
+        isVisibleFunction: undefined,
+        allwaysVisible: undefined,
+        container: undefined,
+        payload: undefined,
+        type: undefined,
+        text: undefined,
+        docs: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
+    }
+
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.radius = 0
+
+    let selfMouseClickEventSubscriptionId
+
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.isVisibleFunction = undefined
+        thisObject.fitFunction = undefined
+        thisObject.type = undefined
+        thisObject.text = undefined
+        thisObject.docs = undefined
+    }
+
+    function initialize(payload) {
+        thisObject.payload = payload
+
+        selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    }
+
+    function getContainer(point) {
+        if (thisObject.text === undefined) { return }
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function physics() {
+        if (thisObject.text === undefined) { return }
+
+        /* Here we set the dimensions and position of this object */
+        const FRAME_HEIGHT = 120
+        const FRAME_WIDTH = 350
+
+        thisObject.container.frame.position.x = - FRAME_WIDTH / 2
+        thisObject.container.frame.position.y = + 160
+
+        thisObject.container.frame.width = FRAME_WIDTH
+        thisObject.container.frame.height = FRAME_HEIGHT
+    }
+
+    function onMouseClick(event) {
+        if (thisObject.text === undefined) { return }
+        let checkPoint = {
+            x: 0,
+            y: 0
+        }
+        checkPoint = thisObject.container.frame.frameThisPoint(checkPoint)
+
+        if (thisObject.isVisibleFunction(checkPoint) === true) {
+            if (thisObject.docs !== undefined) {
+
+                if (UI.projects.superalgos.spaces.docsSpace.sidePanelTab.isOpen === true) {
+                    UI.projects.superalgos.spaces.docsSpace.sidePanelTab.close()
+                } else {
+                    UI.projects.superalgos.spaces.docsSpace.openSpaceAreaAndNavigateTo(
+                        thisObject.docs.project,
+                        thisObject.docs.category,
+                        thisObject.docs.type,
+                        thisObject.docs.anchor
+                    )
+                }
+            }
+        }
+    }
+
+    function draw() {
+        if (thisObject.text === undefined) { return }
+        if (thisObject.payload.floatingObject.isOnFocus !== true) { return }
+
+        switch (thisObject.type) {
+            case 'Info': {
+                drawMessageBackground(UI_COLOR.TURQUOISE)
+                drawMessage(thisObject.text, UI_COLOR.TURQUOISE)
+                break
+            }
+            case 'Warning': {
+                drawMessageBackground(UI_COLOR.TITANIUM_YELLOW)
+                drawMessage(thisObject.text, UI_COLOR.TITANIUM_YELLOW)
+                break
+            }
+            case 'Error': {
+                drawMessageBackground(UI_COLOR.RUSTED_RED)
+                drawMessage(thisObject.text, UI_COLOR.RUSTED_RED)
+                break
+            }
+        }
+    }
+
+    function drawMessageBackground(borderColor) {
+        if (thisObject.text === undefined) { return }
+
+        let params = {
+            cornerRadius: 5,
+            lineWidth: 0.5,
+            container: thisObject.container,
+            borderColor: borderColor,
+            backgroundColor: UI.projects.superalgos.spaces.floatingSpace.style.backgroundColor,
+            castShadow: false,
+            opacity: 0.75
+        }
+
+        UI.projects.superalgos.utilities.drawPrint.roundedCornersBackground(params)
+
+    }
+
+    function drawMessage(message, textColor) {
+
+        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
+            return
+        }
+
+        /* Text Follows */
+        let position = {
+            x: 0,
+            y: 0
+        }
+
+        position = thisObject.container.frame.frameThisPoint(position)
+
+        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
+            position = UI.projects.superalgos.spaces.floatingSpace.transformPointToMap(position)
+        }
+
+        let radius = thisObject.payload.floatingObject.container.frame.radius
+        /* Label Text */
+        let labelPoint
+        let fontSize = 20
+        let lineSeparator = 25
+        let label
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+        if (radius > 6) {
+            const IDEAL_LABEL_LENGTH = 80
+
+            label = message
+
+            if (label !== undefined && label !== null) {
+                if (label.length > IDEAL_LABEL_LENGTH) {
+                    if (label.length > IDEAL_LABEL_LENGTH * 3) {
+                        label = label.substring(0, IDEAL_LABEL_LENGTH * 3) + '...'
+                    }
+                }
+
+                /* Split the line into Phrases */
+                let phrases = splitTextIntoPhrases(label, 5)
+                if (phrases.length === 1) {
+                    phrases.push("")
+                }
+                if (phrases.length === 2) {
+                    phrases.push("")
+                }
+
+                for (let i = 0; i < phrases.length; i++) {
+                    let phrase = phrases[i]
+                    labelPoint = {
+                        x: position.x - getTextWidth(phrase) / 2 + thisObject.container.frame.width / 2,
+                        y: position.y + lineSeparator * (4 - phrases.length + 1 + i)
+                    }
+                    printMessage(phrase)
+                }
+
+                function printMessage(text) {
+                    browserCanvasContext.fillStyle = 'rgba(' + textColor + ', 1)'
+                    browserCanvasContext.fillText(text, labelPoint.x, labelPoint.y)
+                }
+            }
+        }
+    }
+}
+
@@ -1,10 +1,6 @@

 function newUiObjectTitle() {
    const MODULE_NAME = 'UI Object Title'
-    const ERROR_LOG = true
-
-    const logger = newWebDebugLog()
-    

    let thisObject = {
        fitFunction: undefined,
@@ -4,6 +4,8 @@ function newSidePanelTab() {
        screenside: undefined,
        pointerDirection: undefined,
        container: undefined,
+        isOpen: false,
+        isClosed: true,
        index: 0,
        open: open,
        close: close,
@@ -136,6 +138,8 @@ function newSidePanelTab() {
    function animate() {

        if (animation === 'opening') {
+            thisObject.isOpen = false
+            thisObject.isClosed = false
            xOffset = xOffset + ANIMATION_STEP
            switch (thisObject.screenside) {
                case 'left': {
@@ -155,6 +159,8 @@ function newSidePanelTab() {
        }

        if (animation === 'closing') {
+            thisObject.isOpen = false
+            thisObject.isClosed = false
            xOffset = xOffset - ANIMATION_STEP
            switch (thisObject.screenside) {
                case 'left': {
@@ -175,6 +181,7 @@ function newSidePanelTab() {
    }

    function setOpened() {
+        thisObject.isOpen = true
        animation = 'none'
        xOffset = thisObject.container.parentContainer.frame.width
        thisObject.container.parentContainer.status = 'visible'
@@ -192,6 +199,7 @@ function newSidePanelTab() {
        }
    }
    function setClosed() {
+        thisObject.isClosed = true
        animation = 'none'
        xOffset = 0
        thisObject.container.parentContainer.status = 'hidden'
@@ -654,21 +654,21 @@ function newSuperalgosUtilitiesDocs() {
                for (let p = 0; p < PROJECTS_ARRAY.length; p++) {
                    let project = PROJECTS_ARRAY[p]

-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsNodeSchema)
-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsConceptSchema)
-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsTopicSchema)
-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsTutorialSchema)
-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsReviewSchema)
-                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsBookSchema)
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsNodeSchema, 'Node')
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsConceptSchema, 'Concept')
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsTopicSchema, 'Topic')
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsTutorialSchema, 'Tutorial')
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsReviewSchema, 'Review')
+                    searchInSchema(SCHEMAS_BY_PROJECT.get(project).map.docsBookSchema, 'Book')

-                    function searchInSchema(docSchema) {
+                    function searchInSchema(docSchema, category) {
                        if (found === true) { return }

                        if (docSchema.get(cleanPhrases[j]) !== undefined) {
                            if (cleanPhrases[j] !== excludedType) {
                                taggedText = taggedText + phrases[j].replace(
                                    cleanPhrases[j],
-                                    TAGGING_STRING_SEPARATOR + 'Node' + '|' + cleanPhrases[j] + '|' + project + TAGGING_STRING_SEPARATOR) + ' '
+                                    TAGGING_STRING_SEPARATOR + category + '|' + cleanPhrases[j] + '|' + project + TAGGING_STRING_SEPARATOR) + ' '
                            } else {
                                taggedText = taggedText + phrases[j] + ' '
                            }
@@ -147,7 +147,7 @@ function newCanvas() {
                        projectInstance.functionLibraries[functionLibraryDefinition.propertyName] = eval(functionLibraryDefinition.functionName + '()')
                    }
                }
-                
+
                /* Space Instantiation */
                if (projectDefinition.UI.spaces === undefined) { continue }
                for (let j = 0; j < projectDefinition.UI.spaces.length; j++) {
@@ -372,7 +372,9 @@ function newCanvas() {
             We will fordward the event to whoever is 
             controlling the editor.
            */
-            window.editorController.onKeyDown(event)
+            if (window.editorController !== undefined) {
+                window.editorController.onKeyDown(event)
+            }
            return
        }
        /* When the Docs is Visible, we do not process key down events of the Designer Space. */
@@ -6,7 +6,7 @@ function newEventsServerClient(networkNode) {
    const ERROR_LOG = true
    const INFO_LOG = true
    const logger = newWebDebugLog()
-    
+

    let WEB_SOCKETS_CONNECTION

@@ -27,7 +27,7 @@ function newEventsServerClient(networkNode) {
    let commandsWaitingConfirmation = new Map()
    let commandsSentByTimestamp = new Map()
    let nonce = 0
-    let lastTryToReconnectDatetime 
+    let lastTryToReconnectDatetime

    return thisObject

@@ -54,7 +54,7 @@ function newEventsServerClient(networkNode) {
        if (WEB_SOCKETS_CONNECTION !== undefined) {
            if (WEB_SOCKETS_CONNECTION.readyState === 1) {
                return true
-            }  
+            }
        }
    }

@@ -76,7 +76,7 @@ function newEventsServerClient(networkNode) {
    }

    function sendToWebSocketServer(command) {
-        if (commandsWaitingConfirmation === undefined) {return} // object already finalized
+        if (commandsWaitingConfirmation === undefined) { return } // object already finalized

        nonce++
        let stringNonce = nonce.toString()
@@ -162,7 +162,7 @@ function newEventsServerClient(networkNode) {

    function physics() {
        if (WEB_SOCKETS_CONNECTION !== undefined) {
-            if (WEB_SOCKETS_CONNECTION.readyState === 3) { 
+            if (WEB_SOCKETS_CONNECTION.readyState === 3) {
                /*
                Connection closed. May happen after computer goes to sleep.
                We will try to reconnect, but we will do it no more that once 
@@ -177,7 +177,7 @@ function newEventsServerClient(networkNode) {
                        setuptWebSockets(onOpen)
                    }
                }
-                
+
                function onOpen() {
                    if (INFO_LOG === true) { logger.write('[INFO] setuptWebSockets -> Found Web Sockets Connection Closed. Reconnected to WebSockets Server.') }
                }
@@ -190,8 +190,8 @@ function newEventsServerClient(networkNode) {
            setuptWebSockets(onOpen)
        }

-        if (thisObject.isConnected() !== true ) {
-            if ( lastTryToReconnectDatetime !== undefined) {
+        if (thisObject.isConnected() !== true) {
+            if (lastTryToReconnectDatetime !== undefined) {
                if (networkNode !== undefined) {
                    if (networkNode.payload !== undefined) {
                        if (networkNode.payload.uiObject !== undefined) {
@@ -206,8 +206,8 @@ function newEventsServerClient(networkNode) {
                    if (networkNode.payload.uiObject !== undefined) {
                        networkNode.payload.uiObject.setStatus('Connected to Superalgos Client via WebSockets.')
                        retryCommandsPhysics()
-                    }   
-                }   
+                    }
+                }
            }
        }

@@ -225,19 +225,46 @@ function newEventsServerClient(networkNode) {
                port = config.webSocketsPort

                /* Check if we really have to stablish the connection. */
-                if (config.autoConnect === false) {return}
+                if (config.autoConnect === false) { return }
            } catch (err) {
-                networkNode.payload.uiObject.setErrorMessage('Bad configuration. Cannot know the host name or the webSocketsPort.')
+                networkNode.payload.uiObject.setErrorMessage(
+                    'Bad configuration. Invalid JSON Format.',
+                    undefined,
+                    {
+                        project: 'Superalgos',
+                        category: 'Topic',
+                        type: 'UI Websockets Error - Bad Configuration',
+                        anchor: 'Invalid JSON Format'
+                    }
+                )
                return
            }

            if (host === undefined) {
-                networkNode.payload.uiObject.setErrorMessage('Bad configuration. You need to have a host property.')
+                networkNode.payload.uiObject.setErrorMessage(
+                    'Bad configuration. Host Property Not Found.',
+                    undefined,
+                    {
+                        project: 'Superalgos',
+                        category: 'Topic',
+                        type: 'UI Websockets Error - Bad Configuration',
+                        anchor: 'Host Property Not Found'
+                    }
+                )
                return
            }

            if (port === undefined) {
-                networkNode.payload.uiObject.setErrorMessage('Bad configuration. You need to have a webSocketsPort property.')
+                networkNode.payload.uiObject.setErrorMessage(
+                    'Bad configuration. WebSocketsPort Property Not Found.',
+                    undefined,
+                    {
+                        project: 'Superalgos',
+                        category: 'Topic',
+                        type: 'UI Websockets Error - Bad Configuration',
+                        anchor: 'WebSocketsPort Property Not Found'
+                    }
+                )
                return
            }