From 1cd30c8574a085a24242fc6380ec08be4789230d Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Wed, 3 Apr 2024 05:19:19 -0400
Subject: [PATCH] fix: Output header to show state label and not id
 [PT-187357457]

---
 src/components/app.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/app.tsx b/src/components/app.tsx
index 74f9874..2233dcd 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -18,6 +18,7 @@ const AnimationDelay = 1000;
 
 type SequenceGroup = {
   startingState: string;
+  startingNode: Node | undefined;
   delimiter: string;
   lengthLimit: number;
   sequences: Node[][];
@@ -25,7 +26,7 @@ type SequenceGroup = {
 
 const SequenceOutputHeader = ({ group }: { group: SequenceGroup }) => {
   const [expanded, setExpanded] = useState(false);
-  const startingState = group.startingState.length > 0 ? group.startingState : AnyStartingState;
+  const startingState = group.startingNode?.label ?? AnyStartingState;
   const lengthLimit = group.lengthLimit;
   const delimiter = group.delimiter === "" ? "(none)" : `"${group.delimiter}"`;
 
@@ -122,7 +123,7 @@ export const App = () => {
         (currentAnimatedSequenceGroup.current.delimiter !== delimiter) ||
         (currentAnimatedSequenceGroup.current.lengthLimit !== lengthLimit) ||
         (currentAnimatedSequenceGroup.current.startingState !== startingState)) {
-        currentAnimatedSequenceGroup.current = { delimiter, lengthLimit, startingState, sequences: [] };
+        currentAnimatedSequenceGroup.current = { delimiter, lengthLimit, startingState, startingNode, sequences: [] };
         setSequenceGroups(prevAnimatedSequenceGroups.current);
       } else {
         prevAnimatedSequenceGroups.current.pop();