Merge pull request #363 from askap-vast/issue-360-add-tables-csv-export

Add export and column visibility buttons to tables

CHANGELOG.md

@@ -7,6 +7,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Added
 
+- Added csv export button to datatables on webinterface [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Added support for Excel export button to datatables on webinterface (waiting on datatables buttons fix) [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Added column visibility button to datatables on webinterface [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Added dependancy datatables-buttons 1.6.4 [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Added dependancy jszip (required for Excel export) [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
 - Adds `n_selavy_measurements` and `n_forced_measurements` to run model [#362](https://github.com/askap-vast/vast-pipeline/pull/362).
 - Adds steps to populate new measurement count fields in pipeline run [#362](https://github.com/askap-vast/vast-pipeline/pull/362).
 - Source order from the query is preserved on source detail view [#364](https://github.com/askap-vast/vast-pipeline/pull/364).
@@ -23,6 +28,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Changed
 
+- Bumped datatables to 1.10.22 [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Changed `dom` layout on datatables [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
+- Changed external results table pagination buttons on source detail webinterface page pagination to include less numbers to avoid overlap [#363](https://github.com/askap-vast/vast-pipeline/pull/363).
 - Changes measurement counts view on website to use new model parameters [#362](https://github.com/askap-vast/vast-pipeline/pull/362).
 - 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).
@@ -43,6 +51,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### List of PRs
 
+- [#363](https://github.com/askap-vast/vast-pipeline/pull/363) feat, dep: Add export and column visibility buttons to tables.
 - [#362](https://github.com/askap-vast/vast-pipeline/pull/362) feat, model: Added number of measurements to Run DB model.
 - [#364](https://github.com/askap-vast/vast-pipeline/pull/361) feat: preserve source query order on detail view.
 - [#361](https://github.com/askap-vast/vast-pipeline/pull/361) feat, fix: restrict home dir scan to specified directory.

gulpfile.js

@@ -188,6 +188,14 @@ function modules() {
   ])
     .pipe(gulp.dest(paths.vendor + '/datatables'));
 
+  // dataTables-buttons
+  var dataTablesButtons = gulp.src([
+    './node_modules/datatables.net-buttons/js/*.js',
+    './node_modules/datatables.net-buttons-bs4/js/*.js',
+    './node_modules/datatables.net-buttons-bs4/css/*.css'
+  ])
+    .pipe(gulp.dest(paths.vendor + '/datatables-buttons'));
+
   // Font Awesome
   var fontAwesome = gulp.src('./node_modules/@fortawesome/**/*')
     .pipe(gulp.dest(paths.vendor + ''));
@@ -203,6 +211,12 @@ function modules() {
   ])
     .pipe(gulp.dest(paths.vendor + '/jquery'));
 
+  // jszip
+  var jszip = gulp.src([
+    './node_modules/jszip/dist/*.js',
+  ])
+    .pipe(gulp.dest(paths.vendor + '/jszip'));
+
   // d3 celestial
   var d3Celestial = gulp.src([
     './node_modules/d3-celestial/celestial*.js',
@@ -230,7 +244,7 @@ function modules() {
   var prismJsLineNumCss = gulp.src('./node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css')
     .pipe(gulp.dest(paths.vendor + '/prismjs/line-numbers'));
 
-  return merge(bootstrapJS, chartJS, dataTables, fontAwesome, jquery, jqueryEasing, d3Celestial, d3CelestialData, d3CelestialImage, particlesJs, prismJs, prismJsPy, prismJsLineNum, prismJsCss, prismJsLineNumCss);
+  return merge(bootstrapJS, chartJS, dataTables, dataTablesButtons, fontAwesome, jquery, jqueryEasing, jszip, d3Celestial, d3CelestialData, d3CelestialImage, particlesJs, prismJs, prismJsPy, prismJsLineNum, prismJsCss, prismJsLineNumCss);
 }
 
 // CSS task

package.json

@@ -42,11 +42,13 @@
     "chart.js": "2.9.3",
     "chartjs-plugin-error-bars": "^1.2.2",
     "d3-celestial": "^0.7.17",
-    "datatables.net-bs4": "1.10.20",
+    "datatables.net-bs4": "1.10.22",
+    "datatables.net-buttons-bs4": "1.6.4",
     "dotenv": "^8.2.0",
     "jquery": "3.4.1",
     "jquery.easing": "^1.4.1",
     "js9": "git+https://github.com/ericmandel/js9.git#v3.0",
+    "jszip": "3.5.0",
     "particles.js": "^2.0.0",
     "prismjs": "^1.21.0"
   },

static/js/datatables-pipeline.js

@@ -48,6 +48,16 @@ function obj_formatter(obj) {
 $(document).ready(function() {
 
   $('[data-toggle="tooltip"]').tooltip();
+  let buttons = [
+    {extend: 'colvis', className: 'btn-info btn-sm'},
+    {extend: 'csv', className: 'btn-info btn-sm'}
+    // {extend: 'excel', className: 'btn-info btn-sm'}
+  ]
+  let dom = (
+    "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
+    "<'row'<'col-sm-12'tr>>" +
+    "<'row'<'col-sm-5'i><'col-sm-7'p>>"
+  )
   let dataConfParsed = JSON.parse(document.getElementById('datatable-conf').textContent);
   let dataConfList = (Array.isArray(dataConfParsed)) ? dataConfParsed : [dataConfParsed];
   for (let dataConf of dataConfList){
@@ -68,6 +78,8 @@ $(document).ready(function() {
         columns: dataConf.colsFields,
         order: dataConf.order,
         searchDelay: 2000,
+        dom : dom,
+        buttons: buttons
       };
     } else {
       // expect that there is a 'data' attribute with the data
@@ -92,6 +104,8 @@ $(document).ready(function() {
         serverSide: false,
         data: dataSet,
         order: dataConf.order,
+        dom: dom,
+        buttons: buttons
       };
       if (dataConf.table == 'source_detail') {
         let tableElement = document.getElementById(table_id.replace('#', '')),
@@ -219,6 +233,13 @@ $(document).ready(function() {
       "searching": false,
       "pageLength": 5,
       "lengthChange": false,
+      // need a different dom for external results table
+      "dom": (
+        "<'row'<'col-sm-2'l><'col-sm-8 text-center'B><'col-sm-2'f>>" +
+        "<'row'<'col-sm-12'tr>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>"
+      ),
+      "buttons": buttons,
       "order": [[1, "asc"]],
       "columnDefs": [
         {
@@ -251,6 +272,7 @@ $(document).ready(function() {
         }
       ]
     });
+  $('#externalResultsTable').DataTable.ext.pager.numbers_length = 3;
 
   // Trigger the update search on the datatable
   $("#catalogSearch").on('click', function(e) {

templates/generic_table.html

@@ -5,6 +5,7 @@
 {% block head %}
   <!-- Custom styles for this page -->
   <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
+  <link rel="stylesheet" href="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.css' %}" />
   <!-- Bootstrap-select minified CSS -->
   <link rel="stylesheet" href="{% static 'vendor/bootstrap-select/css/bootstrap-select.min.css' %}">
 
@@ -302,6 +303,12 @@ <h5 class="modal-title m-0 font-weight-bold text-primary" id="exampleModalLabel"
 <!-- Page level plugins -->
 <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
 <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/dataTables.buttons.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.colVis.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.html5.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.flash.min.js' %}"></script>
+<script src="{% static 'vendor/jszip/jszip.min.js' %}"></script>
 <!-- Bootstrap-select minified JavaScript -->
 <script src="{% static 'vendor/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
 <!-- Run Config modal script -->

templates/image_detail.html

@@ -7,6 +7,7 @@
 {% block head %}
 
 <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
+<link rel="stylesheet" href="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.css' %}" />
 <link rel='stylesheet' href='https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />
 
 {% endblock head %}
@@ -196,6 +197,12 @@ <h6 class="card-header m-0 font-weight-bold text-primary">
 <!-- Page level plugins -->
 <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
 <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/dataTables.buttons.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.colVis.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.html5.min.js' %}"></script>
+<script src="{% static 'vendor/datatables-buttons/buttons.flash.min.js' %}"></script>
+<script src="{% static 'vendor/jszip/jszip.min.js' %}"></script>
 
 <!-- Datatable scripts -->
 {{ datatables|json_script:"datatable-conf" }}

templates/measurement_detail.html

@@ -9,6 +9,7 @@
 <link rel="stylesheet" href="{% static 'vendor/js9/js9-allinone.css' %}" />
 <link rel='stylesheet' href='https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />
 <link rel="stylesheet" href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" />
+<link rel="stylesheet" href="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.css' %}" />
 
 {% endblock head %}
 
@@ -272,6 +273,12 @@ <h6 class="card-header m-0 font-weight-bold text-primary">
   <!-- Page level plugins -->
   <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
+  <script src="{% static 'vendor/datatables-buttons/dataTables.buttons.min.js' %}"></script>
+  <script src="{% static 'vendor/datatables-buttons/buttons.bootstrap4.min.js' %}"></script>
+  <script src="{% static 'vendor/datatables-buttons/buttons.colVis.min.js' %}"></script>
+  <script src="{% static 'vendor/datatables-buttons/buttons.html5.min.js' %}"></script>
+  <script src="{% static 'vendor/datatables-buttons/buttons.flash.min.js' %}"></script>
+  <script src="{% static 'vendor/jszip/jszip.min.js' %}"></script>
 
   <!-- Datatable scripts -->
   {{ datatables|json_script:"datatable-conf" }}