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

machine.js

const updateMapLayerByKey = (key) => (context, event) => event.key === key ? event.newValue : context[key]

const updateMapLayers = assign({
  geos: updateMapLayerByKey('geos'),
  networkLinks: updateMapLayerByKey('networkLinks'),
  transitStops: updateMapLayerByKey('transitStops'),
  transitRoutes: updateMapLayerByKey('transitRoutes'),
})

const updateThenLoadTransition = {
  on: {
    UPDATE: {
      target: 'loadingData',
      actions: ['updateMapLayers']
    }
  }
}

const getDataFromServer = () => {
  // fetch data here and trigger a RESOLVE or REJECT event on completion
}

const explorerMachine = Machine({
    id: 'explorer',
    initial: 'idle',
    context: {
      geos: [],
      networkLinks: [],
      transitStops: [],
      transitRoutes: [],
    },
    states: {
      idle: {
        on: {
          CLICK_EDIT_GEOS: 'selectingGeos',
          CLICK_EDIT_NETWORK_LINKS: 'selectingNetworkLinks',
          CLICK_EDIT_TRANSIT_STOPS: 'selectingTransitStops',
          CLICK_EDIT_TRANSIT_ROUTES: 'selectingTransitRoutes',
        }
      },
      loadingData: {
        on: {
          RESOLVE: 'idle',
          REJECT: 'error'
        }
      },
      selectingGeos: {
        on: {
          UPDATE: [{
            target: 'loadingData',
            actions: ['updateMapLayers'],
            cond: 'hasGeosSelected'
          }, {
            target: 'error'
          }]
        }
      },
      selectingNetworkLinks: updateThenLoadTransition,
      selectingTransitStops: updateThenLoadTransition,
      selectingTransitRoutes: updateThenLoadTransition,
      error: {
        RESOLVE: 'idle'
      }
    }
  }, {
    actions: {
      updateMapLayers,
      getDataFromServer,
    },
    guards: {
      hasGeosSelected: (context) => context.geos.length
    }
  });