{% extends "base.html" %}

{% block head %}
<script>const portMapTCP = {{port_map_tcp}}; const portMapUDP = {{port_map_udp}};</script>
<script>const treemapData = {{treemap_data|safe}};</script>
{% endblock %}

{% block content %}

{% include "html-templates.html" %}

<div class="toolbar mb-3">
  <div class="row align-items-center">
    <div class="col-auto">
      <h4>Treemap View</h4>
    </div>
    <div class="col-auto">
      <button class="btn btn-sm btn-outline-info" type="button" data-bs-toggle="collapse" data-bs-target="#treemap-instructions" aria-expanded="false" aria-controls="treemap-instructions">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
        </svg>
        Instructions
      </button>
    </div>
    <div class="col-auto ms-auto">
      <label for="treemap-group-select" class="form-label mb-0">Group By:</label>
    </div>
    <div class="col-auto">
      <select id="treemap-group-select" class="form-select form-select-sm">
        <option value="category">Category</option>
        <option value="cluster">Cluster</option>
        <option value="port_count_range">Port Count Range</option>
      </select>
    </div>
    <div class="col-auto">
      <label for="treemap-color-select" class="form-label mb-0">Color Scheme:</label>
    </div>
    <div class="col-auto">
      <select id="treemap-color-select" class="form-select form-select-sm">
        <option value="category">Category</option>
        <option value="cluster">Cluster</option>
        <option value="port_count">Port Count</option>
        <option value="fingerprint">Fingerprint</option>
      </select>
    </div>
  </div>
</div>

<div class="collapse mb-3" id="treemap-instructions">
  <div class="card card-body bg-dark border-info">
    <h6 class="text-info">How to use the Treemap:</h6>
    <ul class="small mb-0">
      <li>Each rectangle represents a group of hosts with identical port configurations</li>
      <li>Rectangle size is proportional to the number of hosts in that group</li>
      <li>Use "Group By" to organize hosts by category, cluster, or port count range</li>
      <li>Use "Color Scheme" to color rectangles by different attributes</li>
      <li>Hover over rectangles to see port details and host count</li>
      <li>Click rectangles to view detailed information in the panel below</li>
    </ul>
  </div>
</div>

<div id="treemap-container" style="width: 100%; height: 80vh;">
  <svg id="treemap-svg" width="100%" height="100%"></svg>
</div>

<div id="treemap-tooltip" style="position: absolute; display: none; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 4px; pointer-events: none; font-size: 12px; z-index: 1000;"></div>

<div id="treemap-details" class="mt-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Selection Details</h5>
      <div id="treemap-details-content">
        <p class="text-muted">Click on a group to see details</p>
      </div>
    </div>
  </div>
</div>

<script>
initDb();
</script>

{% endblock %}