Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated source detail page layout #526

Merged
merged 3 commits into from
May 17, 2021
Merged

Updated source detail page layout #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3caa27
Updated source detail page layout
ajstewart May 17, 2021
b1818b3
Merge branch 'dev' into source-detail-layout-update
ajstewart May 17, 2021
b4b0db9
Minor tidy of new lines
ajstewart May 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion static/js/datatables-pipeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": (
Expand Down
16 changes: 9 additions & 7 deletions templates/measurement_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
146 changes: 87 additions & 59 deletions templates/source_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions vast_pipeline/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down Expand Up @@ -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': (
Expand Down