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

machine.js

const FILTER_TYPE_ERROR_STATES = {
  type: "parallel",
  states: {
    FILTER_TYPE_SVALUE: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_TYPE_SVALUE: "ON"
          }
        },
        ON: {
          on: {
            CLICK_TYPE_SVALUE: "OFF"
          }
        }
      }
    },
  }
}

const FILTER_TYPE_WARNING_STATES = {
  id: "filter-type-warning-states",
  type: "parallel",
  states: {
    FILTER_TYPE_TRESHOLD: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_TYPE_TRESHOLD: "ON"
          }
        },
        ON: {
          on: {
            CLICK_TYPE_TRESHOLD: "OFF"
          }
        }
      }
    },
  }
}

const FILTER_STATES = {
  id: "filter-states",
  type: "parallel",
  states: {
    FILTER_LEVEL_WARNING: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_LEVEL_WARNING: "ON"
          },
          ...FILTER_TYPE_WARNING_STATES
        },
        ON: {
          on: {
            CLICK_LEVEL_WARNING: "OFF"
          }
        }
      }
    },
    FILTER_LEVEL_ERROR: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_LEVEL_ERROR: "ON",
          },
          ...FILTER_TYPE_ERROR_STATES
        },
        ON: {
          on: {
            CLICK_LEVEL_ERROR: "OFF"
          }
        }
      }
    },
    FILTER_ASSEMBLY_TYPE_SMD: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_ASSEMBLY_TYPE_SMD: "ON"
          }
        },
        ON: {
          on: {
            CLICK_ASSEMBLY_TYPE_SMD: "OFF"
          }
        }
      }
    },
    FILTER_ASSEMBLY_TYPE_THT: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_ASSEMBLTY_TYPE_THT: "ON"
          }
        },
        ON: {
          on: {
            CLICK_ASSEMBLTY_TYPE_THT: "OFF"
          }
        }
      }
    },
    FILTER_ASSEMBLY_TYPE_MECH: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_ASSEMBLTY_TYPE_MECH: "ON"
          }
        },
        ON: {
          on: {
            CLICK_ASSEMBLTY_TYPE_MECH: "OFF"
          }
        }
      }
    }
  }
}

const TABLE_STATES = {
  type: "parallel",
  states: {
    SORT_LEVEL: {
      initial: "STATE_LEVEL_UNSORTED",
      states: {
        STATE_LEVEL_UNSORTED: {
          on: {
            "CLICK_LEVEL": "STATE_LEVEL_ASC"
          }
        },
        STATE_LEVEL_ASC: {
          on: {
            "CLICK_LEVEL": "STATE_LEVEL_DESC",
          }
        },
        STATE_LEVEL_DESC: {
          on: {
            "CLICK_LEVEL": "STATE_LEVEL_UNSORTED"
          }
        }
      }
    },
    SORT_TYPE: {
      initial: "STATE_TYPE_UNSORTED",
      states: {
        STATE_TYPE_UNSORTED: {
          on: {
            CLICK_TYPE: "STATE_TYPE_ASC"
          }
        },
        STATE_TYPE_ASC: {
          on: {
            CLICK_TYPE: "STATE_TYPE_DESC",
          }
        },
        STATE_TYPE_DESC: {
          on: {
            CLICK_TYPE: "STATE_TYPE_UNSORTED"
          }
        }
      }
    },
    SORT_ASSEMBLY_TYPE: {
      initial: "STATE_ASSEMBLY_TYPE_UNSORTED",
      states: {
        STATE_ASSEMBLY_TYPE_UNSORTED: {
          on: {
            CLICK_ASSEMBLY_TYPE: "STATE_ASSEMBLY_TYPE_ASC"
          }
        },
        STATE_ASSEMBLY_TYPE_ASC: {
          on: {
            CLICK_ASSEMBLY_TYPE: "STATE_ASSEMBLY_TYPE_DESC"
          }
        },
        STATE_ASSEMBLY_TYPE_DESC: {
          on: {
            CLICK_ASSEMBLY_TYPE: "STATE_ASSEMBLY_TYPE_UNSORTED"
          }
        }
      }
    },
    SORT_LINE: {
      initial: "STATE_LINE_UNSORTED",
      states: {
        STATE_LINE_UNSORTED: {
          on: {
            CLICK_LINE: "STATE_LINE_ASC"
          }
        },
        STATE_LINE_ASC: {
          on: {
            CLICK_LINE: "STATE_LINE_DESC"
          }
        },
        STATE_LINE_DESC: {
          on: {
            CLICK_LINE: "STATE_LINE_UNSORTED"
          }
        }
      }
    },
    SORT_MESSAGE: {
      initial: "STATE_MESSAGE_UNSORTED",
      states: {
        STATE_MESSAGE_UNSORTED: {
          on: {
            CLICK_MESSAGE: "STATE_MESSAGE_ASC"
          }
        },
        STATE_MESSAGE_ASC: {
          on: {
            CLICK_MESSAGE: "STATE_MESSAGE_DESC"
          }
        },
        STATE_MESSAGE_DESC: {
          on: {
            CLICK_MESSAGE: "STATE_MESSAGE_UNSORTED"
          }
        }
      }
    },
    FILTER_MENU_STATE: {
      initial: "CLOSED",
      states: {
        CLOSED: {
          on: {
            CLICK_FILTER_MENU: "OPEN"
          }
        },
        OPEN: {
          on: {
            CLICK_FILTER_MENU: "CLOSED"
          },
          ...FILTER_STATES
        }
      }
    }
  }
}

 const tableMachine = Machine({
  id: 'table-machine',
  initial: "NO_DATA",
  states: {
    NO_DATA: {
      on: {
        SUCCESS: "HAS_DATA"
      }
    },
    HAS_DATA: {
      ...TABLE_STATES
    }
  }
});