Glavin001
commented
1 year ago I think this is the applicable code:
- https://github.com/statelyai/xstate-viz/blob/cd7eb85fd38eecfa70f2f9851a403ee0cdca4075/src/StateNodeViz.tsx#L137
- https://github.com/statelyai/xstate-viz/blob/cd7eb85fd38eecfa70f2f9851a403ee0cdca4075/src/StateNodeViz.tsx#L46-L54
- https://github.com/statelyai/xstate-viz/blob/cd7eb85fd38eecfa70f2f9851a403ee0cdca4075/src/StateNodeViz.scss#L136-L141
- Want this to be configurable: https://github.com/statelyai/xstate-viz/blob/cd7eb85fd38eecfa70f2f9851a403ee0cdca4075/src/StateNodeViz.scss#L138
| Before | After |
|---|---|
 |
 |
 |
 |
I recommend someone create a Pull Request 🤞
I doubt I'll have a chance this weekend. Maybe next weekend, if someone has not beaten me to it already 😉
@davidkpiano : Would a configuration option be suitable for this or do you recommend another way?
Description
In the visualization of my state machine, text describing state names and actions is being truncated. For example:
policyOutcomeComponentStatedisplays aspolicyOutcomeComponen...POLICYevent that assignspolicyIdandpolicyUrlvalues in the context, only displaysDO / assign policyId, p...Text truncation in the visualization is reducing readers' ability to comprehend how context and state are changing as users flow through the state machine. Visualizations should offer a display without any truncation of state names / assignment actions.
Expected Result
When visualizing a state machine containing a state with a lengthy name (e.g.
policyOutcomeComponentState), I expect the visualization to display the full name of the state.When visualizing an action where multiple fields are being assigned to the state machine context, I expect the visualization to show all fields that are assigned.
Actual Result
When visualizing a state named
policyOutcomeComponentState, the state machine visualization shows a truncated state name (policyOutcomeComponen...)When visualizing an action with multiple assignments (
policyIdandpolicyUrl), the state machine visualization truncates the text in the assignment action showing onlyDO / assign policyId, p...Reproduction
Snippet from larger state machine:
Additional context
I am new to this visualization tool. If there is already an option to visualize the state machine without truncating any text, please help to point me in that direction. Thank you in advance!