Update label logic is too specific.

[rhalff]

Currently the UI dictates a certain id format, which to me seems unnecessary.

This becomes a problem when trying to comply to the fbp-protocol standard.

A rename request will be send and the runtime must accept the new id otherwise the UI and server will be out of sync.

updateLabel: function (event) {
  // Check if we need to make change
  var label = event.currentTarget.value;
  if (label === this.node.metadata.label) {
    return;
  }
  this.graph.startTransaction('rename');
  // Change id
  var id = label;
  if (id !== this.node.id) {
    // Ensure unique
    while (this.graph.getNode(id)) {
      var num = 60466176;
      // 36^5
      num = Math.floor(Math.random() * num);
      id = label + '_' + num.toString(36);
    }
    this.graph.renameNode(this.node.id, id);
  }
  // Change label
  this.graph.setNodeMetadata(id, { label: label });
  this.graph.endTransaction('rename');
}

I'm not sure why the id has to be updated at all, else than it might look weird if the id still contains part of the orginal label which could cause confusion.

To keep the current behavior and also support different id's the test instead could be whether the current id starts with the current label, if so change the id else leave the id untouched.

Something like:

updateLabel: function (event) {
  // Check if we need to make change
  var label = event.currentTarget.value;
  if (label === this.node.metadata.label) {
    return;
  }
  this.graph.startTransaction('rename');

  if (this.node.id.startsWith(this.node.metadata.label)) {
    // Change id
    var id = label;
    if (id !== this.node.id) {
      // Ensure unique
      while (this.graph.getNode(id)) {
        var num = 60466176;
        // 36^5
        num = Math.floor(Math.random() * num);
        id = label + '_' + num.toString(36);
      }
      this.graph.renameNode(this.node.id, id);
    }
    // Change label
    this.graph.setNodeMetadata(id, { label: label });
  } else {
    this.graph.setNodeMetadata(this.node.id, { label: label });
  }
  this.graph.endTransaction('rename');
}