<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="class_ref.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="view_footer.html">

<polymer-element name="heap-profile" extends="observatory-element">
<template>
  <link rel="stylesheet" href="css/shared.css">
  <style>
    .table {
      border-collapse: collapse!important;
      margin-bottom: 20px
      table-layout: fixed;
    }
    .table td:nth-of-type(1) {
      width: 30%;
    }
    .th, .td {
      padding: 8px;
      vertical-align: top;
    }
    .table thead > tr > th {
      vertical-align: bottom;
      text-align: left;
      border-bottom:2px solid #ddd;
    }
    .spacer {
      width: 16px;
    }
    .left-border-spacer {
      width: 16px;
      border-left: 1px solid;
    }
    .clickable {
      color: #0489c3;
      text-decoration: none;
      cursor: pointer;
    }
    .clickable:hover {
      text-decoration: underline;
      cursor: pointer;
    }
    #classtable tr:hover > td {
      background-color: #F4C7C3;
    }
    .nav-option {
      color: white;
      float: right;
      margin: 3px;
      padding: 8px;
    }
  </style>
  <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
  <style>
.chart-wrapper {
}

.chart-host-wrapper {
height: 300px;
}
.chart-legend-host {
max-height: 300px;
overflow-x: auto;
overflow-y: auto;
}
  </style>
  <nav-bar>
    <top-nav-menu></top-nav-menu>
    <vm-nav-menu vm="{{ profile.isolate.vm }}"></vm-nav-menu>
    <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
    <nav-menu link="{{ makeLink('/allocation-profiler', profile.isolate) }}" anchor="allocation profile" last="{{ true }}"></nav-menu>
    <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh>
    <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
    <nav-refresh callback="{{ refresh }}"></nav-refresh>
    <div class="nav-option">
      <input type="checkbox" checked="{{ autoRefresh }}">Auto-refresh on GC
    </div>
  </nav-bar>
  <div class="content">
    <h1>Allocation Profile</h1>
    <br>
    <div class="memberList">
      <div class="memberItem">
        <div class="memberName">last forced GC at</div>
        <div class="memberValue">{{ lastServiceGC }}</div>
      </div>
      <div class="memberItem">
        <div class="memberName">last accumulator reset at</div>
        <div class="memberValue">{{ lastAccumulatorReset }}</div>
      </div>
    </div>
  </div>
  <hr>
  <div class="content-centered-big">
    <div class="flex-row">
      <div id="newSpace" class="flex-item-50-percent">
        <h2>New Generation</h2>
        <br>
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">used</div>
            <div class="memberValue">
              {{ isolate.newSpace.used | formatSize }}
              of
              {{ isolate.newSpace.capacity | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">external</div>
            <div class="memberValue">
              {{ isolate.newSpace.external | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">collections</div>
            <div class="memberValue">{{ formattedCollections(true) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">average collection time</div>
            <div class="memberValue">{{ formattedAverage(true) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">cumulative collection time</div>
            <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">average time between collections</div>
            <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
          </div>
        </div>
        <div class="chart-wrapper" id="new-pie-chart">
          <div class="chart-host-wrapper">
              <div class="chart-host"></div>
              <div class="chart-legend-host"></div>
          </div>
        </div>
      </div>
      <div id="oldSpace" class="flex-item-50-percent">
        <h2>Old Generation</h2>
        <br>
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">used</div>
            <div class="memberValue">
              {{ isolate.oldSpace.used | formatSize }}
              of
              {{ isolate.oldSpace.capacity | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">external</div>
            <div class="memberValue">
              {{ isolate.oldSpace.external | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">collections</div>
            <div class="memberValue">{{ formattedCollections(false) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">average collection time</div>
            <div class="memberValue">{{ formattedAverage(false) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">cumulative collection time</div>
            <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">average time between collections</div>
            <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
          </div>
        </div>
        <div class="chart-wrapper" id="old-pie-chart">
          <div class="chart-host-wrapper">
              <div class="chart-host"></div>
              <div class="chart-legend-host"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <hr>
  <div class="content-centered-big">
    <table id="classtable" class="flex-item-100-percent table">
      <thead id="classTableHead">
        <tr>
          <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>
          <th class="spacer"></th>
          <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="New Current Size">{{ classTable.getColumnLabel(4) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="New Current Instances">{{ classTable.getColumnLabel(5) }}</th>
          <th class="spacer"></th>
          <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="Old Current Size">{{ classTable.getColumnLabel(9) }}</th>
          <th on-click="{{changeSort}}" class="clickable" title="Old Current Instances">{{ classTable.getColumnLabel(10) }}</th>
        </tr>
      </thead>
      <tbody id="classTableBody">
      </tbody>
    </table>
    <view-footer></view-footer>
  </div>
</template>
</polymer-element>

<script type="application/dart" src="heap_profile.dart"></script>