#11: ProteinDataTable with pagination

web/src/components/Datatable/ProteinDataTable.vue

+<template>
+  <div>
+    <a ref="download" />
+    <table
+        :id="id"
+        class="table table-striped table-bordered table-hover"
+        width="100%"
+    />
+  </div>
+</template>
+
+<script>
+
+const _ = require('lodash');
+let host = require('../js/const').host;
+const apikey = require('../js/const').apikey;
+const $ = window.jQuery = require('jquery');
+require('../js/datatable');
+
+let table;
+
+export default {
+  name: 'DataTable',
+  props: ['id', 'keyword'],
+  data() {
+    return {
+      rows: [],
+      header: [],
+      total: 0,
+      isDev: process.env.NODE_ENV === 'development',
+    };
+  },
+  mounted() {
+    const vm = this;
+    vm.createTable(vm.id);
+    // console.log('in data table condensate data', vm.data);
+  },
+
+  methods: {
+    moveDetailPage(id) {
+      const vm = this;
+
+      const url = `/protein/${id}`;
+      // eslint-disable-next-line
+      vm.$router.push(url)
+    },
+    createTable(id) {
+      const vm = this;
+
+      const columns = [
+        {
+          title: 'Uniprot',
+          data: 'uniprot_id',
+          fnCreatedCell: (nTd, sData, oData) => {
+            let n = `${oData.uniprot_id} (${oData.uniprot_readable_id})`;
+            if(vm.keyword) {
+              n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
+            }
+            $(nTd).html(`<a href="" class="detail-link"> ${n}</a>`);
+          },
+        },
+        {
+          title: 'Gene Name',
+          data: 'gene_name',
+          fnCreatedCell: (nTd, sData, oData) => {
+            let n = `${oData.gene_name ? oData.gene_name : 'N/A'}`;
+            if(vm.keyword) {
+              n = n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
+            }
+            $(nTd).html(`${n}`);
+          },
+        },
+        {
+          title: 'Name',
+          data: 'name',
+          fnCreatedCell: (nTd, sData, oData) => {
+            let n = oData.name !== null ? `${oData.name}`: '';
+            if(vm.keyword) {
+              n = n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
+            }
+            $(nTd).html(`${n}`);
+          },
+        },
+        {
+          title: 'Functional Type',
+          data: 'functional_type',
+          searchable: true,
+          render: function ( data, type, row, meta ) {
+            return data;
+          }
+        },
+        {
+          title: 'Species',
+          data: 'species_name',
+          render: function ( data, type, row, meta ) {
+            return data + ' (' + row.species_tax_id + ')';
+          }
+        },
+      ];
+
+      const doms = '<"row"<"col-sm-4"f><"#function_filter.col-sm-4"><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>';
+
+      const nTableOptions = {
+        columns,
+        stateSave: true,
+        paging: true,
+        searching: true,
+        info: true,
+        bProcessing: true,
+        bServerSide: true,
+        fnServerData: function (sSource, aoData, fnCallback, oSettings) {
+          oSettings.jqXHR = vm.fetchCallback(vm.rows, aoData, fnCallback)
+        },
+        order: [], // order: [[0, 'asc']],
+        bDestroy: true, // Add this property to new setting,
+        oLanguage: {
+          sSearch: 'Filter',
+        },
+        dom: doms,
+        initComplete: function () {
+          this.api().columns([3]).every( function () {
+            // console.log(this);
+            let column = this;
+            let select = $('<select class="form-control input-sm"><option value=""></option>' +
+                '<option value="client">client</option>' +
+                '<option value="driver">driver</option>' +
+                '<option value="null">unknown</option>' +
+                '<option value="regulator">regulator</option>' +
+                '</select>')
+                .appendTo( $('#function_filter').empty() )
+                .on( 'change', function () {
+                  var val = $.fn.dataTable.util.escapeRegex(
+                      $(this).val()
+                  );
+
+                  // console.log(val)
+
+                  // column
+                  //     .search( val ? val === 'null' ? '^\\s*$' : '^'+val+'$' : '', true, false )
+                  //     .draw();
+                  column
+                      .search( val, false )
+                      .draw();
+                } );
+
+            $( '<label>Functional Type</label>' ).prependTo( '#function_filter' );
+          } );
+        },
+      };
+
+      const tableId = `#${id}`;
+      if (table) {
+        table.destroy();
+        $(tableId).empty();
+      }
+
+      table = $(tableId).DataTable(nTableOptions);
+
+      $("#download").html('<div style="text-align: right;"><div class="dropdown">\n' +
+        '  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
+        '    Download\n' +
+        '  </button>\n' +
+        '  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
+        '    <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
+        '    <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
+        '    <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
+        '  </div>\n' +
+        '</div></div>');
+
+      const tableBody = `${tableId} tbody`;
+
+      $(tableBody).on('click', 'tr td a.detail-link', (e) => {
+        e.preventDefault()
+        const tr = $(e.target).parent().parent();
+        const row = table.row(tr);
+        vm.moveDetailPage(row.data().uniprot_id);
+      });
+
+      $('#download').on('click', 'a.dropdown-item', (e) => {
+        e.preventDefault()
+        switch ($(e.target).text()) {
+          case 'CSV':
+            vm.downloadCsv(); break;
+          case 'TSV':
+            vm.downloadTsv(); break;
+          case 'JSON':
+            vm.downloadJson(); break;
+        }
+      });
+    },
+    async fetchCallback (data, aoData, fnCallback) {
+      let vm = this
+
+      // console.log(aoData)
+      let orderItem = aoData.find(x => x.name === 'order')
+      let startItem = aoData.find(x => x.name === 'start')
+      let lengthItem = aoData.find(x => x.name === 'length')
+      let searchItem = aoData.find(x => x.name === 'search')
+      let functionalType = aoData.find(x => x.name === 'columns').value[3]
+      console.log(functionalType.search.value)
+
+
+      // console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`)
+      // console.log(`orderItem = ${orderItem.value}, searchItem = ${searchItem.value.value}`)
+
+      const page = startItem.value / lengthItem.value + 1
+
+      let search = searchItem.value.value
+
+      const columns = ['uniprot_id', 'gene_name', 'name', 'functional_type', 'species_name'];
+
+      let order = []
+      if (orderItem.value.length > 0) {
+        orderItem.value.forEach(function (data) {
+          // console.log(data)
+          if(data.dir === 'desc') {
+            order.push(`-${columns[data.column]}`)
+          } else {
+            order.push(`${columns[data.column]}`)
+          }
+        })
+        // console.log(order)
+      }
+
+      if(vm.isDev) {
+        host = require('../js/const').devHost;
+      }
+
+      let url = `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=10&page=${page}&sort=${order.join(',')}` + (search ? `&query=${search}` : '');
+
+      try {
+        const res = await this.axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${apikey}`
+          }
+        });
+
+        if(res.data) {
+          // vm.meta = res.meta;
+          // vm.data = res.data;
+          let dat = {
+            draw: aoData.draw,
+            recordsTotal:  searchItem.value.value ? vm.total : vm.total = res.data.count,
+            recordsFiltered: res.data.count,
+            data: res.data.data
+          }
+
+          fnCallback(dat)
+        }
+      } catch(error) {
+        // console.error(error)
+        this.error = true
+        this.errorMsg = 'You are not authorized to access this item.'
+      }
+    },
+    downloadCsv() {
+      const vm = this;
+      let exports = [];
+
+      let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
+      exports.push(header.join(', '));
+
+      _.forEach(vm.data, item => {
+        let goTerms = [];
+        _.each(item.gos, (i) => {
+          goTerms.push(`${i[1]}(${i[0]})`)
+        })
+
+        let tophits = [];
+        _.each(item.em_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+        _.each(item.ee_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+        _.each(item.gm_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+
+        exports.push([item.locusName, `"${goTerms.join('\t')}"`, `"${item.description}"`, tophits.join('\t')].join(','));
+      })
+
+      let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
+
+      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
+      let filename = contentDisposition.split('filename=')[1]
+      filename = filename.replace(/"/g, '')
+
+      let link = vm.$refs.download
+      link.href = window.URL.createObjectURL(blob)
+      link.download = filename
+      link.click()
+    },
+    downloadTsv() {
+      const vm = this;
+      let exports = [];
+
+      let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
+      exports.push(header.join('\t'));
+
+      _.forEach(vm.data, item => {
+        let goTerms = [];
+        _.each(item.gos, (i) => {
+          goTerms.push(`${i[1]}(${i[0]})`)
+        })
+
+        let tophits = [];
+        _.each(item.em_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+        _.each(item.ee_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+        _.each(item.gm_tophits, (i) => {
+          tophits.push(`${i}`)
+        })
+
+        exports.push([item.locusName, goTerms.join(', '), item.description, tophits.join(', ')].join('\t'));
+      })
+
+      let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})
+
+      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.tsv"'
+      let filename = contentDisposition.split('filename=')[1]
+      filename = filename.replace(/"/g, '')
+
+      let link = vm.$refs.download
+      link.href = window.URL.createObjectURL(blob)
+      link.download = filename
+      link.click()
+    },
+    downloadJson() {
+      const vm = this;
+      let blob = new Blob([JSON.stringify(vm.data, null, 2)], {type: 'application/json'})
+
+      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.json"'
+      let filename = contentDisposition.split('filename=')[1]
+      filename = filename.replace(/"/g, '')
+
+      let link = vm.$refs.download
+      link.href = window.URL.createObjectURL(blob)
+      link.download = filename
+      link.click()
+    },
+  },
+};
+</script>
+
+<style>
+
+.no-padding {
+  padding: 0;
+}
+
+.checked {
+  color: orange;
+}
+
+.gene {
+  font-size: large;
+}
+
+table.pheno {
+  width: 330px;
+}
+
+td.pheno-title {
+  text-align: center;
+}
+td.pheno {
+  width: 33%;
+  border-top: none;
+  border-bottom: none;
+  text-align: center;
+  vertical-align: middle;
+  font-size: small;
+  word-wrap: break-spaces;
+}
+
+td.pheno-item {
+  width: 33%;
+  text-align: center;
+  border-width: 0 1px;
+  word-wrap: break-word;
+}
+
+.table thead td.pheno {
+  border-width: 0 1px;
+}
+
+table.dataTable.row-border > tbody > tr:first-child > th,
+table.dataTable.row-border > tbody > tr:first-child > td,
+table.dataTable.display > tbody > tr:first-child > th,
+table.dataTable.display > tbody > tr:first-child > td {
+  border-top: none;
+}
+
+table.dataTable.row-border > tbody > tr > th,
+table.dataTable.row-border > tbody > tr > td,
+table.dataTable.display > tbody > tr > th,
+table.dataTable.display > tbody > tr > td {
+  border-top: 1px solid #ddd;
+}
+
+table.dataTable > tbody > tr {
+  background-color: #ffffff;
+}
+
+table.dataTable.row-border > tbody > tr:hover,
+table.dataTable.display > tbody > tr:hover {
+  background-color: #f6f6f6;
+}
+
+.detail-link {
+  color: #0065b9;
+  font-weight: bold;
+}
+
+.dropdown-item {
+  font-size: 1.2rem;
+}
+
+select.form-control {
+  font-size: 12px;
+  padding: 3px 12px;
+}
+
+.pagination {
+  font-size: 1.2rem;
+}
+
+a mark {
+  color: #0065b9;
+  padding: 0;
+  text-decoration: underline;
+  font-style: oblique;
+}
+
+div#function_filter label {
+  font-weight: normal;
+  text-align: left;
+  margin-right: 10px;
+}
+</style>

web/src/components/Proteins.vue

@@ -7,40 +7,21 @@
         <h2>Proteins</h2>
       </div>
 
-
-      <fetch-all-proteins>
-        <template slot-scope="{response, loading}">
-          <div v-if="loading">
-            <base-spinner />
-          </div>
-          <div v-else-if="response">
-            <div v-show="response.count === 0">
-              No results!
-            </div>
-            <data-table
-              v-show="response.count > 0"
-              id="proteinTable"
-              category="protein"
-              :data="response.data"
-            />
-          </div>
-        </template>
-      </fetch-all-proteins>
+        <data-table
+          id="proteinTable"
+        />
     </div>
   </div>
 </template>
 
 <script>
-import FetchAllProteins from '@/components/DDCODE/fetchAllProteins';
-import DataTable from '@/components/DataTable.vue'
-import BaseSpinner from './UI/BaseSpinner.vue';
+import DataTable from '@/components/Datatable/ProteinDataTable.vue'
 const _ = require('lodash')
 
 export default {
   name: 'Proteins',
   components: {
-    FetchAllProteins, DataTable,
-    BaseSpinner
+    DataTable
   },
   props: {
     msg: String