LlpsTable.vue

<template>
    <div>
        <div class="inline-block no-underline font-bold mb-4">
        </div>
        <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
    </div>
</template>

<script>
  const _ = require('lodash');
  const $ = window.jQuery = require('jquery');
  require('./js/clipboard')
  require('@/components/js/datatable');

  let table;

  const scoreMap = { 'http://llps.biocuckoo.cn/': 1,
    'http://db.phasep.pro/browse/highthroughput/': 2,
    'http://db.phasep.pro/browse/reviewed/': 4,
    'http://db.phasep.pro/browse/uniprotreviewed/': 4,
    'http://bio-comp.org.cn/llpsdb/': 4,
    'https://phasepro.elte.hu/': 4,
    'https://pubmed.ncbi.nlm.nih.gov/': 4,
    'https://ddcode.org/': 5,
  }

  function getStartWith(url) {
    let ret = ''
    _.forEach(_.keys(scoreMap), i => {
      if(url.startsWith(i)) {
        ret = i;
      }
    })

    return ret
  }

  function getRatingValue(data) {
    return _.max(_.map(data, i => scoreMap[getStartWith(i)]));
  }

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

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

  export default {
    name: 'llps-table',
    props: ['id', 'data', 'map', 'pubmed', 'db-tags', 'is-experimental'],
    data() {
      return {
      };
    },
    methods: {
      fetchProtein(uniprot_id) {
        // eslint-disable-next-line
        const url = `/protein/${uniprot_id}`
        // // eslint-disable-next-line
        // console.log(url)
        window.open(url)
      },
      forwardUniprot(uniprot_id) {
        // eslint-disable-next-line
        const url = `https://www.uniprot.org/uniprot/${uniprot_id}`
        // // eslint-disable-next-line
        // console.log(url)
        window.open(url)
      },
      createLink(link) {
        return `<a href="${link}" class="external-link tooltipped tooltipped-n tooltipped-multiline"
                    aria-label="Clicking this link opens Evidence page." target="_blank"> ${link}
                    </a>`
      },
      createPubMedLink(item) {
        return `<a id="${item}" href="https://pubmed.ncbi.nlm.nih.gov/${item}" class="pubmed-link tooltipped tooltipped-n tooltipped-multiline"
                    target="_blank">
                    ${item}
                <i class="glyphicon glyphicon-link"></i>
                </a>`;
      },
      fetchPubMedId(item) {
        // console.log(item)
        const url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id='
        const request = url + item;
        let $row = $('#' + item)

        if(!$row.attr('aria-label')) {
          fetch(request)
              .then(response => response.json())
              .then((response) => {
                setTimeout(() => {
                  const res = response.result[item]

                  $row.attr('aria-label', `${res.title}\n\n${_.map(res.authors, a => a.name).join(', ')}`)
                }, 0);
              });
        }
      },
      createTable(id, data) {
        const vm = this;

        _.forEach(data, (d) => {
          d.DT_RowID = `${d.n}`;
        });

        const columns = vm.isExperimental ? [
          {
            title: 'Gene Name',
            data: 'gene_name',
            fnCreatedCell: (nTd, sData, oData) => {
              if (sData) {
                $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
              } else {
                $(nTd).html(`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`);
              }
            },
          },
          {
            title: 'Name',
            data: 'name',
            fnCreatedCell: (nTd, sData, oData) => {
              if (sData) {
                $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
              } else {
                $(nTd).html(`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`);
              }
            },
          },
          // {
          //   title: 'Species',
          //   data: 'species_name',
          //   className: "text-nowrap"
          // },
          {
            title: 'Evidences',
            data: 'species_name',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              let data = vm.map[oData.uniprot_id];
              if(data) {
                // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
              } else {
                $(nTd).html('')
              }
            }
          },
          {
            title: 'Pubmed',
            data: 'uniprot_id',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              let data = vm.pubmed[oData.uniprot_id];
              if(data) {
                // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                $(nTd).html(data.map(i => vm.createPubMedLink(i)).join(' '));
              } else {
                $(nTd).html('')
              }
            }
          },
          {
            title: 'DB',
            data: 'uniprot_id',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              let data = vm.dbTags[oData.uniprot_id];
              if(data) {
                // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                $(nTd).html(data.join(", "));
              } else {
                $(nTd).html('')
              }
            }
          },
          {
            title: 'UniProt',
            data: 'uniprot_id',
            className: "text-nowrap",
            fnCreatedCell: (nTd, sData, oData) => {
              $(nTd).html(`<a href="" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
                    aria-label="Clicking this link opens UniProt page."> ${sData} <i class="glyphicon glyphicon-link"></i></a>`);
            },
          },
          // {
          //   title: 'Evidence',
          //   data: 'uniprot_id',
          //   className: "text-nowrap",
          //   fnCreatedCell: (nTd, sData, oData) => {
          //     $(nTd).html(`${vm.map[oData.uniprot_id]}`);
          //   },
          // },
          // {
          //   title: 'Sequence',
          //   data: 'sequence',
          //   className: "text-nowrap",
          //   fnCreatedCell: (nTd, sData, oData) => {
          //     $(nTd).html(`<input type="text" value="${sData}">
          //           <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
          //   },
          // }
          {
            title: 'Evidence Stars',
            className: "text-nowrap",
            data: 'uniprot_id',
            render: function ( data, type, row, meta ) {
              // console.log(_.flatMap(row.condensates, c => c.data_sources))
              if(row.condensates) {
                return getRatingValue(vm.map[row.uniprot_id]);
              }
              return '';
            },
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              let data = vm.map[oData.uniprot_id];
              if(data) {
                $(nTd).html(getRating(data).join('\n'));
              }
            }
          }
        ] :
          [
            {
              title: 'Gene Name',
              data: 'gene_name',
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`);
                }
              },
            },
            {
              title: 'Name',
              data: 'name',
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`);
                }
              },
            },
            {
              title: 'Evidences',
              data: 'uniprot_id',
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                let data = vm.map[oData.uniprot_id];

                if(data) {
                  // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                  $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                } else {
                  $(nTd).html('')
                }
              }
            },
            {
              title: 'Pubmed',
              data: 'uniprot_id',
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                let data = vm.pubmed[oData.uniprot_id];
                if(data) {
                  // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                  // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                  $(nTd).html(data.map(i => vm.createPubMedLink(i)).join(' '));
                } else {
                  $(nTd).html('')
                }
              }
            },
            {
              title: 'DB',
              data: 'uniprot_id',
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                let data = vm.dbTags[oData.uniprot_id];
                if(data) {
                  // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                  // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                  $(nTd).html(data.join(", "));
                } else {
                  $(nTd).html('')
                }
              }
            },
            {
              title: 'UniProt',
              data: 'uniprot_id',
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                $(nTd).html(`<a href="" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
                    aria-label="Clicking this link opens UniProt page."> ${sData} <i class="glyphicon glyphicon-link"></i></a>`);
              },
            },
            // {
            //   title: 'Evidence',
            //   data: 'uniprot_id',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`${vm.map[oData.uniprot_id]}`);
            //   },
            // },
            // {
            //   title: 'Sequence',
            //   data: 'sequence',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`<input type="text" value="${sData}">
            //           <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
            //   },
            // }
            {
              title: 'Evidence Stars',
              className: "text-nowrap",
              data: 'uniprot_id',
              render: function ( data, type, row, meta ) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.map[data];
                if(dat) {
                  // console.log(getRatingValue(vm.map[row.uniprot_id]))
                  return getRatingValue(vm.map[row.uniprot_id]);
                }
                return '';
              },
              fnCreatedCell: (nTd, sData, oData) => {
                let data = vm.map[oData.uniprot_id];
                if(data) {
                  $(nTd).html(getRating(data).join('\n'));
                }
              }
            }
          ];

        const nTableOptions = {
          columns,
          // aaSorting: [[ 0, 'asc' ]],
          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
          paging: true,
          searching: true,
          info: false,
          data,
          order: [], // order: [[0, 'asc']],
          bDestroy: true, // Add this property to new setting,
          oLanguage: {
            sSearch: "Filter",
          },
          dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
        };

        const tableId = `#${id}`;
        if (table) {
          table.destroy();
          $(tableId).empty();
        }

        table = $(tableId).DataTable(nTableOptions);

        const tableBody = `${tableId} tbody`;

        $(tableBody).on('click', 'tr td a.protein-link', (e) => {
          e.preventDefault()
          const tr = $(e.target).parent().parent();
          const row = table.row(tr);
          vm.fetchProtein(row.data().uniprot_id);
        });

        $(tableBody).on('click', 'tr td a.uniprot-link', (e) => {
          e.preventDefault()
          const tr = $(e.target).parent().parent();
          const row = table.row(tr);
          vm.forwardUniprot(row.data().uniprot_id);
        });

        $(tableBody).on('mouseover', 'tr td a.pubmed-link', (e) => {
          e.preventDefault()
          // console.log(e.target.id)
          vm.fetchPubMedId(e.target.id)
        });
      },
      exportTsv() {
        // const vm = this;
      },
    },
    mounted() {
      const vm = this;
      vm.createTable(vm.id, vm.data);
    },
  };
</script>

<style>
    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;
    }

    select.form-control {
        font-size: 12px;
        padding: 3px 12px;
    }

    ul.pagination {
        font-size: 1rem;
    }

    .form-inline .form-control {
        height: 25px;
        line-height: 25px;
        vertical-align: middle;
    }

    .protein-link {
        font-weight: bold;
        color: #0065b9;
    }

    .uniprot-link {
        font-weight: bold;
        color: #0065b9;
    }

    .pubmed-link {
      font-weight: bold;
      color: #0065b9;
    }

    .external-link {
        font-weight: bold;
        color: #0065b9;
    }

    .pagination {
        font-size: 1.2rem;
    }
</style>