Bug: Wrong graph visualization in studio with the new Command

[DaniSevAzu]

Steps to simulate de bug:

1.- implement the Graph from the new Command documentation example: https://langchain-ai.github.io/langgraphjs/how-tos/command/#define-graph
2.- Open the Studio url witn langgraph up.
3.- The Graph representation is not correct as you can see at the attached image:

[jacoblee93]

Hey @DaniSevAzu, can you share your graph?

We may need to update the Studio image CC @dqbd

[lakshyaag12]

This is still occurring on 0.0.35

[dqbd]

Hello! @jacoblee93 managed to replicate the issue using this graph

import { Annotation, Command, StateGraph } from "@langchain/langgraph";


const StateAnnotation = Annotation.Root({  foo: Annotation<string> });

const nodeA = async (_state: typeof StateAnnotation.State) => {
  console.log("Called A");
  const goto = Math.random() > 0.5 ? "nodeB" : "nodeC";
  return new Command({
    update: { foo: "a" },
    goto,
  });
};

const nodeB = async (state: typeof StateAnnotation.State) => {
  return { foo: state.foo + "|b" };
};

const nodeC = async (state: typeof StateAnnotation.State) => {
  return { foo: state.foo + "|c" };
};

export const graph = new StateGraph(StateAnnotation)
  .addNode("nodeA", nodeA, { ends: ["nodeB", "nodeC"] })
  .addNode("nodeB", nodeB)
  .addNode("nodeC", nodeC)
  .addEdge("__start__", "nodeA")
  .compile();