Superalgos/Dashboard.js

 
let canvas
let markets
let ecosystem = newEcosystem()
let cloudVM = newCloudVM()
let INITIAL_ZOOM_LEVEL = -26       // This is the zoom level at the view port in which the APP starts.
let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
let viewPort = newViewPort()

function newDashboard () {
  const MODULE_NAME = 'Dashboard'
  const INFO_LOG = false
  const ERROR_LOG = true
  const INTENSIVE_LOG = false
  const logger = newWebDebugLog()
  logger.fileName = MODULE_NAME

  let thisObject = {
    start: start
  }

  const DEBUG_START_UP_DELAY = 0 // 3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time.

  return thisObject

  function start () {
    try {
      if (INFO_LOG === true) { logger.write('[INFO] start -> Entering function.') }

            /* Here we will setup the global eventHandler that will enable the Canvas App to react to events happening outside its execution scope. */

      window.canvasApp.eventHandler = newEventHandler()
      window.canvasApp.eventHandler.listenToEvent('User Profile Changed', userProfileChanged)
      window.canvasApp.eventHandler.listenToEvent('Browser Resized', browserResized)

      loadImages(onImagesLoaded)

      function onImagesLoaded () {
        if (INFO_LOG === true) { logger.write('[INFO] start -> onImagesLoaded -> Entering function.') }

                /* Next we start the App */

        setTimeout(delayedStart, DEBUG_START_UP_DELAY)
      }
    } catch (err) {
      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err) }
    }
  }

  function delayedStart () {
    try {
      if (INFO_LOG === true) { logger.write('[INFO] delayedStart -> Entering function.') }

            /* For now, we are supporting only one market. */

      let market = {
        id: 2,
        assetA: 'USDT',
        assetB: 'BTC'
      }

      markets = new Map()

      markets.set(market.id, market)

      canvas = newCanvas()
      canvas.initialize()
    } catch (err) {
      if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err) }
    }
  }

  function userProfileChanged () {
    try {
      if (INFO_LOG === true) { logger.write('[INFO] userProfileChanged -> Entering function.') }

      canvas.topSpace.initialize()
    } catch (err) {
      if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err) }
    }
  }

  function browserResized () {
    try {
      if (INFO_LOG === true) { logger.write('[INFO] browserResized -> Entering function.') }

      browserCanvas = document.getElementById('canvas')

      browserCanvas.width = window.innerWidth
      browserCanvas.height = window.innerHeight - window.canvasApp.topMargin

      viewPort.initialize()
    } catch (err) {
      if (ERROR_LOG === true) { logger.write('[ERROR] browserResized -> err = ' + err) }
    }
  }

  function loadImages (callBack) {
    try {
      if (INFO_LOG === true) { logger.write('[INFO] loadImages -> Entering function.') }

      const accessToken = ''

            /*
            Soon, we will need to get images from the Financial Beings Module. I live this core here as a sample for that:

            const apolloClient = new Apollo.lib.ApolloClient({
                networkInterface: Apollo.lib.createNetworkInterface({
                    uri: window.canvasApp.graphQL.masterAppApiUrl,
                    transportBatching: true,
                }),
                connectToDevTools: true,
            })

            const QUERY = Apollo.gql`
            query($authId: String){
                users_UserByAuthId (authId: $authId){
                    id
                    referrerId
                    alias
                    firstName
                    middleName
                    lastName
                    bio
                    email
                    emailVerified
                    isDeveloper
                    isDataAnalyst
                    isTrader
                    avatarHandle
                    avatarChangeDate
                    sessionToken
                    role {
                    id
                    }
                }
            }
            `
            const getUser = () => {
                return new Promise((resolve, reject) => {
                    apolloClient.query({
                        query: QUERY,
                        variables: {
                            authId: authId
                        }
                    })
                        .then(response => {
                            sessionToken = response.data.users_UserByAuthId.sessionToken;

                            window.localStorage.setItem('loggedInUser', JSON.stringify(response.data.users_UserByAuthId));
                            resolve({ user: response.data.users_UserByAuthId })
                        })
                        .catch(error => {
                            console.log("apolloClient error getting user query", error)
                            reject(error)
                        });
                });
            }

            */

      const networkInterfaceTeams = Apollo.lib.createNetworkInterface({
        uri: window.canvasApp.graphQL.masterAppApiUrl
      })

      networkInterfaceTeams.use([{
        applyMiddleware (req, next) {
          req.options.headers = {
            authorization: `Bearer ${accessToken}`
          }
          next()
        }
      }])

      const apolloClientTeams = new Apollo.lib.ApolloClient({
        networkInterface: networkInterfaceTeams,
        connectToDevTools: true
      })

      const ALL_TEAMS_QUERY = Apollo.gql`
            {
              teams_Teams{
                edges{
                  node{
                    id
                    name
                    slug
                    profile {
                    avatar
                    banner
                    description
                    motto
                    updatedAt
                    }
                    fb {
                        id
                        name
                        slug
                        avatar
                        kind
                        status {
                            status
                            reason
                            createdAt
                        }
                      }
                  }
                }
              }
            }
        `

      let teams

      const getTeams = () => {
        return new Promise((resolve, reject) => {
          apolloClientTeams.query({
            query: ALL_TEAMS_QUERY
          })
                        .then(response => {
                          teams = response.data.teams_Teams
                          window.localStorage.setItem('Teams', JSON.stringify(response.data.teams_Teams))
                          resolve({ teams: response.data.teams_Teams })
                        })
                        .catch(err => {
                          if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> Error fetching data from Teams Module.') }
                          if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> getTeams -> err = ' + err) }
                          reject(err)
                        })
        })
      }

            // To avoid race conditions, add asynchronous fetches to array
      let fetchDataPromises = []

      fetchDataPromises.push(/* getUser(), */ getTeams())   //   <-- Here we must add the function calll to the Financial Beings module.

            // When all asynchronous fetches resolve, authenticate user or throw error.
      Promise.all(fetchDataPromises).then(result => {
                /* All good, we will go through the results creating a map with all the Images URLs */

        let teamProfileImages = new Map()
        let fbProfileImages = new Map()

        for (let i = 0; i < teams.edges.length; i++) {
          let team = teams.edges[i].node

          teamProfileImages.set(team.slug, team.profile.avatar)

          if (team.fb.length > 0) {
            fbProfileImages.set(team.slug + '-' + team.fb[0].slug, team.fb[0].avatar)
          }
        }

        window.canvasApp.context.teamProfileImages = teamProfileImages
        window.canvasApp.context.fbProfileImages = fbProfileImages

        callBack()
      }, err => {
        if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> Error fetching data from Teams Module.') }
        if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) }
      })
    } catch (err) {
      if (ERROR_LOG === true) { logger.write('[ERROR] loadImages -> err = ' + err) }
    }
  }
}