function renderJobGraphOnApplicationLevel()

in PluginsAndFeatures/azure-toolkit-for-intellij/azure-intellij-plugin-hdinsight/hdinsight_jobview_html/com.microsoft.hdinsight/hdinsight/job/html/job_graph.js [25:132]
86 lines of code
10 McCabe index (conditional complexity)

function renderJobGraphOnApplicationLevel(jobs) {
    $('#applicationGraphDiv').removeClass('graph-disabled');
    $('#jobGraphDiv').addClass('graph-disabled');
    var g = new dagreD3.graphlib.Graph()
        .setGraph({})
        .setDefaultEdgeLabel(function() { return {}; });

    var counters = jobs.length, i = 0;
    g.setNode(0, {label :"Driver",   class : "type-TOP"});
    for(i = 1; i <= counters; ++i) {
        var s = "Job " + (i - 1);
        var currentClass = jobs[i - 1]["status"] === "SUCCEEDED" ? "sparkJob-success" : "sparkJob-error";
        g.setNode(i, {label: s,  class : currentClass});
    }

    for(i = 1; i <= counters; ++i) {
        g.setEdge(0, i);
    }

    // Create the renderer
    var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
    var svg = d3.select("#applicationGraphSvg");

    // remove all graph first
    d3.selectAll("#applicationGraphSvg g").remove();

    var inner = svg.append("g");

// Run the renderer. This is what draws the final graph.
    render(d3.select("#applicationGraphSvg g"), g);

    document.jobGraphView.width = $('#applicationGraphDiv').width() * 0.7;
    var viewBoxValue = calculateVirtualBox(g.graph())
    svg.attr("viewBox", viewBoxValue);
    svg.attr("preserveAspectRatio", "xMidYMid meet");

    render(d3.select("#applicationGraphSvg g"), g);
    // Center the graph
    var applicationSvg = $('#applicationGraphSvg');
    if (!spark.graphsize) {
        spark.graphsize = {
            'width': applicationSvg.width(),
            'height': applicationSvg.height()
        };
    } else {
        applicationSvg.width(spark.graphsize.width);
        applicationSvg.height(spark.graphsize.height);
    }

    var zoom = d3.behavior.zoom().on("zoom", function() {
        inner.attr("transform", "translate(" + d3.event.translate + ")" +
            "scale(" + d3.event.scale + ")");
    });
    svg.call(zoom);

    // Simple function to style the tooltip for the given node.
    inner.selectAll("g.node")
        .attr('tabindex', "-1")
        .attr("title", function(v) {
            return setToolTips(jobs, v)
        })
        .each(function(v) {
            if (v === '0') {
                $(this).attr('tabindex', "0")
            }

            $(this).tipsy({
                gravity: "w",
                opacity: 1,
                trigger:'hover',
                html: true });
            $(this).tipsy({
                gravity: "w",
                opacity: 1,
                trigger:'focus',
                html: true });
        })
        .on('keydown', function(d) {
            var upDownFocusStack = jobGraphUpDownFocusStacks.appView;

            switch (d3.event.code) {
                case "Enter":
                    if (d == '0') {
                        return;
                    }

                    renderJobGraphForSelectedJob(d);
                    break;
                default:
                    moveFocusByArrows(d3.event.code, g, d, upDownFocusStack);
            }

           zoomGraph(inner);
        })
        .on('click',function(d) {
            if ( d == '0') {
                return;
            }
            renderJobGraphForSelectedJob(d);
        });

    var lastFocusNodeIdx = jobGraphFocusStack.pop();
    if (lastFocusNodeIdx) {
        focusOnNode(lastFocusNodeIdx)
    }
}