Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Vector Database Latency Monitoring Block for Vue

Query latency by result count (top-k 1, 10, 50 and 100) as paired dots with and without a metadata filter, a p50, p95 or p99 switch, and a 60-minute line with a cursor.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what a metadata filter costs a vector search, with this latency panel for Vue with Ark UI. It is Neighborlark, a vector search monitor (made up). The top band is a paired dot plot: one row for each result count (top-k 1, 10, 50 and 100), each with a circle for the query without a filter and a diamond for the query with one, joined by a line on one millisecond axis. A Segment Group in the header switches the percentile between p50, p95 and p99, and the header sentence says how much a filter adds at top-k 50. Under it, the last 60 minutes of that percentile at top-k 50 with a filter is a line with a cursor: a hidden native range whose reading is spoken after a short pause. Guides draw the frame and its bands; the entrance is CSS only. For search teams sizing top-k and filters. The numbers are typed examples.

FAQ

How do I use my own latencies?

Edit LEVELS: for each percentile, four rows with the result count and the latency without and with a filter, and the scale of the hour line. The hour series are built at the top of the file and end on the top-k 50 value, so the dots and the line agree; replace them with your own 60 samples per percentile.

Why does the dot axis stay put when I switch percentile?

All three percentiles share one axis, 0 to 220 ms, so a switch moves the dots rather than rescaling the plot. The hour line below does rescale to its percentile, with its own labelled ticks.

How does the cursor work?

It is a native range over the hour line, named Time, whose value text is the minute and its latency. Arrow keys move it one minute, Home and End jump, and dragging scrubs it. A polite status line speaks the reading about 600 ms after the last change.

What is real here and what stays local?

Everything is typed and nothing queries a database. Switching the percentile only changes the panel.

Can I read it without colour?

Yes. The two dots differ by shape (a filled circle and an outlined diamond) and by their position, the legend names both, and a hidden table gives every value for the current percentile.

How does it look on a phone?

The axis keeps three labels (0, 100 and 200 ms), each row keeps its label and the extra milliseconds, and the hour line shortens.

All 100 monitoring blocks