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",
          },
          entry: ["test"],
        },
      },
      actions: {
        test: (context, event) => {
          console.log("SELF", context);
        },
      },
    },
    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_ASSEMBLY_TYPE_THT: "ON",
          },
        },
        ON: {
          on: {
            CLICK_ASSEMBLY_TYPE_THT: "OFF",
          },
        },
      },
    },
    FILTER_ASSEMBLY_TYPE_MECH: {
      initial: "OFF",
      states: {
        OFF: {
          on: {
            CLICK_ASSEMBLY_TYPE_MECH: "ON",
          },
        },
        ON: {
          on: {
            CLICK_ASSEMBLY_TYPE_MECH: "OFF",
          },
        },
      },
    },
  },
  actions: {
    test: (context, event) => {
      console.log("Parent", context);
    },
  },
};

const filterMachine = Machine({
  id: "filter-machine",
  initial: "NO_DATA",
  states: {
    NO_DATA: {
      on: {
        SUCCESS: "HAS_DATA",
      },
    },
    //@ts-ignore
    HAS_DATA: {
      ...FILTER_STATES,
    },
  },
  actions: {
    test: (context, event) => {
      console.log("GrandParent", context);
    },
  },
});