{% extends 'base.html.j2' %}

{% block head %}
<title>{{ title }}</title>

{% endblock %}

{% block content %}

<div class="row flex-nowrap">
    <div class="col-md-4 col-12 menu">
        <div class="card">
            <div class="card-header">
                <a class="pull-right" role="button"><i class="fa" id="hide-show"></i></a>
                <h1><a href="index.html" class="link-unstyled">{{ title }}</a></h1>
                <p><a id="download" href="#">Download SVG</a></p>

            </div>

            <div class="card-body">

                <div class="form-group">
                    <input type="text" class="input" id="search_for_node" list="nodes" placeholder="search..." />
                    <datalist id="nodes">
                        {% for node in nodes %}<option value="{{ node }}">{{ node }}</option>{% endfor %}
                    </datalist>
                </div>

                <div class="form-group"><label><input type="checkbox" id="fix_nodes" name="fix_nodes" value="fix_nodes">Fix Nodes</label></div>

                <div class="form-group"><label class="mr-2">Force</label><input type="range" id="repulsion_strength" min="1" max="100" step="1" value="20"></div>

                <table class="table table-borderless table-sm pl-0" style="margin-left: -5px;">
                  <tbody>
                    <tr><th>Nodes</th></tr>
                    <tr><td>Label nodes by</td><td><select id="label_nodes_by"><option value="id" selected>ID</option></select></td></tr>
                    <tr><td>Group nodes by</td><td><select id="group_nodes_by"><option value="" selected>None</option></select></td></tr>
                    <tr><td>Shape nodes by</td><td><select id="shape_nodes_by"><option value="" selected>None</option></select></td></tr>
                    <tr><td>Size nodes by</td><td><select id="size_nodes_by"><option value="" selected>None</option></select></td></tr>
                    <tr><td>Color nodes by</td><td><select id="color_nodes_by"><option value="" selected>None</option></select></td></tr>
                    {# <tr><td>Outline nodes by</td><td><select id="outline_nodes_by"><option value="" selected>None</option></select></td></tr> #}
                    <tr><th>Edges</th></tr>
                    <tr><td>Edge opacity</td><td><input type="range" id="edge_opacity" min="0" max="1" step="0.01" value="0.6"></td></tr>
                    <tr><td>Color edges by</td><td><select id="color_edges_by"><option value="" selected>None</option></select></td></tr>
                    <tr><td>Size edges by</td><td><select id="size_edges_by"><option value="" selected>None</option></select></td></tr>
                    <tr><td>Only Show Edges</td><td><select id="only_show_edges"><option value="" selected>Show All Edges</option></select></td></tr>
                  </tbody>
                </table>

                <div class="form-group"><label>⌘+Click a node to open GeneCards</label></div>

            </div>
            <div class="card-footer">
                <small class="text-muted">This page generated by <a href="https://github.com/zfrenchee/Axial" target="_blank">Axial</a></small>
            </div>
        </div>
    </div>

    <div id="graph-container" class="col-12"></div>

</div>

{% endblock %}

{% block scripts %}

{{ scripts_block }}

<script>


g = Graph(graph);

g.render();
g.style();

continuous_node_attributes = g.continuous_node_attributes();
categorical_node_attributes = g.categorical_node_attributes();

$("#label_nodes_by").append(Object.keys(continuous_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`)
                    .concat(Object.keys(categorical_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`)));
$("#color_nodes_by").append(Object.keys(continuous_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`)
                    .concat(Object.keys(categorical_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`)));
$("#shape_nodes_by").append(Object.keys(categorical_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`));
$("#group_nodes_by").append(Object.keys(categorical_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`));
$("#size_nodes_by").append(Object.keys(continuous_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`));
// $("#outline_nodes_by").append(Object.keys(continuous_node_attributes).map(attr => `<option value="${attr}">${attr}</option>`));

continuous_edge_attributes = g.continuous_edge_attributes();
categorical_edge_attributes = g.categorical_edge_attributes();
boolean_edge_attributes = g.boolean_edge_attributes();

$("#color_edges_by").append(Object.keys(continuous_edge_attributes).map(attr => `<option value="${attr}">${attr}</option>`)
                    .concat(Object.keys(categorical_edge_attributes).map(attr => `<option value="${attr}">${attr}</option>`)));
$("#size_edges_by").append(Object.keys(continuous_edge_attributes).map(attr => `<option value="${attr}">${attr}</option>`));
$("#only_show_edges").append(Object.keys(boolean_edge_attributes).map(attr => `<option value="${attr}">${attr}</option>`));


/////////////////////////////////////////////////////////////////////////////
                ///////    Additional Features    ///////
/////////////////////////////////////////////////////////////////////////////

$("#search_for_node").on('input',  function() { g.set_focus_by_id(this.value) });
$("#fix_nodes").change(            function() { g.render({'fix_nodes_': this.checked}); });
$("#repulsion_strength").change(   function() { g.render({'repulsion_strength_': this.value}); });
$("#label_nodes_by").change(       function() { g.style({'label_nodes_by_': this.value}); });
$("#group_nodes_by").change(       function() { g.render({'group_nodes_by_': this.value}); g.style(); $("#fix_nodes").attr('disabled', this.value ? true : false); });
$("#shape_nodes_by").change(       function() { g.style({'shape_nodes_by_': this.value}); });
$("#color_nodes_by").change(       function() { g.style({'color_nodes_by_': this.value}); });
// $("#outline_nodes_by").change(     function() { g.style({'outline_nodes_by_': this.value}); });
$("#size_nodes_by").change(        function() { g.style({'size_nodes_by_': this.value}); });
$("#edge_opacity").change(         function() { g.style({'edge_opacity_': this.value}); });
$("#color_edges_by").change(       function() { g.style({'color_edges_by_': this.value}); });
$("#size_edges_by").change(        function() { g.style({'size_edges_by_': this.value}); });
$("#only_show_edges").change(      function() { g.render({'only_show_edges_': this.value}); });

/////////////////////////////////////////////////////////////////////////////
                      ///////    Download    ///////
/////////////////////////////////////////////////////////////////////////////

d3.select("#download").on("click", function() {
    d3.select(this)
      .attr("href", 'data:application/octet-stream;base64,' + btoa(unescape(encodeURIComponent(d3.select("#graph-container").html()))))
      .attr("download", "interactome.svg")
});

$('#hide-show').click(function(e) { $('.menu').toggleClass('hidden'); });


</script>

{% endblock %}


