fix filtered data

src/App.tsx

@@ -32,7 +32,7 @@ const App: React.FC = () => {
 
   useEffect(() => {
     setData(mockData)
-    setComparisonModels(['OpenAI:GPT-4o', 'Anthropic:Claude 3.5 (Sonnet)', 'Google Vertex AI:Gemini 1.5 Pro'])
+    setComparisonModels(['OpenAI:GPT-4o', 'Anthropic:Claude 3.5 (Sonnet)', 'Google:Gemini 1.5 Pro'])
   }, [])
 
   const calculatePrice = (price: number, tokens: number): number => {
@@ -42,15 +42,15 @@ const App: React.FC = () => {
   const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
     return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
   }
-  const filteredData = data.filter((provider) => {
-    if (selectedProviders.length > 0 && !selectedProviders.includes(provider.provider)) {
-      return false
-    }
-    if (selectedModels.length > 0) {
-      return provider.models.some((model) => selectedModels.includes(model.name))
-    }
-    return true
-  })
+  const filteredData = data
+    .filter((provider) => selectedProviders.length === 0 || selectedProviders.includes(provider.provider))
+    .map((provider) => ({
+      ...provider,
+      models: provider.models.filter((model) => selectedModels.length === 0 || selectedModels.includes(model.name)),
+    }))
+    .filter((provider) => provider.models.length > 0)
+
+  console.log(filteredData)
 
   const toggleProviderExpansion = (provider: string) => {
     setExpandedProviders((prev) => (prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]))
@@ -169,7 +169,13 @@ const App: React.FC = () => {
                   options={
                     data
                       .flatMap((provider) => provider.models)
-                      .map((model) => ({ label: model.name, value: model.name })) || []
+                      .map((model) => ({ label: model.name, value: model.name }))
+                      .reduce((acc, curr) => {
+                        if (acc.findIndex((m) => m.label === curr.label) === -1) {
+                          acc.push(curr)
+                        }
+                        return acc
+                      }, []) || []
                   }
                   defaultValue={selectedModels}
                   onValueChange={setSelectedModels}

src/lib/data.ts

@@ -21,7 +21,7 @@ export const mockData: Provider[] = [
     ],
   },
   {
-    provider: 'Google Vertex AI',
+    provider: 'Google',
     uri: 'https://ai.google.dev/pricing?hl=en',
     models: [
       { name: 'Gemini 1.5 Pro', inputPrice: 3.5, outputPrice: 7.0 },
@@ -42,8 +42,8 @@ export const mockData: Provider[] = [
     models: [
       { name: 'mistral-large-2402', inputPrice: 4.0, outputPrice: 12.0 },
       { name: 'codestral-2405', inputPrice: 1.0, outputPrice: 3.0 },
-      { name: 'open-mixtral-8x22b', inputPrice: 2.0, outputPrice: 6.0 },
-      { name: 'open-mixtral-8x7b', inputPrice: 0.7, outputPrice: 0.7 },
+      { name: 'Mixtral 8x22B', inputPrice: 2.0, outputPrice: 6.0 },
+      { name: 'Mixtral 8x7B', inputPrice: 0.7, outputPrice: 0.7 },
     ],
   },
   {
@@ -58,7 +58,7 @@ export const mockData: Provider[] = [
     provider: 'Anyscale',
     uri: 'https://www.anyscale.com/pricing-detail',
     models: [
-      { name: 'Mistral-small (8x7B)', inputPrice: 0.5, outputPrice: 0.5 },
+      { name: 'Mixtral 8x7B', inputPrice: 0.5, outputPrice: 0.5 },
       { name: 'Llama 3 70b', inputPrice: 1.0, outputPrice: 1.0 },
     ],
   },
@@ -67,7 +67,7 @@ export const mockData: Provider[] = [
     provider: 'Together.AI',
     uri: 'https://www.together.ai/pricing',
     models: [
-      { name: 'Mistral-small (8x7B)', inputPrice: 0.6, outputPrice: 0.6 },
+      { name: 'Mixtral 8x7B', inputPrice: 0.6, outputPrice: 0.6 },
       { name: 'Llama 3 70b', inputPrice: 0.9, outputPrice: 0.9 },
     ],
   },