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

machine.js

const accordionsMachine = Machine({
  id: "list-element-accordions",
  initial: "closed",
  states: {
    closed: {
      on: {
        OPEN_LIST_ELEMENT: {
          target: "path-accordions",
        },
      },
    },
    "path-accordions": {
      initial: "closed",
      exit: "closePathAccordions",
      states: {
        closed: {
          on: {
            OPEN: {
              target: "one-open",
            },
          },
        },
        "one-open": {
          on: {
            CLOSE: {
              target: "closed",
            },
            OPEN: {
              target: "two-open",
            },
          },
        },
        "two-open": {
          on: {
            CLOSE: {
              target: "one-open",
            },
          },
        },
      },
      on: {
        OPEN_LIST_ELEMENT: {
          target: [
            "two-open",
            "#list-element-accordions.path-accordions.closed",
          ],
        },
        CLOSE_LIST_ELEMENT: {
          target: ["closed", "#list-element-accordions.path-accordions.closed"],
        },
      },
    },
    "two-open": {
      on: {
        CLOSE_LIST_ELEMENT: {
          target: "path-accordions",
        },
      },
    },
  },
})

const dashboardHistoricsMachineConfig = {
  id: "dashboard-historics-machine",
  initial: "map-not-loaded",
  states: {
    "map-empty": {
      invoke: {
        id: "test",
        src: accordionsMachine,
      },
      on: {
        LOAD_PATH_AUTO: {
          target: "#dashboard-historics-machine.path-loaded.path-type.auto",
          actions: XState.send("OPEN_LIST_ELEMENT", { to: "test" }),
        },
        LOAD_PATH_PLANNED: {
          target: "#dashboard-historics-machine.path-loaded.path-type.planned",
        },
        CHANGE_STYLE: {
          actions: "prepareMap",
          target: "#dashboard-historics-machine.map-empty",
        },
      },
    },
    "path-loaded": {
      description:
        "Lines, points, first point, last point are shown on the map",
      type: "parallel",
      states: {
        clustering: {
          initial: "disabled",
          states: {
            disabled: {
              on: {
                CLUSTERING_ON: {
                  target: [
                    "#dashboard-historics-machine.path-loaded.clustering.enabled",
                    "#dashboard-historics-machine.path-loaded.sidebar.closed",
                    "#dashboard-historics-machine.path-loaded.animation-machine.stop",
                  ],
                  actions: ["stopAnimation", "resetHighlightedIndex"],
                },
              },
            },
            enabled: {
              on: {
                CLUSTERING_OFF: {
                  target: [
                    "#dashboard-historics-machine.path-loaded.clustering.disabled",
                    "#dashboard-historics-machine.path-loaded.sidebar.closed",
                    "#dashboard-historics-machine.path-loaded.animation-machine.stop",
                  ],
                  actions: ["stopAnimation", "resetHighlightedIndex"],
                },
              },
            },
          },
        },
        timeline: {
          initial: "entire",
          states: {
            entire: {
              on: {
                SHOW_PARTIAL: {
                  target: [
                    "#dashboard-historics-machine.path-loaded.timeline.partial",
                    "#dashboard-historics-machine.path-loaded.sidebar.closed",
                    "#dashboard-historics-machine.path-loaded.animation-machine.stop",
                  ],
                  actions: [
                    "stopAnimation",
                    "resetHighlightedIndex",
                    "updateRenderedPoints",
                  ],
                },
              },
            },
            partial: {
              on: {
                SHOW_ENTIRE: {
                  target: [
                    "#dashboard-historics-machine.path-loaded.timeline.entire",
                    "#dashboard-historics-machine.path-loaded.sidebar.closed",
                    "#dashboard-historics-machine.path-loaded.animation-machine.stop",
                  ],
                  actions: ["stopAnimation", "resetHighlightedIndex"],
                },
              },
            },
          },
        },
        "path-type": {
          // initial: 'auto',
          states: {
            auto: {},
            planned: {
              on: {
                VIEW_AUTO_PATH: {
                  target:
                    "#dashboard-historics-machine.path-loaded.path-type.planned-and-auto",
                },
              },
            },
            "planned-and-auto": {
              on: {
                HIDE_AUTO_PATH: {
                  target:
                    "#dashboard-historics-machine.path-loaded.path-type.planned",
                },
              },
            },
          },
        },
        sidebar: {
          initial: "closed",
          states: {
            closed: {
              on: {
                OPEN_SIDEBAR: {
                  target: "open",
                },
                PARTIAL_OPEN_SIDEBAR: {
                  target: "partial-open",
                },
              },
            },
            open: {
              on: {
                CLOSE_SIDEBAR: {
                  target: "closed",
                },
              },
            },
            "partial-open": {
              on: {
                CLOSE_SIDEBAR: {
                  target: "closed",
                },
                OPEN_SIDEBAR: {
                  target: "open",
                },
              },
            },
          },
        },
        "animation-machine": {
          initial: "stop",
          states: {
            stop: {
              // entry: ['stopAnimation', 'resetHighlightedIndex']
            },
            animating: {
              initial: "play",
              states: {
                play: {
                  entry: "playAnimation",
                  on: {
                    PAUSE_ANIMATION: {
                      actions: "pauseAnimation",
                      target: "pause",
                    },
                    ANIMATION_COMPLETED: {
                      target: "complete",
                    },
                    FASTFORWARD_ON: {
                      target: "fastforward",
                    },
                    REWIND_ON: {
                      target: "rewind",
                    },
                  },
                },
                pause: {
                  on: {
                    PLAY_ANIMATION: {
                      target: "play",
                    },
                    FASTFORWARD_ON: {
                      target: "fastforward",
                    },
                    REWIND_ON: {
                      target: "rewind",
                    },
                  },
                },
                fastforward: {
                  entry: "playAnimation",
                  exit: "pauseAnimation",
                  on: {
                    FASTFORWARD_OFF: {
                      target: "pause",
                    },
                    ANIMATION_COMPLETED: {
                      target: "complete",
                    },
                  },
                },
                rewind: {
                  entry: "rewindAnimation",
                  exit: "pauseAnimation",
                  on: {
                    REWIND_OFF: {
                      target: "pause",
                    },
                  },
                },
                complete: {
                  on: {
                    PLAY_ANIMATION: {
                      actions: ["resetHighlightedIndex", "setupAnimation"],
                      target: "play",
                    },
                    REWIND_ON: {
                      target: "rewind",
                    },
                  },
                },
              },
              on: {
                STOP_ANIMATION: {
                  actions: ["stopAnimation", "resetHighlightedIndex"],
                  target: "stop",
                },
                UNLOAD_PATH: {
                  actions: "hideHighlighted",
                  target: "#dashboard-historics-machine.map-empty",
                },
              },
            },
          },
        },
      },
      on: {
        PLAY_ANIMATION: {
          actions: "setupAnimation",
          target: [
            "#dashboard-historics-machine.path-loaded.clustering.disabled",
            "#dashboard-historics-machine.path-loaded.timeline.entire",
            "#dashboard-historics-machine.path-loaded.animation-machine.animating.play",
            "#dashboard-historics-machine.path-loaded.sidebar.closed",
          ],
        },
        FASTFORWARD_ON: {
          actions: "setupAnimation",
          target: [
            "#dashboard-historics-machine.path-loaded.clustering.disabled",
            "#dashboard-historics-machine.path-loaded.timeline.entire",
            "#dashboard-historics-machine.path-loaded.animation-machine.animating.fastforward",
            "#dashboard-historics-machine.path-loaded.sidebar.closed",
          ],
        },
        REWIND_ON: {
          actions: "setupAnimation",
          target: [
            "#dashboard-historics-machine.path-loaded.clustering.disabled",
            "#dashboard-historics-machine.path-loaded.timeline.entire",
            "#dashboard-historics-machine.path-loaded.animation-machine.animating.rewind",
            "#dashboard-historics-machine.path-loaded.sidebar.closed",
          ],
        },
        UNLOAD_PATH: {
          target: "#dashboard-historics-machine.map-empty",
        },
        CHANGE_STYLE: {
          actions: ["prepareMap", "restoreMap"],
        },
        UNLOAD_MAP: {
          target: "#dashboard-historics-machine.map-not-loaded",
        },
      },
    },
    "map-not-loaded": {
      on: {
        LOAD_MAP: {
          actions: "loadMap",
          target: "#dashboard-historics-machine.map-empty",
        },
      },
    },
  },
};

const machine = Machine(dashboardHistoricsMachineConfig);