Website improvements

[ajstewart]

Website updates that:

• Fills out information on all detail pages.
• Adds frequency information the measurements and images.
• Adds celestial plot and tables to pipeline detail page.
• Simplifies navbar and fixes overspill (Small UI improvements/fixes #118, Simplify left Navbar menu #280).
• Adds useful links to navbar.
• Excludes sources and pipeline runs from being listed in the query page that are not complete (Exclude listing sources that belong to a pipeline with running status #225).
• Clarifies number of measurements (UI number of measurements not clear #263).
• Adds tool tips to query (Add tooltips for filtering #274).
• Adds hash reading to query to allow filling from URL hash parameters.
• Add links to number cards.
• Added home icon on hover.
• Added copy-to-clipboard functionality on coordinates.
• Fixes favourite source table.
• Changes source names to the format ASKAP_hhmmss.ss(+/-)ddmmss.ss.

Fixes #118.
Fixes #225.
Fixes #263.
Fixes #274.
Fixes #280.

[ajstewart]

@srggrs @marxide I've spent some time tidying up the website and making sure all the information that should be displayed is displayed, among a bunch of other changes in the top comment.

Though I wanted to ask for your help on a couple things:

• You'll see that I've added a copy-to-clipboard functionality on coordinates, e.g.
  

  vast-pipeline/templates/source_detail.html

  Lines 398 to 439 in c21c004

  	<script type="text/javascript">
  	bootstrap_alert = function() {}
  	bootstrap_alert.success = function(message) {
  	$('#alert_placeholder').html('<div id="copyalert" class="alert alert-success alert-dismissible fade show" role="alert">'+message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
  	setTimeout(function () {
  	$("#copyalert").fadeTo(500, 0).slideUp(600, function () {
  	$(this).remove();
  	});
  	}, 2000);
  	}
  	var $body = document.getElementsByTagName('body')[0];
  	var $btnCopy = document.getElementById('btnCopy');
  	var $btnDegCopy = document.getElementById('btnDegCopy');
  	var $btnGalCopy = document.getElementById('btnGalCopy');
  	var secretInfo = document.getElementById('secretInfo').innerHTML;
  	var secretDegInfo = document.getElementById('secretDegInfo').innerHTML;
  	var secretGalInfo = document.getElementById('secretGalInfo').innerHTML;
  	var copyToClipboard = function(secretInfo) {
  	var $tempInput = document.createElement('INPUT');
  	$body.appendChild($tempInput);
  	$tempInput.setAttribute('value', secretInfo)
  	$tempInput.select();
  	document.execCommand('copy');
  	$body.removeChild($tempInput);
  	}
  	$btnCopy.addEventListener('click', function(ev) {
  	copyToClipboard(secretInfo);
  	bootstrap_alert.success("{{ source.wavg_ra_hms }} {{ source.wavg_dec_dms }} copied!");
  	});
  	$btnDegCopy.addEventListener('click', function(ev) {
  	copyToClipboard(secretDegInfo);
  	bootstrap_alert.success("{{ source.wavg_ra|floatformat:6 }} {{ source.wavg_dec|floatformat:6 }} copied!");
  	});
  	$btnGalCopy.addEventListener('click', function(ev) {
  	copyToClipboard(secretGalInfo);
  	bootstrap_alert.success("{{ source.wavg_l|floatformat:6 }} {{ source.wavg_b|floatformat:6 }} copied!");
  	});
  	</script>

  
  I wanted to ask for general help and feedback on two areas:
  Firstly should this script that I've placed in the html files be placed in its own .js file?
  Second I got some alerts working on a successful copy (which I have taken from my RACS website) but I couldn't work out how to get the alert to look the same as the one that is used on the pipeline run creation.

• The datatables that are produced by custom viewsets don't work on the sorting or searching. E.g. the related sources table that Sergio made (I have copied this method to create other tables). When I investigate with the console I can see that JS9 is attempting to do something with the request, where as this doesn't happen with tables created with the standard api -list calls. I couldn't work out what was going on, perhaps you'll have an idea @marxide?

You could go on forever with the website edits but I think this PR will at least now present all the information possible from the pipeline.

[ajstewart]

I also couldn't work out how to make the source query perform the search when it finds the hash arguments. I tried to simulate a click on the catalogSearch button but this didn't seem to work.

[marxide]

Firstly should this script that I've placed in the html files be placed in its own .js file?

My opinion is that short, page-specific scripts (i.e. not reused on other pages) like this one are fine as is. The disadvantage is that they won't get minified by gulp, but they're not that long anyway. I don't feel strongly about it though.

Second I got some alerts working on a successful copy (which I have taken from my RACS website) but I couldn't work out how to get the alert to look the same as the one that is used on the pipeline run creation.

I'm not sure I like the pipeline run creation alert. I barely noticed it! I think we should move their placement to top-right or top-centre. There's an open issue to replace the alerts with Bootstrap's toast component #260, maybe we should leave your alert for now and fix it when we replace the others with toasts?

• The datatables that are produced by custom viewsets don't work on the sorting or searching. E.g. the related sources table that Sergio made (I have copied this method to create other tables). When I investigate with the console I can see that JS9 is attempting to do something with the request, where as this doesn't happen with tables created with the standard api -list calls. I couldn't work out what was going on, perhaps you'll have an idea @marxide?

Oh yikes, I think the JQuery that is bundled in JS9 is taking precedence probably because it's loaded after JQuery. We should definitely fix that - I'll open an issue and investigate later. Those messages in the console are just the AJAX requests sent to the API, it just comes from js9support.min.js because that's where JQuery got redefined.

Ignoring that worrying detail, I can't quite get my head around how the related sources datatable is configured or why it's not ordering properly. I can see a query parameter get changed to asc or desc when I click a column, but the data in the API response is in the same order.

[marxide]

Found the datatables problem! It's in the custom related action for SourceViewSet. It was doing pagination, but not filtering. I pushed the necessary change in bb4d4c8.

[ajstewart]

Found the datatables problem! It's in the custom related action for SourceViewSet. It was doing pagination, but not filtering. I pushed the necessary change in bb4d4c8.

Great thank you! Did you happen to read something on that? Just wondered if I was looking in the wrong place in the docs for future reference.

[marxide]

Found the datatables problem! It's in the custom related action for SourceViewSet. It was doing pagination, but not filtering. I pushed the necessary change in bb4d4c8.

Great thank you! Did you happen to read something on that? Just wondered if I was looking in the wrong place in the docs for future reference.

It wasn't easy to find! ModelViewSet inherits GenericViewSet which inherits GenericAPIView. In the DRF docs for generic views, it mentions filter_queryset: https://www.django-rest-framework.org/api-guide/generic-views/#filter_querysetself-queryset

[srggrs]

Need the CHANGELOG as per Slack conversation, then it's ready!

[ajstewart]

Need the CHANGELOG as per Slack conversation, then it's ready!

What do you think of this changelog? https://github.com/askap-vast/vast-pipeline/blob/website-improvments/CHANGELOG.md

[srggrs]

Need the CHANGELOG as per Slack conversation, then it's ready!

What do you think of this changelog? https://github.com/askap-vast/vast-pipeline/blob/website-improvments/CHANGELOG.md

I think is great! Thx! I wonder if need an extra # in every section to make everything much smaller and compacted...

[ajstewart]

Need the CHANGELOG as per Slack conversation, then it's ready!

What do you think of this changelog? https://github.com/askap-vast/vast-pipeline/blob/website-improvments/CHANGELOG.md

I think is great! Thx! I wonder if need an extra # in every section to make everything much smaller and compacted...

I've updated it again, also included an intro and the links to the comparisons.

[ajstewart]

Ok I'll wait for @marxide to comment on the previous comments made from the last review and then it should be ready.

[ajstewart]

@srggrs, @marxide confirmed the last two review comments do not require any changes so it's at the same point you approved it earlier. So I'm going to merge this so @marxide can potentially work on the other branches with this in place now.