How to use the jointjs.dia function in jointjs

makeGraph(data, subcircuits) {
        const graph = new joint.dia.Graph();
        this.listenTo(graph, 'change:buttonState', function(gate, sig) {
            this.enqueue(gate);
            this.trigger('userChange');
        });
        this.listenTo(graph, 'change:signal', function(wire, signal) {
            const gate = graph.getCell(wire.get('target').id);
            if (gate) setInput(signal, wire.get('target'), gate);
        });
        this.listenTo(graph, 'change:inputSignals', function(gate, sigs) {
            // forward the change back from a subcircuit
            if (gate instanceof cells.Output) {
                const subcir = gate.graph.get('subcircuit');
                if (subcir == null) return; // not in a subcircuit
                console.assert(subcir instanceof cells.Subcircuit);
                subcir.set('outputSignals', _.chain(subcir.get('outputSignals'))
                    .clone().set(gate.get('net'), sigs.in).value());

displayEditor(evt) {
        evt.stopPropagation();
        const div = $('<div>', {
            title: "FSM: " + this.model.get('label')
        }).appendTo('html &gt; body');
        const pdiv = $('<div>').appendTo(div);
        const graph = this.model.fsmgraph;
        const paper = new joint.dia.Paper({
            el: pdiv,
            model: graph
        });
        // to visualize the cells
        graph.resetCells(graph.getCells());
        // lazy layout
        if (!graph.get('laid_out')) {
            joint.layout.DirectedGraph.layout(graph, {
                dagre: dagre,
                graphlib: graphlib
            });
            graph.set('laid_out', true);
        }
        // auto-resizing
        this.listenTo(graph, 'change:position', (elem) =&gt; {
            paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });</div></div>

}
}, {
    arithcomp: (i, j) => i.lesser(j)
});

// Nonequality operator
joint.shapes.digital.Compare.define('digital.Ne', {
    attrs: {
        'text.oper': { text: '≠' }
    }
}, {
    arithcomp: (i, j) => i.lesser(j)
});

// Connecting wire model
joint.dia.Link.define('digital.Wire', {
    attrs: {
        '.connection': { 'stroke-width': 2 },
        '.marker-vertex': { r: 7 }
    },
    signal: [0],
    bits: 1,

    router: { name: 'orthogonal' },
    connector: { name: 'rounded', args: { radius: 10 }}
}, {
    arrowheadMarkup: [
        ''
    ].join(''),

};

    this.CLICK_TRESHOLD = 2;

    // Canvas components
    this.canvasComponents = {};
    this.canvasComponents['grid'] = new Grid(this);
    this.canvasComponents['panAndZoom'] = new PanAndZoom(this);
    this.canvasComponents['link'] = new Link(this);
    this.canvasComponents['nodes'] = new Nodes(this);
    this.canvasComponents['highlights'] = new Highlights(this);
    this.canvasComponents['variables'] = new Variables(this);
    this.canvasComponents['selecting'] = new Selecting(this);
    this.canvasComponents['saveImage'] = new SaveImage(this);

    this.graph = new joint.dia.Graph();
    this.currentDetailCell = null;
    this.startingPointerPosition = null;
    this.freezed = false;
    this.ignoreAction = false;
    this.dontReloadGraph = false;
    this.interactivity = true;

    // TODO: [Low] Find better place to place this
    joint.setTheme('modern');
  }

it('should select a link', function () {

                var link = new joint.dia.Link({ source: { x: 1, y: 1 }, target: { x: 100, y: 100 } });
                $scope.graph.addCell(link);
                var cellView = diagram.findViewByModel(link);
                diagram.trigger('link:options', cellView, {});
                expect($scope.select).toHaveBeenCalled();
                expect($scope.select.calls.argsFor(0)).toEqual([link]);

            });

beforeEach(function () {

            height = 400;
            width = 600;
            gridSize = 2;
            interactive = true;

            //graph mocks
            var graph = new joint.dia.Graph();;
            spyOn(graph, 'on').and.callThrough();

            //scope mocks
            $scope.graph = graph;
            $scope.initialiseGraph = function () { };
            spyOn($scope, 'initialiseGraph');
            $scope.select = function (element) { };
            spyOn($scope, 'select');
            $scope.newFlow = function () { };
            spyOn($scope, 'newFlow');

            setFixtures('');
            elem = angular.element($('tmt-diagram')[0]);
            $compile(elem)($scope);
            $scope.$digest();
            diagramSvg = $(elem).children('svg');

function newDiagram(height, width, gridSize, graph, target, interactive) {

        var paper = new joint.dia.Paper({
            el: target,
            width: width,
            height: height,
            gridSize: gridSize,
            model: graph,
            interactive: interactive
        });

        return paper;
    }

this.paper.on("link:mouseover", function(cellView, evt) {
      var verticesTool = new joint.linkTools.Vertices({
        focusOpacity: 0.5,
        redundancyRemoval: true,
        snapRadius: 20,
        vertexAdding: true,
      });
      var segmentsTool = new joint.linkTools.Segments();

      var sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
      var targetArrowheadTool = new joint.linkTools.TargetArrowhead();

      var toolsView = new joint.dia.ToolsView({
        tools: [
          verticesTool, segmentsTool,
          sourceArrowheadTool, targetArrowheadTool
        ]
      });
      cellView.addTools(toolsView)
      cellView.showTools()
    });

'<title>Remove vertex.</title>',
        '',
        '',
        ''
    ].join(''),

    initialize: function() {
        joint.dia.Link.prototype.initialize.apply(this, arguments);
        this.router('metro', {
            startDirections: ['right'],
            endDirections: ['left']
        });
    }
});

joint.shapes.digital.WireView = joint.dia.LinkView.extend({
    initialize: function() {
        joint.dia.LinkView.prototype.initialize.apply(this, arguments);
        const cl = sigClass(this.model.get('signal'));
        this.$el.toggleClass('live', cl == 'live');
        this.$el.toggleClass('low', cl == 'low');
        this.$el.toggleClass('defined', cl == 'defined');
        this.listenTo(this.model, 'change:signal', function(wire, signal) {
            const cl = sigClass(this.model.get('signal'));
            this.$el.toggleClass('live', cl == 'live');
            this.$el.toggleClass('low', cl == 'low');
            this.$el.toggleClass('defined', cl == 'defined');
        });
    }
});

function validNumber(str) {