trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

perf: remove fitContent() from reconciliation effect, call only on initial load

Browse source 
Move chart.timeScale().fitContent() out of the span annotation reconciliation
effect (which ran on every annotation/selection change) into a dedicated effect
guarded by a hasInitializedRef, so it fires only once when chart and series
first become available.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marko Djordjevic 2026-02-18 15:20:37 +01:00
parent 131d2912d5
commit aa27fe93f6
2 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
openspec/changes/code-review-fix/tasks.md
View file

@ -72,7 +72,7 @@
- [x] 8.1 `[opus]` Fix SpanAnnotationManager preview primitive memory leak: replace `useState` with `useRef` for preview primitive, add cleanup on unmount (`src/components/SpanAnnotationManager.tsx:265-324`) - [x] 8.1 `[opus]` Fix SpanAnnotationManager preview primitive memory leak: replace `useState` with `useRef` for preview primitive, add cleanup on unmount (`src/components/SpanAnnotationManager.tsx:265-324`)
- [x] 8.2 `[sonnet]` Use `chart.applyOptions()` for theme changes instead of re-creating chart (`src/components/CandleChart.tsx:333`) - [x] 8.2 `[sonnet]` Use `chart.applyOptions()` for theme changes instead of re-creating chart (`src/components/CandleChart.tsx:333`)
- [ ] 8.3 `[sonnet]` Remove `fitContent()` from reconciliation effect, only call on initial load (`src/components/SpanAnnotationManager.tsx:160`) - [x] 8.3 `[sonnet]` Remove `fitContent()` from reconciliation effect, only call on initial load (`src/components/SpanAnnotationManager.tsx:160`)
- [ ] 8.4 `[opus]` Implement incremental primitive updates in SpanAnnotationManager: update only selection state on selection change, full reconciliation only on annotation list changes (`src/components/SpanAnnotationManager.tsx:104-161`) - [ ] 8.4 `[opus]` Implement incremental primitive updates in SpanAnnotationManager: update only selection state on selection change, full reconciliation only on annotation list changes (`src/components/SpanAnnotationManager.tsx:104-161`)
- [ ] 8.5 `[sonnet]` Add bounded prediction cache (max 100 entries, FIFO eviction) to `predictionCacheRef` (`src/app/page.tsx:195-199`) - [ ] 8.5 `[sonnet]` Add bounded prediction cache (max 100 entries, FIFO eviction) to `predictionCacheRef` (`src/app/page.tsx:195-199`)
- [ ] 8.6 `[sonnet]` Fix hardcoded 1-minute candle interval: detect interval from data, use for span iteration (`src/components/CandleChart.tsx:452`) - [ ] 8.6 `[sonnet]` Fix hardcoded 1-minute candle interval: detect interval from data, use for span iteration (`src/components/CandleChart.tsx:452`)

12
src/components/SpanAnnotationManager.tsx
View file

@ -74,6 +74,7 @@ export default function SpanAnnotationManager({
const [editingSpan, setEditingSpan] = useState<SpanAnnotation | null>(null); const [editingSpan, setEditingSpan] = useState<SpanAnnotation | null>(null);
const primitivesRef = useRef<Map<number, SpanRectanglePrimitive>>(new Map()); const primitivesRef = useRef<Map<number, SpanRectanglePrimitive>>(new Map());
const selectedSpanIdRef = useRef<number | null>(selectedSpanId); const selectedSpanIdRef = useRef<number | null>(selectedSpanId);
const hasInitializedRef = useRef(false);
// Keep selectedSpanIdRef in sync with prop // Keep selectedSpanIdRef in sync with prop
useEffect(() => { useEffect(() => {
@ -175,11 +176,16 @@ export default function SpanAnnotationManager({
series.attachPrimitive(primitive); series.attachPrimitive(primitive);
primitivesRef.current.set(span.id, primitive); primitivesRef.current.set(span.id, primitive);
}); });
// Request chart update
chart.timeScale().fitContent();
}, [spanAnnotations, selectedSpanId, series, chart, candles]); }, [spanAnnotations, selectedSpanId, series, chart, candles]);
// Fit chart content only on initial load when chart and series become available
useEffect(() => {
if (!chart || !series) return;
if (hasInitializedRef.current) return;
hasInitializedRef.current = true;
chart.timeScale().fitContent();
}, [chart, series]);
// Handle clicks on chart for span tool and span selection // Handle clicks on chart for span tool and span selection
useEffect(() => { useEffect(() => {
if (!chart || !series) return; if (!chart || !series) return;