commit aa921ba9b2b0dcb10ac72d6cb707b94e03df15f6 · indexx.dev/plc-bench

+93 -70

src/components/BenchmarkTable.tsx

···

       15
       15
        
       }

     

       16
       16
        
       

     

       17
       17
        
       export const BenchmarkTable = ({ results }: BenchmarkTableProps) => {

     

       18
       18
       -
         // Sort by response time (fastest first)

     

       18
       18
       +
         // Sort by average response time (fastest first)

     

       19
       19
        
         const sortedResults = [...results].sort((a, b) => {

     

       20
       20
        
           if (a.status === "error" && b.status === "success") return 1;

     

       21
       21
        
           if (a.status === "success" && b.status === "error") return -1;

     

       22
       22
       -
           return a.responseTime - b.responseTime;

     

       22
       22
       +
           return a.avgResponseTime - b.avgResponseTime;

     

       23
       23
        
         });

     

       24
       24
        
       

     

       25
       25
       +
         // Calculate overall average across all successful attempts

     

       26
       26
       +
         const allSuccessfulAttempts = sortedResults.flatMap((r) =>

     

       27
       27
       +
           r.attempts.filter((a) => a.status === "success")

     

       28
       28
       +
         );

     

       29
       29
       +
         const overallAvg =

     

       30
       30
       +
           allSuccessfulAttempts.length > 0

     

       31
       31
       +
             ? allSuccessfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       32
       32
       +
               allSuccessfulAttempts.length

     

       33
       33
       +
             : 0;

     

       34
       34
       +
       

     

       25
       35
        
         return (

     

       26
       26
       -
           <div className="rounded-lg border border-border bg-card overflow-hidden">

     

       27
       27
       -
             <Table>

     

       28
       28
       -
               <TableHeader>

     

       29
       29
       -
                 <TableRow className="bg-muted/50">

     

       30
       30
       -
                   <TableHead className="font-semibold">Mirror</TableHead>

     

       31
       31
       -
                   <TableHead className="font-semibold">URL</TableHead>

     

       32
       32
       -
                   <TableHead className="font-semibold text-right">Response Time</TableHead>

     

       33
       33
       -
                   <TableHead className="font-semibold">Status</TableHead>

     

       34
       34
       -
                   <TableHead className="font-semibold">HTTP Code</TableHead>

     

       35
       35
       -
                 </TableRow>

     

       36
       36
       -
               </TableHeader>

     

       37
       37
       -
               <TableBody>

     

       38
       38
       -
                 {sortedResults.map((result, index) => (

     

       39
       39
       -
                   <TableRow key={index} className="hover:bg-muted/30 transition-colors">

     

       40
       40
       -
                     <TableCell className="font-medium">{result.mirrorName}</TableCell>

     

       41
       41
       -
                     <TableCell className="font-mono text-sm text-muted-foreground">

     

       42
       42
       -
                       {result.mirrorUrl}

     

       43
       43
       -
                     </TableCell>

     

       44
       44
       -
                     <TableCell className="text-right font-mono text-sm">

     

       45
       45
       -
                       {result.status === "success" ? (

     

       46
       46
       -
                         <span className="text-foreground font-medium">

     

       47
       47
       -
                           {result.responseTime.toFixed(0)}ms

     

       48
       48
       -
                         </span>

     

       49
       49
       -
                       ) : (

     

       50
       50
       -
                         <span className="text-muted-foreground">—</span>

     

       51
       51
       -
                       )}

     

       52
       52
       -
                     </TableCell>

     

       53
       53
       -
                     <TableCell>

     

       54
       54
       -
                       {result.status === "success" ? (

     

       55
       55
       -
                         <Badge

     

       56
       56
       -
                           variant="outline"

     

       57
       57
       -
                           className="bg-success/10 text-success border-success/20 gap-1"

     

       58
       58
       -
                         >

     

       59
       59
       -
                           <CheckCircle2 className="w-3 h-3" />

     

       60
       60
       -
                           Success

     

       61
       61
       -
                         </Badge>

     

       62
       62
       -
                       ) : (

     

       63
       63
       -
                         <Badge

     

       64
       64
       -
                           variant="outline"

     

       65
       65
       -
                           className="bg-destructive/10 text-destructive border-destructive/20 gap-1"

     

       66
       66
       -
                         >

     

       67
       67
       -
                           <XCircle className="w-3 h-3" />

     

       68
       68
       -
                           Error

     

       69
       69
       -
                         </Badge>

     

       70
       70
       -
                       )}

     

       71
       71
       -
                     </TableCell>

     

       72
       72
       -
                     <TableCell className="font-mono text-sm">

     

       73
       73
       -
                       {result.statusCode ? (

     

       74
       74
       -
                         <span

     

       75
       75
       -
                           className={

     

       76
       76
       -
                             result.statusCode >= 200 && result.statusCode < 300

     

       77
       77
       -
                               ? "text-success"

     

       78
       78
       -
                               : "text-destructive"

     

       79
       79
       -
                           }

     

       80
       80
       -
                         >

     

       81
       81
       -
                           {result.statusCode}

     

       82
       82
       -
                         </span>

     

       83
       83
       -
                       ) : (

     

       84
       84
       -
                         <span className="text-muted-foreground">—</span>

     

       85
       85
       -
                       )}

     

       86
       86
       -
                     </TableCell>

     

       87
       87
       -
                   </TableRow>

     

       88
       88
       -
                 ))}

     

       89
       89
       -
               </TableBody>

     

       90
       90
       -
             </Table>

     

       91
       91
       -
             {sortedResults.length === 0 && (

     

       92
       92
       -
               <div className="text-center py-12 text-muted-foreground">

     

       93
       93
       -
                 No results yet. Enter a DID and run the benchmark.

     

       36
       36
       +
           <div className="space-y-4">

     

       37
       37
       +
             {/* Overall Average */}

     

       38
       38
       +
             {overallAvg > 0 && (

     

       39
       39
       +
               <div className="bg-primary/5 border border-primary/20 rounded-lg p-4 flex items-center justify-between">

     

       40
       40
       +
                 <span className="font-semibold text-foreground">

     

       41
       41
       +
                   Overall Average Response Time

     

       42
       42
       +
                 </span>

     

       43
       43
       +
                 <span className="text-2xl font-bold font-mono text-primary">

     

       44
       44
       +
                   {overallAvg.toFixed(0)}ms

     

       45
       45
       +
                 </span>

     

       94
       46
        
               </div>

     

       95
       47
        
             )}

     

       48
       48
       +
       

     

       49
       49
       +
             {/* Results Table */}

     

       50
       50
       +
             <div className="rounded-lg border border-border bg-card overflow-hidden">

     

       51
       51
       +
               <Table>

     

       52
       52
       +
                 <TableHeader>

     

       53
       53
       +
                   <TableRow className="bg-muted/50">

     

       54
       54
       +
                     <TableHead className="font-semibold">Implementation</TableHead>

     

       55
       55
       +
                     <TableHead className="font-semibold text-center">Attempt 1</TableHead>

     

       56
       56
       +
                     <TableHead className="font-semibold text-center">Attempt 2</TableHead>

     

       57
       57
       +
                     <TableHead className="font-semibold text-center">Attempt 3</TableHead>

     

       58
       58
       +
                     <TableHead className="font-semibold text-center">Average</TableHead>

     

       59
       59
       +
                     <TableHead className="font-semibold">Status</TableHead>

     

       60
       60
       +
                   </TableRow>

     

       61
       61
       +
                 </TableHeader>

     

       62
       62
       +
                 <TableBody>

     

       63
       63
       +
                   {sortedResults.map((result, index) => (

     

       64
       64
       +
                     <TableRow key={index} className="hover:bg-muted/30 transition-colors">

     

       65
       65
       +
                       <TableCell className="font-mono text-sm font-medium">

     

       66
       66
       +
                         {result.mirrorUrl}

     

       67
       67
       +
                       </TableCell>

     

       68
       68
       +
                       {result.attempts.map((attempt, attemptIndex) => (

     

       69
       69
       +
                         <TableCell key={attemptIndex} className="text-center font-mono text-sm">

     

       70
       70
       +
                           {attempt.status === "success" ? (

     

       71
       71
       +
                             <span className="text-foreground">

     

       72
       72
       +
                               {attempt.responseTime.toFixed(0)}ms

     

       73
       73
       +
                             </span>

     

       74
       74
       +
                           ) : (

     

       75
       75
       +
                             <span className="text-destructive">

     

       76
       76
       +
                               <XCircle className="w-4 h-4 inline" />

     

       77
       77
       +
                             </span>

     

       78
       78
       +
                           )}

     

       79
       79
       +
                         </TableCell>

     

       80
       80
       +
                       ))}

     

       81
       81
       +
                       <TableCell className="text-center font-mono text-sm">

     

       82
       82
       +
                         {result.status === "success" ? (

     

       83
       83
       +
                           <span className="font-bold text-primary text-base">

     

       84
       84
       +
                             {result.avgResponseTime.toFixed(0)}ms

     

       85
       85
       +
                           </span>

     

       86
       86
       +
                         ) : (

     

       87
       87
       +
                           <span className="text-muted-foreground">—</span>

     

       88
       88
       +
                         )}

     

       89
       89
       +
                       </TableCell>

     

       90
       90
       +
                       <TableCell>

     

       91
       91
       +
                         {result.status === "success" ? (

     

       92
       92
       +
                           <Badge

     

       93
       93
       +
                             variant="outline"

     

       94
       94
       +
                             className="bg-success/10 text-success border-success/20 gap-1"

     

       95
       95
       +
                           >

     

       96
       96
       +
                             <CheckCircle2 className="w-3 h-3" />

     

       97
       97
       +
                             Success

     

       98
       98
       +
                           </Badge>

     

       99
       99
       +
                         ) : (

     

       100
       100
       +
                           <Badge

     

       101
       101
       +
                             variant="outline"

     

       102
       102
       +
                             className="bg-destructive/10 text-destructive border-destructive/20 gap-1"

     

       103
       103
       +
                           >

     

       104
       104
       +
                             <XCircle className="w-3 h-3" />

     

       105
       105
       +
                             Error

     

       106
       106
       +
                           </Badge>

     

       107
       107
       +
                         )}

     

       108
       108
       +
                       </TableCell>

     

       109
       109
       +
                     </TableRow>

     

       110
       110
       +
                   ))}

     

       111
       111
       +
                 </TableBody>

     

       112
       112
       +
               </Table>

     

       113
       113
       +
               {sortedResults.length === 0 && (

     

       114
       114
       +
                 <div className="text-center py-12 text-muted-foreground">

     

       115
       115
       +
                   No results yet. Enter a DID and run the benchmark.

     

       116
       116
       +
                 </div>

     

       117
       117
       +
               )}

     

       118
       118
       +
             </div>

     

       96
       119
        
           </div>

     

       97
       120
        
         );

     

       98
       121
        
       };

+3 -13

src/config/mirrors.ts

···

       1
       1
        
       export interface Mirror {

     

       2
       2
       -
         name: string;

     

       3
       2
        
         url: string;

     

       4
       3
        
       }

     

       5
       4
        
       

     

       6
       5
        
       export const mirrors: Mirror[] = [

     

       7
       7
       -
         {

     

       8
       8
       -
           name: "plc.directory",

     

       9
       9
       -
           url: "https://plc.directory",

     

       10
       10
       -
         },

     

       11
       11
       -
         {

     

       12
       12
       -
           name: "plc.bsky-mirror.dev",

     

       13
       13
       -
           url: "https://plc.bsky-mirror.dev",

     

       14
       14
       -
         },

     

       15
       15
       -
         {

     

       16
       16
       -
           name: "plc.us-east.host.bsky.network",

     

       17
       17
       -
           url: "https://plc.us-east.host.bsky.network",

     

       18
       18
       -
         },

     

       6
       6
       +
         { url: "https://plc.directory" },

     

       7
       7
       +
         { url: "https://plc.bsky-mirror.dev" },

     

       8
       8
       +
         { url: "https://plc.us-east.host.bsky.network" },

     

       19
       9
        
       ];

+1 -1

src/pages/Index.tsx

···

       85
       85
        
                     </div>

     

       86
       86
        
                   </div>

     

       87
       87
        
                   <div className="text-sm text-muted-foreground">

     

       88
       88
       -
                     Testing {mirrors.length} mirrors: {mirrors.map(m => m.name).join(", ")}

     

       88
       88
       +
                     Testing {mirrors.length} mirrors with 3 attempts each

     

       89
       89
        
                   </div>

     

       90
       90
        
                 </div>

     

       91
       91
        
               </div>

+8 -4

src/types/benchmark.ts

···

       1
       1
       -
       export interface BenchmarkResult {

     

       2
       2
       -
         mirrorName: string;

     

       3
       3
       -
         mirrorUrl: string;

     

       1
       1
       +
       export interface BenchmarkAttempt {

     

       4
       2
        
         responseTime: number;

     

       5
       3
        
         status: "success" | "error";

     

       6
       4
        
         statusCode?: number;

     

       7
       5
        
         error?: string;

     

       8
       8
       -
         data?: any;

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       export interface BenchmarkResult {

     

       9
       9
       +
         mirrorUrl: string;

     

       10
       10
       +
         attempts: BenchmarkAttempt[];

     

       11
       11
       +
         avgResponseTime: number;

     

       12
       12
       +
         status: "success" | "error";

     

       9
       13
        
       }

+35 -14

src/utils/benchmark.ts

···

       1
       1
        
       import { Mirror } from "@/config/mirrors";

     

       2
       2
       -
       import { BenchmarkResult } from "@/types/benchmark";

     

       2
       2
       +
       import { BenchmarkResult, BenchmarkAttempt } from "@/types/benchmark";

     

       3
       3
       +
       

     

       4
       4
       +
       const ATTEMPTS_PER_MIRROR = 3;

     

       3
       5
        
       

     

       4
       4
       -
       export const benchmarkMirror = async (

     

       5
       5
       -
         mirror: Mirror,

     

       6
       6
       +
       const singleAttempt = async (

     

       7
       7
       +
         url: string,

     

       6
       8
        
         did: string

     

       7
       7
       -
       ): Promise<BenchmarkResult> => {

     

       8
       8
       -
         const url = `${mirror.url}/${did}`;

     

       9
       9
       +
       ): Promise<BenchmarkAttempt> => {

     

       10
       10
       +
         const fullUrl = `${url}/${did}`;

     

       9
       11
        
         const startTime = performance.now();

     

       10
       12
        
       

     

       11
       13
        
         try {

     

       12
       12
       -
           const response = await fetch(url);

     

       14
       14
       +
           const response = await fetch(fullUrl);

     

       13
       15
        
           const endTime = performance.now();

     

       14
       16
        
           const responseTime = endTime - startTime;

     

       15
       17
        
       

     

       16
       18
        
           if (!response.ok) {

     

       17
       19
        
             return {

     

       18
       18
       -
               mirrorName: mirror.name,

     

       19
       19
       -
               mirrorUrl: mirror.url,

     

       20
       20
        
               responseTime,

     

       21
       21
        
               status: "error",

     

       22
       22
        
               statusCode: response.status,

     
···

       24
       24
        
             };

     

       25
       25
        
           }

     

       26
       26
        
       

     

       27
       27
       -
           const data = await response.json();

     

       27
       27
       +
           await response.json(); // Consume the response

     

       28
       28
        
       

     

       29
       29
        
           return {

     

       30
       30
       -
             mirrorName: mirror.name,

     

       31
       31
       -
             mirrorUrl: mirror.url,

     

       32
       30
        
             responseTime,

     

       33
       31
        
             status: "success",

     

       34
       32
        
             statusCode: response.status,

     

       35
       35
       -
             data,

     

       36
       33
        
           };

     

       37
       34
        
         } catch (error) {

     

       38
       35
        
           const endTime = performance.now();

     

       39
       36
        
           return {

     

       40
       40
       -
             mirrorName: mirror.name,

     

       41
       41
       -
             mirrorUrl: mirror.url,

     

       42
       37
        
             responseTime: endTime - startTime,

     

       43
       38
        
             status: "error",

     

       44
       39
        
             error: error instanceof Error ? error.message : "Unknown error",

     

       45
       40
        
           };

     

       46
       41
        
         }

     

       42
       42
       +
       };

     

       43
       43
       +
       

     

       44
       44
       +
       export const benchmarkMirror = async (

     

       45
       45
       +
         mirror: Mirror,

     

       46
       46
       +
         did: string

     

       47
       47
       +
       ): Promise<BenchmarkResult> => {

     

       48
       48
       +
         const attempts: BenchmarkAttempt[] = [];

     

       49
       49
       +
       

     

       50
       50
       +
         for (let i = 0; i < ATTEMPTS_PER_MIRROR; i++) {

     

       51
       51
       +
           const attempt = await singleAttempt(mirror.url, did);

     

       52
       52
       +
           attempts.push(attempt);

     

       53
       53
       +
         }

     

       54
       54
       +
       

     

       55
       55
       +
         const successfulAttempts = attempts.filter((a) => a.status === "success");

     

       56
       56
       +
         const avgResponseTime =

     

       57
       57
       +
           successfulAttempts.length > 0

     

       58
       58
       +
             ? successfulAttempts.reduce((sum, a) => sum + a.responseTime, 0) /

     

       59
       59
       +
               successfulAttempts.length

     

       60
       60
       +
             : 0;

     

       61
       61
       +
       

     

       62
       62
       +
         return {

     

       63
       63
       +
           mirrorUrl: mirror.url,

     

       64
       64
       +
           attempts,

     

       65
       65
       +
           avgResponseTime,

     

       66
       66
       +
           status: successfulAttempts.length > 0 ? "success" : "error",

     

       67
       67
       +
         };

     

       47
       68
        
       };

     

       48
       69
        
       

     

       49
       70
        
       export const benchmarkAllMirrors = async (