JointJS: how to display ports on right side of graph element?

I'm trying to create an Angular application, which allows the user to dynamically create graphs. I'm currently trying to create a function which adds a port to a vertex and I want the user to be able to choose on which side the port appears (right, left, top, bottom). I followed an example on JointJS documentation, however, I'm only able to differ the position of the port label, and not the port itself:

Ports created with code presented below

This is my function, which returns port body based on position ('top', 'right' etc.) and name:

getPort(portName: string, position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        label: {
          text: portName
        },
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

Here is how I add port to my graph (it takes unique vertex name as argument):

this.graph.getElements().forEach(element => {
      if (element.attributes.attrs['label'].text == agentName) {
        element.addPort(port)
      }
})

I followed this tutorial, however even if I copy some port body which should appear on the right side it is still bounded to the left side.

What am I doing wrong?

Turns up you can specify position in port groups. I added to my shapes following section:

ports: {
    groups: {
      'left': this.PORT_GROUP('left'),
      'right': this.PORT_GROUP('right'),
      'top': this.PORT_GROUP('top'),
      'bottom': this.PORT_GROUP('bottom'),
    }
  }

along with this function:

PORT_GROUP(position: string): object {
    return {
      position: {
        name: position
      },
      attrs: {
        portBody: {
          magnet: true,
          r: 10,
          fill: '#023047',
          stroke: '#023047'
        }
      },
      label: {
        position: {
          name: position,
        },
        markup: [{
          tagName: 'text',
          selector: 'label',
          className: 'label-text'
        }]
      },
      markup: [{
        tagName: 'circle',
        selector: 'portBody'
      }]
    };
  }

and it places the ports in correct place with body:

{
  group: 'left',
  attrs: {label: {text: 'portName'}}
}