@tradejs/app 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradejs/app",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Installable Next.js UI for the TradeJS TypeScript framework: dashboards, backtests, charts, and runtime data.",
   "keywords": [
     "tradejs",
@@ -51,12 +51,12 @@
     "@emotion/react": "^11.14.0",
     "@langchain/core": "^1.1.42",
     "@langchain/openai": "^1.4.5",
-    "@tradejs/connectors": "^2.0.1",
-    "@tradejs/core": "^2.0.1",
-    "@tradejs/indicators": "^2.0.1",
-    "@tradejs/infra": "^2.0.1",
-    "@tradejs/node": "^2.0.1",
-    "@tradejs/types": "^2.0.1",
+    "@tradejs/connectors": "^2.0.3",
+    "@tradejs/core": "^2.0.3",
+    "@tradejs/indicators": "^2.0.3",
+    "@tradejs/infra": "^2.0.3",
+    "@tradejs/node": "^2.0.3",
+    "@tradejs/types": "^2.0.3",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.14.202",
     "@types/node": "24.13.3",

package/src/app/components/Dashboard/KlineChart/hooks/index.ts

@@ -7,8 +7,9 @@ export { useVolIndicator } from './useVolIndicator';
 export { useBtcIndicator } from './useBtcIndicator';
 export { useBtcCorrelation } from './useBtcCorrelation';
 export { useSpreadIndicator } from './useSpreadIndicator';
-export { useSignal } from './useSignal';
+export { useDashboardSignal } from './useDashboardSignal';
+export { useSignalFigures } from './useSignal';
 export { useBacktest } from './useBacktest';
 export { useSupportResistanceLines } from './useSupportResistanceLines';
 export { useResize } from './useResize';
-export { useSetup } from './useSetup';
+export { useTradeSetup } from './useSetup';

package/src/app/components/Dashboard/KlineChart/hooks/useDashboardSignal.ts

@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { getSignal } from '#actions/signal';
+import type { Signal } from '@tradejs/types';
+
+export type DashboardSignalStatus =
+  | 'idle'
+  | 'loading'
+  | 'loaded'
+  | 'missing'
+  | 'error';
+
+type DashboardSignalState = {
+  queryKey: string | null;
+  signal: Signal | null;
+  status: DashboardSignalStatus;
+};
+
+const INITIAL_STATE: DashboardSignalState = {
+  queryKey: null,
+  signal: null,
+  status: 'idle',
+};
+
+export const useDashboardSignal = ({
+  symbol,
+  signalId,
+}: {
+  symbol: string;
+  signalId: string | null;
+}) => {
+  const queryKey = useMemo(
+    () => (symbol && signalId ? `${symbol}:${signalId}` : null),
+    [signalId, symbol],
+  );
+  const [state, setState] = useState<DashboardSignalState>(INITIAL_STATE);
+
+  useEffect(() => {
+    let active = true;
+
+    if (!queryKey || !signalId) {
+      setState(INITIAL_STATE);
+      return () => {
+        active = false;
+      };
+    }
+
+    setState({ queryKey, signal: null, status: 'loading' });
+
+    void getSignal(symbol, signalId)
+      .then((signal) => {
+        if (!active) return;
+        setState({
+          queryKey,
+          signal,
+          status: signal ? 'loaded' : 'missing',
+        });
+      })
+      .catch(() => {
+        if (!active) return;
+        setState({ queryKey, signal: null, status: 'error' });
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [queryKey, signalId, symbol]);
+
+  if (!queryKey) {
+    return INITIAL_STATE;
+  }
+
+  if (state.queryKey !== queryKey) {
+    return {
+      queryKey,
+      signal: null,
+      status: 'loading' as const,
+    };
+  }
+
+  return state;
+};

package/src/app/components/Dashboard/KlineChart/hooks/useSetup.ts

@@ -1,11 +1,7 @@
-'use client';
-
 import { useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
 import { Chart, registerOverlay } from 'klinecharts';
-import { getSignal } from '#actions/signal';
 import { toMs } from '@tradejs/core/time';
-import { Signal } from '@tradejs/types';
+import type { Signal } from '@tradejs/types';
 import { createTradeZonePointFigure } from '../figures/tradeZonePointFigure';
 
 const SETUP = 'Setup';
@@ -15,20 +11,21 @@ const FALLBACK_WIDTH_MS = 24 * 60 * 60_000;
 
 type Point = { timestamp: number; value: number };
 
-export const useSetup = (chart: Chart | null, enabled: boolean) => {
-  const [signal, setSignal] = useState<Signal | null>(null);
-  const searchParams = useSearchParams();
-  const signalId = searchParams.get('signalId');
-
-  const symbol = chart?.getSymbol()?.ticker || '';
+type RenderedTradeSetup = {
+  chart: Chart;
+  signalId: string;
+};
 
-  useEffect(() => {
-    if (!signalId || !symbol) {
-      setSignal(null);
-      return;
-    }
-    getSignal(symbol, signalId).then(setSignal);
-  }, [symbol, signalId]);
+export const useTradeSetup = ({
+  chart,
+  enabled,
+  signal,
+}: {
+  chart: Chart | null;
+  enabled: boolean;
+  signal: Signal | null;
+}) => {
+  const [rendered, setRendered] = useState<RenderedTradeSetup | null>(null);
 
   useEffect(() => {
     registerOverlay({
@@ -80,10 +77,16 @@ export const useSetup = (chart: Chart | null, enabled: boolean) => {
   }, [signal]);
 
   useEffect(() => {
-    if (!chart || !enabled || !signalId || !signal || !setupPoints) return;
+    if (!chart || !enabled || !signal || !setupPoints) {
+      setRendered(null);
+      return;
+    }
 
     const currentSymbol = chart.getSymbol()?.ticker;
-    if (signal.symbol !== currentSymbol) return;
+    if (signal.symbol !== currentSymbol) {
+      setRendered(null);
+      return;
+    }
 
     const tpId = `${signal.signalId}-tp`;
     const slId = `${signal.signalId}-sl`;
@@ -111,12 +114,24 @@ export const useSetup = (chart: Chart | null, enabled: boolean) => {
       points: [setupPoints.start],
     });
 
+    setRendered((current) =>
+      current?.chart === chart && current.signalId === signal.signalId
+        ? current
+        : { chart, signalId: signal.signalId },
+    );
+
     return () => {
       chart.removeOverlay({ id: tpId, name: SETUP });
       chart.removeOverlay({ id: slId, name: SETUP });
       chart.removeOverlay({ name: SETUP_START });
     };
-  }, [chart, enabled, signalId, signal, setupPoints]);
-
-  return { signal };
+  }, [chart, enabled, signal, setupPoints]);
+
+  return Boolean(
+    enabled &&
+      chart &&
+      signal &&
+      rendered?.chart === chart &&
+      rendered.signalId === signal.signalId,
+  );
 };

package/src/app/components/Dashboard/KlineChart/hooks/useSignal.ts

@@ -1,11 +1,6 @@
-'use client';
-
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import _ from 'lodash';
 import { Chart } from 'klinecharts';
-import { getSignal } from '#actions/signal';
-import { Signal } from '@tradejs/types';
+import type { Signal } from '@tradejs/types';
 import {
   drawSignalFigures,
   ensureBaseFigureOverlaysRegistered,
@@ -37,49 +32,74 @@ const fitKeepRightZoom = (chart: Chart, lastDataTsMs: number) => {
   chart.setOffsetRightDistance?.(rightOffsetPx);
 };
 
-export const useSignal = (chart: Chart | null, enabled: boolean) => {
-  const [signal, setSignal] = useState<Signal | null>(null);
-  const searchParams = useSearchParams();
-  const signalId = searchParams.get('signalId');
-  const autoZoom = Boolean(searchParams.get('autoZoom')) ?? false;
+type RenderedSignalFigures = {
+  chart: Chart;
+  signalId: string;
+};
 
-  const data = chart?.getDataList();
-  const symbol = chart?.getSymbol()?.ticker || '';
+export const useSignalFigures = ({
+  chart,
+  lastDataTimestamp,
+  enabled,
+  signal,
+  autoZoom,
+}: {
+  chart: Chart | null;
+  lastDataTimestamp: number | null;
+  enabled: boolean;
+  signal: Signal | null;
+  autoZoom: boolean;
+}) => {
+  const [rendered, setRendered] = useState<RenderedSignalFigures | null>(null);
 
   useEffect(() => {
-    if (!signalId || !symbol) {
-      setSignal(null);
+    if (!chart || !enabled || lastDataTimestamp == null || !signal) {
+      setRendered(null);
       return;
     }
-    getSignal(symbol, signalId).then(setSignal);
-  }, [signalId, symbol]);
-
-  useEffect(() => {
-    if (!chart || !enabled || !data || _.isEmpty(data) || !signal) return;
 
     const currentSymbol = chart.getSymbol()?.ticker;
-    if (signal.symbol !== currentSymbol) return;
+    if (signal.symbol !== currentSymbol) {
+      setRendered(null);
+      return;
+    }
 
     const normalized = normalizeSignalFigures(signal);
-    if (!normalized) return;
-
-    ensureBaseFigureOverlaysRegistered();
-
-    const overlays = drawSignalFigures({
-      chart,
-      idPrefix: `signal-${signal.signalId}`,
-      figures: normalized,
-    });
+    const overlays = normalized
+      ? (() => {
+          ensureBaseFigureOverlaysRegistered();
+
+          return drawSignalFigures({
+            chart,
+            idPrefix: `signal-${signal.signalId}`,
+            figures: normalized,
+          });
+        })()
+      : [];
 
     if (autoZoom) {
-      const lastDataTsMs = toMs(data[data.length - 1].timestamp);
+      const lastDataTsMs = toMs(lastDataTimestamp);
       if (Number.isFinite(lastDataTsMs)) {
         fitKeepRightZoom(chart, lastDataTsMs);
       }
     }
 
+    setRendered((current) =>
+      current?.chart === chart && current.signalId === signal.signalId
+        ? current
+        : { chart, signalId: signal.signalId },
+    );
+
     return () => {
       removeSignalFigures(chart, overlays);
     };
-  }, [autoZoom, chart, data, enabled, signal]);
+  }, [autoZoom, chart, enabled, lastDataTimestamp, signal]);
+
+  return Boolean(
+    enabled &&
+      chart &&
+      signal &&
+      rendered?.chart === chart &&
+      rendered.signalId === signal.signalId,
+  );
 };

package/src/app/components/Dashboard/KlineChart/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import _ from 'lodash';
 import {
   init,
@@ -20,11 +21,12 @@ import {
   useBtcIndicator,
   useBtcCorrelation,
   useSpreadIndicator,
-  useSignal,
+  useDashboardSignal,
+  useSignalFigures,
   useBacktest,
   useSupportResistanceLines,
   useResize,
-  useSetup,
+  useTradeSetup,
 } from './hooks';
 import { usePluginIndicators } from './hooks/usePluginIndicators';
 import { IndicatorRendererConfig, useData } from '#store';
@@ -45,31 +47,49 @@ export const KlineChart = ({
   indicatorRenderers,
   live = true,
 }: KlineChartProps) => {
-  const chartRef = useRef<Chart | null>(null);
+  const [chart, setChart] = useState<Chart | null>(null);
+  const [initializedHistory, setInitializedHistory] = useState<{
+    chart: Chart;
+    key: string;
+  } | null>(null);
   const { data, key, fulfilled } = useData(filters, live);
+  const searchParams = useSearchParams();
+  const signalId = searchParams.get('signalId');
+  const autoZoom = searchParams.get('autoZoom') === 'true';
+  const dashboardSignal = useDashboardSignal({
+    symbol: filters.symbol,
+    signalId,
+  });
   const updateDataCallback = useRef<
     DataLoaderSubscribeBarParams['callback'] | null
   >(null);
   const RIGHT_EDGE_EPSILON_BARS = 1;
+  const historyKey = `${id}:${key}:${filters.symbol}:${filters.interval}`;
+  const historyReady = Boolean(
+    chart &&
+      fulfilled &&
+      !_.isEmpty(data) &&
+      initializedHistory?.chart === chart &&
+      initializedHistory.key === historyKey,
+  );
 
   useEffect(() => {
-    const chart = init(id) as Chart;
-    chartRef.current = chart;
+    const nextChart = init(id) as Chart;
+    setChart(nextChart);
 
-    darkTheme(chart);
+    darkTheme(nextChart);
 
     return () => {
       dispose(id);
-      chartRef.current = null;
+      setChart((current) => (current === nextChart ? null : current));
     };
   }, [id]);
 
   useEffect(() => {
-    if (!chartRef.current || !fulfilled || _.isEmpty(data)) {
+    if (!chart || !fulfilled || _.isEmpty(data)) {
       return;
     }
 
-    const chart = chartRef.current;
     const currentSymbol = chart.getSymbol()?.ticker;
     const currentInterval = chart.getPeriod()?.span;
     const nextInterval = parseInt(filters.interval, 10);
@@ -77,15 +97,20 @@ export const KlineChart = ({
     const intervalChanged = currentInterval !== nextInterval;
 
     if (symbolChanged || intervalChanged) {
-      chartRef.current.setSymbol({ ticker: filters.symbol, pricePrecision: 9 });
-      chartRef.current.setPeriod({
+      chart.setSymbol({ ticker: filters.symbol, pricePrecision: 9 });
+      chart.setPeriod({
         span: nextInterval,
         type: 'minute',
       });
 
-      chartRef.current.setDataLoader({
+      chart.setDataLoader({
         getBars: ({ callback }) => {
           callback(data);
+          setInitializedHistory((current) =>
+            current?.chart === chart && current.key === historyKey
+              ? current
+              : { chart, key: historyKey },
+          );
         },
         subscribeBar: ({ callback }) => {
           updateDataCallback.current = callback;
@@ -142,9 +167,12 @@ export const KlineChart = ({
     if (!wasPinnedToRightEdge) {
       chart.scrollToDataIndex(dataIndexToKeepVisible);
     }
-  }, [data, filters.interval, filters.symbol, fulfilled, key]);
-
-  const chart = chartRef.current;
+    setInitializedHistory((current) =>
+      current?.chart === chart && current.key === historyKey
+        ? current
+        : { chart, key: historyKey },
+    );
+  }, [chart, data, filters.interval, filters.symbol, fulfilled, historyKey]);
 
   useResize(chart, id);
   useAtrIndicator(chart, indicators.atr.enabled, indicators.atr.periods || []);
@@ -166,16 +194,34 @@ export const KlineChart = ({
   );
   useBacktest(chart, filters.backtestId || undefined);
   useSupportResistanceLines(chart, indicators.resistant?.enabled);
-  useSignal(chart, true);
-  useSetup(chart, true);
+  const signalReady =
+    dashboardSignal.status === 'loaded' && dashboardSignal.signal != null;
+  const signalFiguresReady = useSignalFigures({
+    chart,
+    lastDataTimestamp: data.at(-1)?.timestamp ?? null,
+    enabled: historyReady && signalReady,
+    signal: dashboardSignal.signal,
+    autoZoom,
+  });
+  const tradeSetupReady = useTradeSetup({
+    chart,
+    enabled: historyReady && signalReady,
+    signal: dashboardSignal.signal,
+  });
   usePluginIndicators(chart, indicators, indicatorRenderers, data);
 
+  const screenshotReady = signalId
+    ? historyReady && signalReady && signalFiguresReady && tradeSetupReady
+    : historyReady;
+
   return (
     <>
       <div
         id={id}
         data-testid="market-chart"
-        data-chart-ready={fulfilled && !_.isEmpty(data) ? 'true' : 'false'}
+        data-chart-ready={historyReady ? 'true' : 'false'}
+        data-signal-status={dashboardSignal.status}
+        data-screenshot-ready={screenshotReady ? 'true' : 'false'}
       />
       {!fulfilled && <OverlaySpinner />}
     </>