expression_graph.html

{% extends 'base.html' %}

{% block title %}
    {% if node %}
        {{ node.probe }} expression graph
    {% elif cluster %}
        {{ cluster.name }} expression graph
    {% elif cluster_one %}
        {{ cluster_one.name }} vs {{ cluster_two.name }} graph comparison
    {% elif sequence %}
        {{ sequence.name }} ecc graph
    {% elif graph_data %}
        Custom network graph
    {% elif ecc_pair %}
        ECC Pair graph
    {% elif ecc_multi %}
        ECC Network
    {% endif %}
{% endblock %}

{% block container %}
</div> <!--close the container in base.html-->
<div id="full_width">
             <div style="padding-left:15px;padding-right:15">
            {% if node %}
            <h1>Co-expression neighborhood: <strong>{{ node.probe }}</strong> <small>({{ node.method.description }})</small></h1>
            {% elif cluster %}
            <h1>Co-expression cluster: <strong>{{ cluster.name }}</strong> <small>({{ cluster.method.method }})</small></h1>
            {% import "macros/cluster_actions.html" as ca %}
            <p><strong>View as: </strong>{{ ca.cluster_actions(cluster.id, exclude=["graph"]) }}</p>
            {% elif cluster_one %}
            <h1>Comparing clusters: <strong>{{ cluster_one.name }}</strong> vs <strong>{{ cluster_two.name }}</strong></h1>
            <span class="text-muted">(<strong>Note:</strong> Only genes which have a homolog in another cluster are shown)</span>
            {% elif sequence %}
            <h1><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='ecc') }}" data-target="#helpModal">ECC</abbr> network: <strong>{{ sequence.name }}</strong></h1>
            {% elif graph_data %}
            <h1>Custom network</h1>
            {% elif ecc_pair %}
            <h1>ECC pair</h1>
            {% elif ecc_multi %}
            <h1>ECC multi</h1>
            {% endif %}
             </div>
            <div class="clearfix">
                    <div class="pull-right">
                        <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h fa-rotate-45" data-toggle="tooltip" title="Reset View"></i></button>
                            <div class="input-group" style="width:200px;display: inline-table;vertical-align: middle;">
                            <input type="text" class="form-control" placeholder="Search Nodes" id="cy-search-term">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" id="cy-search" search-url="{{ url_for('search.search_json_genes', label='')}}"><i class="fa fa-search" id="search_logo"></i><i class="fa fa-spinner fa-pulse" style="display:none" id="search_spinner"aria-hidden="true"></i></button>
                            </span>
                            </div>
                        <div class="btn-group" role="group" aria-label="Layout buttons">
                            <div class="dropdown btn-group" role="group">
                                <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown"><i class="fa fa-circle" aria-hidden="true" data-toggle="tooltip" title="Node Options"></i> <span class="caret"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right cy-option-menu">
                                    <li class="dropdown-header">Nodes show</li>
                                    <li><a href="#" class="cy-node-color" attr="color">No Feature</a></li>
                                    <li><a href="#" class="cy-node-color" attr="family_clade_color">Clade</a></li>
                                    {% if graph_data %}
                                    <li><a href="#" class="cy-node-color" attr="cluster_color">Cluster</a></li>
                                    {% endif %}
                                    {% if node %}
                                    <li><a href="#" class="cy-node-color" attr="depth_color">Depth</a></li>
                                    {% endif %}
                                    <li><a href="#" class="cy-node-color" attr="family_color">Family {%- if not (ecc_pair or ecc_multi) -%} <span class="text-muted">(default)</span>{%- endif -%}</a></li>
                                    <li><a href="#" class="cy-node-color" attr="lc_color">Label Co-occ.</a></li>
                                    {% if cluster or cluster_one %}
                                    <li><a href="#" class="cy-node-color" attr="neighbors">Neighbors</a></li>
                                    {% endif %}
                                    {% if sequence or ecc_pair or ecc_multi %}
                                    <li><a href="#" class="cy-node-color" attr="species_color">Species {%- if ecc_pair or ecc_multi -%} <span class="text-muted">(default)</span>{%- endif -%}</a></li>
                                    {% endif %}
                                    {% if graph_data %}
                                    <li><a href="#" class="cy-node-color" attr="spm_color">Specificity</a></li>
                                    {% endif %}
                                    <div style="display:none">
                                        <li><a href="#" class="cy-node-shape" attr="shape">Default</a></li>
                                        <li><a href="#" class="cy-node-shape" attr="family_clade_shape">Clade</a></li>
                                        {% if graph_data %}
                                        <li><a href="#" class="cy-node-shape" attr="cluster_shape">Cluster</a></li>
                                        {% endif %}
                                        <li><a href="#" class="cy-node-shape" attr="family_shape">Family</a></li>
                                        <li><a href="#" class="cy-node-shape" attr="lc_shape">Label Co-occ.</a></li>
                                        {% if graph_data %}
                                        <li><a href="#" class="cy-node-shape" attr="spm_shape">Specificity</a></li>
                                        {% endif %}
                                    </div>
                                    {% if ecc_pair or ecc_multi %}
                                    <li><hr /></li>
                                    <li class="dropdown-header">Neighborhood comparison</li>
                                    <li><a href="#" class="cy-node-hide">Show Only Intersection</a><a href="#" class="cy-node-show" style="display:none">Show All</a></li>
                                    {% endif %}
                                </ul>
                            </div>
                            <div class="dropdown btn-group" role="group">
                                <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown"><i class="fa fa-link" aria-hidden="true" data-toggle="tooltip" title="Edge Options"></i> <span class="caret"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right cy-option-menu" style="width:250px">
                                    <li class="dropdown-header">Edge Color</li>
                                    <li><a href="#" class="cy-edge-color" attr="color">No Feature <span class="text-muted">(default)</span></a></li>
                                    {% if node %}
                                    <li><a href="#" class="cy-edge-color" attr="depth_color">Depth</a></li>
                                    <li><a href="#" class="cy-edge-color" attr="link_pcc">PCC</a></li>
                                    <li><a href="#" class="cy-edge-color" attr="hrr">HRR</a></li>
                                    {% elif ecc_pair or ecc_multi %}
                                    <li><a href="#" class="cy-edge-color" attr="ecc_pair_color">Type</a></li>
                                    {% elif not sequence %}
                                    <li><a href="#" class="cy-edge-color" attr="link_score">Score</a></li>
                                    <li><a href="#" class="cy-edge-color" attr="link_pcc">PCC</a></li>
                                    <li><a href="#" class="cy-edge-color" attr="hrr">HRR</a></li>
                                    {% else %}
                                    <li><a href="#" class="cy-edge-color" attr="ecc_score">ECC</a></li>
                                    <li><a href="#" class="cy-edge-color" attr="ecc_type">ECC type</a></li>
                                    {% endif %}

                                    <li class="dropdown-header">Edge Width</li>
                                    <li><a href="#" class="cy-edge-width" attr="default_width">Default</a></li>
                                    {% if node %}
                                    <li><a href="#" class="cy-edge-width" attr="depth">Depth</a></li>
                                    {% endif %}
                                    {% if sequence %}
                                    <li><a href="#" class="cy-edge-width" attr="ecc_width">ECC</a></li>
                                    {% endif %}
                                    {% if not sequence and not ecc_pair and not ecc_multi %}
                                    <li><hr /></li>
                                    <li class="dropdown-header"><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='hrr') }}" data-target="#helpModal">HRR</abbr> Filter</li>
                                    <li><p><strong>Cutoff:</strong> <span id="cy-edge-score-value" class="text-muted">{{cutoff}}</span></p></li>
                                    <li class="text-center"><input id="cy-edge-score" data-slider-id='cy-edge-score-slider' type="text" data-slider-min="0" data-slider-max="{{cutoff}}" data-slider-step="1" data-slider-value="{{cutoff}}" data-slider-tooltip="hide"/></li>
                                    {% endif %}
                                </ul>
                            </div>
                            <div class="dropdown btn-group" role="group">
                                <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown"><i class="fa fa-cog" aria-hidden="true" data-toggle="tooltip" title="Other Options"></i> <span class="caret"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right" style="width:200px">
                                    <li class="dropdown-header">Layout</li>
                                    <li><a href="#" class="cy-layout" layout="breadthfirst">Breadthfirst</a></li>
                                    <li><a href="#" class="cy-layout" layout="circle">Circle</a></li>
                                    <li><a href="#" class="cy-layout" layout="concentric">Concentric</a></li>
                                    <li><a href="#" class="cy-layout" layout="cose">Cose</a></li>
                                    <li><a href="#" class="cy-layout" layout="grid">Grid</a></li>
                                    <li><a href="#" class="cy-layout" layout="random">Random</a></li>
                                    {% if node and depth > 0 %}
                                    <li><hr /></li>
                                    <li class="dropdown-header">Depth</li>
                                    <li>
                                        <div class="text-center">
                                            <div class="btn-group" role="group">
                                                <a href="#" role="button" class="btn btn-primary cy-depth-filter" cutoff=1>Direct</a>
                                                <a href="#" role="button" class="btn btn-primary cy-depth-filter active" cutoff=2>2<sup>nd</sup> Degree</a>
                                            </div>
                                        </div>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown btn-group" role="group">
                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-download" aria-hidden="true" data-toggle="tooltip" title="Export"></i> <span class="caret"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">Export</li>
                                    <li><a data-toggle="modal"  data-target="#data_modal" style="cursor:pointer">Data</a></li>
                                    <li><a data-toggle="modal"  data-target="#image_modal" style="cursor:pointer">Image</a></li>
                                </ul>
                        </div>
                    </div>
                </div>
            <div id="loading">
                <svg id="svg2" xmlns="http://www.w3.org/2000/svg" height="150" width="150" version="1.1">
                 <defs id="defs4">
                  <linearGradient id="linearGradient4293">
                   <stop id="stop4295" stop-color="#009717" offset="0"/>
                   <stop id="stop4297" stop-color="#93be00" offset="1"/>
                  </linearGradient>
                  <linearGradient id="linearGradient4303" y2="243.98" xlink:href="#linearGradient4293" gradientUnits="userSpaceOnUse" x2="355.3" gradientTransform="matrix(.28958 .0066463 -.0047047 .20498 -26.416 -37.275)" y1="633.81" x1="193"/>
                  <linearGradient id="linearGradient4305" y2="243.98" xlink:href="#linearGradient4293" gradientUnits="userSpaceOnUse" x2="355.3" y1="633.81" x1="193"/>
                 </defs>
                 <g id="leaf_pairs" fill-rule="evenodd" transform="matrix(.16999 0 0 .16999 -3.6935 -12.234)">
                  <g class="gsap_start_hidden leaf_pair_01">
                   <path id="path4150" d="m124.26 509.36c1.6371-1.5401 52.694-2.3206 69.432 14.365 7.9701 7.9453 12.095 13.336 6.9432 33.04-3.5384 13.534-36.383 1.2024-45.969-11.492-15.522-20.556-17.938-27.546-30.406-35.913z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4152" d="m322.26 528.99c-0.82456-3.2982-42.199-23.901-63.207-15.562-23.501 9.328-31.924 40.351-30.167 39.983-1.6704 2.0879 29.042 12.067 42.617 7.422 13.574-4.6447 26.092-23.153 50.757-31.843z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4336" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m295.02 524.9c-13.774-0.21744-26.061 1.716-36.779 5.9316-17.15 6.745-29.858 17.406-38.442 36.151-0.59589 1.2273-0.11684 6.3666 0.4223 5.1133 8.4066-18.356 22.068-32.841 38.752-39.403 16.684-6.5619 37.633-7.94 62.243-3.5788l0.41165-0.0542 0.11117-0.11634c1.2937 0.006 1.1286-0.4709-0.16238-0.55545l0.0213-0.0233c-9.2768-1.6388-18.346-3.335-26.578-3.4649z" fill="#114b00"/>
                   <path id="path4346" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m125.89 508.66c-1.1662 0.009-1.5954 0.9256-0.46804 1.2243 8.0817 2.2824 30.205 7.1287 41.327 13.785 11.122 6.6566 20.965 15.359 40.054 48.738 0.91706 1.032 1.5537-4.1685 0.56732-5.1343-17.327-31.218-28.191-38.494-39.594-45.318-11.403-6.8245-34.322-10.686-42.142-12.894-0.0956-0.029-0.525-0.0435-0.6249-0.043z" fill="#114b00"/>
                  </g>
                  <g class="gsap_start_hidden leaf_pair_02">
                   <path id="path4154" d="m206.62 475.84c9.6471-8.6564-1.0796-40.345-22.745-44.772-31.346-6.4039-41.072-5.5034-56.264-9.098 10.482 5.1848 28.686 36.537 40.701 48.602 9.0952 9.1329 39.213 7.7593 38.307 5.2672z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4156" d="m347.4 454.29s-36.903-6.0877-59.616-6.7038c-31.137-0.84459-47.019 35.234-43.335 36.871-2.3335 1.4585 16.667 17.286 42.377 7.1826 21.86-8.59 55.711-36.809 60.573-37.35z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4338" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m343.47 453.74c-67.953-0.73324-97.791 19.699-118.54 49.355-0.79615 1.0979-0.55763 6.3906 0.20094 5.2664 20.502-29.307 52.998-54.34 120.51-53.612 1.3455 0.0268 0.70731-0.84296-0.63846-0.84506z" fill="#114b00"/>
                   <path id="path4348" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m129.84 422.44c-1.0517-0.0286-0.68991 0.36633 0.23497 0.86781 18.418 10.339 37.273 13.422 51.418 21.578 14.145 8.1555 25.909 23.984 31.907 60.811 0.21328 1.3168 2.9396-2.5925 2.7257-3.9091-6.0489-37.135-18.98-50.187-33.633-58.636-14.653-8.4487-33.535-10.227-51.556-20.343-0.14447-0.0839-0.92986-0.36352-1.0968-0.36811z" fill="#114b00"/>
                  </g>
                  <g class="gsap_start_hidden leaf_pair_03">
                   <path id="path4158" d="m223.86 400.9c2.9975 0.99917 10.559-19.002 6.4644-28.012-12.114-26.654-82.486-32.347-92.895-37.35 5.7011 3.1444 39.361 66.073 51.715 69.192 15.786 3.9864 28.676 0.0552 34.716-3.8307z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4160" d="m363.38 396.85c1.3509-2.7018-46.137-11.108-70.399-11.264-26.153-0.16807-40.023 33.279-38.077 34.526-2.7614 2.9981 18.735 25.92 41.627 15.916 23.667-10.342 66.849-39.179 66.849-39.179z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4340" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m361.22 395.95c-29.247 0.61794-55.868 3.2465-77.498 9.7676s-39.159 15.066-48.274 31.357c-0.65104 1.1641 0.37948 5.5992 1.0305 4.4351 8.7849-15.702 26.484-27.444 47.822-33.877 21.338-6.4329 49.207-9.8438 78.36-10.46 1.3333-0.0287 1.2995-0.91472-0.0339-0.88605z" fill="#114b00"/>
                   <path id="path4350" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m140.06 336.48c-0.99766-0.0266-0.56007 0.69255 0.26463 1.2546 14.895 7.0324 36.829 14.981 55.799 27.344s33.78 33.856 29.109 73.841c-0.1818 1.3452 3.2838-1.1001 3.4175-2.451 4.7368-40.541-12.028-60.418-31.434-73.065s-42.439-19.729-56.576-26.47c-0.16346-0.11824-0.37852-0.44754-0.5802-0.45271z" fill="#114b00"/>
                  </g>
                  <g class="gsap_start_hidden leaf_pair_04">
                   <path id="path4162" d="m250.25 337.6c1.4633 0.69177 15.49-25.007 0.00001-40.158-20.066-19.627-45.278-22.429-69.787-28.405 2.2284 1.411 15.718 50.723 35.506 64.4 11.947 8.2571 34.618 5.5097 34.281 4.1627z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4164" d="m273.52 353.76c-2.0279-0.46089 15.092-26.86 40.893-27.18 22.291-0.27667 60.241 7.7985 63.665 7.1011 0.77973 0.0875-37.577 24.498-61.217 35.016-29.665 13.199-50.135-7.0568-43.341-14.937z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4342" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m377.16 333.69c-0.0235 0.001-0.0703 0.006-0.0703 0.006-28.137 2.4376-56.223 5.5047-78.161 10.525-21.938 5.0207-38.984 11.243-44.368 23.589-0.60481 1.2489 0.8615 4.0532 1.3651 2.7601 4.8942-11.224 21.72-19.427 43.451-24.4 21.731-4.9734 49.591-9.2452 77.715-11.682 1.3321-0.0689 1.2104-0.93145-0.12168-0.86238z" fill="#114b00"/>
                   <path id="path4352" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m181.44 269.31c-1.0482-0.0175-0.79223 0.46364 0.13119 0.96001 22.788 12.589 43.543 26.972 55.404 42.305 11.862 15.334 16.452 34.347 8.6732 54.949-0.47135 1.2474 2.5271 0.10963 2.9985-1.1378 7.9955-21.176 2.0771-39.308-10.09-55.036s-33.838-29.178-56.726-41.823c-0.14541-0.0828-0.22392-0.21506-0.39117-0.21812z" fill="#114b00"/>
                  </g>
                  <g class="gsap_start_hidden leaf_pair_05">
                   <path id="path4166" d="m283.87 272.44c1.7352-0.91851 7.9462-19.061 3.846-33.283-5.975-20.725-46.572-35.978-47.749-36.73 1.8138 0.73988 3.7974 39.966 12.243 59.258 6.9738 15.929 29.925 11.674 31.66 10.755z" stroke="#114b00" stroke-linecap="round" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4168" d="m303.87 284.11c-1.2314-0.48378 10.736-24.39 34.629-23.721 18.056 0.50579 53.849 6.0602 53.849 6.0602-5.7438-0.89456-42.065 33.913-61.814 31.686-16.35-1.8436-28.705-13.397-26.665-14.025z" stroke="#114b00" stroke-width="1px" fill="url(#linearGradient4305)"/>
                   <path id="path4344" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m389.23 266.08-0.0703 0.006c-27.985 2.8066-51.525 6.2886-67.902 10.839-16.377 4.5503-28.773 8.3913-34.292 14.83-0.86849 1.013 0.38852 4.575 1.257 3.562 5.0287-5.8674 17.369-11.965 33.57-16.466 16.201-4.5012 40.794-9.356 68.709-12.156 1.2692-0.13775 0.005-0.64166-1.2717-0.61487z" fill="#114b00"/>
                   <path id="path4354" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m241.11 203.04c-0.89692 0.0138-0.90268 0.47885-0.25099 1.0952 14.527 14.143 28.078 30.756 35.036 44.547 6.9581 13.791 8.3598 29.952 4.598 43.27-0.42115 1.315 3.5369-0.77275 3.8654-2.1139 3.918-13.871 0.43532-27.957-6.6783-42.057-7.1136-14.099-21.228-30.216-35.848-44.449-0.19133-0.19142-0.45206-0.29712-0.72266-0.29297z" fill="#114b00"/>
                  </g>
                </g>
                <path class="gsap_start_hidden stem" d="m30.724 100.48c1.072-55.803 16.195-69.278 30.949-83.863-25.171 23.733-28.283 53.519-28.418 84.123z" stroke="#114b00" stroke-width=".16999px" fill="url(#linearGradient4303)"/>

                </svg>
            </div>
            {% if node %}
            <div id="cy" json="{{ url_for('expression_network.expression_network_json', node_id=node.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif cluster %}
            <div id="cy" json="{{ url_for('expression_cluster.expression_cluster_json', cluster_id=cluster.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif cluster_one %}
            <div id="cy" json="{{ url_for('graph_comparison.graph_comparison_cluster_json', one=cluster_one.id, two=cluster_two.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif sequence %}
            <div id="cy" json="{{ url_for('ecc.ecc_graph_json', sequence=sequence.id, network=network_method_id, family=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif graph_data %}
            <div id="cy" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif ecc_pair %}
            <div id="cy" json="{{ url_for('ecc.ecc_graph_pair_json', ecc_id = ecc_pair.id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif ecc_multi %}
            <div id="cy" json="{{ url_for('ecc.ecc_graph_multi_json') }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% endif %}


    <hr />
    <div class="text-center">
        <div id="legend" url="{{ url_for('static', filename='svg/legend.svg') }}"></div>
    </div>

</div>
<div class="modal" id="data_modal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document" style="width:1000px;height:800px;">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title" id="dataModalLabel"><strong>Export Data</strong></h4>
            </div>
            <div class="modal-body" syle="width:700px;min-height:200px">
                <button class="btn btn-primary" id="cy-download-xgmml">XGMML</button> <span class="text-muted">(compatible with <a href="http://www.cytoscape.org/">Cytoscape</a>)</span>
                <hr />
                <h3>Other formats, compatible with <a href="http://js.cytoscape.org/">Cytoscape.js</a></h3>
                <button class="btn btn-default" id="cy-download-json">JSON</button> <span class="text-muted">(network only)</span> <br/><br/>
                <button class="btn btn-default" id="cy-download-jsoncy">JSON</button> <span class="text-muted">(network + colors/shapes)</span> <br/><br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
</div>

<div class="modal" id="image_modal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel">
    <div class="modal-dialog" role="document" style="width:1000px;height:800px;">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title" id="imageModalLabel"><strong>Export Image</strong></h4>
            </div>
            <div class="modal-body" style="width:700px;min-height:200px">
                <table>
                    <tbody>
                    <tr>
                        <td class="col-md-3"><strong>Image with Legend</strong></td>
                        <td class="col-md-9"><button class="btn btn-primary" id="cy-download-svg-with-legend">SVG</button> <button class="btn btn-primary"  id="cy-download-png-with-legend">PNG</button></td>
                    </tr>
                    <tr><td colspan="2"><br /></td></tr>
                    <tr><td colspan="2">Other Options</td></tr>
                    <tr><td colspan="2"><hr /></td></tr>
                    <tr>
                        <td class="col-md-3"><strong>Image</strong></td>
                        <td class="col-md-9"><button class="btn btn-default" id="cy-download-svg">SVG</button> <button class="btn btn-default" id="cy-download-img-lowres">PNG</button></td>
                    </tr>
                    <tr><td><br /></td></tr>
                    <tr>
                        <td class="col-md-3"><strong>Legend</strong></td>
                        <td class="col-md-9"><button class="btn btn-default" id="cy-download-svg-legend">SVG</button> <button class="btn btn-default"  id="cy-download-png-legend">PNG</button></td>
                    </tr>
                    <tr><td><br /></td></tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
</div>
{% endblock %}

{% block extrajs %}
<script src="{{ url_for('static', filename='js/bootstrap-slider.min.js') }}"></script>
<script>
$( document ).ready(function() {
                $('#footer').hide(2000);
                $('[data-toggle="tooltip"]').tooltip();
                $('#cy-edge-score').slider({
                    formatter: function(value) {
                        return 'Cut-off: ' + value;
                    }
                });
                $('#cy-edge-score').on("slide", function(slideEvt) {
                    $("#cy-edge-score-value").text(slideEvt.value);
                });
});
</script>
{% if graph_data %}
<script>
$(function(){
    graph_data = {{ graph_data }};
});
</script>
{% endif %}
<script src="{{ url_for('static', filename='js/pablo.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_svg_legend.js') }}"></script>
<script src="{{ url_for('static', filename='js/XMLWriter-1.0.0-min.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_xgmml.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_svg.js') }}"></script>

<script src="{{ url_for('static', filename='js/cytoscape.min.js') }}"></script>

<!--<script src="{{ url_for('static', filename='js/cytoscape-cose-bilkent.js') }}"></script>-->
<script src="{{ url_for('static', filename='js/cytoscape-qtip.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_graph.js') }}"></script>
<script>
$(document).ready(function () {
    init_planet_loader('');
});
</script>

{% endblock %}