Minor table formatting

frontend/src/components/DatasetTable.js

@@ -43,6 +43,12 @@ const DatasetTable = ({ data }) => {
     return <a href={rowData.url} target='_blank' style={{ textDecoration: 'none', color: 'inherit' }}><i className='pi pi-external-link' style={{ fontSize: '0.8rem' }} /></a>
   }
 
+  const nLanguagesBodyTemplate = rowData => {
+    return <div style={{ textAlign: 'center' }}>
+      {rowData.n_languages}
+    </div>
+  }
+
   const tasks = [...new Set(table.flatMap(item => item.tasks))].sort()
   const tasksRowFilterTemplate = options => {
     return (
@@ -61,7 +67,6 @@ const DatasetTable = ({ data }) => {
     )
   }
 
-  console.log(table)
   return (
     <DataTable
       value={table}
@@ -115,6 +120,7 @@ const DatasetTable = ({ data }) => {
         filter
         sortable
         style={{ minWidth: '5rem', maxWidth: '10rem' }}
+        body={nLanguagesBodyTemplate}
       />
     </DataTable>
   )

frontend/src/components/LanguageTable.js

@@ -14,7 +14,8 @@ const LanguageTable = ({ data }) => {
   })
   const table = data.language_table
 
-  const families = [...new Set(table.map(item => item.family))]
+  const families = [...new Set(table.map(item => item.family))].slice(0, 10)
+  families.push("Other")
   const familyRowFilterTemplate = options => {
     return (
       <MultiSelect
@@ -37,10 +38,14 @@ const LanguageTable = ({ data }) => {
       return ''
     } else if (population < 1000) {
       return population.toFixed(0) + ''
-    } else if (population < 1000 * 1000) {
+    } else if (population < 10 * 1000) {
       return (population / 1000).toFixed(1) + 'K'
-    } else if (population < 1000 * 1000 * 1000) {
+    } else if (population < 1000 * 1000) {
+      return (population / 1000).toFixed(0) + 'K'
+    } else if (population < 10 * 1000 * 1000) {
       return (population / 1000 / 1000).toFixed(1) + 'M'
+    }else if (population < 1000 * 1000 * 1000) {
+      return (population / 1000 / 1000).toFixed(0) + 'M'
     } else {
       return (population / 1000 / 1000 / 1000).toFixed(1) + 'B'
     }
@@ -48,8 +53,8 @@ const LanguageTable = ({ data }) => {
 
   const SliderWithLabel = ({ value, onChange }) => {
     const p = 10
-    const min = 2
-    const max = 12
+    const min = 4
+    const max = 9.3
     const start = value === null ? min : Math.log(value[0]) / Math.log(p)
     const stop = value === null ? max : Math.log(value[1]) / Math.log(p)
     const [_value, _setValue] = useState([start, stop])
@@ -99,7 +104,7 @@ const LanguageTable = ({ data }) => {
 
   const speakerBodyTemplate = rowData => {
     const populationStr = formatPopulation(rowData.speakers)
-    return <div style={{ textAlign: 'right' }}>{populationStr}</div>
+    return <div style={{ textAlign: 'center' }}>{populationStr}</div>
   }
 
   const languageBodyTemplate = rowData => {
@@ -136,7 +141,7 @@ const LanguageTable = ({ data }) => {
       />
       <Column
         field='speakers'
-        header='Speakers'
+        header={<i className='pi pi-users' title='Speakers' />}
         body={speakerBodyTemplate}
         filter
         filterElement={speakerFilterTemplate}

frontend/src/components/ModelTable.js

@@ -103,11 +103,21 @@ const ModelTable = ({ data }) => {
 
   const sizeBodyTemplate = rowData => {
     const sizeStr = formatSize(rowData.size)
-    return <div style={{ textAlign: 'right' }}>{sizeStr}</div>
+    return <div style={{ textAlign: 'center' }}>{sizeStr}</div>
   }
 
   const modelBodyTemplate = rowData => {
-    return <div style={{ fontWeight: 'bold', height: '100%' }}>{rowData.model}</div>
+    return (
+      <div style={{ fontWeight: 'bold', height: '100%' }}>{rowData.model}</div>
+    )
+  }
+
+  const typeBodyTemplate = rowData => {
+    return rowData.type === 'Open' ? (
+      <i className='pi pi-lock-open' title='Open weights' />
+    ) : (
+      <i className='pi pi-lock' title='API only' />
+    )
   }
 
   const scoreBodyTemplate = (field, options = {}) => {
@@ -132,11 +142,7 @@ const ModelTable = ({ data }) => {
       id='model-table'
     >
       <Column field='rank' body={rankBodyTemplate} />
-      <Column
-        field='provider'
-        header='Provider'
-        style={{ minWidth: '5rem' }}
-      />
+      <Column field='provider' header='Provider' style={{ minWidth: '5rem' }} />
       <Column
         field='model'
         header='Model'
@@ -146,15 +152,15 @@ const ModelTable = ({ data }) => {
       />
       <Column
         field='type'
-        header='Type'
+        header={<i className='pi pi-unlock' title='Open weights / API only' />}
         filter
         filterElement={typeRowFilterTemplate}
         showFilterMatchModes={false}
-        style={{ minWidth: '10rem' }}
+        body={typeBodyTemplate}
       />
       <Column
         field='size'
-        header='Size'
+        header={null}
         filter
         filterElement={sizeFilterTemplate}
         showFilterMatchModes={false}

frontend/src/index.css

@@ -19,6 +19,7 @@ html, body, #root {
 
 .p-datatable-wrapper {
   scrollbar-color: #f0f0f0 rgba(0, 0, 0, 0);
+  border-radius: 0 0 10px 10px;  
 }
 
 #model-table {