Fix world map and apply filters for it

evals/backend.py

@@ -104,11 +104,11 @@ async def data(request: Request):
     # lang_results = pd.merge(languages, lang_results, on="bcp_47", how="outer")
     language_table = make_language_table(df, languages)
     datasets_df = pd.read_json("data/datasets.json")
-    countries = make_country_table(language_table)
     if selected_languages:
-        # the filtering is only applied for the model table
+        # the filtering is only applied for the model table and the country data
         df = df[df["bcp_47"].isin(lang["bcp_47"] for lang in selected_languages)]
     model_table = make_model_table(df, models)
+    countries = make_country_table(make_language_table(df, languages))
     all_tables = {
         "model_table": serialize(model_table),
         "language_table": serialize(language_table),

frontend/src/App.js

@@ -125,7 +125,7 @@ function App () {
               >
                 <Carousel
                   value={[
-                    <WorldMap data={data} />,
+                    <WorldMap data={data.countries} />,
                     <LanguagePlot data={data} />
                   ]}
                   numScroll={1}

frontend/src/components/LanguageTable.js

@@ -134,7 +134,7 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
       selection={selectedLanguages}
       onSelectionChange={e => setSelectedLanguages(e.value)}
       frozenValue={selectedLanguages}
-      virtualScrollerOptions={{ itemSize: 50 }}
+      virtualScrollerOptions={{ itemSize: 100 }}
       scrollable
       scrollHeight='600px'
       id='language-table'
@@ -145,7 +145,7 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
         field='language_name'
         header='Language'
         body={languageBodyTemplate}
-        style={{ minWidth: '5rem' }}
+        style={{ minWidth: '10rem' }}
         frozen
       />
       <Column

frontend/src/components/WorldMap.js

@@ -8,16 +8,16 @@ const smoothProgressBar = fraction => {
   const filledUnits = Math.round(fraction * totalUnits)
   const fullBlocks = Math.floor(filledUnits / 8)
   const remainder = filledUnits % 8
-  return ('█'.repeat(fullBlocks) + (remainder > 0 ? blocks[remainder - 1] : '')) || '▏'
+  return (
+    '█'.repeat(fullBlocks) + (remainder > 0 ? blocks[remainder - 1] : '') || '▏'
+  )
 }
 
 const makeTitle = data => d => {
-  const languages = data.countries[
-    d.properties?.ISO_A2_EH
-  ]?.languages.toSorted((a, b) => b.population - a.population)
-  const pop = languages
-    ?.map(a => a.population)
-    .reduce((prev, a) => prev + a, 0)
+  const languages = data[d.properties?.ISO_A2_EH]?.languages.toSorted(
+    (a, b) => b.population - a.population
+  )
+  const pop = languages?.map(a => a.population).reduce((prev, a) => prev + a, 0)
   const langstring =
     languages
       ?.slice(0, 10)
@@ -37,16 +37,20 @@ const WorldMap = ({ data }) => {
   }, [])
 
   useEffect(() => {
-    if (mapData === undefined) return
-    const countries = mapData
+    console.log('countries', data)
+    if (mapData === undefined || data === undefined) return
+    const countriesDict = data.reduce((acc, country) => {
+      acc[country.iso2] = country
+      return acc
+    }, {})
     const plot = Plot.plot({
       width: 750,
       height: 500,
       projection: 'equal-earth',
       marks: [
-        Plot.geo(countries, {
-          fill: d => data.countries[d.properties?.ISO_A2_EH]?.score,
-          title: makeTitle(data),
+        Plot.geo(mapData, {
+          fill: d => countriesDict[d.properties?.ISO_A2_EH]?.score,
+          title: makeTitle(countriesDict),
           tip: true
         })
       ],
@@ -55,7 +59,7 @@ const WorldMap = ({ data }) => {
         unknown: 'gray',
         label: 'Score',
         legend: true,
-        domain: [0, 0.5]
+        domain: [0, 0.7]
       },
       style: {
         fontFamily: 'monospace'
@@ -63,7 +67,7 @@ const WorldMap = ({ data }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [mapData])
+  }, [mapData, data])
 
   return (
     <div
@@ -73,7 +77,7 @@ const WorldMap = ({ data }) => {
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     />
   )