Sockets are not removed from the DOM

[rockit666]

Describe the bug

Hi,

I'm using NX with Angular 19, Vite, and Standalone Components.
I'm using a JSON file to create the diagram.

Everything works fine as expected — exactly like in the examples.

However, when I retry the process, it seems that the sockets are not being removed from the DOM.
I've tried every possible combination, including disabling HMR, and so on.

Thanks a lot for your help!

Greets,
Frank

Error in PROD:
Found more than one element for socket with same key and side. Probably it was not unmounted correctly {side: 'output', nodeId: 'cb447c3c89d40d32', key: 'trigger-out'}
chunk-7EZH3TMK.js:13
arg1 =
{side: 'output', nodeId: 'cb447c3c89d40d32', key: 'trigger-out'}
value @ c:\Data\Repros\Barracuda-AI\Frontend\Barracuda-UI\chunk-7EZH3TMK.js:13:1234

Error in DEV:
Found more than one element for socket with same key and side. Probably it was not unmounted correctly {side: 'output', nodeId: 'cb447c3c89d40d32', key: 'trigger-out'}

This is my code to remove all items:

private async deleteItems(): Promise<any> {
  if (this.editor) { 
    await this.deleteConnections();       
    await this.deleteNodes();

    if (await this.editor.clear()) {
      // No error
    }
    
  }
}

private async deleteConnections(): Promise<any>  {
  const connections = this.editor!.getConnections();
  if (connections) {      
    for (const connection of connections) {
        await this.editor!.removeConnection(connection.id);
    }
  }
}

private async deleteNodes(): Promise<any>  {
  const nodes = this.editor!.getNodes();
  if (nodes) {      
    for (const node of nodes) {
  
        Object.keys(node.inputs).forEach(key => {
          node.removeInput(key);
        });

        Object.keys(node.outputs).forEach(key => {
          node.removeOutput(key);
        });
        
        await this.editor!.removeNode(node.id);
    }
  }
}

Example to reproduce

No response

How to reproduce

Expected behavior

Sockets should be removed from the DOM when a node is deleted.

Dependencies

├── @angular-devkit/build-angular@19.2.5
├── @angular-devkit/core@19.2.0
├── @angular-devkit/schematics@19.2.0
├── @angular/animations@19.2.0
├── @angular/cdk@19.2.7
├── @angular/cli@19.2.5
├── @angular/common@19.2.0
├── @angular/compiler-cli@19.2.0
├── @angular/compiler@19.2.0
├── @angular/core@19.2.0
├── @angular/elements@19.2.0
├── @angular/forms@19.2.0
├── @angular/material@19.2.7
├── @angular/platform-browser-dynamic@19.2.0
├── @angular/platform-browser@19.2.0
├── @angular/router@19.2.0
├── @eslint/js@9.23.0
├── @jsverse/transloco@7.5.0
├── @nx/angular@20.6.4
├── @nx/eslint-plugin@20.4.6
├── @nx/eslint@20.4.6
├── @nx/jest@20.4.6
├── @nx/js@20.4.6
├── @nx/web@20.4.6
├── @primeng/themes@19.0.10
├── @schematics/angular@19.2.0
├── @swc-node/register@1.9.2
├── @swc/core@1.5.29
├── @swc/helpers@0.5.15
├── @types/jest@29.5.14
├── @types/node@18.16.9
├── @typescript-eslint/utils@8.28.0
├── angular-eslint@19.3.0
├── clipboard@2.0.11
├── electron-builder@25.1.8
├── electron@33.4.7
├── emoji-toolkit@9.0.1
├── esbuild@0.25.1
├── eslint-config-prettier@9.1.0
├── eslint@9.23.0
├── jest-environment-node@29.7.0
├── jest@29.7.0
├── marked@15.0.7
├── nanoid@5.1.5
├── ngx-markdown@19.1.1
├── nx-electron@20.0.2
├── nx@20.4.6
├── prettier@2.8.8
├── primeicons@7.0.0
├── primeng@19.0.10
├── prismjs@1.30.0
├── rete-angular-plugin@2.3.2
├── rete-area-plugin@2.1.3
├── rete-connection-plugin@2.0.5
├── rete-render-utils@2.0.3
├── rete@2.0.5
├── rxjs@7.8.2
├── sass@1.86.0
├── ts-jest@29.3.0
├── ts-node@10.9.1
├── tslib@2.8.1
├── typescript-eslint@8.28.0
├── typescript@5.7.3
└── zone.js@0.15.0

Platform

Chrome Version 135.0.7049.115 (Offizieller Build) (64-Bit)

Relevant log output

The source of the error message is: rete-editor.service.ts

  return _createClass(SocketsPositionsStorage, [{
    key: "getPosition",
    value: function getPosition(data) {
      var _found$pop$position, _found$pop;
      var list = Array.from(this.elements.values()).flat();
      var found = list.filter(function (item) {
        return item.side === data.side && item.nodeId === data.nodeId && item.key === data.key;
      });

      // eslint-disable-next-line no-console
      if (found.length > 1) console.warn(['Found more than one element for socket with same key and side.', 'Probably it was not unmounted correctly'].join(' '), data);
      return (_found$pop$position = (_found$pop = found.pop()) === null || _found$pop === void 0 ? void 0 : _found$pop.position) !== null && _found$pop$position !== void 0 ? _found$pop$position : null;
    }
  }

Code of Conduct

• I agree to follow this project's Code of Conduct

[sadianliaoer]

I also encountered a similar problem. The output added during node initialization can be deleted through removeOutput. After the node is successfully created, the output added through addOutput cannot be removed through removeOutput. However, I tried deleting this. delete this.outputs[key] to delete it. I hope it can be deleted through removeOutput. Thank you

 Object.keys(this.outputs).forEach(key => {
      if (!keepKeys.has(key)) {
        delete this.outputs[key]  // Can be deleted
        this.removeOutput(key) //  Cannot delete
      }
    })

"rete": "^2.0.6",
"rete-area-plugin": "^2.1.3",
"rete-connection-plugin": "^2.0.5",
"rete-context-menu-plugin": "^2.0.6",
"rete-history-plugin": "^2.1.0",
"rete-react-plugin": "^2.0.7", 

[Ni55aN]

@sadianliaoer it seems the methods of this class have been patched somehow, causing the removeOutput call to reference the wrong context.

Try setting a breakpoint inside removeOutput to make sure that this is pointing to the right node instance

[Ni55aN]

@rockit666 the provided description does not allow to reproduce the problem.

Regarding the mentioned warning, it signals a potential memory leak when:

• either the old element wasn't removed correctly (in which case it will reappear again and again)
• due to a race condition: it will only appear when you add nodes with the same identifiers without waiting for Angular to remove the previous ones, i.e. it hasn't had time to emit the unmount event

[Ni55aN]

I can demonstrate how to reproduce the warning (but it may differ from your case). First, let's initialize a project from scratch:

rete-kit app -s angular -v 20 -f "Angular render,Order nodes,Zoom at,Auto arrange,Dataflow engine,Selectable nodes,Context menu,Minimap,Reroute" -n angular20

Next, we add the code to remove and add the same node without a delay.
./angular20/src/app/rete/default.ts

  setTimeout(async () => {
    await editor.removeNode(a.id);
    // await new Promise(resolve => setTimeout(resolve, 100)); // uncomment for workaround
    await editor.addNode(a);
  }, 3000)

This way, we will see the warning, but if we add a delay, Angular will have time to unmount the existing node.

[rete-js]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.