From 052042f4db92a4866fcb27c252743d5b6c017d4c Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Thu, 26 Feb 2026 15:53:40 +0000
Subject: [PATCH] Remove table_name requirement from AI chart generation
 frontend

Backend now autonomously discovers relevant tables, so the frontend
no longer needs to fetch tables or show a table selector for AI generation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../chart-edit/chart-edit.component.css       | 11 ---------
 .../chart-edit/chart-edit.component.html      | 15 +-----------
 .../charts/chart-edit/chart-edit.component.ts | 23 ++++---------------
 .../src/app/services/dashboards.service.ts    |  2 --
 4 files changed, 5 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
index 2498f2107..acc893957 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
@@ -140,17 +140,6 @@
 	}
 }
 
-.ai-table-field {
-	flex: 0 0 220px;
-}
-
-@media (width <= 600px) {
-	.ai-table-field {
-		flex: 1;
-		width: 100%;
-	}
-}
-
 .ai-description-field {
 	flex: 1;
 }
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.html b/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
index 866ab4b55..fd7e37f16 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
@@ -20,7 +20,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
 
     @if (!loading()) {
         <div class="chart-edit-content">
-            @if (aiTables().length > 0 && aiDashboardId()) {
+            @if (aiDashboardId()) {
                 <div class="ai-section" [class.ai-section--collapsed]="!aiExpanded()">
                     <div class="ai-section-header" (click)="aiExpanded.set(!aiExpanded())">
                         <div class="ai-section-title">
@@ -33,19 +33,6 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
                     @if (aiExpanded()) {
                         <div class="ai-section-body">
                             <div class="ai-fields">
-                                <mat-form-field appearance="outline" class="ai-table-field">
-                                    <mat-label>Table</mat-label>
-                                    <mat-select
-                                        [ngModel]="aiTableName()"
-                                        (ngModelChange)="aiTableName.set($event)"
-                                        data-testid="ai-table-select">
-                                        @for (table of aiTables(); track table.table) {
-                                            <mat-option [value]="table.table">{{ table.display_name || table.table }}</mat-option>
-                                        }
-                                    </mat-select>
-                                    <mat-hint>Select the table to generate a chart for</mat-hint>
-                                </mat-form-field>
-
                                 <mat-form-field appearance="outline" class="ai-description-field">
                                     <mat-label>Chart description</mat-label>
                                     <textarea matInput
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
index fb31c787a..ce315f105 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
@@ -17,7 +17,6 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { Angulartics2 } from 'angulartics2';
 import posthog from 'posthog-js';
-import { firstValueFrom } from 'rxjs';
 import { DEFAULT_COLOR_PALETTE } from 'src/app/lib/chart-config.helper';
 import {
 	ChartAxisConfig,
@@ -30,11 +29,9 @@ import {
 	GeneratedPanelWithPosition,
 	TestQueryResult,
 } from 'src/app/models/saved-query';
-import { TableProperties } from 'src/app/models/table';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DashboardsService } from 'src/app/services/dashboards.service';
 import { SavedQueriesService } from 'src/app/services/saved-queries.service';
-import { TablesService } from 'src/app/services/tables.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
 import { DashboardsSidebarComponent } from '../../dashboards/dashboards-sidebar/dashboards-sidebar.component';
 import { AlertComponent } from '../../ui-components/alert/alert.component';
@@ -131,13 +128,11 @@ export class ChartEditComponent implements OnInit {
 
 	// AI generation
 	protected aiDescription = signal('');
-	protected aiTableName = signal('');
 	protected aiGenerating = signal(false);
-	protected aiTables = signal<TableProperties[]>([]);
 	protected aiDashboardId = signal<string | null>(null);
 	protected aiExpanded = signal(true);
 	protected manualExpanded = signal(false);
-	protected canGenerate = computed(() => !!this.aiDescription().trim() && !!this.aiTableName() && !this.aiGenerating());
+	protected canGenerate = computed(() => !!this.aiDescription().trim() && !this.aiGenerating());
 
 	public chartTypes: { value: ChartType; label: string }[] = [
 		{ value: 'bar', label: 'Bar Chart' },
@@ -374,7 +369,6 @@ export class ChartEditComponent implements OnInit {
 	private _savedQueries = inject(SavedQueriesService);
 	private _connections = inject(ConnectionsService);
 	private _dashboards = inject(DashboardsService);
-	private _tables = inject(TablesService);
 	private _uiSettings = inject(UiSettingsService);
 	private route = inject(ActivatedRoute);
 	private router = inject(Router);
@@ -645,12 +639,12 @@ export class ChartEditComponent implements OnInit {
 
 	async generateWithAi(): Promise<void> {
 		const dashboardId = this.aiDashboardId();
-		if (!dashboardId || !this.aiTableName() || !this.aiDescription().trim()) return;
+		if (!dashboardId || !this.aiDescription().trim()) return;
 
 		this.aiGenerating.set(true);
 
 		try {
-			const result = await this._dashboards.generateWidgetWithAi(dashboardId, this.connectionId(), this.aiTableName(), {
+			const result = await this._dashboards.generateWidgetWithAi(dashboardId, this.connectionId(), {
 				chart_description: this.aiDescription(),
 			});
 
@@ -722,19 +716,10 @@ export class ChartEditComponent implements OnInit {
 		}
 	}
 
-	private async _loadAiPrerequisites(): Promise<void> {
+	private _loadAiPrerequisites(): void {
 		const connectionId = this.connectionId();
 		if (!connectionId) return;
 
-		try {
-			const tables = await firstValueFrom(this._tables.fetchTables(connectionId));
-			if (tables?.length) {
-				this.aiTables.set(tables);
-			}
-		} catch {
-			// Tables loading failed - AI feature will be unavailable
-		}
-
 		// Trigger dashboards loading; the effect in constructor picks up the result
 		this._dashboards.setActiveConnection(connectionId);
 	}
diff --git a/frontend/src/app/services/dashboards.service.ts b/frontend/src/app/services/dashboards.service.ts
index f9738a304..a4f6ea6d1 100644
--- a/frontend/src/app/services/dashboards.service.ts
+++ b/frontend/src/app/services/dashboards.service.ts
@@ -142,13 +142,11 @@ export class DashboardsService {
 	async generateWidgetWithAi(
 		dashboardId: string,
 		connectionId: string,
-		tableName: string,
 		payload: { chart_description: string; name?: string },
 	): Promise<GeneratedPanelWithPosition | null> {
 		return this._api.post<GeneratedPanelWithPosition>(
 			`/dashboard/${dashboardId}/widget/generate/${connectionId}`,
 			payload,
-			{ params: { tableName } },
 		);
 	}