anchor.diff:       <a id="drop5" role="button" data-toggle="dropdown" href="#">Segment by Group <b class="caret"></b></a>
           <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
             <% @metric.addable_groups.each do |group| %>
  -          <li role="presentation" id="add-group-<%= group.id %>"><a role="menuitem" tabindex="-1" href="#"><%= group.name %></a></li>
  +          <li role="presentation" data-group-id="<%= group.id %>" class="add-group"><a role="menuitem" tabindex="-1" href="#"><%= group.name %></a></li>
             <% end %>
           </ul>
     </li>
  
positive.code: <script src="<%= url('bootstrap3-editable/js/bootstrap-editable.min.js') %>"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    <% @metric.addable_groups.each do |group| %>
      $('#add-group-<%= group.id %> a').click(function (e) {
        e.preventDefault();
        alert($('#add_group')["group_id"]);
        $('#add_group')["group_id"].value = '<%= group.id %>';
        $('#add_group').submit();
      })
    <% end %>
  
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
  
negative.code:   <h1><span id="editable-name"><%= @metric.name %></span> <small><%= @metric.type %></small></h1>
  <p id="editable-description"><%= @metric.description %></p>
  </div>
  <form id="add_group" action="<%= url("/metrics/#{@metric.type}/#{@metric.type_id}/groups") %>" method="post"><input id="add_group_input" type="hidden" name="group_id"></form>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <% @metric.groups.each do |group| %>
  