File size: 4,348 Bytes
11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 dd24d65 430bde6 11c32ae 9051509 11c32ae 430bde6 11c32ae 5bcc69a a3e21c6 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 131 132 133 134 135 136 |
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}
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}
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
|