<div class="treemap-container">
  <div class="toolbar-row">
    <button mat-icon-button [disabled]="zoomStack().length <= 1" (click)="zoomOut()" matTooltip="Zoom Out">
      <mat-icon>arrow_upward</mat-icon>
    </button>
    <button mat-icon-button [disabled]="zoomStack().length <= 1" (click)="resetZoom()" matTooltip="Reset Zoom">
      <mat-icon>home</mat-icon>
    </button>
    @if (zoomStack().length > 1) {
      <span class="breadcrumbs">
        @for (node of zoomStack(); track (node.path || node.name); let last = $last) {
          <span>
            {{node.name}}@if (!last) { <span> &gt; </span> }
          </span>
        }
      </span>
    }
    <span class="spacer"></span>
    @if (currentRoot()) {
      <span class="active-scope-size-badge">
        Active Scope Size: <strong>{{humanReadableTotalSize()}}</strong>
      </span>
    }
  </div>

  <svg [attr.width]="viewWidth" [attr.height]="viewHeight" class="treemap-svg">
    <defs>
      <pattern id="padding-hatch-tree" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="2" height="8" fill="rgba(0,0,0,0.12)"></rect>
      </pattern>
    </defs>

    @for (rect of rects(); track rect.node.path) {
      <g
         [attr.transform]="'translate(' + rect.x + ',' + rect.y + ')'"
         class="rect-group"
         [class.dimmed]="rect.dimmed"
         [matTooltip]="rect.tooltip"
         matTooltipClass="rich-multiline-tooltip"
         (click)="selectNode(rect.node)"
         (mouseenter)="onHover(rect.node)"
         (mouseleave)="onHover(null)">

        <!-- Base Rect -->
        <rect [attr.width]="rect.width"
              [attr.height]="rect.height"
              [attr.fill]="rect.color"
              class="base-rect"></rect>

        <!-- Shaded Padding Overlay -->
        @if (rect.paddingWidth > 0.5) {
          <rect
                [attr.width]="rect.paddingWidth"
                [attr.height]="rect.paddingHeight"
                fill="url(#padding-hatch-tree)"
                class="padding-rect"></rect>
        }

        <!-- Label Text -->
        <text [attr.x]="6"
              [attr.y]="16"
              class="rect-label">
          {{rect.label}}
        </text>
      </g>
    }
  </svg>
</div>
