Xstate: [Feature] Descriptions for Visualizer

[ZempTime]

Bug or feature request?

Feature Request

Description:

In GraphQL you can add comments to your nodes.

"""
A wonderful, sugary, delicious treat. Can be eaten like an ice cream cone, if you're brave.
"""
type CupCake {
  flavor: String!
  hasFrosting: Boolean!
}

This makes the automatically generated documentation incredibly useful. I'd like to be able to do this with the visualizer. I have a case where I need to represent a setting on a UI component where, sometimes, the evaluation of some set of criteria is important, and other times, the only the criteria themselves are important.

Currently, I'm trying to do this with such fabulous state node names as:

uniqueWhatsInSelections
[others far worse which never made it into git and I forgot]

This is kind of nuanced, and by the time you need to care about it, you'll know what it is. But being able to add a simple description would be _fantastic_, especially when sharing with non-technical stakeholders/new devs. So being able to specify a description would let people "oh yeah, that's what that is" to a shorter name. (Say, "uniqueEvaluatedWhats")

(Feature) Potential implementation:

• What the API would look like
  When declaring a state node, you can optionally attach a description property

public description?: string;

Which, when present, will cause some kind of affordance to appear inside the visualizer where people can get more info.

Not prescribing this as the actual ux, but solely as an example of what I'm talking about, a blue i icon in a bubble shows up on the state node name. then, when we hover over it, a small popover with the specified description appears.

If that could happen, the discoverability/understand-ability of increases a large amount.

• If this is a breaking change
  Additive, so probably not?

• If this is part of the existing SCXML specification
  I don't think it's in there. This is quite possibly going outside the spec.

Longer term, I'd like to be able to use the visualizer as a part of our documentation. That'd be _sweet!_ 🤗

[davidkpiano]

So funny enough, instead of ~description~, there already exists a property exactly for this: the .meta property 📖, and I think it'd be pretty easy to surface this in the visualizer.