Merge pull request #850 from objectstack-ai/copilot/fix-widget-refresh-issue

Author: hotlong

ROADMAP.md

@@ -19,7 +19,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
 2. **Designer Interaction** — ViewDesigner and DataModelDesigner have undo/redo, field type selectors, inline editing, Ctrl+S save, column drag-to-reorder with dnd-kit ✅
 3. **View Config Live Preview Sync** — Config panel changes sync in real-time for Grid, but `showSort`/`showSearch`/`showFilters`/`striped`/`bordered` not yet propagated to Kanban/Calendar/Timeline/Gallery/Map/Gantt (see P1.8.1)
-4. **Dashboard Config Panel** — Airtable-style right-side configuration panel for dashboards (data source, layout, widget properties, sub-editors, type definitions)
+4. **Dashboard Config Panel** — Airtable-style right-side configuration panel for dashboards (data source, layout, widget properties, sub-editors, type definitions). Widget config live preview sync and scatter chart type switch ✅ fixed (P1.10 Phase 10).
 5. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
 6. **PWA Sync** — Background sync is simulated only
 
@@ -401,6 +401,18 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Updated SchemaRenderer mock to forward `className` and include interactive child button for more realistic testing
 - [x] Add 9 new Vitest tests: pointer-events-none presence/absence, overlay presence/absence, relative positioning, click-to-select on Card-based widgets
 
+**Phase 10 — Widget Config Live Preview Sync & Type Switch Fix:**
+- [x] Fix: `DashboardWithConfig` did not pass `onFieldChange` to `WidgetConfigPanel`, preventing live preview of widget config changes
+- [x] Add internal `liveSchema` state to `DashboardWithConfig` for real-time widget preview during editing
+- [x] Add `configVersion` counter to stabilize `selectedWidgetConfig` and prevent `useConfigDraft` draft reset loops
+- [x] Fix: `scatter` chart type was not handled in `DashboardRenderer` and `DashboardGridLayout` — switching to scatter caused errors
+- [x] Add `scatter` to chart type conditions in both `DashboardRenderer.getComponentSchema()` and `DashboardGridLayout.getComponentSchema()`
+- [x] Fix: Data binding fields (`categoryField`, `valueField`, `object`, `aggregate`) from config panel did not affect rendering — `getComponentSchema()` only read from `options.xField`/`options.yField`/`options.data`
+- [x] Add widget-level field fallbacks: `widget.categoryField || options.xField`, `widget.valueField || options.yField` in both `DashboardRenderer` and `DashboardGridLayout`
+- [x] Support object-chart construction from widget-level fields when no explicit data provider exists (e.g. newly created widgets via config panel)
+- [x] Support data-table construction from `widget.object` when no data provider exists (table widgets created via config panel)
+- [x] Add 7 new Vitest tests: scatter chart (2), widget-level field fallbacks (2), object-chart from widget fields, data-table from widget.object, DashboardWithConfig live preview
+
 ### P1.11 Console — Schema-Driven View Config Panel Migration
 
 > Migrated the Console ViewConfigPanel from imperative implementation (~1655 lines) to Schema-Driven architecture using `ConfigPanelRenderer` + `useConfigDraft` + `ConfigPanelSchema`, reducing to ~170 lines declarative wrapper + schema factory.
@@ -969,6 +981,6 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 
 ---
 
-**Roadmap Status:** 🎯 Active — AppShell · Designer Interaction · View Config Live Preview Sync (P1.8.1) · Dashboard Config Panel · Schema-Driven View Config Panel ✅ · Right-Side Visual Editor Drawer ✅ · Airtable UX Parity
+**Roadmap Status:** 🎯 Active — AppShell · Designer Interaction · View Config Live Preview Sync (P1.8.1) · Dashboard Config Panel (widget live preview & scatter type switch ✅ fixed) · Schema-Driven View Config Panel ✅ · Right-Side Visual Editor Drawer ✅ · Airtable UX Parity
 **Next Review:** March 15, 2026
 **Contact:** hello@objectui.org | https://github.com/objectstack-ai/objectui

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -129,10 +129,11 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
 
     const widgetType = widget.type;
     const options = (widget.options || {}) as Record<string, any>;
-    if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
+    if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut' || widgetType === 'scatter') {
       const widgetData = (widget as any).data || options.data;
-      const xAxisKey = options.xField || 'name';
-      const yField = options.yField || 'value';
+      // Widget-level fields (from config panel) override options-level fields
+      const xAxisKey = widget.categoryField || options.xField || 'name';
+      const yField = widget.valueField || options.yField || 'value';
 
       // provider: 'object' — delegate to ObjectChart for async data loading
       if (isObjectProvider(widgetData)) {
@@ -149,6 +150,26 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         };
       }
 
+      // No explicit data provider but widget has object binding
+      // (e.g. newly created widget via config panel) — build object-chart
+      if (!widgetData && widget.object) {
+        const aggregate = widget.aggregate ? {
+          field: widget.valueField || 'value',
+          function: widget.aggregate,
+          groupBy: widget.categoryField || 'name',
+        } : undefined;
+        return {
+          type: 'object-chart',
+          chartType: widgetType,
+          objectName: widget.object,
+          aggregate,
+          xAxisKey: xAxisKey,
+          series: [{ dataKey: widget.valueField || 'value' }],
+          colors: CHART_COLORS,
+          className: "h-full"
+        };
+      }
+
       const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
 
       return {
@@ -180,6 +201,19 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         };
       }
 
+      // No explicit data provider but widget has object binding
+      if (!widgetData && widget.object) {
+        return {
+          type: 'data-table',
+          ...options,
+          objectName: widget.object,
+          data: [],
+          searchable: false,
+          pagination: false,
+          className: "border-0"
+        };
+      }
+
       return {
         type: 'data-table',
         ...options,

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -112,11 +112,12 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             // Handle Shorthand Registry Mappings
             const widgetType = widget.type;
             const options = (widget.options || {}) as Record<string, any>;
-            if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
+            if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut' || widgetType === 'scatter') {
                 // Support data at widget level or nested inside options
                 const widgetData = (widget as any).data || options.data;
-                const xAxisKey = options.xField || 'name';
-                const yField = options.yField || 'value';
+                // Widget-level fields (from config panel) override options-level fields
+                const xAxisKey = widget.categoryField || options.xField || 'name';
+                const yField = widget.valueField || options.yField || 'value';
 
                 // provider: 'object' — delegate to ObjectChart for async data loading
                 if (isObjectProvider(widgetData)) {
@@ -136,6 +137,26 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     };
                 }
 
+                // No explicit data provider but widget has object binding
+                // (e.g. newly created widget via config panel) — build object-chart
+                if (!widgetData && widget.object) {
+                    const aggregate = widget.aggregate ? {
+                        field: widget.valueField || 'value',
+                        function: widget.aggregate,
+                        groupBy: widget.categoryField || 'name',
+                    } : undefined;
+                    return {
+                        type: 'object-chart',
+                        chartType: widgetType,
+                        objectName: widget.object,
+                        aggregate,
+                        xAxisKey: xAxisKey,
+                        series: [{ dataKey: widget.valueField || 'value' }],
+                        colors: CHART_COLORS,
+                        className: "h-[200px] sm:h-[250px] md:h-[300px]"
+                    };
+                }
+
                 const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
 
                 return {
@@ -168,6 +189,19 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     };
                 }
 
+                // No explicit data provider but widget has object binding
+                if (!widgetData && widget.object) {
+                    return {
+                        type: 'data-table',
+                        ...options,
+                        objectName: widget.object,
+                        data: [],
+                        searchable: false,
+                        pagination: false,
+                        className: "border-0"
+                    };
+                }
+
                 return {
                     type: 'data-table',
                     ...options,

packages/plugin-dashboard/src/DashboardWithConfig.tsx

@@ -7,10 +7,10 @@
  */
 
 import * as React from 'react';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Settings } from 'lucide-react';
 import { cn, Button } from '@object-ui/components';
-import type { DashboardSchema } from '@object-ui/types';
+import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
 import { DashboardRenderer } from './DashboardRenderer';
 import { DashboardConfigPanel } from './DashboardConfigPanel';
@@ -52,6 +52,7 @@ export interface DashboardWithConfigProps {
  * - Dashboard-level configuration editing
  * - Click-to-select a widget → sidebar switches to WidgetConfigPanel
  * - Back navigation from widget config to dashboard config
+ * - Live preview: widget config changes are reflected in real time
  */
 export function DashboardWithConfig({
   schema,
@@ -66,10 +67,22 @@ export function DashboardWithConfig({
   const [configOpen, setConfigOpen] = useState(defaultConfigOpen);
   const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
 
-  // Find the selected widget's config (flattened)
+  // Internal schema state for live preview during widget editing.
+  // Updated on every field change; reset when external schema prop changes.
+  const [liveSchema, setLiveSchema] = useState<DashboardSchema>(schema);
+  const [configVersion, setConfigVersion] = useState(0);
+
+  useEffect(() => {
+    setLiveSchema(schema);
+    setConfigVersion((v) => v + 1);
+  }, [schema]);
+
+  // Stable widget config for the config panel — only recomputed on
+  // widget selection change or save (configVersion), NOT on every live
+  // field change. This prevents useConfigDraft from resetting the draft.
   const selectedWidgetConfig = React.useMemo(() => {
-    if (!selectedWidgetId || !schema.widgets) return null;
-    const widget = schema.widgets.find(
+    if (!selectedWidgetId || !liveSchema.widgets) return null;
+    const widget = liveSchema.widgets.find(
       (w) => (w.id || w.title) === selectedWidgetId,
     );
     if (!widget) return null;
@@ -87,7 +100,8 @@ export function DashboardWithConfig({
       layoutW: widget.layout?.w ?? 1,
       layoutH: widget.layout?.h ?? 1,
     };
-  }, [selectedWidgetId, schema.widgets]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedWidgetId, configVersion]);
 
   const handleWidgetSelect = useCallback(
     (widgetId: string) => {
@@ -101,12 +115,37 @@ export function DashboardWithConfig({
     setSelectedWidgetId(null);
   }, []);
 
+  // Live-update handler: updates liveSchema so DashboardRenderer re-renders.
+  const handleWidgetFieldChange = useCallback(
+    (field: string, value: any) => {
+      if (!selectedWidgetId) return;
+      setLiveSchema((prev) => {
+        if (!prev.widgets) return prev;
+        return {
+          ...prev,
+          widgets: prev.widgets.map((w) => {
+            if ((w.id || w.title) !== selectedWidgetId) return w;
+            if (field === 'layoutW') {
+              return { ...w, layout: { ...(w.layout || {}), w: value } as DashboardWidgetSchema['layout'] };
+            }
+            if (field === 'layoutH') {
+              return { ...w, layout: { ...(w.layout || {}), h: value } as DashboardWidgetSchema['layout'] };
+            }
+            return { ...w, [field]: value };
+          }),
+        };
+      });
+    },
+    [selectedWidgetId],
+  );
+
   const handleWidgetSave = useCallback(
     (widgetConfig: Record<string, any>) => {
       if (selectedWidgetId && onWidgetSave) {
         onWidgetSave(selectedWidgetId, widgetConfig);
       }
       setSelectedWidgetId(null);
+      setConfigVersion((v) => v + 1);
     },
     [selectedWidgetId, onWidgetSave],
   );
@@ -137,7 +176,7 @@ export function DashboardWithConfig({
         </div>
 
         <DashboardRenderer
-          schema={schema}
+          schema={liveSchema}
           onRefresh={onRefresh}
           recordCount={recordCount}
         />
@@ -152,6 +191,7 @@ export function DashboardWithConfig({
               onClose={handleWidgetClose}
               config={selectedWidgetConfig}
               onSave={handleWidgetSave}
+              onFieldChange={handleWidgetFieldChange}
             />
           ) : (
             <DashboardConfigPanel