Updated source detail page layout (#526)

* Updated source detail page layout - Added first detection JS9 at the top of the page. - Extended the external results row count. - Swap position of JS9 and aladin on measurement detail page to match. * Minor tidy of new lines - [skip ci]
askap-vast · May 17, 2021 · 5b36486 · 5b36486
1 parent 24c87a0
commit 5b36486
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Changed
 
+- Changed layout of source detail page [#526](https://github.com/askap-vast/vast-pipeline/pull/526).
 - Updated mkdocs-material to 7.1.4 for native creation date support [#518](https://github.com/askap-vast/vast-pipeline/pull/518).
 - Updated developing docs to specify the main development branch as dev instead of master [#521](https://github.com/askap-vast/vast-pipeline/pull/521).
 - Updated tests to account for relation fix [#510](https://github.com/askap-vast/vast-pipeline/pull/510).
@@ -94,6 +95,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### List of PRs
 
+- [#526](https://github.com/askap-vast/vast-pipeline/pull/526) feat: Updated source detail page layout.
 - [#518](https://github.com/askap-vast/vast-pipeline/pull/518) dep: Updated mkdocs-material for native creation date support.
 - [#523](https://github.com/askap-vast/vast-pipeline/pull/523) fix: Fixed external search results table nan values.
 - [#521](https://github.com/askap-vast/vast-pipeline/pull/521) doc: update doc related to default dev branch.

diff --git a/static/js/datatables-pipeline.js b/static/js/datatables-pipeline.js
@@ -254,7 +254,7 @@ $(document).ready(function() {
     */
     .DataTable({
       "searching": false,
-      "pageLength": 5,
+      "pageLength": 15,
       "lengthChange": false,
       // need a different dom for external results table
       "dom": (

diff --git a/templates/measurement_detail.html b/templates/measurement_detail.html
@@ -136,13 +136,6 @@ <h6 class="m-0 font-weight-bold text-primary">Details</h6>
       </div>
     </div>
 
-    <!-- Aladin viz tile -->
-    <div class="col-xl-4 d-flex">
-      <div class="card shadow mb-4 flex-fill" style="min-height: 33vh;">
-        <div id="aladinViz"></div>
-      </div>
-    </div>
-
     <div class="col-xl-4 d-flex">
       <div class="card shadow mb-4 flex-fill">
         <div class="card-header py-3">
@@ -154,6 +147,15 @@ <h6 class="m-0 font-weight-bold text-primary">Postage Stamp</h6>
         </div>
       </div>
     </div>
+
+    <!-- Aladin viz tile -->
+    <div class="col-xl-4 d-flex">
+      <div class="card shadow mb-4 flex-fill" style="min-height: 33vh;">
+        <div id="aladinViz"></div>
+      </div>
+    </div>
+
+
   </div>
 
   <div class="row">

diff --git a/templates/source_detail.html b/templates/source_detail.html
@@ -78,9 +78,8 @@ <h1 class="h3 mb-2 text-gray-800"><strong>Source:</strong> {{ source.name }}</h1
   </div>
 
   <div class="row">
-
-    <!-- Basic Card Example -->
-    <div class="col-xl-4 col-lg-6 mb-4">
+    <!-- General details -->
+    <div class="col-xl-4 mb-4">
       <div class="card shadow mb-4 h-100">
         <div class="card-header py-3">
           <h6 class="m-0 font-weight-bold text-primary">Details</h6>
@@ -89,101 +88,121 @@ <h6 class="m-0 font-weight-bold text-primary">Details</h6>
           <p>
             <strong>Name: </strong>{{ source.name }}<br>
             <strong>Pipeline Run: </strong><a href="{% url 'vast_pipeline:run_detail' source.run_id %}"
-              target="_blank">{{ source.run_name }}</a>
+            target="_blank">{{ source.run_name }}</a>
           </p>
           <p>
             <strong>Position: </strong><span class="clipboard-copy">{{ source.wavg_ra_hms }} {{ source.wavg_dec_dms }}</span><br>
             <strong>Position (Decimal): </strong><span class="clipboard-copy">{{ source.wavg_ra|floatformat:6 }} {{ source.wavg_dec|floatformat:6 }}</span><br>
             <strong>Position (Galactic): </strong><span class="clipboard-copy">{{ source.wavg_l|floatformat:6 }} {{ source.wavg_b|floatformat:6 }}</span>
           </p>
-          <p>
-            <div class="row">
+          <div class="row">
             <div class="col-xl">
               <p>
-                <strong>Avg. Int. Flux: </strong>{{ source.avg_flux_int|floatformat:3 }} mJy<br>
-                <strong>Min. Int. Flux: </strong>{{ source.min_flux_int|floatformat:3 }} mJy<br>
-                <strong>Max Int. Flux: </strong>{{ source.max_flux_int|floatformat:3 }} mJy<br>
-                <strong>Min Int. Flux Isl. Ratio: </strong>{{ source.min_flux_int_isl_ratio|floatformat:2 }}
+                <strong>Nr Datapoints: </strong>{{ source.n_meas }} (<a href="#measurementsHeader">Table</a>)<br>
+                <strong>Nr Selavy: </strong>{{ source.n_meas_sel }}<br>
+                <strong>Nr Forced: </strong>{{ source.n_meas_forced }}<br>
+                <strong>Nr Relations: </strong>{{ source.n_rel }}
+                {% if source.n_rel > 0 %}(<a href="#relatedHeader">Table</a>){% endif %}<br>
+                <strong>Nr Siblings: </strong>{{ source.n_sibl }}
+              </p>
+              <p>
+                <strong>W. Avg RA Err: </strong>{{ source.wavg_uncertainty_ew|deg_to_arcsec|floatformat:3 }}&Prime;<br>
+                <strong>W. Avg Dec Err: </strong>
+                {{ source.wavg_uncertainty_ns|deg_to_arcsec|floatformat:3 }}&Prime;<br>
               </p>
             </div>
             <div class="col-xl">
               <p>
-                <strong>Avg. Peak Flux: </strong>{{ source.avg_flux_peak|floatformat:3 }} mJy/beam<br>
-                <strong>Min. Peak Flux: </strong>{{ source.min_flux_peak|floatformat:3 }} mJy/beam<br>
-                <strong>Max Peak Flux: </strong>{{ source.max_flux_peak|floatformat:3 }} mJy/beam<br>
-                <strong>Min Peak Flux Isl. Ratio: </strong>{{ source.min_flux_peak_isl_ratio|floatformat:2 }}
+                <strong>Avg. Compactness: </strong>{{ source.avg_compactness|floatformat:3 }}<br>
+                <strong>Neighbour Dist: </strong>{{ source.n_neighbour_dist|deg_to_arcmin|floatformat:2 }}&prime;<br>
+                <strong>Max SNR: </strong>{{ source.max_snr|floatformat:2 }}<br>
+                <strong>Min SNR: </strong>{{ source.min_snr|floatformat:2 }}
+              </p>
+              <p>
+                <br>
+                <strong>New Source: </strong>{{ source.new }}<br>
+                <strong>New High Sigma:
+                </strong>{% if source.new %}{{ source.new_high_sigma|floatformat:2 }}{% else %}N/A{% endif %}
               </p>
             </div>
           </div>
-          <div class="row">
+        </div>
+      </div>
+    </div>
+
+    <!-- JS9 First Detection -->
+    <div class="col-xl-4 d-flex">
+      <div class="card shadow mb-4 flex-fill">
+        <div class="card-header py-3">
+          <h6 class="m-0 font-weight-bold text-primary">First Detection Postage Stamp</h6>
+        </div>
+        <div class="card-body">
+          <div class="JS9" id="JS9_{{ source.n_meas|add:"1" }}" data-width="450px" data-height="360px"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Aladin -->
+    <div class="col-xl-4 d-flex">
+      <div class="card shadow mb-4 flex-fill" style="min-height: 33vh;">
+        <div id="aladinViz"></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="row">
+    <!-- Flux details -->
+    <div class="col-xl-4 col-lg-6 mb-4">
+      <div class="card shadow mb-4 h-100">
+        <div class="card-header py-3">
+          <h6 class="m-0 font-weight-bold text-primary">Flux & Variability Details</h6>
+        </div>
+        <div class="card-body">
+            <div class="row">
             <div class="col-xl">
               <p>
-                <strong>W. Avg RA Err: </strong>{{ source.wavg_uncertainty_ew|deg_to_arcsec|floatformat:3 }}&Prime;<br>
-                <strong>W. Avg Dec Err: </strong>
-                {{ source.wavg_uncertainty_ns|deg_to_arcsec|floatformat:3 }}&Prime;<br>
-                <strong>Avg. Compactness: </strong>{{ source.avg_compactness|floatformat:3 }}<br>
-                <strong>Neighbour Dist: </strong>{{ source.n_neighbour_dist|deg_to_arcmin|floatformat:2 }}&prime;
+                <strong>Integrated Flux (mJy)</strong>
               </p>
               <p>
-                <strong>Max SNR: </strong>{{ source.max_snr|floatformat:2 }}<br>
-                <strong>Min SNR: </strong>{{ source.min_snr|floatformat:2 }}
+                <strong>Avg. Int. Flux: </strong>{{ source.avg_flux_int|floatformat:3 }}<br>
+                <strong>Min. Int. Flux: </strong>{{ source.min_flux_int|floatformat:3 }}<br>
+                <strong>Max Int. Flux: </strong>{{ source.max_flux_int|floatformat:3 }}<br>
+                <strong>Min Int. Flux Isl. Ratio: </strong>{{ source.min_flux_int_isl_ratio|floatformat:2 }}
               </p>
               <p>
-                <strong>Nr Datapoints: </strong>{{ source.n_meas }} (<a href="#measurementsHeader">Table</a>)<br>
-                <strong>Nr Selavy: </strong>{{ source.n_meas_sel }}<br>
-                <strong>Nr Forced: </strong>{{ source.n_meas_forced }}
+                <strong>Max |Vs| metric (int): </strong>{{ source.vs_abs_significant_max_int|floatformat:2 }}<br>
+                <strong>Max |m| metric (int): </strong>{{ source.m_abs_significant_max_int|floatformat:2 }}
               </p>
               <p>
-                <strong>Nr Relations: </strong>{{ source.n_rel }}
-                {% if source.n_rel > 0 %}(<a href="#relatedHeader">Table</a>){% endif %}<br>
-                <strong>Nr Siblings: </strong>{{ source.n_sibl }}
+                <strong>V (Int. Flux): </strong>{{ source.v_int|floatformat:2 }}<br>
+                <strong>&eta; (Int. Flux): </strong>{{ source.eta_int|floatformat:2 }}<br>
               </p>
             </div>
             <div class="col-xl">
               <p>
-                <strong>V (Int. Flux): </strong>{{ source.v_int|floatformat:2 }}<br>
-                <strong>V (Peak Flux): </strong>{{ source.v_peak|floatformat:2 }}<br>
-                <strong>&eta; (Int. Flux): </strong>{{ source.eta_int|floatformat:2 }}<br>
-                <strong>&eta; (Peak Flux): </strong>{{ source.eta_peak|floatformat:2 }}
+                <strong>Peak Flux (mJy/beam)</strong>
               </p>
               <p>
-                <strong>New Source: </strong>{{ source.new }}<br>
-                <strong>New High Sigma:
-                </strong>{% if source.new %}{{ source.new_high_sigma|floatformat:2 }}{% else %}N/A{% endif %}
+                <strong>Avg. Peak Flux: </strong>{{ source.avg_flux_peak|floatformat:3 }}<br>
+                <strong>Min. Peak Flux: </strong>{{ source.min_flux_peak|floatformat:3 }}<br>
+                <strong>Max Peak Flux: </strong>{{ source.max_flux_peak|floatformat:3 }}<br>
+                <strong>Min Peak Flux Isl. Ratio: </strong>{{ source.min_flux_peak_isl_ratio|floatformat:2 }}
               </p>
               <p>
                 <strong>Max |Vs| metric (peak): </strong>{{ source.vs_abs_significant_max_peak|floatformat:2 }}<br>
-                <strong>Max |Vs| metric (int): </strong>{{ source.vs_abs_significant_max_int|floatformat:2 }}<br>
                 <strong>Max |m| metric (peak): </strong>{{ source.m_abs_significant_max_peak|floatformat:2 }}<br>
-                <strong>Max |m| metric (int): </strong>{{ source.m_abs_significant_max_int|floatformat:2 }}
               </p>
               <p>
-                <a href="#lightcurveHeader">Lightcurve</a><br>
-                <a href="#postageHeader">Postage stamps</a>
-              </p>
+                <strong>V (Peak Flux): </strong>{{ source.v_peak|floatformat:2 }}<br>
+                <strong>&eta; (Peak Flux): </strong>{{ source.eta_peak|floatformat:2 }}
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="col-xl-4 col-lg-6 mb-4">
-      <!-- Comments -->
-      {% include "comments_component.html" %}
-    </div>
-
-    <!-- Aladin viz tile -->
-    <div class="col-xl-4 mb-4">
-      <div class="card shadow mb-4 h-100" style="min-height: 16em;">
-        <div id="aladinViz"></div>
-      </div>
-    </div>
-
-  </div> <!-- /.row -->
-
-  <div class="row">
-
-    <!-- Area Chart -->
+    <!-- Lightcurve -->
     <div class="col-xl-8 mb-4">
       <div class="card shadow h-100">
         <div class="card-header py-3 clearfix" id="lightcurveHeader">
@@ -212,8 +231,11 @@ <h6 class="m-0 font-weight-bold text-primary float-left">Light Curve</h6>
       </div>
     </div>
 
+  </div>
+
+  <div class="row">
     <!-- DataTable External Search Results -->
-    <div class="col-xl-4 mb-4">
+    <div class="col-xl-6 mb-4">
       <div class="card shadow mb-4 h-100">
         <div class="card-header py-3">
           <h6 class="m-0 font-weight-bold text-primary">External Search Results (1 arcmin)</h6>
@@ -238,7 +260,11 @@ <h6 class="m-0 font-weight-bold text-primary">External Search Results (1 arcmin)
       </div>
     </div>
 
-  </div> <!-- /.row -->
+    <!-- comments   -->
+    <div class="col mb-4">
+      {% include "comments_component.html" %}
+    </div>
+  </div>
 
   <!-- Postage stamps -->
   <div class="card shadow mb-4">
@@ -498,9 +524,11 @@ <h5 class="modal-title" id="exampleModalLabel">Add a comment for this source</h5
         return Bokeh.embed.embed_item(item, "lightCurveBokeh")
       })
   }
+
   // when JS9 is ready, load the cutout images into the correct display panels
   $(document).on("JS9:ready", async function () {
     var measurementData = JSON.parse(document.getElementById("data-js9").textContent);
+    measurementData.push(measurementData[{{ first_det_meas_index }}]);
     // load all images and wait until they're all done
     await Promise.all(measurementData.map((measurement, i) => {
       var displayId = "JS9_" + (i + 1);

diff --git a/vast_pipeline/views.py b/vast_pipeline/views.py
@@ -1333,6 +1333,9 @@ def SourceDetail(request, pk):
             frequency=F('image__band__frequency'),
         ).order_by('datetime').values(*tuple(cols))
     )
+
+    first_det_meas_index = [i['forced'] for i in measurements].index(False)
+
     for one_m in measurements:
         one_m['datetime'] = one_m['datetime'].isoformat()
 
@@ -1444,6 +1447,7 @@ def SourceDetail(request, pk):
         'source': source,
         'source_next_id': source_next_id,
         'source_previous_id': source_previous_id,
+        'first_det_meas_index': first_det_meas_index,
         'datatables': [measurements, related_datatables],
         # flag to deactivate starring and render yellow star
         'sourcefav': (