x

src/App.tsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-
 import { mockData } from "@/lib/data";
 
 import { ComparisonSelector } from "@/components/ComparisonSelector";
@@ -42,12 +40,9 @@ const App: React.FC = () => {
   const [selectedModels, setSelectedModels] = useState<string[]>([]);
   const [expandedProviders, setExpandedProviders] = useState<string[]>([]);
   const [tokenCalculation, setTokenCalculation] = useState<string>("million");
-  const [linkProviderModel, setLinkProviderModel] = useState<boolean>(false);
   const [benchmarkComparisonMetrics, setBenchmarkComparisonMetrics] = useState<string[]>([]);
   const [selectedBenchmarkProviders, setSelectedBenchmarkProviders] = useState<string[]>([]);
   const [selectedBenchmarkModels, setSelectedBenchmarkModels] = useState<string[]>([]);
-  const [linkBenchmarkProviderModel, setLinkBenchmarkProviderModel] = useState<boolean>(false);
-
 
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FlattenedModel;
@@ -65,74 +60,70 @@ const App: React.FC = () => {
   }, []);
 
 
-const flattenDataFromPricing = (data: Provider[]): FlattenedModel[] =>
-  data.flatMap((provider) =>
-    provider.models.map((model) => ({
-      provider: provider.provider,
-      uri: provider.uri,
-      ...model,
-      benchmark: {},
-    }))
-  );
+  const flattenDataFromPricing = (data: Provider[]): FlattenedModel[] =>
+    data.flatMap((provider) =>
+      provider.models.map((model) => ({
+        provider: provider.provider,
+        uri: provider.uri,
+        ...model,
+        benchmark: {},
+      }))
+    );
 
-const flattenDataFromBenchmarks = (): FlattenedModel[] =>
-  benchmarkData.map((b) => ({
-    provider: b.provider ?? "Unknown",
-    uri: b.source, // placeholder or use an optional `b.link` if available
-    name: b.model,
-    inputPrice: b.inputPrice,
-    outputPrice: b.outputPrice,
-    benchmark: b.benchmark ?? {},
-  }));
+  const flattenDataFromBenchmarks = (): FlattenedModel[] =>
+    benchmarkData.map((b) => ({
+      provider: b.provider ?? "Unknown",
+      uri: b.source, // placeholder or use an optional `b.link` if available
+      name: b.model,
+      inputPrice: b.inputPrice,
+      outputPrice: b.outputPrice,
+      benchmark: b.benchmark ?? {},
+    }));
 
 
 
   const filteredData = useMemo(() => {
-    if (!selectedProviders.length && !selectedModels.length && !linkProviderModel) return data;
+    if (!selectedProviders.length && !selectedModels.length) return data;
 
     return data
       .filter((p) => !selectedProviders.length || selectedProviders.includes(p.provider))
       .map((p) => ({
         ...p,
         models: p.models.filter((m) => {
-          if (linkProviderModel && !selectedModels.length) return selectedProviders.includes(p.provider);
-          if (!linkProviderModel && !selectedModels.length) return !selectedProviders.length || selectedProviders.includes(p.provider);
+          if (!selectedModels.length) return selectedProviders.includes(p.provider);
+          if (!selectedModels.length) return !selectedProviders.length || selectedProviders.includes(p.provider);
           return selectedModels.includes(m.name);
         }),
       }))
       .filter((p) => p.models.length > 0);
-  }, [data, selectedProviders, selectedModels, linkProviderModel]);
+  }, [data, selectedProviders, selectedModels]);
 
-const benchmarkedModels = useMemo(() => {
-  return flattenDataFromBenchmarks();
-}, []);
+  const benchmarkedModels = useMemo(() => {
+    return flattenDataFromBenchmarks();
+  }, []);
 
 
 
-const filteredBenchmarkedModels = useMemo(() => {
-  return benchmarkedModels.filter((model) => {
-    const providerMatch =
-      selectedBenchmarkProviders.length === 0 || selectedBenchmarkProviders.includes(model.provider);
-    const modelMatch =
-      selectedBenchmarkModels.length === 0 || selectedBenchmarkModels.includes(model.name);
+  const filteredBenchmarkedModels = useMemo(() => {
+    return benchmarkedModels.filter((model) => {
+      const providerMatch =
+        selectedBenchmarkProviders.length === 0 || selectedBenchmarkProviders.includes(model.provider);
+      const modelMatch =
+        selectedBenchmarkModels.length === 0 || selectedBenchmarkModels.includes(model.name);
 
-    if (linkBenchmarkProviderModel) {
-      return providerMatch && modelMatch;
-    }
+      // When not linking, allow filtering by either
+      if (selectedBenchmarkProviders.length > 0 && selectedBenchmarkModels.length > 0) {
+        return providerMatch || modelMatch;
+      }
 
-    // When not linking, allow filtering by either
-    if (selectedBenchmarkProviders.length > 0 && selectedBenchmarkModels.length > 0) {
-      return providerMatch || modelMatch;
-    }
+      return providerMatch && modelMatch; // this handles the case where one or both are empty
+    });
+  }, [
+    benchmarkedModels,
+    selectedBenchmarkProviders,
+    selectedBenchmarkModels,
 
-    return providerMatch && modelMatch; // this handles the case where one or both are empty
-  });
-}, [
-  benchmarkedModels,
-  selectedBenchmarkProviders,
-  selectedBenchmarkModels,
-  linkBenchmarkProviderModel,
-]);
+  ]);
 
 
   const sortedBenchmarkedModels = useMemo(() => {
@@ -159,21 +150,49 @@ const filteredBenchmarkedModels = useMemo(() => {
     });
   }, [filteredBenchmarkedModels, benchmarkSortConfig]);
 
+  const pricingProviders = useMemo(() => {
+    const grouped: Record<string, FlattenedModel[]> = {};
+
+    flattenDataFromPricing(data).forEach((model) => {
+      const key = model.provider;
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(model);
+    });
+
+    return Object.entries(grouped).map(([provider, models]) => ({
+      provider,
+      uri: models[0]?.uri ?? "#",
+      models: models.map(({ name, inputPrice, outputPrice }) => ({
+        name,
+        inputPrice,
+        outputPrice,
+      })),
+    }));
+  }, [data]);
+
 
   const benchmarkProviders = useMemo(() => {
-    const modelsInBenchmark = new Set(
-      benchmarkedModels.map((m) => `${m.provider}:${m.name}`)
-    );
+    const grouped: Record<string, FlattenedModel[]> = {};
+
+    benchmarkedModels.forEach((model) => {
+      const key = model.provider;
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(model);
+    });
+
+    return Object.entries(grouped).map(([provider, models]) => ({
+      provider,
+      uri: models[0]?.uri ?? "#",
+      models: models.map(({ name, inputPrice, outputPrice }) => ({
+        name,
+        inputPrice,
+        outputPrice,
+      })),
+    }));
+  }, [benchmarkedModels]);
+
+
 
-    return data
-      .map((provider) => ({
-        ...provider,
-        models: provider.models.filter((model) =>
-          modelsInBenchmark.has(`${provider.provider}:${model.name}`)
-        ),
-      }))
-      .filter((p) => p.models.length > 0);
-  }, [data, benchmarkedModels]);
 
 
 
@@ -262,17 +281,11 @@ const filteredBenchmarkedModels = useMemo(() => {
           </div>
         </div>
 
-        {/* Provider–Model Toggle */}
-        <div className="flex items-center space-x-2 mb-6">
-          <Switch id="linkProviderModel" checked={linkProviderModel} onCheckedChange={setLinkProviderModel} />
-          <label htmlFor="linkProviderModel" className="text-sm">Link Provider and Model</label>
-        </div>
-
         {/* Pricing Table */}
         <h2 className="text-lg font-semibold mb-2">Pricing Table</h2>
-         <PricingTable
+        <PricingTable
           data={sortedFlattenedData}
-          providers={data}
+          providers={pricingProviders}
           selectedProviders={selectedProviders}
           selectedModels={selectedModels}
           onProviderChange={setSelectedProviders}
@@ -283,8 +296,7 @@ const filteredBenchmarkedModels = useMemo(() => {
           tokenCalculation={tokenCalculation}
           requestSort={requestSort}
           sortConfig={sortConfig}
-          linkProviderModel={linkProviderModel}
-        />  
+        />
 
 
         {/* Benchmark Table */}
@@ -299,10 +311,6 @@ const filteredBenchmarkedModels = useMemo(() => {
           }
         />
 
-
-
-
-
         <h2 className="text-lg font-semibold mt-12 mb-2">Benchmark Table</h2>
         <BenchmarkTable
           data={sortedBenchmarkedModels}
@@ -320,8 +328,6 @@ const filteredBenchmarkedModels = useMemo(() => {
           selectedModels={selectedBenchmarkModels}
           onProviderChange={setSelectedBenchmarkProviders}
           onModelChange={setSelectedBenchmarkModels}
-          linkProviderModel={linkBenchmarkProviderModel}
-          onLinkToggle={setLinkBenchmarkProviderModel}
         />
 
 

src/components/BenchmarkTable.tsx

@@ -8,7 +8,6 @@ import {
     TableCell,
 } from "@/components/ui/table";
 import { MultiSelect } from "@/components/ui/multi-select";
-import { Switch } from "@/components/ui/switch";
 import { Provider, FlattenedModel } from "@/App";
 
 interface BenchmarkTableProps {
@@ -24,10 +23,9 @@ interface BenchmarkTableProps {
     selectedModels: string[];
     onProviderChange: (values: string[]) => void;
     onModelChange: (values: string[]) => void;
-    linkProviderModel: boolean;
-    onLinkToggle: (checked: boolean) => void;
 }
 
+
 export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({
     data,
     comparisonMetrics,
@@ -38,8 +36,7 @@ export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({
     selectedModels,
     onProviderChange,
     onModelChange,
-    linkProviderModel,
-    onLinkToggle,
+
 }) => {
     const benchmarkMetrics = React.useMemo(() => {
         if (!comparisonMetrics || comparisonMetrics.length === 0) return [];
@@ -67,12 +64,14 @@ export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({
             }))
         );
 
-        const filtered = linkProviderModel
-            ? flat.filter((m) => selectedProviders.includes(m.provider))
-            : flat;
+const filtered = flat.filter((m) =>
+  !selectedProviders.length || selectedProviders.includes(m.provider)
+);
+
 
         return Array.from(new Map(filtered.map((m) => [m.value, m])).values());
-    }, [allProviders, selectedProviders, linkProviderModel]);
+    }, [allProviders, selectedProviders]);
+
 
     return (
         <>
@@ -93,16 +92,7 @@ export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({
                         onValueChange={onModelChange}
                     />
                 </div>
-                <div className="flex items-center pt-6 space-x-2">
-                    <Switch
-                        id="linkBenchmarkProviderModel"
-                        checked={linkProviderModel}
-                        onCheckedChange={onLinkToggle}
-                    />
-                    <label htmlFor="linkBenchmarkProviderModel" className="text-sm">
-                        Link Provider and Model
-                    </label>
-                </div>
+
             </div>
 
             <Table>

src/components/PricingTable.tsx

@@ -26,7 +26,7 @@ interface PricingTableProps {
     key: keyof FlattenedModel;
     direction: string;
   } | null;
-  linkProviderModel: boolean;
+
 }
 
 export const PricingTable: React.FC<PricingTableProps> = ({
@@ -42,7 +42,7 @@ export const PricingTable: React.FC<PricingTableProps> = ({
   tokenCalculation,
   requestSort,
   sortConfig,
-  linkProviderModel,
+
 }) => {
   const calculatePrice = (price: number, tokens: number): number => {
     let multiplier = 1;
@@ -66,9 +66,10 @@ export const PricingTable: React.FC<PricingTableProps> = ({
       }))
     );
 
-    const filtered = linkProviderModel
-      ? flatModels.filter((m) => selectedProviders.includes(m.provider))
-      : flatModels;
+const filtered = flatModels.filter((m) =>
+  !selectedProviders.length || selectedProviders.includes(m.provider)
+);
+
 
     // Remove duplicates
     return Array.from(new Map(filtered.map((m) => [m.value, m])).values());