table.js

const models = [
    {
        name: 'GPT-3.5-turbo-1103',
        MGI: 0.2326,
        temp0_HumanEval: 0.7439,
        temp0_HumanEval_ET: 0.5915,
        temp0_8_HumanEval: 0.7248,
        temp0_8_HumanEval_ET: 0.5778,
        link: 'https://platform.openai.com/docs/models/gpt-3-5-turbo',
    },
    {
        name: 'GPT-3.5-turbo-0613',
        MGI: 0.1314,
        temp0_HumanEval: 0.6585,
        temp0_HumanEval_ET: 0.5122,
        temp0_8_HumanEval: 0.612,
        temp0_8_HumanEval_ET: 0.4776,
        link: 'https://platform.openai.com/docs/models/gpt-3-5-turbo',
    },
    {
        name: 'CodeGeeX4-All-9B',
        MGI: 0.5182,
        temp0_HumanEval: 0.7805,
        temp0_HumanEval_ET: 0.622,
        temp0_8_HumanEval: 0.7606,
        temp0_8_HumanEval_ET: 0.6078,
        link: 'https://huggingface.co/THUDM/codegeex4-all-9b',
    },
    {
        name: 'Deepseek-Coder-6.7b',
        MGI: 0.0602,
        temp0_HumanEval: 0.4817,
        temp0_HumanEval_ET: 0.3963,
        temp0_8_HumanEval: 0.3388,
        temp0_8_HumanEval_ET: 0.2798,
        link: 'https://huggingface.co/deepseek-ai/deepseek-coder-6.7b-base',
    },
    {
        name: 'Deepseek-Coder-6.7b-instruct',
        MGI: 0.0893,
        temp0_HumanEval: 0.7134,
        temp0_HumanEval_ET: 0.628,
        temp0_8_HumanEval: 0.6494,
        temp0_8_HumanEval_ET: 0.5673,
        link: 'https://huggingface.co/deepseek-ai/deepseek-coder-6.7b-instruct'
    },
    {
        name: 'CodeLlama-7b',
        MGI: 0.0417,
        temp0_HumanEval: 0.311,
        temp0_HumanEval_ET: 0.2378,
        temp0_8_HumanEval: 0.2211,
        temp0_8_HumanEval_ET: 0.1832,
        link: 'https://huggingface.co/codellama/CodeLlama-7b-hf'
    },
    {
        name: 'CodeLlama-7b-python',
        MGI: 0.0525,
        temp0_HumanEval: 0.3841,
        temp0_HumanEval_ET: 0.3354,
        temp0_8_HumanEval: 0.3062,
        temp0_8_HumanEval_ET: 0.2568,
        link: 'https://huggingface.co/codellama/CodeLlama-7b-Python-hf'
    },
    {
        name: 'CodeLlama-7b-instruct',
        MGI: 0.0908,
        temp0_HumanEval: 0.3537,
        temp0_HumanEval_ET: 0.2988,
        temp0_8_HumanEval: 0.2876,
        temp0_8_HumanEval_ET: 0.2455,
        link: 'https://huggingface.co/codellama/CodeLlama-7b-Instruct-hf'
    },
    {
        name: 'CodeGemma-2b',
        MGI: 0.0112,
        temp0_HumanEval: 0.3537,
        temp0_HumanEval_ET: 0.2805,
        temp0_8_HumanEval: 0.2161,
        temp0_8_HumanEval_ET: 0.1771,
        link: 'https://huggingface.co/google/codegemma-2b',
    },
    {
        name: 'CodeGemma-7b',
        MGI: 0.0548,
        temp0_HumanEval: 0.4329,
        temp0_HumanEval_ET: 0.3537,
        temp0_8_HumanEval: 0.3316,
        temp0_8_HumanEval_ET: 0.2779,
        link: 'https://huggingface.co/google/codegemma-7b',
    },
    {
        name: 'AixCoder3-7b-base',
        MGI: 0.0578,
        temp0_HumanEval: 0.5427,
        temp0_HumanEval_ET: 0.4451,
        temp0_8_HumanEval: 0.4545,
        temp0_8_HumanEval_ET: 0.3826,
        link: 'https://github.com/aixcoder-plugin/aiXcoder-7B?ref=top.aibase.com',
    },
    {
        name: 'CodeQwen1.5-7b',
        MGI: 0.0361,
        temp0_HumanEval: 0.439,
        temp0_HumanEval_ET: 0.3841,
        temp0_8_HumanEval: 0.3884,
        temp0_8_HumanEval_ET: 0.3279,
        link: 'https://huggingface.co/Qwen/CodeQwen1.5-7B',
    },
    {
        name: 'Starcoder2-7b',
        MGI: 0.0579,
        temp0_HumanEval: 0.3659,
        temp0_HumanEval_ET: 0.3232,
        temp0_8_HumanEval: 0.2905,
        temp0_8_HumanEval_ET: 0.2438,
        link: 'https://huggingface.co/bigcode/starcoder2-7b',
    },
    {
        name: 'Starcoder2-15b',
        MGI: 0.0552,
        temp0_HumanEval: 0.4695,
        temp0_HumanEval_ET: 0.4024,
        temp0_8_HumanEval: 0.3406,
        temp0_8_HumanEval_ET: 0.2795,
        link: 'https://huggingface.co/bigcode/starcoder2-15b',
    },
    {
        name: 'CodeLlama-13b',
        MGI: 0.0412,
        temp0_HumanEval: 0.3415,
        temp0_HumanEval_ET: 0.2927,
        temp0_8_HumanEval: 0.2405,
        temp0_8_HumanEval_ET: 0.2015,
        link: 'https://huggingface.co/codellama/CodeLlama-13b-hf',
    },
    {
        name: 'CodeLlama-34b',
        MGI: 0.0651,
        temp0_HumanEval: 0.4817,
        temp0_HumanEval_ET: 0.4146,
        temp0_8_HumanEval: 0.3478,
        temp0_8_HumanEval_ET: 0.2906,
        link: 'https://huggingface.co/codellama/CodeLlama-34b-hf',
    },
    {
        name: 'CodeLlama-70b',
        MGI: 0.0523,
        temp0_HumanEval: 0.5244,
        temp0_HumanEval_ET: 0.4512,
        temp0_8_HumanEval: 0.4317,
        temp0_8_HumanEval_ET: 0.3615,
        link: 'https://huggingface.co/codellama/CodeLlama-70b-hf',
    }
]
function renderRows(model) {
    return `
            <tr>
                <td><a href=${model.link} target="_blank">${model.name}</a></td>
                <td class="td_value">${model.MGI}</td>
                <td class="td_value">${model.temp0_HumanEval}</td>
                <td class="td_value">${model.temp0_HumanEval_ET}</td>
                <td class="td_value">${model.temp0_8_HumanEval}</td>
                <td class="td_value">${model.temp0_8_HumanEval_ET}</td>
            </tr>
        `
}
function renderTables() {
    let html = ''
    // let rows = models.length + 1
    // html += `
    //         <tr>
    //             <td class="td_HumanEval" rowspan="${rows}">HumanEval</td>
    //         </tr>
    //     `
    models.forEach(model => {
        html += renderRows(model);
    });
    document.querySelector('tbody').innerHTML = html;
}

function adjustBackgroundColor() {
    var evalTable = document.getElementById('evalTable');
    var rows = evalTable.getElementsByTagName('tr');
    for(var i = 0; i < rows.length; i++){
        rows[i].style.backgroundColor = (i < 3 ? '#ffffff' : (i % 2 === 0 ? '#fbfbfb' : '#ffffff'));
    }
}

renderTables()
adjustBackgroundColor()

document.querySelector('table').addEventListener('click', (e) => {
    if (e.target.matches('button')) {
        let direction = e.target.dataset.direction
        let type = e.target.dataset.type
        models.sort(orderBy(direction, type))
        renderTables()
        adjustBackgroundColor()
        e.target.dataset.direction = (direction === 'asc' ? 'desc' : 'asc')
        e.target.style.transform = (direction === 'asc' ? 'rotate(0deg)' : 'rotate(180deg)')
    }
})

function orderBy(direction, type) {
    return function (a, b) {
        let comparision = 0
        let value = (direction === 'desc' ? 1 : -1)
        switch (type) {
            case 'name':
                if (a.name.toLowerCase() > b.name.toLowerCase()) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
            case 'MGI':
                if (a.MGI > b.MGI) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
            case 'temp0_HumanEval':
                if (a.temp0_HumanEval > b.temp0_HumanEval) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
            case 'temp0_HumanEval_ET':
                if (a.temp0_HumanEval_ET > b.temp0_HumanEval_ET) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
            case 'temp0_8_HumanEval':
                if (a.temp0_8_HumanEval > b.temp0_8_HumanEval) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
            case 'temp0_8_HumanEval_ET':
                if (a.temp0_8_HumanEval_ET > b.temp0_8_HumanEval_ET) {
                    comparision = value
                } else {
                    comparision = value * -1
                }
                break;
        }
        return comparision
    }
}

var btns = document.getElementsByClassName("button_sort");

function adjustBtnForm(event) {
    var btn = event.target;
    if (btn.classList.contains("button_sort")) {
        btn.style.borderTop = '8px solid orange'; 
        for (var i = 0; i < btns.length; i++) {
            if (btns[i] !== btn) {
                btns[i].style.borderTop = '8px solid #9a9a9a';
                btns[i].style.transform = 'rotate(180deg)';
            }
        }
    }
}

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", adjustBtnForm);
}