x

src/App.tsx

@@ -29,10 +29,11 @@ const App: React.FC = () => {
   const [selectedProviders, setSelectedProviders] = useState<string[]>([])
   const [selectedModels, setSelectedModels] = useState<string[]>([])
   const [expandedProviders, setExpandedProviders] = useState<string[]>([])
+  const [sortConfig, setSortConfig] = useState<{ key: string, direction: string } | null>(null)
 
   useEffect(() => {
     setData(mockData)
-    setComparisonModels(['OpenAI:GPT-4o', 'Anthropic:Claude 3.5 (Sonnet)', 'Google:Gemini 1.5 Pro'])
+    setComparisonModels(['OpenAI:GPT-4o-mini', 'Anthropic:Claude 3.5 (Sonnet)', 'Google:Gemini 1.5 Pro'])
   }, [])
 
   const calculatePrice = (price: number, tokens: number): number => {
@@ -50,6 +51,45 @@ const App: React.FC = () => {
     }))
     .filter((provider) => provider.models.length > 0)
 
+  const sortedData = React.useMemo(() => {
+    let sortableData = [...filteredData];
+    if (sortConfig !== null) {
+      if (sortConfig.key === 'provider') {
+        sortableData.sort((a, b) => {
+          if (a.provider < b.provider) {
+            return sortConfig.direction === 'ascending' ? -1 : 1;
+          }
+          if (a.provider > b.provider) {
+            return sortConfig.direction === 'ascending' ? 1 : -1;
+          }
+          return 0;
+        });
+      } else if (sortConfig.key === 'model' || sortConfig.key === 'inputPrice' || sortConfig.key === 'outputPrice') {
+        sortableData.forEach(provider => {
+          provider.models.sort((a, b) => {
+            if (a[sortConfig.key] < b[sortConfig.key]) {
+              return sortConfig.direction === 'ascending' ? -1 : 1;
+            }
+            if (a[sortConfig.key] > b[sortConfig.key]) {
+              return sortConfig.direction === 'ascending' ? 1 : -1;
+            }
+            return 0;
+          });
+        });
+      }
+    }
+    return sortableData;
+  }, [filteredData, sortConfig]);
+
+  const requestSort = (key: string) => {
+    let direction = 'ascending';
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
+      direction = 'descending';
+    }
+    setSortConfig({ key, direction });
+  };
+
+
   console.log(filteredData)
 
   const toggleProviderExpansion = (provider: string) => {
@@ -145,10 +185,26 @@ const App: React.FC = () => {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Provider</TableHead>
-              <TableHead>Model</TableHead>
-              <TableHead>Input Price (per 1M tokens)</TableHead>
-              <TableHead>Output Price (per 1M tokens)</TableHead>
+              <TableHead>
+                <button type="button" onClick={() => requestSort('provider')}>
+                  Provider {sortConfig?.key === 'provider' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                </button>
+              </TableHead>
+              <TableHead>
+                <button type="button" onClick={() => requestSort('model')}>
+                  Model {sortConfig?.key === 'model' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                </button>
+              </TableHead>
+              <TableHead>
+                <button type="button" onClick={() => requestSort('inputPrice')}>
+                  Input Price (per 1M tokens) {sortConfig?.key === 'inputPrice' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                </button>
+              </TableHead>
+              <TableHead>
+                <button type="button" onClick={() => requestSort('outputPrice')}>
+                  Output Price (per 1M tokens) {sortConfig?.key === 'outputPrice' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                </button>
+              </TableHead>
               <TableHead>Total Price</TableHead>
               {comparisonModels.map((model) => (
                 <TableHead key={model} colSpan={2}>
@@ -191,7 +247,7 @@ const App: React.FC = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredData.flatMap((provider) =>
+            {sortedData.flatMap((provider) =>
               provider.models.map((model) => (
                 <TableRow key={`${provider.provider}-${model.name}`}>
                   <TableCell>
@@ -217,13 +273,12 @@ const App: React.FC = () => {
                     return [
                       <TableCell
                         key={`${comparisonModel}-input`}
-                        className={`${
-                          parseFloat(calculateComparison(model.inputPrice, comparisonModelData.inputPrice)) < 0
-                            ? 'bg-green-100'
-                            : parseFloat(calculateComparison(model.inputPrice, comparisonModelData.inputPrice)) > 0
+                        className={`${parseFloat(calculateComparison(model.inputPrice, comparisonModelData.inputPrice)) < 0
+                          ? 'bg-green-100'
+                          : parseFloat(calculateComparison(model.inputPrice, comparisonModelData.inputPrice)) > 0
                             ? 'bg-red-100'
                             : ''
-                        }`}
+                          }`}
                       >
                         {`${provider.provider}:${model.name}` === comparisonModel
                           ? '0.00%'
@@ -231,13 +286,12 @@ const App: React.FC = () => {
                       </TableCell>,
                       <TableCell
                         key={`${comparisonModel}-output`}
-                        className={`${
-                          parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) < 0
-                            ? 'bg-green-100'
-                            : parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) > 0
+                        className={`${parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) < 0
+                          ? 'bg-green-100'
+                          : parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) > 0
                             ? 'bg-red-100'
                             : ''
-                        }`}
+                          }`}
                       >
                         {`${provider.provider}:${model.name}` === comparisonModel
                           ? '0.00%'
@@ -250,6 +304,9 @@ const App: React.FC = () => {
             )}
           </TableBody>
         </Table>
+
+
+
       </CardContent>
     </Card>
   )

src/lib/data.ts

@@ -6,7 +6,7 @@ export const mockData: Provider[] = [
     uri: 'https://openai.com/api/pricing/',
     models: [
       { name: 'GPT-4o', inputPrice: 5.0, outputPrice: 15.0 },
-      { name: 'GPT-4o-mini', inputPrice: 0.15, outputPrice: 0.6 },
+      { name: 'GPT-4o-mini', inputPrice: 0.15, outputPrice: 0.60 },
       { name: 'GPT-4 (8K)', inputPrice: 30.0, outputPrice: 60.0 },
       { name: 'GPT-4 Turbo', inputPrice: 10.0, outputPrice: 30.0 },
       { name: 'GPT-3.5-turbo', inputPrice: 0.5, outputPrice: 1.5 },