How to use the jointjs.shapes function in jointjs

this.save_button.onclick = () => {
      console.log("Not implemented yet")
    }

    this.help_button = document.createElement("button");

    this.help_button.innerText = "Help";  
    this.help_button.onclick = () => {
      console.log("Not implemented yet")
    }

    // We need to create the graph and paper in the constructor
    // If you try to create them in renderModel (which is called everytime the user
    // opens an .idaes.vis file or changes tabs) then you get icons that do not drop
    // when the mouseup event is emitted
    var standard = joint.shapes.standard;
    var width = 10000;
    var height = 10000;
    var gridSize = 1;
    this.graph = new joint.dia.Graph([], { cellNamespace: { standard } });
    this.paper = new joint.dia.Paper({
      el: this.holder,
      model: this.graph,
      cellViewNamespace: { standard },
      width: width,
      height: height,
      gridSize: gridSize,
      interactive: true
    });

    // Adds link tools (adding vertices, moving segments) to links when your mouse over
    this.paper.on("link:mouseover", function(cellView, evt) {

it('should add a remove event handler to the graph', function() {
            
            var rect = new joint.shapes.basic.Rect({
                position: { x: 100, y: 100 },
                size: { width: 70, height: 30 },
                attrs: { text: { text: 'my rectangle' } }
            });

            graph.addCell(rect);
            $scope.vm.selected = rect;
            $location.search('element', rect.cid);
            
            spyOn(mockDatacontext, 'load').and.returnValue($q.when(threatModel));           
            $scope.vm.initialise(newDiagram);
            $scope.$apply();
            expect($scope.vm.dirty).toBe(false);
            
            rect.remove();

"use strict";

const joint = require ('jointjs');

class Model extends joint.shapes.devs.Model {
    constructor (frandre) {
        super ({
            ports: {
                groups: {
                    'in': {
                        markup: '

rect : {
        width: WIDTH,
        fill: config.DF_NODES_FILL
      }
    },
    dfGui: {
      description: NAME,
    },
    ports: {
      items: ports
    }
  }, DefaultShape.prototype.defaults)
});

if(!joint.shapes['spark']) joint.shapes['spark'] = {};
joint.shapes['spark'][NODE_TYPE] = MODEL;

export default class CreateDataFrame extends NodeTemplate{

  static getType(){
    return FULL_NODE_TYPE;
  }

  static getName(){
    return NAME;
  }

  static getModel(){
    return MODEL.bind(joint);
  }

  static isNodeHidden(){

ports: {
      items: [
        {
          id: 'in',
          group: 'in'
        },
        {
          id: 'out',
          group: 'out'
        }
      ]
    }
  }, DefaultShape.prototype.defaults)
});

if(!joint.shapes['spark']) joint.shapes['spark'] = {};
joint.shapes['spark']['map'] = MODEL;

export default class Map extends NodeTemplate{

  static getType(){
    return NODE_TYPE;
  }

  static getName(){
    return NAME;
  }

  static getModel(){
    return MODEL.bind(joint);
  }

ports: {
      items: [
        {
          id: 'in',
          group: 'in'
        },
        {
          id: 'out',
          group: 'out'
        }
      ]
    }
  }, DefaultShape.prototype.defaults)
});

if(!joint.shapes['spark']) joint.shapes['spark'] = {};
joint.shapes['spark']['mapPartitions'] = MODEL;

export default class MapPartitions extends NodeTemplate{

  static getType(){
    return NODE_TYPE;
  }

  static getName(){
    return NAME;
  }

  static getModel(){
    return MODEL.bind(joint);
  }

attrs: {
      text : { text: NAME },
      rect : {
        fill: config.DF_NODES_FILL
      }
    },
    dfGui: {
      description: NAME,
    },
    ports: {
      items: ports
    }
  }, DefaultShape.prototype.defaults)
});

if(!joint.shapes['spark']) joint.shapes['spark'] = {};
joint.shapes['spark'][NODE_TYPE] = MODEL;

export default class CreateDataFrame extends NodeTemplate{

  static getType(){
    return FULL_NODE_TYPE;
  }

  static getName(){
    return NAME;
  }

  static getModel(){
    return MODEL.bind(joint);
  }

multiselectionProgress(e) {
    if (!this.startingSelectionPosition) return;

    if (!this.isSelecting
      && Math.abs(this.startingSelectionPosition.x - e.clientX) > this.canvas.CLICK_TRESHOLD
      && Math.abs(this.startingSelectionPosition.y - e.clientY) > this.canvas.CLICK_TRESHOLD) {
      this.isSelecting = true;

      if (this.currentDetailCell) {
        this.onNodeDetailEnd();
      }

      this.selectRect = new joint.shapes.basic.Rect({
        position: {x: this.startingSelectionPosition.x, y: this.startingSelectionPosition.y},
        size: {width: 1, height: 1},
        attrs: {
          '.': {
            magnet: false
          },
          'rect': {
            'fill-opacity': 0.3,
            style:{'pointer-events':'none'}
          }
        }
      });
      this.graph.addCell(this.selectRect);
      this.freeze();
    }

mounted() {
    this.shape = new joint.shapes.standard.Polyline();
    let bounds = this.node.diagram.bounds;
    this.shape.position(bounds.x, bounds.y);
    this.shape.resize(this.nodeWidth, bounds.height);
    this.shape.attr({
      body: {
        refPoints: '25 10 3 10 3 3 25 3',
      },
      label: {
        text: joint.util.breakText(this.node.definition.get('text'), {
          width: bounds.width,
        }),
        fill: 'black',
        yAlignment: 'left',
        xAlignment: 'left',
        refX: '5',
        refY: '5',

group: 'in'
        },
        {
          id: 'in2',
          group: 'in'
        },
        {
          id: 'out',
          group: 'out'
        }
      ],
    }
  }, DefaultShape.prototype.defaults)
});

if(!joint.shapes['spark']) joint.shapes['spark'] = {};
joint.shapes['spark']['union'] = MODEL;

export default class Union extends NodeTemplate{

  static getType(){
    return NODE_TYPE;
  }

  static getName(){
    return NAME;
  }

  static getModel(){
    return MODEL.bind(joint);
  }