<HTML>
<HEAD>
<SCRIPT type="text/javascript">
var g_trace = undefined;
function open_perfetto(trace){{
let begin = '{begin}';
let end = '{end}';
let begin_ms = Date.parse(begin)
let begin_ns = begin_ms * 1_000_000;
let end_ms = Date.parse(end)
let end_ns = end_ms * 1_000_000;
let perfetto_url = `https://ui.perfetto.dev/#!/?visStart=${{begin_ns}}&visEnd=${{end_ns}}`;
var win = window.open(perfetto_url);
if (!win) {{
g_log.innerText += "can't open window\n";
return;
}}
const timer = setInterval(() => win.postMessage('PING', perfetto_url), 50);
const onMessageHandler = (evt) => {{
if (evt.data !== 'PONG') return;
// We got a PONG, the UI is ready.
window.clearInterval(timer);
window.removeEventListener('message', onMessageHandler);
win.postMessage({{
perfetto: {{
buffer: g_trace,
title: 'Micromegas trace of process {process_id}',
}}}}, perfetto_url);
}};
window.addEventListener('message', onMessageHandler);
}}
function on_button_click(){{
open_perfetto(g_trace);
}}
function download_trace(process_id, begin, end){{
const params = new URLSearchParams({{
process_id: process_id,
begin: begin,
end: end
}});
let traceurl = `fetch_trace?${{params.toString()}}`;
fetch(traceurl)
.then(response => {{
g_log.innerText += 'received response\n';
return response.arrayBuffer();
}})
.then( buffer => {{
g_trace = buffer;
btn_open_perfetto.removeAttribute('hidden');
btn_open_perfetto.focus();
}})
.catch(error => {{
console.error('Error fetching binary data:', error);
}});
}}
</SCRIPT>
</HEAD>
<BODY>
<pre id="log" cols="80" rows="20"></pre>
<button type="button" autofocus="true" id='btn_open_perfetto' onClick='on_button_click()' hidden>Open Perfetto</button>
<SCRIPT type="text/javascript">
const g_log = document.getElementById('log');
const btn_open_perfetto = document.getElementById('btn_open_perfetto');
g_log.innerText += 'Hi {caller}\n';
g_log.innerText += 'Fetching process {process_id}\n';
download_trace( '{process_id}', '{begin}', '{end}' );
</SCRIPT>
</BODY>
</HTML>