feat(explore-suspect-attrs): Correcting baseline query (#94941)

The baseline query is the query from the search bar AND the negation of
the selected region query.

If query_1 is '`span.op:db AND timestamp >= 1 AND timestamp <=2`' the
query_2 should be '`span.op:db AND (timestamp < 1 OR timestamp > 2)`'.

This PR enforces the logic above.

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/views/explore/hooks/useSuspectAttributes.tsx

@@ -61,32 +61,43 @@ function useSuspectAttributes({
   const formattedStartTimestamp = getUtcDateString(startTimestamp);
   const formattedEndTimestamp = getUtcDateString(endTimestamp);
 
+  const yAxis = chartInfo.yAxes[0];
+  const parsedFunction = parseFunction(yAxis ?? '');
+  const plottedFunctionName = parsedFunction?.name;
+  const plottedFunctionParameter = parsedFunction?.arguments[0];
+
+  const useYAxisCoords = plottedFunctionName !== 'count' && plottedFunctionParameter;
+
   // Add the selected region by x-axis to the query, timestamp: [x1, x2]
   selectedRegionQuery.addFilterValue(FieldKey.TIMESTAMP, `>=${formattedStartTimestamp}`);
   selectedRegionQuery.addFilterValue(FieldKey.TIMESTAMP, `<=${formattedEndTimestamp}`);
 
+  // If selected region query is 'timestamp >= x0 and timestamp <= x1 and span.duration >= y0 and span.duration <= y1',
+  // then the baseline region query should be '((timestamp < x0 or timestamp > x1) or (span.duration < y0 or span.duration > y1))'.
+  // This is only required if the y-axis aggregate is not count.
+  if (useYAxisCoords) {
+    baselineRegionQuery.addOp('(');
+  }
+
   // Add the baseline region by x-axis to the query, timestamp: <x1 or timestamp:>x2
   baselineRegionQuery.addDisjunctionFilterValues(FieldKey.TIMESTAMP, [
     `<${formattedStartTimestamp}`,
     `>${formattedEndTimestamp}`,
   ]);
 
-  const yAxis = chartInfo.yAxes[0];
-  const parsedFunction = parseFunction(yAxis ?? '');
-  const plottedFunctionName = parsedFunction?.name;
-  const plottedFunctionParameter = parsedFunction?.arguments[0];
-
-  // If the y-axis is not count, we add the field that has been aggregated on, to the queries to complete the boxed region.
+  // If the y-axis aggregate is not count, we add the field that has been aggregated on, to the queries to complete the boxed region.
   // For example, if the y-axis is avg(span.duration), we add span.duration: [y1, y2] to query in the selected region
   // and span.duration: <y1 or span.duration:>y2 to the baseline query.
-  if (plottedFunctionName !== 'count' && plottedFunctionParameter) {
+  if (useYAxisCoords) {
     selectedRegionQuery.addFilterValue(plottedFunctionParameter, `>=${y1}`);
     selectedRegionQuery.addFilterValue(plottedFunctionParameter, `<=${y2}`);
 
+    baselineRegionQuery.addOp('OR');
     baselineRegionQuery.addDisjunctionFilterValues(plottedFunctionParameter, [
       `<${y1}`,
       `>${y2}`,
     ]);
+    baselineRegionQuery.addOp(')');
   }
 
   const query1 = selectedRegionQuery.formatString();