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

Contribution: Governance System with User Profiles Table
2021-07-14 15:14:04 -04:00
commit 389847bf2f
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="credits.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="tutorial.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="docs.css" type="text/css" charset="utf-8" />
+    <link rel="stylesheet" href="governance.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="context-menu.css" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="font-awasome.css" type="text/css" />
    <link rel="stylesheet" href="prism.css" type="text/css" />
@@ -115,6 +116,9 @@
    <div id="docs-space-div" class="docs-page" style="position:fixed; top:100000px; left:100000px">
        <div id="docs-content-div"></div>
    </div>
+    <div id="governance-reports-space-div" class="governance-page" style="position:fixed; top:100000px; left:100000px">
+        <div id="governance-content-div"></div>
+    </div>
    <div id="chatApp" style="position:fixed; top:100000px; left:100000px">
        <iframe id="chatIFrame" style="border:none; " height="2000" width="900"></iframe>
    </div>
@@ -1547,6 +1547,12 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                }
                break

+            case 'governance.css':
+                {
+                    sendStyleSheet('governance.css')
+                }
+                break
+
            case 'context-menu.css':
                {
                    sendStyleSheet('context-menu.css')
@@ -171,11 +171,8 @@ function newEducationDocSpace() {
            }

            function setupSidePanelTab() {
-                thisObject.sidePanelTab = newSidePanelTab()
-                thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
-                thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Education', 'docs-tab')
-                thisObject.sidePanelTab.tabLabel = 'Docs'
-                thisObject.sidePanelTab.initialize('right')
+                thisObject.sidePanelTab = UI.projects.foundations.spaces.sideSpace.createSidePanelTab(thisObject.container, 'Education', 'docs-tab', 'Docs', 'right')
+
                openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening)
                closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing)

@@ -437,7 +434,6 @@ function newEducationDocSpace() {
    }

    function physics() {
-        thisObject.sidePanelTab.physics()
        docsAppDivPhysics()

        function docsAppDivPhysics() {
@@ -461,7 +457,6 @@ function newEducationDocSpace() {
        if (CAN_SPACES_DRAW === false) { return }
        if (isInitialized === false) { return }
        borders()
-        thisObject.sidePanelTab.draw()
    }

    function borders() {
@@ -363,7 +363,7 @@ function newEducationTutorialSpace() {
                This forces the tutorial to close the workspaces panel and to keep it closed.
                */
                if (workspacesCounter === 5) {
-                    UI.projects.foundations.spaces.sideSpace.sidePanelTab.close()
+                    UI.projects.foundations.spaces.workspaceSpace.sidePanelTab.close()
                }
                return
            }
@@ -372,7 +372,7 @@ function newEducationTutorialSpace() {
                This forces the tutorial to open the workspaces panel and to keep it closed.
                */
                if (workspacesCounter === 5) {
-                    UI.projects.foundations.spaces.sideSpace.sidePanelTab.open()
+                    UI.projects.foundations.spaces.workspaceSpace.sidePanelTab.open()
                }
                return
            }
@@ -31,10 +31,9 @@ function newFoundationsChatSpace() {
    return thisObject

    function initialize() {
-        
-        thisObject.sidePanelTab = newSidePanelTab()
-        thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
-        thisObject.sidePanelTab.initialize('right', 1)
+        return
+        thisObject.sidePanelTab = UI.projects.foundations.spaces.sideSpace.createSidePanelTab(thisObject.container, 'Education', 'docs-tab', 'Docs', 'right')
+
        openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening)
        closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing)

@@ -89,15 +88,14 @@ function newFoundationsChatSpace() {
                return thisObject.container
            } else {
                UI.projects.foundations.spaces.chartingSpace.viewport.onMouseWheel(event)
-                return 
+                return
            }
        } else {
-            return 
+            return
        }
    }

    function physics() {
-        thisObject.sidePanelTab.physics()
        chatAppDivPhysics()
        iFramePhysics()

@@ -108,18 +106,18 @@ function newFoundationsChatSpace() {
                y: 0
            }
            chatAppDivPosition = thisObject.container.frame.frameThisPoint(chatAppDivPosition)
-            chatAppDiv.style = '   ' + 
-            'position:fixed; top:' + chatAppDivPosition.y + 'px; ' + 
-            'left:' + chatAppDivPosition.x + 'px; z-index:1; ' + 
-            'width: ' + thisObject.container.frame.width + 'px;' +
-            'height: ' + thisObject.container.frame.height + 'px'
+            chatAppDiv.style = '   ' +
+                'position:fixed; top:' + chatAppDivPosition.y + 'px; ' +
+                'left:' + chatAppDivPosition.x + 'px; z-index:1; ' +
+                'width: ' + thisObject.container.frame.width + 'px;' +
+                'height: ' + thisObject.container.frame.height + 'px'
        }

        function iFramePhysics() {
            let docIFrame = document.getElementById('chatIFrame')
-            docIFrame.style = '  ' + 
-            'width: ' + thisObject.container.frame.width + 'px;' +
-            'height: ' + thisObject.container.frame.height + 'px'
+            docIFrame.style = '  ' +
+                'width: ' + thisObject.container.frame.width + 'px;' +
+                'height: ' + thisObject.container.frame.height + 'px'
        }
    }

@@ -127,7 +125,6 @@ function newFoundationsChatSpace() {
        if (CAN_SPACES_DRAW === false) { return }
        if (isInitialized === false) { return }
        borders()
-        thisObject.sidePanelTab.draw()
    }

    function borders() {
@@ -311,7 +311,7 @@ function newWorkspace() {
                    workingAtTask = 0

                    UI.projects.education.spaces.docsSpace.sidePanelTab.close()
-                    UI.projects.foundations.spaces.sideSpace.sidePanelTab.close()
+                    UI.projects.foundations.spaces.workspaceSpace.sidePanelTab.close()
                    UI.projects.foundations.spaces.floatingSpace.inMapMode = true
                    workingAtTask = 2
                    break
@@ -413,6 +413,8 @@ function newWorkspace() {
                        UI.projects.foundations.spaces.floatingSpace.inMapMode = false
                        thisObject.isInitialized = true

+                        UI.projects.governance.spaces.reportsSpace.reset()
+
                        await UI.projects.education.spaces.docsSpace.reset()
                        await UI.projects.education.spaces.tutorialSpace.reset()

@@ -15,7 +15,8 @@ function newSidePanelTab() {
        physics: physics,
        draw: draw,
        getContainer: getContainer,
-        initialize: initialize
+        initialize: initialize,
+        finalize: finalize
    }

    const TAB_WIDTH = 60
@@ -26,6 +27,7 @@ function newSidePanelTab() {
    let animation = 'none'
    let ORIGINAL_PARENT_POSITON
    let xOffset = 0
+    let onMouseClickEventSubscriptionId

    thisObject.container = newContainer()
    thisObject.container.name = MODULE_NAME
@@ -35,6 +37,11 @@ function newSidePanelTab() {

    return thisObject

+    function finalize() {
+        thisObject.pointerDirection = undefined
+        thisObject.container.eventHandler.stopListening(onMouseClickEventSubscriptionId)
+    }
+
    function initialize(screenside, index) {
        thisObject.screenside = screenside
        if (index !== undefined) {
@@ -54,7 +61,7 @@ function newSidePanelTab() {
        thisObject.container.frame.width = TAB_WIDTH
        thisObject.container.frame.height = TAB_HEIGHT

-        thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+        onMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
        resize()
        isInitialized = true
    }
@@ -126,9 +133,7 @@ function newSidePanelTab() {
    }

    function positionPhysics() {
-        if (UI.projects.foundations.spaces.chartingSpace.viewport !== undefined) {
-            thisObject.container.frame.position.y = browserCanvas.height / 2 - TAB_HEIGHT / 2 //  TOP_SPACE_HEIGHT + UI.projects.foundations.spaces.chartingSpace.viewport.marginAmount + TAB_HEIGHT * thisObject.index
-        }
+        thisObject.container.frame.position.y = browserCanvas.height / 2 - TAB_HEIGHT / 2 + (thisObject.index - 1) * TAB_HEIGHT 
    }

    function draw() {
@@ -382,7 +387,7 @@ function newSidePanelTab() {

        labelPosition = thisObject.container.frame.frameThisPoint(labelPosition)

-        browserCanvasContext.font =  12 + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.font = 12 + 'px ' + UI_FONT.PRIMARY
        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', 1)'
        browserCanvasContext.fillText(
            thisObject.tabLabel,
@@ -1,173 +1,129 @@
 function newFoundationsSideSpace() {
-    const MODULE_NAME = 'Side Space'
    let thisObject = {
        sidePanelTab: undefined,
        container: undefined,
+        leftTabs: undefined,
+        rightTabs: undefined,
        physics: physics,
        draw: draw,
+        createSidePanelTab: createSidePanelTab,
+        deleteSidePanelTab: deleteSidePanelTab,
        getContainer: getContainer,
        initialize: initialize,
        finalize: finalize
    }

-    let isInitialized = false
+    let existingTabs = new Map()

-    thisObject.container = newContainer()
-    thisObject.container.name = MODULE_NAME
-    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() {
-        thisObject.sidePanelTab = newSidePanelTab()
-        thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Foundations', 'workspace')
-        thisObject.sidePanelTab.tabLabel = 'Workspaces'
-        thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
-        thisObject.sidePanelTab.initialize('left')
-
-        browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
-
-        initializeListView()
-        isInitialized = true
+        thisObject.leftTabs = []
+        thisObject.rightTabs = []
    }

    function finalize() {
-        canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
-        thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
-        thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
+        thisObject.leftTabs = undefined
+        thisObject.rightTabs = undefined
+        existingTabs = undefined
    }

-    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 createSidePanelTab(container, porject, iconName, label, side) {

-    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
+        let sidePanel

-        if (listView !== undefined) {
-            listView.resize()
+        sidePanel = newSidePanelTab()
+        sidePanel.container.connectToParent(container, false, false)
+        sidePanel.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName(porject, iconName)
+        sidePanel.tabLabel = label
+        sidePanel.initialize(side)
+
+        let key = porject + '-' + iconName + '-' + label + '-' + side
+        if (existingTabs.get(key) !== undefined) { return existingTabs.get(key) }
+
+        switch (side) {
+            case 'left': {
+                thisObject.leftTabs.push(sidePanel)
+                sidePanel.index = thisObject.leftTabs.length
+
+                existingTabs.set(key, sidePanel)
+                break
+            }
+            case 'right': {
+                thisObject.rightTabs.push(sidePanel)
+                sidePanel.index = thisObject.rightTabs.length
+
+                existingTabs.set(key, sidePanel)
+                break
+            }
        }

-        if (thisObject.sidePanelTab !== undefined) {
-            thisObject.sidePanelTab.resize()
+        return sidePanel
+    }
+
+    function deleteSidePanelTab(porject, iconName, label, side) {
+
+        let key = porject + '-' + iconName + '-' + label + '-' + side
+        if (existingTabs.get(key) !== undefined) {
+            let sidePanelTab = existingTabs.get(key)
+
+            switch (side) {
+                case 'left': {
+                    thisObject.leftTabs.splice(sidePanelTab.index - 1, 1)
+                    break
+                }
+                case 'right': {
+                    thisObject.rightTabs.splice(sidePanelTab.index - 1, 1)
+                    break
+                }
+            }
+
+            sidePanelTab.finalize()
+            existingTabs.delete(key)
+
+            /*
+            Reindex Remaining SidTabs
+            */
+            let indexLeft = 1
+            let indexRight = 1
+
+            existingTabs.forEach(reindex)
+
+            function reindex(sideTab, key, map) {
+                switch (sideTab.screenside) {
+                    case 'left': {
+                        sideTab.index = indexLeft
+                        indexLeft++
+                        break
+                    }
+                    case 'right': {
+                        sideTab.index = indexRight
+                        indexRight++
+                        break
+                    }
+                }
+
+            }
        }
    }

    function getContainer(point, purpose) {
-        if (thisObject.sidePanelTab === undefined) { return }
-        let container

-        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) {
-            return thisObject.container
-        } else {
-            return undefined
-        }
    }

    function physics() {
-        thisObject.sidePanelTab.physics()
-        listView.physics()
+        existingTabs.forEach(sideTabPhysics)
+
+        function sideTabPhysics(sideTab, key, map) {
+            sideTab.physics()
+        }
    }

    function draw() {
-        if (CAN_SPACES_DRAW === false) { return }
-        if (isInitialized === false) { return }
-        borders()
-        thisObject.sidePanelTab.draw()
-        listView.draw()
-    }
+        existingTabs.forEach(sideTabDraw)

-    function borders() {
-        let point1
-        let point2
-        let point3
-        let point4
-
-        point1 = {
-            x: 0,
-            y: 0
-        }
-
-        point2 = {
-            x: thisObject.container.frame.width,
-            y: 0
-        }
-
-        point3 = {
-            x: thisObject.container.frame.width,
-            y: thisObject.container.frame.height
-        }
-
-        point4 = {
-            x: 0,
-            y: thisObject.container.frame.height
-        }
-
-        point1 = thisObject.container.frame.frameThisPoint(point1)
-        point2 = thisObject.container.frame.frameThisPoint(point2)
-        point3 = thisObject.container.frame.frameThisPoint(point3)
-        point4 = thisObject.container.frame.frameThisPoint(point4)
-
-        browserCanvasContext.setLineDash([]) // Resets Line Dash
-        browserCanvasContext.beginPath()
-        browserCanvasContext.moveTo(point1.x, point1.y)
-        browserCanvasContext.lineTo(point2.x, point2.y)
-        browserCanvasContext.lineTo(point3.x, point3.y)
-        browserCanvasContext.lineTo(point4.x, point4.y)
-        browserCanvasContext.lineTo(point1.x, point1.y)
-        browserCanvasContext.closePath()
-
-        let opacity = 1
-
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
-        browserCanvasContext.fill()
-
-        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
-        browserCanvasContext.lineWidth = 0.3
-        browserCanvasContext.setLineDash([]) // Resets Line Dash
-        browserCanvasContext.stroke()
-
-        /* Shadow */
-
-        if (thisObject.container.status !== 'hidden') {
-            for (let i = 0; i <= 30; i++) {
-                opacity = 1 - (i / 300) - 0.95
-
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-                browserCanvasContext.beginPath()
-                browserCanvasContext.moveTo(point2.x + i, point2.y)
-                browserCanvasContext.lineTo(point3.x + i, point3.y)
-                browserCanvasContext.closePath()
-
-                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
-                browserCanvasContext.lineWidth = 1
-                browserCanvasContext.setLineDash([]) // Resets Line Dash
-                browserCanvasContext.stroke()
-            }
+        function sideTabDraw(sideTab, key, map) {
+            sideTab.draw()
        }
    }
 }
@@ -0,0 +1,168 @@
+function newFoundationsWorkspaceSpace() {
+    const MODULE_NAME = 'Workspace Space'
+    let thisObject = {
+        sidePanelTab: undefined,
+        container: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    let isInitialized = false
+
+    thisObject.container = newContainer()
+    thisObject.container.name = MODULE_NAME
+    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() {
+
+        thisObject.sidePanelTab = UI.projects.foundations.spaces.sideSpace.createSidePanelTab(thisObject.container, 'Foundations', 'workspace', 'Workspaces', 'left')
+
+        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, purpose) {
+        if (thisObject.sidePanelTab === undefined) { return }
+        let container
+
+        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) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function physics() {
+        listView.physics()
+    }
+
+    function draw() {
+        if (CAN_SPACES_DRAW === false) { return }
+        if (isInitialized === false) { return }
+        borders()
+        listView.draw()
+    }
+
+    function borders() {
+        let point1
+        let point2
+        let point3
+        let point4
+
+        point1 = {
+            x: 0,
+            y: 0
+        }
+
+        point2 = {
+            x: thisObject.container.frame.width,
+            y: 0
+        }
+
+        point3 = {
+            x: thisObject.container.frame.width,
+            y: thisObject.container.frame.height
+        }
+
+        point4 = {
+            x: 0,
+            y: thisObject.container.frame.height
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
+
+        browserCanvasContext.setLineDash([]) // Resets Line Dash
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point4.x, point4.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
+
+        let opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
+        browserCanvasContext.fill()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 0.3
+        browserCanvasContext.setLineDash([]) // Resets Line Dash
+        browserCanvasContext.stroke()
+
+        /* Shadow */
+
+        if (thisObject.container.status !== 'hidden') {
+            for (let i = 0; i <= 30; i++) {
+                opacity = 1 - (i / 300) - 0.95
+
+                browserCanvasContext.setLineDash([]) // Resets Line Dash
+                browserCanvasContext.beginPath()
+                browserCanvasContext.moveTo(point2.x + i, point2.y)
+                browserCanvasContext.lineTo(point3.x + i, point3.y)
+                browserCanvasContext.closePath()
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+                browserCanvasContext.lineWidth = 1
+                browserCanvasContext.setLineDash([]) // Resets Line Dash
+                browserCanvasContext.stroke()
+            }
+        }
+    }
+}
@@ -0,0 +1,6 @@
+function newGovernanceGlobalsReports() {
+    let thisObject = {
+        REPORTS_SPACE_WIDTH: 900
+    }
+    return thisObject
+}
@@ -1,47 +0,0 @@
-function newGobernanceAssetsSpace() {
-    const MODULE_NAME = 'Assets Space'
-
-    let thisObject = {
-        container: undefined,
-        physics: physics,
-        draw: draw,
-        getContainer: getContainer,
-        finalize: finalize,
-        initialize: initialize
-    }
-
-    thisObject.container = newContainer()
-    thisObject.container.initialize(MODULE_NAME)
-    thisObject.container.isDraggeable = false
-
-    return thisObject
-
-    function finalize() {
-        thisObject.container.finalize()
-        thisObject.container = undefined
-    }
-
-    function initialize() {
-
-    }
-
-    function physics() {
-        if (UI.projects.foundations.spaces.designSpace.workspace === undefined) { return }
-    }
-
-    function getContainer(point) {
-
-        return undefined // since this space does not draw anything we return here
-
-        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            thisObject.container.space = MODULE_NAME
-            return thisObject.container
-        } else {
-            return undefined
-        }
-    }
-
-    function draw() {
-
-    }
-}
@@ -0,0 +1,158 @@
+function newGovernanceReportsFooter() {
+    let thisObject = {
+        addFooter: addFooter,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    return thisObject
+
+    function initialize() {
+
+    }
+
+    function finalize() {
+
+    }
+
+    function addFooter() {
+
+        let HTML = ''
+
+        HTML = HTML + '<div id="governance-footer" class="governance-node-html-footer-container">' // Container Starts
+
+        // Buttons Section
+
+        HTML = HTML + '<div class="governance-node-html-footer-table">'
+        HTML = HTML + '<div class="governance-footer-row">'
+
+        HTML = HTML + '<div class="governance-footer-cell style="white-space: nowrap; overflow-x: auto;" >' // white-space: nowrap; overflow-x: auto; prevents line breaks when combined with display: inline-block;" in the child elements
+
+        if (UI.projects.education.spaces.docsSpace.currentDocumentBeingRendered !== undefined) {
+            HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.sharePage()"><button>SHARE</button></span>'
+        }
+        HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.scrollToElement(\'governance-space-div\')"><button>TO TOP</button></span>'
+        if (UI.projects.education.spaces.docsSpace.previousDocumentBeingRendered !== undefined) {
+            HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + UI.projects.education.spaces.docsSpace.previousDocumentBeingRendered.project + '\', \'' + UI.projects.education.spaces.docsSpace.previousDocumentBeingRendered.category + '\', \'' + UI.projects.education.spaces.docsSpace.previousDocumentBeingRendered.type + '\')"><button>BACK</button></span>'
+        }
+        if (UI.projects.education.spaces.docsSpace.currentBookBeingRendered !== undefined) {
+            HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + UI.projects.education.spaces.docsSpace.currentBookBeingRendered.project + '\', \'' + UI.projects.education.spaces.docsSpace.currentBookBeingRendered.category + '\', \'' + UI.projects.education.spaces.docsSpace.currentBookBeingRendered.type + '\')"><button>TO BOOK</button></span>'
+        }
+
+        HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + 'Foundations' + '\', \'' + 'Book' + '\', \'' + 'Reviews' + '\')"><button>REVIEWS</button></span>'
+        HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + 'Foundations' + '\', \'' + 'Book' + '\', \'' + 'Community Data Mines' + '\')"><button>DATA MINES</button></span>'
+        HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + 'Foundations' + '\', \'' + 'Book' + '\', \'' + 'First Steps Tutorials' + '\')"><button>TUTORIALS</button></span>'
+        HTML = HTML + '<span style="float: right; display: inline-block;" onClick="UI.projects.education.spaces.docsSpace.navigateTo(\'' + 'Foundations' + '\', \'' + 'Book' + '\', \'' + 'User Manual' + '\')"><button>USER MANUAL</button></span>'
+
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        // GitHub Section
+
+        HTML = HTML + '<div class="governance-node-html-footer-table">'
+        HTML = HTML + '<div class="governance-footer-row">'
+
+        HTML = HTML + '<div class="governance-footer-cell" style="white-space: nowrap; overflow-x: auto; ">'
+        HTML = HTML + '<h3 style="display: inline-block;">Manage Your Superalgos Setup and Contributions!</h3>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-node-html-footer-table">'
+
+        HTML = HTML + '<div class="governance-footer-row">'
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>About Your Deployment</h4>'
+        HTML = HTML + 'Superalgos may run from different branches in the repository. The <code class="governance-footer-code">Master</code> branch features the stable version, and the <code class="governance-footer-code">Develop</code> branch the version in development. Use the <code class="governance-footer-code">Plugins-Docs</code> branch to contribute plugins and to the Docs.'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>Choose the Current Branch</h4>'
+        HTML = HTML + 'You are currently running on the <code class="governance-footer-code">' + UI.projects.foundations.utilities.gitBranches.getBranchLabel(UI.projects.education.spaces.docsSpace.currentBranch) + '</code> branch. Switch to:'
+        HTML = HTML + '<ul>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeCurrentBranch(\'master\')">Master</a></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeCurrentBranch(\'develop\')">Develop</a></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeCurrentBranch(\'plugins-docs\')">Plugins-Docs</a></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeCurrentBranch(\'next-version\')">Next-Version</a></li>'
+        HTML = HTML + '</ul>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>Contributions Branch</h4>'
+        HTML = HTML + 'You are currently contributing to the <code class="governance-footer-code">' + UI.projects.foundations.utilities.gitBranches.getBranchLabel(UI.projects.education.spaces.docsSpace.contributionsBranch) + '</code> branch. Switch to:'
+        HTML = HTML + '<ul>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeContributionsBranch(\'master\')">Master</code></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeContributionsBranch(\'develop\')">Develop</a></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeContributionsBranch(\'plugins-docs\')">Plugins-Docs</a></li>'
+        HTML = HTML + '<li><a href="#" onClick="UI.projects.education.spaces.docsSpace.changeContributionsBranch(\'next-version\')">Next-Version</a></li>'
+
+        HTML = HTML + '</ul>'
+        HTML = HTML + '</ul>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        // Community Section
+
+        HTML = HTML + '<div class="governance-node-html-footer-table">'
+        HTML = HTML + '<div class="governance-footer-row">'
+        HTML = HTML + '<div class="governance-footer-cell" style="white-space: nowrap; overflow-x: auto; ">'
+        HTML = HTML + '<h3 style="display: inline-block;">Meet the Community and the Team!</h3>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-node-html-footer-table">'
+
+        HTML = HTML + '<div class="governance-footer-row">'
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>Join the Conversation</h4>'
+        HTML = HTML + '<p>We have a new <a href="https://discord.gg/CGeKC6WQQb" target="_blank">Discord Server</a> with multiple channels, or you may join the original individual Telegram groups listed to the right.</p>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>In Telegram</h4>'
+        HTML = HTML + '<ul>'
+        HTML = HTML + '<li><a href="https://t.me/superalgoscommunity" target="_blank">Community Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgossupport" target="_blank">Technical Support Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosdevelop" target="_blank">Developers Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosmachinelearning" target="_blank">Machine Learning Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosdocs" target="_blank">Docs Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosuxui" target="_blank">UX/UI Design Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgoscollaborations" target="_blank">Collaborations Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgoscodebase" target="_blank">Codebase Learning Group</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgos_es" target="_blank">Hablemos en Español!</a></li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgos_ru" target="_blank">Говорим по русски!</a></li>'
+        HTML = HTML + '</ul>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<h4>Other Resources</h4>'
+        HTML = HTML + '<ul>'
+        HTML = HTML + '<li><a href="https://t.me/superalgos" target="_blank">Official Announcements</a></li>'
+        HTML = HTML + '<li><a href="https://superalgos.org" target="_blank">Features and Functionality</a></li>'
+        HTML = HTML + '<li><a href="https://github.com/Superalgos/Superalgos" target="_blank">Main Github Repository</a></li>'
+        HTML = HTML + '<li><a href="https://www.youtube.com/c/superalgos" target="_blank">Subscribe in YouTube</a></li>'
+        HTML = HTML + '<li><a href="https://twitter.com/superalgos" target="_blank">Follow us on Twitter</a></li>'
+        HTML = HTML + '<li><a href="https://www.facebook.com/superalgos" target="_blank">Connect on Facebook</a></li>'
+        HTML = HTML + '<li><a href="https://medium.com/Superalgos/" target="_blank">Read the Blog</a></li>'
+        HTML = HTML + '</ul>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '<div class="governance-footer-row">'
+        HTML = HTML + '<div class="governance-footer-cell">'
+        HTML = HTML + '<img src="Images/superalgos-logo-white.png" width="200 px">'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+
+        HTML = HTML + '</div>' // Container Ends
+
+        return HTML
+    }
+}
@@ -0,0 +1,87 @@
+function newGovernanceReportsReportsPage() {
+    let thisObject = {
+        render: render,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    return thisObject
+
+    function initialize() {
+
+    }
+
+    function finalize() {
+
+    }
+
+    function render() {
+
+        let resultsArary = []
+        let initialTime = new Date()
+        buildHTML()
+
+        function buildHTML() {
+            const tabs = ['Profiles', 'Referrals', 'Mentors', 'Supporters', 'Pools', 'Assets', 'Features', 'Positions']
+            let HTML = ''
+            HTML = HTML + '<section id="governance-report-page-div" class="governance-search-page-container">'
+            HTML = HTML + UI.projects.education.spaces.docsSpace.mainSearchPage.addSearchHeader()
+
+            // Tabs
+            HTML = HTML + '<div class="governance-report-page-header-tabs-container">'
+            let checked = ' checked=""'
+            for (let i = 0; i < tabs.length; i++) {
+                let tab = tabs[i]
+                HTML = HTML + '<input id="tab' + (i + 1) + '" type="radio" name="tabs"' + checked + '><label for="tab' + (i + 1) + '">' + tab + '</label>'
+                checked = ''
+            }
+
+            // Results
+            HTML = HTML + '<div class="governance-search-result-content">'
+
+            let totalResults = new Map()
+            for (let i = 0; i < tabs.length; i++) {
+                let tab = tabs[i]
+                HTML = HTML + '<div id="content' + (i + 1) + '">'
+                HTML = HTML + '<p> ' + tab.toUpperCase() + '_TOTAL_RESULTS results (' + tab.toUpperCase() + '_TOTAL_SECONDS seconds)</p>'
+
+                let resultCounter = 0
+
+                switch (tab) {
+                    case 'Profiles': {
+                        HTML = HTML + UI.projects.governance.spaces.reportsSpace.userProfiles.addHTML()
+                        resultCounter = UI.projects.governance.spaces.reportsSpace.userProfiles.resultCounter
+
+                        break
+                    }
+                }
+                
+                HTML = HTML + '</div>'
+                totalResults.set(tab, resultCounter)
+            }
+
+            // End Content
+            HTML = HTML + '</div>'
+            HTML = HTML + '</div>'
+
+            // End Section
+            HTML = HTML + '</section>'
+
+            // Total Seconds Calculation
+            let finalTime = new Date()
+            let totalSeconds = ((finalTime.valueOf() - initialTime.valueOf()) / 1000).toFixed(3)
+            for (let i = 0; i < tabs.length; i++) {
+                let tab = tabs[i]
+                HTML = HTML.replace(tab.toUpperCase() + '_TOTAL_SECONDS', totalSeconds)
+                let resultCounter = totalResults.get(tab)
+                HTML = HTML.replace(tab.toUpperCase() + '_TOTAL_RESULTS', resultCounter)
+            }
+
+            let docsContentDiv = document.getElementById('governance-content-div')
+            docsContentDiv.innerHTML = HTML + UI.projects.governance.spaces.reportsSpace.footer.addFooter()
+
+            UI.projects.education.spaces.docsSpace.mainSearchPage.detectEnterOnSearchBox()
+            UI.projects.education.spaces.docsSpace.mainSearchPage.setFocusOnSearchBox()
+        }
+    }
+}
@@ -0,0 +1,233 @@
+function newGobernanceReportsSpace() {
+    const MODULE_NAME = 'Reports Space'
+
+    let thisObject = {
+        container: undefined,
+        sidePanelTab: undefined,
+        reportsPage: undefined,
+        footer: undefined,
+        userProfiles: undefined,
+        tablesSortingOrders: undefined,
+        changeTableSortingOrder,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize,
+        reset: reset
+    }
+
+    let browserResizedEventSubscriptionId
+    let openingEventSubscriptionId
+    let closingEventSubscriptionId
+
+    let isInitialized = false
+
+    return thisObject
+
+    function finalize() {
+
+        if (isInitialized === false) { return }
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+
+        canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(closingEventSubscriptionId)
+        thisObject.sidePanelTab = undefined
+
+        UI.projects.foundations.spaces.sideSpace.deleteSidePanelTab('Governance', 'governance-tab', 'Gov', 'right')
+
+        thisObject.reportsPage.finalize()
+        thisObject.reportsPage = undefined
+
+        thisObject.footer.finalize()
+        thisObject.footer = undefined
+
+        thisObject.userProfiles.finalize()
+        thisObject.userProfiles = undefined
+
+        isInitialized = false
+    }
+
+    function initialize() {
+        let resultsArary = UI.projects.foundations.spaces.designSpace.workspace.getHierarchyHeadsByNodeType('User Profile')
+        if (resultsArary.length === 0) { return }
+
+        thisObject.container = newContainer()
+        thisObject.container.name = MODULE_NAME
+        thisObject.container.initialize()
+        thisObject.container.isClickeable = true
+        thisObject.container.isDraggeable = false
+        thisObject.container.detectMouseOver = true
+        thisObject.container.status = 'hidden'
+    
+        resize()
+
+        thisObject.reportsPage = newGovernanceReportsReportsPage()
+        thisObject.footer = newGovernanceReportsFooter()
+        thisObject.userProfiles = newGovernanceReportsUserProfiles()
+
+        thisObject.reportsPage.initialize()
+        thisObject.footer.initialize()
+        thisObject.userProfiles.initialize()
+
+        setupSidePanelTab()
+
+        thisObject.tablesSortingOrders = {}
+
+        isInitialized = true
+
+        function setupSidePanelTab() {
+
+            thisObject.sidePanelTab = UI.projects.foundations.spaces.sideSpace.createSidePanelTab(thisObject.container, 'Governance', 'governance-tab', 'Gov', 'right')
+
+            openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening)
+            closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing)
+
+            browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+        }
+    }
+
+    function reset() {
+        finalize()
+        initialize()
+    }
+
+    function resize() {
+        thisObject.container.frame.width = UI.projects.governance.globals.reports.REPORTS_SPACE_WIDTH
+        thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
+        thisObject.container.frame.position.x = browserCanvas.width
+        thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
+
+        if (thisObject.sidePanelTab !== undefined) {
+            thisObject.sidePanelTab.resize()
+        }
+    }
+
+    function physics() {
+        if (isInitialized === false) { return }
+
+        docsAppDivPhysics()
+
+        function docsAppDivPhysics() {
+            let docsSpaceDiv = document.getElementById('governance-reports-space-div')
+            docsAppDivPosition = {
+                x: 0,
+                y: 0
+            }
+            docsAppDivPosition = thisObject.container.frame.frameThisPoint(docsAppDivPosition)
+            docsSpaceDiv.style = '   ' +
+                'overflow-y: scroll;' +
+                'overflow-x: hidden;' +
+                'position:fixed; top:' + docsAppDivPosition.y + 'px; ' +
+                'left:' + docsAppDivPosition.x + 'px; z-index:1; ' +
+                'width: ' + thisObject.container.frame.width + 'px;' +
+                'height: ' + thisObject.container.frame.height + 'px'
+        }
+    }
+
+    function getContainer(point, purpose) {
+        if (isInitialized === false) { return }
+        if (thisObject.sidePanelTab === undefined) { return }
+        let container
+
+        container = thisObject.sidePanelTab.getContainer(point, purpose)
+        if (container !== undefined) { return container }
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function changeTableSortingOrder(table, property, order) {
+        thisObject.tablesSortingOrders[table].property = property
+        thisObject.tablesSortingOrders[table].order = order
+        thisObject.reportsPage.render()
+    }
+
+    function onOpening() {
+        thisObject.reportsPage.render()
+    }
+
+    function onClosing() {
+
+    }
+
+    function draw() {
+        if (CAN_SPACES_DRAW === false) { return }
+        if (isInitialized === false) { return }
+        borders()
+    }
+
+    function borders() {
+        let point1
+        let point2
+        let point3
+        let point4
+
+        point1 = {
+            x: 0,
+            y: 0
+        }
+
+        point2 = {
+            x: thisObject.container.frame.width,
+            y: 0
+        }
+
+        point3 = {
+            x: thisObject.container.frame.width,
+            y: thisObject.container.frame.height
+        }
+
+        point4 = {
+            x: 0,
+            y: thisObject.container.frame.height
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
+
+        browserCanvasContext.setLineDash([]) // Resets Line Dash
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point4.x, point4.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
+
+        let opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
+        browserCanvasContext.fill()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 0.3
+        browserCanvasContext.stroke()
+
+        /* Shadow */
+
+        if (thisObject.container.status !== 'hidden') {
+            for (let i = 0; i <= 30; i++) {
+                opacity = 1 - (i / 300) - 0.95
+
+                browserCanvasContext.setLineDash([]) // Resets Line Dash
+                browserCanvasContext.beginPath()
+                browserCanvasContext.moveTo(point2.x + i, point2.y)
+                browserCanvasContext.lineTo(point3.x + i, point3.y)
+                browserCanvasContext.closePath()
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+                browserCanvasContext.lineWidth = 1
+                browserCanvasContext.stroke()
+            }
+        }
+    }
+}
@@ -0,0 +1,205 @@
+function newGovernanceReportsUserProfiles() {
+    let thisObject = {
+        resultCounter: undefined,
+        addHTML: addHTML,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    return thisObject
+
+    function initialize() {
+
+    }
+
+    function finalize() {
+
+    }
+
+    function addHTML() {
+
+        thisObject.resultCounter = 0
+        let HTML = ''
+        let tableRecords = []
+        let table = 'userProfiles'
+        let tableRecordDefinition = {
+            "properties": [
+                {
+                    "name": "name",
+                    "label": "Name",
+                    "type": "string",
+                    "order": "ascending"
+                },
+                {
+                    "name": "blockchainPower",
+                    "label": "Blockchain Power",
+                    "type": "number",
+                    "order": "descending"
+                },
+                {
+                    "name": "delegatedPower",
+                    "label": "Delegated Power",
+                    "type": "number",
+                    "order": "descending"
+                },
+                {
+                    "name": "tokenPower",
+                    "label": "Token Power",
+                    "type": "number",
+                    "order": "descending"
+                }
+            ]
+        }
+        /*
+        Here we get from the workspace all the nodes representing User Profiles.
+        */
+        let resultsArary = UI.projects.foundations.spaces.designSpace.workspace.getHierarchyHeadsByNodeType('User Profile')
+        /*
+        Transform the result array into table records.
+        */
+        for (let j = 0; j < resultsArary.length; j++) {
+            let node = resultsArary[j]
+
+            let tableRecord = {
+                "name": node.name,
+                "blockchainPower": node.payload.blockchainTokens | 0,
+                "delegatedPower": node.payload.tokenPower - node.payload.blockchainTokens | 0,
+                "tokenPower": node.payload.tokenPower | 0
+            }
+
+            tableRecords.push(tableRecord)
+        }
+        /*
+        Get the sorting order for this table.
+        */
+        let sortingOrder = UI.projects.governance.spaces.reportsSpace.tablesSortingOrders[table]
+        /*
+        Set the default sorting order for this table.
+        */
+        if (sortingOrder === undefined) {
+            UI.projects.governance.spaces.reportsSpace.tablesSortingOrders[table] = {
+                property: 'name',
+                order: 'ascending'
+            }
+            sortingOrder = UI.projects.governance.spaces.reportsSpace.tablesSortingOrders[table]
+        }
+        /*
+        Get the property type for the current sorting order.
+        */
+        let propertyType
+        for (let i = 0; i < tableRecordDefinition.properties.length; i++) {
+            let property = tableRecordDefinition.properties[i]
+            if (property.name === sortingOrder.property) {
+                propertyType = property.type
+                break
+            }
+        }
+        /*
+        Apply the sorting order for this table.
+        */
+        switch (propertyType) {
+            case 'string': {
+                switch (sortingOrder.order) {
+                    case 'ascending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property].toLowerCase() > b[sortingOrder.property].toLowerCase()) ? 1 : -1)
+                        break
+                    }
+                    case 'descending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property].toLowerCase() > b[sortingOrder.property].toLowerCase()) ? -1 : 1)
+                        break
+                    }
+                }
+                break
+            }
+            case 'number': {
+                switch (sortingOrder.order) {
+                    case 'ascending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property] > b[sortingOrder.property]) ? 1 : -1)
+                        break
+                    }
+                    case 'descending': {
+                        tableRecords.sort((a, b) => (a[sortingOrder.property] > b[sortingOrder.property]) ? -1 : 1)
+                        break
+                    }
+                }
+                break
+            }
+        }
+
+        /*
+        Build the HTML
+        */
+        let odd = false
+        const upArrow = '&uarr;'
+        const downArrow = '&darr;'
+
+        HTML = HTML + '<table class="governance-info-table">'
+        HTML = HTML + '<thead>'
+        HTML = HTML + '<tr>'
+        for (let i = 0; i < tableRecordDefinition.properties.length; i++) {
+            let property = tableRecordDefinition.properties[i]
+            let newOrder
+            let orderArrow
+            /*
+            If the property is the one defining the order, then the new order will be
+            the opossite order.
+            */
+            if (property.name === sortingOrder.property) {
+                if (sortingOrder.order === 'ascending') {
+                    newOrder = 'descending'
+                    orderArrow = upArrow
+                } else {
+                    newOrder = 'ascending'
+                    orderArrow = downArrow
+                }
+            } else {
+                orderArrow = ""
+                /*
+                If the property is not the current defininf the order, then the new order will
+                be the default order for that property.
+                */
+                for (let i = 0; i < tableRecordDefinition.properties.length; i++) {
+                    let propertyDefinition = tableRecordDefinition.properties[i]
+                    if (property.name === propertyDefinition.name) {
+                        newOrder = propertyDefinition.order
+                        break
+                    }
+                }
+            }
+            HTML = HTML + '<th>' + '<a href="#" onClick="UI.projects.governance.spaces.reportsSpace.changeTableSortingOrder(\'' + table + '\',\'' + property.name + '\',\'' + newOrder + '\')">' + property.label + ' ' + orderArrow +'</a>' + '</th>'
+        }
+        HTML = HTML + '</tr>'
+        HTML = HTML + '<thead>'
+        HTML = HTML + '<tbody>'
+
+        for (let j = 0; j < tableRecords.length; j++) {
+            let tableRecord = tableRecords[j]
+
+            if (odd === true) {
+                HTML = HTML + '<tr class="governance-info-table-alt-bg">'
+                odd = false
+            } else {
+                HTML = HTML + '<tr>'
+                odd = true
+            }
+
+            /*
+            Iterate through tableRecord properties.
+            */
+            for (var property in tableRecord) {
+                if (Object.prototype.hasOwnProperty.call(tableRecord, property)) {
+                    HTML = HTML + '<td>' + tableRecord[property] + '</td>'
+                }
+            }
+
+            thisObject.resultCounter++
+
+            HTML = HTML + '</tr>'
+        }
+
+        HTML = HTML + '<tbody>'
+        HTML = HTML + '</table>'
+
+        return HTML
+    }
+}
@@ -228,8 +228,8 @@
                    "initializationIndex": 0,
                    "animationPhysicsIndex": 1,
                    "animationDrawIndex": 0,
-                    "onMouseWheelIndex": 5,
-                    "onMouseOverIndex": 6,
+                    "onMouseWheelIndex": 6,
+                    "onMouseOverIndex": 7,
                    "onMouseClickIndex": 4,
                    "onMouseDownIndex": 6
                },
@@ -253,8 +253,8 @@
                    "initializationIndex": 2,
                    "animationPhysicsIndex": 0,
                    "animationDrawIndex": 5,
-                    "onMouseWheelIndex": 3,
-                    "onMouseOverIndex": 2,
+                    "onMouseWheelIndex": 4,
+                    "onMouseOverIndex": 3,
                    "onMouseClickIndex": 2,
                    "onMouseDownIndex": 3
                },
@@ -267,7 +267,7 @@
                    "animationPhysicsIndex": 3,
                    "animationDrawIndex": 2,
                    "onMouseWheelIndex": 0,
-                    "onMouseOverIndex": 5,
+                    "onMouseOverIndex": 6,
                    "onMouseClickIndex": 0,
                    "onMouseDownIndex": 1
                },
@@ -279,8 +279,8 @@
                    "initializationIndex": 4,
                    "animationPhysicsIndex": 4,
                    "animationDrawIndex": 3,
-                    "onMouseWheelIndex": 2,
-                    "onMouseOverIndex": 3,
+                    "onMouseWheelIndex": 3,
+                    "onMouseOverIndex": 4,
                    "onMouseClickIndex": 3,
                    "onMouseDownIndex": 4
                },
@@ -292,8 +292,8 @@
                    "initializationIndex": 5,
                    "animationPhysicsIndex": 2,
                    "animationDrawIndex": 1,
-                    "onMouseWheelIndex": 4,
-                    "onMouseOverIndex": 4,
+                    "onMouseWheelIndex": 5,
+                    "onMouseOverIndex": 5,
                    "onMouseClickIndex": 5,
                    "onMouseDownIndex": 5
                },
@@ -305,11 +305,24 @@
                    "initializationIndex": 6,
                    "animationPhysicsIndex": 6,
                    "animationDrawIndex": 6,
-                    "onMouseWheelIndex": 1,
-                    "onMouseOverIndex": 2,
+                    "onMouseWheelIndex": 2,
+                    "onMouseOverIndex": 3,
                    "onMouseClickIndex": 6,
                    "onMouseDownIndex": 0
                },
+                {
+                    "name": "Workspace Space",
+                    "folderName": "Workspace-Space",
+                    "propertyName": "workspaceSpace",
+                    "functionName": "newFoundationsWorkspaceSpace",
+                    "initializationIndex": 7,
+                    "animationPhysicsIndex": 7,
+                    "animationDrawIndex": 7,
+                    "onMouseWheelIndex": 1,
+                    "onMouseOverIndex": 2,
+                    "onMouseClickIndex": 7,
+                    "onMouseDownIndex": 0
+                },            
                {
                    "name": "Chat Space",
                    "folderName": "Chat-Space",
@@ -956,7 +969,13 @@
        "name": "Governance",
        "propertyName": "governance",
        "UI": {
-            "globals": [],
+            "globals": [
+                {
+                    "name": "Reports",
+                    "propertyName": "reports",
+                    "functionName": "newGovernanceGlobalsReports"
+                }
+            ],
            "functionLibraries": [
                {
                    "name": "Assets",
@@ -1066,10 +1085,10 @@
                    "onMouseDownIndex": 0
                },
                {
-                    "name": "Assets Space",
-                    "folderName": "Assets-Space",
-                    "propertyName": "assetsSpace",
-                    "functionName": "newGobernanceAssetsSpace",
+                    "name": "Reports Space",
+                    "folderName": "Reports-Space",
+                    "propertyName": "reportsSpace",
+                    "functionName": "newGobernanceReportsSpace",
                    "initializationIndex": 1,
                    "animationPhysicsIndex": 1,
                    "animationDrawIndex": 1,