AutoComplete improvements and examples

frontend/src/App.js

@@ -8,13 +8,11 @@ import WorldMap from './components/WorldMap'
 import AutoComplete from './components/AutoComplete'
 import LanguagePlot from './components/LanguagePlot'
 import { Carousel } from 'primereact/carousel'
-import { FilterMatchMode } from 'primereact/api'
 
 function App () {
   const [data, setData] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
-  const [allSuggestions, setAllSuggestions] = useState([])
   const [selectedLanguages, setSelectedLanguages] = useState([])
   useEffect(() => {
     fetch('/api/data', {
@@ -37,38 +35,6 @@ function App () {
       })
   }, [selectedLanguages])
 
-  useEffect(() => {
-    if (data) {
-      const models = data.model_table.map(item => ({
-        type: 'Model',
-        value: item.model,
-        detail: item.provider,
-        searchText: 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(),
-        bcp_47: item.bcp_47
-      }))
-      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)
-    }
-  }, [data])
-
   return (
     <PrimeReactProvider>
       <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
@@ -91,18 +57,15 @@ function App () {
             </span>
           </div>
           <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
-            Global AI Language Monitor
+            Global AI Monitor
           </h1>
           <p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
             Tracking language proficiency of AI models for every language
           </p>
           <AutoComplete
-            allSuggestions={allSuggestions}
-            onComplete={item => {
-              if (item.type === 'Language') setSelectedLanguages(() => [item])
-            }}
+            languages={data?.language_table}
+            onComplete={items => setSelectedLanguages(items)}
           />
-          <pre>{JSON.stringify(selectedLanguages, null, 2)}</pre>
         </header>
         <main
           style={{
@@ -169,6 +132,7 @@ function App () {
                   numVisible={1}
                   itemTemplate={item => item}
                   circular
+                  style={{ width: '800px', minHeight: '650px' }}
                 />
               </div>
             </>

frontend/src/components/AutoComplete.js

@@ -1,58 +1,100 @@
 import { AutoComplete as PrimeAutoComplete } from 'primereact/autocomplete'
 import { useState } from 'react'
-const AutoComplete = ({ allSuggestions, onComplete }) => {
+const AutoComplete = ({ languages, onComplete }) => {
   const [autoComplete, setAutoComplete] = useState('')
   const [suggestions, setSuggestions] = useState([])
 
+  const exampleCodes = ['de', 'fr', 'ar', 'hi', 'sw', 'fa']
+  const exampleLanguages = languages?.filter(item =>
+    exampleCodes.includes(item.bcp_47)
+  )
+
   const search = e => {
-    const matches = allSuggestions.filter(suggestion =>
-      suggestion.searchText.includes(e.query.toLowerCase())
-    )
+    const matches = languages.filter(language => {
+      const query = e.query.toLowerCase()
+      return (
+        language.language_name.toLowerCase().includes(query) ||
+        language.autonym.toLowerCase().includes(query) ||
+        language.bcp_47.toLowerCase().includes(query)
+      )
+    })
     setSuggestions(matches)
   }
 
-  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>)}
+  const itemTemplate = item => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }}
+    >
+      <span>
+        {item.autonym}
+        <span style={{ color: 'gray', marginLeft: '1rem' }}>
+          {item.language_name}
         </span>
-    } else if (item.detail) {
-        detail = <span style={{ color: 'gray', marginLeft: '1rem' }}>{item.detail}</span>
-    } else {
-        detail = null
-    }
-    return (
-      <div
+      </span>
+      <span style={{ color: 'gray' }}>{item.bcp_47}</span>
+    </div>
+  )
+
+  return (
+    <>
+      <PrimeAutoComplete
+        placeholder='Search for language-specific leaderboards...'
+        value={autoComplete}
+        onChange={e => setAutoComplete(e.value)}
+        onClick={() => {
+          setAutoComplete('')
+          setSuggestions(languages)
+        }}
+        onSelect={e => {
+          setAutoComplete(e.value.language_name)
+          onComplete([e.value])
+        }}
+        suggestions={suggestions}
+        completeMethod={search}
+        virtualScrollerOptions={{ itemSize: 50 }} // smaller values give layout problems
+        delay={500}
+        autoHighlight
+        autoFocus
+        itemTemplate={itemTemplate}
+        field='language_name'
+        minLength={0}
+      />
+      <span
         style={{
           display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: '1rem',
+          rowGap: '0.3rem',
+          marginTop: '1rem',
+          maxWidth: '600px',
+          justifyContent: 'center',
+          color: '#555'
         }}
       >
-        <span>{item.value}{detail}</span>
-        <span style={{ color: 'gray' }}>{item.type}</span>
-      </div>
-    )
-  }
-
-  return (
-    <PrimeAutoComplete
-      placeholder='Search for model, language, or dataset'
-      value={autoComplete}
-      onChange={e => setAutoComplete(e.value)}
-      onSelect={e => {
-        setAutoComplete(e.value.value)
-        onComplete(e.value)
-      }}
-      suggestions={suggestions}
-      completeMethod={search}
-      virtualScrollerOptions={{ itemSize: 50 }}
-      delay={500}
-      autoHighlight
-      autoFocus
-      itemTemplate={itemTemplate}
-    />
+        <span>Examples:</span>
+        {exampleLanguages?.map(language => (
+          <a
+            onClick={() => {
+              onComplete([language])
+              setAutoComplete(language.language_name)
+            }}
+            style={{ textDecoration: 'underline', cursor: 'pointer' }}
+          >
+            {language.language_name} Leaderboard
+          </a>
+        ))}
+        {/* <li>African Leaderboard</li>
+              <li>Indic Leaderboard</li>
+              <li>Transcription Leaderboard</li>
+              <li>Dataset Availability for African Languages</li>
+              <li>GPT 4.5 Evaluation</li>
+              <li>MMLU Evaluation of Open Models</li> */}
+      </span>
+    </>
   )
 }
 

frontend/src/components/DatasetTable.js

@@ -78,6 +78,7 @@ const DatasetTable = ({ data }) => {
       scrollable
       scrollHeight='600px'
       id='dataset-table'
+      style={{ width: '800px', minHeight: '650px' }}
     >
       <Column
         field='implemented'

frontend/src/components/LanguageTable.js

@@ -138,7 +138,7 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
       scrollable
       scrollHeight='600px'
       id='language-table'
-      style={{ width: '800px' }}
+      style={{ width: '800px', minHeight: '650px' }}
     >
       <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
       <Column

frontend/src/components/ModelTable.js

@@ -145,6 +145,7 @@ const ModelTable = ({ data }) => {
       scrollable
       scrollHeight='600px'
       id='model-table'
+      style={{ width: '800px', minHeight: '650px' }}
     >
       <Column field='rank' body={rankBodyTemplate} />
       <Column field='provider' header='Provider' style={{ minWidth: '5rem' }} body={providerBodyTemplate} />

frontend/src/components/ScoreField.js

@@ -34,7 +34,8 @@ const ScoreField = (score, minScore, maxScore) => {
           height: '100%',
           width: `${percentage}%`,
           backgroundColor: barColor,
-          zIndex: 0
+          zIndex: 0,
+          transition: 'width 0.3s, background-color 0.3s'
         }}
       />