<div [hidden]="!level">
  <div
    class="row"
    [class.removed-text]="asDiffNode(node)?.baselineOnly"
    (click)="toggleExpanded()"
    (mouseenter)="hover.emit(node)"
    (mouseleave)="hover.emit(null)"
    role="button" tabindex="0"
    >
    <div class="bar" [style.width]="barWidth"></div>
    <div class="row-focus" [hidden]="node !== selectedNode"></div>
    <span aria-label="Time %:"></span><span class="time">{{percent}}</span>
    <span aria-label="Wasted %:"></span><span class="wasted">{{timeWasted}}</span>
    <span aria-label="HBM %:"></span><span class="hbmFraction">{{hbmFraction}}</span>
    <span aria-label="Name:"></span><span class="name" [style.padding-left]="offset">
      <span class="disclosure">
        <span [hidden]="!children.length">
          <span [hidden]="expanded">&#x25ba;</span>
          <span [hidden]="!expanded">&#x25bc;</span>
        </span>
      </span>
      {{name}}
      <span *ngIf="asDiffNode(node)?.activeOnly" class="diff-badge badge-added">Added</span>
      <span *ngIf="asDiffNode(node)?.baselineOnly" class="diff-badge badge-removed">Removed</span>
    </span>
    <span aria-label="Framework Op type:"></span><span class="provenance">{{provenance}}&nbsp;</span>
    <span aria-label="FLOPS:"></span><span
      class="utilization">
      {{flopsUtilization}}
    </span>
    <span
      class="flame-color-circle"
      [style.background-color]="flameColor">
    </span>
    <span class="accessible_text">HBM</span><span
      class="hbmUtilization">
      {{hbmUtilization}}
    </span>
    <span
      class="hbm-flame-color-circle"
      [style.background-color]="hbmFlameColor">
    </span>
  </div>
</div>

<div [hidden]="!expanded">
  <op-table-entry
    *ngFor="let childNode of children"
    [level]="level + 1"
    [node]="childNode"
    [rootNode]="rootNode"
    [selectedNode]="selectedNode"
    [byWasted]="byWasted"
    [showP90]="showP90"
    [childrenCount]="childrenCount"
    [applyScalingFactorInternal]="applyScalingFactor"
    (hover)="hover.emit($event);"
    (selected)="onSelect($event);">
  </op-table-entry>
  <div class="leftout" *ngIf="numLeftOut > 0">
    <span [style.padding-left]="offset">{{numLeftOut}} categories or ops have been left out.</span>
  </div>
</div>
