Merge pull request #862 from objectstack-ai/copilot/fix-live-preview-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). Widget config live preview sync and scatter chart type switch ✅ fixed (P1.10 Phase 10). Dashboard save/refresh metadata sync ✅ fixed (P1.10 Phase 11).
+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). Dashboard save/refresh metadata sync ✅ fixed (P1.10 Phase 11). Data provider field override for live preview ✅ fixed (P1.10 Phase 12).
 5. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
 6. **PWA Sync** — Background sync is simulated only
 
@@ -443,6 +443,13 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Fix: `DashboardDesignPage.saveSchema` did not call `metadata.refresh()` — other pages saw stale dashboard data after save
 - [x] Add 5 new Vitest tests: metadata refresh after widget save (2), metadata refresh after widget delete (2), metadata refresh after DashboardDesignPage save (1)
 
+**Phase 12 — Data Provider Field Override for Live Preview:**
+- [x] Fix: Widget-level fields (`categoryField`, `valueField`, `aggregate`, `object`) did not override data provider config (`widget.data.aggregate`) — editing these fields in the config panel had no effect on the rendered chart when a data provider was present
+- [x] `getComponentSchema()` in `DashboardRenderer` and `DashboardGridLayout` now merges widget-level fields with data provider aggregate config, with widget-level fields taking precedence
+- [x] Fix: `objectName` for table/pivot widgets used `widgetData.object || widget.object` — reversed to `widget.object || widgetData.object` so config panel edits to data source are reflected immediately
+- [x] Fix: `DashboardWithConfig` did not pass `designMode`, `selectedWidgetId`, or `onWidgetClick` to `DashboardRenderer` — widgets could not be selected or live-previewed in the plugin-level component
+- [x] Add 10 new Vitest tests: widget-level field overrides for aggregate groupBy/field/function (3), objectName precedence for chart/table (2), simultaneous field overrides (1), DashboardWithConfig design mode and widget selection (2), existing live preview tests (2)
+
 ### 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.
@@ -1013,6 +1020,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 (widget live preview & scatter type switch ✅ fixed, save/refresh metadata sync ✅ fixed) · 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, save/refresh metadata sync ✅ fixed, data provider field override ✅ 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

@@ -137,12 +137,21 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
 
       // provider: 'object' — delegate to ObjectChart for async data loading
       if (isObjectProvider(widgetData)) {
-        const effectiveYField = widgetData.aggregate?.field || yField;
+        // Merge widget-level fields with data provider config.
+        // Widget-level fields take precedence so that config panel
+        // edits are immediately reflected in the live preview.
+        const providerAgg = widgetData.aggregate;
+        const effectiveAggregate = providerAgg ? {
+          field: widget.valueField || providerAgg.field,
+          function: widget.aggregate || providerAgg.function,
+          groupBy: widget.categoryField || providerAgg.groupBy,
+        } : undefined;
+        const effectiveYField = effectiveAggregate?.field || yField;
         return {
           type: 'object-chart',
           chartType: widgetType,
-          objectName: widgetData.object || widget.object,
-          aggregate: widgetData.aggregate,
+          objectName: widget.object || widgetData.object,
+          aggregate: effectiveAggregate,
           xAxisKey: xAxisKey,
           series: [{ dataKey: effectiveYField }],
           colors: CHART_COLORS,
@@ -192,7 +201,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         return {
           type: 'data-table',
           ...restOptions,
-          objectName: widgetData.object || widget.object,
+          objectName: widget.object || widgetData.object,
           dataProvider: widgetData,
           data: [],
           searchable: false,
@@ -233,7 +242,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         return {
           type: 'pivot',
           ...restOptions,
-          objectName: widgetData.object || widget.object,
+          objectName: widget.object || widgetData.object,
           dataProvider: widgetData,
           data: [],
         };

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -121,15 +121,21 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — delegate to ObjectChart for async data loading
                 if (isObjectProvider(widgetData)) {
-                    // When aggregate is configured, use the aggregate field as the
-                    // series dataKey so it matches the output of aggregateRecords()
-                    // which produces { [groupBy]: key, [field]: result }.
-                    const effectiveYField = widgetData.aggregate?.field || yField;
+                    // Merge widget-level fields with data provider config.
+                    // Widget-level fields take precedence so that config panel
+                    // edits are immediately reflected in the live preview.
+                    const providerAgg = widgetData.aggregate;
+                    const effectiveAggregate = providerAgg ? {
+                        field: widget.valueField || providerAgg.field,
+                        function: widget.aggregate || providerAgg.function,
+                        groupBy: widget.categoryField || providerAgg.groupBy,
+                    } : undefined;
+                    const effectiveYField = effectiveAggregate?.field || yField;
                     return {
                         type: 'object-chart',
                         chartType: widgetType,
-                        objectName: widgetData.object || widget.object,
-                        aggregate: widgetData.aggregate,
+                        objectName: widget.object || widgetData.object,
+                        aggregate: effectiveAggregate,
                         xAxisKey: xAxisKey,
                         series: [{ dataKey: effectiveYField }],
                         colors: CHART_COLORS,
@@ -180,7 +186,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     return {
                         type: 'data-table',
                         ...restOptions,
-                        objectName: widgetData.object || widget.object,
+                        objectName: widget.object || widgetData.object,
                         dataProvider: widgetData,
                         data: [],
                         searchable: false,
@@ -221,7 +227,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
                     return {
                         type: 'pivot',
                         ...restOptions,
-                        objectName: widgetData.object || widget.object,
+                        objectName: widget.object || widgetData.object,
                         dataProvider: widgetData,
                         data: [],
                     };

packages/plugin-dashboard/src/DashboardWithConfig.tsx

@@ -179,6 +179,9 @@ export function DashboardWithConfig({
           schema={liveSchema}
           onRefresh={onRefresh}
           recordCount={recordCount}
+          designMode={configOpen}
+          selectedWidgetId={selectedWidgetId}
+          onWidgetClick={handleWidgetSelect}
         />
       </div>
 

packages/plugin-dashboard/src/__tests__/DashboardRenderer.widgetData.test.tsx

@@ -925,4 +925,217 @@ describe('DashboardRenderer widget data extraction', () => {
     // Either way, it should not crash
     expect(container).toBeDefined();
   });
+
+  // ---- Live preview: widget-level fields override data provider config ------
+
+  it('should override data provider aggregate.groupBy with widget.categoryField', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'bar',
+          title: 'Live Preview',
+          object: 'opportunity',
+          categoryField: 'region',
+          layout: { x: 0, y: 0, w: 2, h: 2 },
+          options: {
+            xField: 'stage',
+            yField: 'amount',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    // widget.categoryField ('region') should override aggregate.groupBy ('stage')
+    expect(chartSchema.aggregate.groupBy).toBe('region');
+    expect(chartSchema.xAxisKey).toBe('region');
+  });
+
+  it('should override data provider aggregate.field with widget.valueField', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'area',
+          title: 'Live Preview',
+          object: 'opportunity',
+          valueField: 'expected_revenue',
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+          options: {
+            xField: 'stage',
+            yField: 'amount',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    // widget.valueField ('expected_revenue') should override aggregate.field ('amount')
+    expect(chartSchema.aggregate.field).toBe('expected_revenue');
+    expect(chartSchema.series).toEqual([{ dataKey: 'expected_revenue' }]);
+  });
+
+  it('should override data provider aggregate.function with widget.aggregate', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'bar',
+          title: 'Live Preview',
+          object: 'opportunity',
+          aggregate: 'count',
+          layout: { x: 0, y: 0, w: 2, h: 2 },
+          options: {
+            xField: 'stage',
+            yField: 'amount',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    // widget.aggregate ('count') should override aggregate.function ('sum')
+    expect(chartSchema.aggregate.function).toBe('count');
+  });
+
+  it('should prefer widget.object over data provider object for objectName', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'line',
+          title: 'Live Preview',
+          object: 'contact',
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+          options: {
+            xField: 'month',
+            yField: 'count',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'count', function: 'count', groupBy: 'month' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    // widget.object ('contact') should override data.object ('opportunity')
+    expect(chartSchema.objectName).toBe('contact');
+  });
+
+  it('should prefer widget.object for table widgets with data provider', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'table',
+          title: 'Live Preview Table',
+          object: 'contact',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const tableSchema = schemas.find(s => s.type === 'data-table');
+
+    if (tableSchema) {
+      // widget.object ('contact') should override data.object ('opportunity')
+      expect(tableSchema.objectName).toBe('contact');
+    }
+  });
+
+  it('should apply all widget-level field overrides simultaneously for live preview', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'pie',
+          title: 'Full Override',
+          object: 'account',
+          categoryField: 'industry',
+          valueField: 'revenue',
+          aggregate: 'avg',
+          layout: { x: 0, y: 0, w: 2, h: 2 },
+          options: {
+            xField: 'stage',
+            yField: 'amount',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.chartType).toBe('pie');
+    expect(chartSchema.objectName).toBe('account');
+    expect(chartSchema.xAxisKey).toBe('industry');
+    expect(chartSchema.aggregate).toEqual({
+      field: 'revenue',
+      function: 'avg',
+      groupBy: 'industry',
+    });
+    expect(chartSchema.series).toEqual([{ dataKey: 'revenue' }]);
+  });
 });

packages/plugin-dashboard/src/__tests__/DashboardWithConfig.test.tsx

@@ -234,4 +234,43 @@ describe('DashboardWithConfig', () => {
     expect(container).toBeDefined();
     expect(screen.getByTestId('dashboard-with-config')).toBeDefined();
   });
+
+  it('should enable design mode and pass widget selection props to DashboardRenderer when config is open', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    // When config panel is open, widget click overlays should be present
+    // (design mode enabled) for interactive widget selection
+    const overlays = screen.queryAllByTestId('widget-click-overlay');
+    expect(overlays.length).toBeGreaterThan(0);
+  });
+
+  it('should switch to WidgetConfigPanel when a widget is clicked in design mode', () => {
+    render(
+      <DashboardWithConfig
+        schema={sampleSchema}
+        config={sampleConfig}
+        onConfigSave={vi.fn()}
+        onWidgetSave={vi.fn()}
+        defaultConfigOpen={true}
+      />,
+    );
+    // Initially shows Dashboard > Configuration
+    expect(screen.getByText('Dashboard')).toBeDefined();
+    expect(screen.getByText('Configuration')).toBeDefined();
+    expect(screen.queryByText('Widget')).toBeNull();
+
+    // Click on a widget preview to select it
+    const widgetOverlay = screen.getByTestId('dashboard-preview-widget-widget-1');
+    fireEvent.click(widgetOverlay);
+
+    // Should now show Widget breadcrumb (WidgetConfigPanel)
+    expect(screen.getByText('Widget')).toBeDefined();
+  });
 });