File size: 5,837 Bytes
11c32ae 430bde6 11c32ae d8f2dee 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 d8f2dee dd24d65 430bde6 d8f2dee 11c32ae 9051509 11c32ae 430bde6 11c32ae 5bcc69a a3e21c6 11c32ae 430bde6 11c32ae 430bde6 d8f2dee 430bde6 11c32ae 430bde6 11c32ae d8f2dee 11c32ae 430bde6 11c32ae a9e6b9b 11c32ae a9e6b9b 11c32ae d8f2dee 11c32ae a9e6b9b 11c32ae a9e6b9b 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 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
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({
tasks: { value: null, matchMode: FilterMatchMode.IN },
translation: { value: null, matchMode: FilterMatchMode.IN },
n_languages: { value: null, matchMode: FilterMatchMode.BETWEEN },
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 translationBodyTemplate = rowData => {
const translationIcons = {
human: <i className='pi pi-user' title='Human-translated' />,
machine: <i className='pi pi-cog' title='Machine-translated' />,
mixed: <><i className='pi pi-user' title='Partially human-translated' /> <i className='pi pi-cog' title='Partially machine-translated' /></>,
}
const icon = translationIcons[rowData.translation] ?? <></>
return <div style={{ textAlign: 'center' }}>{icon}</div>
}
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'
/>
)
}
const translationRowFilterTemplate = options => {
return (
<MultiSelect
value={options.value}
options={['human', 'mixed', 'machine']}
onChange={e => {
options.filterApplyCallback(e.value)
setFilters(prevFilters => ({
...prevFilters,
translation: { value: e.value, matchMode: FilterMatchMode.IN }
}))
}}
placeholder='All translation modes'
/>
)
}
return (
<DataTable
value={table}
rowGroupMode='subheader'
rowGroupHeaderTemplate={rowData => {
return <div style={{ fontWeight: 'bold' }}>{rowData.group}</div>
}}
groupRowsBy='group'
header={<>Datasets</>}
removableSort
filters={filters}
filterDisplay='menu'
sortField='implemented'
scrollable
scrollHeight='600px'
id='dataset-table'
style={{ width: '800px', minHeight: '650px' }}
>
<Column
field='implemented'
header={null}
headerTooltip='Whether the dataset has been integrated into this benchmark'
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: '10rem' }}
frozen
/>
<Column
field='link'
header={null}
body={linkBodyTemplate}
/>
<Column
field='n_languages'
header='Languages'
headerTooltip='Number of languages in the dataset'
filter
sortable
style={{ minWidth: '5rem', maxWidth: '10rem' }}
body={nLanguagesBodyTemplate}
/>
<Column
field='translation'
header={<i className='pi pi-language' />}
headerTooltip='Whether the dataset has been translated by humans or machines'
filter
filterElement={translationRowFilterTemplate}
showFilterMatchModes={false}
body={translationBodyTemplate}
/>
<Column
field='tasks'
header='Tasks'
filter
filterElement={tasksRowFilterTemplate}
showFilterMatchModes={false}
style={{ minWidth: '10rem', maxWidth: '15rem' }}
body={tasksBodyTemplate}
/>
</DataTable>
)
}
export default DatasetTable
|