feat: handle instrument change for chart

Author: vinu-deriv

src/api/services/chart/chart-sse.ts

@@ -14,6 +14,18 @@ const activeSubscriptions = new Map<
     }
 >();
 
+// Function to clear all active subscriptions and history cache
+export const clearChartCache = () => {
+    // Unsubscribe from all active subscriptions
+    activeSubscriptions.forEach((subscription) => {
+        subscription.unsubscribe();
+    });
+
+    // Clear the maps
+    activeSubscriptions.clear();
+    historyCache.clear();
+};
+
 /**
  * Subscribes to candle data stream for a specific symbol
  * @param symbol The symbol to subscribe to
@@ -273,7 +285,8 @@ export const handleChartForget = async (request: any): Promise<{ msg_type: strin
  * @returns Promise resolving to forget_all response
  */
 export const handleChartForgetStream = async (): Promise<{ msg_type: string }> => {
-    // The actual unsubscription is handled by the returned function from handleChartSubscribe
-    // This function is just for compatibility with the existing API
+    // Unsubscribe from all active subscriptions
+    clearChartCache();
+
     return { msg_type: "forget_all" };
 };

src/components/Chart/Chart.tsx

@@ -9,6 +9,7 @@ import {
     handleChartForgetStream,
 } from "@/api/services/chart";
 import { ToolbarWidgets } from "./Components";
+import { useTradeStore } from "@/stores/tradeStore";
 
 export const TradeChart: React.FC = () => {
     const ref = useRef<{
@@ -19,13 +20,24 @@ export const TradeChart: React.FC = () => {
     const { isMobile, isDesktop } = useDeviceDetection();
     const [chartType, setChartType] = useState("line"); // "line", "candles", "hollow"
     const [granularity, setGranularity] = useState(0); // 0 for tick, 60 for 1m candles, etc.
+    const instrument = useTradeStore((state) => state.instrument);
 
-    // Mock API request handlers
+    // API request handlers
     const requestAPI = (request: any) => {
+        // If the request is for ticks_history, use the current instrument
+        if (request.ticks_history) {
+            request.ticks_history = instrument;
+        }
         return handleChartApiRequest(request);
     };
 
     const requestSubscribe = (request: any, callback: any) => {
+        // If the request is for ticks or ticks_history, use the current instrument
+        if (request.ticks) {
+            request.ticks = instrument;
+        } else if (request.ticks_history) {
+            request.ticks_history = instrument;
+        }
         return handleChartSubscribe(request, callback);
     };
 
@@ -37,6 +49,28 @@ export const TradeChart: React.FC = () => {
         return handleChartForgetStream();
     };
 
+    // When instrument changes, forget all existing streams and force chart reload
+    const [chartKey, setChartKey] = useState(instrument);
+    const [isChartLoading, setIsChartLoading] = useState(false);
+
+    useEffect(() => {
+        // Set loading state
+        setIsChartLoading(true);
+
+        // Clear all existing streams
+        requestForgetStream();
+
+        // Change the key to force a complete re-render of the SmartChart component
+        setChartKey(instrument);
+
+        // Set a timeout to hide the loader after a short delay
+        const loadingTimeout = setTimeout(() => {
+            setIsChartLoading(false);
+        }, 1500); // 1.5 seconds should be enough for most chart loads
+
+        return () => clearTimeout(loadingTimeout);
+    }, [instrument]);
+
     // Update chart type and granularity
     const updateChartType = (type: string) => {
         // First, forget all existing streams to ensure clean state
@@ -92,6 +126,14 @@ export const TradeChart: React.FC = () => {
 
     return (
         <div className="flex h-full relative bg-theme border-r text-gray-100">
+            {isChartLoading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-theme bg-opacity-80">
+                    <div className="text-center">
+                        <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-solid border-blue-500 border-r-transparent"></div>
+                        <p className="mt-4 text-white">Loading chart data...</p>
+                    </div>
+                </div>
+            )}
             <Suspense
                 fallback={
                     <div className="flex items-center justify-center h-full w-full">
@@ -103,8 +145,10 @@ export const TradeChart: React.FC = () => {
                 }
             >
                 <SmartChart
+                    key={chartKey} // Add key to force re-render when instrument changes
                     ref={ref}
                     id="trade-chart"
+                    symbol={instrument} // Explicitly pass the instrument as symbol
                     barriers={[]}
                     chartStatusListener={() => null}
                     crosshair={0}

src/components/ContractDetailsChart/ContractDetailsChart.tsx

@@ -8,6 +8,7 @@ import {
     handleChartSubscribe,
     handleChartForget,
     handleChartForgetStream,
+    clearChartCache,
 } from "@/api/services/chart";
 import { getContractReplayData, closeContractStream } from "@/utils/contractApi";
 import { createChartMarkers } from "@/utils/chart-markers";
@@ -300,10 +301,20 @@ export const ContractDetailsChart: React.FC<ContractDetailsChartProps> = ({
 
     // API request handlers
     const requestAPI = (request: any) => {
+        // If the request is for ticks_history, use the effective symbol
+        if (request.ticks_history) {
+            request.ticks_history = effectiveSymbol;
+        }
         return handleChartApiRequest(request);
     };
 
     const requestSubscribe = (request: any, callback: any) => {
+        // If the request is for ticks or ticks_history, use the effective symbol
+        if (request.ticks) {
+            request.ticks = effectiveSymbol;
+        } else if (request.ticks_history) {
+            request.ticks_history = effectiveSymbol;
+        }
         return handleChartSubscribe(request, callback);
     };
 
@@ -315,13 +326,27 @@ export const ContractDetailsChart: React.FC<ContractDetailsChartProps> = ({
         return handleChartForgetStream();
     };
 
-    // Chart state change listener
-    const chartStateChange = (state: string) => {
-        setChartState(state);
-        if (state === "READY") {
-            setIsChartReady(true);
-        }
-    };
+    // When effectiveSymbol changes, forget all existing streams and force chart reload
+    const [chartKey, setChartKey] = useState(effectiveSymbol);
+    const [isChartLoading, setIsChartLoading] = useState(false);
+
+    useEffect(() => {
+        // Set loading state
+        setIsChartLoading(true);
+
+        // Clear all existing streams
+        clearChartCache();
+
+        // Change the key to force a complete re-render of the SmartChart component
+        setChartKey(effectiveSymbol);
+
+        // Set a timeout to hide the loader after a short delay
+        const loadingTimeout = setTimeout(() => {
+            setIsChartLoading(false);
+        }, 1500); // 1.5 seconds should be enough for most chart loads
+
+        return () => clearTimeout(loadingTimeout);
+    }, [effectiveSymbol]);
 
     // Create markers for entry and exit spots using the chart-markers utility
     const markers_array = useMemo(() => {
@@ -513,6 +538,14 @@ export const ContractDetailsChart: React.FC<ContractDetailsChartProps> = ({
             className={`relative bg-theme shadow-md rounded-lg overflow-hidden ${isLandscape ? "h-full" : "h-[400px]"}`}
         >
             <div className="absolute inset-0 rounded-lg overflow-hidden">
+                {isChartLoading && (
+                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-theme bg-opacity-80 rounded-lg">
+                        <div className="text-center">
+                            <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-solid border-blue-500 border-r-transparent"></div>
+                            <p className="mt-4 text-white">Loading chart data...</p>
+                        </div>
+                    </div>
+                )}
                 <Suspense
                     fallback={
                         <div className="flex items-center justify-center h-full w-full">
@@ -524,8 +557,10 @@ export const ContractDetailsChart: React.FC<ContractDetailsChartProps> = ({
                     }
                 >
                     <SmartChart
+                        key={chartKey} // Add key to force re-render when symbol changes
                         ref={ref}
                         id="replay-chart"
+                        symbol={effectiveSymbol} // Explicitly pass the effective symbol
                         barriers={barriers_array}
                         chartStatusListener={(isChartReady: boolean) => {
                             setIsChartReady(isChartReady);