Nicer layout for datasets table and other tables

data/datasets.json

@@ -2,6 +2,7 @@
     {
         "name": "FLORES+",
         "author": "Meta",
+        "author_url": "https://ai.meta.com",
         "url": "https://huggingface.co/datasets/openlanguagedata/flores_plus",
         "n_languages": 200,
         "tasks": [
@@ -16,6 +17,7 @@
     {
         "name": "FLEURS",
         "author": "Meta",
+        "author_url": "https://ai.meta.com",
         "url": "https://huggingface.co/datasets/google/fleurs",
         "n_languages": 102,
         "tasks": [
@@ -28,6 +30,7 @@
     {
         "name": "CommonVoice",
         "author": "Mozilla",
+        "author_url": "https://mozilla.ai",
         "url": "https://huggingface.co/datasets/mozilla-foundation/common_voice_17_0",
         "n_languages": 124,
         "tasks": [
@@ -38,6 +41,7 @@
     {
         "name": "MMMLU",
         "author": "OpenAI",
+        "author_url": "https://openai.com",
         "url": "https://huggingface.co/datasets/openai/MMMLU",
         "n_languages": "14",
         "tasks": [
@@ -49,6 +53,7 @@
     {
         "name": "AfriMMLU",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/afrimmlu",
         "n_languages": "17",
         "tasks": [
@@ -59,7 +64,8 @@
     },
     {
         "name": "Okapi MMLU",
-        "author": "Okapi",
+        "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/jon-tow/okapi_mmlu",
         "n_languages": 16,
         "tasks": [
@@ -71,6 +77,7 @@
     {
         "name": "Global MMLU",
         "author": "Cohere",
+        "author_url": "https://cohere.com",
         "url": "https://huggingface.co/datasets/CohereForAI/Global-MMLU",
         "n_languages": 42,
         "tasks": [
@@ -82,6 +89,7 @@
     {
         "name": "MGSM",
         "author": "Google",
+        "author_url": "https://google.com",
         "url": "https://huggingface.co/datasets/juletxara/mgsm",
         "n_languages": 10,
         "tasks": [
@@ -93,6 +101,7 @@
     {
         "name": "AfriMGSM",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/afrimgsm",
         "n_languages": 18,
         "tasks": [
@@ -103,7 +112,8 @@
     },
     {
         "name": "Okapi ARC Challenge",
-        "author": "Okapi",
+        "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/jon-tow/okapi_arc_challenge",
         "n_languages": 31,
         "tasks": [
@@ -115,6 +125,7 @@
     {
         "name": "Uhuru ARC Easy",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/uhura-arc-easy",
         "n_languages": 6,
         "tasks": [
@@ -125,7 +136,8 @@
     },
     {
         "name": "Okapi TruthfulQA",
-        "author": "Okapi",
+        "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/jon-tow/okapi_truthfulqa/tree/main/data",
         "n_languages": 31,
         "tasks": [
@@ -137,6 +149,7 @@
     {
         "name": "Uhura TruthfulQA",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/uhura-truthfulqa",
         "n_languages": 6,
         "tasks": [
@@ -148,6 +161,7 @@
     {
         "name": "XNLI",
         "author": "Meta",
+        "author_url": "https://ai.meta.com",
         "url": "https://huggingface.co/datasets/facebook/xnli",
         "n_languages": 14,
         "tasks": [
@@ -159,6 +173,7 @@
     {
         "name": "AfriXNLI",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/afrixnli",
         "n_languages": 18,
         "tasks": [
@@ -169,7 +184,8 @@
     },
     {
         "name": "Okapi HellaSwag",
-        "author": "Okapi",
+        "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/jon-tow/okapi_hellaswag",
         "n_languages": 31,
         "tasks": [
@@ -181,6 +197,7 @@
     {
         "name": "WikiANN / PAN-X",
         "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/unimelb-nlp/wikiann",
         "n_languages": 176,
         "tasks": [
@@ -191,6 +208,7 @@
     {
         "name": "MSVAMP",
         "author": "Microsoft",
+        "author_url": "https://microsoft.com",
         "url": "https://huggingface.co/datasets/Mathoctopus/MSVAMP",
         "n_languages": 10,
         "tasks": [
@@ -201,6 +219,7 @@
     {
         "name": "XLSUM",
         "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/csebuetnlp/xlsum",
         "n_languages": 45,
         "tasks": [
@@ -211,6 +230,7 @@
     {
         "name": "SEA-IFEVAL",
         "author": "AI Singapore",
+        "author_url": "https://aisingapore.org",
         "url": "https://huggingface.co/datasets/aisingapore/instruction_following-ifeval",
         "n_languages": 7,
         "tasks": [
@@ -222,6 +242,7 @@
     {
         "name": "XTREME",
         "author": "Google",
+        "author_url": "https://google.com",
         "url": "https://huggingface.co/datasets/google/xtreme",
         "n_languages": 40,
         "tasks": [
@@ -235,6 +256,7 @@
     {
         "name": "XGLUE",
         "author": "Microsoft",
+        "author_url": "https://microsoft.com",
         "url": "https://huggingface.co/datasets/microsoft/xglue",
         "n_languages": 18,
         "tasks": [
@@ -246,6 +268,7 @@
     {
         "name": "IndicGLUE",
         "author": "AI4Bharat",
+        "author_url": "https://models.ai4bharat.org",
         "url": "https://huggingface.co/datasets/ai4bharat/indic_glue",
         "n_languages": 11,
         "tasks": [
@@ -257,6 +280,7 @@
     {
         "name": "Opus Gnome",
         "author": "Helsinki NLP",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/Helsinki-NLP/opus_gnome",
         "n_languages": 187,
         "tasks": [
@@ -267,6 +291,7 @@
     {
         "name": "Opus Paracrawl",
         "author": "Helsinki NLP",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/Helsinki-NLP/opus_paracrawl",
         "n_languages": 43,
         "tasks": [
@@ -277,6 +302,7 @@
     {
         "name": "CCAligned",
         "author": "Meta",
+        "author_url": "https://ai.meta.com",
         "url": "https://huggingface.co/datasets/ahelk/ccaligned_multilingual",
         "n_languages": 137,
         "tasks": [
@@ -287,7 +313,8 @@
     {
         "name": "OPUS Collection",
         "author": "Helsinki NLP",
-        "url": "https://opus.nlpl.eu/",
+        "author_url": null,
+        "url": "https://opus.nlpl.eu",
         "n_languages": 747,
         "tasks": [
             "translation"
@@ -297,6 +324,7 @@
     {
         "name": "MasakhaNER",
         "author": "Masakhane",
+        "author_url": "https://www.masakhane.io",
         "url": "https://huggingface.co/datasets/masakhane/masakhaner",
         "n_languages": 10,
         "tasks": [
@@ -306,6 +334,8 @@
     },
     {
         "name": "Multilingual Sentiments",
+        "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/tyqiangz/multilingual-sentiments",
         "n_languages": 12,
         "tasks": [
@@ -316,6 +346,7 @@
     {
         "name": "CulturaX",
         "author": "Academic",
+        "author_url": null,
         "url": "https://huggingface.co/datasets/uonlp/CulturaX",
         "n_languages": 167,
         "tasks": [
@@ -326,6 +357,7 @@
     {
         "name": "Tülu 3 SFT Mixture",
         "author": "AllenAI",
+        "author_url": "https://allenai.org",
         "url": "https://huggingface.co/datasets/allenai/tulu-3-sft-mixture",
         "n_languages": 70,
         "tasks": [
@@ -336,6 +368,7 @@
     {
         "name": "xP3",
         "author": "BigScience",
+        "author_url": "https://bigscience.huggingface.co",
         "url": "https://huggingface.co/datasets/bigscience/xP3",
         "n_languages": 46,
         "tasks": [
@@ -346,6 +379,7 @@
     {
         "name": "Aya",
         "author": "Cohere",
+        "author_url": "https://cohere.com",
         "url": "https://huggingface.co/datasets/CohereForAI/aya_dataset",
         "n_languages": 65,
         "tasks": [
@@ -356,6 +390,7 @@
     {
         "name": "Lanfrica",
         "author": "Lanfrica",
+        "author_url": "https://lanfrica.com",
         "url": "https://lanfrica.com/records?language=yor&task=machine%20translation",
         "n_languages": 2200,
         "tasks": [
@@ -366,6 +401,7 @@
     {
         "name": "HuggingFace Languages",
         "author": "HuggingFace",
+        "author_url": "https://huggingface.co",
         "url": "https://huggingface.co/languages",
         "n_languages": 4680,
         "tasks": [
@@ -377,8 +413,9 @@
     {
         "name": "HuggingFace Multilingual Datasets",
         "author": "HuggingFace",
+        "author_url": "https://huggingface.co",
         "url": "https://huggingface.co/datasets?other=multilinguality:multilingual",
-        "n_languages": null,
+        "n_languages": 2012,
         "tasks": [
             "datasets"
         ],

evals/main.py

@@ -104,7 +104,7 @@ def make_language_table(df):
     for row in [*task_metrics, "average"]:
         df[row] = df[row].round(2)
     df = pd.merge(languages, df, on="bcp_47", how="outer")
-    df = df.sort_values(by="average", ascending=False)
+    df = df.sort_values(by="speakers", ascending=False)
     df = df[["language_name", "speakers", "family", "average", "in_benchmark", *task_metrics]]
     return df
 

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "primeicons": "^7.0.0",
         "primereact": "^10.9.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -13595,6 +13596,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
     "node_modules/primereact": {
       "version": "10.9.3",
       "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.3.tgz",

frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "primeicons": "^7.0.0",
     "primereact": "^10.9.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

frontend/src/App.js

@@ -67,7 +67,8 @@ function App () {
               alignItems: 'center',
               width: '100%',
               height: '100%',
-              justifyContent: 'center'
+              justifyContent: 'center',
+              paddingBottom: '5vh'
             }}
           >
             <div

frontend/src/components/DatasetTable.js

@@ -2,24 +2,66 @@ 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({
-    name: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    author: { value: null, matchMode: FilterMatchMode.IN },
     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 },
-    implemented: { value: null, matchMode: FilterMatchMode.EQUALS },
   })
   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}
@@ -27,43 +69,52 @@ const DatasetTable = ({ data }) => {
       removableSort
       filters={filters}
       filterDisplay='menu'
+      sortField='implemented'
       scrollable
       scrollHeight='600px'
       id='dataset-table'
     >
-      {/* <Column
+      <Column
         field='implemented'
-        header='Implemented'
-        filter
-        style={{ minWidth: '5rem' }}
-      /> */}
+        header={null}
+        sortable
+        style={{ maxWidth: '5rem' }}
+        body={implementedBodyTemplate}
+      />
       <Column
         field='author'
         header='Author'
-        filter
         showFilterMatchModes={false}
         style={{ minWidth: '5rem' }}
+        body={authorBodyTemplate}
       />
       <Column
         field='name'
         header='Name'
         body={nameBodyTemplate}
-        filter
         style={{ minWidth: '5rem' }}
         frozen
       />
+      <Column
+        field='link'
+        header={null}
+        body={linkBodyTemplate}
+      />
       <Column
         field='tasks'
         header='Tasks'
         filter
-        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+        filterElement={tasksRowFilterTemplate}
+        showFilterMatchModes={false}
+        style={{ minWidth: '10rem', maxWidth: '15rem' }}
+        body={tasksBodyTemplate}
       />
       <Column
         field='n_languages'
-        header='#Languages'
+        header='Languages'
         filter
         sortable
-        style={{ minWidth: '10rem' }}
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
       />
     </DataTable>
   )

frontend/src/components/LanguageTable.js

@@ -99,7 +99,7 @@ const LanguageTable = ({ data }) => {
 
   const speakerBodyTemplate = rowData => {
     const populationStr = formatPopulation(rowData.speakers)
-    return <div>{populationStr}</div>
+    return <div style={{ textAlign: 'right' }}>{populationStr}</div>
   }
 
   const languageBodyTemplate = rowData => {
@@ -131,8 +131,6 @@ const LanguageTable = ({ data }) => {
         field='language_name'
         header='Language'
         body={languageBodyTemplate}
-        filter
-        showFilterMatchModes={false}
         style={{ minWidth: '5rem' }}
         frozen
       />
@@ -143,6 +141,7 @@ const LanguageTable = ({ data }) => {
         filter
         filterElement={speakerFilterTemplate}
         showFilterMatchModes={false}
+        sortable
         style={{ minWidth: '5rem' }}
       />
       <Column

frontend/src/components/ModelTable.js

@@ -19,23 +19,6 @@ const ModelTable = ({ data }) => {
     return <Medal rank={rowData.rank} />
   }
 
-  const providers = [...new Set(table.map(item => item.provider))]
-  const providerRowFilterTemplate = options => {
-    return (
-      <MultiSelect
-        value={options.value}
-        options={providers}
-        onChange={e => {
-          options.filterApplyCallback(e.value)
-          setFilters(prevFilters => ({
-            ...prevFilters,
-            provider: { value: e.value, matchMode: FilterMatchMode.IN }
-          }))
-        }}
-        placeholder='All providers'
-      />
-    )
-  }
   const typeRowFilterTemplate = options => {
     return (
       <MultiSelect
@@ -120,7 +103,7 @@ const ModelTable = ({ data }) => {
 
   const sizeBodyTemplate = rowData => {
     const sizeStr = formatSize(rowData.size)
-    return <div>{sizeStr}</div>
+    return <div style={{ textAlign: 'right' }}>{sizeStr}</div>
   }
 
   const modelBodyTemplate = rowData => {
@@ -152,16 +135,11 @@ const ModelTable = ({ data }) => {
       <Column
         field='provider'
         header='Provider'
-        filter
-        filterElement={providerRowFilterTemplate}
-        showFilterMatchModes={false}
         style={{ minWidth: '5rem' }}
       />
       <Column
         field='model'
         header='Model'
-        filter
-        showFilterMatchModes={false}
         style={{ minWidth: '10rem' }}
         body={modelBodyTemplate}
         frozen