diff --git a/torchci/components/GranularityPicker.tsx b/torchci/components/GranularityPicker.tsx
index f5f54e0ca7..0e92bb46e7 100644
--- a/torchci/components/GranularityPicker.tsx
+++ b/torchci/components/GranularityPicker.tsx
@@ -25,10 +25,10 @@ export default function GranularityPicker({
         labelId="granularity-select-label"
         onChange={handleChange}
       >
-        <MenuItem value={"month"}>month</MenuItem>
-        <MenuItem value={"week"}>week</MenuItem>
-        <MenuItem value={"day"}>day</MenuItem>
         <MenuItem value={"hour"}>hour</MenuItem>
+        <MenuItem value={"day"}>day</MenuItem>
+        <MenuItem value={"week"}>week</MenuItem>
+        <MenuItem value={"month"}>month</MenuItem>
       </Select>
     </FormControl>
   );
diff --git a/torchci/lib/types.ts b/torchci/lib/types.ts
index 9bae26d883..9df9d824a1 100644
--- a/torchci/lib/types.ts
+++ b/torchci/lib/types.ts
@@ -149,7 +149,7 @@ export interface JobsPerCommitData {
 }
 
 export interface CompilerPerformanceData {
-  abs_latency: number,
+  abs_latency: number;
   accuracy: string;
   compilation_latency: number;
   compiler: string;
diff --git a/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx b/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
index 3b9b00942f..2f4d85a889 100644
--- a/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
+++ b/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
@@ -52,6 +52,7 @@ import {
   LOG_PREFIX,
   COMMIT_TO_WORKFLOW_ID,
   WORKFLOW_ID_TO_COMMIT,
+  SHA_DISPLAY_LENGTH,
 } from "../../compilers";
 import { CompilerPerformanceData } from "lib/types";
 import styles from "components/metrics.module.css";
@@ -73,16 +74,22 @@ const SCALE = 4;
 
 function CommitPanel({
   suite,
-  branch,
-  commit,
+  lBranch,
+  lCommit,
+  lDate,
+  rBranch,
+  rCommit,
+  rDate,
   workflowId,
-  date,
 }: {
   suite: string;
-  branch: string;
-  commit: string;
+  lBranch: string;
+  lCommit: string;
+  lDate: string;
+  rBranch: string;
+  rCommit: string;
+  rDate: string;
   workflowId: number;
-  date: string;
 }) {
   const queryCollection = "commons";
   const queryName = "get_workflow_jobs";
@@ -141,11 +148,16 @@ function CommitPanel({
   return (
     <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
       <Typography fontSize={"1rem"} fontStyle={"italic"}>
-        *This report was generated by CI running on PyTorch {branch} branch at{" "}
-        <a href={`${HUD_PREFIX}/${commit}#inductor-a100-perf-nightly`}>
-          {commit.substring(0, 7)}
+        *This report was generated by CI running on PyTorch {lBranch} branch at{" "}
+        <a href={`${HUD_PREFIX}/${lCommit}#inductor-a100-perf-nightly`}>
+          {lCommit.substring(0, SHA_DISPLAY_LENGTH)}
         </a>{" "}
-        on {dayjs(date).format("YYYY/MM/DD")}. The running logs per shard are:{" "}
+        on {dayjs(lDate).format("YYYY/MM/DD")} comparing with {rBranch} branch
+        at commit{" "}
+        <a href={`${HUD_PREFIX}/${rCommit}#inductor-a100-perf-nightly`}>
+          {rCommit.substring(0, SHA_DISPLAY_LENGTH)}
+        </a>
+        . The running logs per shard are:{" "}
         <LogLinks key={`log-${name}`} suite={name} logs={logs} />.
       </Typography>
     </Stack>
@@ -155,6 +167,7 @@ function CommitPanel({
 function ModelPanel({
   startTime,
   stopTime,
+  granularity,
   suite,
   mode,
   dtype,
@@ -169,6 +182,7 @@ function ModelPanel({
 }: {
   startTime: dayjs.Dayjs;
   stopTime: dayjs.Dayjs;
+  granularity: Granularity;
   suite: string;
   mode: string;
   dtype: string;
@@ -287,7 +301,7 @@ function ModelPanel({
                     : undefined;
 
                 const encodedName = encodeURIComponent(name);
-                const url = `/benchmark/${suite}/${compiler}?startTime=${startTime}&stopTime=${stopTime}&mode=${mode}&model=${encodedName}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
+                const url = `/benchmark/${suite}/${compiler}?startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&model=${encodedName}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                 if (lLog === undefined) {
                   return (
@@ -303,7 +317,7 @@ function ModelPanel({
                       </a>
                       &nbsp;(
                       <a target="_blank" rel="noreferrer" href={lLog}>
-                        <u>{lCommit.substr(0, 7)}</u>
+                        <u>{lCommit.substr(0, SHA_DISPLAY_LENGTH)}</u>
                       </a>
                       )
                     </>
@@ -317,11 +331,11 @@ function ModelPanel({
                     </a>
                     &nbsp;(
                     <a target="_blank" rel="noreferrer" href={rLog}>
-                      <u>{rCommit.substr(0, 7)}</u>
+                      <u>{rCommit.substr(0, SHA_DISPLAY_LENGTH)}</u>
                     </a>{" "}
                     →{" "}
                     <a target="_blank" rel="noreferrer" href={lLog}>
-                      <u>{lCommit.substr(0, 7)}</u>
+                      <u>{lCommit.substr(0, SHA_DISPLAY_LENGTH)}</u>
                     </a>
                     )
                   </>
@@ -691,9 +705,7 @@ function GraphPanel({
       record.compression_ratio = Number(
         record.compression_ratio.toFixed(SCALE)
       );
-      record.abs_latency = Number(
-        record.abs_latency.toFixed(SCALE)
-      );
+      record.abs_latency = Number(record.abs_latency.toFixed(SCALE));
       // Truncate the data to make it consistent with the display value
       return record;
     });
@@ -984,10 +996,17 @@ function Report({
     <div>
       <CommitPanel
         suite={suite}
-        branch={lBranch}
-        commit={lCommit}
+        lBranch={lBranch}
+        lCommit={lCommit}
+        lDate={lData[0].granularity_bucket}
+        rBranch={rBranch}
+        rCommit={rCommit}
+        rDate={
+          rData !== undefined && rData.length !== 0
+            ? rData[0].granularity_bucket
+            : undefined
+        }
         workflowId={lData[0].workflow_id}
-        date={lData[0].granularity_bucket}
       />
       <GraphPanel
         queryParams={queryParams}
@@ -1001,6 +1020,7 @@ function Report({
       <ModelPanel
         startTime={startTime}
         stopTime={stopTime}
+        granularity={granularity}
         suite={suite}
         mode={mode}
         dtype={dtype}
@@ -1060,6 +1080,12 @@ export default function Page() {
       }
     }
 
+    const granularity: Granularity =
+      (router.query.granularity as Granularity) ?? undefined;
+    if (granularity !== undefined) {
+      setGranularity(granularity);
+    }
+
     const mode: string = (router.query.mode as string) ?? undefined;
     if (mode !== undefined) {
       setMode(mode);
@@ -1090,7 +1116,11 @@ export default function Page() {
       setRCommit(rCommit);
     }
 
-    setBaseUrl(`${window.location.host}${router.asPath.replace(/\?.+/, "")}`);
+    setBaseUrl(
+      `${window.location.protocol}//${
+        window.location.host
+      }${router.asPath.replace(/\?.+/, "")}`
+    );
   }, [router.query]);
 
   if (suite === undefined || compiler === undefined) {
@@ -1153,7 +1183,7 @@ export default function Page() {
               startTime.toString()
             )}&stopTime=${encodeURIComponent(
               stopTime.toString()
-            )}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}` +
+            )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}` +
             (model === undefined ? "" : `&model=${model}`)
           }
         />
@@ -1166,6 +1196,7 @@ export default function Page() {
           setStopTime={setStopTime}
           timeRange={timeRange}
           setTimeRange={setTimeRange}
+          setGranularity={setGranularity}
         />
         <GranularityPicker
           granularity={granularity}
diff --git a/torchci/pages/benchmark/compilers.tsx b/torchci/pages/benchmark/compilers.tsx
index 21ad52075a..f5dcee078d 100644
--- a/torchci/pages/benchmark/compilers.tsx
+++ b/torchci/pages/benchmark/compilers.tsx
@@ -43,6 +43,7 @@ const ROW_GAP = 100;
 const ROW_HEIGHT = 38;
 const PASSRATE_DISPLAY_NAME_REGEX = new RegExp("^([0-9]+)%,\\s.+$");
 
+export const SHA_DISPLAY_LENGTH = 10;
 export const LAST_N_DAYS = 7;
 export const HUD_PREFIX = "/pytorch/pytorch/commit";
 export const TIME_FIELD_NAME = "granularity_bucket";
@@ -681,7 +682,7 @@ export function BranchAndCommitPicker({
         >
           {branches[branch].map((r: any) => (
             <MenuItem key={r.head_sha} value={r.head_sha}>
-              {r.head_sha.substring(0, 7)} (
+              {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} (
               {dayjs(r.event_time).format("YYYY/MM/DD")})
             </MenuItem>
           ))}
@@ -716,15 +717,21 @@ export function LogLinks({
 }
 
 function CommitPanel({
-  branch,
-  commit,
+  lBranch,
+  lCommit,
+  lDate,
+  rBranch,
+  rCommit,
+  rDate,
   workflowId,
-  date,
 }: {
-  branch: string;
-  commit: string;
+  lBranch: string;
+  lCommit: string;
+  lDate: string;
+  rBranch: string;
+  rCommit: string;
+  rDate: string;
   workflowId: number;
-  date: string;
 }) {
   const queryCollection = "commons";
   const queryName = "get_workflow_jobs";
@@ -780,12 +787,17 @@ function CommitPanel({
   return (
     <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
       <Typography fontSize={"1rem"} fontStyle={"italic"}>
-        *This report was generated by CI running on PyTorch {branch} branch at
+        *This report was generated by CI running on PyTorch {lBranch} branch at
         commit{" "}
-        <a href={`${HUD_PREFIX}/${commit}#inductor-a100-perf-nightly`}>
-          {commit.substring(0, 7)}
+        <a href={`${HUD_PREFIX}/${lCommit}#inductor-a100-perf-nightly`}>
+          {lCommit.substring(0, SHA_DISPLAY_LENGTH)}
         </a>{" "}
-        on {dayjs(date).format("YYYY/MM/DD")}. The running logs per shard are:{" "}
+        on {dayjs(lDate).format("YYYY/MM/DD")} comparing with {rBranch} branch
+        at commit{" "}
+        <a href={`${HUD_PREFIX}/${rCommit}#inductor-a100-perf-nightly`}>
+          {rCommit.substring(0, SHA_DISPLAY_LENGTH)}
+        </a>
+        . The running logs per shard are:{" "}
         {Object.keys(SUITES).map((suite: string) => {
           // Hack alert: The test configuration uses timm instead of timm_model as its output
           const name = suite.includes("timm") ? "timm" : suite;
@@ -900,6 +912,7 @@ function extractPercentage(value: string) {
 function SummaryPanel({
   startTime,
   stopTime,
+  granularity,
   mode,
   dtype,
   lBranch,
@@ -911,6 +924,7 @@ function SummaryPanel({
 }: {
   startTime: dayjs.Dayjs;
   stopTime: dayjs.Dayjs;
+  granularity: Granularity;
   mode: string;
   dtype: string;
   lBranch: string;
@@ -1009,7 +1023,7 @@ function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?startTime=${startTime}&stopTime=${stopTime}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
+                    }?startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = extractPercentage(v.l);
                     const r = extractPercentage(v.r);
@@ -1097,7 +1111,7 @@ function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?startTime=${startTime}&stopTime=${stopTime}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
+                    }?startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(SCALE);
                     const r = Number(v.r).toFixed(SCALE);
@@ -1188,7 +1202,7 @@ function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?startTime=${startTime}&stopTime=${stopTime}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
+                    }?startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(0);
                     const r = Number(v.r).toFixed(0);
@@ -1292,7 +1306,7 @@ function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?startTime=${startTime}&stopTime=${stopTime}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
+                    }?startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(SCALE);
                     const r = Number(v.r).toFixed(SCALE);
@@ -1753,14 +1767,18 @@ function Report({
   return (
     <div>
       <CommitPanel
-        branch={lBranch}
-        commit={lCommit}
+        lBranch={lBranch}
+        lCommit={lCommit}
+        lDate={lData[0].granularity_bucket}
+        rBranch={rBranch}
+        rCommit={rCommit}
+        rDate={rData[0].granularity_bucket}
         workflowId={lData[0].workflow_id}
-        date={lData[0].granularity_bucket}
       />
       <SummaryPanel
         startTime={startTime}
         stopTime={stopTime}
+        granularity={granularity}
         mode={mode}
         dtype={dtype}
         lBranch={lBranch}
@@ -1821,6 +1839,12 @@ export default function Page() {
       }
     }
 
+    const granularity: Granularity =
+      (router.query.granularity as Granularity) ?? undefined;
+    if (granularity !== undefined) {
+      setGranularity(granularity);
+    }
+
     const suite: string = (router.query.suite as string) ?? undefined;
     if (suite !== undefined) {
       setSuite(suite);
@@ -1856,7 +1880,11 @@ export default function Page() {
       setRCommit(rCommit);
     }
 
-    setBaseUrl(`${window.location.host}${router.asPath.replace(/\?.+/, "")}`);
+    setBaseUrl(
+      `${window.location.protocol}//${
+        window.location.host
+      }${router.asPath.replace(/\?.+/, "")}`
+    );
   }, [router.query]);
 
   const queryParams: RocksetParam[] = [
@@ -1903,7 +1931,7 @@ export default function Page() {
             startTime.toString()
           )}&stopTime=${encodeURIComponent(
             stopTime.toString()
-          )}&suite=${suite}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`}
+          )}&granularity=${granularity}&suite=${suite}&mode=${mode}&dtype=${dtype}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`}
         />
       </Stack>
       <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
@@ -1914,6 +1942,7 @@ export default function Page() {
           setStopTime={setStopTime}
           timeRange={timeRange}
           setTimeRange={setTimeRange}
+          setGranularity={setGranularity}
         />
         <GranularityPicker
           granularity={granularity}
diff --git a/torchci/pages/metrics.tsx b/torchci/pages/metrics.tsx
index bb87a11853..7d06999a18 100644
--- a/torchci/pages/metrics.tsx
+++ b/torchci/pages/metrics.tsx
@@ -254,6 +254,7 @@ export function TimeRangePicker({
   setStopTime,
   timeRange,
   setTimeRange,
+  setGranularity,
 }: {
   startTime: dayjs.Dayjs;
   setStartTime: any;
@@ -261,6 +262,7 @@ export function TimeRangePicker({
   setStopTime: any;
   timeRange: any;
   setTimeRange: any;
+  setGranularity?: any;
 }) {
   function updateTimeRange() {
     if (timeRange === -1) {
@@ -288,6 +290,30 @@ export function TimeRangePicker({
       const stopTime = dayjs();
       setStopTime(stopTime);
     }
+
+    if (setGranularity === undefined) {
+      return;
+    }
+
+    // When setGranularity is provided, this picker can use it to switch to a
+    // bigger granularity automatically when a longer time range is selected.
+    // The users can still select a smaller granularity if they want to
+    switch (e.target.value as number) {
+      case 1:
+      case 3:
+      case 7:
+      case 14:
+        setGranularity("hour");
+        break;
+      case 30:
+        setGranularity("day");
+        break;
+      case 90:
+      case 180:
+      case 365:
+        setGranularity("week");
+        break;
+    }
   }
 
   return (
diff --git a/torchci/rockset/inductor/__sql/compilers_benchmark_performance.sql b/torchci/rockset/inductor/__sql/compilers_benchmark_performance.sql
index 9c3b275780..2b6c906f4b 100644
--- a/torchci/rockset/inductor/__sql/compilers_benchmark_performance.sql
+++ b/torchci/rockset/inductor/__sql/compilers_benchmark_performance.sql
@@ -124,4 +124,4 @@ ORDER BY
   workflow_id DESC,
   suite ASC,
   compiler ASC,
-  name ASC
\ No newline at end of file
+  name ASC
diff --git a/torchci/rockset/inductor/__sql/compilers_benchmark_performance_branches.sql b/torchci/rockset/inductor/__sql/compilers_benchmark_performance_branches.sql
index a937bc93b5..c33614fb79 100644
--- a/torchci/rockset/inductor/__sql/compilers_benchmark_performance_branches.sql
+++ b/torchci/rockset/inductor/__sql/compilers_benchmark_performance_branches.sql
@@ -1,15 +1,23 @@
-SELECT DISTINCT
-  w.head_branch,
+SELECT
+  DISTINCT w.head_branch,
   w.head_sha,
   w.id,
   FORMAT_ISO8601(
-    DATE_TRUNC(: granularity, torch_dynamo_perf_stats._event_time)
-  ) AS event_time
+    DATE_TRUNC(
+      : granularity, torch_dynamo_perf_stats._event_time
+    )
+  ) AS event_time,
 FROM
-  inductor.torch_dynamo_perf_stats LEFT JOIN commons.workflow_run w ON torch_dynamo_perf_stats.workflow_id = w.id
+  inductor.torch_dynamo_perf_stats
+  LEFT JOIN commons.workflow_run w ON torch_dynamo_perf_stats.workflow_id = w.id
 WHERE
-  torch_dynamo_perf_stats._event_time >= PARSE_DATETIME_ISO8601(:startTime)
-  AND torch_dynamo_perf_stats._event_time < PARSE_DATETIME_ISO8601(:stopTime)
+  torch_dynamo_perf_stats._event_time >= PARSE_DATETIME_ISO8601(: startTime)
+  AND torch_dynamo_perf_stats._event_time < PARSE_DATETIME_ISO8601(: stopTime)
+  AND torch_dynamo_perf_stats.filename LIKE '%_performance'
+  AND torch_dynamo_perf_stats.filename LIKE CONCAT(
+    '%_', : dtypes, '_', : mode, '_', : device,
+    '_%'
+  )
 ORDER BY
   w.head_branch,
-  event_time DESC
\ No newline at end of file
+  event_time DESC
diff --git a/torchci/rockset/inductor/compilers_benchmark_performance.lambda.json b/torchci/rockset/inductor/compilers_benchmark_performance.lambda.json
index 2eca213252..b97cf9bdda 100644
--- a/torchci/rockset/inductor/compilers_benchmark_performance.lambda.json
+++ b/torchci/rockset/inductor/compilers_benchmark_performance.lambda.json
@@ -68,4 +68,4 @@
     }
   ],
   "description": "Gather the benchmark performance of different PyTorch compilers"
-}
\ No newline at end of file
+}
diff --git a/torchci/rockset/inductor/compilers_benchmark_performance_branches.lambda.json b/torchci/rockset/inductor/compilers_benchmark_performance_branches.lambda.json
index 828efeb3d6..e9ac17c6db 100644
--- a/torchci/rockset/inductor/compilers_benchmark_performance_branches.lambda.json
+++ b/torchci/rockset/inductor/compilers_benchmark_performance_branches.lambda.json
@@ -1,11 +1,26 @@
 {
   "sql_path": "__sql/compilers_benchmark_performance_branches.sql",
   "default_parameters": [
+    {
+      "name": "device",
+      "type": "string",
+      "value": "cuda"
+    },
+    {
+      "name": "dtypes",
+      "type": "string",
+      "value": "amp"
+    },
     {
       "name": "granularity",
       "type": "string",
       "value": "day"
     },
+    {
+      "name": "mode",
+      "type": "string",
+      "value": "training"
+    },
     {
       "name": "startTime",
       "type": "string",
diff --git a/torchci/rockset/prodVersions.json b/torchci/rockset/prodVersions.json
index c890564121..40dff80cab 100644
--- a/torchci/rockset/prodVersions.json
+++ b/torchci/rockset/prodVersions.json
@@ -77,11 +77,11 @@
   },
   "inductor": {
     "compilers_benchmark_performance": "d43601277905c4a0",
-    "compilers_benchmark_performance_branches": "f259d06862b41888"
+    "compilers_benchmark_performance_branches": "8896fe6bbd61e7dc"
   },
   "utilization": {
     "runner_utilization": "2dfc4f9c16e51da0",
     "runner_utilization_by_repo": "2ca7468c6f158924",
     "runner_utilization_by_activity": "343929e0ebeee379"
   }
-}
\ No newline at end of file
+}