Text Describing State Names and Actions are Truncated in Visualization

[shayank24]

Description

In the visualization of my state machine, text describing state names and actions is being truncated. For example:

1. A state named policyOutcomeComponentState displays as policyOutcomeComponen...
2. An action occurring on a POLICY event that assigns policyId and policyUrl values in the context, only displays DO / 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

1. 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.

2. 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

1. When visualizing a state named policyOutcomeComponentState, the state machine visualization shows a truncated state name (policyOutcomeComponen...)

2. When visualizing an action with multiple assignments (policyId and policyUrl), the state machine visualization truncates the text in the assignment action showing only DO / 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!

[Glavin001]

I think this is the applicable code:

• xstate-viz/src/StateNodeViz.tsx

  Line 137 in cd7eb85

  <StateNodeKey value={stateNode.key} />

• xstate-viz/src/StateNodeViz.tsx

  Lines 46 to 54 in cd7eb85

  	const StateNodeKey: React.FC<{ value: string }> = ({ value }) => {
  	return (
  	<div data-viz="stateNode-key">
  	<div data-viz="stateNode-keyText" title={value}>
  	{value}
  	</div>
  	</div>
  	);
  	};

• xstate-viz/src/StateNodeViz.scss

  Lines 136 to 141 in cd7eb85

  	[data-viz='stateNode-keyText'] {
  	max-width: 20ch;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	}

• Want this to be configurable:

  xstate-viz/src/StateNodeViz.scss

  Line 138 in cd7eb85

  white-space: nowrap;

  • https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

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?