Upload from GitHub Actions: Fix linter problems in frontend

frontend/src/App.js

@@ -302,6 +302,7 @@ function App () {
                   <LanguagePlot data={data} width={windowWidth * 0.7} height={windowHeight * 0.6} />,
                   <SpeakerPlot data={data} width={windowWidth * 0.7} height={windowHeight * 0.6} />,
                   <HistoryPlot data={data} width={windowWidth * 0.7} height={windowHeight * 0.6} />,
+                  <CostPlot data={data} />,
                 ]}
                 numScroll={1}
                 numVisible={1}

frontend/src/components/AutoComplete.js

@@ -8,36 +8,58 @@ const AutoComplete = ({ languages, onComplete }) => {
   const dropdownRef = useRef(null)
   const inputRef = useRef(null)
 
-  // Most spoken languages (by number of speakers) - you can adjust this list
-  const mostSpokenCodes = ['en', 'zh', 'hi', 'es', 'ar', 'bn', 'pt', 'ru', 'ja', 'pa', 'de', 'jv', 'ko', 'fr', 'te', 'mr', 'tr', 'ta', 'vi', 'ur']
-  
   useEffect(() => {
     if (!languages) return
-    
+
+    // Most spoken languages (by number of speakers) - you can adjust this list
+    const mostSpokenCodes = [
+      'en',
+      'zh',
+      'hi',
+      'es',
+      'ar',
+      'bn',
+      'pt',
+      'ru',
+      'ja',
+      'pa',
+      'de',
+      'jv',
+      'ko',
+      'fr',
+      'te',
+      'mr',
+      'tr',
+      'ta',
+      'vi',
+      'ur'
+    ]
+
     if (searchTerm.trim() === '') {
       // Show most spoken languages first, then others
       const mostSpoken = mostSpokenCodes
         .map(code => languages.find(lang => lang.bcp_47 === code))
         .filter(Boolean)
-      
+
       const others = languages
         .filter(lang => !mostSpokenCodes.includes(lang.bcp_47))
         .sort((a, b) => a.language_name.localeCompare(b.language_name))
-      
+
       setFilteredLanguages([...mostSpoken, ...others])
     } else {
       const query = searchTerm.toLowerCase()
-      const matches = languages.filter(language => 
-        language.language_name.toLowerCase().includes(query) ||
-        language.autonym.toLowerCase().includes(query) ||
-        language.bcp_47.toLowerCase().includes(query)
+      const matches = languages.filter(
+        language =>
+          language.language_name.toLowerCase().includes(query) ||
+          language.autonym.toLowerCase().includes(query) ||
+          language.bcp_47.toLowerCase().includes(query)
       )
       setFilteredLanguages(matches)
     }
-  }, [searchTerm, languages, mostSpokenCodes])
+  }, [searchTerm, languages])
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = event => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false)
         setSearchTerm('')
@@ -48,14 +70,14 @@ const AutoComplete = ({ languages, onComplete }) => {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
-  const handleSelect = (language) => {
+  const handleSelect = language => {
     setSelectedLanguage(language)
     setIsOpen(false)
     setSearchTerm('')
     onComplete([language])
   }
 
-  const handleClear = (e) => {
+  const handleClear = e => {
     e.stopPropagation()
     setSelectedLanguage(null)
     onComplete([])
@@ -68,7 +90,7 @@ const AutoComplete = ({ languages, onComplete }) => {
     }
   }
 
-  const handleInputChange = (e) => {
+  const handleInputChange = e => {
     // If user starts typing while a language is selected, clear the selection to enable search
     if (selectedLanguage && e.target.value.length > 0) {
       setSelectedLanguage(null)
@@ -77,7 +99,7 @@ const AutoComplete = ({ languages, onComplete }) => {
     setSearchTerm(e.target.value)
   }
 
-  const handleKeyDown = (e) => {
+  const handleKeyDown = e => {
     if (e.key === 'Escape') {
       setIsOpen(false)
       setSearchTerm('')
@@ -159,15 +181,15 @@ const AutoComplete = ({ languages, onComplete }) => {
 
   return (
     <div style={containerStyle} ref={dropdownRef}>
-      <div 
+      <div
         style={buttonStyle}
         onClick={handleContainerClick}
-        onMouseEnter={(e) => {
+        onMouseEnter={e => {
           if (!selectedLanguage) {
             e.target.style.borderColor = '#bbb'
           }
         }}
-        onMouseLeave={(e) => {
+        onMouseLeave={e => {
           e.target.style.borderColor = '#ddd'
         }}
       >
@@ -179,13 +201,13 @@ const AutoComplete = ({ languages, onComplete }) => {
             <button
               style={clearButtonStyle}
               onClick={handleClear}
-              onMouseEnter={(e) => {
+              onMouseEnter={e => {
                 e.target.style.backgroundColor = '#f0f0f0'
               }}
-              onMouseLeave={(e) => {
+              onMouseLeave={e => {
                 e.target.style.backgroundColor = 'transparent'
               }}
-              title="View overall leaderboard"
+              title='View overall leaderboard'
             >
               ×
             </button>
@@ -194,13 +216,17 @@ const AutoComplete = ({ languages, onComplete }) => {
           <input
             ref={inputRef}
             style={inputStyle}
-            placeholder={selectedLanguage ? "Type to search other languages..." : "Type to search languages..."}
+            placeholder={
+              selectedLanguage
+                ? 'Type to search other languages...'
+                : 'Type to search languages...'
+            }
             value={searchTerm}
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
           />
         ) : (
-          <span>Search for language-specific leaderboards...</span>
+          <span>Go to leaderboard for specific language...</span>
         )}
         {(!selectedLanguage || isOpen) && (
           <span style={{ color: '#999', fontSize: '12px' }}>
@@ -221,10 +247,10 @@ const AutoComplete = ({ languages, onComplete }) => {
                 key={language.bcp_47}
                 style={itemStyle}
                 onClick={() => handleSelect(language)}
-                onMouseEnter={(e) => {
+                onMouseEnter={e => {
                   e.target.style.backgroundColor = '#f8f9fa'
                 }}
-                onMouseLeave={(e) => {
+                onMouseLeave={e => {
                   e.target.style.backgroundColor = 'transparent'
                 }}
               >
@@ -243,8 +269,15 @@ const AutoComplete = ({ languages, onComplete }) => {
             ))
           )}
           {filteredLanguages.length > 20 && (
-            <div style={{ ...itemStyle, color: '#999', cursor: 'default', fontStyle: 'italic' }}>
-              ... and {filteredLanguages.length - 20} more languages
+            <div
+              style={{
+                ...itemStyle,
+                color: '#999',
+                cursor: 'default',
+                fontStyle: 'italic'
+              }}
+            >
+              Type to search for more languages...
             </div>
           )}
         </div>

frontend/src/components/CostPlot.js

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react'
 import * as Plot from '@observablehq/plot'
 
-const HistoryPlot = ({ data, width = 750, height = 500 }) => {
+const CostPlot = ({ data, width = 750, height = 500 }) => {
   const containerRef = useRef()
   useEffect(() => {
     const models = [...data.model_table] // sort copy, not in place
@@ -55,12 +55,12 @@ const HistoryPlot = ({ data, width = 750, height = 500 }) => {
             ...models.filter(d => d.newRecord),
             {
               cost: models.map(d => d.cost).reduce((a, b) => Math.max(a, b), 0),
-              maxAverage: models[models.length - 1].maxAverage
+              maxAverage: models[models.length - 1]?.maxAverage || 0
             }
           ],
           {
             x: d => d.cost,
-            y: d => d.maxAverage,
+            y: d => d?.maxAverage || 0,
             curve: 'catmull-rom',
             strokeOpacity: 0.3
           }
@@ -69,7 +69,7 @@ const HistoryPlot = ({ data, width = 750, height = 500 }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [data])
+  }, [data, width, height])
 
   return (
     <div
@@ -85,4 +85,4 @@ const HistoryPlot = ({ data, width = 750, height = 500 }) => {
   )
 }
 
-export default HistoryPlot
+export default CostPlot

frontend/src/components/DatasetTable.js

@@ -23,7 +23,7 @@ const DatasetTable = ({ data }) => {
 
   const authorBodyTemplate = rowData => {
     const url = rowData.author_url?.replace('https://', '')
-    const img = url ? <img src={`https://favicone.com/${url}`} style={{borderRadius: '50%'}}/> : <></>
+    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>
@@ -41,7 +41,7 @@ const DatasetTable = ({ data }) => {
   }
 
   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>
+    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 => {

frontend/src/components/HistoryPlot.js

@@ -64,7 +64,7 @@ const HistoryPlot = ({ data, width = 750, height = 500 }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [])
+  }, [models, width, height])
 
   return (
     <div

frontend/src/components/LanguagePlot.js

@@ -4,7 +4,6 @@ import * as Plot from '@observablehq/plot'
 const LanguagePlot = ({ data, width = 750, height = 500 }) => {
   const containerRef = useRef()
   const languages = data.language_table.filter(a => a.average > 0)
-  const families = [...new Set(languages.map(a => a.family))]
 
   useEffect(() => {
     const plot = Plot.plot({
@@ -46,7 +45,7 @@ const LanguagePlot = ({ data, width = 750, height = 500 }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [])
+  }, [languages, width, height])
 
   return (
     <div

frontend/src/components/SpeakerPlot.js

@@ -81,7 +81,7 @@ const SpeakerPlot = ({ data, width = 750, height = 500 }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [])
+  }, [languages, width, height])
 
   return (
     <div

frontend/src/components/WorldMap.js

@@ -65,7 +65,7 @@ const WorldMap = ({ data, width = 750, height = 500 }) => {
         unknown: 'gray',
         label: 'Score',
         legend: true,
-        domain: [0, 0.7]
+        domain: [0, 1]
       },
       style: {
         fontFamily: 'monospace'
@@ -73,7 +73,7 @@ const WorldMap = ({ data, width = 750, height = 500 }) => {
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [mapData, data])
+  }, [mapData, data, width, height])
 
   return (
     <div