File size: 3,957 Bytes
11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 5bcc69a 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 11c32ae 430bde6 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 |
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 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'
/>
)
}
console.log(table)
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' }}
/>
</DataTable>
)
}
export default DatasetTable
|