Issue with new version

[richtera]

statecharts/xstate-viz#98

Copying the issue here. I am not sure which is the most up to date repo

The current app is not very resilient to states which are too complex and throw an error during JSON serialize. The safe JSON does return a value, but it removes repeated values and ends up removing things the state needs like _event. So once the state has a JSON problem it won't be sent to the visualizer correctly.
The old visualizer has problems with not allowing scrolling inside of the state pane. This can be temporarily fixed by executing.

document.querySelector('[data-xviz=service-sidebar]>[data-reach-tabs] [data-reach-tab-panels]').style.overflow = "auto"

i.e. removing this css.

[data-xviz=service-sidebar]>[data-reach-tabs] [data-reach-tab-panels] {
    overflow: hidden;
}

With the new version I am having the following problem which I am still trying to trace.
After changing Actors, the graphical UI is not correctly initialized. The opacity is set to 0.01 or something and removing the opacity reveals a graph that's not quite right and all elements are at the top left position.
I initially posted this for reference:
statelyai/xstate#2629

[richtera]

It might be related to this error I am seeing when debugging locally

[mattpocock]

@richtera Could you send a repro? I.e. a machine text that causes this error?

[richtera]

Sure, this is the original Todo with your link in it. It doesn't seem to work either although the previous local version was at least showing the graph on the main state machine. This is acting differently than I had previously seen. https://codesandbox.io/s/xstate-todomvc-forked-qu3xg?file=/index.js

[richtera]

The last version seems to work now. I just checked again.

[richtera]

Ok, but after switching actors a lot it seems to run out of steam.

After clicking 10 or so times to switch actors I still ends up with an empty graph.

[richtera]

Also... it would be great to be able to pass some kind of "autoRemove" into the inspect function so that stopped statemachines don't stick around unless one wants or needs them to.

[richtera]

Ok I think this is what's causing the missing graph error although I am currently running online without source maps.

Another curious thing is that I am getting warnings about "" on values which I don't use. I use always in my state machines, hmmm.

Using a local build shows the same error, I guess the module doesn't have source maps.

[richtera]

Got it. It happens if you have an Event in both a state's on and in the root on at the same time.

[richtera]

I added another engine that fails to draw into my link https://codesandbox.io/s/xstate-todomvc-forked-qu3xg so you can easily reproduce the problem.

[richtera]

@mattpocock do you need any more information? The last sandbox makes the problem easy reproducible for me.

[Andarist]

@richtera this should be enough for further investigation.

If we just use this as the value in the editor we can reproduce the issue easily:

import { createMachine } from "xstate";

export const failMachine = createMachine({
  context: {},
  id: "Wizard",
  initial: "initial",
  states: {
    initial: {},
  },
  on: {
    // if both are here then it we are ending up with a crash
    LOAD: {},
    EXIT: {},
  },
});