<!DOCTYPE html>
<html>
<head>
  <style media="all" type="text/css">
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      background-color: #F5F7FB;
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    table {
      border-collapse: collapse;
      /* border: 1px solid #E1E3E7; */
      border: 1px solid #F3F9FE;
      font-size: 14px;
      line-height: normal;
      width: 100%;
    }

    table:empty {
      display: none;
    }

    th:first-child {
      border-left: 0;
    }

    th {
      text-align: center;
      background: #F3F9FE;
      padding: 1rem;
      /* border-left: 1px solid #E1E3E7; */
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 1px;
    }

    tr.break td {
      border: 0;
      border-top: 1px solid #BDC3DD;
      padding: 0;
      margin: 0;
    }

    tr.method td {
      font-weight: bold;
    }

    td {
      padding: 0.5em;
    }

    td:first-child {
      width: 190px;
    }

    tr > td > table {
      box-shadow: 0px -2px 1px #F9FAFB, 0px 1px 1px #E4EEEE, 0px 1px 2px #EEF3F8;
      border-radius: 2px;
      overflow: hidden;
    }

    tr.break + tr > td.method_name {
      font-weight: bold;
    }

    td {
      /* I'm removing this border because I think it looks way cleaner without it but feel free to add it if you feel it's necessary */
      /* border-left: 1px solid #E1E3E7; */
      text-align: center;
    }

    a {
      text-decoration: none;
    }

    .method_name {
      text-align: left;
    }

    tfoot td {
      text-align: left;
    }

    .report-header {
      background-color: #0D2483;
      color: white;
      padding: 1.5rem 2rem;
    }

    .report-header > div {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .report-header h1 {
      margin-bottom: 0;
    }

    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }

    h6 {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, 0.6);
    }

    .table-header {
      padding: 3rem 0 1rem;
    }

    .table-wrapper {
      margin: 1rem auto;
      max-width: 1440px;
      padding: 4rem 5rem;
      background: white;
      border-radius: 0.5rem;
    }

    .center {
      max-width: 1440px;
      margin: 0 auto;
    }

    .layout-right {
      margin-left: auto;
    }

    .text-right {
      display: flex;
      align-items: flex-end;
      flex-direction: column;
    }

    .timestamp {
      font-size: 12px;
      margin-bottom: 1rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .logo {
      width: 140px;
      height: 30px;
      opacity: 0.5;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 41'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M63.49 16.74c0-1.37-.91-2-2.26-2h-3.38v3.93h3.58c1.24.01 2.06-.56 2.06-1.93zM110.43 14.75h-3.6v5h3.6a2.32 2.32 0 0 0 2.5-2.49 2.34 2.34 0 0 0-2.5-2.51zM128.77 14.75h-3.53v4.94h3.53a2.28 2.28 0 0 0 2.47-2.45 2.3 2.3 0 0 0-2.47-2.49zM61.81 21.83h-4v4.32h3.91c1.44 0 2.45-.62 2.45-2.14s-.99-2.18-2.36-2.18zM21 14.75h-3.57v4.94H21a2.28 2.28 0 0 0 2.47-2.45A2.3 2.3 0 0 0 21 14.75z'/%3E%3Cpath class='cls-1' d='M184 .44H5.87A4.93 4.93 0 0 0 .94 5.37V35.5a4.94 4.94 0 0 0 4.93 4.94H184a4.94 4.94 0 0 0 4.94-4.94V5.37A4.94 4.94 0 0 0 184 .44zm-34.38 10.78c4.79 0 8.46 2.89 9.18 7.54h-3.86a5.48 5.48 0 0 0-10.68 0h-3.83c.71-4.65 4.36-7.54 9.19-7.54zM24 29.44L20.46 23h-3v6.46h-3.72v-18h7.68c3.41 0 5.78 2.07 5.78 5.76a5.34 5.34 0 0 1-2.88 5.14l3.82 7.06zm24.31-7.3c0 4.8-2.92 7.56-7.63 7.56S33 26.94 33 22.14V11.48h3.69v10.61c0 2.81 1.37 4.32 4 4.32s3.94-1.51 3.94-4.32V11.48h3.69zm13.92 7.3h-8v-18h7.52c3.24 0 5.59 1.61 5.59 5A4 4 0 0 1 65.51 20 4.22 4.22 0 0 1 68 24.21c0 3.43-2.4 5.23-5.81 5.23zm19.66-6.92v6.92h-3.7v-6.92l-6.81-11h4.29L80 18.85l4.34-7.37h4.32zm16-.5h-7.62v-3.26h7.59zm13 1h-4v6.39h-3.72v-18h7.77c3.41 0 5.79 2.09 5.79 5.79s-2.41 5.85-5.82 5.85zm20.86 6.39L128.26 23h-3v6.46h-3.72v-18h7.69c3.4 0 5.78 2.07 5.78 5.76a5.34 5.34 0 0 1-2.88 5.14l3.87 7.08zm17.85.26c-4.88 0-8.55-2.95-9.21-7.68h3.81A5.49 5.49 0 0 0 155 22h3.84c-.69 4.75-4.38 7.7-9.22 7.7zm18.4-.23h-3.72v-3.7H168zm6.36-7.54h-10.05v-3.26h10.08zm1.44-7.16h-11.49v-3.26h11.52z'/%3E%3C/svg%3E");
    }
  </style>
</head>
<body>
<div class="report-header">
  <div class="center">
    <div class="layout-left">
      <h6>Profile Report</h6>
      <h1><%= @result.measure_mode_string.capitalize %></h1>
    </div>
    <div class="layout-right text-right">
      <div class="timestamp"><%= Time.now.strftime(self.time_format) %></div>
      <div class="logo"></div>
    </div>
  </div>
</div>
<div class="table-wrapper">
  <table>
    <tr>
      <th>Thread ID</th>
      <th>Fiber ID</th>
      <th>Total</th>
    </tr>
    <% for thread in @result.threads %>
      <tr>
        <td><%= thread.id %></td>
        <td><a href="#<%= thread.fiber_id %>"><%= thread.fiber_id %></a></td>
        <td><%= thread.total_time %></td>
      </tr>
    <% end %>
  </table>

  <!-- Methods Tables -->
  <%
    for thread in @result.threads
      methods = thread.methods
      total_time = thread.total_time
  %>
    <h2><a name="<%= thread.fiber_id %>">Thread <%= thread.id %>, Fiber: <%= thread.fiber_id %></a></h2>
    <table>
      <thead>
      <tr>
        <th>%Total</th>
        <th>%Self</th>
        <th>Total</th>
        <th>Self</th>
        <th>Wait</th>
        <th>Child</th>
        <th>Calls</th>
        <th class="method_name">Name</th>
        <% if @result.track_allocations? %>
          <th>Allocations</th>
        <% end %>
        <th>Line</th>
      </tr>
      </thead>
      <tbody>
      <% min_time = @options[:min_time] || (@options[:nonzero] ? 0.005 : nil)
         sorted_methods = sort_method ? methods.sort_by(&sort_method) : methods.sort
         sorted_methods.reverse_each do |method|
           total_percentage = (method.total_time/total_time) * 100
           next if total_percentage < min_percent
           next if min_time && method.total_time < min_time
           self_percentage = (method.self_time/total_time) * 100  %>

        <!-- Parents -->
        <% for caller in method.call_trees.callers.sort
             next if min_time && caller.total_time < min_time %>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><%= sprintf("%.2f", caller.total_time) %></td>
            <td><%= sprintf("%.2f", caller.self_time) %></td>
            <td><%= sprintf("%.2f", caller.wait_time) %></td>
            <td><%= sprintf("%.2f", caller.children_time) %></td>
            <td><%= "#{caller.called}/#{method.called}" %></td>
            <td class="method_name"><%= create_link(thread, total_time, caller.parent.target) %></td>
            <% if @result.track_allocations? %>
              <td>-</td>
            <% end %>
            <td><%= if caller.parent.target.source_file
                      file_link(caller.parent.target.source_file, caller.line)
                    end %></td>
          </tr>
        <% end %>
        <tr class="method">
          <td><%= sprintf("%.2f%%", total_percentage) %></td>
          <td><%= sprintf("%.2f%%", self_percentage) %></td>
          <td><%= sprintf("%.2f", method.total_time) %></td>
          <td><%= sprintf("%.2f", method.self_time) %></td>
          <td><%= sprintf("%.2f", method.wait_time) %></td>
          <td><%= sprintf("%.2f", method.children_time) %></td>
          <td><%= sprintf("%i", method.called) %></td>
          <td class="method_name">
            <a name="<%= method_href(thread, method) %>">
              <%= method.recursive? ? "*" : " " %><%= h method.full_name %>
            </a>
          </td>

          <% if @result.track_allocations? %>
            <td>
              <% count = method.allocations.reduce(0) do |size, allocation|
                   size += allocation.count
                  end %>
              <% if count > 0 %>
                <a class="allocations" href="#<%= method_href(thread, method) %>_allocations" %><%= count %></a>
              <% else %>
                0
              <% end %>
            </td>
          <% end %>

          <td><%= if method.source_file
                    file_link(method.source_file, method.line)
                  end %></td>
        </tr>

        <% if @result.track_allocations? %>
          <tr>
            <td colspan="10">
              <table id="<%= method_href(thread, method) %>_allocations" class="allocations" style="display: none">
                <% for allocation in method.allocations %>
                  <tr>
                    <td>
                      <%= allocation.klass_name %>
                    </td>
                    <td>
                      <%= "#{allocation.count} (#{allocation.memory} Bytes)" %>
                    </td>
                    <td>
                      <%= "#{allocation.source_file}:#{allocation.line}" %>
                    </td>
                  </tr>
                <% end %>
              </table>

            </td>
          </tr>
        <% end %>

        <!-- Children -->
        <% for callee in method.call_trees.callees.sort_by(&:total_time).reverse
             next if min_time && callee.total_time < min_time %>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><%= sprintf("%.2f", callee.total_time) %></td>
            <td><%= sprintf("%.2f", callee.self_time) %></td>
            <td><%= sprintf("%.2f", callee.wait_time) %></td>
            <td><%= sprintf("%.2f", callee.children_time) %></td>
            <td><%= "#{callee.called}/#{callee.target.called}" %></td>
            <td class="method_name"><%= create_link(thread, total_time, callee.target) %></td>
            <% if @result.track_allocations? %>
              <td>-</td>
            <% end %>
            <td><%= file_link(callee.source_file, callee.line) %>
          </tr>
        <% end %>

        <!-- Create divider row -->
        <tr class="break">
          <td colspan="10"></td>
        </tr>
      <% end %>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="9">* indicates recursively called methods</td>
      </tr>
      </tfoot>
    </table>
  <% end %>
</div>

<script type="application/javascript">
  function toggleAllocations(element)
  {
    if (element.style.display == 'none')
      element.style.display = 'block'
    else
      element.style.display = 'none'
  }

  function onClick(event)
  {
    if (event.target.tagName == 'A' && event.target.classList.contains('allocations'))
    {
      var url = new URL(event.target.href)
      var element = document.querySelector(url.hash)
      toggleAllocations(element)
      event.preventDefault()
    }
  }

  window.addEventListener('DOMContentLoaded', function(event)
  {
    document.addEventListener('click', onClick)
  })

</script>
</body>
</html>
