From cd07cf1cbd8df9a5591b9002b2b68eae8d27fc2f Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Thu, 25 Sep 2025 10:07:55 +0200
Subject: [PATCH 1/7] Move some files around

---
 apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts  | 2 +-
 apps/insights/src/app/price-feeds/[slug]/(main)/page.ts     | 2 +-
 .../components/PriceFeed/{ => Chart}/chart-page.module.scss | 0
 .../src/components/PriceFeed/{ => Chart}/chart-page.tsx     | 2 +-
 .../src/components/PriceFeed/{ => Chart}/chart.module.scss  | 0
 .../insights/src/components/PriceFeed/{ => Chart}/chart.tsx | 6 +++---
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename apps/insights/src/components/PriceFeed/{ => Chart}/chart-page.module.scss (100%)
 rename apps/insights/src/components/PriceFeed/{ => Chart}/chart-page.tsx (98%)
 rename apps/insights/src/components/PriceFeed/{ => Chart}/chart.module.scss (100%)
 rename apps/insights/src/components/PriceFeed/{ => Chart}/chart.tsx (97%)

diff --git a/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts b/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
index a1085ea612..62f0c87e75 100644
--- a/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
+++ b/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
@@ -1 +1 @@
-export { ChartPageLoading as default } from "../../../../components/PriceFeed/chart-page";
+export { ChartPageLoading as default } from "../../../../components/PriceFeed/Chart/chart-page";
diff --git a/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts b/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
index 165ad5abcd..10e4cc3c72 100644
--- a/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
+++ b/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
@@ -1,3 +1,3 @@
-export { ChartPage as default } from "../../../../components/PriceFeed/chart-page";
+export { ChartPage as default } from "../../../../components/PriceFeed/Chart/chart-page";
 
 export const revalidate = 3600;
diff --git a/apps/insights/src/components/PriceFeed/chart-page.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart-page.module.scss
similarity index 100%
rename from apps/insights/src/components/PriceFeed/chart-page.module.scss
rename to apps/insights/src/components/PriceFeed/Chart/chart-page.module.scss
diff --git a/apps/insights/src/components/PriceFeed/chart-page.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
similarity index 98%
rename from apps/insights/src/components/PriceFeed/chart-page.tsx
rename to apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
index aa2797827d..32ce4fc071 100644
--- a/apps/insights/src/components/PriceFeed/chart-page.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
@@ -5,7 +5,7 @@ import { Spinner } from "@pythnetwork/component-library/Spinner";
 
 import { Chart } from "./chart";
 import styles from "./chart-page.module.scss";
-import { getFeed } from "./get-feed";
+import { getFeed } from "../get-feed";
 
 type Props = {
   params: Promise<{
diff --git a/apps/insights/src/components/PriceFeed/chart.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
similarity index 100%
rename from apps/insights/src/components/PriceFeed/chart.module.scss
rename to apps/insights/src/components/PriceFeed/Chart/chart.module.scss
diff --git a/apps/insights/src/components/PriceFeed/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
similarity index 97%
rename from apps/insights/src/components/PriceFeed/chart.tsx
rename to apps/insights/src/components/PriceFeed/Chart/chart.tsx
index 478d1172cd..c2dfa2c1ff 100644
--- a/apps/insights/src/components/PriceFeed/chart.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -10,9 +10,9 @@ import { useEffect, useRef, useCallback } from "react";
 import { z } from "zod";
 
 import styles from "./chart.module.scss";
-import { useLivePriceData } from "../../hooks/use-live-price-data";
-import { usePriceFormatter } from "../../hooks/use-price-formatter";
-import { Cluster } from "../../services/pyth";
+import { useLivePriceData } from "../../../hooks/use-live-price-data";
+import { usePriceFormatter } from "../../../hooks/use-price-formatter";
+import { Cluster } from "../../../services/pyth";
 
 type Props = {
   symbol: string;

From 3498c556621072c25cc1df61bbea965882291e0f Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Thu, 25 Sep 2025 17:25:16 +0200
Subject: [PATCH 2/7] feat: Add resolution/lookback support to charts

---
 .../src/app/historical-prices/route.ts        | 103 +++-
 .../components/PriceFeed/Chart/chart-page.tsx |   3 +-
 .../PriceFeed/Chart/chart-toolbar.tsx         |  95 ++++
 .../PriceFeed/Chart/chart.module.scss         |   8 +-
 .../src/components/PriceFeed/Chart/chart.tsx  | 483 ++++++++++++------
 .../PriceFeed/Chart/use-chart-toolbar.tsx     |  58 +++
 apps/insights/src/services/clickhouse.ts      |  68 ++-
 7 files changed, 643 insertions(+), 175 deletions(-)
 create mode 100644 apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
 create mode 100644 apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx

diff --git a/apps/insights/src/app/historical-prices/route.ts b/apps/insights/src/app/historical-prices/route.ts
index b989d7360d..2b7ea12276 100644
--- a/apps/insights/src/app/historical-prices/route.ts
+++ b/apps/insights/src/app/historical-prices/route.ts
@@ -1,17 +1,102 @@
 import type { NextRequest } from "next/server";
+import { z } from "zod";
 
 import { getHistoricalPrices } from "../../services/clickhouse";
 
+const queryParamsSchema = z.object({
+  symbol: z.string().transform(decodeURIComponent),
+  publisher: z
+    .string()
+    .nullable()
+    .transform((value) => value ?? undefined),
+  cluster: z.enum(["pythnet", "pythtest"]),
+  from: z.string().transform(Number),
+  to: z.string().transform(Number),
+  resolution: z.enum(["1s", "1m", "5m", "1H", "1D"]).transform((value) => {
+    switch (value) {
+      case "1s": {
+        return "1 SECOND";
+      }
+      case "1m": {
+        return "1 MINUTE";
+      }
+      case "5m": {
+        return "5 MINUTE";
+      }
+      case "1H": {
+        return "1 HOUR";
+      }
+      case "1D": {
+        return "1 DAY";
+      }
+    }
+  }),
+});
+
 export async function GET(req: NextRequest) {
-  const symbol = req.nextUrl.searchParams.get("symbol");
-  const until = req.nextUrl.searchParams.get("until");
-  if (symbol && until) {
-    const res = await getHistoricalPrices({
-      symbol: decodeURIComponent(symbol),
-      until,
+  const parsed = queryParamsSchema.safeParse(
+    Object.fromEntries(
+      Object.keys(queryParamsSchema.shape).map((key) => [
+        key,
+        req.nextUrl.searchParams.get(key),
+      ]),
+    ),
+  );
+  if (!parsed.success) {
+    return new Response(`Invalid params: ${parsed.error.message}`, {
+      status: 400,
+    });
+  }
+
+  const { symbol, publisher, cluster, from, to, resolution } = parsed.data;
+
+  try {
+    checkMaxDataPointsInvariant(from, to, resolution);
+  } catch {
+    return new Response("Unsupported resolution for date range", {
+      status: 400,
     });
-    return Response.json(res);
-  } else {
-    return new Response("Must provide `symbol` and `until`", { status: 400 });
+  }
+
+  const res = await getHistoricalPrices({
+    symbol,
+    from,
+    to,
+    publisher,
+    cluster,
+    resolution,
+  });
+
+  return Response.json(res);
+}
+
+const MAX_DATA_POINTS = 3000;
+function checkMaxDataPointsInvariant(
+  from: number,
+  to: number,
+  resolution: "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY",
+) {
+  let diff = to - from;
+  switch (resolution) {
+    case "1 MINUTE": {
+      diff = diff / 60;
+      break;
+    }
+    case "5 MINUTE": {
+      diff = diff / 60 / 5;
+      break;
+    }
+    case "1 HOUR": {
+      diff = diff / 3600;
+      break;
+    }
+    case "1 DAY": {
+      diff = diff / 86_400;
+      break;
+    }
+  }
+
+  if (diff > MAX_DATA_POINTS) {
+    throw new Error("Unsupported resolution for date range");
   }
 }
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
index 32ce4fc071..a60cfe9506 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
@@ -6,6 +6,7 @@ import { Spinner } from "@pythnetwork/component-library/Spinner";
 import { Chart } from "./chart";
 import styles from "./chart-page.module.scss";
 import { getFeed } from "../get-feed";
+import { ChartToolbar } from "./chart-toolbar";
 
 type Props = {
   params: Promise<{
@@ -26,7 +27,7 @@ type ChartPageImplProps =
     });
 
 const ChartPageImpl = (props: ChartPageImplProps) => (
-  <Card title="Chart" className={styles.chartCard}>
+  <Card title="Chart" className={styles.chartCard} toolbar={<ChartToolbar />}>
     <div className={styles.chart}>
       {props.isLoading ? (
         <div className={styles.spinnerContainer}>
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
new file mode 100644
index 0000000000..48c003eb9e
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
@@ -0,0 +1,95 @@
+"use client";
+import { Select } from "@pythnetwork/component-library/Select";
+import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
+import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useCallback } from "react";
+import type { Key } from "react-aria";
+
+import type { Lookback, Resolution } from "./use-chart-toolbar";
+import {
+  LOOKBACK_TO_RESOLUTION,
+  LOOKBACKS,
+  RESOLUTION_TO_LOOKBACK,
+  RESOLUTIONS,
+  useChartLookback,
+  useChartResolution,
+} from "./use-chart-toolbar";
+
+export const ChartToolbar = () => {
+  const logger = useLogger();
+  const [lookback, setLookback] = useChartLookback();
+  const [resolution, setResolution] = useChartResolution();
+
+  const handleLookbackChange = useCallback(
+    (newValue: Key) => {
+      if (!isLookback(newValue)) {
+        throw new TypeError("Invalid lookback");
+      }
+      const lookback: Lookback = newValue;
+      setLookback(lookback).catch((error: unknown) => {
+        logger.error("Failed to update lookback", error);
+      });
+      setResolution(LOOKBACK_TO_RESOLUTION[lookback]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update resolution", error);
+        },
+      );
+    },
+    [logger, setLookback, setResolution],
+  );
+
+  const handleResolutionChanged = useCallback(
+    (newValue: Key) => {
+      if (!isResolution(newValue)) {
+        throw new TypeError("Invalid resolution");
+      }
+      const resolution: Resolution = newValue;
+      setResolution(resolution).catch((error: unknown) => {
+        logger.error("Failed to update resolution", error);
+      });
+      setLookback(RESOLUTION_TO_LOOKBACK[resolution]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update lookback", error);
+        },
+      );
+    },
+    [logger, setResolution, setLookback],
+  );
+
+  return (
+    <>
+      <Select
+        label="Resolution"
+        hideLabel={true}
+        options={RESOLUTIONS.map((resolution) => ({
+          id: resolution,
+          label: resolution,
+        }))}
+        selectedKey={resolution}
+        onSelectionChange={handleResolutionChanged}
+        size="sm"
+        variant="outline"
+      />
+      <SingleToggleGroup
+        selectedKey={lookback}
+        onSelectionChange={handleLookbackChange}
+        rounded
+        items={[
+          { id: "1m", children: "1m" },
+          { id: "1H", children: "1H" },
+          { id: "1D", children: "1D" },
+          { id: "1W", children: "1W" },
+          { id: "1M", children: "1M" },
+        ]}
+      />
+    </>
+  );
+};
+
+function isLookback(value: Key): value is Lookback {
+  return LOOKBACKS.includes(value as Lookback);
+}
+
+function isResolution(value: Key): value is Resolution {
+  return RESOLUTIONS.includes(value as Resolution);
+}
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
index c68b370cc0..8c5b1d620e 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
@@ -1,12 +1,16 @@
 @use "@pythnetwork/component-library/theme";
 
 .chart {
-  --border-light: #{theme.pallette-color("stone", 300)};
-  --border-dark: #{theme.pallette-color("steel", 600)};
+  --chart-background-light: #{theme.pallette-color("white")};
+  --chart-background-dark: #{theme.pallette-color("steel", 900)};
+  --border-light: #{theme.pallette-color("stone", 100)};
+  --border-dark: #{theme.pallette-color("steel", 900)};
   --muted-light: #{theme.pallette-color("stone", 700)};
   --muted-dark: #{theme.pallette-color("steel", 300)};
   --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
   --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
   --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
   --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-muted-light: #{theme.pallette-color("violet", 100)};
+  --chart-series-muted-dark: #{theme.pallette-color("violet", 950)};
 }
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
index c2dfa2c1ff..9f8b699df8 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -2,14 +2,36 @@
 
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useResizeObserver, useMountEffect } from "@react-hookz/web";
-import type { IChartApi, ISeriesApi, UTCTimestamp } from "lightweight-charts";
-import { LineSeries, LineStyle, createChart } from "lightweight-charts";
+import {
+  startOfMinute,
+  startOfHour,
+  startOfDay,
+  startOfSecond,
+} from "date-fns";
+import type {
+  IChartApi,
+  ISeriesApi,
+  LineData,
+  UTCTimestamp,
+  WhitespaceData,
+} from "lightweight-charts";
+import {
+  AreaSeries,
+  LineSeries,
+  LineStyle,
+  createChart,
+} from "lightweight-charts";
 import { useTheme } from "next-themes";
 import type { RefObject } from "react";
-import { useEffect, useRef, useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { z } from "zod";
 
 import styles from "./chart.module.scss";
+import {
+  lookbackToMilliseconds,
+  useChartLookback,
+  useChartResolution,
+} from "./use-chart-toolbar";
 import { useLivePriceData } from "../../../hooks/use-live-price-data";
 import { usePriceFormatter } from "../../../hooks/use-price-formatter";
 import { Cluster } from "../../../services/pyth";
@@ -40,168 +62,290 @@ const useChart = (symbol: string, feedId: string) => {
 
 const useChartElem = (symbol: string, feedId: string) => {
   const logger = useLogger();
-  const { current } = useLivePriceData(Cluster.Pythnet, feedId);
+  const [lookback] = useChartLookback();
+  const [resolution] = useChartResolution();
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<ChartRefContents | undefined>(undefined);
-  const earliestDateRef = useRef<bigint | undefined>(undefined);
   const isBackfilling = useRef(false);
   const priceFormatter = usePriceFormatter();
+  const resolutionRef = useRef(resolution);
+  const abortControllerRef = useRef<AbortController | undefined>(undefined);
 
-  const backfillData = useCallback(() => {
-    if (!isBackfilling.current && earliestDateRef.current) {
+  useEffect(() => {
+    resolutionRef.current = resolution;
+  }, [resolution]);
+
+  const { current: livePriceData } = useLivePriceData(Cluster.Pythnet, feedId);
+
+  const didResetVisibleRange = useRef(false);
+  const didLoadInitialData = useRef(false);
+
+  // Update the chart with the historical and live price data
+  useEffect(() => {
+    // Historical
+    if (!chartRef.current || !didLoadInitialData.current || !livePriceData) {
+      return;
+    }
+
+    // Update last data point
+    const { price, confidence } = livePriceData.aggregate;
+    const timestampMs = startOfResolution(
+      new Date(Number(livePriceData.timestamp) * 1000),
+      resolution,
+    );
+
+    const time = (timestampMs / 1000) as UTCTimestamp;
+
+    const priceData: LineData = { time, value: price };
+    const confidenceHighData: LineData = { time, value: price + confidence };
+    const confidenceLowData: LineData = { time, value: price - confidence };
+
+    const lastDataPoint = chartRef.current.price.data().at(-1);
+
+    if (lastDataPoint && lastDataPoint.time > priceData.time) {
+      return;
+    }
+
+    chartRef.current.confidenceHigh.update(confidenceHighData);
+    chartRef.current.confidenceLow.update(confidenceLowData);
+    chartRef.current.price.update(priceData);
+  }, [livePriceData, resolution]);
+
+  function maybeResetVisibleRange() {
+    if (chartRef.current === undefined || didResetVisibleRange.current) {
+      return;
+    }
+    const data = chartRef.current.price.data();
+    const first = data.at(0);
+    const last = data.at(-1);
+    if (!first || !last) {
+      return;
+    }
+    chartRef.current.chart
+      .timeScale()
+      .setVisibleRange({ from: first.time, to: last.time });
+    didResetVisibleRange.current = true;
+  }
+
+  const fetchHistoricalData = useCallback(
+    function fetchHistoricalData({
+      from,
+      to,
+      resolution,
+    }: {
+      from: number;
+      to: number;
+      resolution: string;
+    }) {
+      if (isBackfilling.current) {
+        return;
+      }
       isBackfilling.current = true;
       const url = new URL("/historical-prices", globalThis.location.origin);
       url.searchParams.set("symbol", symbol);
-      url.searchParams.set("until", earliestDateRef.current.toString());
-      fetch(url)
+      url.searchParams.set("from", from.toString());
+      url.searchParams.set("to", to.toString());
+      url.searchParams.set("resolution", resolution);
+      url.searchParams.set("cluster", "pythnet");
+
+      abortControllerRef.current = new AbortController();
+      abortControllerRef.current.signal.addEventListener("abort", () => {
+        isBackfilling.current = false;
+      });
+
+      fetch(url, { signal: abortControllerRef.current.signal })
         .then(async (data) => historicalDataSchema.parse(await data.json()))
         .then((data) => {
-          const firstPoint = data[0];
-          if (firstPoint) {
-            earliestDateRef.current = BigInt(firstPoint.timestamp);
+          if (!chartRef.current) {
+            return;
           }
-          if (
-            chartRef.current &&
-            chartRef.current.resolution === Resolution.Tick
-          ) {
-            const convertedData = data.map(
-              ({ timestamp, price, confidence }) => ({
-                time: getLocalTimestamp(new Date(timestamp * 1000)),
-                price,
-                confidence,
-              }),
-            );
-            chartRef.current.price.setData([
-              ...convertedData.map(({ time, price }) => ({
-                time,
-                value: price,
-              })),
-              ...chartRef.current.price.data(),
-            ]);
-            chartRef.current.confidenceHigh.setData([
-              ...convertedData.map(({ time, price, confidence }) => ({
-                time,
-                value: price + confidence,
-              })),
-              ...chartRef.current.confidenceHigh.data(),
-            ]);
-            chartRef.current.confidenceLow.setData([
-              ...convertedData.map(({ time, price, confidence }) => ({
-                time,
-                value: price - confidence,
-              })),
-              ...chartRef.current.confidenceLow.data(),
-            ]);
-          }
-          isBackfilling.current = false;
+
+          // Get the current historical price data
+          const currentHistoricalPriceData = chartRef.current.price
+            .data()
+            .filter((d) => isLineData(d));
+          const currentHistoricalConfidenceHighData =
+            chartRef.current.confidenceHigh.data().filter((d) => isLineData(d));
+          const currentHistoricalConfidenceLowData =
+            chartRef.current.confidenceLow.data().filter((d) => isLineData(d));
+
+          const newHistoricalPriceData = data.map((d) => ({
+            time: Number(d.timestamp) as UTCTimestamp,
+            value: d.price,
+          }));
+          const newHistoricalConfidenceHighData = data.map((d) => ({
+            time: Number(d.timestamp) as UTCTimestamp,
+            value: d.price + d.confidence,
+          }));
+          const newHistoricalConfidenceLowData = data.map((d) => ({
+            time: Number(d.timestamp) as UTCTimestamp,
+            value: d.price - d.confidence,
+          }));
+
+          // Combine the current and new historical price data
+          const mergedPriceData = mergeData(
+            currentHistoricalPriceData,
+            newHistoricalPriceData,
+          );
+          const mergedConfidenceHighData = mergeData(
+            currentHistoricalConfidenceHighData,
+            newHistoricalConfidenceHighData,
+          );
+          const mergedConfidenceLowData = mergeData(
+            currentHistoricalConfidenceLowData,
+            newHistoricalConfidenceLowData,
+          );
+
+          // Set the new historical price data and (maybe) reset the visible range
+          chartRef.current.price.setData(mergedPriceData);
+          chartRef.current.confidenceHigh.setData(mergedConfidenceHighData);
+          chartRef.current.confidenceLow.setData(mergedConfidenceLowData);
+          maybeResetVisibleRange();
+          didLoadInitialData.current = true;
         })
         .catch((error: unknown) => {
+          if (error instanceof Error && error.name === "AbortError") {
+            return;
+          }
           logger.error("Error fetching historical prices", error);
+        })
+        .finally(() => {
+          isBackfilling.current = false;
         });
-    }
-  }, [logger, symbol]);
+    },
+    [symbol, chartRef, logger],
+  );
 
   useMountEffect(() => {
     const chartElem = chartContainerRef.current;
     if (chartElem === null) {
       throw new Error("Chart element was null on mount");
-    } else {
-      const chart = createChart(chartElem, {
-        layout: {
-          attributionLogo: false,
-          background: { color: "transparent" },
-        },
-        timeScale: {
-          timeVisible: true,
-          secondsVisible: true,
+    }
+    if (chartRef.current) {
+      chartRef.current.chart.remove();
+    }
+    const chart = createChart(chartElem, {
+      layout: {
+        attributionLogo: false,
+        background: { color: "transparent" },
+      },
+      grid: {
+        horzLines: {
+          color: "transparent",
         },
-        localization: {
-          priceFormatter: priceFormatter.format,
+        vertLines: {
+          color: "transparent",
         },
-      });
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: true,
+      },
+      localization: {
+        priceFormatter: priceFormatter.format,
+      },
+    });
 
-      const price = chart.addSeries(LineSeries, { priceFormat });
-
-      chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
-        if (
-          range && // if (range.to - range.from > 1000) {
-          //   console.log("DECREASE RESOLUTION");
-          // } else if (range.to - range.from < 100) {
-          //   console.log("INCREASE RESOLUTION");
-          // } else if (range.from < 10) {
-          range.from < 10
-        ) {
-          backfillData();
-        }
-      });
+    const confidenceHigh = chart.addSeries(AreaSeries, confidenceConfig);
+    const confidenceLow = chart.addSeries(AreaSeries, confidenceConfig);
+    const price = chart.addSeries(LineSeries, { priceFormat });
 
-      chartRef.current = {
-        resolution: Resolution.Tick,
-        chart,
-        confidenceHigh: chart.addSeries(LineSeries, confidenceConfig),
-        confidenceLow: chart.addSeries(LineSeries, confidenceConfig),
-        price,
-      };
-      return () => {
-        chart.remove();
-      };
-    }
-  });
+    chart.timeScale().subscribeVisibleTimeRangeChange((range) => {
+      if (!range || !didLoadInitialData.current) {
+        return;
+      }
+      const { from, to } = range;
+      const first = chartRef.current?.price.data().at(0);
 
-  useEffect(() => {
-    if (current && chartRef.current) {
-      earliestDateRef.current ??= current.timestamp;
-      const { price, confidence } = current.aggregate;
-      const time = getLocalTimestamp(
-        new Date(Number(current.timestamp * 1000n)),
+      if (!from || !to || !first) {
+        return;
+      }
+
+      const fromMs = Number(from) * 1000;
+      const toMs = Number(to) * 1000;
+      const firstMs = Number(first.time) * 1000;
+
+      const visibleRangeMs = toMs - fromMs;
+
+      const remainingDataMs = fromMs - firstMs;
+      const threshold = visibleRangeMs * 0.1;
+
+      const newToMs = firstMs;
+      const newFromMs = startOfResolution(
+        new Date(newToMs - visibleRangeMs),
+        resolutionRef.current,
       );
-      if (chartRef.current.resolution === Resolution.Tick) {
-        chartRef.current.price.update({ time, value: price });
-        chartRef.current.confidenceHigh.update({
-          time,
-          value: price + confidence,
-        });
-        chartRef.current.confidenceLow.update({
-          time,
-          value: price - confidence,
+
+      // When we're getting close to the earliest data, we need to backfill more
+      if (remainingDataMs <= threshold) {
+        fetchHistoricalData({
+          from: newFromMs / 1000,
+          to: newToMs / 1000,
+          resolution: resolutionRef.current,
         });
       }
+    });
+
+    chartRef.current = {
+      chart,
+      confidenceHigh,
+      confidenceLow,
+      price,
+    };
+
+    return () => {
+      chart.remove();
+    };
+  });
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return;
     }
-  }, [current]);
+
+    const now = new Date();
+    const to = startOfResolution(now, resolution);
+    const from = startOfResolution(
+      new Date(now.getTime() - lookbackToMilliseconds(lookback)),
+      resolution,
+    );
+
+    didResetVisibleRange.current = false;
+    didLoadInitialData.current = false;
+    chartRef.current.price.setData([]);
+    chartRef.current.confidenceHigh.setData([]);
+    chartRef.current.confidenceLow.setData([]);
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort("Reset visible range");
+      abortControllerRef.current = undefined;
+    }
+
+    fetchHistoricalData({
+      from: from / 1000,
+      to: to / 1000,
+      resolution,
+    });
+  }, [lookback, resolution, fetchHistoricalData]);
 
   return { chartRef, chartContainerRef };
 };
 
-enum Resolution {
-  Tick,
-  Minute,
-  Hour,
-  Day,
-}
-
 type ChartRefContents = {
   chart: IChartApi;
-} & (
-  | {
-      resolution: Resolution.Tick;
-      confidenceHigh: ISeriesApi<"Line">;
-      confidenceLow: ISeriesApi<"Line">;
-      price: ISeriesApi<"Line">;
-    }
-  | {
-      resolution: Exclude<Resolution, Resolution.Tick>;
-      series: ISeriesApi<"Candlestick">;
-    }
-);
+} & {
+  confidenceHigh: ISeriesApi<"Area">;
+  confidenceLow: ISeriesApi<"Area">;
+  price: ISeriesApi<"Line">;
+};
 
 const historicalDataSchema = z.array(
   z.strictObject({
-    timestamp: z.number(),
+    timestamp: z.number().transform(BigInt),
     price: z.number(),
     confidence: z.number(),
   }),
 );
-
 const priceFormat = {
   type: "price",
   precision: 5,
@@ -247,39 +391,44 @@ const applyColors = (
   chart.applyOptions({
     grid: {
       horzLines: {
-        color: colors.border,
+        visible: false,
       },
       vertLines: {
-        color: colors.border,
+        visible: false,
       },
     },
     layout: {
       textColor: colors.muted,
     },
     timeScale: {
-      borderColor: colors.muted,
+      borderColor: colors.border,
     },
     rightPriceScale: {
-      borderColor: colors.muted,
+      borderColor: colors.border,
     },
   });
-  if (series.resolution === Resolution.Tick) {
-    series.confidenceHigh.applyOptions({
-      color: colors.chartNeutral,
-    });
-    series.confidenceLow.applyOptions({
-      color: colors.chartNeutral,
-    });
-    series.price.applyOptions({
-      color: colors.chartPrimary,
-    });
-  }
+  series.confidenceHigh.applyOptions({
+    lineColor: colors.chartConfidence,
+    priceLineColor: colors.chartConfidence,
+    topColor: colors.chartConfidence,
+    bottomColor: colors.chartConfidence,
+  });
+  series.confidenceLow.applyOptions({
+    lineColor: colors.chartConfidence,
+    priceLineColor: colors.chartConfidence,
+    topColor: colors.background,
+    bottomColor: colors.background,
+  });
+  series.price.applyOptions({
+    color: colors.chartPrimary,
+  });
 };
 
 const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
   const style = getComputedStyle(container);
 
   return {
+    background: style.getPropertyValue(`--chart-background-${resolvedTheme}`),
     border: style.getPropertyValue(`--border-${resolvedTheme}`),
     muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
     chartNeutral: style.getPropertyValue(
@@ -288,16 +437,54 @@ const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
     chartPrimary: style.getPropertyValue(
       `--chart-series-primary-${resolvedTheme}`,
     ),
+    chartConfidence: style.getPropertyValue(
+      `--chart-series-muted-${resolvedTheme}`,
+    ),
   };
 };
 
-const getLocalTimestamp = (date: Date): UTCTimestamp =>
-  (Date.UTC(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    date.getHours(),
-    date.getMinutes(),
-    date.getSeconds(),
-    date.getMilliseconds(),
-  ) / 1000) as UTCTimestamp;
+function isLineData(data: LineData | WhitespaceData): data is LineData {
+  return "time" in data && "value" in data;
+}
+
+/**
+ * Merge (and sort) two arrays of line data, deduplicating by time
+ */
+function mergeData(as: LineData[], bs: LineData[]) {
+  const unique = new Map<number, LineData>();
+
+  // TODO fhqvst Can optimize with while's
+  for (const a of as) {
+    unique.set(a.time as number, a);
+  }
+  for (const b of bs) {
+    unique.set(b.time as number, b);
+  }
+  return [...unique.values()].sort(
+    (a, b) => (a.time as number) - (b.time as number),
+  );
+}
+
+/**
+ * Convert a date to the start of the given resolution, i.e. 1s = startOfSecond, 1m = startOfMinute, etc.
+ */
+function startOfResolution(date: Date, resolution: string) {
+  switch (resolution) {
+    case "1s": {
+      return startOfSecond(date).getTime();
+    }
+    case "1m":
+    case "5m": {
+      return startOfMinute(date).getTime();
+    }
+    case "1H": {
+      return startOfHour(date).getTime();
+    }
+    case "1D": {
+      return startOfDay(date).getTime();
+    }
+    default: {
+      throw new Error(`Unknown resolution: ${resolution}`);
+    }
+  }
+}
diff --git a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
new file mode 100644
index 0000000000..22b4c1bf01
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
@@ -0,0 +1,58 @@
+import { parseAsStringLiteral, useQueryState } from "nuqs";
+
+export const RESOLUTIONS = ["1s", "1m", "5m", "1H", "1D"] as const;
+export type Resolution = (typeof RESOLUTIONS)[number];
+
+export const LOOKBACKS = ["1m", "1H", "1D", "1W", "1M"] as const;
+export type Lookback = (typeof LOOKBACKS)[number];
+
+export function useChartLookback() {
+  return useQueryState(
+    "lookback",
+    parseAsStringLiteral(LOOKBACKS).withDefault("1m"),
+  );
+}
+
+export function useChartResolution() {
+  return useQueryState(
+    "resolution",
+    parseAsStringLiteral(RESOLUTIONS).withDefault("1s"),
+  );
+}
+
+// TODO fhqvst Clean this up - it's confusing
+export function lookbackToMilliseconds(lookback: Lookback): number {
+  switch (lookback) {
+    case "1m": {
+      return 60_000;
+    }
+    case "1H": {
+      return 3_600_000;
+    }
+    case "1D": {
+      return 86_400_000;
+    }
+    case "1W": {
+      return 604_800_000;
+    }
+    case "1M": {
+      return 2_629_746_000;
+    }
+  }
+}
+
+export const RESOLUTION_TO_LOOKBACK: Record<Resolution, Lookback> = {
+  "1s": "1m",
+  "1m": "1H",
+  "5m": "1D",
+  "1H": "1W",
+  "1D": "1M",
+};
+
+export const LOOKBACK_TO_RESOLUTION: Record<Lookback, Resolution> = {
+  "1m": "1s",
+  "1H": "1m",
+  "1D": "5m",
+  "1W": "1H",
+  "1M": "1H",
+};
diff --git a/apps/insights/src/services/clickhouse.ts b/apps/insights/src/services/clickhouse.ts
index c0b3b2521a..f3bb10b9f2 100644
--- a/apps/insights/src/services/clickhouse.ts
+++ b/apps/insights/src/services/clickhouse.ts
@@ -336,15 +336,49 @@ export const _getPublisherAverageScoreHistory = async ({
     },
   );
 
-// note that this is not cached as the `until` param is a unix timestamp
+type ResolutionUnit = "SECOND" | "MINUTE" | "HOUR" | "DAY";
+type Resolution = `${number} ${ResolutionUnit}`;
+// note that this is not cached as `from` and `to` params are unix timestamps
 export const getHistoricalPrices = async ({
   symbol,
-  until,
+  from,
+  to,
+  publisher = "",
+  resolution = "1 MINUTE",
+  cluster = "pythnet",
 }: {
   symbol: string;
-  until: string;
-}) =>
-  safeQuery(
+  from: number;
+  to: number;
+  publisher: string | undefined;
+  // TODO fhqvst Should we prevent fetching second-resolution data?
+  resolution?: Resolution;
+  cluster?: "pythnet" | "pythtest";
+}) => {
+  const queryParams: Record<string, number | string | string[]> = {
+    symbol,
+    from,
+    to,
+  };
+
+  const publisherClause = publisher
+    ? "AND publisher = {publisher: String}"
+    : "";
+  const clusterClause =
+    cluster === "pythtest"
+      ? "cluster IN {clusters: Array(String)}"
+      : "cluster = {cluster: String}";
+
+  if (publisher) {
+    queryParams.publisher = publisher;
+  }
+  if (cluster === "pythtest") {
+    queryParams.clusters = ["pythnet", "pythtest-conformance"];
+  } else {
+    queryParams.cluster = "pythnet";
+  }
+
+  return safeQuery(
     z.array(
       z.strictObject({
         timestamp: z.number(),
@@ -354,20 +388,24 @@ export const getHistoricalPrices = async ({
     ),
     {
       query: `
-          SELECT toUnixTimestamp(time) AS timestamp, avg(price) AS price, avg(confidence) AS confidence
+          SELECT toUnixTimestamp(toStartOfInterval(publishTime, INTERVAL ${resolution})) AS timestamp, avg(price) AS price, avg(confidence) AS confidence
           FROM prices
-          WHERE cluster = 'pythnet'
-          AND symbol = {symbol: String}
-          AND version = 2
-          AND time > fromUnixTimestamp(toInt64({until: String})) - INTERVAL 5 MINUTE
-          AND time < fromUnixTimestamp(toInt64({until: String}))
-          AND publisher = ''
-          GROUP BY time
-          ORDER BY time ASC
+          PREWHERE
+            ${clusterClause}
+            AND symbol = {symbol: String}
+            ${publisherClause}
+            AND version = 2
+          WHERE
+            publishTime >= toDateTime({from: UInt32})
+            AND publishTime < toDateTime({to: UInt32})
+            /* AND toDate(time) BETWEEN toDate(toDateTime({from: UInt32})) AND toDate(toDateTime({to: UInt32})) */
+          GROUP BY timestamp
+          ORDER BY timestamp ASC
         `,
-      query_params: { symbol, until },
+      query_params: queryParams,
     },
   );
+};
 
 const safeQuery = async <Output, Def extends ZodTypeDef, Input>(
   schema: ZodSchema<Output, Def, Input>,

From 23bc086e2d8894cf733d1ee4f3a4322c5eb628c3 Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Thu, 2 Oct 2025 19:36:39 +0200
Subject: [PATCH 3/7] add tests

---
 .../components/PriceFeed/Chart/chart.test.tsx | 156 ++++++++++++++++++
 .../src/components/PriceFeed/Chart/chart.tsx  |   4 +-
 2 files changed, 158 insertions(+), 2 deletions(-)
 create mode 100644 apps/insights/src/components/PriceFeed/Chart/chart.test.tsx

diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx
new file mode 100644
index 0000000000..96022e37cd
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx
@@ -0,0 +1,156 @@
+import type { LineData, UTCTimestamp } from "lightweight-charts";
+
+import { mergeData, startOfResolution } from "./chart";
+
+describe("mergeData", () => {
+  it("merges two arrays with no overlap", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [
+      { time: 3000 as UTCTimestamp, value: 30 },
+      { time: 4000 as UTCTimestamp, value: 40 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+      { time: 3000, value: 30 },
+      { time: 4000, value: 40 },
+    ]);
+  });
+
+  it("deduplicates by time, keeping the second value", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [
+      { time: 2000 as UTCTimestamp, value: 99 },
+      { time: 3000 as UTCTimestamp, value: 30 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 99 }, // second value overwrites first
+      { time: 3000, value: 30 },
+    ]);
+  });
+
+  it("sorts the merged array by time", () => {
+    const a: LineData[] = [
+      { time: 3000 as UTCTimestamp, value: 30 },
+      { time: 1000 as UTCTimestamp, value: 10 },
+    ];
+    const b: LineData[] = [
+      { time: 4000 as UTCTimestamp, value: 40 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+      { time: 3000, value: 30 },
+      { time: 4000, value: 40 },
+    ]);
+  });
+
+  it("handles empty first array", () => {
+    const a: LineData[] = [];
+    const b: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+    ]);
+  });
+
+  it("handles empty second array", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+    ]);
+  });
+
+  it("handles both arrays empty", () => {
+    const a: LineData[] = [];
+    const b: LineData[] = [];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([]);
+  });
+});
+
+describe("startOfResolution", () => {
+  it("returns start of second for 1s resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1s");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:45.000Z").getTime());
+  });
+
+  it("returns start of minute for 1m resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1m");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:00.000Z").getTime());
+  });
+
+  it("returns start of minute for 5m resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "5m");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:00.000Z").getTime());
+  });
+
+  it("returns start of hour for 1H resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1H");
+
+    expect(result).toBe(new Date("2024-01-15T10:00:00.000Z").getTime());
+  });
+
+  it("returns start of day for 1D resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1D");
+
+    expect(result).toBe(new Date("2024-01-15T00:00:00.000Z").getTime());
+  });
+
+  it("throws error for unknown resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+
+    expect(() => startOfResolution(date, "15m")).toThrow(
+      "Unknown resolution: 15m",
+    );
+  });
+
+  it("throws error for invalid resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+
+    expect(() => startOfResolution(date, "invalid")).toThrow(
+      "Unknown resolution: invalid",
+    );
+  });
+});
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
index 9f8b699df8..dc07a80de4 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -450,7 +450,7 @@ function isLineData(data: LineData | WhitespaceData): data is LineData {
 /**
  * Merge (and sort) two arrays of line data, deduplicating by time
  */
-function mergeData(as: LineData[], bs: LineData[]) {
+export function mergeData(as: LineData[], bs: LineData[]) {
   const unique = new Map<number, LineData>();
 
   // TODO fhqvst Can optimize with while's
@@ -468,7 +468,7 @@ function mergeData(as: LineData[], bs: LineData[]) {
 /**
  * Convert a date to the start of the given resolution, i.e. 1s = startOfSecond, 1m = startOfMinute, etc.
  */
-function startOfResolution(date: Date, resolution: string) {
+export function startOfResolution(date: Date, resolution: string) {
   switch (resolution) {
     case "1s": {
       return startOfSecond(date).getTime();

From 670254f41658a3c1f81586b6d32ce9f970067e2d Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Thu, 2 Oct 2025 19:44:04 +0200
Subject: [PATCH 4/7] add feature flag

---
 .../src/components/PriceFeed/Chart/chart-toolbar.tsx       | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
index 48c003eb9e..1199afdc1d 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
@@ -15,6 +15,8 @@ import {
   useChartResolution,
 } from "./use-chart-toolbar";
 
+const ENABLE_RESOLUTION_SELECTOR = false;
+
 export const ChartToolbar = () => {
   const logger = useLogger();
   const [lookback, setLookback] = useChartLookback();
@@ -56,6 +58,11 @@ export const ChartToolbar = () => {
     [logger, setResolution, setLookback],
   );
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!ENABLE_RESOLUTION_SELECTOR) {
+    return;
+  }
+
   return (
     <>
       <Select

From 1b23216bdd8fcdbc199f41e57c0616c30940b02b Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Thu, 2 Oct 2025 20:05:00 +0200
Subject: [PATCH 5/7] update query

---
 .../src/components/PriceFeed/Chart/chart.module.scss       | 2 +-
 apps/insights/src/services/clickhouse.ts                   | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
index 8c5b1d620e..fd5496f5cb 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
@@ -2,7 +2,7 @@
 
 .chart {
   --chart-background-light: #{theme.pallette-color("white")};
-  --chart-background-dark: #{theme.pallette-color("steel", 900)};
+  --chart-background-dark: #{theme.pallette-color("steel", 950)};
   --border-light: #{theme.pallette-color("stone", 100)};
   --border-dark: #{theme.pallette-color("steel", 900)};
   --muted-light: #{theme.pallette-color("stone", 700)};
diff --git a/apps/insights/src/services/clickhouse.ts b/apps/insights/src/services/clickhouse.ts
index f3bb10b9f2..8ae3546bd4 100644
--- a/apps/insights/src/services/clickhouse.ts
+++ b/apps/insights/src/services/clickhouse.ts
@@ -359,11 +359,9 @@ export const getHistoricalPrices = async ({
     symbol,
     from,
     to,
+    publisher,
   };
 
-  const publisherClause = publisher
-    ? "AND publisher = {publisher: String}"
-    : "";
   const clusterClause =
     cluster === "pythtest"
       ? "cluster IN {clusters: Array(String)}"
@@ -392,13 +390,12 @@ export const getHistoricalPrices = async ({
           FROM prices
           PREWHERE
             ${clusterClause}
+            AND publisher = {publisher: String}
             AND symbol = {symbol: String}
-            ${publisherClause}
             AND version = 2
           WHERE
             publishTime >= toDateTime({from: UInt32})
             AND publishTime < toDateTime({to: UInt32})
-            /* AND toDate(time) BETWEEN toDate(toDateTime({from: UInt32})) AND toDate(toDateTime({to: UInt32})) */
           GROUP BY timestamp
           ORDER BY timestamp ASC
         `,

From 11c89c5b67e7d84da649d37bb4e64cdfd5d90e05 Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Mon, 6 Oct 2025 13:52:21 +0200
Subject: [PATCH 6/7] PR feedback

---
 .../src/app/historical-prices/route.ts        | 16 ++---
 .../PriceFeed/Chart/chart-toolbar.tsx         | 72 ++++++++-----------
 .../src/components/PriceFeed/Chart/chart.tsx  | 65 +++++++++--------
 .../PriceFeed/Chart/use-chart-toolbar.tsx     | 31 +++++---
 apps/insights/src/services/clickhouse.ts      | 20 +-----
 5 files changed, 90 insertions(+), 114 deletions(-)

diff --git a/apps/insights/src/app/historical-prices/route.ts b/apps/insights/src/app/historical-prices/route.ts
index 2b7ea12276..f84cba43f7 100644
--- a/apps/insights/src/app/historical-prices/route.ts
+++ b/apps/insights/src/app/historical-prices/route.ts
@@ -9,7 +9,6 @@ const queryParamsSchema = z.object({
     .string()
     .nullable()
     .transform((value) => value ?? undefined),
-  cluster: z.enum(["pythnet", "pythtest"]),
   from: z.string().transform(Number),
   to: z.string().transform(Number),
   resolution: z.enum(["1s", "1m", "5m", "1H", "1D"]).transform((value) => {
@@ -48,11 +47,9 @@ export async function GET(req: NextRequest) {
     });
   }
 
-  const { symbol, publisher, cluster, from, to, resolution } = parsed.data;
+  const { symbol, publisher, from, to, resolution } = parsed.data;
 
-  try {
-    checkMaxDataPointsInvariant(from, to, resolution);
-  } catch {
+  if (getNumDataPoints(to, from, resolution) > MAX_DATA_POINTS) {
     return new Response("Unsupported resolution for date range", {
       status: 400,
     });
@@ -63,7 +60,6 @@ export async function GET(req: NextRequest) {
     from,
     to,
     publisher,
-    cluster,
     resolution,
   });
 
@@ -71,9 +67,9 @@ export async function GET(req: NextRequest) {
 }
 
 const MAX_DATA_POINTS = 3000;
-function checkMaxDataPointsInvariant(
-  from: number,
+function getNumDataPoints(
   to: number,
+  from: number,
   resolution: "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY",
 ) {
   let diff = to - from;
@@ -96,7 +92,5 @@ function checkMaxDataPointsInvariant(
     }
   }
 
-  if (diff > MAX_DATA_POINTS) {
-    throw new Error("Unsupported resolution for date range");
-  }
+  return diff;
 }
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
index 1199afdc1d..deb7e64efc 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
@@ -5,13 +5,13 @@ import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useCallback } from "react";
 import type { Key } from "react-aria";
 
-import type { Lookback, Resolution } from "./use-chart-toolbar";
+import type { QuickSelectWindow, Resolution } from "./use-chart-toolbar";
 import {
-  LOOKBACK_TO_RESOLUTION,
-  LOOKBACKS,
-  RESOLUTION_TO_LOOKBACK,
+  QUICK_SELECT_WINDOW_TO_RESOLUTION,
+  QUICK_SELECT_WINDOWS,
+  RESOLUTION_TO_QUICK_SELECT_WINDOW,
   RESOLUTIONS,
-  useChartLookback,
+  useChartQuickSelectWindow,
   useChartResolution,
 } from "./use-chart-toolbar";
 
@@ -19,43 +19,38 @@ const ENABLE_RESOLUTION_SELECTOR = false;
 
 export const ChartToolbar = () => {
   const logger = useLogger();
-  const [lookback, setLookback] = useChartLookback();
+  const [quickSelectWindow, setQuickSelectWindow] = useChartQuickSelectWindow();
   const [resolution, setResolution] = useChartResolution();
 
-  const handleLookbackChange = useCallback(
-    (newValue: Key) => {
-      if (!isLookback(newValue)) {
-        throw new TypeError("Invalid lookback");
-      }
-      const lookback: Lookback = newValue;
-      setLookback(lookback).catch((error: unknown) => {
-        logger.error("Failed to update lookback", error);
+  const handleResolutionChanged = useCallback(
+    (resolution: Resolution) => {
+      setResolution(resolution).catch((error: unknown) => {
+        logger.error("Failed to update resolution", error);
       });
-      setResolution(LOOKBACK_TO_RESOLUTION[lookback]).catch(
+      setQuickSelectWindow(RESOLUTION_TO_QUICK_SELECT_WINDOW[resolution]).catch(
         (error: unknown) => {
-          logger.error("Failed to update resolution", error);
+          logger.error("Failed to update quick select window", error);
         },
       );
     },
-    [logger, setLookback, setResolution],
+    [logger, setResolution, setQuickSelectWindow],
   );
 
-  const handleResolutionChanged = useCallback(
-    (newValue: Key) => {
-      if (!isResolution(newValue)) {
-        throw new TypeError("Invalid resolution");
+  const handleQuickSelectWindowChange = useCallback(
+    (quickSelectWindow: Key) => {
+      if (!isQuickSelectWindow(quickSelectWindow)) {
+        throw new TypeError("Invalid quick select window");
       }
-      const resolution: Resolution = newValue;
-      setResolution(resolution).catch((error: unknown) => {
-        logger.error("Failed to update resolution", error);
+      setQuickSelectWindow(quickSelectWindow).catch((error: unknown) => {
+        logger.error("Failed to update quick select window", error);
       });
-      setLookback(RESOLUTION_TO_LOOKBACK[resolution]).catch(
+      setResolution(QUICK_SELECT_WINDOW_TO_RESOLUTION[quickSelectWindow]).catch(
         (error: unknown) => {
-          logger.error("Failed to update lookback", error);
+          logger.error("Failed to update resolution", error);
         },
       );
     },
-    [logger, setResolution, setLookback],
+    [logger, setQuickSelectWindow, setResolution],
   );
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -78,25 +73,18 @@ export const ChartToolbar = () => {
         variant="outline"
       />
       <SingleToggleGroup
-        selectedKey={lookback}
-        onSelectionChange={handleLookbackChange}
+        selectedKey={quickSelectWindow}
+        onSelectionChange={handleQuickSelectWindowChange}
         rounded
-        items={[
-          { id: "1m", children: "1m" },
-          { id: "1H", children: "1H" },
-          { id: "1D", children: "1D" },
-          { id: "1W", children: "1W" },
-          { id: "1M", children: "1M" },
-        ]}
+        items={QUICK_SELECT_WINDOWS.map((quickSelectWindow) => ({
+          id: quickSelectWindow,
+          children: quickSelectWindow,
+        }))}
       />
     </>
   );
 };
 
-function isLookback(value: Key): value is Lookback {
-  return LOOKBACKS.includes(value as Lookback);
-}
-
-function isResolution(value: Key): value is Resolution {
-  return RESOLUTIONS.includes(value as Resolution);
+function isQuickSelectWindow(value: Key): value is QuickSelectWindow {
+  return QUICK_SELECT_WINDOWS.includes(value as QuickSelectWindow);
 }
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
index dc07a80de4..9f365ce497 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -13,7 +13,6 @@ import type {
   ISeriesApi,
   LineData,
   UTCTimestamp,
-  WhitespaceData,
 } from "lightweight-charts";
 import {
   AreaSeries,
@@ -28,8 +27,8 @@ import { z } from "zod";
 
 import styles from "./chart.module.scss";
 import {
-  lookbackToMilliseconds,
-  useChartLookback,
+  quickSelectWindowToMilliseconds,
+  useChartQuickSelectWindow,
   useChartResolution,
 } from "./use-chart-toolbar";
 import { useLivePriceData } from "../../../hooks/use-live-price-data";
@@ -62,19 +61,14 @@ const useChart = (symbol: string, feedId: string) => {
 
 const useChartElem = (symbol: string, feedId: string) => {
   const logger = useLogger();
-  const [lookback] = useChartLookback();
+  const [quickSelectWindow] = useChartQuickSelectWindow();
   const [resolution] = useChartResolution();
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<ChartRefContents | undefined>(undefined);
   const isBackfilling = useRef(false);
   const priceFormatter = usePriceFormatter();
-  const resolutionRef = useRef(resolution);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
 
-  useEffect(() => {
-    resolutionRef.current = resolution;
-  }, [resolution]);
-
   const { current: livePriceData } = useLivePriceData(Cluster.Pythnet, feedId);
 
   const didResetVisibleRange = useRef(false);
@@ -154,31 +148,33 @@ const useChartElem = (symbol: string, feedId: string) => {
       });
 
       fetch(url, { signal: abortControllerRef.current.signal })
-        .then(async (data) => historicalDataSchema.parse(await data.json()))
-        .then((data) => {
+        .then((rawData) => rawData.json())
+        .then((jsonData) => {
           if (!chartRef.current) {
             return;
           }
 
+          const data = historicalDataSchema.parse(jsonData);
+
           // Get the current historical price data
-          const currentHistoricalPriceData = chartRef.current.price
-            .data()
-            .filter((d) => isLineData(d));
+          // Note that .data() returns (WhitespaceData | LineData)[], hence the type cast
+          const currentHistoricalPriceData =
+            chartRef.current.price.data() as LineData[];
           const currentHistoricalConfidenceHighData =
-            chartRef.current.confidenceHigh.data().filter((d) => isLineData(d));
+            chartRef.current.confidenceHigh.data() as LineData[];
           const currentHistoricalConfidenceLowData =
-            chartRef.current.confidenceLow.data().filter((d) => isLineData(d));
+            chartRef.current.confidenceLow.data() as LineData[];
 
           const newHistoricalPriceData = data.map((d) => ({
-            time: Number(d.timestamp) as UTCTimestamp,
+            time: d.time,
             value: d.price,
           }));
           const newHistoricalConfidenceHighData = data.map((d) => ({
-            time: Number(d.timestamp) as UTCTimestamp,
+            time: d.time,
             value: d.price + d.confidence,
           }));
           const newHistoricalConfidenceLowData = data.map((d) => ({
-            time: Number(d.timestamp) as UTCTimestamp,
+            time: d.time,
             value: d.price - d.confidence,
           }));
 
@@ -273,7 +269,7 @@ const useChartElem = (symbol: string, feedId: string) => {
       const newToMs = firstMs;
       const newFromMs = startOfResolution(
         new Date(newToMs - visibleRangeMs),
-        resolutionRef.current,
+        resolution,
       );
 
       // When we're getting close to the earliest data, we need to backfill more
@@ -281,7 +277,7 @@ const useChartElem = (symbol: string, feedId: string) => {
         fetchHistoricalData({
           from: newFromMs / 1000,
           to: newToMs / 1000,
-          resolution: resolutionRef.current,
+          resolution,
         });
       }
     });
@@ -306,7 +302,9 @@ const useChartElem = (symbol: string, feedId: string) => {
     const now = new Date();
     const to = startOfResolution(now, resolution);
     const from = startOfResolution(
-      new Date(now.getTime() - lookbackToMilliseconds(lookback)),
+      new Date(
+        now.getTime() - quickSelectWindowToMilliseconds(quickSelectWindow),
+      ),
       resolution,
     );
 
@@ -326,7 +324,7 @@ const useChartElem = (symbol: string, feedId: string) => {
       to: to / 1000,
       resolution,
     });
-  }, [lookback, resolution, fetchHistoricalData]);
+  }, [quickSelectWindow, resolution, fetchHistoricalData]);
 
   return { chartRef, chartContainerRef };
 };
@@ -340,11 +338,17 @@ type ChartRefContents = {
 };
 
 const historicalDataSchema = z.array(
-  z.strictObject({
-    timestamp: z.number().transform(BigInt),
-    price: z.number(),
-    confidence: z.number(),
-  }),
+  z
+    .strictObject({
+      timestamp: z.number(),
+      price: z.number(),
+      confidence: z.number(),
+    })
+    .transform((d) => ({
+      time: Number(d.timestamp) as UTCTimestamp,
+      price: d.price,
+      confidence: d.confidence,
+    })),
 );
 const priceFormat = {
   type: "price",
@@ -443,17 +447,12 @@ const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
   };
 };
 
-function isLineData(data: LineData | WhitespaceData): data is LineData {
-  return "time" in data && "value" in data;
-}
-
 /**
  * Merge (and sort) two arrays of line data, deduplicating by time
  */
 export function mergeData(as: LineData[], bs: LineData[]) {
   const unique = new Map<number, LineData>();
 
-  // TODO fhqvst Can optimize with while's
   for (const a of as) {
     unique.set(a.time as number, a);
   }
diff --git a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
index 22b4c1bf01..6c862427c1 100644
--- a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
@@ -3,13 +3,13 @@ import { parseAsStringLiteral, useQueryState } from "nuqs";
 export const RESOLUTIONS = ["1s", "1m", "5m", "1H", "1D"] as const;
 export type Resolution = (typeof RESOLUTIONS)[number];
 
-export const LOOKBACKS = ["1m", "1H", "1D", "1W", "1M"] as const;
-export type Lookback = (typeof LOOKBACKS)[number];
+export const QUICK_SELECT_WINDOWS = ["1m", "1H", "1D", "1W", "1M"] as const;
+export type QuickSelectWindow = (typeof QUICK_SELECT_WINDOWS)[number];
 
-export function useChartLookback() {
+export function useChartQuickSelectWindow() {
   return useQueryState(
-    "lookback",
-    parseAsStringLiteral(LOOKBACKS).withDefault("1m"),
+    "quickSelectWindow",
+    parseAsStringLiteral(QUICK_SELECT_WINDOWS).withDefault("1m"),
   );
 }
 
@@ -20,9 +20,14 @@ export function useChartResolution() {
   );
 }
 
-// TODO fhqvst Clean this up - it's confusing
-export function lookbackToMilliseconds(lookback: Lookback): number {
-  switch (lookback) {
+/**
+ * Converts a quick select window string (e.g., "1m", "1H", "1D") to its equivalent duration in milliseconds.
+ * Used to determine the time range for chart data based on user selection.
+ */
+export function quickSelectWindowToMilliseconds(
+  quickSelectWindow: QuickSelectWindow,
+): number {
+  switch (quickSelectWindow) {
     case "1m": {
       return 60_000;
     }
@@ -41,7 +46,10 @@ export function lookbackToMilliseconds(lookback: Lookback): number {
   }
 }
 
-export const RESOLUTION_TO_LOOKBACK: Record<Resolution, Lookback> = {
+export const RESOLUTION_TO_QUICK_SELECT_WINDOW: Record<
+  Resolution,
+  QuickSelectWindow
+> = {
   "1s": "1m",
   "1m": "1H",
   "5m": "1D",
@@ -49,7 +57,10 @@ export const RESOLUTION_TO_LOOKBACK: Record<Resolution, Lookback> = {
   "1D": "1M",
 };
 
-export const LOOKBACK_TO_RESOLUTION: Record<Lookback, Resolution> = {
+export const QUICK_SELECT_WINDOW_TO_RESOLUTION: Record<
+  QuickSelectWindow,
+  Resolution
+> = {
   "1m": "1s",
   "1H": "1m",
   "1D": "5m",
diff --git a/apps/insights/src/services/clickhouse.ts b/apps/insights/src/services/clickhouse.ts
index 8ae3546bd4..f2834a6a90 100644
--- a/apps/insights/src/services/clickhouse.ts
+++ b/apps/insights/src/services/clickhouse.ts
@@ -345,37 +345,21 @@ export const getHistoricalPrices = async ({
   to,
   publisher = "",
   resolution = "1 MINUTE",
-  cluster = "pythnet",
 }: {
   symbol: string;
   from: number;
   to: number;
   publisher: string | undefined;
-  // TODO fhqvst Should we prevent fetching second-resolution data?
   resolution?: Resolution;
-  cluster?: "pythnet" | "pythtest";
 }) => {
   const queryParams: Record<string, number | string | string[]> = {
     symbol,
     from,
     to,
     publisher,
+    cluster: "pythnet",
   };
 
-  const clusterClause =
-    cluster === "pythtest"
-      ? "cluster IN {clusters: Array(String)}"
-      : "cluster = {cluster: String}";
-
-  if (publisher) {
-    queryParams.publisher = publisher;
-  }
-  if (cluster === "pythtest") {
-    queryParams.clusters = ["pythnet", "pythtest-conformance"];
-  } else {
-    queryParams.cluster = "pythnet";
-  }
-
   return safeQuery(
     z.array(
       z.strictObject({
@@ -389,7 +373,7 @@ export const getHistoricalPrices = async ({
           SELECT toUnixTimestamp(toStartOfInterval(publishTime, INTERVAL ${resolution})) AS timestamp, avg(price) AS price, avg(confidence) AS confidence
           FROM prices
           PREWHERE
-            ${clusterClause}
+            cluster = {cluster: String}
             AND publisher = {publisher: String}
             AND symbol = {symbol: String}
             AND version = 2

From dde6add7417f7bd86530e280dce624a448dd8c21 Mon Sep 17 00:00:00 2001
From: Filip Hallqvist <filip@dourolabs.xyz>
Date: Tue, 7 Oct 2025 16:14:06 +0200
Subject: [PATCH 7/7] PR feedback

---
 .../src/app/historical-prices/route.ts        | 40 +++++++------------
 .../src/components/PriceFeed/Chart/chart.tsx  |  3 +-
 .../PriceFeed/Chart/use-chart-toolbar.tsx     | 33 ++++++++-------
 3 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/apps/insights/src/app/historical-prices/route.ts b/apps/insights/src/app/historical-prices/route.ts
index f84cba43f7..868eb58517 100644
--- a/apps/insights/src/app/historical-prices/route.ts
+++ b/apps/insights/src/app/historical-prices/route.ts
@@ -67,30 +67,18 @@ export async function GET(req: NextRequest) {
 }
 
 const MAX_DATA_POINTS = 3000;
-function getNumDataPoints(
-  to: number,
-  from: number,
-  resolution: "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY",
-) {
-  let diff = to - from;
-  switch (resolution) {
-    case "1 MINUTE": {
-      diff = diff / 60;
-      break;
-    }
-    case "5 MINUTE": {
-      diff = diff / 60 / 5;
-      break;
-    }
-    case "1 HOUR": {
-      diff = diff / 3600;
-      break;
-    }
-    case "1 DAY": {
-      diff = diff / 86_400;
-      break;
-    }
-  }
 
-  return diff;
-}
+type Resolution = "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY";
+const ONE_MINUTE_IN_SECONDS = 60;
+const ONE_HOUR_IN_SECONDS = 60 * ONE_MINUTE_IN_SECONDS;
+
+const SECONDS_IN_ONE_PERIOD: Record<Resolution, number> = {
+  "1 SECOND": 1,
+  "1 MINUTE": ONE_MINUTE_IN_SECONDS,
+  "5 MINUTE": 5 * ONE_MINUTE_IN_SECONDS,
+  "1 HOUR": ONE_HOUR_IN_SECONDS,
+  "1 DAY": 24 * ONE_HOUR_IN_SECONDS,
+};
+
+const getNumDataPoints = (from: number, to: number, resolution: Resolution) =>
+  (to - from) / SECONDS_IN_ONE_PERIOD[resolution];
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
index 9f365ce497..3e85671b86 100644
--- a/apps/insights/src/components/PriceFeed/Chart/chart.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -157,7 +157,8 @@ const useChartElem = (symbol: string, feedId: string) => {
           const data = historicalDataSchema.parse(jsonData);
 
           // Get the current historical price data
-          // Note that .data() returns (WhitespaceData | LineData)[], hence the type cast
+          // Note that .data() returns (WhitespaceData | LineData)[], hence the type cast.
+          // We never populate the chart with WhitespaceData, so the type cast is safe.
           const currentHistoricalPriceData =
             chartRef.current.price.data() as LineData[];
           const currentHistoricalConfidenceHighData =
diff --git a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
index 6c862427c1..1dc063b888 100644
--- a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
@@ -20,6 +20,21 @@ export function useChartResolution() {
   );
 }
 
+const ONE_SECOND_IN_MS = 1000;
+const ONE_MINUTE_IN_MS = 60 * ONE_SECOND_IN_MS;
+const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
+const ONE_DAY_IN_MS = 24 * ONE_HOUR_IN_MS;
+const ONE_WEEK_IN_MS = 7 * ONE_DAY_IN_MS;
+const ONE_MONTH_IN_MS = 30 * ONE_DAY_IN_MS;
+
+const QUICK_SELECT_WINDOW_TO_MS: Record<QuickSelectWindow, number> = {
+  "1m": ONE_MINUTE_IN_MS,
+  "1H": ONE_HOUR_IN_MS,
+  "1D": ONE_DAY_IN_MS,
+  "1W": ONE_WEEK_IN_MS,
+  "1M": ONE_MONTH_IN_MS,
+};
+
 /**
  * Converts a quick select window string (e.g., "1m", "1H", "1D") to its equivalent duration in milliseconds.
  * Used to determine the time range for chart data based on user selection.
@@ -27,23 +42,7 @@ export function useChartResolution() {
 export function quickSelectWindowToMilliseconds(
   quickSelectWindow: QuickSelectWindow,
 ): number {
-  switch (quickSelectWindow) {
-    case "1m": {
-      return 60_000;
-    }
-    case "1H": {
-      return 3_600_000;
-    }
-    case "1D": {
-      return 86_400_000;
-    }
-    case "1W": {
-      return 604_800_000;
-    }
-    case "1M": {
-      return 2_629_746_000;
-    }
-  }
+  return QUICK_SELECT_WINDOW_TO_MS[quickSelectWindow];
 }
 
 export const RESOLUTION_TO_QUICK_SELECT_WINDOW: Record<