Skip to content

feat: searchable run history panel with status and latency#419

Open
shaunpatterson wants to merge 2 commits into
dgraph-io:mainfrom
shaunpatterson:sp/run-history
Open

feat: searchable run history panel with status and latency#419
shaunpatterson wants to merge 2 commits into
dgraph-io:mainfrom
shaunpatterson:sp/run-history

Conversation

@shaunpatterson

Copy link
Copy Markdown
Contributor

What

A History button in the editor toolbar opens a searchable panel of past runs (like Memgraph Lab's Run History), newest first. Each row shows:

  • action icon (query vs mutate, matching the existing QueryPreview icons),
  • a status dot — green (completed without error), red (error), gray (never executed this session),
  • a one-line monospace query snippet (whitespace-collapsed, 60-char ellipsis),
  • server latency (formatted as ms) and relative time (react-timeago, already a dependency).

A search input filters rows by case-insensitive substring; clicking a row loads that query into the editor and activates the frame (same dispatches the existing history strip uses). Closes on outside click and Escape; the active frame's row is highlighted.

Implementation notes

  • Pure helpers in lib/runHistory.js (summarizeFrame, filterFrames, formatLatencyMs) — status prefers the JSON tab result and falls back to any completed tab, so a query run only on the Visual tab still shows green/red.
  • RECEIVE_FRAME now stamps createdAt (preserved if already present); legacy persisted frames without it fall back to the existing timestamp field or omit the time.
  • The existing minimal history strip under the editor is left in place; this panel augments it.

Testing

31 unit tests on the helpers (status across tab results, latency formatting, snippet truncation, filtering). npm run build passes.

🤖 Generated with Claude Code

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@shaunpatterson shaunpatterson requested a review from a team as a code owner June 12, 2026 17:38
Two UI fixes surfaced when the History button crowds the editor toolbar:

- The toolbar used floats (.actions float left/right). When the right
  action group no longer fit beside Query/Mutate it dropped below,
  collapsing the float container into an empty band + a half-row of
  buttons. Switch .header/.actions to flexbox (flex-wrap, margin-left
  auto) so a crowded toolbar wraps into clean rows.
- The history dropdown was position:absolute right:0 width:420px,
  anchored to the mid-toolbar History button — on a narrow editor pane
  it extended left off-screen and got clipped. Make it position:fixed
  with top/left/width computed from the button rect and clamped to the
  viewport, recomputed on resize, so it always stays visible.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@shaunpatterson

Copy link
Copy Markdown
Contributor Author
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant