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

machine.js

const portCallMachine = Machine({
    id: 'port-call',
    initial: 'settled',
    states: {
      hovered: {
        on :{
          MOUSE_LEAVE: 'settled.hist',
          ITEM_SELECTED: 'selected',
          MOUSE_CLICK: 'selected',
        },
      },
      selected: {
        on :{
          MOUSE_CLICK_OUTSIDE: 'settled.hist',
        },
      },
      settled: {
        initial: 'default',
        states: {
          default: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  '': [
                    { target: 'inactive', cond: 'notHitBycurrentRow' },
                    { target: 'active', cond: 'hitBycurrentRow' },
                  ],
                },
              },
              inactive: {},
              active: {},
            },
            on: {
              MOUSE_MOVE: { target: 'default' },
              LIVE_MOVES: { target: 'pending', cond: 'isFirstLiveMoves' },
            },
          },
          pending: {
            on: {
              LIVE_MOVES: [
                { target: 'completed', cond: 'isLastLiveMoves' },
                { target: 'pending' },
              ],
            },
          },
          completed: {},
          hist: {
            type: 'history',
            history: 'deep',
          },
        },
        on: {
          MOUSE_ENTER: 'hovered',
        },
      },
    },
  }, {
    guards: {
      notHitBycurrentRow: () => true,
      hitBycurrentRow: () => true,
      isFirstLiveMoves: () => true,
      isLastLiveMoves: () => true,
    },
  })