Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  //initial: {
      //editorMode: 'timeline',
      //expanded: true,
      //dataMode: 'grid'
    //},
    
  const opMachine = Machine({
    id: 'opMachine',
    initial: 'start',
    context: {
      isValid: false
    },
    states: {
      start: {
        on: {
          CHECK_VALIDITY: {
            target: 'ready',
            actions: assign({
              isValid: true
            })
          }
        }
      },
      ready: {}
    }
  });
  
  const worksheetMachine = Machine({
    id: 'worksheetMachine',
    type: 'parallel',
    context: {
      ops: [],
      editorMode: {
        mode: 'timeline',
        width: 260
      }
    },
    states: {
      editorMode: {
        initial: 'timeline',
        states: {
          timeline: {
            on: {
              SET_CODE: {
                target: 'code',
                actions: [
                  assign((context, event) => ({
                    editorMode: {
                      mode: 'code',
                      width: context.editorMode.width
                    }
                  })),
                  send('SET_GRID')
                ]
              },
            }
          },
          code: {
            on: {
              UPDATE_CODE_WIDTH: {
                actions: assign((context, event) => {
                  context.editorMode.width = event.value
                })
              },
              SET_TIMELINE: {
                target: 'timeline',
                actions: assign((context, event) => ({
                    editorMode: {
                      mode: 'timeline',
                      width: context.editorMode.width
                    }
                  }))
              }
            }
          }
        }
      },
      timelineMode: {
        initial: 'expanded',
        states: {
          expanded: {
            on: {
              SET_COLLAPSED: 'collapsed'
            }
          },
          collapsed: {
            on: {
              SET_EXPANDED: 'expanded'
            }
          }
        }
      },
      dataMode: {
        initial: 'grid',
        states: {
          grid: {},
          meta: {},
          viz: {}
        },
        on: {
          SET_GRID: { target: '.grid' },
          SET_META: { 
            target: '.meta',
            cond: 'isTimelineMode'
          },
          SET_VIZ: {
            target: '.viz',
            cond: 'isTimelineMode'
          }
        }
      },
      detailsPanel: {
        initial: 'closed',
        states: {
          closed: {
            on: {
              OPEN: 'opened'
            }
          },
          opened: {
            on: {
              CLOSE: 'closed'
            } 
          }
        }
      }
    },
    on: {
      'NEWOP.ADD': {
        actions: [
          assign({
            ops: (ctx, e) => {
              const newOp = {}
              console.log('new op created')
              return ctx.ops.concat({
                ...newOp,
                ref: spawn(opMachine.withContext(newOp))
              })
            }
          })
        ]
      }
    }
  }, {
    guards: {
      isTimelineMode: (context, event) => context.editorMode.mode === 'timeline'
    }
  });
  
  const workbookMachine = Machine({
    id: 'workbookMachine',
    type: 'parallel',
    context: {
      ops: [],
      editorMode: {
        mode: 'timeline',
        width: 260
      }
    },
    states: {}
  })
  
  const routeMachine = Machine({
    id: 'routeMachine',
    context: {
      route: undefined
    },
    states: {
      loading: {
        on: {
          LOADED: 'loaded'
        }
      },
      loaded: {
        on: {
          LOAD: 'loading'
        }
      }
    }
  })
  
  const mix = (...args) => {
    return Object.assign(...args)
  }
  
  const applyStates = (messageMap) => {
    return mix(
      ...Object.keys(messageMap).map(key => ({
        [key]: {
          meta: {
            message: messageMap[key]
          }
        }
    })))
  }
  
  const applyEvents = (messageMap, isParent) => {
    return mix(
      ...Object.keys(messageMap).map(key => ({
        [key]: `${isParent ? '' : '.'}${key}`
    })))
  }
  
  const pollingMessages = {
    'checking_status': 'Connecting to workspace',
    'starting_instances': 'Spinning up a compute instance',
    'starting_environment': 'Starting environment',
    'starting_compute_container': 'Allocating resources',
    'ready': 'Setting up your session'
  }
  
  const finalMessages = {
    'complete': 'Workspace ready',
    'error': 'Error: connecting to workspace failed'
  }
  
  const workspaceMachine = Machine({
    id: 'workspaceMachine',
    initial: 'idle',
    context: {
      pollingInterval: 2000, // load from config
      estimatedTimeRemaining: 0,
      rawEstimatedWaitTime: 0,
      startTime: 0,
      waitTime: 0
    },
    states: {
      idle: {
        on: {
          'POLL': 'polling'
        }
      },
      polling: {
        initial: 'checking_status',
        invoke: {
          src: 'pollStatus'
        },
        states: applyStates(pollingMessages),
        on: mix(applyEvents(pollingMessages), applyEvents(finalMessages, true))
      },
      complete: {
        type: 'final',
        meta: {
          message: finalMessages['complete']
        }
      },
      error: {
        type: 'final',
        meta: {
          message: finalMessages['error']
        }
      }
    }
  },
  {
    services: {
      pollStatus: (context, event) => (callback) => {
        // simulate events
        const events = Object.keys(pollingMessages).concat(['complete'])
        let index = 0
        const interval = setInterval(() => {
          callback(events[index])
          index++
        }, context.pollingInterval)
        return () => clearInterval(interval)
      }
    }
  })
  
  // const appMachine = Machine({
  //   id: 'appMachine',
  //   initial: 'preparing',
  //   states: {
  //     preparing: workspaceMachine,
  //     loaded: routeMachine
  //   }
  // })