From 125b83316cf9bef56a0076adf09c5b1fe7a176c8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 23 May 2026 04:47:03 +0000
Subject: [PATCH] fix: wrap getChartHeight in useCallback to satisfy
 react-hooks/exhaustive-deps ESLint rule

Agent-Logs-Url: https://github.com/AlanFokCo/EasyQuant/sessions/a45a508d-804a-4c2d-a525-3bbac838c8ac

Co-authored-by: AlanFokCo <49893220+AlanFokCo@users.noreply.github.com>
---
 .../frontend/src/components/ReportViewer.tsx              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web_strategy_studio/frontend/src/components/ReportViewer.tsx b/web_strategy_studio/frontend/src/components/ReportViewer.tsx
index f6ce6d0..acfb781 100644
--- a/web_strategy_studio/frontend/src/components/ReportViewer.tsx
+++ b/web_strategy_studio/frontend/src/components/ReportViewer.tsx
@@ -2,7 +2,7 @@
  * ReportViewer — native Lightweight Charts rendering for backtest reports.
  * Replaces the iframe approach in ReportLinkModal for full interactivity.
  */
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createChart, ColorType, CrosshairMode, LineStyle } from "lightweight-charts";
 import type { IChartApi } from "lightweight-charts";
 
@@ -98,11 +98,11 @@ export default function ReportViewer({ runId, jsonUrl }: { runId: string; jsonUr
   const isTablet = viewportWidth >= 480 && viewportWidth < 768;
 
   // Dynamic chart height based on viewport
-  function getChartHeight(base: number): number {
+  const getChartHeight = useCallback((base: number): number => {
     if (isPhone) return Math.round(base * 0.58);
     if (isTablet) return Math.round(base * 0.75);
     return base;
-  }
+  }, [isPhone, isTablet]);
 
   // Fetch report JSON data
   useEffect(() => {
@@ -333,7 +333,7 @@ export default function ReportViewer({ runId, jsonUrl }: { runId: string; jsonUr
       chartsRef.current.forEach((c) => c.remove());
       chartsRef.current = [];
     };
-  }, [data]);
+  }, [data, getChartHeight]);
 
   if (loading) {
     return (