show some latencies in a histogram

package-lock.json

···
       "name": "firehose-diff",
       "version": "0.0.0",
       "dependencies": {
+        "@atcute/tid": "^1.0.2",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@mui/material": "^7.1.0",
-        "@mui/x-charts": "^8.3.1",
+        "@mui/x-charts": "^8.10.2",
         "@skyware/firehose": "^0.5.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"
···
       "dependencies": {
         "@atcute/uint8array": "^1.0.1"
       }
+    },
+    "node_modules/@atcute/tid": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@atcute/tid/-/tid-1.0.2.tgz",
+      "integrity": "sha512-ahmjroNyeDPJhtuf3+HTJropaH04HmJ8fhntDu73Gpz/RkAF7+nkz6kcP2QTgfvMCgMPAJUdskAAP82GPDTY9w==",
+      "license": "MIT"
     },
     "node_modules/@atcute/uint8array": {
       "version": "1.0.1",
···
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
-      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
···
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz",
-      "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==",
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
+      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1"
+        "@babel/runtime": "^7.28.2"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
···
       }
     },
     "node_modules/@mui/utils": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
-      "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.1.tgz",
+      "integrity": "sha512-/31y4wZqVWa0jzMnzo6JPjxwP6xXy4P3+iLbosFg/mJQowL1KIou0LC+lquWW60FKVbKz5ZUWBg2H3jausa0pw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1",
-        "@mui/types": "^7.4.2",
-        "@types/prop-types": "^15.7.14",
+        "@babel/runtime": "^7.28.2",
+        "@mui/types": "^7.4.5",
+        "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.0"
+        "react-is": "^19.1.1"
       },
       "engines": {
         "node": ">=14.0.0"
···
       }
     },
     "node_modules/@mui/x-charts": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-8.3.1.tgz",
-      "integrity": "sha512-jZClK40++ftcMwCeHKudGKmazd0MsgnrIP6RhYi2lH1kg0jK2upueokyxVIIxqquwWsQYE3WsflJBP61DvYXOQ==",
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-8.10.2.tgz",
+      "integrity": "sha512-F4SdpixbaAeNaZHylYLpaj/WD1jKn6gMD1Twbd+Y8FzZneE2mrtXwaQc6W2Hbri/VdJl2OV55nL5pFMpDSlwAA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1",
-        "@mui/utils": "^7.0.2",
-        "@mui/x-charts-vendor": "8.3.1",
-        "@mui/x-internals": "8.3.1",
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.1",
+        "@mui/x-charts-vendor": "8.6.0",
+        "@mui/x-internal-gestures": "0.2.4",
+        "@mui/x-internals": "8.10.2",
         "bezier-easing": "^2.1.0",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
···
       }
     },
     "node_modules/@mui/x-charts-vendor": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-8.3.1.tgz",
-      "integrity": "sha512-UcUa7HDIpSfeVBYgeHewWoVALcB4Gg9we53l78j2cyadYBZOWdtLj8fezo9zAhxfZ5s9T+1yIyuD+CCnYJnUpQ==",
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-8.6.0.tgz",
+      "integrity": "sha512-TTtfhxXuwtoZfyno7+4y3ZhZeFqavFJecWbteLEby0lFqALWB9GGJpkc1TIHWr3GkWE5UHEbdADZ0pfrPenezA==",
       "license": "MIT AND ISC",
       "dependencies": {
-        "@babel/runtime": "^7.27.1",
+        "@babel/runtime": "^7.27.6",
         "@types/d3-color": "^3.1.3",
         "@types/d3-delaunay": "^6.0.4",
         "@types/d3-interpolate": "^3.0.4",
···
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/@mui/x-internal-gestures": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/x-internal-gestures/-/x-internal-gestures-0.2.4.tgz",
+      "integrity": "sha512-Hpc5+LQfT0TrI7O0ngBlZ1LD6Gp1h5DUNs4ABbrotY/2OsOfJOzltV/QtBjINTmiBzDPnrE8l8nEiG97qOWX3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2"
+      }
+    },
     "node_modules/@mui/x-internals": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.3.1.tgz",
-      "integrity": "sha512-8kIxT66cea63iEseEIHSWzKju2Wzl7MsWFoAUQEyRvYqOFa2j9Un2Vn/EH2vy9nm/MtMAYpwOE/nt68/KTIA2w==",
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.10.2.tgz",
+      "integrity": "sha512-dlC0BQRRBdiWtqn1yDppaHYRUjU3OuPWTxy0UtqxDaJjJf4pfR8ALr243nbxgJAFqvQyWPWyO4A6p9x9eJMJEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.27.1",
-        "@mui/utils": "^7.0.2"
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.1",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
       },
       "engines": {
         "node": ">=14.0.0"
···
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.14",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
···
       }
     },
     "node_modules/react-is": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
-      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {

package.json

···
     "preview": "vite preview"
   },
   "dependencies": {
+    "@atcute/tid": "^1.0.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^7.1.0",
-    "@mui/x-charts": "^8.3.1",
+    "@mui/x-charts": "^8.10.2",
     "@skyware/firehose": "^0.5.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

src/App.tsx

···
 
 function App() {
   const [relays, setRelays] = useState([] as string[]);
+  const [events, setEvents] = useState(['commit', 'sync', 'account', 'identity', 'unknown']);
+  const [eventsSelected, setEventsSelected] = useState(new Set(events));
   const [receiver, setReceiver] = useState(() => noopReceiver);
   const [keepalive, setKeepalive] = useState(() => () => {});
   const [rateBars, setRateBars] = useState({ series: [] } as any);
···
   return (
     <>
       <h1>compare hoses</h1>
-      <p><em>warning: enabling many relay connections requires a lot of bandwidth</em></p>
+      <p><em>warning: enabling many relay connections requires a <strong>lot</strong> of bandwidth</em></p>
 
       <form style={{ display: 'block', textAlign: 'left' }}>
         {knownRelays.map(({ url, desc }: Relay) => (
···
         </p>
       </form>
 
+      <form style={{ display: 'block', margin: '1rem 0' }}>
+        <span>events: </span>
+        {events.map(eventName => (
+          <label key={eventName}>
+            <input
+              type='checkbox'
+              checked={eventsSelected.has(eventName)}
+              onChange={e => {
+                setEventsSelected(evs => {
+                  const s = new Set(evs);
+                  if (e.target.checked) s.add(eventName);
+                  else s.delete(eventName);
+                  return s;
+                })
+              }}
+            />
+            {' '}
+            {eventName}
+          </label>
+        ))}
+      </form>
+
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2em', textAlign: 'left' }}>
         {relays.map(url => {
           const { desc } = knownRelays.find((r: Relay) => r.url === url) ?? { desc: "custom relay" };
···
               <Relay
                 url={url}
                 desc={desc}
+                includeEvents={eventsSelected}
                 onRecieveEvent={(type: string, event: any) => receiver(url, type, event)}
               />
             </div>

src/Relay.tsx

···
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Firehose } from '@skyware/firehose';
+import * as TID from '@atcute/tid';
+import { BarChart } from '@mui/x-charts/BarChart';
 import './Relay.css';
 
 type HoseState = 'connecting' | 'connected' | 'errored' | 'closed';
 
-function Relay({ url, desc, onRecieveEvent }: {
+const TIME_SIGNAL_NSID = 'app.bsky.feed.like';
+const BUCKET_WIDTH = 32; // ms
+const BUCKETS = 32;
+const MAX_BUCKET = BUCKET_WIDTH * BUCKETS;
+
+function Relay({ url, desc, includeEvents, onRecieveEvent }: {
   url: string,
   desc: string,
+  includeEvents: Set,
   onRecieveEvent: (type: string, event: any) => void,
 }) {
   const [state, setState] = useState('connecting' as HoseState);
   const [commits, setCommits] = useState(0);
   const [reconnects, setReconnects] = useState(0);
+  const [buckets, setBuckets] = useState({
+    idx: Array.from({ length: BUCKETS + 2 }).map(() => 0),
+    recv: Array.from({ length: BUCKETS + 2 }).map(() => 0),
+  });
 
   useEffect(() => {
     const sendIt = (type: string, event: any) => {
+      if (!includeEvents.has(type)) return;
       onRecieveEvent(type, event);
       setCommits(n => n + 1);
+      if (type === 'commit' && event.ops.length === 1) {
+        const op = event.ops[0];
+        try {
+          const [nsid, rkey] = op.path.split('/');
+          if (nsid === TIME_SIGNAL_NSID) {
+            const posted = TID.parse(rkey).timestamp / 1000;
+            const indexed = Date.parse(event.time)
+            const indexed_dt = indexed - posted;
+            const received_dt = +new Date() - indexed;
+
+            let idx_bucket, recv_bucket;
+
+            if (indexed_dt < 0) {
+              idx_bucket = -1;
+            } else if (indexed_dt >= MAX_BUCKET) {
+              idx_bucket = BUCKETS;
+            } else {
+              idx_bucket = Math.min(Math.floor(indexed_dt / BUCKET_WIDTH), MAX_BUCKET)
+            }
+            if (received_dt < 0) {
+              recv_bucket = -1;
+            } else if (received_dt >= MAX_BUCKET) {
+              recv_bucket = BUCKETS
+            } else {
+              recv_bucket = Math.min(Math.floor(received_dt / BUCKET_WIDTH), MAX_BUCKET)
+            }
+
+            setBuckets(({ idx, recv }) => {
+              idx = idx.slice();
+              recv = recv.slice();
+              idx[idx_bucket + 1] += 1;
+              recv[recv_bucket + 1] += 1;
+              return { idx, recv };
+            });
+          }
+        } catch (e) {}
+      }
     };
     const firehose = new Firehose({ relay: url });
     firehose.on('open', () => setState('connected'));
···
     return () => {
       firehose.close();
     };
-  }, [url]);
+  }, [url, includeEvents]);
 
   return (
     <div className="relay">
···
       {(reconnects > 0) && (
         <p>reconnects: <code>{reconnects}</code></p>
       )}
+      <BarChart
+        height={180}
+        width={420}
+        yAxis={[{
+          label: 'events',
+          scaleType: 'symlog',
+        }]}
+        skipAnimation={true}
+        xAxis={[{
+          data: [-1]
+            .concat(Array.from({ length: BUCKETS }).map((_, i) => i * BUCKET_WIDTH))
+            .concat(['+']),
+          label: 'index latency (ms)',
+        }]}
+        series={[{
+          data: buckets.idx,
+        }]}
+      />
+      <BarChart
+        height={180}
+        width={420}
+        yAxis={[{
+          label: 'events',
+          scaleType: 'symlog',
+        }]}
+        skipAnimation={true}
+        xAxis={[{
+          data: [-1]
+            .concat(Array.from({ length: BUCKETS }).map((_, i) => i * BUCKET_WIDTH))
+            .concat(['+']),
+          label: 'receive latency (ms)',
+        }]}
+        series={[{
+          data: buckets.recv,
+        }]}
+      />
     </div>
   );
 }