How to use the jointjs.layout function in jointjs

return !link;
                } else if (e === 'source') { 
                    const ps = vs.model.ports[ms.getAttribute('port')];
                    if (typeof ps !== 'object' || ps.dir !== 'out' || ps.bits !== vl.model.get('bits'))
                        return false;
                    return true;
                }
            }
        });
        paper.$el.addClass('djs');
        paper.freeze();
        // required for the paper to visualize the graph (jointjs bug?)
        graph.resetCells(graph.getCells());
        // lazy graph layout
        if (!graph.get('laid_out')) {
            joint.layout.DirectedGraph.layout(graph, {
                nodeSep: 20,
                edgeSep: 0,
                rankSep: 110,
                rankDir: "LR",
                dagre: dagre,
                graphlib: graphlib
            });
            graph.set('laid_out', true);
        }
        paper.unfreeze({
            progress(done, processed, total) {
                if (done) {
                    paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });
                    if (opts.onDone) opts.onDone();
                }
            }

const newCells = createSubstituteCells(this._graph);
    const settings = {
      marginX: 100,
      marginY: 10,
      rankSep: 100,
      nodeSep: 80,
      rankDir: 'LR',
      setLinkVertices: false,
      resizeClusters: true,
      setPosition: (element, glNode) => {
        element.proto.set('position', {
          x: glNode.x - glNode.width / 2,
          y: glNode.y - glNode.height / 2 });
      }, // setVertices is ignored
    };
    joint.layout.DirectedGraph.layout(newCells, settings);
  }

async renderElements(typeMap = this.typeMap, activeType = this.activeType) {
    const toRenderTypes: FilteredGraphqlOutputType[] = this.getToRenderTypes(
      typeMap,
      activeType
    );
    this.startLoading();
    await this.removeUnusedElements(toRenderTypes);
    await this.addNewElements(toRenderTypes);
    joint.layout.DirectedGraph.layout(this.graph, {
      nodeSep: 200,
      rankSep: 400,
      rankDir: "LR",
      setPosition: (element: any, glNode: any) => {
        element.set(
          "position",
          {
            x: glNode.x - glNode.width / 2,
            y: glNode.y - glNode.height / 2
          },
          { cacheOnly: false /* will not update links yet */ }
        );
      },
      setVertices: (link: any, points: any) => {
        link.unset("vertices", { silent: true });
        // this.adjustVertices(link);

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' });
        });
        paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });
        const maxWidth = $(window).width() * 0.9;
        const maxHeight = $(window).height() * 0.9;
        div.dialog({
            width: Math.min(maxWidth, pdiv.outerWidth() + 60), 
            height: Math.min(maxHeight, pdiv.outerHeight() + 60),
            close: () =&gt; {</div></div>

var lab = makeLink(ea, eb);
    var lbc = makeLink(eb, ec);
    var lbd = makeLink(eb, ed);
    var lbe = makeLink(eb, ee);
    var lbf = makeLink(eb, ef);
    var lbg = makeLink(eb, eg);
    var lhg = makeLink(eh, eg);

    group.embed(topGroup).embed(bottomGroup);
    topGroup.embed(eb).embed(eh);
    bottomGroup.embed(ec).embed(ed).embed(ee).embed(ef);

    graph.addCell([group, topGroup, bottomGroup, ea, eb, ec, ed, ed, ee, ef, eg, eh, lab, lbc, lbd, lbe, lbf, lbg, lhg]);

    joint.layout.DirectedGraph.layout(graph, {
        setLinkVertices: false,
        rankDir: 'TB',
        marginX: 50,
        marginY: 50,
        clusterPadding: { top: 30, left: 10, right: 10, bottom: 10 }
    });    
  }
  return init;