Website improvements

CHANGELOG.md

@@ -1,12 +1,44 @@
-<!--
-follow https://github.com/apache/incubator-superset/blob/master/CHANGELOG.md
--->
-## Change Log
+# Change Log
+All notable changes to this project will be documented in this file.
 
-### 0.1.0 (2020/09/27)
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), with an added `List of PRs` section and links to the relevant PRs on the individal updates. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+#### Added
+- Fills out information on all webinterface detail pages [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Adds frequency information the measurements and images webinterface tables. [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Adds celestial plot and tables to webinterface pipeline detail page [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Adds useful links to webinterface navbar [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Adds tool tips to webinterface source query [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Adds hash reading to webinterface source query to allow filling from URL hash parameters [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Add links to number cards on webinterface [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Added home icon on hover on webinterface [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Added copy-to-clipboard functionality on coordinates on webinterface [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+
+#### Changed
+- Multiple changes to webinterface page layouts [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Changes source names to the format `ASKAP_hhmmss.ss(+/-)ddmmss.ss` [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Simplified webinterface navbar [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Excludes sources and pipeline runs from being listed in the source query page that are not complete on the webinterface [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Clarifies number of measurements on webinterface detail pages [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Changed `N.A.` labels to `N/A` on the webinterface [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+
+#### Fixed 
+- Fixes webinterface navbar overspill at small sizes [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+- Fixes webinterface favourite source table [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+
+#### Removed
+- Removed `static/css/collapse-box.css`, content moved to `pipeline.css` [#345](https://github.com/askap-vast/vast-pipeline/pull/345).
+
+#### List of PRs
+- [#345](https://github.com/askap-vast/vast-pipeline/pull/345) feat, fix: Website improvements.
+
+## [0.1.0] (2020/09/27)
 
 First release of the Vast Pipeline. This was able to process 707 images (EPOCH01 to EPOCH11x) on a machine with 64 GB of RAM.
 
+#### List of PRs
 - [#347](https://github.com/askap-vast/vast-pipeline/pull/347) feat: Towards first release
 - [#354](https://github.com/askap-vast/vast-pipeline/pull/354) fix, model: Updated Band model fields to floats
 - [#346](https://github.com/askap-vast/vast-pipeline/pull/346) fix: fix JS9 overflow in measurement detail view
@@ -39,5 +71,8 @@ First release of the Vast Pipeline. This was able to process 707 images (EPOCH01
 - [#291](https://github.com/askap-vast/vast-pipeline/pull/291) fix: Bug fix for forced_photom cluster allow_nan
 - [#289](https://github.com/askap-vast/vast-pipeline/pull/289) fix: Fix broken UI run creation
 - [#287](https://github.com/askap-vast/vast-pipeline/pull/287) fix: Fix forced measurement parquet files write
-- [#286](https://github.com/askap-vast/vast-pipeline/pull/285) fix: compile JS9 without helper option
+- [#286](https://github.com/askap-vast/vast-pipeline/pull/286) fix: compile JS9 without helper option
 - [#285](https://github.com/askap-vast/vast-pipeline/pull/285) fix: Fix removing forced parquet and clear images from piperun
+
+[unreleased]: https://github.com/askap-vast/vast-pipeline/compare/0.1.0...HEAD
+[0.1.0]: https://github.com/askap-vast/vast-pipeline/releases/0.1.0

static/css/pipeline.css

@@ -28,3 +28,29 @@
 #feedbackModalDialog {
   max-width: 75%;
 }
+
+#homeLogo:hover img{
+  display: none;
+}
+
+#homeLogo:hover:before {
+   font-style: normal;
+   font-variant: normal;
+   font-size: 1.5em;
+   text-rendering: auto;
+   -webkit-font-smoothing: antialiased;
+   font-family: "Font Awesome 5 Free";
+   font-weight: 900;
+   content: '\f015';
+}
+
+.dl-small dd {
+  margin-bottom: 0rem;
+}
+
+.card-header .fa {
+  transition: .3s transform ease-in-out;
+}
+.card-header .collapsed .fa {
+  transform: rotate(-90deg);
+}

static/css/sb-admin-2.css

@@ -10081,7 +10081,8 @@ a:focus {
 }
 
 .sidebar {
-  width: 4.5rem;
+  text-align: center;
+  width: 6.5rem;
   min-height: 100vh;
 }
 
@@ -10236,7 +10237,7 @@ a:focus {
   font-size: 0.65rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 3840px) {
   .sidebar {
     width: 13rem !important;
   }

static/js/clipboard-copy.js

@@ -0,0 +1,16 @@
+$(function() {
+  // append copy icon to each .clipboard-copy element
+  $('.clipboard-copy').append('<i class="far fa-copy ml-2" data-toggle="tooltip" data-placement="top"></i>');
+  // init the tooltip for the copy icons
+  $('i.fa-copy[data-toggle="tooltip"]').tooltip({title: "Copy to clipboard"});
+  // perform the copy action and update tooltip title to notify user
+  $('.clipboard-copy > i.fa-copy').on("click", function() {
+    let data = $(this).parent().text();
+    navigator.clipboard.writeText(data);
+    $(this).tooltip('dispose').tooltip({"title": "Copied!"}).tooltip('update').tooltip('show');
+  })
+  // revert copy tooltip title to original on mouseout
+  $('.clipboard-copy > i.fa-copy').on("mouseout", function() {
+    $(this).tooltip('dispose').tooltip({title: "Copy to clipboard"});
+  })
+});

static/js/datatables-pipeline.js

@@ -47,6 +47,7 @@ function obj_formatter(obj) {
 // Call the dataTables jQuery plugin
 $(document).ready(function() {
 
+  $('[data-toggle="tooltip"]').tooltip();
   let dataConfParsed = JSON.parse(document.getElementById('datatable-conf').textContent);
   let dataConfList = (Array.isArray(dataConfParsed)) ? dataConfParsed : [dataConfParsed];
   for (let dataConf of dataConfList){
@@ -66,6 +67,7 @@ $(document).ready(function() {
         ajax: dataConf.api,
         columns: dataConf.colsFields,
         order: dataConf.order,
+        searchDelay: 2000,
       };
     } else {
       // expect that there is a 'data' attribute with the data
@@ -112,67 +114,88 @@ $(document).ready(function() {
             "targets": 3,
             "data": "image",
             "render": function ( data, type, row, meta ) {
-              return '<a href="' + img_url + row[14] + '"target="_blank">' + row[3] + '</a>';
+              return '<a href="' + img_url + row[17] + '"target="_blank">' + row[3] + '</a>';
             }
           },
           {
             "targets": 4,
-            "data": "ra",
+            "data": "frequency",
             "render": function ( data, type, row, meta ) {
-              return row[4].toFixed(4);
+              return row[4].toFixed(2);
             }
           },
           {
             "targets": 5,
-            "data": "ra_err",
+            "data": "ra",
             "render": function ( data, type, row, meta ) {
-                return (row[5] * 3600.).toFixed(4);
+              return row[5].toFixed(4);
             }
           },
           {
             "targets": 6,
-            "data": "dec",
+            "data": "ra_err",
             "render": function ( data, type, row, meta ) {
-                return row[6].toFixed(4);
+                return (row[6] * 3600.).toFixed(4);
             }
           },
           {
             "targets": 7,
-            "data": "dec_err",
+            "data": "dec",
             "render": function ( data, type, row, meta ) {
-                return (row[7] * 3600.).toFixed(4);
+                return row[7].toFixed(4);
             }
           },
           {
             "targets": 8,
-            "data": "flux_int",
+            "data": "dec_err",
             "render": function ( data, type, row, meta ) {
-                return (row[8]).toFixed(3);
+                return (row[8] * 3600.).toFixed(4);
             }
           },
           {
             "targets": 9,
-            "data": "flux_int_err",
+            "data": "flux_int",
             "render": function ( data, type, row, meta ) {
                 return (row[9]).toFixed(3);
             }
           },
           {
             "targets": 10,
-            "data": "flux_peak",
+            "data": "flux_int_err",
             "render": function ( data, type, row, meta ) {
                 return (row[10]).toFixed(3);
             }
           },
           {
             "targets": 11,
-            "data": "flux_peak_err",
+            "data": "flux_peak",
             "render": function ( data, type, row, meta ) {
                 return (row[11]).toFixed(3);
             }
           },
+          {
+            "targets": 12,
+            "data": "flux_peak_err",
+            "render": function ( data, type, row, meta ) {
+                return (row[12]).toFixed(3);
+            }
+          },
+          {
+            "targets": 13,
+            "data": "local_rms",
+            "render": function ( data, type, row, meta ) {
+                return (row[13]).toFixed(2);
+            }
+          },
           {
             "targets": 14,
+            "data": "snr",
+            "render": function ( data, type, row, meta ) {
+                return (row[14]).toFixed(2);
+            }
+          },
+          {
+            "targets": 17,
             "searchable": false,
             "visible": false
           }

templates/base.html

@@ -25,9 +25,6 @@
   <!-- Custom styles on top of the SB admin template-->
   <link href="{% static 'css/pipeline.min.css' %}" rel="stylesheet">
 
-  <!-- Custom styles on top of the SB admin template-->
-  <link href="{% static 'css/pipeline.min.css' %}" rel="stylesheet">
-
   {% block head %}
 
   {% endblock head %}
@@ -42,9 +39,8 @@
     <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
       <!-- Sidebar - Brand -->
-      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'index' %}">
-        <img src="{% static 'img/vast.png' %}" width="50%">
-        <!-- <div class="sidebar-brand-text mx-1">VAST Pipeline</div> -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'index' %}" id='homeLogo'>
+        <img src="{% static 'img/vast.png' %}" width="50%" >
       </a>
 
       <!-- Divider -->
@@ -67,65 +63,61 @@
 
       <!-- Nav Item - Pipeline Runs -->
       <li class="nav-item">
-        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePipeRun" aria-expanded="true" aria-controls="collapsePipeRun">
+        <a class="nav-link collapsed" href="{% url 'vast_pipeline:run_index' %}">
           <i class="fas fa-fw fa-table"></i>
           <span>Pipeline Runs</span>
         </a>
-        <div id="collapsePipeRun" class="collapse" aria-labelledby="headingDataset" data-parent="#accordionSidebar">
-          <div class="bg-white py-2 collapse-inner rounded">
-            <a class="collapse-item" href="{% url 'vast_pipeline:run_index' %}">Overview</a>
-          </div>
-        </div>
       </li>
 
       <!-- Nav Item - Sources -->
-      <li class="nav-item">
-        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSource" aria-expanded="true" aria-controls="collapseSource">
+      <li class="nav-item" id="sourcesLink">
+        <a class="nav-link collapsed" href="{% url 'vast_pipeline:source_query' %}">
           <i class="fas fa-fw fa-share-alt"></i>
-          <span>Sources</span>
+          <span>Sources Query</span>
         </a>
-        <div id="collapseSource" class="collapse" aria-labelledby="headingCatalog" data-parent="#accordionSidebar">
-          <div class="bg-white py-2 collapse-inner rounded">
-            <a class="collapse-item" href="{% url 'vast_pipeline:source_query' %}">View all sources</a>
-          </div>
-        </div>
       </li>
 
       <!-- Nav Item - Measurements -->
       <li class="nav-item">
-        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSourceMeas" aria-expanded="true" aria-controls="collapseSourceMeas">
+        <a class="nav-link collapsed" href="{% url 'vast_pipeline:measurement_index' %}">
           <i class="fas fa-fw fa-bolt"></i>
           <span>Measurements</span>
         </a>
-        <div id="collapseSourceMeas" class="collapse" aria-labelledby="headingSource" data-parent="#accordionSidebar">
-          <div class="bg-white py-2 collapse-inner rounded">
-            <a class="collapse-item" href="{% url 'vast_pipeline:measurement_index' %}">View all measurements</a>
-          </div>
-        </div>
       </li>
 
       <!-- Nav Item - Images -->
       <li class="nav-item">
-        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseImage" aria-expanded="true" aria-controls="collapseImage">
+        <a class="nav-link collapsed" href="{% url 'vast_pipeline:image_index' %}">
           <i class="fas fa-fw fa-images"></i>
           <span>Images</span>
         </a>
-        <div id="collapseImage" class="collapse" aria-labelledby="headingImage" data-parent="#accordionSidebar">
-          <div class="bg-white py-2 collapse-inner rounded">
-            <a class="collapse-item" href="{% url 'vast_pipeline:image_index' %}">View all images</a>
-          </div>
-        </div>
       </li>
-
-      <!-- Nav Item - Analysis -->
+
       <li class="nav-item">
-        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseAnalysis" aria-expanded="true" aria-controls="collapseAnalysis">
-          <i class="fas fa-fw fa-fingerprint"></i>
-          <span>Analysis</span>
+        <a class="nav-link collapsed" target="_blank" href="https://github.com/askap-vast/vast-pipeline/issues/new">
+          <i class="fab fa-fw fa-github"></i>
+          <span>Pipeline Repository</span>
         </a>
-        <div id="collapseAnalysis" class="collapse" aria-labelledby="headingAnalysis" data-parent="#accordionSidebar">
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link collapsed" target="_blank" href="https://github.com/askap-vast/vast-pipeline/issues/new">
+          <i class="fas fa-fw fa-exclamation"></i>
+          <span>Raise Issue</span>
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLinks" aria-expanded="true" aria-controls="collapseLinks">
+          <i class="fas fa-fw fa-link"></i>
+          <span>VAST Links</span>
+        </a>
+        <div id="collapseLinks" class="collapse" aria-labelledby="headingDataset" data-parent="#accordionSidebar">
           <div class="bg-white py-2 collapse-inner rounded">
-            <a class="collapse-item" href="">Overview</a>
+            <a class="collapse-item" target="_blank" href="https://github.com/askap-vast">GitHub</a>
+            <a class="collapse-item" target="_blank" href="https://data.vast-survey.org">JupyterHub</a>
+            <a class="collapse-item" target="_blank" href="https://vast-survey.org">Website</a>
+            <a class="collapse-item" target="_blank" href="https://github.com/askap-vast/vast-project/wiki">Wiki</a>
           </div>
         </div>
       </li>
@@ -266,9 +258,9 @@
   </a>
 
   {% block modal %}
-
   {% endblock modal %}
 
+  {% block scripts %}
   <!-- Bootstrap core JavaScript-->
   <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
   <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
@@ -281,11 +273,9 @@
 
   <!-- Alerts script for all pages-->
   <script src="{% static 'js/alerts.min.js' %}"></script>
+  {% endblock scripts %}
 
   {% block custom_page_scripts %}
-
   {% endblock custom_page_scripts %}
-
 </body>
-
 </html>