
export class Clusters extends React.Component<{ controller?: ClustersClientController; }, any> {

	private controller: ClustersClientController
	private canvasRef
	private draggable
	isDragging = false
	scrollPosition
	constructor(props) {
		super(props)
		this.canvasRef = React.createRef()
		this.draggable = React.createRef()
		this.controller = props.controller
	}

	ctx = () => {
		return this.canvasRef.current.getContext("2d")
	}

	handleMouseMove = () => {

	}

	dragCanvas = (e) => {
		if (!this.isDragging) return
		const {x} = getCanvasMousePosition(e)
		const movement = this.scrollPosition - x
		this.draggable.current.scroll(this.draggable.current.scrollLeft + movement, 0)
	}

	handleMouseDown = (e) => {
		e.preventDefault()
		this.isDragging = true
		const {x} = getCanvasMousePosition(e)
		this.scrollPosition = x

	}

	handleMouseUp = (e) => {
		this.isDragging = false
	}

	mouseIsOutOfCanvas = () => {
		this.isDragging = false
	}

	componentDidMount(): void {
		this.draggable.current.scroll(460, 0)
		this.controller.initClustersCanvas(this.canvasRef.current , this.ctx())
		this.controller.root.tradingDriverController.initOrdersFeedComponent(this)
	}

	render() {
		return (
			<div
				ref={this.draggable}
				onMouseDown={this.handleMouseDown}
				onMouseUp={this.handleMouseUp}
				onMouseMove={this.dragCanvas}
				onMouseLeave={this.mouseIsOutOfCanvas}
				onMouseEnter={this.mouseIsOutOfCanvas}
				className={"draggable_Wrapper"}>
				<div
					className={"clustersWrapper driver_item"}>
					<canvas
						ref={this.canvasRef}
						onContextMenu={(e) => e.preventDefault()}
					/>
				</div>
			</div>
		)
	}
}


здесь добавлен scroll ...

Нужно добавить scroll  в 
const TradingCup = () => {
  const {cup, bestMicroPrice, maxVolume, readyState, cupSubscribe, cupUnsubscribe} = useRustWsServer();
  const [tradesArr, setTradesArr] = useState<Array<CupItem>>([]);
  const canvasWidth = 100; // Define your canvas width
  const canvasHeight = 100; // Define your canvas height
  const rowHeight = 10; // Define row height
  const bubbleSize = 10; // Define bubble size constant
  const orderFeedCanvas = useRef<HTMLCanvasElement | null>(null);

  const deepGreen = (ratio: number): string => {
    const r = Math.floor(0 + (255 - 0) * ratio);
    const g = Math.floor(128 + (255 - 128) * ratio);
    const b = Math.floor(0 + (255 - 0) * ratio);

    return `rgb(${r}, ${g}, ${b})`;
  };

  const deepRed = (ratio: number): string => {
    const r = Math.floor(255 + (255 - 255) * ratio);
    const g = Math.floor(0 + (255 - 0) * ratio);
    const b = Math.floor(0 + (255 - 0) * ratio);

    return `rgb(${r}, ${g}, ${b})`;
  };

  const clamp = (value: number, min: number, max: number): number => {
    return Math.min(Math.max(value, min), max);
  };

  const renderTrade = (prev: CupItem, item: CupItem, index: number) => {
    if (orderFeedCanvas.current) {
      const ctx = orderFeedCanvas.current.getContext("2d");
      let xPos = canvasWidth - (index * (bubbleSize * 1.5)) - bubbleSize;
      const y = item.side === "Buy" ? 50 : 150; // Adjust this value based on your calculations

      const label = item.quantity.toFixed(2); // Show 2 decimal places for quantity
      const {width: textWidth} = ctx.measureText(label);
      const size = clamp(item.quantity / 400 * 35, (textWidth / 2) + 3, 35); // Replace 400 with the maximum quantity in your data

      const bubbleX = xPos;
      const bubbleY = y + 8;
      ctx.beginPath();
      const bigRatio = (size / 35) / 3;
      ctx.fillStyle = item.side === "Buy"
        ? deepGreen(bigRatio)
        : deepRed(bigRatio);
      ctx.strokeStyle = "black";
      ctx.arc(xPos, bubbleY, size, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();

      ctx.fillStyle = "#FFFFFF";
      ctx.fillText(label, bubbleX - (textWidth / 2), (bubbleY + (rowHeight / 2)) - 2);
    }
  };

  const renderTrades = () => {
    if (orderFeedCanvas.current) {
      const ctx = orderFeedCanvas.current.getContext("2d");
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      tradesArr.reduce((prev: CupItem, cur: CupItem, index: number) => {
        renderTrade(prev, cur, tradesArr.length - index);
        prev = cur;

        return prev;
      }, {} as CupItem);
    }
  };

  useEffect(() => {
    console.log(cup);
    console.log(tradesArr);
    setTradesArr(cup);
  }, [cup]);

  useEffect(() => {
    renderTrades();
  }, [tradesArr]);
  return (
    <>
      <div style={{width: 250, height: 150}}>
        <canvas
          ref={orderFeedCanvas}
          width={canvasWidth}
          height={canvasHeight}
        />
      </div>
    </>
  );
};