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

            sortable-table::shadow .column-selected_genes {
                width: 400px;

            }

            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;

            }
        </style>
        <sortable-table id="pred_table"
                        data="{{data}}"
                        columns="{{columns}}"
                        footerTemplate="{{footerTemplate}}"
                        pageSize="{{pageSize}}">
            <template id="inputTemplate">
                <td>
                    <span title="{{row[column.name]}}">{{row[column.name]}}</span>
                </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;">
                            <div class="idlist" title="{{row[column.name]}}">
                                <template repeat="{{ item in row[column.name]}}">
                                    <div>{{item}}</div>
                                </template>
                            </div>
                        </div>
                    </div>
                </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 obj = {
                        "#index": localData[0],
                        "Classifier": localData[1],
                        "Parameters": localData[2],
                        "Accuracy": localData[3],
                        "MCC": localData[4],
                        "RMSE": localData[5],
                        "AUC": localData[6],
                        "selected_genes": localData[8].split(",")
                    }
                    this.data.push(obj)
                }

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

                    },
                    {
                        name: "Classifier"
                    },
                    {
                        name: "Parameters"
                    },
                    {
                        name: "Accuracy",
                        formula: function (value) {
                            return Utils.formatNumber(value);
                        }
                    },
                    {
                        name: "MCC",
                        formula: function (value) {
                            return Utils.formatNumber(value);
                        }
                    },
                    {
                        name: "RMSE",
                        formula: function (value) {
                            return Utils.formatNumber(value);
                        }
                    },
                    {
                        name: "AUC",
                        formula: function (value) {
                            return Utils.formatNumber(value);
                        }
                    },
                    {
                        name: "selected_genes",
                        title: "Selected genes",
                        cellTemplate: "listTemplate"
                    }
                ];
                this.pageSize = "10";
                this.footerTemplate = "simplePager";

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

