Fix to eliminate the use of the wrong draft state

Author: manojVivek

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

@@ -132,6 +132,7 @@ const ProfileSelector = ({
     profileSelection,
     setProfileSelection,
     sumByLoading,
+    draftParsedQuery,
   } = useQueryState({suffix});
 
   // Use draft state for local state instead of committed state
@@ -208,6 +209,7 @@ const ProfileSelector = ({
         const currentTo = timeRangeSelection.getToMs(true);
         const currentRangeKey = timeRangeSelection.getRangeKey();
         // Commit with refreshed time range
+        console.log('[draftExpression] setQueryExpression: committing with refreshed time range:', draftSelection.expression);
         commitDraft({
           from: currentFrom,
           to: currentTo,
@@ -303,6 +305,9 @@ const ProfileSelector = ({
               profileType={profileType}
               profileTypesError={error}
               viewComponent={viewComponent}
+              draftSelection={draftSelection}
+              setDraftMatchers={setDraftMatchers}
+              draftParsedQuery={draftParsedQuery}
             />
           </LabelsSource>
         </LabelsQueryProvider>

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

@@ -28,6 +28,7 @@ import {SelectWithRefresh} from '../SelectWithRefresh';
 import SimpleMatchers from '../SimpleMatchers/';
 import ViewMatchers from '../ViewMatchers';
 import {useLabelNames} from '../hooks/useLabels';
+import { QuerySelection } from '../ProfileSelector';
 
 interface SelectOption {
   label: string;
@@ -67,6 +68,9 @@ interface QueryControlsProps {
   sumBySelectionLoading?: boolean;
   setUserSumBySelection?: (sumBy: string[]) => void;
   sumByRef?: React.RefObject<SelectInstance>;
+  draftSelection: QuerySelection;
+  setDraftMatchers: (selection: string) => void;
+  draftParsedQuery?: Query | null;
 }
 
 export function QueryControls({
@@ -94,6 +98,9 @@ export function QueryControls({
   setUserSumBySelection,
   sumByRef,
   queryClient,
+  draftSelection,
+  setDraftMatchers,
+  draftParsedQuery,
 }: QueryControlsProps): JSX.Element {
   const {timezone} = useParcaContext();
   const defaultQueryBrowserRef = useRef<HTMLDivElement>(null);
@@ -178,6 +185,9 @@ export function QueryControls({
           <SimpleMatchers
             queryBrowserRef={actualQueryBrowserRef}
             searchExecutedTimestamp={searchExecutedTimestamp}
+                draftSelection={draftSelection}
+                setDraftMatchers={setDraftMatchers}
+                draftParsedQuery={draftParsedQuery}
           />
         )}
       </div>

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

@@ -22,13 +22,17 @@ import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import {useUnifiedLabels} from '../contexts/UnifiedLabelsContext';
-import {transformLabelName} from '../contexts/utils';
-import {useQueryState} from '../hooks/useQueryState';
+import { transformLabelName } from '../contexts/utils';
 import Select, {type SelectItem} from './Select';
+import { QuerySelection } from 'ProfileSelector';
+import { Query } from '@parca/parser';
 
 interface Props {
   queryBrowserRef: React.RefObject<HTMLDivElement>;
   searchExecutedTimestamp?: number;
+  draftSelection: QuerySelection;
+  setDraftMatchers: (selection: string) => void;
+  draftParsedQuery?: Query | null;
 }
 
 interface QueryRow {
@@ -98,8 +102,10 @@ const operatorOptions = [
 
 const SimpleMatchers = ({
   queryBrowserRef,
-
   searchExecutedTimestamp,
+  draftSelection,
+  setDraftMatchers,
+  draftParsedQuery,
 }: Props): JSX.Element => {
   const [queryRows, setQueryRows] = useState<QueryRow[]>([
     {labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false},
@@ -115,13 +121,8 @@ const SimpleMatchers = ({
     labelNameMappingsForSimpleMatchers: labelNameOptions,
     isLabelNamesLoading: labelNamesLoading,
     refetchLabelNames,
-    suffix,
   } = useUnifiedLabels();
 
-  const {draftSelection, setDraftMatchers, draftParsedQuery} = useQueryState({
-    suffix,
-  });
-
   // Reset editing mode when search is executed
   useEffect(() => {
     if (searchExecutedTimestamp !== undefined && searchExecutedTimestamp > 0) {

ui/packages/shared/profile/src/hooks/useQueryState.ts

@@ -337,20 +337,6 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     ]
   );
 
-  // Draft setters (update local state only, or commit directly if specified)
-  const setDraftExpressionCallback = useCallback(
-    (newExpression: string, commit = false) => {
-      if (commit) {
-        // Commit with the new expression, which will also update merge params and selection
-        commitDraft(undefined, newExpression);
-      } else {
-        // Only update draft state
-        setDraftExpression(newExpression);
-      }
-    },
-    [commitDraft]
-  );
-
   const setDraftTimeRange = useCallback(
     (newFrom: number, newTo: number, newTimeSelection: string) => {
       setDraftFrom(newFrom.toString());
@@ -420,7 +406,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     draftSelection,
 
     // Draft setters
-    setDraftExpression: setDraftExpressionCallback,
+    setDraftExpression,
     setDraftTimeRange,
     setDraftSumBy: setDraftSumByCallback,
     setDraftProfileName,