"New" first impressions from an experienced xstate machine user
I'm a big fan of xstate and the new generation stately. I used xstate a bunch about 2 years ago. The new Stately visualizer inspired me to use it again. I thought that I would share a list of "issues" that I bumped into while using the application. To be clear, this is a great app. It's because it is so good, including the meta like this feedback page, that I took the time to generate this list of "observations". I hope they help inform what a new user might experience outside the knowledge base required to build a machine. No idea how to add and edit an annotation (like the one in the initial template); naming Note vs Annotation may be part of the problem. May want to increase the number of places we can add an Annotation/Note. Need to be able to show/hide actions Need to edit code in the visualizer <> Code panel. Include an option to format the code in a way that is particularly useful for xstate configuration (aligns colons, so, not aligned left with indentations) Need to drag and drop precisely where edge joins the node (already posted this feature request) Can’t find a way to delete a previously added description on the canvas (understand, need to delete text in detail view) Publish the benefits of upgrading to v5 in more than one place (difficult to find; changelog is good but too fragmented for the purpose of over-all benefit including a view to the future) [IMPORTANT] When the code gets updated, do not throw away a previously formatted, visualized machine. At minimum, always save the version before importing. At minimum, do not erase annotations/notes. Generally when in doubt for how the events should be generated on the canvas, follow a norm set by something like LucidChart e.g., the zoom in and out feature was accessed using unexpected key combination (there is none, just hit + or -, is great but not something I've experienced elsewhere, and thus something new to learn). How I see the canvas: The machine is a good way to document and display a process. Thus could be an important component within the canvas, and not be the Canvas itself. This would allow a clear division between machine and meta such as Annotations. When zoom out, keep the chart in the center of the window (now when go from “bottom right” of chart @100%, to 40%, much of the chart is hidden “top left”. In the documents, have a separate, dedicated section to all the different ways we can add explanatory/meta information. The ability to document the machine in different ways is a powerful/useful feature. For the following options, how might one use them to complement etc.. Clarify what gets recorded in the code base of the machine. 1. meta 2. tags 3. annotations/notes 4. description 5. Other?? When requested to refresh to update the stately app, perhaps have a menu item that lets the person view a summary of the updates (or point to the changelog entry) I hope this helps. No need to respond in detail. I have figured much of this out, but am sharing as there were "pot-holes" on the on-boarding ramp.
Users should be able to collapse/expand state nodes, or entire levels, to get a simplified overview of the state machine at different depths without needing to see all of the states at once. https://discord.com/channels/795785288994652170/912333666456313907/979833691511590922 https://discord.com/channels/795785288994652170/912333666456313907/935255543977758740 https://github.com/statelyai/editor-feedback/issues/6 https://github.com/statelyai/studio-issues/issues/112
Control where edges hit the nodes
I would like to know if there is a way to "micro-manage" :)) the position where the edge connects to the node. The automatic settings often overlap with edges going in different directions. Moving the nodes around can help, but it is a "hit and miss" approach that takes too much time if/when it works.
Prevent overlapping events
States should "push" events around so that they don't overlap. https://discord.com/channels/795785288994652170/912333666456313907/939182484753641542
Make it easier to make a parent -> child transition
Users should be able to make a transition from parent to child (more common than you might think!), but when the parent is too large, the anchors cannot be reached due to being offscreen. There should be an easier way to create these parent -> child transitions; maybe responsive anchors can help.
Preserve Metadata on Import
When importing a machine to the editor, metadata is completely discarded. Ideally, this would be preserved and reflected in Machine/Node's details.
AI Generation Shouldn't Clear Machine
When someone generates a machine with the AI button, there should at least be a warning that it will clear, irreversibly if it hasn't auto-saved, the current machine.
Edit actions / guards in toolbox on double click
I don´t know if the double click edit option isn´t available with some purpose, but just to gain a second when editing names. https://www.loom.com/share/a2d4e47e38c047508f69db618c6c4072
Edit machine definition in editor
Users should be able to view/edit the JSON machine definition code that is generated, and have those changes reflected in the canvas. https://discord.com/channels/795785288994652170/912333666456313907/971012327644217405
Add guarded transitions in the right panel
From https://github.com/statelyai/studio-issues/issues/94 As soon as a guard is added to an event, this event loses the ability to add more guards from the right-side panel. ### Before adding a guard ### After adding a guard I would normally expect the right-side panel to provide this options since it's offered by the contextual menu.