feat: Implement channel-based chart data updates

Replace app rerender approach with Go channel communication for
chart data updates, following the Go proverb "share memory by
communicating" instead of "communicate by sharing memory".

Changes:
- Add ChartDataChannel property to runtime chart series
- Create global data channel for chart updates in state.go
- Pass data channel to BitcoinChart component
- Implement channel monitoring in ChartRenderer
- Send data updates through channel instead of app.Update()
- Use reflection for type-safe channel monitoring

Flow:
1. Chart initializes with data channel from InitChartDataChannel()
2. ChartRenderer starts goroutine to monitor the channel
3. On scroll, SendChartDataUpdate() sends new data through channel
4. Renderer receives data and updates series.Properties["data"]
5. Next render cycle uses updated data (no full rerender needed)

This approach is more Go-idiomatic and efficient than forcing
full app rerenders for data changes.

Author: claude

examples/webgpu-chart/app.gx

@@ -4,6 +4,9 @@ func App() (Component) {
 	// Get visible window of chart data (managed by scroll manager)
 	chartData := GetVisibleChartData()
 
+	// Get or initialize the data channel for reactive updates
+	dataChan := InitChartDataChannel()
+
 	Div(
 		ID("app"),
 		Class("chart-container"),
@@ -20,7 +23,7 @@ func App() (Component) {
 			Width(1200),
 			Height(700)
 		) {
-			GPUChart(NewBitcoinChart(chartData))
+			GPUChart(NewBitcoinChart(chartData, dataChan))
 		}
 		Div(Class("info")) {
 			P() {

examples/webgpu-chart/app_gen.go

@@ -1,13 +1,14 @@
 package main
 
-func BitcoinChart(data []OHLCV) (Chart) {
+func BitcoinChart(data []OHLCV, dataChan chan []OHLCV) (Chart) {
 	Chart(ChartBackground(0.08, 0.09, 0.12, 1.0)) {
 		XAxis(AxisPosition("bottom"), TimeScale(true), GridLines(true), Label("Time"))
 
 		YAxis(AxisPosition("right"), GridLines(true), Label("Price (USD)"))
 
 		CandlestickSeries(
 			ChartData(data),
+			ChartDataChannel(dataChan),
 			UpColor(0.18, 0.80, 0.44, 1.0),
 			DownColor(0.91, 0.27, 0.38, 1.0),
 			WickColor(0.6, 0.6, 0.65, 1.0),

examples/webgpu-chart/chart.gx

@@ -295,12 +295,13 @@ func (sm *ScrollManager) attachEventListeners() {
 	sm.app.Call("addEventListener", "keydown", sm.keyCallback)
 }
 
-// updateChart triggers a chart rerender with updated data
+// updateChart triggers a chart update by sending data through the channel
 func (sm *ScrollManager) updateChart() {
 	log("[Scroll] Viewport updated:", sm.chartData.visibleStart, "-", sm.chartData.visibleEnd, "of", len(sm.chartData.allData))
 
-	// Trigger the app to rerender with new visible data
-	TriggerChartUpdate()
+	// Send new visible data through the channel (non-blocking)
+	visibleData := sm.chartData.GetVisibleData()
+	SendChartDataUpdate(visibleData)
 
 	// Check if we need to fetch/generate more data
 	if sm.chartData.visibleEnd > len(sm.chartData.allData)-sm.chartData.prefetchSize {

examples/webgpu-chart/chart_gen.go

@@ -8,8 +8,22 @@ import "github.com/gaarutyunov/guix/pkg/runtime/chart"
 var (
 	globalScrollManager *ScrollManager
 	globalApp           *App
+	chartDataChannel    chan []chart.OHLCV
 )
 
+// InitChartDataChannel initializes the global chart data channel
+func InitChartDataChannel() chan []chart.OHLCV {
+	if chartDataChannel == nil {
+		chartDataChannel = make(chan []chart.OHLCV, 1) // Buffered channel
+	}
+	return chartDataChannel
+}
+
+// GetChartDataChannel returns the global chart data channel
+func GetChartDataChannel() chan []chart.OHLCV {
+	return chartDataChannel
+}
+
 // GetVisibleChartData returns the currently visible chart data
 // This is called by the app during rendering to get only the visible window of data
 func GetVisibleChartData() []chart.OHLCV {
@@ -30,9 +44,20 @@ func SetGlobalApp(app *App) {
 	globalApp = app
 }
 
-// TriggerChartUpdate triggers the app to rerender with updated data
-func TriggerChartUpdate() {
-	if globalApp != nil {
-		globalApp.Update()
+// SendChartDataUpdate sends new chart data through the channel
+func SendChartDataUpdate(data []chart.OHLCV) {
+	if chartDataChannel != nil {
+		// Non-blocking send - if channel is full, drain it first
+		select {
+		case chartDataChannel <- data:
+			// Successfully sent
+		default:
+			// Channel full, drain and send new data
+			select {
+			case <-chartDataChannel:
+			default:
+			}
+			chartDataChannel <- data
+		}
 	}
 }

examples/webgpu-chart/scroll.go

@@ -92,6 +92,9 @@ func NewChartRenderer(canvas *GPUCanvas, chart *GPUNode) (*ChartRenderer, error)
 		return nil, err
 	}
 
+	// Start monitoring data channels for updates
+	renderer.startDataChannelMonitors()
+
 	log("[ChartRenderer] Chart renderer created successfully")
 	return renderer, nil
 }
@@ -917,3 +920,80 @@ func (cr *ChartRenderer) createLineBindGroup(dataBuffer *GPUBuffer) js.Value {
 
 	return cr.Canvas.GPUContext.Device.Call("createBindGroup", bindGroupDesc)
 }
+
+// startDataChannelMonitors starts goroutines to monitor data channels for updates
+func (cr *ChartRenderer) startDataChannelMonitors() {
+	log("[ChartRenderer] Starting data channel monitors")
+
+	// Monitor candlestick series data channels
+	for _, series := range cr.CandlestickSeries {
+		if channelValue, hasChannel := series.Properties["dataChannel"]; hasChannel {
+			log("[ChartRenderer] Found dataChannel in candlestick series")
+
+			// Type assert to the correct channel type
+			if dataChan, ok := channelValue.(chan []interface{}); ok {
+				log("[ChartRenderer] Starting monitor for candlestick data channel (generic)")
+				go cr.monitorCandlestickChannel(series, dataChan)
+			} else {
+				// Try reflection to handle the actual type
+				log("[ChartRenderer] Data channel type:", fmt.Sprintf("%T", channelValue))
+				go cr.monitorCandlestickChannelReflect(series, channelValue)
+			}
+		}
+	}
+
+	log("[ChartRenderer] Data channel monitors started")
+}
+
+// monitorCandlestickChannel monitors a candlestick data channel for updates
+func (cr *ChartRenderer) monitorCandlestickChannel(series *GPUNode, dataChan chan []interface{}) {
+	log("[ChartRenderer] Candlestick channel monitor started")
+
+	for {
+		select {
+		case newData, ok := <-dataChan:
+			if !ok {
+				log("[ChartRenderer] Data channel closed")
+				return
+			}
+
+			log("[ChartRenderer] Received new data through channel:", len(newData), "candles")
+
+			// Update the series data property
+			series.Properties["data"] = newData
+		}
+	}
+}
+
+// monitorCandlestickChannelReflect monitors a channel using reflection
+func (cr *ChartRenderer) monitorCandlestickChannelReflect(series *GPUNode, channelValue interface{}) {
+	log("[ChartRenderer] Starting reflect-based channel monitor")
+
+	// Use reflection to receive from channel
+	channelVal := reflect.ValueOf(channelValue)
+	if channelVal.Kind() != reflect.Chan {
+		logError("[ChartRenderer] Value is not a channel")
+		return
+	}
+
+	log("[ChartRenderer] Channel monitor loop started")
+
+	for {
+		chosen, recv, recvOK := reflect.Select([]reflect.SelectCase{
+			{Dir: reflect.SelectRecv, Chan: channelVal},
+		})
+
+		if chosen == 0 {
+			if !recvOK {
+				log("[ChartRenderer] Channel closed")
+				return
+			}
+
+			// Update the series data property with received value
+			newData := recv.Interface()
+			log("[ChartRenderer] Received new data through reflect channel:", fmt.Sprintf("%T", newData))
+
+			series.Properties["data"] = newData
+		}
+	}
+}

examples/webgpu-chart/state.go

@@ -213,6 +213,11 @@ func ChartData(data interface{}) GPUProp {
 	return GPUProp{Key: "data", Value: data}
 }
 
+// ChartDataChannel sets a reactive data channel for the series
+func ChartDataChannel(ch interface{}) GPUProp {
+	return GPUProp{Key: "dataChannel", Value: ch}
+}
+
 // UpColor sets up candle color
 func UpColor(r, g, b, a float32) GPUProp {
 	return GPUProp{Key: "upColor", Value: NewVec4(r, g, b, a)}