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([data]);
  }

  function getRating(data) {
    const rating = _.max([data]);
    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)
        if(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]

                    $(`a[id="${item}"]`).each(function() {
                      $(this).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",
            render: function ( data, type, row, meta ) {
              if(vm.pubmed) {
                let dat = vm.pubmed[row.uniprot_id];
                if(dat) {
                  return dat.join(", ");
                } else {
                  return '';
                }
              } else {
                return '';
              }
            },
            fnCreatedCell: (nTd, sData, oData) => {
              // console.log(sData)
              if(vm.pubmed) {
                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('')
                }
              } else {
                $(nTd).html('')
              }
            }
          },
          {
            title: 'DB',
            data: 'uniprot_id',
            className: "text-nowrap",
            render: function ( data, type, row, meta ) {
              // console.log(_.flatMap(row.condensates, c => c.data_sources))
              let dat = vm.dbTags[row.uniprot_id];
              if(dat) {
                return dat.join(", ");
              }
              return '';
            }
          },
          {
            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[row.uniprot_id];
              if(dat) {
                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",
              render: function ( data, type, row, meta ) {
                if(vm.pubmed) {
                  let dat = vm.pubmed[row.uniprot_id];
                  if(dat) {
                    return dat.join(", ");
                  } else {
                    return '';
                  }
                } else {
                  return '';
                }
              },
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                if(vm.pubmed) {
                  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('')
                  }
                } else {
                  $(nTd).html('')
                }
              }
            },
            {
              title: 'DB',
              data: 'uniprot_id',
              className: "text-nowrap",
              render: function ( data, type, row, meta ) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.dbTags[row.uniprot_id];
                if(dat) {
                  return dat.join(", ");
                }
                return '';
              }
            },
            {
              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[row.uniprot_id];
                if(dat) {
                  // console.log(getRatingValue(vm.map[row.uniprot_id]))
                  return getRatingValue(dat);
                }
                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 flex justify-end"<"#addProtein.mr-2">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);

        $("#addProtein").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' +
          '    Add a protein to this condensate\n' +
          '  </button>\n' +
          '</div></div>');

        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>