templates/WebCLI/algorithm.html
{% extends 'base.html' %}
{% block title %}Algorithm view{% endblock %}
{% block content %}
<br>
<h2>Algorithm: {{ algorithm.name }}</h2>
<div class="d-flex flex-row flex-wrap">
<div class="m-5">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">
<h3>Basic information</h3>
{% ifequal request.user.pk algorithm.user.pk %}
- <a href="{% url 'updateAlgorithm'%}?index={{algorithm.pk}}">update information</a>
{% endifequal %}
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td class>{{ algorithm.name }}</td>
</tr>
<tr>
<th>Type</th>
<td>{{ algorithm.algorithm_type.type_name }}</td>
</tr>
<tr>
<th>Author</th>
<td>{{ algorithm.user.username }}</td>
</tr>
<tr>
<th>Public</th>
<td>{{ algorithm.public }}</td>
</tr>
{% if algorithm.article_link %}
<tr>
<th>Scientific paper</th>
<td><a href="{{ algorithm.article_link }}" target="_blank">link</a></td>
</tr>
{% endif %}
{% if algorithm.github_link %}
<tr>
<th>Github repository</th>
<td><a href="{{ algorithm.github_link }}" target="_blank">link</a></td>
</tr>
{% endif %}
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">
<h3>Algorithm version</h3>
{% load tz %}
{% timezone "Europe/Helsinki" %}
<select onchange="window.location.href=this.value">
{% for version in versions %}
{% ifequal version.pk params.version_id %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ params.version_id }}&metrics_id={{ params.metrics_id }}&molecule_id={{params.molecule_id}}"
selected="selected">
Version {{ version.version_number }}: {{ version.timestamp|date:'d.n.Y, G:i' }}
</option>
{% else %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ version.pk }}&metrics_id={{ params.metrics_id }}&molecule_id={{params.molecule_id}}">
Version {{ version.version_number }}: {{ version.timestamp|date:'d.n.Y, G:i' }}
</option>
{% endifequal %}
{% endfor %}
</select>
{% endtimezone %}
{% ifequal request.user.pk algorithm.user.pk %}
- <a href="{% url 'add_version'%}?index={{algorithm.pk}}">add new version</a>
{% endifequal %}
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=" 2">
<p>Description:</p>
<code>{{ selected_version.algorithm|linebreaks }}</code>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<p>Circuit:</p>
<code>{{ selected_version.circuit|linebreaks }}</code>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<p>Optimizer module:</p>
<code>{{ selected_version.optimizer_module|linebreaks }}</code>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<p>Optimizer method:</p>
<code>{{ selected_version.optimizer_method|linebreaks }}</code>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<p>Measure metrics of algorithm version:</p>
{% ifequal request.user.pk algorithm.user.pk %}
<form>
<select id="mole_id">
<option value="" disabled selected>Select molecule</option>
{% for m in molecules %}
<option
value="{% url 'test_algorithm'%}?molecule={{ m.pk }}&version={{ selected_version.pk }}">
{{ m.name }}
</option>
{% endfor %}
</select>
<a class="btn btn-primary" onclick="analyseMetrics()">Run</a>
</form>
{% endifequal %}
<div id="in_progress"></div>
</td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">
<h3>Metrics of algorithm version</h3>
<select onchange="window.location.href=this.value">
{% for m in metrics %}
{% ifequal m selected_metrics %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ params.version_id }}&metrics_id={{ params.metrics_id }}&molecule_id={{ params.molecule_id }}"
selected="selected">
{{ m.molecule.name }}
</option>
{% else %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ params.version_id }}&metrics_id={{ m.pk }}&molecule_id={{ params.molecule_id }}">
{{ m.molecule.name }}
</option>
{% endifequal %}
{% endfor %}
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Molecule</th>
<td>{{ selected_metrics.molecule.name }}</td>
</tr>
<tr>
<th>Last analyze ok</th>
<td>{{ selected_metrics.last_analyze_ok }}</td>
</tr>
<tr>
<th>Analyze timestamp</th>
{% timezone "Europe/Helsinki" %}
<td>{{ selected_metrics.timestamp|date:'d.n.Y, G:i' }}</td>
{% endtimezone %}
</tr>
<tr>
<th>Analysis in progress</th>
<td>{{ selected_metrics.in_analyze_queue }}</td>
</tr>
<tr>
<th>Gate depth</th>
<td>{{ selected_metrics.gate_depth }}</td>
</tr>
<tr>
<th>Qubit count</th>
<td>{{ selected_metrics.qubit_count }}</td>
</tr>
<tr>
<th>Average iterations</th>
<td>{{ selected_metrics.average_iterations }}</td>
</tr>
<tr>
<th>Success rate</th>
<td>{{ selected_metrics.success_rate }}</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<div id="average-history-chart-div"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<div id="accuracy-history-chart-div"></div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="d-flex flex-column m-5">
<table class="table table-striped">
<thead>
<tr>
<th>
<h3>Algorithm version comparison</h3>
<b>Select molecule:</b>
<select onchange="window.location.href=this.value">
{% for m in molecules_with_metrics %}
{% ifequal m.pk selected_molecule.pk %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ params.version_id }}&metrics_id={{ params.metrics_id }}&molecule_id={{ params.molecule_id }}"
selected="selected">
{{ m.name }}
</option>
{% else %}
<option
value="{{ algorithm.get_absolute_url }}?version_id={{ params.version_id }}&metrics_id={{ params.metrics_id }}&molecule_id={{ m.pk }}">
{{ m.name }}
</option>
{% endifequal %}
{% endfor %}
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="gate-chart"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<div id="qubit-chart"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<div id="iterations-chart"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<div id="success-chart"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ metrics_graph_data|json_script:"metrics-graph-data"}}
{{ average_history_graph_data|json_script:"average-history-graph-data" }}
{{ accuracy_history_graph_data|json_script:"accuracy-history-graph-data" }}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
drawVersionCharts();
drawHistoryCharts();
}
function drawHistoryCharts() {
const data = new google.visualization.DataTable();
const averageHistoryGraphData = JSON.parse(document.getElementById('average-history-graph-data').textContent);
const accuracyHistoryGraphData = JSON.parse(document.getElementById('accuracy-history-graph-data').textContent);
drawHistoryChart(averageHistoryGraphData, 'Average history', 'average-history-chart-div');
drawHistoryChart(accuracyHistoryGraphData, 'Accuracy history', 'accuracy-history-chart-div');
}
function drawHistoryChart(graphData, title, div) {
dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'iteration');
dataTable.addColumn('number', title);
dataTable.addRows(graphData);
if (graphData.length>0) {
view = new google.visualization.DataView(dataTable)
drawSingleChart(view, 1, div)
}
}
function drawSingleChart(view, column_id, div) {
chart = new google.visualization.LineChart(document.getElementById(div));
ticks = Array.from({ length: view.getNumberOfRows() }, (_, i) => i + 1);
view.setColumns([0,column_id]);
options = {
width: 600,
height: 480,
title: view.getColumnLabel(1),
legend: {position: 'none'},
hAxis: {
viewWindow: {
min: 1,
},
ticks,
title: view.getColumnLabel(0)
},
};
chart.draw(view, options);
}
function drawVersionCharts() {
const data = new google.visualization.DataTable();
const rows = JSON.parse(document.getElementById('metrics-graph-data').textContent);
data.addColumn('number', "Algorithm version");
data.addColumn('number', "Gate depth");
data.addColumn('number', "Qubit count");
data.addColumn('number', "Average iterations");
data.addColumn('number', "Success rate");
data.addRows(rows);
var view = new google.visualization.DataView(data)
drawSingleChart(view, 1, 'gate-chart')
drawSingleChart(view, 2, 'qubit-chart')
drawSingleChart(view, 3, 'iterations-chart')
drawSingleChart(view, 4, 'success-chart')
}
function analyseMetrics() {
var x = document.getElementById('mole_id');
if (x.value == "") {
return;
}
window.location.href = x.value
}
var taskQueue = null;
var selectedMoleculeInAnalysis = false;
var someMoleculeInAnalysis = false;
function checkPage() {
if (someMoleculeInAnalysis) {
$.get("{% url 'in_analysis' %}?version_id={{ selected_version.pk }}", function (data) {
document.getElementById('in_progress').innerHTML = data
if (data.length<2) {
clearInterval(taskQueue)
someMoleculeInAnalysis = false;
}
});
}
if (selectedMoleculeInAnalysis) {
$.get("{% url 'refresh_metrics' %}?version_id={{ selected_version.pk }}&molecule_id={{ selected_metrics.molecule.pk }} #aq", function (data) {
$xml = $( $.parseXML( data ) );
if ($xml.find('in_analyze_queue').text()=='False') {
location.reload();
}
});
}
}
$.get("{% url 'in_analysis' %}?version_id={{ selected_version.pk }}", function (data) {
document.getElementById('in_progress').innerHTML = data
if (data.length>1) {
someMoleculeInAnalysis = true;
if ('{{ selected_metrics.in_analyze_queue }}' == 'True') {
selectedMoleculeInAnalysis = true;
}
taskQueue = setInterval(checkPage, 10000);
}
});
</script>
{% endblock %}}