(draft)
const [collapsed, setCollapsed] = useSectionCollapsed('dashboards')
async function loadDashboards(profileName: string, selectAfterLoad?: string) {
@@ -181,11 +184,21 @@ export function Dashboards({ range, activePreset }: { range: TimeRange | null; a
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
+ useEffect(() => {
+ draftRef.current = draft
+ }, [draft])
+
+ // Deliberately keyed only on `selectedId`, not `dashboards` — this effect's job is to load a *newly selected*
+ // dashboard's content into `draft`. Keying it on `dashboards` too meant every autosave's own `setDashboards`
+ // call (below) re-ran this effect and clobbered whatever the user had typed since the save was kicked off
+ // (ticket 064). Reading `dashboards` from the closure here still sees the just-loaded array, since
+ // `setSelectedId`/`setDashboards` from `loadDashboards` land in the same render.
useEffect(() => {
const found = dashboards.find((d) => d.id === selectedId) ?? null
setDraft(found)
lastSavedRef.current = found ? JSON.stringify(dashboardSaveShape(found)) : null
- }, [selectedId, dashboards])
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedId])
// Skips entirely once the draft matches what's already persisted — covers both re-selecting an unchanged dashboard and this effect's own post-save re-render.
useEffect(() => {
@@ -198,9 +211,14 @@ export function Dashboards({ range, activePreset }: { range: TimeRange | null; a
setSaveStatus('saving')
try {
const saved = await saveDashboard(activeProfile, dashboardId, dashboardSaveShape(draft))
- lastSavedRef.current = JSON.stringify(dashboardSaveShape(saved))
+ lastSavedRef.current = snapshot
setDashboards((prev) => prev.map((d) => (d.id === saved.id ? saved : d)))
- setDraft(saved)
+ // Only reconcile `saved` into `draft` if nothing newer was typed while the request was in flight —
+ // otherwise this stale response would overwrite those in-progress keystrokes (ticket 064).
+ const current = draftRef.current
+ if (current && current.id === dashboardId && JSON.stringify(dashboardSaveShape(current)) === snapshot) {
+ setDraft(saved)
+ }
setSaveStatus('saved')
setSaveError(null)
} catch (err) {
diff --git a/webapp/src/components/FilterBar.tsx b/webapp/src/components/FilterBar.tsx
index d7418dc..b472e37 100644
--- a/webapp/src/components/FilterBar.tsx
+++ b/webapp/src/components/FilterBar.tsx
@@ -1,5 +1,5 @@
import type { ReactNode } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import { HelpIcon } from './HelpIcon'
import { RegexHelpIcon } from './RegexHelpIcon'
@@ -13,14 +13,22 @@ export function FilterBar({
onChange,
error,
collapseToggle,
+ activeSummary,
}: {
value: string
onChange: (value: string) => void
error?: string | null
collapseToggle?: ReactNode
+ /** Ticket 066: a read-only textual summary of the active time-range preset / sort order, shown below the input when the user hasn't typed a manual filter — the filter text itself stays the single source of truth for what's actually sent to the server. */
+ activeSummary?: string | null
}) {
const [draft, setDraft] = useState(value)
+ // Resync when `value` changes externally (e.g. a programmatic clear) rather than only reading it once on mount.
+ useEffect(() => {
+ setDraft(value)
+ }, [value])
+
return (
)
}
diff --git a/webapp/src/components/Params.tsx b/webapp/src/components/Params.tsx
index 2765cc7..e03c67b 100644
--- a/webapp/src/components/Params.tsx
+++ b/webapp/src/components/Params.tsx
@@ -333,7 +333,11 @@ export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onD
? ', elapsed since previous'
: p.kind === 'boolean'
? ''
- : `, ${p.json_field_path ? `json field ${p.json_field_path}` : `group ${p.capture_group}`}`}
+ : p.json_field_path
+ ? `, json field ${p.json_field_path}`
+ : p.capture_group !== p.name
+ ? `, group ${p.capture_group}`
+ : ''}
)
))}