search

statelyai / xstate-viz

Visualizer for XState machines
https://stately.ai/viz
MIT License
433 stars 102 forks source link

Issue with new version #267

Open richtera opened 3 years ago

richtera commented 3 years ago

https://github.com/statecharts/xstate-viz/issues/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: https://github.com/statelyai/xstate/issues/2629

richtera commented 3 years ago

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

image

mattpocock commented 3 years ago

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

richtera commented 3 years ago

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 commented 2 years ago

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

richtera commented 2 years ago

Ok, but after switching actors a lot it seems to run out of steam. image After clicking 10 or so times to switch actors I still ends up with an empty graph.

richtera commented 2 years ago

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 commented 2 years ago

Ok I think this is what's causing the missing graph error although I am currently running online without source maps. image 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. image Using a local build shows the same error, I guess the module doesn't have source maps.

richtera commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Andarist commented 2 years ago

@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: {},
  },
});