Circular structure error when nesting custom GNode instances

[david-pa]

I am working on trying to render a custom GNode (ParentNode nodes) within another custom GNode instance (ChildNode nodes), to show a "nested" set of nodes, each with their own comps, labels, and ports.

As far as how I'm producing the nodes goes, I'm using a custom builder that extends GNodeBuilder for each, but I'm not really doing anything complicated there and just build out the various comps, ports, and nodes with data from the model where needed.
The overall structure looks like this:

        > Gnode (ParentNode)
        --> Gcomp (header container)
        -----> Gcomp (title container)
        --------> Glabel
        --> Gcomp (properties container)
        -----> Gcomp (left properties container, contains multiple of the following)
        --------> Gnode (single property container)
        -----------> Gport
        -----------> Glabel
        -----> Gcomp (right properties container, contains multiple of the following)
        --------> Gnode (single property container)
        -----------> Glabel
        -----------> Gport
        --> Gcomp (ChildNode container, contains multiple of the following)
        ----> Gnode (ChildNode)
        ------> Gcomp (header container)
        ---------> Gcomp (title container)
        ------------> Glabel
        ------> Gcomp (properties container)
        ---------> Gcomp (left properties container, contains multiple of the following)
        ------------> Gnode (single property container)
        ---------------> Gport
        ---------------> Glabel
        ---------> Gcomp (right properties container, contains multiple of the following)
        ------------> Gnode (single property container)
        ---------------> Glabel
        ---------------> Gport


export class ChildNode extends GNode {
  name: string;
  childId: string;
  description?: string;
  leftProperties?: LeftProperty[];
  rightProperties?: RightProperty[];

  static override builder(): ChildNodeBuilder {
    return new ChildNodeBuilder(ChildNode);
  }
}

export class ParentNode extends GNode {
  name: string;
  parentId: string;
  description?: string;
  leftProperties?: LeftProperty[];
  rightProperties?: RightProperty[];
  childNodes: ChildNode[];

  static override builder(): ParentNodeBuilder {
    return new ParentNodeBuilder(ParentNode);
  }
}

As you can see, ParentNode and ChildNode nodes are basically the same, ParentNode nodes just have a GCompartment for storing ChildNode nodes.

Here is the process through which they are built:

1. In createChildNodes() I look at the data in the model state and create all the nodes that are not ParentNode nodes (bascially, they don't have data associated with them to indicate they have children). I return an array of built ChildNode instances matching the structure above.
2. In createParentNodes() I process all the nodes that are meant to have ChildNode nodes within them, and in doing so I provide a subset of the ChildNode nodes from the result of createChildNodes(), which are then added to the ChildNode container GComp as its children via the ParentNode builder.
3. createParentNodes() returns any remaining ChildNode instances that do not belong to a ParentNode as orphanNodes.
4. parentNodes and orphanNodes are both added as children to the newRoot;

export class CustomGModelFactory implements GModelFactory {
  @inject(CustomModelState)
  protected modelState: CustomModelState;

  createModel(): void {
    const children: ChildNode[] = this.createChildNodes();
    const {parentNodes, orphanNodes} = this.createParentNodes(children);
    const newRoot = GGraph.builder() // Build out the root of the graph
      .id('root')
      .type('graph')
      .addCssClass('root-graph')
      .addChildren(orphanNodes)
      .addChildren(parentNodes)
      .revision(0)
      .build();

    this.modelState.updateRoot(newRoot);
    const edges = this.createEdges();
    newRoot.children.push(...edges);
  }
  ...
}

createParentNodes(completedChildren: ChildNodes[]) {
  const index = this.modelState.index;
  const parents = this.modelState.parents;
  let orphanNodes: ChildNode[] = [];

  const parentNodes: ParentNode[] = parents.map(parent => {
    ...

    const childNodes = [];

    for (const child of parent.children) {
      ...
      if (child) {
        childNodes.push(child);
      }
    }

    // remove ChildNode instances out of the completedChildren[] that are used in childNodes[]
    childNodes.forEach(childNode => {
      ...
    });

    const parentNode = ParentNode.builder()
      .id(id) // generated node ID
      .type('parent')
      .parentId(parent.id)
      ..leftProperties(lefProps)
      .rightProperties(rightProps)
      .name(child.name)
      .childNodes(childNodes)
      .build();
    return parentNode;
  });

  orphanNodes = [...completedChildren];

  return {parentNodes, orphanNodes};
}

createChildNodes(): ChildNode[] {
  const index = this.modelState.index;
  const children = this.modelState.children;

  const childNodes: ChildNode[] = children.map(child => {
    ...
    const childNode = ChildNode.builder()
      .id(id) // generated node ID
      .type('child')
      .childId(child.id)
      .leftProperties(lefProps)
      .rightProperties(rightProps)
      .name(child.name)
      .build();
    return childNode;
  });

  return childNodes;
}

I have no issues rendering ChildNode nodes on their own, but once I start to try creating ParentNode nodes, I always get an error like the following:

GLSP-Server: /.../node_modules/vscode-jsonrpc/lib/browser/ril.js:114
                return Promise.resolve(_textEncoder.encode(JSON.stringify(msg, undefined, 0)));

Uncaught TypeError TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'GCompartment'
    |     property 'children' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'GLabel'
    --- property 'parent' closes the circle
    at encode (/.../node_modules/vscode-jsonrpc/lib/browser/ril.js:114:65)
    at <anonymous> (/.../node_modules/vscode-jsonrpc/lib/common/messageWriter.js:78:61)
    at doRunNext (/.../node_modules/vscode-jsonrpc/lib/common/semaphore.js:43:33)
    at <anonymous> (/.../node_modules/vscode-jsonrpc/lib/common/semaphore.js:31:60)
    at listOnTimeout (<node_internals>/internal/timers:594:17)
    at processTimers (<node_internals>/internal/timers:529:7)

Node.js v22.14.0

It seems to be stuck on the header comps as best as I can determine, and I'm wondering if this is an issue where the depth of the nesting is causing the problem.

Is there any way I can resolve this issue? Is this a bug within GLSP, or just something that isn't possible at this time?

[david-pa]

@tortmayr is there any chance you might know anything about this? It isn't entirely clear what I'm doing wrong, honestly.

[tortmayr]

I'm pretty sure that the childNodes property of the ParentNode causes the issue.
This causes circular reference that JSON.stringify cannot resolve.
Is there a particular reason why you opted for a new childNodes property instead of using the children property which each GModelElement has by default?

Before sending the model to the client we use the GModelSerializer to transform the current gmodel into a serializable format. This serializer can handle the default parent - children properties of the GModel and resolves the circular references.

If you absolutely need dedicated childNodes properties you probably would have to customize/rebind the GModelSerializer and potentially also need some customizations on the client side.

[david-pa]

Ah, that makes sense! Thank you so much!

I was able to reduce things to a single generic gNode instance (basically what the ParentNode is) and add nodes to the child comp via pushing to the comp's children[]. That seemed to be a lot more straightforward, and doesn't have the circular reference problem.

However, I'm having a bit of a layout issue I'm wondering if you could help me with?
I have a mockup of the general layout of a node that has a populated child comp here, with layout options listed for each element:

One thing I'll note is that the properties container is not always populated, so it's a valid case to just have a Parent node with only a Children comp and a Header.

The problem at the moment is that if I manually reposition a node within the Children comp to be outside the Parent node, the Parent node will resize appropriately, but only to the right or downwards, not to left or upward. If I move a node within the Children comp outside the left or top edge of the Parent node, the Parent node shrinks to the width or height of the Header, respectively.

Basically, even though I'm essentially stretching out the comp to be much larger than the Parent node, the Parent node doesn't resize unless the Children comp's growth is towards the right or bottom side of the Parent node.

One important note is that when inspecting the HTML of the diagram in VSCode, I noticed that while the g#some_id_string.node element had the correct size that accommodated the shift of the comp's children, it was the path.sprotty-node element that does not resize correctly.

I do have a changeBoundsHandler that sets new positions and sizes to go with the Parent node's resizeContainer layout option, and that does seem to be working, but it seems to me like there might be a conflict in the layout options or something along those lines?

[david-pa]

@tortmayr Sorry to bother, but I think I actually fixed the above issue:

Looking into things more, I think a solution (although I'm not sure if there's a better one) is to use my changeBoundsHandler implementation to limit the placement of Children comp members to have their position be within positive values of the comp. Basically, the relative position can't be a negative number, which would have it go past the left or top edges of the comp.

The issue that arises there though is that the Properties comp can't seem to stretch with the changing size of the Parent node. Right now, the comps within the Properties comp are meant to be aligned with the left and right edge of the Parent node, with the ports aligned with their respective edge. If I move the Children members to the point where the Parent node stretches though, the RightProperties comp does not move with the right edge of the Parent node, but instead stays put where it is.

I was under the assumption that applying hGrab to LeftProperties might fix that, but it doesn't seem to have any affect, and the overall size of the Properties comp doesn't seem to change with the Parent node's size, either.