{% extends "base.html" %}
{% block title %}Glean — relationships for {{ manifest.target }}{% endblock %}
{% block content %}
<h1>Relationships</h1>
<p class="hint">
  {{ manifest.target }} · {{ manifest.started_at[:19] | replace("T", " ") }} UTC ·
  <a href="/scan/{{ scan_id }}">back to the brief</a>
</p>

<div class="graph-summary">
  <span><strong>{{ view.entity_count }}</strong> findings</span>
  <span><strong>{{ view.edge_count }}</strong> relations</span>
  <span><strong>{{ view.clusters | length }}</strong> connected</span>
  {% if view.unconnected_count %}
  <span class="hint">{{ view.unconnected_count }} with no relations</span>
  {% endif %}
  {% if view.dangling_count %}
  <span class="warning-pill-inline">{{ view.dangling_count }} dangling</span>
  {% endif %}
</div>

{% if diagram.nodes %}
{# Hand-rolled SVG, laid out server-side by graph.build_diagram -- no
   charting library, no build step, nothing fetched (ADR-0011 D1). Styled
   with classes rather than inline attributes so it inherits the app's
   palette and follows light/dark like everything else. #}
<figure class="diagram-wrap">
  <figcaption class="diagram-caption">
    Infrastructure flows left to right. Certificates and technologies are folded into the
    node they belong to — {{ diagram.badge_total }} of them here — because they describe a
    host rather than being another step in the chain.
  </figcaption>
  <div class="diagram-scroll">
    <svg class="diagram" viewBox="0 0 {{ diagram.width|round|int }} {{ diagram.height|round|int }}"
         width="{{ diagram.width|round|int }}" height="{{ diagram.height|round|int }}"
         role="img" aria-label="Relationship diagram for {{ manifest.target }}">
      <g class="diagram-edges">
        {% for edge in diagram.edges %}
        <path class="diagram-edge" d="{{ edge.path }}"><title>{{ edge.relation_label }}</title></path>
        {% endfor %}
      </g>
      <g class="diagram-headers">
        {% for layer in diagram.layers %}
        <text class="diagram-col" x="{{ layer.x|round|int }}" y="18">{{ layer.title }}</text>
        {% if layer.hidden %}
        <text class="diagram-col-more" x="{{ layer.x|round|int }}" y="32">+{{ layer.hidden }} more</text>
        {% endif %}
        {% endfor %}
      </g>
      <g class="diagram-nodes">
        {% for node in diagram.nodes %}
        <a href="/scan/{{ scan_id }}#{{ node.anchor }}" class="diagram-node type-{{ node.entity_type }}">
          <title>{{ node.title }}{% if node.score is not none %} — priority {{ node.score }}{% endif %}</title>
          <rect x="{{ node.x|round|int }}" y="{{ node.y|round|int }}"
                width="{{ node.w|round|int }}" height="{{ node.h|round|int }}" rx="9"/>
          <text class="diagram-label" x="{{ (node.x + 11)|round|int }}" y="{{ (node.y + 19)|round|int }}">{{ node.label }}</text>
          <text class="diagram-meta" x="{{ (node.x + 11)|round|int }}" y="{{ (node.y + 34)|round|int }}">{{ node.entity_type }}{% if node.badge %} · {{ node.badge }}{% endif %}</text>
          {% if node.score %}
          <text class="diagram-score" x="{{ (node.x + node.w - 10)|round|int }}" y="{{ (node.y + 19)|round|int }}">{{ node.score|round|int }}</text>
          {% endif %}
        </a>
        {% endfor %}
      </g>
    </svg>
  </div>
  {% if diagram.hidden_total %}
  <p class="field-hint">
    {{ diagram.hidden_total }} lower-priority node(s) are not drawn, so the shape stays
    readable. Every one of them is in the list below and in the brief.
  </p>
  {% endif %}
</figure>
{% endif %}

{% if view.relation_counts %}
<div class="filter-bar" role="group" aria-label="Filter by relation type">
  <span class="filter-group-label" id="relation-label">Relation:</span>
  <div class="filter-pills" role="group" aria-labelledby="relation-label">
    {% for relation, count in view.relation_counts %}
    <button type="button" class="filter-pill" data-relation="{{ relation }}"
            aria-pressed="false">{{ relation }} ({{ count }})</button>
    {% endfor %}
  </div>
  <button type="button" class="filter-clear" id="graph-clear">Clear filters</button>
</div>
{% endif %}

{% if not view.clusters %}
<p class="empty-state">
  This scan produced no relationships between its findings. That is a real
  result — a target whose findings genuinely don't link to each other — not
  an error. It is also what a single-tool passive scan usually looks like,
  since most relations come from resolution and probing.
</p>
{% else %}
<ul class="graph-list" id="graph-list">
  {% for cluster in view.clusters %}
  <li class="graph-cluster" data-relations="{{ cluster.neighbours | map(attribute='relation') | unique | join(' ') }}">
    <div class="graph-source">
      {% if cluster.rank %}<span class="rank">{{ cluster.rank }}</span>{% endif %}
      <code>{{ cluster.value }}</code>
      <span class="pill">{{ cluster.entity_type }}</span>
      {% if cluster.score is not none %}<span class="graph-score">{{ "%g" | format(cluster.score) }}</span>{% endif %}
      <a class="graph-jump" href="/scan/{{ scan_id }}#{{ cluster.anchor }}"
         title="Show this finding in the brief">in brief →</a>
    </div>
    <ul class="graph-edges">
      {% for n in cluster.neighbours %}
      <li data-relation="{{ n.relation }}">
        <span class="graph-relation">{{ n.relation_label }}</span>
        <code>{{ n.value }}</code>
        <span class="pill">{{ n.entity_type }}</span>
        {% if n.dangling %}<span class="graph-dangling" title="This relation points at a finding that isn't in this scan's snapshot">unresolved</span>{% endif %}
      </li>
      {% endfor %}
    </ul>
  </li>
  {% endfor %}
</ul>
{% endif %}

<script>
// Filtering hides an individual relation line, and then hides its whole
// cluster only when nothing inside it survived -- so filtering by
// "resolves_to" shows each source with just its resolution edges, rather
// than showing sources that happen to have one somewhere among many.
const pills = Array.from(document.querySelectorAll('.filter-pill[data-relation]'));
const clusters = Array.from(document.querySelectorAll('.graph-cluster'));

function applyGraphFilter() {
  const active = pills
    .filter(function (p) { return p.getAttribute('aria-pressed') === 'true'; })
    .map(function (p) { return p.dataset.relation; });
  clusters.forEach(function (cluster) {
    let visible = 0;
    cluster.querySelectorAll('.graph-edges li').forEach(function (row) {
      const ok = !active.length || active.indexOf(row.dataset.relation) !== -1;
      row.classList.toggle('hidden', !ok);
      if (ok) { visible += 1; }
    });
    cluster.classList.toggle('hidden', visible === 0);
  });
}

pills.forEach(function (pill) {
  pill.addEventListener('click', function () {
    const on = pill.getAttribute('aria-pressed') === 'true';
    pill.setAttribute('aria-pressed', on ? 'false' : 'true');
    pill.classList.toggle('active', !on);
    applyGraphFilter();
  });
});
const clearBtn = document.getElementById('graph-clear');
if (clearBtn) {
  clearBtn.addEventListener('click', function () {
    pills.forEach(function (p) {
      p.setAttribute('aria-pressed', 'false');
      p.classList.remove('active');
    });
    applyGraphFilter();
  });
}
</script>
{% endblock %}