feat: implement balanced barrier stability system (#27)

jim-deriv · web-flow · commit 11298bc55d79 · 2025-08-22T13:20:52.000+08:00
- Add stable reference pattern with deep hashing in Chart.tsx
- Implement render optimization in PriceLineStore.ts with balanced thresholds
- Prevent micro-movements while maintaining responsiveness
- 5px threshold for relative barriers, 3px for absolute
- 100ms rate limiting with 0.1% quote change sensitivity
- Preserve all dragging functionality and user interactions
diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -27,18 +27,8 @@ import SettingsDialog from './SettingsDialog';
 import ScrollToRecent from './ScrollToRecent';
 
 const Chart = React.forwardRef((props: TChartProps, ref) => {
-    const {
-        chart,
-        drawTools,
-        studies,
-        chartSetting,
-        chartType,
-        state,
-        loader,
-        chartAdapter,
-        crosshair,
-        timeperiod,
-    } = useStores();
+    const { chart, drawTools, studies, chartSetting, chartType, state, loader, chartAdapter, crosshair, timeperiod } =
+        useStores();
     const { chartId, init, destroy, isChartAvailable, chartContainerHeight, containerWidth } = chart;
     const { setCrosshairState } = crosshair;
     const { settingsDialog: studiesSettingsDialog, restoreStudies, activeItems } = studies;
@@ -86,7 +76,7 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
 
     React.useEffect(() => {
         updateProps(props);
-    });
+    }, [props, updateProps]);
 
     const prevLang = usePrevious(t.lang);
     React.useEffect(() => {
@@ -96,7 +86,10 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [t.lang]);
 
-    const defaultTopWidgets = () => <ChartTitle />;
+    // [AI]
+    // Memoize defaultTopWidgets to prevent recreation on every render
+    const defaultTopWidgets = React.useCallback(() => <ChartTitle />, []);
+    // [/AI]
 
     const {
         id,
@@ -114,6 +107,110 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
         contracts_array = [],
     } = props;
 
+    // [AI]
+    // Create stable references that persist across renders for barriers
+    const stableBarrierRef = React.useRef<typeof barriers>([]);
+    const lastBarrierHashRef = React.useRef<string>('');
+
+    // Use useEffect to update barriers when they actually change, avoiding useMemo dependency issues
+    React.useEffect(() => {
+        // Create a hash of all barrier properties that matter for rendering
+        const barrierHash = barriers
+            .map(barrier => {
+                if (!barrier) return 'null';
+
+                const {
+                    high,
+                    low,
+                    color,
+                    lineStyle,
+                    shade,
+                    shadeColor,
+                    relative,
+                    draggable,
+                    hidePriceLines,
+                    hideBarrierLine,
+                    hideOffscreenLine,
+                    title,
+                    key,
+                } = barrier;
+                return JSON.stringify({
+                    high,
+                    low,
+                    color,
+                    lineStyle,
+                    shade,
+                    shadeColor,
+                    relative,
+                    draggable,
+                    hidePriceLines,
+                    hideBarrierLine,
+                    hideOffscreenLine,
+                    title,
+                    key,
+                });
+            })
+            .join('|');
+
+        // Only update the stable reference if the barrier properties have actually changed
+        if (barrierHash !== lastBarrierHashRef.current) {
+            // Barrier data actually changed, updating stable reference
+            lastBarrierHashRef.current = barrierHash;
+            stableBarrierRef.current = barriers.map(barrier => {
+                if (!barrier) return barrier;
+
+                // Create a plain object with barrier properties for the chart
+                return {
+                    ...barrier,
+                    high: barrier.high,
+                    low: barrier.low,
+                    color: barrier.color,
+                    lineStyle: barrier.lineStyle,
+                    shade: barrier.shade,
+                    shadeColor: barrier.shadeColor,
+                    relative: barrier.relative,
+                    draggable: barrier.draggable,
+                    hidePriceLines: barrier.hidePriceLines,
+                    hideBarrierLine: barrier.hideBarrierLine,
+                    hideOffscreenLine: barrier.hideOffscreenLine,
+                    title: barrier.title,
+                    key: barrier.key,
+                };
+            });
+        }
+    }, [barriers]);
+
+    // Return the stable reference directly without useMemo
+    const stableBarriers = stableBarrierRef.current;
+
+    // Memoize the entire barriers rendering to prevent re-renders when barriers haven't changed
+    const memoizedBarriers = React.useMemo(() => {
+        return stableBarriers.map(({ key, ...barr }, idx) => (
+            <Barrier
+                key={key || `barrier-${idx}`} // eslint-disable-line react/no-array-index-key
+                high={barr.high}
+                low={barr.low}
+                color={barr.color}
+                lineStyle={barr.lineStyle}
+                shade={barr.shade}
+                shadeColor={barr.shadeColor}
+                relative={barr.relative}
+                draggable={barr.draggable}
+                hidePriceLines={barr.hidePriceLines}
+                hideBarrierLine={barr.hideBarrierLine}
+                hideOffscreenLine={barr.hideOffscreenLine}
+                title={barr.title}
+                onChange={barr.onChange}
+                hideOffscreenBarrier={barr.hideOffscreenBarrier}
+                isSingleBarrier={barr.isSingleBarrier}
+                opacityOnOverlap={barr.opacityOnOverlap}
+                showOffscreenArrows={barr.showOffscreenArrows}
+                foregroundColor={barr.foregroundColor}
+            />
+        ));
+    }, [stableBarriers]);
+    // [/AI]
+
     const hasPosition = chartControlsWidgets && position && !isMobile;
     const TopWidgets = topWidgets || defaultTopWidgets;
     // if there are any markers, then increase the subholder z-index
@@ -133,10 +230,23 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
         chartAdapter.updateContracts(contracts_array);
     }, [contracts_array]);
 
-    // to always show price info on mobile screen
-    if (isMobile && crosshair.state !== 2) {
-        setCrosshairState(2);
-    }
+    // [AI]
+    // Move conditional logic to useEffect to prevent re-renders during render phase
+    React.useEffect(() => {
+        // to always show price info on mobile screen
+        if (isMobile && crosshair.state !== 2) {
+            setCrosshairState(2);
+        }
+    }, [isMobile, crosshair.state, setCrosshairState]);
+
+    // Memoize the dynamic style object to prevent recreation on every render
+    const chartContainerStyle = React.useMemo(
+        () => ({
+            height: historical && chartContainerHeight && isMobile ? chartContainerHeight - 30 : chartContainerHeight,
+        }),
+        [historical, chartContainerHeight, isMobile]
+    );
+    // [/AI]
 
     return (
         <div
@@ -163,14 +273,7 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
                     >
                         <div className='ciq-chart-area'>
                             <div className={classNames('ciq-chart', { 'closed-chart': isChartClosed })}>
-                                <RenderInsideChart at='subholder'>
-                                    {barriers.map(({ key, ...barr }, idx) => (
-                                        <Barrier
-                                            key={`barrier-${idx}`} // eslint-disable-line react/no-array-index-key
-                                            {...barr}
-                                        />
-                                    ))}
-                                </RenderInsideChart>
+                                <RenderInsideChart at='subholder'>{memoizedBarriers}</RenderInsideChart>
                                 <RenderInsideChart at='subholder'>
                                     {!isCandle && !isSpline && isHighestLowestMarkerEnabled && <HighestLowestMarker />}
                                 </RenderInsideChart>
@@ -183,16 +286,7 @@ const Chart = React.forwardRef((props: TChartProps, ref) => {
                                         <TopWidgets />
                                     </div>
                                 )}
-                                <div
-                                    className='chartContainer'
-                                    ref={chartContainerRef}
-                                    style={{
-                                        height:
-                                            historical && chartContainerHeight && isMobile
-                                                ? chartContainerHeight - 30
-                                                : chartContainerHeight,
-                                    }}
-                                >
+                                <div className='chartContainer' ref={chartContainerRef} style={chartContainerStyle}>
                                     <Crosshair />
                                 </div>
                                 {enabledNavigationWidget && (
diff --git a/src/store/PriceLineStore.ts b/src/store/PriceLineStore.ts
@@ -2,7 +2,7 @@ import EventEmitter from 'event-emitter-es6';
 import { action, computed, observable, when, makeObservable, reaction, IReactionDisposer } from 'mobx';
 import Context from 'src/components/ui/Context';
 import MainStore from '.';
-import { ARROW_HEIGHT, DIRECTIONS, lerp, makeElementDraggable } from '../utils';
+import { ARROW_HEIGHT, DIRECTIONS, makeElementDraggable } from '../utils';
 
 const LINE_OFFSET_HEIGHT = 4;
 const LINE_OFFSET_HEIGHT_HALF = LINE_OFFSET_HEIGHT >> 1;
@@ -87,20 +87,86 @@ export default class PriceLineStore {
         this.mainStore.chartAdapter.painter.registerCallback(this.drawBarrier);
     };
 
-    drawBarrier(currentTickPercent: number) {
+    // [AI]
+    // Complete barrier freeze system - no jumping allowed
+    _lastCalculatedTop: number | null = null;
+    _lastQuoteForCalculation: number | null = null;
+    _lastTickPercent: number | null = null;
+    _updateCount = 0;
+    _lastUpdateTime = 0;
+    _isPositionFrozen = false;
+
+    // Centralized method to update barrier position - completely frozen approach
+    _updateBarrierPosition(newTop: number, _source: string, quote?: number) {
+        this._updateCount++;
+
+        // More balanced thresholds - prevent micro-movements but allow proper updates
+        const threshold = this.relative ? 5 : 3; // Reasonable thresholds for stability
+        const now = Date.now();
+        const timeSinceLastUpdate = now - this._lastUpdateTime;
+
+        // For relative barriers, only allow updates if:
+        // 1. It's the initial position (null)
+        // 2. User is dragging
+        // 3. There's been meaningful movement (5+ pixels)
+        // 4. At least 100ms has passed since last update (more responsive)
+        if (this.relative && this._lastCalculatedTop !== null && !this.isDragging) {
+            if (timeSinceLastUpdate < 100 || Math.abs(newTop - this._lastCalculatedTop) < threshold) {
+                return false;
+            }
+        }
+
+        // Only update if it's initial position or meets extreme threshold
+        if (
+            this._lastCalculatedTop === null ||
+            Math.abs(newTop - this._lastCalculatedTop) > threshold ||
+            this.isDragging
+        ) {
+            this.__top = newTop;
+            if (this._line) {
+                this._line.style.transform = `translateY(${newTop - 13}px)`;
+            }
+            this._lastCalculatedTop = newTop;
+            this._lastUpdateTime = now;
+            if (quote !== undefined) {
+                this._lastQuoteForCalculation = quote;
+            }
+            return true;
+        }
+        return false;
+    }
+
+    drawBarrier(_currentTickPercent: number) {
         if (this.isDragging) return;
 
         const quotes = this.mainStore.chart.feed?.quotes;
-
         if (!quotes || quotes.length < 2) return;
 
         const currentQuote = this._getPrice(quotes[quotes.length - 1].Close);
-        const previousQuote = this._getPrice(quotes[quotes.length - 2].Close);
 
-        const lerpQuote = lerp(previousQuote, currentQuote, currentTickPercent);
-
-        this.top = this._calculateTop(lerpQuote) as number;
+        if (this.relative) {
+            // For relative barriers, use smaller quote change threshold (0.1% instead of 1%)
+            if (
+                this._lastQuoteForCalculation === null ||
+                Math.abs(currentQuote - this._lastQuoteForCalculation) > Math.abs(currentQuote * 0.001)
+            ) {
+                const newTop = this._calculateTop(currentQuote) as number;
+                if (newTop !== undefined) {
+                    this._updateBarrierPosition(newTop, 'drawBarrier-relative', currentQuote);
+                }
+            }
+        } else if (
+            this._lastQuoteForCalculation === null ||
+            Math.abs(currentQuote - this._lastQuoteForCalculation) > 0.001
+        ) {
+            // For absolute barriers, use smaller threshold for better responsiveness
+            const newTop = this._calculateTop(currentQuote) as number;
+            if (newTop !== undefined) {
+                this._updateBarrierPosition(newTop, 'drawBarrier-absolute', currentQuote);
+            }
+        }
     }
+    // [/AI]
 
     destructor() {
         this.disposeDrawReaction?.();
@@ -119,7 +185,7 @@ export default class PriceLineStore {
         if (this._line && subholder) {
             makeElementDraggable(this._line, subholder, {
                 onDragStart: (e: MouseEvent) => exitIfNotisDraggable(e, this._startDrag),
-                onDrag: (e: MouseEvent) => exitIfNotisDraggable(e, e => this._dragLine(e, subholder)),
+                onDrag: (e: MouseEvent) => exitIfNotisDraggable(e, event => this._dragLine(event, subholder)),
                 onDragReleased: (e: MouseEvent) => exitIfNotisDraggable(e, this._endDrag),
             });
         }
@@ -157,7 +223,7 @@ export default class PriceLineStore {
     }
 
     set dragPrice(value) {
-        if (value != this._dragPrice) {
+        if (value !== this._dragPrice) {
             this._dragPrice = value;
             this._draw();
             this._emitter.emit(PriceLineStore.EVENT_PRICE_CHANGED, this._dragPrice);
@@ -285,8 +351,7 @@ export default class PriceLineStore {
 
         let top = this._locationFromPrice(quote || +this.realPrice);
 
-        // @ts-ignore
-        const height = window.flutterChartElement?.clientHeight || 0;
+        const height = (window as any).flutterChartElement?.clientHeight || 0;
 
         // keep line on chart even if price is off viewable area:
         if (top < 0) {
@@ -326,23 +391,26 @@ export default class PriceLineStore {
         return Math.round(top) | 0;
     };
 
-    // Manually update the top to improve performance.
-    // We don't pay for react reconciler and mobx observable tracking in animation frames.
+    // [AI]
+    // Override the top setter to use centralized stability
     set top(v) {
-        this.__top = v;
-        if (this._line) {
-            this._line.style.transform = `translateY(${this.top - 13}px)`;
-        }
+        this._updateBarrierPosition(v, 'direct-setter');
     }
+
     get top() {
         return this.__top;
     }
 
+    // Update _draw method to use centralized stability
     _draw = () => {
         if (this.visible && this._line) {
-            this.top = this._calculateTop() as number;
+            const newTop = this._calculateTop() as number;
+            if (newTop !== undefined) {
+                this._updateBarrierPosition(newTop, '_draw');
+            }
         }
     };
+    // [/AI]
 
     onPriceChanged(callback: EventListener) {
         this._emitter.on(PriceLineStore.EVENT_PRICE_CHANGED, callback);
