Autonymns and cooler dataset search display

evals/languages.py

@@ -20,6 +20,9 @@ languages = pd.DataFrame(list(languages.items()), columns=["bcp_47", "speakers"]
 languages["language_name"] = languages["bcp_47"].apply(
     lambda x: Language.get(x).display_name()
 )
+languages["autonym"] = languages["bcp_47"].apply(
+    lambda x: Language.get(x).autonym().title()
+)
 
 glottolog = pd.read_csv(
     "data/glottolog_languoid.csv/languoid.csv", na_values=[""], keep_default_na=False

evals/main.py

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

frontend/src/App.js

@@ -33,9 +33,9 @@ function App () {
 
   useEffect(() => {
     if (data) {
-      const models = data.model_table.map(item => ({ type: 'Model', value: item.model, searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase() }))
-      const languages = data.language_table.map(item => ({ type: 'Language', value: item.language_name, searchText: item.language_name.toLowerCase() }))
-      const datasets = data.dataset_table.map(item => ({ type: 'Dataset', value: item.name, searchText: item.author.toLowerCase() + ' ' + item.name.toLowerCase() + ' ' + item.tasks.map(task => task.toLowerCase()).join(' ') }))
+      const models = data.model_table.map(item => ({ type: 'Model', value: item.model, detail: item.provider, searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase() }))
+      const languages = data.language_table.map(item => ({ type: 'Language', value: item.autonym, detail: item.language_name, searchText: item.language_name.toLowerCase() + ' ' + item.autonym.toLowerCase() }))
+      const datasets = data.dataset_table.map(item => ({ type: 'Dataset', value: item.name, detail: item.tasks, searchText: item.author.toLowerCase() + ' ' + item.name.toLowerCase() + ' ' + item.tasks.map(task => task.toLowerCase()).join(' ') }))
       const allSuggestions = [...models, ...languages, ...datasets]
       setAllSuggestions(allSuggestions)
     }

frontend/src/components/AutoComplete.js

@@ -13,16 +13,26 @@ const AutoComplete = ({ allSuggestions, onComplete }) => {
   }
 
   const itemTemplate = item => {
+    let detail
+    if (item.type === "Dataset") {
+        detail = <span>
+            {item.detail.map(task => <span key={task} style={{ color: "gray", marginLeft: '1rem', backgroundColor: 'lightgray', padding: '0.2rem', borderRadius: '0.2rem' }}>{task}</span>)}
+        </span>
+    } else if (item.detail) {
+        detail = <span style={{ color: 'gray', marginLeft: '1rem' }}>{item.detail}</span>
+    } else {
+        detail = null
+    }
     return (
       <div
         style={{
           display: 'flex',
           flexDirection: 'row',
-          justifyContent: 'space-between'
+          justifyContent: 'space-between',
         }}
       >
-        <div>{item.value}</div>
-        <div style={{ color: 'gray' }}>{item.type}</div>
+        <span>{item.value}{detail}</span>
+        <span style={{ color: 'gray' }}>{item.type}</span>
       </div>
     )
   }

frontend/src/components/LanguageTable.js

@@ -108,7 +108,10 @@ const LanguageTable = ({ data }) => {
   }
 
   const languageBodyTemplate = rowData => {
-    return <div style={{ fontWeight: 'bold' }}>{rowData.language_name}</div>
+    return <div>
+      <div style={{ fontWeight: 'bold' }}>{rowData.autonym}</div>
+      <div style={{ fontSize: '0.8rem', color: 'gray' }}>{rowData.language_name}</div>
+    </div>
   }
 
   const scoreBodyTemplate = (field, options = {}) => {