Refactor query expression commit logic in profile selector (#6074)

Updated MetricsGraphSection and ProfileSelector to use the commitDraft function for applying label matcher filters from the metrics graph.

Author: yomete

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());
+      });
     }
   };
 

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -341,6 +341,7 @@ const ProfileSelector = ({
         query={query}
         setQueryExpression={setQueryExpression}
         setNewQueryExpression={setDraftExpression}
+        commitDraft={commitDraft}
       />
     </>
   );

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;