1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>{{ title }}</title>
5    <script
6  src="https://code.jquery.com/jquery-3.5.1.min.js"
7  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
8  crossorigin="anonymous"></script>
9
10    <meta charset="utf-8">
11
12    {{ resources }}
13
14    <style>
15      {% include 'styles.css' %}
16    </style>
17
18    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.0.6/dist/d3-flamegraph.css">
19
20<script
21  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
22  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
23  crossorigin="anonymous"></script>
24    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
25    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3-flame-graph@4.0.6/dist/d3-flamegraph.min.js"></script>
26
27  </head>
28  <body>
29    <div id="help_dialog" class="dialog">
30      <div class="dialog_area">
31        <span class="dialog_close">&times;</span>
32          <p> <b>Main plot (upper left):</b> pan with click+mouse movement, zoom in/out with the mouse
33          wheel, hover on sample clusters to see backtraces. Select samples with the rectangular
34          selection tool or by clicking on them. Select holding shift to add or ctrl+shift to
35          remove samples to or from the selection. Different tools can be enabled/disabled from
36          the toolbox.</p>
37          <p><b>Flame graph (upper right):</b> click on specific items to zoom in.</p>
38          <p><b>Sample table (lower right):</b> select processes to filter in the Flame graph.</p>
39      </div>
40    </div>
41
42    <div class="top_right">
43      <button id="help_button" class="help" text-align="right">HELP</button>
44    </div>
45    <div class="left"> {{ plot_div.graph }} </div>
46    <div class="middle_right">
47      <div id="flame"/>
48    </div>
49
50    <div class="bottom_right">
51      <div style="display: flex; justify-content: space-around">
52        <div>
53          <label for="regex">Filter by regex:</label>
54          <input type="text" id="regex" oninput="update_selections()"/>
55        </div>
56        <div>
57          Invert callstack <input type="checkbox" id="inverted_checkbox" onclick="update_selections()">
58        </div>
59      </div>
60      {{ plot_div.table }}
61    </div>
62
63    <script>{% include 'main.js' %}</script>
64    {{ plot_script }}
65  </body>
66</html>
67