Merge pull request #34 from concord-consortium/187357457-fix-output-s…

…tate-label

fix: Output header to show state label and not id [PT-187357457]

src/components/app.tsx

@@ -18,14 +18,15 @@ const AnimationDelay = 1000;
 
 type SequenceGroup = {
   startingState: string;
+  startingNode: Node | undefined;
   delimiter: string;
   lengthLimit: number;
   sequences: Node[][];
 };
 
 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();