DataTable.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');
  const $ = window.jQuery = require('jquery');
  require('./js/datatable');

  let table;

  function getRating(data) {
    const rating = data;
    const r = ['<div style="white-space: nowrap;">']
    for (let i = 0; i < 5; i++) {
      if (i < rating) {
        if (rating - i === 0.5) {
          r.push('<span class="fa fa-star-half-o checked"/>');
        } else {
          r.push('<span class="fa fa-star checked"/>');
        }
      } else {
        r.push('<span class="fa fa-star"/>');
      }
    }

    r.push('</div>')
    return r;
  }

  //import StarRating from "vue-star-rating"

  export default {
    name: 'DataTable',
    props: ['id', 'data', 'keyword', 'category'],
   
    mounted() {
      const vm = this;
      vm.createTable(vm.id, vm.data);
      // console.log('in data table condensate data', vm.data);
    },
    // watch: {
    //   selectedItem: function update(newValue) {
    //     const vm = this;
    //
    //     switch (newValue) {
    //       case 'Genes':
    //       default:
    //         vm.createTable(vm.id, vm.data);
    //     }
    //   },
    // },
    
    methods: {
      moveDetailPage(id) {
        const vm = this;

        const url = vm.category === 'protein' ? `/protein/${id}` : `/condensate/${id}`
        // eslint-disable-next-line
        // console.log(url)
        vm.$router.push(url)
        // window.location = url
        // window.open(url)
      },
      createTable(id, data) {
        const vm = this;

        _.forEach(data, (d) => {
          d.DT_RowID = vm.category === 'protein' ? `${d.proteinId}` : `${d.canonical_id}`;
        });

        const proteinColumns = [
          {
            title: 'Uniprot',
            data: 'uniprot_id',
            // visible: false,
            // fnCreatedCell: (nTd, sData, oData) => {
            //   $(nTd).html(`<a href="" class="detail-link gene"><i class="glyphicon glyphicon-list-alt"></i> </a>`);
            // },
            // render: function ( data, type, row, meta ) {
            //   return data + ' (' + row.uniprot_readable_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',
            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 + ')';
            }
          },
          // {
          //   title: 'Evidence Stars',
          //   className: "text-nowrap",
          //   data: 'condensates',
          //   render: function ( data, type, row, meta ) {
          //     if(row.condensates) {
          //       return getRatingValue(_.flatMap(row.condensates, c => c.data_sources));
          //     }
          //     return '';
          //   },
          //   fnCreatedCell: (nTd, sData, oData) => {
          //     let data = _.flatMap(sData, c => c.data_sources);
          //     if(data) {
          //       $(nTd).html(getRating(data).join('\n'));
          //     }
          //   }
          // },
        ];

        const condensateColumns = [
          {
            title: 'Name',
            data: 'name',
            fnCreatedCell: (nTd, sData, oData) => {
              if(vm.keyword) {
                let n = `${oData.name}`.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
                $(nTd).html(`<a href="" class="detail-link"> ${n}</a>`);
              } else {
                $(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`);
              }
            },
          },
          {
            title: 'Proteins',
            data: 'proteins',
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              if(sData) {
                $(nTd).html(sData.length > 4 ? sData.splice(0, 4).join(', ') + ' ...' : sData.join(', '));
              }
            }
          },
          {
            title: 'No. Proteins',
            render: function ( data, type, row, meta ) {
              return row.protein_count;
            }
          },
           {
            title: 'Species',
            data: 'species_name',
            render: function ( data, type, row, meta ) {
              return data + ' (' + row.species_tax_id + ')';
            }
          },
          {
            title: 'Evidence Stars',
            data: 'confidence_score',
            defaultContent:`0`,
            render: function ( data, type, row, meta ) {
              return data;
            },
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              if(sData) {
                $(nTd).html(getRating(sData).join('\n'));
              } else {
                $(nTd).html(getRating(0).join('\n'));
              }
            }
          },
          // {
          //   title: 'Localization',
          //   render: function ( data, type, row, meta ) {
          //     return '(placeholder)';
          //   }
          // },
          // {
          //   title: 'Species',
          //   data: 'species_name',
          //   render: function ( data, type, row, meta ) {
          //     return data + ' (' + row.species_tax_id + ')';
          //   }
          // },
        ];

        const columns = vm.category === 'protein' ? proteinColumns : condensateColumns;

        // console.log(columns)

        const doms = vm.category === 'protein' ? '<"row"<"col-sm-3"f><"#function_filter.col-sm-3"><"col-sm-6"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>' : '<"row"<"col-sm-3"f><"col-sm-9"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>';

        const nTableOptions = {
          columns,
          // aaSorting: [[ 0, 'asc' ]],
          stateSave: true,
          paging: true,
          searching: true,
          info: true,
          data,
          order: [], // order: [[0, 'asc']],
          bDestroy: true, // Add this property to new setting,
          oLanguage: {
            sSearch: 'Filter',
          },
          dom: doms,
          initComplete: function () {
            if(vm.category === 'protein') {
              this.api().columns([3]).every( function () {
                // console.log(this);
                let column = this;
                let select = $('<select class="form-control input-sm"><option value=""></option></select>')
                    .appendTo( $('#function_filter').empty() )
                    .on( 'change', function () {
                      var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                      );

                      column
                          .search( val ? val === 'null' ? '^\\s*$' : '^'+val+'$' : '', true, false )
                          .draw();
                    } );

                $( '<label>Functional Type</label>' ).prependTo( '#function_filter' );

                column.data().unique().sort().each( function ( d, j ) {
                  if( d === null) {
                    select.append( '<option value="'+d+'">unknown</option>' )
                  } else {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                  }
                } );
              } );
            }
          },
        };

        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);
          // console.log(row.data().proteinName)
          if (vm.category === 'protein') {
            vm.moveDetailPage(row.data().uniprot_id);
          } else {
            vm.moveDetailPage(row.data().canonical_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;
        //   }
        // });
      },
      // 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>