frontend/src/components/DatasetTable.js

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%'}} alt="Thumbnail of the author's website"/> : <></>
    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' rel='noopener noreferrer' 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={
        <span>
          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Datasets</span>
          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
            Multilingual datasets used for this evaluation, and beyond
          </span>
        </span>
      }
      removableSort
      filters={filters}
      filterDisplay='menu'
      sortField='implemented'
      scrollable
      scrollHeight='600px'
      id='dataset-table'
      style={{ width: '100%', 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