Store filter state globally

frontend/src/App.js

@@ -8,13 +8,23 @@ 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 [filters, setFilters] = useState([])
+  const [languageFilters, setLanguageFilters] = useState({
+    language_name: { value: null, matchMode: FilterMatchMode.EQUALS }, // via global search
+    family: { value: null, matchMode: FilterMatchMode.IN },
+    speakers: { value: null, matchMode: FilterMatchMode.BETWEEN }
+  })
+  const [modelFilters, setModelFilters] = useState({
+    model: { value: null, matchMode: FilterMatchMode.ENDS_WITH }, // via global search
+    type: { value: null, matchMode: FilterMatchMode.IN },
+    size: { value: null, matchMode: FilterMatchMode.BETWEEN }
+  })
   useEffect(() => {
     fetch('/results.json')
       .then(response => {
@@ -93,7 +103,25 @@ function App () {
           </p>
           <AutoComplete
             allSuggestions={allSuggestions}
-            onComplete={item => setFilters(prevFilters => [item])}
+            onComplete={item => {
+              const languageValue =
+                item.type === 'Language' ? item.detail : null
+              const modelValue = item.type === 'Model' ? item.value : null
+              setLanguageFilters(prevFilters => ({
+                ...prevFilters,
+                language_name: {
+                  value: languageValue,
+                  matchMode: FilterMatchMode.EQUALS
+                }
+              }))
+              setModelFilters(prevFilters => ({
+                ...prevFilters,
+                model: {
+                  value: modelValue,
+                  matchMode: FilterMatchMode.ENDS_WITH
+                }
+              }))
+            }}
           />
         </header>
         <main
@@ -121,7 +149,11 @@ function App () {
                   maxWidth: 'min(100vw, 800px)'
                 }}
               >
-                <ModelTable data={data} />
+                <ModelTable
+                  data={data}
+                  filters={modelFilters}
+                  setFilters={setModelFilters}
+                />
               </div>
               <div
                 style={{
@@ -129,7 +161,11 @@ function App () {
                   maxWidth: 'min(100vw, 800px)'
                 }}
               >
-                <LanguageTable data={data} />
+                <LanguageTable
+                  data={data}
+                  filters={languageFilters}
+                  setFilters={setLanguageFilters}
+                />
               </div>
               <div
                 style={{

frontend/src/components/AutoComplete.js

@@ -44,7 +44,7 @@ const AutoComplete = ({ allSuggestions, onComplete }) => {
       onChange={e => setAutoComplete(e.value)}
       onSelect={e => {
         setAutoComplete(e.value.value)
-        onComplete(e.value.value)
+        onComplete(e.value)
       }}
       suggestions={suggestions}
       completeMethod={search}

frontend/src/components/LanguageTable.js

@@ -6,12 +6,7 @@ import { useState, useEffect } from 'react'
 import { Slider } from 'primereact/slider'
 import ScoreField from './ScoreField'
 
-const LanguageTable = ({ data }) => {
-  const [filters, setFilters] = useState({
-    language_name: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    family: { value: null, matchMode: FilterMatchMode.IN },
-    speakers: { value: null, matchMode: FilterMatchMode.BETWEEN },
-  })
+const LanguageTable = ({ data, filters, setFilters }) => {
   const table = data.language_table
 
   const families = [...new Set(table.map(item => item.family))].slice(0, 10)

frontend/src/components/ModelTable.js

@@ -7,13 +7,7 @@ import Medal from './Medal'
 import { Slider } from 'primereact/slider'
 import ScoreField from './ScoreField'
 
-const ModelTable = ({ data }) => {
-  const [filters, setFilters] = useState({
-    provider: { value: null, matchMode: FilterMatchMode.IN },
-    model: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    type: { value: null, matchMode: FilterMatchMode.IN },
-    size: { value: null, matchMode: FilterMatchMode.BETWEEN }
-  })
+const ModelTable = ({ data, filters, setFilters }) => {
   const table = data.model_table
   const rankBodyTemplate = rowData => {
     return <Medal rank={rowData.rank} />