anchor.diff:    font-family: sans-serif;
     color: rgb(212, 63, 58);
   }
  -</style>
  +  </style>
   <% end %>
   
  -<div class="panel panel-default sync-margin" style="margin-bottom: 20em">
  +<div class="panel panel-default">
     <div class="panel-heading">
  -    <h3 class="panel-title"><%= @event['name'] %></h3>
  +    <h3 class="panel-title">General Action Info</h3>
     </div>
     <div class="panel-body">
  -    <div class="text-pre"><%= JSON.pretty_generate @event.except('name', 'events') %></div>
  +    <ul class="nav nav-pills pull-right">
  +      <li role="presentation"><a href="#frequency">Statements by Frequency</a></li>
  +      <li role="presentation"><a href="#natural">Statements in Natural Execution Order</a></li>
  +    </ul>
  +    <div class="text-pre"><%= JSON.pretty_generate @event.except('events') %></div>
     </div>
  +</div>
   
  +<div class="panel panel-default">
  +  <div class="panel-heading">
  +    <h3 id="frequency" class="panel-title">Statements by Frequency</h3>
  +  </div>
  +  <div class="panel-body">
  +    Select a SQL statement to jump to it's position in the natural order.
  +  </div>
     <table class="table">
       <tr>
  -      <th>SQL Statements by Frequency</th>
  +      <th>SQL</th>
         <th class="text-right">Callers</th>
         <th class="text-right">Total Seconds</th>
         <th class="text-right">Avg Seconds</th>
  
positive.code: <% content_for :head do %>
  <style>
  #caller-resizable {
    border-top: 1px solid #888;
    background: #eee;
  
negative.code: </div>
  
  <% content_for :javascript do %>
    <script>
  $(document).ready(function() {
  
    // configure editor
  