{% extends "flamegraph.html" %}

{% block content %}
<div class="toast" style="position: absolute; top: 5%; left: 40%; z-index: 100;">
  <div class="toast-header">
    <strong class="mr-auto">How to use this plot</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    You can move the plot slider to select different ranges for the flame
    graph. The flame graph shows the allocations that are created in the
    selected range that are not deallocated before the end of the range.
  </div>
</div>
<div id="overlay" style="display: none;"></div>
<div class="chart-container">
  <div id="loading" style="display: none; z-index: 100;">
    <div class="loading-spinner"></div>
    <p>Loading...</p>
  </div>

  <div id="plot"></div>
  <div id="chart"></div>
</div>
{% endblock %}

{% block slider_help %}
<p>
  Initially the report shows allocations made at any time and not freed before
  tracking was deactivated. By using the two sliders on the bottom line chart,
  you can select a different time range for analysis instead. The flame graph
  will be updated to reflect allocations made within your chosen time window
  and not freed within it.
</p>
{% endblock %}

{% block flamegraph_script %}
<script type="text/javascript">
  {{ include_file("assets/temporal_flamegraph.js") }}
  var hideImports = false;
  var intervals = null;
  var flamegraphIntervals = null;
  var invertedNoImportsIntervals = null;
</script>
{% endblock %}
