AWS Toolkit render state machine visual rendering wrong state machine despite showing in the list

[AdamPhasey]

Problem

when rendering visuals of several state machines, the rendering tool sometimes displays specific machines only. For instance, if I have three machines and I rendered one as a graph (asl), it may show me the a different one. My thoughts originally was that it was due to length of name, however, when I shortened the name whilst that resolved it for some issues, it subsequently did not work for other machines. I also noticed it when I added a parallel state, but removing it did not resolve it. I believe it has something to do with instantiating constructs within a parent construct. That might be confusing the tool. It's really hard to say.

Anything to do with the fact I write this in TS? Perhaps the conversion of TS to ASL might be problematic for more complicated workflows...

When I deploy, I do not have any issues and I can correctly see the state machines as per my design on the Step Functions studio.

The way I work around this is to instantiate a class containing a machine in the stack and pass it as props to the parent construct I initially wanted it to be declared in.

Steps to reproduce the issue

Here is the child construct below:

import { Construct } from "constructs";
import * as sfn from "aws-cdk-lib/aws-stepfunctions";

interface StateMachineProps {
  lambdaConstruct: LambdaConstruct;
}

export class exampleChildConstructMachine extends Construct {
  public machine: sfn.StateMachine;
  constructor(scope: Construct, id: string, props: StateMachineProps) {
    super(scope, id);

    const passThroughDummy = new sfn.Pass(this, "Dummy", {
      result: sfn.Result.fromObject({}),
    });

    const definition = passThroughDummy;

    this.machine = new sfn.StateMachine(
      this,
      "machine",
      {
        stateMachineName:
          "machine",
        definitionBody: sfn.DefinitionBody.fromChainable(definition),
        tracingEnabled: true,
      },
    );
  }
}

Expected behavior

I expected that the rendering tool would always correctly identify the state machine I requested. However, for some reason when nesting/instantiating other constructs, it mixes it up and defaults to the parent state machine.

System details (run AWS: About and/or Amazon Q: About)

• OS: MacOS Ventura 13.5.2
• Visual Studio Code version: 1.91.1
• AWS Toolkit version: v3.15.0
• Amazon Q version:

[wong-a]

Are you running cdk synth for your project before checking trying to visualize the updated state machine?

[wong-a]

it may show me the a different one

Is it showing the correct visualization of another state machine in your CDK app?

[AdamPhasey]

@wong-a hey, yes. I can also see the correct visualisation of other state machines

[AdamPhasey]

@wong-a I got around this by instantiating the construct in the stack instead and then passing it to the 'parent' state machine - that solved it for me. However, the problem still stands I guess...

[VaidSaraswat]

Hey Adam, could you please provide the exact steps to reproduce the issue with the relevant code? It will allow us to troubleshoot any potential issues, thanks!