<commit_before>var colors = {
    black: "#fff",
    green: "#83e216",
    red: "#f77"
}

var flows = {
    "StackCreationFlowConfig": "Stack creation flow",
    "StackSyncFlowConfig" : "Stack synchronization flow",
    "StackStopFlowConfig" : "Stack stop flow",
    "StackStartFlowConfig" : "Stack start flow",
    "ClusterTerminationFlowConfig" : "Cluster temination flow",
    "StackTerminationFlowConfig" : "Stack temination flow",
    "InstanceTerminationFlowConfig" : "Instance temination flow"
};

var initGraphByDot = function(dot) {
    dot = dot.replace("{", '{\nnode [rx=5 ry=5]\nedge [minlen=5, labelpos=c, labeloffset=10 ]');
    var graph = graphlibDot.read(dot);

    graph.graph().marginx = 10;
    graph.graph().marginy = 10;
    graph.graph().rankdir = 'TB'; // TB, BT, LR, or RL
    graph.graph().align = 'UR'; // UL, UR, DL, or DR
    // graph.graph().nodesep = 50;
    graph.graph().edgesep = 30;
    graph.graph().ranksep = 8

    graph.nodes().forEach(function(v) {
        var node = graph.node(v);
        node.label = v.replace(/_STATE/g, '');
        if (node.label.indexOf("_FAIL") >= 0 || node.label.indexOf("_ERROR") >= 0) {
            node.color = "red";
        } else if (node.label == "INIT" || node.label == "FINAL") {
            node.color = "green";
        }
        if (node.color) {
            node.style = "fill: " + colors[node.color];
        }
    });

    graph.edges().forEach(function(e) {
        var edge = graph.edge(e);
        edge.label = edge.label.replace(/_EVENT/g, '');
    });
    
    return graph;
}

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

    var render = new dagreD3.render();
    render(inner, graph);

    var initialScale = 0.8;
    zoom.translate([
        (svg.attr("width") - graph.graph().width * initialScale) / 2, 20
    ]).scale(initialScale).event(svg);
    svg.attr('height', graph.graph().height * initialScale + 40);
}

var sideNav = $(".col-md-3 .bs-sidenav");
var flowContaier = $("#flow-container");

for (var flow in flows) {
    $.ajax({
        async: false,
        url: "/diagrams/" + flow + ".dot?name=" + flow,
        success: function(dot) {
            var graph = initGraphByDot(dot);
            sideNav.append('<li class="main active"><a href="#' + flow + '">' + flows[flow] + '</a></li>');
            flowContaier.append('<p><h2 id="' + flow + '">' + flows[flow] + '</h2><svg id="Svg' + flow + '" width=800 height=600><g/></svg></p>');
            var svg = d3.select("#Svg" + flow), inner = svg.select("g");
            renderSvg(svg, inner, graph);
        }
    });
}<commit_msg>CLOUD-55044 Fix flow dot paths<commit_after>var colors = {
    black: "#fff",
    green: "#83e216",
    red: "#f77"
}

var flows = {
    "StackCreationFlowConfig": "Stack creation flow",
    "StackSyncFlowConfig" : "Stack synchronization flow",
    "StackStopFlowConfig" : "Stack stop flow",
    "StackStartFlowConfig" : "Stack start flow",
    "ClusterTerminationFlowConfig" : "Cluster temination flow",
    "StackTerminationFlowConfig" : "Stack temination flow",
    "InstanceTerminationFlowConfig" : "Instance temination flow"
};

var initGraphByDot = function(dot) {
    dot = dot.replace("{", '{\nnode [rx=5 ry=5]\nedge [minlen=5, labelpos=c, labeloffset=10 ]');
    var graph = graphlibDot.read(dot);

    graph.graph().marginx = 10;
    graph.graph().marginy = 10;
    graph.graph().rankdir = 'TB'; // TB, BT, LR, or RL
    graph.graph().align = 'UR'; // UL, UR, DL, or DR
    // graph.graph().nodesep = 50;
    graph.graph().edgesep = 30;
    graph.graph().ranksep = 8

    graph.nodes().forEach(function(v) {
        var node = graph.node(v);
        node.label = v.replace(/_STATE/g, '');
        if (node.label.indexOf("_FAIL") >= 0 || node.label.indexOf("_ERROR") >= 0) {
            node.color = "red";
        } else if (node.label == "INIT" || node.label == "FINAL") {
            node.color = "green";
        }
        if (node.color) {
            node.style = "fill: " + colors[node.color];
        }
    });

    graph.edges().forEach(function(e) {
        var edge = graph.edge(e);
        edge.label = edge.label.replace(/_EVENT/g, '');
    });
    
    return graph;
}

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

    var render = new dagreD3.render();
    render(inner, graph);

    var initialScale = 0.8;
    zoom.translate([
        (svg.attr("width") - graph.graph().width * initialScale) / 2, 20
    ]).scale(initialScale).event(svg);
    svg.attr('height', graph.graph().height * initialScale + 40);
}

var sideNav = $(".col-md-3 .bs-sidenav");
var flowContaier = $("#flow-container");

for (var flow in flows) {
    $.ajax({
        async: false,
        url: "../diagrams/" + flow + ".dot",
        success: function(dot) {
            var graph = initGraphByDot(dot);
            sideNav.append('<li class="main active"><a href="#' + flow + '">' + flows[flow] + '</a></li>');
            flowContaier.append('<p><h2 id="' + flow + '">' + flows[flow] + '</h2><svg id="Svg' + flow + '" width=800 height=600><g/></svg></p>');
            var svg = d3.select("#Svg" + flow), inner = svg.select("g");
            renderSvg(svg, inner, graph);
        }
    });
}
{'fraction_non_alphanumeric': 0.19323497661029146, 'fraction_numerical': 0.016732637639438646, 'mean_word_length': 2.657236842105263, 'pattern_counts': {'":': 2, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7114197', 'n_tokens_mistral': 1925, 'n_tokens_neox': 1831, 'n_words': 393}