<polymer-element name="jso-fatigo-table" attributes="content">
    <template>
        <link rel="stylesheet" href="../sortable-table.css">
        <style>
            /*  sortable-table {
              max-width: 1000px;
              margin-top: 10px;
              }*/
            sortable-table {
                border: 1px solid #d3d3d3;
            }

            sortable-table::shadow thead tr th {
                /*width: 1000px;*/
                white-space: inherit;
                overflow: auto;
                text-overflow: inherit;

            }

            sortable-table::shadow tbody tr td {
                /*width: 1000px;*/
                white-space: inherit;
                overflow: auto;
                text-overflow: inherit;

            }

            @-moz-document url-prefix() {
                sortable-table::shadow tbody tr td {
                    text-overflow: ellipsis !important;
                }
            }

            /*sortable-table::shadow .column-term_size,*/
            /*sortable-table::shadow .column-term_size_genome,*/
            /*sortable-table::shadow .column-term_size_genome,*/
            /*sortable-table::shadow .column-term_annotations_list_perc,*/
            /*sortable-table::shadow .column-odds_ratio,*/
            /*sortable-table::shadow .column-pvalue,*/
            /*sortable-table::shadow .column-adj_pvalue {*/
            /*width: 80px;*/
            /*white-space: nowrap;*/
            /*}*/

        </style>
        <sortable-table id="fatigo_table"
                        data="{{data}}"
                        columns="{{columns}}"
                        footerTemplate="{{footerTemplate}}"
                        pageSize="{{pageSize}}">
            <template id="linkTemplate">
                <td>
                    <a href="{{row['link']}}" target="_blank">{{row[column.name]}}</a>
                </td>
            </template>
            <template id="listTemplate">
                <td style="padding:0px;">
                    <div horizontal layout style="max-height: 100px; overflow-y: auto; overflow-x: hidden">
                        <div flex style="text-align: center;">
                            <span style="color:#666">List 1:</span>

                            <div class="idlist" title="{{row[column.name]}}">
                                <template repeat="{{ item in row[column.name].list1}}">
                                    <div>{{item}}</div>
                                </template>
                            </div>
                        </div>
                        <div flex style="text-align: center;">
                            <span style="color:#666">List 2:</span>

                            <div class="idlist" title="{{row[column.name]}}">
                                <template repeat="{{ item in row[column.name].list2}}">
                                    <div>{{item}}</div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <!--<span title="{{row[column.name]}}">List 1: {{row[column.name].list1}}</span>-->
                    <!--<br>-->
                    <!--<span title="{{row[column.name]}}">List 2: {{row[column.name].list2}}</span>-->
                </td>
            </template>
            <template id="listTemplatePerc">
                <td>
                    <span title="{{row[column.name]}}">List 1: {{row[column.name].list1}}%</span>
                    <br>
                    <span title="{{row[column.name]}}">List 2: {{row[column.name].list2}}%</span>
                </td>
            </template>


        </sortable-table>

    </template>
    <script>
        Polymer({
            created: function () {
                this.columns = [];
                this.data = [];
            },

            contentChanged: function () {

                var data = this.content.split("\n");
                for (var i = 1; i < data.length; i++) {
                    if (data[i] == "") continue;
                    var localData = data[i].split("\t");
                    var listObj = {list1: localData[9].split(","), list2: localData[10].split(",")};
                    var listObjPerc = {list1: localData[5].split(","), list2: localData[8].split(",")};
                    var link = Utils.getLink(localData[0]);
                    var obj = {
                        "term": localData[0],
                        "term_size": localData[1],
                        "term_size_genome": localData[2],
                        "term_annotations_list_perc": listObjPerc,//"list 1: "+localData[5]+"%"+",list 2: "+localData[8]+"%",
                        "annotated_ids_list": listObj,
                        "odds_ratio": Utils.formatNumber(localData[11]),
                        "pvalue": Utils.formatNumber(localData[12]),
                        "adj_pvalue": Utils.formatNumber(localData[13]),
                        link: link
                    };
                    this.data.push(obj)
                }

                //this.columns = ["#index", "Classifier", "Parameters", "Accuracy", "MCC", "RMSE", "AUC", "Selected genes"];
                this.columns = [
                    {
                        name: "term",
                        title: "Term",
                        cellTemplate: "linkTemplate"

                    },
                    {
                        name: "term_size",
                        title: "Term size"
                    },
                    {
                        name: "term_size_genome",
                        title: "Term size(in genome) "
                    },
                    {
                        name: "term_annotations_list_perc",
                        title: "Annotations lists",
                        cellTemplate: "listTemplatePerc"
                    },
                    {
                        name: "annotated_ids_list",
                        title: "Annotated ids list",
                        cellTemplate: "listTemplate"
                    },
                    {
                        name: "odds_ratio",
                        title: "Odds ratio (log e)"
                    },
                    {
                        name: "pvalue",
                        title: "Pvalue"
                    },
                    {
                        name: "adj_pvalue",
                        title: "Adj. Pvalue"
                    }

                ];
                this.pageSize = "10";
                this.footerTemplate = "simplePager";

            }
        })
    </script>
</polymer-element>

