Add target MarkArea for time series chart when user change the lcommit and rcommit (#7283)

# Overview
Add target MarkArea for time series chart when user change the lcommit
and rcommit

## Query list commit change:
Query: compilers_benchmark_api_commit_query

Details: Instead of use distinct, we use GROUP BY to find unique branch,
commit, workflowId combo along with a hourly granularity timestamp.

This allow us to target right time range when targeting the MapArea in
time series chart and sync with the timeseries data's timestamp

## Add MapArea
when lcommit and rcommit change, a mapArea in time series chart willl
also change. THis helps users to identify where the datapoint they are
targeting, reduce confusion.

# Preview

https://torchci-git-addmarkarea-fbopensource.vercel.app/benchmark/compilers_regression

# Demo
![Oct-02-2025
19-08-37](https://github.com/user-attachments/assets/0b61f2b5-d327-46a2-98ea-0e597e35c9da)

Author: yangw-dev

torchci/clickhouse_queries/compilers_benchmark_api_commit_query/query.sql

@@ -1,45 +1,33 @@
-SELECT DISTINCT
+SELECT
     replaceOne(head_branch, 'refs/heads/', '') AS branch,
     head_sha AS commit,
     workflow_id,
-    toDate(fromUnixTimestamp(timestamp), 'UTC') AS date
+    toStartOfHour(min(fromUnixTimestamp(timestamp))) AS date
 FROM benchmark.oss_ci_benchmark_torchinductor
 PREWHERE
     timestamp >= toUnixTimestamp({startTime: DateTime64(3)})
     AND timestamp < toUnixTimestamp({stopTime:  DateTime64(3)})
 WHERE
-    -- optional branches
     (
         has(
             {branches: Array(String)},
             replaceOne(head_branch, 'refs/heads/', '')
         )
         OR empty({branches: Array(String)})
     )
-    -- optional suites
     AND (
         has({suites: Array(String)}, suite)
         OR empty({suites: Array(String)})
     )
-    -- optional dtype
-    AND (
-        benchmark_dtype = {dtype: String}
-        OR empty({dtype: String})
-    )
-    -- optional mode
-    AND (
-        benchmark_mode = {mode: String}
-        OR empty({mode: String})
-    )
-    -- optional device
-    AND (
-        device = {device: String}
-        OR empty({device: String})
-    )
-    -- optional arch (array param); if empty array, skip filter
+    AND (benchmark_dtype = {dtype: String} OR empty({dtype: String}))
+    AND (benchmark_mode = {mode: String} OR empty({mode: String}))
+    AND (device = {device: String} OR empty({device: String}))
     AND (
         multiSearchAnyCaseInsensitive(arch, {arch: Array(String)})
         OR empty({arch: Array(String)})
     )
-ORDER BY branch, timestamp
+GROUP BY
+    branch, commit, workflow_id
+ORDER BY
+    branch, date
 SETTINGS session_timezone = 'UTC';

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/BenchmarkChartSection.tsx

@@ -28,6 +28,8 @@ export default function BenchmarkChartSection({
   data = [],
   chartSectionConfig,
   onSelect,
+  lcommit,
+  rcommit,
 }: {
   data?: BenchmarkTimeSeriesInput[];
   chartSectionConfig: BenchmarkChartSectionConfig;
@@ -96,6 +98,8 @@ export default function BenchmarkChartSection({
                   onSelect={(payload: any) => {
                     onSelect?.(payload);
                   }}
+                  lcommit={lcommit}
+                  rcommit={rcommit}
                 />
               </Paper>
             </Box>

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChart.tsx

@@ -32,16 +32,25 @@ type Props = {
   customizedConfirmDialog?: { type: string; id?: string };
   renderOptions?: BenchmarkTimeSeriesCharRenderOpiton;
   defaultSelectMode?: boolean;
+  markArea?: {
+    start?: string;
+    end?: string;
+    singleGap?: number;
+  };
   /** Called when user clicks Confirm with L/R selected for a single series. */
   onSelect?: (sel: ConfirmPayload) => void;
 };
 
 const DEFAULT_HEIGHT = 200;
 
+// we want to show the mark area as a single point, default gap is 1 hour
+const DEFAULT_MARK_AREA_SINGLE_GAP = 60 * 60 * 1000;
+
 const BenchmarkTimeSeriesChart: React.FC<Props> = ({
   timeseries,
   renderOptions,
   customizedConfirmDialog,
+  markArea,
   defaultSelectMode = false,
   onSelect = () => {},
 }) => {
@@ -132,7 +141,41 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
 
   // Build line series first (indices 0..N-1 map to logical timeseries)
   const lineSeries: echarts.SeriesOption[] = useMemo(() => {
-    return seriesDatas.map((data, idx) => {
+    let ma: any = [];
+    if (markArea?.start && markArea?.end) {
+      const a = dayjs(markArea.start).valueOf();
+      const b = dayjs(markArea.end).valueOf();
+      const [l, r] = a <= b ? [a, b] : [b, a];
+      // when left === right, we want to show the mark area as a single point
+      const gap = markArea?.singleGap ?? DEFAULT_MARK_AREA_SINGLE_GAP;
+      const adjustedEnd = l === r ? r + gap : r;
+      ma = [
+        [
+          {
+            xAxis: l,
+          },
+          {
+            xAxis: adjustedEnd,
+          },
+        ],
+      ];
+    }
+    const markAreaLine = {
+      type: "line",
+      name: "__markarea__",
+      data: [],
+      lineStyle: { opacity: 0 },
+      itemStyle: { opacity: 0 },
+      showSymbol: false,
+      tooltip: { show: false },
+      markArea: {
+        silent: true,
+        itemStyle: { color: "rgba(0, 150, 136, 0.06)" },
+        data: ma,
+      },
+    } as echarts.SeriesOption;
+
+    const lines = seriesDatas.map((data, idx) => {
       const isSelected = selectedSeriesIdx === idx;
       const mlData: any[] = [];
 
@@ -172,7 +215,16 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
           : {}),
       } as echarts.SeriesOption;
     });
-  }, [seriesDatas, timeseries, selectedSeriesIdx, leftIdx, rightIdx]);
+    return [...lines, markAreaLine];
+  }, [
+    seriesDatas,
+    timeseries,
+    selectedSeriesIdx,
+    leftIdx,
+    rightIdx,
+    markArea?.start,
+    markArea?.end,
+  ]);
 
   // Highlight overlays appended after all lines
   const overlaySeries: echarts.SeriesOption[] = useMemo(() => {

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/RenderingOptions.ts

@@ -35,7 +35,7 @@ export const echartRenderingOptions: echarts.EChartsOption = {
   xAxis: {
     type: "time",
     axisLabel: {
-      formatter: (v: number) => dayjs.utc(v).format("MM-DD"),
+      formatter: (v: number) => dayjs.utc(v).format("MM-DD HH:mm"),
     },
   },
   yAxis: {

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChartGroup.tsx

@@ -1,5 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import { Box } from "@mui/system";
+import { BenchmarkCommitMeta } from "lib/benchmark/store/benchmark_regression_store";
 import { useMemo } from "react";
 import {
   BenchmarkTimeSeriesInput,
@@ -14,6 +15,8 @@ type Props = {
   data: any[];
   chartGroup: ChartGroupConfig;
   defaultSelectMode?: boolean;
+  lcommit?: BenchmarkCommitMeta;
+  rcommit?: BenchmarkCommitMeta;
   onSelect?: (payload: any) => void;
 };
 
@@ -22,6 +25,8 @@ export default function BenchmarkTimeSeriesChartGroup({
   data,
   chartGroup,
   defaultSelectMode = false,
+  lcommit,
+  rcommit,
   onSelect = () => {},
 }: Props) {
   const filtered = useMemo(
@@ -93,6 +98,10 @@ export default function BenchmarkTimeSeriesChartGroup({
               customizedConfirmDialog={
                 chartGroup?.chart?.customizedConfirmDialog
               }
+              markArea={{
+                start: lcommit?.date ?? undefined,
+                end: rcommit?.date ?? undefined,
+              }}
               renderOptions={chartGroup?.chart?.renderOptions}
               defaultSelectMode={defaultSelectMode}
               onSelect={onSelect}

torchci/components/benchmark/v3/components/dataRender/fanout/FanoutComponents.tsx

@@ -39,6 +39,7 @@ export function FanoutBenchmarkTimeSeriesComparisonTableSection({
         data={data}
         lcommit={lcommit ?? undefined}
         rcommit={rcommit ?? undefined}
+        onChange={onChange}
       />
     </>
   );