This commit represents a major re-implementation of the event detail page,

and was originally motivated by problems with the presentation of the EMBB.
At a basic level, the page obtains information about the Event log messages
and EMBB logs via AJAX calls to the server. This information is fed into
dgrid tables. Extensive use is made of the 'put-selector' to create DOM
elements. This approach eliminates the need for JavaScript code and django
template loops that build HTML. As not all of the features are correct in
Linux browsers (Konqueror, Iceweasel) more work needs to be done.

gracedb/api.py

@@ -996,13 +996,25 @@ def eventLogToDict(log, request=None):
                 args=[log.event.graceid(), filename],
                 request=request)
 
+        # This is purely for convenience in working with the web interface.
+        tag_names = [tag.name for tag in log.tag_set.all() ];
+
+    issuer_info = {
+        "username": log.issuer.username,
+        "display_name": "%s %s" % (log.issuer.first_name, log.issuer.last_name),
+    }
+
     return {
-                "comment" : log.comment,
-                "created" : log.created,
-                "issuer"  : log.issuer.username,
-                "self"    : uri,
-                "tags"    : taglist_uri,
-                "file"    : file_uri,
+                "N"            : log.N,
+                "comment"      : log.comment,
+                "created"      : log.created,
+                "issuer"       : issuer_info,
+                "filename"     : log.filename,
+                "file_version" : log.file_version,
+                "tag_names"    : tag_names,
+                "self"         : uri,
+                "tags"         : taglist_uri,
+                "file"         : file_uri,
            }
 
 class EventLogList(APIView):
@@ -1120,6 +1132,7 @@ def embbEventLogToDict(eel, request=None):
                 args=[eel.event.graceid(), eel.N],
                 request=request)
     return {
+                "N"       : eel.N,
                 "self"    : uri,
                 "created" : eel.created,
                 "submitter"  : eel.submitter.username,
@@ -1267,13 +1280,20 @@ class TagList(APIView):
 
     def get(self, request):
         # Return a list of links to all tag objects.
+        tag_dict = {}
+        for tag in Tag.objects.all():
+            tag_dict[tag.name] = { 
+                'displayName': tag.displayName,
+                'blessed': tag.name in settings.BLESSED_TAGS
+            }
         rv = {
 #                 'tags' : [ reverse("tag-detail", args=[tag.name],
 #                                    request=request)
 #                            for tag in Tag.objects.all() ]
 #                For now, we just output the tag names, since we don't know what 
 #                tag-detail should look like.
-                 'tags' : [ tag.name for tag in Tag.objects.all() ]
+#                 'tags' : [ tag.name for tag in Tag.objects.all() ]
+                  'tags' : tag_dict,
              }
         return Response(rv)
 

gracedb/views.py

@@ -284,6 +284,7 @@ def view(request, event):
     context['single_inspiral_events'] = list(event.singleinspiral_set.all())
     context['neighbor_delta'] = "[%+d,%+d]" % (-5,5)
     context['SKYMAP_VIEWER_SERVICE_URL'] = settings.SKYMAP_VIEWER_SERVICE_URL
+    context['BOWER_URL'] = settings.BOWER_URL
 
     # XXX This is something of a hack. In the future, we will want to show the
     # executive user a list of groups and a two column list of radio buttons, showing
@@ -761,14 +762,12 @@ def modify_permissions(request, event):
     # Finished. Redirect back to the event.
     return HttpResponseRedirect(reverse("view", args=[event.graceid()]))
 
-from hashlib import md5
-
 # A view to create embb log entries
 @event_and_auth_required
 def embblogentry(request, event, num=None):
     if request.method == "POST":
         try:
-            eel = create_eel(request.POST, event, request.user)
+            create_eel(request.POST, event, request.user)
         except ValueError, e:
             return HttpResponseBadRequest(str(e))
         except Exception, e:

settings/branson.py

@@ -19,6 +19,9 @@ DATABASES = {
 STATIC_URL = "/branson-static/"
 STATIC_ROOT = "/home/branson/gracedbdev/static/"
 
+BOWER_URL = "/bower-static/"
+BOWER_ROOT = "/home/branson/bower_components/"
+
 GRACEDB_DATA_DIR = "/home/branson/fake_data"
 
 ALERT_EMAIL_FROM = "Dev Alert <root@moe.phys.uwm.edu>"

settings/default.py

@@ -285,6 +285,9 @@ REST_FRAMEWORK = {
 STATIC_URL = "/gracedb-static/"
 STATIC_ROOT = "/home/gracedb/graceproj/static/"
 
+BOWER_URL = "/bower-static/"
+BOWER_ROOT = "/home/gracedb/bower_components/"
+
 STATICFILES_FINDERS = (
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',

static/css/labeltips.css

 #tt {
  position:absolute;
  display:block;
- background:url(images/tt_left.gif) top left no-repeat;
+ /* background:url(images/tt_left.gif) top left no-repeat; */
  }
  #tttop {
  display:block;
  height:5px;
  margin-left:5px;
- background:url(images/tt_top.gif) top right no-repeat;
+ /* background:url(images/tt_top.gif) top right no-repeat; */
  overflow:hidden;
  }
  #ttcont {
@@ -21,6 +21,6 @@
 display:block;
 height:5px;
 margin-left:5px;
-background:url(images/tt_bottom.gif) top right no-repeat;
+/* background:url(images/tt_bottom.gif) top right no-repeat; */
 overflow:hidden;
 }

static/css/style.css

@@ -30,29 +30,31 @@ table.gstlalcbc th {padding:3px;border:none;vertical-align:bottom;}
 table.figures tr.figrow  {text-align:center;} 
 table.figures {width:300px;height:270px;border:1px solid gray;}
 
+/*  This was trying to style the title pane buttons. Doesn't work anymore.
 .tundra.eventDetail .pmTitlePaneClass .dijitOpen .dijitArrowNode {
     background-repeat: no-repeat;
     height: 14px;
     width: 14px;
 }
 
-.tundra.eventDetail .pmTitlePaneClass .dijitClosed .dijitArrowNode {
+.dijitClosed .dijitArrowNode {
     background-repeat: no-repeat;
     height: 14px;
     width: 14px;
 }
 
-.tundra.eventDetail .pmTitlePaneClass .dijitClosed .dijitArrowNode {
+.dijitClosed .dijitArrowNode {
     background-image: url('../images/plusButton.gif');
     background-position: 0px 0px;
 }
 
-.tundra.eventDetail .pmTitlePaneClass .dijitOpen .dijitArrowNode {
+.dijitOpen .dijitArrowNode {
     background-image: url('../images/minusButton.gif');
     background-position: 0px 0px;
 }
+*/ 
 
-.tundra.eventDetail .modButtonClass .dijitButtonNode {
+.modButtonClass {
     border: none;
     border-bottom: none;
     background-image: none;
@@ -60,18 +62,20 @@ table.figures {width:300px;height:270px;border:1px solid gray;}
     background-color: rgb(200, 200, 200);
     cursor: pointer;
     min-width: 20px;
+    min-height: 20px;
 }
 
-.tundra.eventDetail .modButtonClass.left.dijitButton {
+.modButtonClass.left {   
     padding: 0px 0px 0px 0px;
     margin: 2px 0px 2px 2px;
 }
-.tundra.eventDetail .modButtonClass.right.dijitButton {
-    padding: 2px 0px 2px 0px;
+
+.modButtonClass.right {
+    padding: 2px 2px 2px 0px;
     margin: 2px 2px 2px 0px;
 }
 
-.tundra.eventDetail .dijitDisabled .dijitButtonText {
+.dijitDisabled .dijitButtonText {
     color: #000000;
 }
 
@@ -85,7 +89,7 @@ table.figures {width:300px;height:270px;border:1px solid gray;}
     float: right;
 }
 
-.tundra.eventDetail .permButtonClass {
+.permButtonClass {
     font: x-small "Lucida Grande", "Lucida Sans Unicode", geneva, verdana, sans-serif;
     font-size: 150%;
     background-color : #ff6666;
@@ -370,3 +374,79 @@ table thead th.sorted a { padding-right:13px; }
 table thead th.ascending a { background:url('../images/arrow-down.gif') right .4em no-repeat; }
 table thead th.descending a { background:url('../images/arrow-up.gif') right .4em no-repeat; }
 
+
+/* Stuff added for dgrid */
+/* XXX FIXME. Note how this assumes the bower stuff will be in your home directory. Not cool. */
+@import "~/bower_components/dgrid/css/dgrid.css";
+
+.collapsed .expando {
+    display: none;
+}
+
+div.dgrid-row.collapsed:hover {
+    /* background-color: rgb(240,248,255); */
+    /* background-color: #ff6666; */
+    background-color: #d8bfd8;
+    cursor: pointer;
+}
+
+.supergrid-row.dgrid-row-odd {background-color:#edf3fe;}
+.supergrid-row.dgrid-row-even {background-color:#fff;}
+
+.dgrid.dgrid-grid.ui-widget.dgird-subgrid { 
+    height: auto;
+    border: none;
+}
+
+.tundra.eventDetail .dgrid-cell {
+    border: none;
+}
+
+.dgrid-cell.supergrid-cell {
+    border-top-style: solid;
+}
+
+.dgrid-cell.subgrid-cell {
+    border: none;
+}
+
+.dgrid-cell.field-N {
+    width: 5%;
+}
+
+.dgrid-cell.field-comment { 
+    width: 50%;
+}
+
+.dgrid-cell.field-image {
+    width: 10%;
+}
+
+th.dgrid-cell {
+    vertical-align: bottom;
+}
+
+/* Stuff added for new event detail */
+
+td.title {
+    cursor: pointer;
+}
+
+div.expandGlyph {
+    background-image: url('/bower-static/dijit/themes/tundra/images/spriteArrows.png');
+    background-repeat: no-repeat;
+    background-position: 0px 0px; 
+    vertical-align: middle;
+    height: 7px;
+    width: 7px;
+    padding: 0 0 0 0;
+}
+
+div.expandGlyph.closed {
+    background-position: -14px 0px;
+}
+
+.expandFormButton {
+    color: blue;
+    text-decoration: underline;
+}

templates/base.html

@@ -2,12 +2,13 @@
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
+{% block headcontents %}
     <link rel="stylesheet" href="{{STATIC_URL}}css/style.css" />
     <title>GraceDb | {% block title %}{% endblock %}</title>
 <!-- START TESTING -->
 <script type="text/javascript">
 function changeTime(obj, label) {
-    var timetype= obj[obj.selectedIndex].value;
+    var timetype = obj.get("value");
     if (timetype=="") { return; }
     var times = document.getElementsByName("time-"+label);
     for (i=0; i<times.length; i++) {
@@ -16,6 +17,7 @@ function changeTime(obj, label) {
     }
 }
 </script>
+{% endblock %}
 <!-- END TESTING -->
 {% block jscript %}{% endblock %}
 </head>

templates/gracedb/eel_form_frag.html

+<div data-dojo-type="dijit/form/Form" id="eelFormContainer"
+data-dojo-id="eelFormContainer" encType="multipart/form-data" action=""
+method="">
+<script>
+ require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"]);
+ </script>
+		 
+<script type="dojo/on" data-dojo-event="reset">
+return confirm('Press OK to reset widget values');
+</script>
+<script type="dojo/on" data-dojo-event="submit">
+if(this.validate()){
+return confirm('Form is valid, press OK to submit');
+}else{
+alert('Form contains invalid data.  Please correct first');
+return false;
+}
+return true;
+</script>
+
+<form method="POST" action="{% url "embblogentry" object.graceid "" %}">
+<table>
+
+<tr><td><a href=# onclick="alert('Define here what subclass of report this is:\n FOOTPRINT: There is or could be image data taken of the sky, with a specific instrument, at a specific time, in a specific waveband, as followup of a specific LVC alert.\n SOURCE: There is a candidate source at the given location, that could be associated with the given LVC alert.\n COMMENT: The primary purpose of this report is a human-written comment concerning the given LVC alert.'); return false;">
+What type of report is this?</a></td>       <td><select name="eel_status">
+<option value="FO">FOOTPRINT</option>
+<option value="SO">SOURCE</option>
+<option value="CO">COMMENT</option>
+</select></td></tr>
+
+<tr><td><a href=# onclick="alert('There is also Observation Status which is:\n OBSERVATION: has been done.\n PREDICTION: this report represents intent or future observation.\n TEST: This EEL is part of a test and has no astrophysical significance.\n NOT APPLICABLE: It is neither observation nor prediction.'); return false;">
+Observation Status</a></td>       <td><select name="obs_status">
+<option value="OB">OBSERVATION</option>
+<option value="PR">PREDICTION</option>
+<option value="TE">TEST</option>
+<option value="NA">NOT APPLICABLE</option>
+</select></td></tr>
+
+<tr><td><a href=# onclick="alert('Group with which the LSC has signed a trust agreement, hereby providing data 
+under its trust (required).'); return false;">
+Which MOU Group provides this report?</a></td>       <td><select name="group">
+{% for g in groups %}
+<option value="{{ g }}">{{ g }}</option>
+{% endfor %} </select> </td> </tr>
+
+<tr><td><a href=# onclick="alert('An ID from the data owner to identify this footprint (optional).');return false;">
+Your reference</a></td>   <td><input type="text" name="footprintID"/></td></tr>
+
+<tr><td><a href=# onclick="alert('A natural language report.');return false;">
+Report as text</a></td>         <td colspan=2><textarea name="comment" rows="8" cols="50"></textarea></td></tr>
+
+<tr><td><a href=# onclick="alert('The name of the photon detector whose observational metadata is being recorded here (optional).');return false;">
+Instrument</a></td>       <td><input type="text" name="instrument"> </td> </tr>
+
+<tr><td><a href=# onclick="alert('Specify waveband of the observation. Vocabulary is taken from the UCD vocabulary, a Virtual Observatory standard. Waveband can be either wide (eg Radio) or narrow (eg Radio 200-400 MHz).');return false;">
+Waveband</a></td>       <td colspan=2><select name="waveband">
+<option value="em.gamma">Gamma rays part of the spectrum</option>
+<option value="em.gamma.soft">Soft gamma ray (120 - 500 keV)</option>
+<option value="em.gamma.hard">Hard gamma ray (&gt;500 keV)</option>
+<option value="em.X-ray">X-ray part of the spectrum</option>
+<option value="em.X-ray.soft">Soft X-ray (0.12 - 2 keV)</option>
+<option value="em.X-ray.medium">Medium X-ray (2 - 12 keV)</option>
+<option value="em.X-ray.hard">Hard X-ray (12 - 120 keV)</option>
+<option value="em.UV">Ultraviolet part of the spectrum</option>
+<option value="em.UV.10-50nm">Ultraviolet between 10 and 50 nm</option>
+<option value="em.UV.50-100nm">Ultraviolet between 50 and 100 nm</option>
+<option value="em.UV.100-200nm">Ultraviolet between 100 and 200 nm</option>
+<option value="em.UV.200-300nm">Ultraviolet between 200 and 300 nm</option>
+<option value="em.UV.FUV">Far-Infrared, 30-100 microns</option>
+<option value="em.opt">Optical part of the spectrum</option>
+<option value="em.opt.U">Optical band between 300 and 400 nm</option>
+<option value="em.opt.B">Optical band between 400 and 500 nm</option>
+<option value="em.opt.V">Optical band between 500 and 600 nm</option>
+<option value="em.opt.R">Optical band between 600 and 750 nm</option>
+<option value="em.opt.I">Optical band between 750 and 1000 nm</option>
+<option value="em.IR">Infrared part of the spectrum</option>
+<option value="em.IR.NIR">Near-Infrared, 1-5 microns</option>
+<option value="em.IR.J">Infrared between 1.0 and 1.5 micron</option>
+<option value="em.IR.H">Infrared between 1.5 and 2 micron</option>
+<option value="em.IR.K">Infrared between 2 and 3 micron</option>
+<option value="em.IR.MIR">Medium-Infrared, 5-30 microns</option>
+<option value="em.IR.3-4um">Infrared between 3 and 4 micron</option>
+<option value="em.IR.4-8um">Infrared between 4 and 8 micron</option>
+<option value="em.IR.8-15um">Infrared between 8 and 15 micron</option>
+<option value="em.IR.15-30um">Infrared between 15 and 30 micron</option>
+<option value="em.IR.30-60um">Infrared between 30 and 60 micron</option>
+<option value="em.IR.60-100um">Infrared between 60 and 100 micron</option>
+<option value="em.IR.FIR">Far-Infrared, 30-100 microns</option>
+<option value="em.mm">Millimetric part of the spectrum</option>
+<option value="em.mm.1500-3000GHz">Millimetric between 1500 and 3000 GHz</option>
+<option value="em.mm.750-1500GHz">Millimetric between 750 and 1500 GHz</option>
+<option value="em.mm.400-750GHz">Millimetric between 400 and 750 GHz</option>
+<option value="em.mm.200-400GHz">Millimetric between 200 and 400 GHz</option>
+<option value="em.mm.100-200GHz">Millimetric between 100 and 200 GHz</option>
+<option value="em.mm.50-100GHz">Millimetric between 50 and 100 GHz</option>
+<option value="em.mm.30-50GHz">Millimetric between 30 and 50 GHz</option>
+<option value="em.radio">Radio part of the spectrum</option>
+<option value="em.radio.12-30GHz">Radio between 12 and 30 GHz</option>
+<option value="em.radio.6-12GHz">Radio between 6 and 12 GHz</option>
+<option value="em.radio.3-6GHz">Radio between 3 and 6 GHz</option>
+<option value="em.radio.1500-3000MHz">Radio between 1500 and 3000 MHz</option>
+<option value="em.radio.750-1500MHz">Radio between 750 and 1500 MHz</option>
+<option value="em.radio.400-750MHz">Radio between 400 and 750 MHz</option>
+<option value="em.radio.200-400MHz">Radio between 200 and 400 MHz</option>
+<option value="em.radio.100-200MHz">Radio between 100 and 200 MHz</option>
+<option value="em.radio.20-100MHz">Radio between 20 and 100 MHz</option>
+                                </select></td></tr>
+</table>
+<hr/>
+<script>
+function showRectanglesCheckbox(){
+    var s = document.getElementById('showRectangles');
+    showRectangles = s.checked;
+    if(showRectangles){ document.getElementById('rectanglesForm').style.display = "block"
+    } else {            document.getElementById('rectanglesForm').style.display = "none"
+    }
+    redrawAll();
+    return false;
+}
+</script>
+<input id="showRectangles" type="checkbox" onclick="showRectanglesCheckbox()" />add Sky Footprints<br/>
+<div id=rectanglesForm style="display: none;">
+<table>
+<tr><td><a href=# onclick="alert('RA and Dec specify a center point of a rectangle that is aligned equatorially. Or list of centers. They must be in decimal degrees 0<=RA<=360 -90<=Dec<=90, in the J2000 frame.');return false;">
+RA (decimal degrees)</a></td>             <td><input type="text" name="raList" value="" size=80/></td></tr>
+
+<tr><td><a href=# onclick="alert('RA and Dec specify a center point of a rectangle that is aligned equatorially. Or list of centers. They must be in decimal degrees 0<=RA<=360 -90<=Dec<=90, in the J2000 frame.');return false;">
+Dec (decimal degrees)</a></td>            <td><input type="text" name="decList" value="" size=80/></td></tr>
+
+<!--
+<script language="javascript" type="text/javascript" src="https://losc.ligo.org/s/js/gpstimeutil.js"></script>
+<script language="javascript" type="text/javascript" src="https://losc.ligo.org/s/js/sexg.js"></script>
+-->
+
+<tr><td><a href=# onclick="alert('The time at the center of a time interval during which the observation was taken. Or list of times.');return false;">
+GPStime</a></td>
+<td><input type="text" name="gpstimeList" value="" size=80/></td>
+<!--
+<td><input onKeyUp="return TIMEcopy(2,1);" id="TIMEgps1" name="gpstimeList" maxlength="12" size="20" value="1000000000"/></td>
+<td><input onKeyUp="return TIMEcopy(1,1);" id="TIMEiso1" name="TIMEiso1" maxlength="25" size="25" value="2011-09-14T01:46:25"/></td>
+<td><span id="TIMEerr1" STYLE="font: 12px Arial; color:red">OK</span><br/></td>
+-->
+</tr>
+
+<tr><td><a href=# onclick="alert('RAWidth and DecWidth specify the size of a a rectangle that is aligned equatorially. Thus the edge of the box is distant from the center by half of the width.');return false;">
+RAwidth (decimal degrees)</a></td>        <td><input type="text" name="raWidthList" value=""/></td></tr>
+
+<tr><td><a href=# onclick="alert('RAWidth and DecWidth specify the size of a a rectangle that is aligned equatorially. Thus the edge of the box is distant from the center by half of the width.');return false;">
+Decwidth (decimal degrees)</a></td>       <td><input type="text" name="decWidthList" value=""/></td></tr>
+
+<tr><td><a href=# onclick="alert('Duration is the number of seconds in the time interval during which the observation was taken.');return false;">
+Duration (seconds)</a></td>       <td><input type="text" name="durationList" value=""/></td></tr>
+
+</table>
+</div>
+<hr/>
+<script>
+function showJsonCheckbox(){
+    var s = document.getElementById('showJson');
+    showJson = s.checked;
+    if(showJson){ document.getElementById('jsonForm').style.display = "block"
+    } else {      document.getElementById('jsonForm').style.display = "none"
+    }
+    redrawAll();
+    return false;
+}
+</script>
+<input id="showJson" type="checkbox" onclick="showJsonCheckbox()" />add JSON data<br/>
+<div id=jsonForm style="display: none;">
+<table>
+<tr><td><a href=# onclick="alert('This section allows for machine-readable data to be included in a flexible way. any key can be any value in a JSON dictionary. There is a useful validator at http://jsonlint.com.');return false;">
+JSON data</a></td>       <td colspan=2><textarea name="extra_info_dict" rows="20" cols="50"></textarea></td></tr>
+</table>
+</div>
+<hr/>
+<input type="submit" value="Submit EMBB Report"/>
+</form>
+
+</div>
+

templates/gracedb/event_detail_CWB.html

@@ -4,7 +4,7 @@
 
 {# Analysis-specific attributes for a cWB event#}
 {% block analysis_specific %}
-<h3>Analysis-Specific Attributes</h3>
+<h2>Analysis-Specific Attributes</h2>
 
 <table class="analysis_specific"> <tbody>
     <tr>

templates/gracedb/event_detail_GRB.html

@@ -2,7 +2,7 @@
 {% load timeutil %}
 
 {% block basic_info %}
-<h3> Basic Info </h3>
+<h2> Basic Info </h2>
 
 <table class="event">
     {% if skyalert_authorized  %}
@@ -19,13 +19,13 @@
             <th>Search</th>
             <th>Instruments</th>
             <th>
-                {{ "gps"|timeselect:"gps" }}
-                Event Time
+                <div id="basic_info_event_ts"></div>
+                <div> Event Time </div>
             </th>
             <th>Links</th>
             <th>
-                {{"created"|timeselect:"utc" }}
-                Submitted
+                <div id="basic_info_created_ts"></div>
+                <div> Submitted </div>
             </th>
     </tr>
 

templates/gracedb/event_detail_coinc.html

@@ -12,7 +12,7 @@
 <div style="display:table-row;width:100%">
 
 <div style="display:table-cell;float:left;width:35%;">
-<h3>Coinc Tables</h3>
+<h2>Coinc Tables</h2>
 <!-- <table class="analysis_specific"> <tbody> -->
 <!-- 5 rows here -->
 <table style="height:320px"> 
@@ -33,7 +33,7 @@
 <!-- Single Inspiral Data -->
 <!-- 13 rows here. -->
 <div style="display:table-cell;float:right;width:65%">
-<h3>Single Inspiral Tables</h3>
+<h2>Single Inspiral Tables</h2>
 
 <!--<div id="single_inspiral_tables"> -->
 <!-- <div id="single_inspiral_tables"

templates/gracedb/neighbors_frag.html

 {% load timeutil %}
 {% load scientific %}
 <div id="neighbors" class="content-area">
-<h3>Neighbors &nbsp;
+<h2>Neighbors &nbsp;
     <span data-dojo-type="dijit/InlineEditBox"
         data-dojo-props="editor:'dijit/form/TextBox', editorParams:{constraints:{places:0} }" width="100px" 
         title="window"
-        onchange="refresh_neighbors(this.value)">{{neighbor_delta}}</span></h3>
+        onchange="refresh_neighbors(this.value)">{{neighbor_delta}}</span></h2>
 
 {% if nearby %}
 
@@ -18,15 +18,15 @@
             <th>Search</th>
             <th>Instruments</th>
             <th>
-                {{ "ngps"|timeselect:"gps" }}
-                Event Time
+                <div id="neighbors_event_ts"></div>
+                <div> Event Time </div>
             </th>
             <th>&Delta;gpstime</th>
             <th>FAR (Hz)</th>
             <th>Links</th>
             <th>
-                {{"ncreated"|timeselect:"utc" }}
-                Submitted
+                <div id="neighbors_created_ts"></div>
+                <div> Submitted </div>
             </th>
     </tr>
     {% for delta, object in nearby %}