<commit_before>{% extends "airflow/dag.html" %}
{% import 'admin/lib.html' as lib with context %}
{% import 'admin/static.html' as admin_static with context %}

{% block title %}Airflow - DAGs{% endblock %}

{% block head_css %}
{{ super() }}
<link rel="stylesheet" type="text/css"
    href="{{ url_for('static', filename='dagre.css') }}">
<link rel="stylesheet" type="text/css"
    href="{{ url_for('static', filename='graph.css') }}">
<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
{{ super() }}
    {% if dag.doc_md %}
        <div class="rich_doc" style="margin-bottom: 15px;">{{ doc_md|safe }}</div>
    {% endif %}
    <div class="form-inline">
        <form method="get" style="float:left;">
            Run:
            {{ form.execution_date(class_="form-control") | safe }}
            Layout:
            {{ form.arrange(class_="form-control") | safe }}
            <input type="hidden" name="root" value="{{ root }}">
            <input type="hidden" value="{{ dag.dag_id }}" name="dag_id">
            <input type="submit" value="Go" class="btn btn-default"
            action="" method="get">
        </form>
            <div class="input-group" style="float: right;">
              <input type="text" id="searchbox" class="form-control" placeholder="Search for..." onenter="null">
            </div><!-- /input-group -->
        <div style="clear: both;">

    </div>
<hr/>
<div>
    {% for op in operators %}
    <div class="legend_item" style="border-width:1px;float:left;background:{{ op.ui_color }};color:{{ op.ui_fgcolor }};">
        {{ op.__name__ }}
    </div>
    {% endfor %}

    <div class="legend_item state" style="border-color:grey;">no status</div>
    <div class="legend_item state" style="border-color:red;">failed</div>
    <div class="legend_item state" style="border-color:lime;">running</div>
    <div class="legend_item state" style="border-color:green;">success</div>
    <div style="clear:both;"></div>
</div>
<hr style="margin-bottom: 0px;"/>
<div id="svg_container">
    <svg width="{{ width }}" height="{{ height }}">
      <g id='dig' transform="translate(20,20)"/>
      <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="3" />
      </filter>
  </svg>
</div>
<hr>
{% endblock %}

{% block tail %}
    {{ super() }}

    <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='dagre-d3.js') }}"></script>
    <script src="{{ admin_static.url(
      filename='vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ admin_static.url(filename='admin/js/form-1.0.0.js') }}"></script>
    <script>
    var nodes = {{ nodes|safe }};
    var edges = {{ edges|safe }};
    var tasks = {{ tasks|safe }};
    var task_instances = {{ task_instances|safe }};
    var execution_date = "{{ execution_date }}";
    var arrange = "{{ arrange }}";
    var g = dagreD3.json.decode(nodes, edges);
    var duration = 500;
    var stateFocusMap = {'no status':false, 'failed':false, 'running':false, 'success': false}


    var layout = dagreD3.layout().rankDir(arrange).nodeSep(15).rankSep(15);
    var renderer = new dagreD3.Renderer();
    renderer.layout(layout).run(g, d3.select("#dig"));

    // Assigning css classes based on state to nodes for border coloring
    $.each(task_instances, function(task_id, ti) {
      $('tspan').filter(function(index) { return $(this).text() === task_id; })
        .parent().parent().parent()
        .attr("class", "node enter " + ti.state)
        .attr("data-toggle", "tooltip")
        .attr("title", function(d) {
          // Tooltip
          task = tasks[task_id];
          tt = "Operator: " + task.task_type + "<br>";
          tt += "State: " + ti.state + "<br>";
          tt += "Start: " + ti.start_date + "<br>";
          tt += "End: " + ti.end_date + "<br>";
          tt += "Duration: " + ti.duration + "<br>";
          return tt;
        });
    });
    
    d3.selectAll("g.node").on("click", function(d){
        task = tasks[d];
        if (task.task_type == "SubDagOperator")
            call_modal(d, execution_date, true);
        else
            call_modal(d, execution_date);
    });

    {% if blur %}
    d3.selectAll("text").attr("class", "blur");
    {% endif %}

    $("g.node").tooltip({
      html: true,
      container: "body",
    });

    d3.selectAll("div.legend_item.state")
        .style("cursor", "s-resize")
        .on("mouseover", function(){
            if(!stateIsSet()){
                state = d3.select(this).text();
                focusState(state);
            }
        })
        .on("mouseout", function(){
            if(!stateIsSet()){
                clearFocus();
            }
        });

    d3.selectAll("div.legend_item.state")
        .style("cursor", "s-resize")
        .on("click", function(){
            state = d3.select(this).text();
            color = d3.select(this).style("border-color");

            if (!stateFocusMap[state]){
                clearFocus();
                focusState(state, this, color);
                setFocusMap(state);

            } else {
                clearFocus();
                setFocusMap();
            }
        });

    d3.select("#searchbox").on("keyup", function(){
        var s = document.getElementById("searchbox").value;
        var match = null;

        if (stateIsSet){
            clearFocus();
            setFocusMap();
        }
<commit_msg>Changed cursor from resize to pointer for legenditems<commit_after>{% extends "airflow/dag.html" %}
{% import 'admin/lib.html' as lib with context %}
{% import 'admin/static.html' as admin_static with context %}

{% block title %}Airflow - DAGs{% endblock %}

{% block head_css %}
{{ super() }}
<link rel="stylesheet" type="text/css"
    href="{{ url_for('static', filename='dagre.css') }}">
<link rel="stylesheet" type="text/css"
    href="{{ url_for('static', filename='graph.css') }}">
<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
{{ super() }}
    {% if dag.doc_md %}
        <div class="rich_doc" style="margin-bottom: 15px;">{{ doc_md|safe }}</div>
    {% endif %}
    <div class="form-inline">
        <form method="get" style="float:left;">
            Run:
            {{ form.execution_date(class_="form-control") | safe }}
            Layout:
            {{ form.arrange(class_="form-control") | safe }}
            <input type="hidden" name="root" value="{{ root }}">
            <input type="hidden" value="{{ dag.dag_id }}" name="dag_id">
            <input type="submit" value="Go" class="btn btn-default"
            action="" method="get">
        </form>
            <div class="input-group" style="float: right;">
              <input type="text" id="searchbox" class="form-control" placeholder="Search for..." onenter="null">
            </div><!-- /input-group -->
        <div style="clear: both;">

    </div>
<hr/>
<div>
    {% for op in operators %}
    <div class="legend_item" style="border-width:1px;float:left;background:{{ op.ui_color }};color:{{ op.ui_fgcolor }};">
        {{ op.__name__ }}
    </div>
    {% endfor %}

    <div class="legend_item state" style="border-color:grey;">no status</div>
    <div class="legend_item state" style="border-color:red;">failed</div>
    <div class="legend_item state" style="border-color:lime;">running</div>
    <div class="legend_item state" style="border-color:green;">success</div>
    <div style="clear:both;"></div>
</div>
<hr style="margin-bottom: 0px;"/>
<div id="svg_container">
    <svg width="{{ width }}" height="{{ height }}">
      <g id='dig' transform="translate(20,20)"/>
      <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="3" />
      </filter>
  </svg>
</div>
<hr>
{% endblock %}

{% block tail %}
    {{ super() }}

    <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='dagre-d3.js') }}"></script>
    <script src="{{ admin_static.url(
      filename='vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ admin_static.url(filename='admin/js/form-1.0.0.js') }}"></script>
    <script>
    var nodes = {{ nodes|safe }};
    var edges = {{ edges|safe }};
    var tasks = {{ tasks|safe }};
    var task_instances = {{ task_instances|safe }};
    var execution_date = "{{ execution_date }}";
    var arrange = "{{ arrange }}";
    var g = dagreD3.json.decode(nodes, edges);
    var duration = 500;
    var stateFocusMap = {'no status':false, 'failed':false, 'running':false, 'success': false}


    var layout = dagreD3.layout().rankDir(arrange).nodeSep(15).rankSep(15);
    var renderer = new dagreD3.Renderer();
    renderer.layout(layout).run(g, d3.select("#dig"));

    // Assigning css classes based on state to nodes for border coloring
    $.each(task_instances, function(task_id, ti) {
      $('tspan').filter(function(index) { return $(this).text() === task_id; })
        .parent().parent().parent()
        .attr("class", "node enter " + ti.state)
        .attr("data-toggle", "tooltip")
        .attr("title", function(d) {
          // Tooltip
          task = tasks[task_id];
          tt = "Operator: " + task.task_type + "<br>";
          tt += "State: " + ti.state + "<br>";
          tt += "Start: " + ti.start_date + "<br>";
          tt += "End: " + ti.end_date + "<br>";
          tt += "Duration: " + ti.duration + "<br>";
          return tt;
        });
    });
    
    d3.selectAll("g.node").on("click", function(d){
        task = tasks[d];
        if (task.task_type == "SubDagOperator")
            call_modal(d, execution_date, true);
        else
            call_modal(d, execution_date);
    });

    {% if blur %}
    d3.selectAll("text").attr("class", "blur");
    {% endif %}

    $("g.node").tooltip({
      html: true,
      container: "body",
    });

    d3.selectAll("div.legend_item.state")
        .style("cursor", "pointer")
        .on("mouseover", function(){
            if(!stateIsSet()){
                state = d3.select(this).text();
                focusState(state);
            }
        })
        .on("mouseout", function(){
            if(!stateIsSet()){
                clearFocus();
            }
        });

    d3.selectAll("div.legend_item.state")
        .on("click", function(){
            state = d3.select(this).text();
            color = d3.select(this).style("border-color");

            if (!stateFocusMap[state]){
                clearFocus();
                focusState(state, this, color);
                setFocusMap(state);

            } else {
                clearFocus();
                setFocusMap();
            }
        });

    d3.select("#searchbox").on("keyup", function(){
        var s = document.getElementById("searchbox").value;
        var match = null;

        if (stateIsSet){
            clearFocus();
            setFocusMap();
        }

{'fraction_non_alphanumeric': 0.19618773601870168, 'fraction_numerical': 0.006473655817299047, 'mean_word_length': 2.534477279949158, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 115, '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': '1872679', 'n_tokens_mistral': 3590, 'n_tokens_neox': 3424, 'n_words': 683}