PM-pinou
75 lines
3.0 KiB
HTML
75 lines
3.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}Entity: {{ entity.entity_value }} - TLS Analyzer{% endblock %}
|
|
{% block content %}
|
|
<div class="card">
|
|
<a href="javascript:history.back()" style="color:#4361ee;text-decoration:none;font-size:0.9rem;">← Back</a>
|
|
<h2 style="margin-top:0.5rem;">Entity: <code>{{ entity.entity_value }}</code></h2>
|
|
<p>Run #{{ run.id }} | Cluster: <span class="badge badge-info">#{{ entity.cluster_label|default:"unassigned" }}</span></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Aggregated Features</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Feature</th>
|
|
<th>Value</th>
|
|
<th>Cluster Mean</th>
|
|
<th>Deviation (Z-score)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for col, dev in deviations.items %}
|
|
<tr>
|
|
<td><code>{{ col }}</code></td>
|
|
<td>{{ dev.value|floatformat:3 }}</td>
|
|
<td>{{ dev.cluster_mean|floatformat:3 }}</td>
|
|
<td style="color:{% if dev.zscore > 2 %}#f72585{% elif dev.zscore < -2 %}#4361ee{% else %}#666{% endif %};">
|
|
{{ dev.zscore|floatformat:2 }}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr><td colspan="4">No feature data available.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if entity.embedding_x is not None and entity.embedding_y is not None %}
|
|
<div class="card">
|
|
<h2>PCA Position</h2>
|
|
<p>X: {{ entity.embedding_x|floatformat:3 }}, Y: {{ entity.embedding_y|floatformat:3 }}</p>
|
|
<canvas id="entityScatter" class="scatter-canvas" height="300"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('entityScatter');
|
|
if (canvas) {
|
|
const ctx = canvas.getContext('2d');
|
|
const W = canvas.parentElement.clientWidth || 400, H = 300;
|
|
canvas.width = W; canvas.height = H;
|
|
const pad = { top: 30, bottom: 40, left: 50, right: 20 };
|
|
const x = {{ entity.embedding_x }}, y = {{ entity.embedding_y }};
|
|
const margin = 0.2; // 20% padding around the point
|
|
const xRange = Math.abs(x) * margin * 2 || 1;
|
|
const yRange = Math.abs(y) * margin * 2 || 1;
|
|
const xMin = x - xRange, xMax = x + xRange;
|
|
const yMin = y - yRange, yMax = y + yRange;
|
|
|
|
const toX = v => pad.left + (v - xMin) / (xMax - xMin) * (W - pad.left - pad.right);
|
|
const toY = v => pad.top + H - pad.bottom - (v - yMin) / (yMax - yMin) * (H - pad.top - pad.bottom);
|
|
|
|
ctx.clearRect(0, 0, W, H);
|
|
ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.moveTo(pad.left, toY(0)); ctx.lineTo(W - pad.right, toY(0)); ctx.stroke();
|
|
ctx.beginPath(); ctx.moveTo(toX(0), pad.top); ctx.lineTo(toX(0), H - pad.bottom); ctx.stroke();
|
|
|
|
ctx.fillStyle = '#f72585';
|
|
ctx.beginPath(); ctx.arc(toX(x), toY(y), 8, 0, Math.PI * 2); ctx.fill();
|
|
ctx.fillStyle = '#fff'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center';
|
|
ctx.fillText('●', toX(x), toY(y) + 3);
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|