diff --git a/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx b/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx index 394887d7742..25300a0a173 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx @@ -37,8 +37,12 @@ interface MetricsGraphSectionProps { selectQuery: (query: QuerySelection) => void; setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void; query: Query; - setNewQueryExpression: (queryExpression: string, commit?: boolean) => void; + setNewQueryExpression: (queryExpression: string) => void; setQueryExpression: (updateTs?: boolean) => void; + commitDraft: ( + refreshedTimeRange?: {from: number; to: number; timeSelection: string}, + expression?: string + ) => void; } export function MetricsGraphSection({ @@ -57,6 +61,7 @@ export function MetricsGraphSection({ setProfileSelection, query, setNewQueryExpression, + commitDraft, }: MetricsGraphSectionProps): JSX.Element { const resetStateOnSeriesChange = useResetStateOnSeriesChange(); const batchUpdates = useURLStateBatch(); @@ -106,9 +111,11 @@ export function MetricsGraphSection({ } if (hasChanged) { - // TODO: Change this to store the query object - // Pass commit: true to immediately apply the filter when clicking on metrics graph labels - setNewQueryExpression(newQuery.toString(), true); + // Immediately apply the filter when adding label matchers from the graph + batchUpdates(() => { + setNewQueryExpression(newQuery.toString()); + commitDraft(undefined, newQuery.toString()); + }); } }; diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx index 543f9f5097d..7dbdf8acd98 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/index.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/index.tsx @@ -341,6 +341,7 @@ const ProfileSelector = ({ query={query} setQueryExpression={setQueryExpression} setNewQueryExpression={setDraftExpression} + commitDraft={commitDraft} /> ); diff --git a/ui/packages/shared/profile/src/hooks/useQueryState.ts b/ui/packages/shared/profile/src/hooks/useQueryState.ts index d08a39df017..578e965d4fa 100644 --- a/ui/packages/shared/profile/src/hooks/useQueryState.ts +++ b/ui/packages/shared/profile/src/hooks/useQueryState.ts @@ -38,7 +38,7 @@ interface UseQueryStateReturn { draftSelection: QuerySelection; // Draft setters (update local state only) - setDraftExpression: (expression: string, commit?: boolean) => void; + setDraftExpression: (expression: string) => void; setDraftTimeRange: (from: number, to: number, timeSelection: string) => void; setDraftSumBy: (sumBy: string[] | undefined) => void; setDraftProfileName: (profileName: string) => void;