XState Visualizer overlaps all states on local transitions.

[rkogan]

Bug or feature request?

Bug

Description:

When a local transition is introduced into a statechart, the visualization stacks all states on top of each other.

Example:

{
  "initial": "start",
  "states": {
    "start": {
      "on": {
        "SEARCH": {
          "loading": {}
        }
      }
    },
    "loading": {
      "onEntry": [
        "search"
      ]
    }
  },
  "on": {
    "RESET": "start"
  }
}

Removing the "on": { "RESET": "start" } at the bottom fixes the rendering.

(Bug) Expected result:

Should render correctly. https://musing-rosalind-2ce8e7.netlify.com/?machine=%7B%22initial%22%3A%22start%22%2C%22states%22%3A%7B%22start%22%3A%7B%22on%22%3A%7B%22SEARCH%22%3A%7B%22loading%22%3A%7B%7D%7D%7D%7D%2C%22loading%22%3A%7B%22onEntry%22%3A%5B%22search%22%5D%7D%7D%7D

(Bug) Actual result:

https://musing-rosalind-2ce8e7.netlify.com/?machine=%7B%22initial%22%3A%22start%22%2C%22states%22%3A%7B%22start%22%3A%7B%22on%22%3A%7B%22SEARCH%22%3A%7B%22loading%22%3A%7B%7D%7D%7D%7D%2C%22loading%22%3A%7B%22onEntry%22%3A%5B%22search%22%5D%7D%7D%2C%22on%22%3A%7B%22RESET%22%3A%22start%22%7D%7D

(Bug) Potential fix:

Use the same rendering logic as used without local transition, then apply the local transition rendering.

[davidkpiano]

Unfortunately I don't have much control over the rendering logic (it's in Cytoscape) but I'm working on a 🆕 visualizer that gives you more control over the layout.