PR feedback

Author: fhqvst

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,17 +60,16 @@ export async function GET(req: NextRequest) {
     from,
     to,
     publisher,
-    cluster,
     resolution,
   });
 
   return Response.json(res);
 }
 
 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;
 }

apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx

@@ -5,57 +5,52 @@ 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";
 
 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);
 }

apps/insights/src/components/PriceFeed/Chart/chart.tsx

@@ -28,8 +28,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 +62,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 +149,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,15 +270,15 @@ 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
       if (remainingDataMs <= threshold) {
         fetchHistoricalData({
           from: newFromMs / 1000,
           to: newToMs / 1000,
-          resolution: resolutionRef.current,
+          resolution,
         });
       }
     });
@@ -306,7 +303,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 +325,7 @@ const useChartElem = (symbol: string, feedId: string) => {
       to: to / 1000,
       resolution,
     });
-  }, [lookback, resolution, fetchHistoricalData]);
+  }, [quickSelectWindow, resolution, fetchHistoricalData]);
 
   return { chartRef, chartContainerRef };
 };
@@ -340,11 +339,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 +448,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);
   }

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,15 +46,21 @@ 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",
   "1H": "1W",
   "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",