From 0c0592b511c4bf9b372ae91a7de0062cc8977c3a Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Sun, 5 Apr 2026 01:39:18 -0700
Subject: [PATCH] fix: wire chart creation onClick in LeftPanel chart gallery

Clicking a chart type card now calls useCreateChart to create
a chart instance on the backend and add it to the canvas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/frameworks/components/layout/LeftPanel.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/frameworks/components/layout/LeftPanel.tsx b/frontend/src/frameworks/components/layout/LeftPanel.tsx
index 59bac51..25bca02 100644
--- a/frontend/src/frameworks/components/layout/LeftPanel.tsx
+++ b/frontend/src/frameworks/components/layout/LeftPanel.tsx
@@ -22,6 +22,7 @@ import {
   type ChartTypeMeta,
 } from '@/domain/valueObjects/ChartType';
 import { type FieldType } from '@/domain/valueObjects/FieldType';
+import { useCreateChart } from '@/frameworks/hooks/useCreateChart';
 
 const FIELD_TYPE_ICON: Record<FieldType, React.ReactNode> = {
   number: <FieldNumberOutlined />,
@@ -165,6 +166,8 @@ function FieldsTab() {
 
 /** ChartsTab: chart type gallery grouped by category */
 function ChartsTab() {
+  const { handleCreate, loading } = useCreateChart();
+
   const grouped = useMemo(() => {
     const map: Record<string, ChartTypeMeta[]> = {};
     for (const meta of Object.values(CHART_TYPE_META)) {
@@ -200,8 +203,9 @@ function ChartsTab() {
                 key={meta.type}
                 size="small"
                 hoverable
-                style={{ textAlign: 'center', cursor: 'pointer' }}
+                style={{ textAlign: 'center', cursor: 'pointer', opacity: loading ? 0.5 : 1 }}
                 bodyStyle={{ padding: '8px 4px' }}
+                onClick={() => !loading && handleCreate(meta.type)}
               >
                 <BarChartOutlined style={{ fontSize: 20, marginBottom: 4 }} />
                 <div style={{ fontSize: 11, lineHeight: 1.3 }}>{meta.label}</div>