{% extends "cacsremoteservice/views/layouts/analysis-view.html" %}

{% block scripts %}
<script>
codescene.views.analyses.xray.init({
  projectId: '{{project-id}}',
  analysisId: '{{analysis-id}}',
  fileName: '{{file-name}}',
  hotspotChangeDistributionUrl: '{{hotspots-csv-file-name}}',
  internalTemporalCouplingEdgeBundleUrl: '{{temporal-edge-bundle-json}}',
  hotspotChangeFrequenciesUrl:  '{{hotspots-csv-file-name}}',
  xrayLimitsUrl: '{{xray-limits}}',
  xrayRecommendationsUrl: '{{xray-recommendations}}',
  statsUrl: '{{xray-stats}}',
  product: 'enterprise',
  viewContext: '{{ view-context }}'
});
</script>
{% endblock %}

{% block analysis-presentation %}
<h1>
  X-Ray Results
</h1>
<p class="lead">
Function or method level analytics.<a href="{{view-context}}/docs/guides/technical/xray.html" target="_blank" class="help-link pull-right">
  <i class="fa fa-question-circle"></i>
</a>

</p>
  
{% endblock %}

{% block main-content %}
<div class="xray-view">
    <div class="row">
        <div class="col-xs-12">

            <ol class="breadcrumb">
                <li>
                    <a href="{{view-context}}/{{project-id}}/analyses/{{analysis-id}}/code/hotspots">Hotspots</a>
                </li>
                <li class="active">{{file-name}}</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="xray-file-details" id="xray-file-details"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="progress-indicator"></div>
            <div class="error"></div>
        </div>
    </div>
    <div class="row content on-load">
        <div class="tab-list-wrapper">
            <ul class="nav tabs">
                <li data-tab-id="hotspots"><a href="#hotspots">Hotspots</a></li>
                <li data-tab-id="internal-temporal-coupling" class="active"><a href="#internal-temporal-coupling">Internal Change Coupling</a></li>
                <li data-tab-id="external-temporal-coupling"><a href="#external-temporal-coupling">External Change Coupling</a></li>
                <li data-tab-id="external-temporal-coupling-details"><a href="#external-temporal-coupling-details">External Change Coupling Details</a></li>
                <li data-tab-id="structural-recommendations"><a href="#structural-recommendations">Structural Recommendations</a></li>
                <li data-tab-id="change-frequency-distribution"><a href="#change-frequency-distribution">Change Frequency Distribution</a></li>
            </ul>
            <div class="controls-tab hidden">
                <span>
                    <i id="less-tab" class="fa fa-chevron-left"></i>
                    <i id="more-tab" class="fa fa-chevron-right"></i>
                </span>
            </div>
        </div>
        <div class="col-xs-12 xray-tabs-wrapper">
            <div class="tab-content">
                <div class="tab active" data-tab-id="hotspots">
                    <div id="top-hotspots"></div>
                    <div id="revisions-limit"></div>
                </div>

                <div class="tab" data-tab-id="internal-temporal-coupling">
                    <div class="page-section">
                        <div id="internal-temporal-coupling-details">
                            <div id="internal-details-table" class="coupling-table"></div>
                        </div>
                    </div>
                </div>

                <div class="tab" data-tab-id="external-temporal-coupling">
                    <div id="external-temporal-cluster-dependencies"></div>
                </div>

                <div class="tab" data-tab-id="external-temporal-coupling-details">
                    <div id="external-temporal-cluster-details" class="coupling-table"></div>
                </div>

                <div class="tab" data-tab-id="structural-recommendations">
                    <div id="structural-recommendations" class="coupling-table"></div>
                </div>

                <div class="tab" data-tab-id="change-frequency-distribution">
                    <h2>Change Frequency Distribution</h2>
                    <p class="text-muted">
                        Use the lower graph to <em>zoom</em> and <em>pan</em> by drawing a rectangle around the area of interest with your mouse.
                    </p>
                    <div id="hotspotdistro"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}