ottyl/tickets/064-promql-panel-input-clobbered-by-autosave.md

064 — Typing a panel's PromQL query gets clobbered by in-flight autosave responses

Summary

In webapp/src/components/Dashboards.tsx, the panel query <input> (:408-411) is bound directly to draft.panels[...].promql / updatePanel, and draft is autosaved via a 600ms-debounced effect (AUTOSAVE_DEBOUNCE_MS = 600, line 34; effect at :190-214). On save success, setDraft(saved) (:203) unconditionally replaces the entire local draft with the server's response — including whatever promql string was in flight at request time. If the user types more characters after the debounce fires but before the save response returns, those keystrokes exist only in local draft state and get overwritten the instant the stale saved response resolves, producing the reported "characters inserted then removed" behavior. A second effect (Dashboards.tsx:184-188) also resets draft whenever dashboards changes — which the same save's setDashboards call triggers — compounding the race.

Scope

• Stop unconditionally overwriting in-flight-edited fields on autosave response. Options (pick one, document the choice):
  • Track which panel/field is actively focused/being edited and skip overwriting that specific field when reconciling saved into draft.
  • Only merge server-assigned fields (ids, timestamps) from saved into draft rather than replacing draft wholesale.
  • Guard the reconciliation with a "pending edits since request was sent" check, applying saved only when no newer local edit occurred after the request was issued.
• Also fix the related staleness effect at Dashboards.tsx:184-188 so it doesn't clobber in-progress edits when dashboards changes as a side effect of the same save.
• This does not require adopting Redux or another state library — the fix is local to this component's save/edit reconciliation.

Acceptance criteria

• Typing continuously in a panel's PromQL input while an autosave round-trip is in flight never drops or reorders characters.
• Autosave still persists the query to the backend and other server-assigned fields (ids, etc.) still get reconciled into local state correctly.

Depends on

None.