<table id="rql-table" class="table table-striped table-condensed">
<thead>
<tr>
<th class="table-col-1">#</th>
<th class="table-col-2">Time (ms)</th>
<th class="table-col-3">RQL</th>
<th class="table-col-5">Result</th>
<th class="table-col-6">SQL</th>
<th class="table-col-7">Description</th>
<th class="table-col-8">Stack</th>
</tr>
</thead>
<tbody>
% for i, query in enumerate(rql_queries):
<tr>
<th class="table-col-1">${1 + i}</th>
<td class="table-col-2">${'%.2f' % query["time"]}</td>
<td class="table-col-3">${highlight(query["rql"], "RQL") | n}<br>${highlight(query["args"], "python3") | n}</td>
% if len(str(query["result"])) > 50:
<td id="result-${i}" class="table-col-5">
<span id="result-${i}-short">
${highlight(str(query["result"])[:50], "python3") | n}...
<a title="display more" href="javascript:show_result(${i})"><span class="badge progress-bar-default">+</span></a>
</span>
<span id="result-${i}-long" style="display: none">
${highlight(query["result"], "python3") | n}
<a title="display less" href="javascript:hide_result(${i})"><span class="badge progress-bar-warning">←</span></a>
</span>
</td>
% else:
<td class="table-col-5">${highlight(query["result"], "python3") | n}</td>
% endif
<td>
% for sql in query["generated_sql_queries"]:
<div class="well" style="padding: 3px">
${highlight(sql['sql'], "SQL") | n}
<br>
${highlight(sql['args'], "python3") | n}
</div>
% endfor
</td>
<td class="table-col-7">${highlight(query["description"], "python3") | n}</td>
<td class="table-col-8">
<a class="btn btn-default" id="show-stack-${i}" href="javascript:show_stack(${i})">show stack</a>
<a class="btn btn-default" id="hide-stack-${i}" href="javascript:hide_stack(${i})" style="display: none">hide stack</a>
</td>
</tr>
<tr style="display: none" id="stack-${i}">
<td colspan="7">
<pre>${source_code_url_in_stack(highlight(query["callstack"], "py3tb", linenos="inline"), highlighted=has_pygments) | n}</pre>
</td>
</tr>
<tr style="display: none"></tr> <!-- css hack because of previous hidden tr for -stripped -->
% endfor
</tbody>
</table>
<script type="text/javascript" charset="utf-8">
function show_result(result_id) {
element = document.querySelector("#result-" + result_id + "-long");
element.style.setProperty("display", "inline");
element = document.querySelector("#result-" + result_id + "-short");
element.style.setProperty("display", "none");
}
function hide_result(result_id) {
element = document.querySelector("#result-" + result_id + "-short");
element.style.setProperty("display", "inline");
element = document.querySelector("#result-" + result_id + "-long");
element.style.setProperty("display", "none");
}
function show_stack(stack_id) {
element = document.querySelector("#stack-" + stack_id);
element.style.setProperty("display", "table-row");
element = document.querySelector("#show-stack-" + stack_id);
element.style.setProperty("display", "none");
element = document.querySelector("#hide-stack-" + stack_id);
element.style.setProperty("display", "inline");
}
function hide_stack(stack_id) {
element = document.querySelector("#stack-" + stack_id);
element.style.setProperty("display", "none");
element = document.querySelector("#show-stack-" + stack_id);
element.style.setProperty("display", "inline");
element = document.querySelector("#hide-stack-" + stack_id);
element.style.setProperty("display", "none");
}
</script>
<style>
#rql-table {
table-layout: fixed;
}
#rql-table .table-col-1 {
text-align: right;
width: 30px;
}
#rql-table .table-col-2 {
white-space: nowrap;
width: 73px;
text-align: center;
}
#rql-table .table-col-8 {
padding: 8px;
width: 110px;
text-align: center;
}
${generate_css() | n}
.highlight > pre {
word-break: unset;
border: none;
margin: 0;
padding: 0;
background-color: unset;
}
</style>