src/App.svelte at main · tree.fail/atproto-resolver-benchmark

this repo has no description atproto-resolver-benchmark.pages.dev
atproto-resolver-benchmark / src / App.svelte
at main 3.0 kB view raw
 1<script lang="ts">
 2  import { runBenchmark, getSamples } from './lib/engine'
 3  import data from './data.json'
 4
 5  let plcResolvers = $state(data.plcResolvers)
 6  let isRunning: boolean = $state(false)
 7  let samples: any = $state([])
 8  let referenceSamples: any = $state([])
 9
10  function submit(e: any) {
11    (async () => {
12      samples = await getSamples(10)
13      //console.log(samples)
14      isRunning = true
15      runBenchmark({
16        endpoints: plcResolvers,
17        values: samples,
18        onEndpointResult: (endpoint: any, result: any) => {
19          endpoint._status = result
20          if (endpoint.url === 'https://plc.directory') {
21            // use as reference
22            referenceSamples = result.responses
23          }
24        },
25        onEnd: () => isRunning = false
26      })
27    })()
28    return e.preventDefault()
29  }
30
31</script>
32
33<main class="m-4">
34  <h1 class="text-2xl">AT Protocol Resolver Benchmark</h1>
35
36  <form onsubmit={submit}>
37    <div class="mt-6">
38      <div class="input-group grid-cols-[1fr_auto]">
39        <input class="ig-input" type="text" placeholder="Enter DID (or handle) ..." />
40        <button class="ig-btn preset-filled">Run Benchmark</button>
41      </div>
42    </div>
43
44    <div class="mt-4">
45      <table class="table overflow-scroll">
46        <thead>
47          <tr>
48            <th>Instance</th>
49            <th>Status</th>
50            <th>Time</th>
51              {#each samples as sample, i}
52                <th class="text-xs"><a href="https://web.plc.directory/did/{sample}" target="_blank" title={sample}>#{i+1}</a></th>
53              {/each}
54          </tr>
55        </thead>
56        <tbody>
57          {#each plcResolvers as instance}
58            <tr>
59              <td>{instance.url.replace('https://', '')}</td>
60              <td>
61                {#if instance._status}
62                  {#if instance._status?.done}✅{:else if instance._status?.error}❌{:else if isRunning}⌛{/if}
63                  {instance._status.processed}/{instance._status.count}
64                {/if}
65              </td>
66              <td>
67                {#if instance._status?.totalTime}
68                  {instance._status.totalTime}ms
69                {/if}
70              </td>
71              <!--td></td-->
72              {#if instance._status?.responses}
73                {#each instance._status.responses as resp, i}
74                  <!--td class="text-xs">{resp.responseTime}ms</td-->
75                  <td class="text-xs">
76                    <a href="{instance.url}/{resp.did}" target="_blank" class="{referenceSamples[i] ? (referenceSamples[i].hash !== resp.hash ? 'text-error-600' : 'text-green-600') : 'opacity-25'}">{resp.hash?.slice(0, 7)}</a><br/>
77                    {resp.responseTime}ms
78                  </td>
79                {/each}
80              {/if}
81            </tr>
82          {/each}
83        </tbody>
84      </table>
85    </div>
86  </form>
87
88  <!--div class="mt-4">
89    <div>
90      {#each samples as sample}
91        <div>{sample}</div>
92      {/each}
93    </div>
94  </div-->
95
96
97</main>