File size: 4,113 Bytes
11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 dd24d65 430bde6 11c32ae 430bde6 11c32ae 5bcc69a 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 dd24d65 11c32ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import { DataTable } from 'primereact/datatable'
import { Column } from 'primereact/column'
import { FilterMatchMode } from 'primereact/api'
import { useState } from 'react'
import { MultiSelect } from 'primereact/multiselect'
import 'primeicons/primeicons.css'
const DatasetTable = ({ data }) => {
const [filters, setFilters] = useState({
n_languages: { value: null, matchMode: FilterMatchMode.BETWEEN },
tasks: { value: null, matchMode: FilterMatchMode.IN },
parallel: { value: null, matchMode: FilterMatchMode.EQUALS },
base: { value: null, matchMode: FilterMatchMode.IN },
})
const table = data.dataset_table
const implementedBodyTemplate = rowData => {
return <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{rowData.implemented ? <i className='pi pi-check' title='This dataset has been used for evaluation in this benchmark.' /> : <></>}</div>
</div>
}
const authorBodyTemplate = rowData => {
const url = rowData.author_url?.replace('https://', '')
const img = url ? <img src={`https://favicone.com/${url}`} style={{borderRadius: '50%'}}/> : <></>
return <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{img}</div>
<div style={{ marginLeft: '0.5rem' }}>{rowData.author}</div>
</div>
}
const nameBodyTemplate = rowData => {
return <div style={{ fontWeight: 'bold' }}>{rowData.name}</div>
}
const tasksBodyTemplate = rowData => {
return <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
{rowData.tasks.map(task => <div key={task} style={{ backgroundColor: '#f0f0f0', padding: '0.25rem 0.5rem', borderRadius: '0.25rem' }}>{task}</div>)}
</div>
}
const linkBodyTemplate = rowData => {
return <a href={rowData.url} target='_blank' style={{ textDecoration: 'none', color: 'inherit' }}><i className='pi pi-external-link' style={{ fontSize: '0.8rem' }} /></a>
}
const nLanguagesBodyTemplate = rowData => {
return <div style={{ textAlign: 'center' }}>
{rowData.n_languages}
</div>
}
const tasks = [...new Set(table.flatMap(item => item.tasks))].sort()
const tasksRowFilterTemplate = options => {
return (
<MultiSelect
value={options.value}
options={tasks}
onChange={e => {
options.filterApplyCallback(e.value)
setFilters(prevFilters => ({
...prevFilters,
tasks: { value: e.value, matchMode: FilterMatchMode.IN }
}))
}}
placeholder='All tasks'
/>
)
}
return (
<DataTable
value={table}
header={<>Datasets</>}
removableSort
filters={filters}
filterDisplay='menu'
sortField='implemented'
scrollable
scrollHeight='600px'
id='dataset-table'
>
<Column
field='implemented'
header={null}
sortable
style={{ maxWidth: '5rem' }}
body={implementedBodyTemplate}
/>
<Column
field='author'
header='Author'
showFilterMatchModes={false}
style={{ minWidth: '5rem' }}
body={authorBodyTemplate}
/>
<Column
field='name'
header='Name'
body={nameBodyTemplate}
style={{ minWidth: '5rem' }}
frozen
/>
<Column
field='link'
header={null}
body={linkBodyTemplate}
/>
<Column
field='tasks'
header='Tasks'
filter
filterElement={tasksRowFilterTemplate}
showFilterMatchModes={false}
style={{ minWidth: '10rem', maxWidth: '15rem' }}
body={tasksBodyTemplate}
/>
<Column
field='n_languages'
header='Languages'
filter
sortable
style={{ minWidth: '5rem', maxWidth: '10rem' }}
body={nLanguagesBodyTemplate}
/>
</DataTable>
)
}
export default DatasetTable
|