Definition with tooltips working

Client/WebServer/css/docs.css

@@ -6,4 +6,83 @@
     border-color: #1b998b;
     border-radius: 8px;
     background-color: #fdfdfd;
+  }
+
+  .docs-definitionTable {
+    background-color: #f3f3f3;
+    border-top-color: #a6e1ec;
+    padding: 15px;
+    margin: 20px 0;
+    border: solid 0px;
+    vertical-align: middle;
+    min-width: 100px;
+    width: 100%;
+  }
+
+  .docs-image-container {
+    padding: 5px 15px 5px 5px;
+    border: solid 0px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  .docs-font-bold-small {
+    font:bold normal normal 14px/1 "segoeui";
+    font-size:inherit;
+    text-rendering:auto;
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale;
+    line-height: 150%
+  }
+
+  /* Tooltip container */
+  .docs-tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  }
+  
+  /* Tooltip text */
+  .docs-tooltip .docs-tooltiptext {
+    visibility: hidden;
+    width: 240px;
+    background-color: #0295aa;
+    color: #fff;
+    font-weight: normal;
+    font-size: 92%;
+    line-height: 130%;
+    text-align: center;
+    padding: 15px;
+    border-radius: 6px;
+  
+    /* Position the docs-tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -120px;
+     
+  
+    /* Fade in docs-tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  /* Tooltip arrow */
+  .docs-tooltip .docs-tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #0295aa transparent transparent transparent;
+  }
+  
+  /* Show the tooltip text when you mouse over the tooltip container */
+  .docs-tooltip:hover .docs-tooltiptext {
+    visibility: visible;
+    opacity: 1;
   }

Client/WebServer/css/tutorial.css

@@ -242,7 +242,7 @@
   }
   
   /* Tooltip text */
-  .tutorial-tooltip .tooltiptext {
+  .tutorial-tooltip .tutorial-tooltiptext {
     visibility: hidden;
     width: 240px;
     background-color: #0295aa;
@@ -268,7 +268,7 @@
   }
   
   /* Tooltip arrow */
-  .tutorial-tooltip .tooltiptext::after {
+  .tutorial-tooltip .tutorial-tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
@@ -280,7 +280,7 @@
   }
   
   /* Show the tooltip text when you mouse over the tooltip container */
-  .tutorial-tooltip:hover .tooltiptext {
+  .tutorial-tooltip:hover .tutorial-tooltiptext {
     visibility: visible;
     opacity: 1;
   }

Client/WebServer/test.html

@@ -0,0 +1,38 @@
+<table class="docs-definitionTable">
+    <tr>
+        <td>
+            <div id="docsImageDiv" class="docs-image-container" />
+        </td>
+        <td><strong class="docs-font-bold-small">A network node represents a machine running Superalgos within a <div
+                    class="docs-tooltip">Shapes<span class="docs-tooltiptext">The shapes node contains definitions of
+                        polygons and styles to be rendered on a per-period basis over the charts.</span></div>,on which
+                processes run and data is stored. Do not confuse this with a Template XXXStructure which is similar to a
+                XXXTask Manager but it is not one. </strong></td>
+    </tr>
+</table>
+
+
+
+<div>
+    <h2 class="tutorial-font-medium">That's Me On the Right!</h2>
+    <table class="tutorial-definitionTable">
+        <tr>
+            <td>
+                <div id="tutorialImageDiv" class="tutorial-image-container" />
+            </td>
+            <td><strong class="tutorial-font-bold-small">Tutorials are defined within the system, so you may create more
+                    of us if you wish! But we'll discuss that God-like power later on... let's focus on the basics
+                    first!</strong></td>
+        </tr>
+    </table>
+    <div class="tutorial-font-small">Superalgos is inherently a visual tool. The system represents information in
+        hierarchical structures of interconnected nodes, represented by icons. What you see on your right is one of
+        these hierarchies&mdash;in particular, a <div class="tutorial-tooltip">Tutorial<span
+                class="tutorial-tooltiptext">The tutorial hierarchy features a free arrangement of tutorial topic and
+                tutorial step nodes that make up a tutorial. Each node in the hierarchy, including the parent tutorial
+                node, represents a HTML page that is overlaid on top of both the design space and the charting space.
+            </span></div> hierarchy with a label reading <i>Welcome to Superalgos!</i></div>
+    <div class="tutorial-font-bold-small tutorial-callout"> Hover your mouse pointer over the Tutorial node and see what
+        happens!</div>
+    <div class="tutorial-font-small">Wow! Cool right? That's a lot of buttons!</div>
+</div>

Projects/Superalgos/Schemas/DocSchema.json

@@ -754,7 +754,7 @@
     },
     {
         "type": "Network Node",
-        "definition": "A network node represents a machine running Superalgos, on which processes run and data is stored.",
+        "definition": "A network node represents a machine running Superalgos within a Shapes, on which processes run and data is stored. Do not confuse this with a Template Structure which is similar to a Task Manager but it is not one.",
         "content": [
             "By default, processes are set up to run locally in a network node representing your local machine. However, the system is prepared to run distributed on a network of nodes, or what we call a trading farm.",
             "You may create unlimited network nodes and map them with different machines on a network. Each machine in the network runs an instance of the Superalgos backend, and you may control the whole network operation from a single machine, or—in general—from any machine in the network running the Superalgos frontend. To learn more about distributed setups, check the trading farms pages.",

Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js

@@ -57,19 +57,121 @@ function newSuperalgosDocSpace() {
 
     function navigateTo(node) {
 
+        let nodeAppDefinition = SCHEMAS_BY_PROJECT.get(node.project).map.appSchema.get(node.type)
+        let nodeDocsDefinition = SCHEMAS_BY_PROJECT.get(node.project).map.docSchema.get(node.type)
+
+        if (nodeDocsDefinition === undefined) {
+            node.payload.uiObject.setErrorMessage('This node in undefined at the DOC_SCHEMA. ')
+            return
+        }
         buildNodeHtmlPage()
 
         function buildNodeHtmlPage() {
-            let HTML = node.type
+            let HTML = '' 
+            console.log(HTML)
+            //HTML = HTML + '<div><h2 class="tutorial-font-medium">Thats Me On the Right!</h2><table class="tutorial-definitionTable"><tr><td><div id="tutorialImageDiv" class="tutorial-image-container"/></td><td><strong class="tutorial-font-bold-small">Tutorials are defined within the system, so you may create more of us if you wish! But well discuss that God - like power later on...lets focus on the basics first!</strong></td></tr></table><div class="tutorial-font-small">Superalgos is inherently a visual tool. The system represents information in hierarchical structures of interconnected nodes, represented by icons. What you see on your right is one of these hierarchies&mdash;in particular, a <div class="tutorial-tooltip">Tutorial<span class="tutorial-tooltiptext">The tutorial hierarchy features a free arrangement of tutorial topic and tutorial step nodes that make up a tutorial. Each node in the hierarchy, including the parent tutorial node, represents a HTML page that is overlaid on top of both the design space and the charting space. </span></div> hierarchy with a label reading <i>Welcome to Superalgos!</i></div><div class="tutorial-font-bold-small tutorial-callout" > Hover your mouse pointer over the Tutorial node and see what happens!</div><div class="tutorial-font-small">Wow! Cool right? Thats a lot of buttons!</div ></div > '
+            HTML = HTML + '<table class="docs-definitionTable">'
+            HTML = HTML + '<tr>'
+            HTML = HTML + '<td>'
+            HTML = HTML + '<div id="docsImageDiv" class="docs-image-container"/>'
+            HTML = HTML + '</td>'
+            HTML = HTML + '<td>'
+            HTML = HTML + '<strong class="docs-font-bold-small">' + addToolTips(node, nodeDocsDefinition.definition) + '</strong>'
+            HTML = HTML + '</td>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '</table>'
 
             let docsAppDiv = document.getElementById('docsDiv')
             docsAppDiv.innerHTML = HTML
         }
 
-
         thisObject.sidePanelTab.open()
     }
 
+    function addToolTips(node, text) {
+        const TOOL_TIP_HTML = '<div class="docs-tooltip">NODE_TYPE<span class="docs-tooltiptext">NODE_DEFINITION</span></div>'
+        let resultingText = ''
+        text = tagNodeTypes(text, node.project, node.type)
+        let splittedText = text.split('->')
+
+        for (let i = 0; i < splittedText.length; i = i + 2) {
+            let firstPart = splittedText[i]
+            let nodeType = splittedText[i + 1]
+            if (nodeType === undefined) {
+                return resultingText + firstPart
+            }
+            let splittedNodeType = nodeType.split('/')
+            let project
+            let type
+            if (splittedNodeType.length > 1) {
+                project = splittedNodeType[0]
+                type = splittedNodeType[1]
+            } else {
+                project = 'Superalgos'
+                type = splittedNodeType[0]
+            }
+            let definitionNode = SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(type)
+            if (definitionNode === undefined) {
+                definitionNode = SCHEMAS_BY_PROJECT.get(project).map.conceptSchema.get(type)
+                if (definitionNode === undefined) {
+                    node.payload.uiObject.setErrorMessage(type + ' not found at Doc Schema or Concept Schema.')
+                    return
+                }
+            }
+            let definition = definitionNode.definition
+            if (definition === undefined || definition === "") {
+                resultingText = resultingText + firstPart + type
+            } else {
+                let tooltip = TOOL_TIP_HTML.replace('NODE_TYPE', type).replace('NODE_DEFINITION', definition)
+                resultingText = resultingText + firstPart + tooltip
+            }
+        }
+        return resultingText
+    }
+
+    function tagNodeTypes(text, project, excludeNodeType) {
+        let words = text.split(' ')
+        let taggedText = ''
+        for (let i = 0; i < words.length; i++) {
+            let phrase1 = words[i]
+            let phrase2 = words[i] + ' ' + words[i + 1]
+            let phrase3 = words[i] + ' ' + words[i + 1] + ' ' + words[i + 2]
+            let phrase4 = words[i] + ' ' + words[i + 1] + ' ' + words[i + 2] + ' ' + words[i + 3]
+
+            let cleanPhrase1 = cleanPhrase(phrase1)
+            let cleanPhrase2 = cleanPhrase(phrase2)
+            let cleanPhrase3 = cleanPhrase(phrase3)
+            let cleanPhrase4 = cleanPhrase(phrase4)
+
+            if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase4) !== undefined && cleanPhrase4 !== excludeNodeType) {
+                taggedText = taggedText + phrase4.replace(cleanPhrase4, '->' + cleanPhrase4 + '->') + ' '
+                i = i + 3
+                continue
+            }
+            if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase3) !== undefined && cleanPhrase3 !== excludeNodeType) {
+                taggedText = taggedText + phrase3.replace(cleanPhrase3, '->' + cleanPhrase3 + '->') + ' '
+                i = i + 2
+                continue
+            }
+            if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase2) !== undefined && cleanPhrase2 !== excludeNodeType) {
+                taggedText = taggedText + phrase2.replace(cleanPhrase2, '->' + cleanPhrase2 + '->') + ' '
+                i = i + 1
+                continue
+            }
+            if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase1) !== undefined && cleanPhrase1 !== excludeNodeType) {
+                taggedText = taggedText + phrase1.replace(cleanPhrase1, '->' + cleanPhrase1 + '->') + ' '
+                continue
+            }
+
+            taggedText = taggedText + phrase1 + ' '
+
+            function cleanPhrase(phrase) {
+                return phrase.replace(',', '').replace(';', '').replace('(', '').replace(')', '').replace('-', '').replace('_', '')
+            }
+        }
+        return taggedText
+    }
+
     function resize() {
         thisObject.container.frame.width = 1200
         thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT

Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js

@@ -1183,7 +1183,7 @@ function newSuperalgosTutorialSpace() {
         tutorialDiv.innerHTML = html
 
         function addToolTips(text) {
-            const TOOL_TIP_HTML = '<div class="tutorial-tooltip">NODE_TYPE<span class="tooltiptext">NODE_DEFINITION</span></div>'
+            const TOOL_TIP_HTML = '<div class="tutorial-tooltip">NODE_TYPE<span class="tutorial-tooltiptext">NODE_DEFINITION</span></div>'
             let resultingText = ''
             let splittedText = text.split('->')
 

UI/PostLoader.js

@@ -1,147 +0,0 @@
-
-
-function newAppPostLoader() {
-    const MODULE_NAME = 'Post Loader'
-    const ERROR_LOG = true
-    const logger = newWebDebugLog()
-    
-
-    let thisObject = {
-        start: start
-    }
-
-    return thisObject
-
-    function start() {
-        try {
-            /* Moving PROJECTS_ARRAY to the global variable */
-            PROJECTS_ARRAY = window.PROJECTS
-            window.PROJECTS = undefined
-
-            setBrowserEvents()
-            setupProjectsSchema()
-
-            function setupProjectsSchema() {
-                httpRequest(undefined, 'ProjectsSchema', onResponse)
-
-                function onResponse(err, file) {
-                    PROJECTS_SCHEMA = JSON.parse(file)
-                    setupSchemas()
-                }
-            }
-
-            function setupSchemas() {
-
-                let totalWebServerCalls = 0
-                let webServerResponses = 0
-
-                for (let i = 0; i < PROJECTS_ARRAY.length; i++) {
-                    let project = PROJECTS_ARRAY[i]
-                    let schemas = {
-                        array: {
-                            appSchema: [],
-                            docSchema: [],
-                            conceptSchema: []
-                        },
-                        map: {
-                            appSchema: new Map(),
-                            docSchema: new Map(),
-                            conceptSchema: new Map()
-                        }
-                    }
-                    SCHEMAS_BY_PROJECT.set(project, schemas)
-
-                    totalWebServerCalls++
-                    httpRequest(undefined, 'Schema/' + project + '/AppSchema', onResponseAppSchema)
-
-                    function onResponseAppSchema(err, schema) {
-                        try {
-                            schemas.array.appSchema = JSON.parse(schema)
-
-                            for (let j = 0; j < schemas.array.appSchema.length; j++) {
-                                let nodeDefinition = schemas.array.appSchema[j]
-                                let key = nodeDefinition.type
-                                schemas.map.appSchema.set(key, nodeDefinition)
-                            }
-                        } catch (err) {
-                            console.log(err.stack)
-                        }
-
-                        webServerResponses++
-                        if (webServerResponses === totalWebServerCalls) { startCanvas() }
-                    }
-
-                    totalWebServerCalls++
-                    httpRequest(undefined, 'Schema/' + project + '/DocSchema', onResponseDocSchema)
-
-                    function onResponseDocSchema(err, schema) {
-                        try {
-                            schemas.array.docSchema = JSON.parse(schema)
-
-                            for (let j = 0; j < schemas.array.docSchema.length; j++) {
-                                let nodeDefinition = schemas.array.docSchema[j]
-                                let key = nodeDefinition.type
-                                schemas.map.docSchema.set(key, nodeDefinition)
-                            }
-                        } catch (err) {
-                            console.log(err.stack)
-                        }
-
-                        webServerResponses++
-                        if (webServerResponses === totalWebServerCalls) { startCanvas() }
-                    }
-
-                    totalWebServerCalls++
-                    httpRequest(undefined, 'Schema/' + project + '/ConceptSchema', onResponseConceptSchema)
-
-                    function onResponseConceptSchema(err, schema) {
-                        try {
-                            schemas.array.conceptSchema = JSON.parse(schema)
-
-                            for (let j = 0; j < schemas.array.conceptSchema.length; j++) {
-                                let nodeDefinition = schemas.array.conceptSchema[j]
-                                let key = nodeDefinition.type
-                                schemas.map.conceptSchema.set(key, nodeDefinition)
-                            }
-                        } catch (err) {
-                            console.log(err.stack)
-                        }
-
-                        webServerResponses++
-                        if (webServerResponses === totalWebServerCalls) { startCanvas() }
-                    }
-                }
-            }
-
-            function startCanvas() {
-                /* If this method is executed for a second time, it should finalize the current execution structure */
-                if (canvas !== undefined) { canvas.finalize() }
-
-                canvas = newCanvas()
-                canvas.initialize()
-            }
-        } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) }
-        }
-    }
-
-    function setBrowserEvents() {
-        window.onbeforeunload = saveWorkspace
-
-        /* handles backspace and refresh(F5) from keyboard */
-        window.manageBackRefresh = function (event) {
-            var tag = event.target.tagName.toLowerCase()
-            if (event.keyCode === 8 && tag !== 'input' && tag !== 'textarea') { // Backbutton pressed
-                saveWorkspace()
-            } else if (event.keyCode === 116) { // F5 pressed
-                saveWorkspace()
-            }
-        }
-
-        window.addEventListener('keydown', window.manageBackRefresh)
-
-        function saveWorkspace() {
-            UI.projects.superalgos.spaces.designSpace.workspace.save()
-        }
-    }
-}