fix: widget-level fields override data provider config for live preview

Copilot · hotlong · Copilot · commit 5d811e0c0eb7 · 2026-02-25T08:45:07.000Z
- DashboardRenderer/DashboardGridLayout getComponentSchema() now merges
  widget-level fields (categoryField, valueField, aggregate, object) with
  data provider config, with widget-level fields taking precedence
- Fixes objectName precedence for table/pivot widget types
- DashboardWithConfig now passes designMode/selectedWidgetId/onWidgetClick
  to DashboardRenderer to enable widget selection and live preview
- Added 8 new tests for live preview field override behavior

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/plugin-dashboard/src/DashboardGridLayout.tsx b/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: [],
         };
diff --git a/packages/plugin-dashboard/src/DashboardRenderer.tsx b/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: [],
                     };
diff --git a/packages/plugin-dashboard/src/DashboardWithConfig.tsx b/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>
 
diff --git a/packages/plugin-dashboard/src/__tests__/DashboardRenderer.widgetData.test.tsx b/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' }]);
+  });
 });
diff --git a/packages/plugin-dashboard/src/__tests__/DashboardWithConfig.test.tsx b/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();
+  });
 });
