Machine Learning - Bug fixes (#10377)

* Fixing ML extension bugs

extensions/machine-learning/src/views/models/manageModels/currentModelsComponent.ts

@@ -17,10 +17,13 @@ import { ImportedModel } from '../../../modelManagement/interfaces';
  * View to render current registered models
  */
 export class CurrentModelsComponent extends ModelViewBase implements IPageView {
-	private _tableComponent: azdata.Component | undefined;
 	private _dataTable: CurrentModelsTable | undefined;
 	private _loader: azdata.LoadingComponent | undefined;
 	private _tableSelectionComponent: TableSelectionComponent | undefined;
+	private _labelComponent: azdata.TextComponent | undefined;
+	private _descriptionComponent: azdata.TextComponent | undefined;
+	private _labelContainer: azdata.FlexContainer | undefined;
+	private _formBuilder: azdata.FormBuilder | undefined;
 
 	/**
 	 *
@@ -43,37 +46,69 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		});
 		this._dataTable = new CurrentModelsTable(this._apiWrapper, this, this._settings);
 		this._dataTable.registerComponent(modelBuilder);
-		this._tableComponent = this._dataTable.component;
 
 		let formModelBuilder = modelBuilder.formContainer();
-		this._tableSelectionComponent.addComponents(formModelBuilder);
-
-		if (this._tableComponent) {
-			formModelBuilder.addFormItem({
-				component: this._tableComponent,
-				title: ''
-			});
-		}
-
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(formModelBuilder.component())
 			.withProperties({
 				loading: true
 			}).component();
+		this._labelComponent = modelBuilder.text().withProperties({
+			width: 200,
+			value: constants.modelsListEmptyMessage
+		}).component();
+		this._descriptionComponent = modelBuilder.text().withProperties({
+			width: 200,
+			value: constants.modelsListEmptyDescription
+		}).component();
+		this._labelContainer = modelBuilder.flexContainer().withLayout({
+			flexFlow: 'column',
+			width: 800,
+			height: '400px',
+			justifyContent: 'center'
+		}).component();
+
+		this._labelContainer.addItem(
+			this._labelComponent
+			, {
+				CSSStyles: {
+					'align-items': 'center',
+					'padding-top': '30px',
+					'padding-left': `${this.componentMaxLength}px`,
+					'font-size': '16px'
+				}
+			});
+		this._labelContainer.addItem(
+			this._descriptionComponent
+			, {
+				CSSStyles: {
+					'align-items': 'center',
+					'padding-top': '10px',
+					'padding-left': `${this.componentMaxLength - 50}px`,
+					'font-size': '13px'
+				}
+			});
+
+		this.addComponents(formModelBuilder);
 		return this._loader;
 	}
 
 	public addComponents(formBuilder: azdata.FormBuilder) {
-		if (this._tableSelectionComponent && this._dataTable) {
+		this._formBuilder = formBuilder;
+		if (this._tableSelectionComponent && this._dataTable && this._labelContainer) {
 			this._tableSelectionComponent.addComponents(formBuilder);
 			this._dataTable.addComponents(formBuilder);
+			if (this._dataTable.isEmpty) {
+				formBuilder.addFormItem({ title: '', component: this._labelContainer });
+			}
 		}
 	}
 
 	public removeComponents(formBuilder: azdata.FormBuilder) {
-		if (this._tableSelectionComponent && this._dataTable) {
+		if (this._tableSelectionComponent && this._dataTable && this._labelContainer) {
 			this._tableSelectionComponent.removeComponents(formBuilder);
 			this._dataTable.removeComponents(formBuilder);
+			formBuilder.removeFormItem({ title: '', component: this._labelContainer });
 		}
 	}
 
@@ -91,10 +126,11 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		await this.onLoading();
 
 		try {
-			if (this._tableSelectionComponent) {
-				this._tableSelectionComponent.refresh();
+			if (this._tableSelectionComponent && this._dataTable) {
+				await this._tableSelectionComponent.refresh();
+				await this._dataTable.refresh();
+				this.refreshComponents();
 			}
-			await this._dataTable?.refresh();
 		} catch (err) {
 			this.showErrorMessage(constants.getErrorMessage(err));
 		} finally {
@@ -106,6 +142,13 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		return this._dataTable?.data;
 	}
 
+	private refreshComponents(): void {
+		if (this._formBuilder) {
+			this.removeComponents(this._formBuilder);
+			this.addComponents(this._formBuilder);
+		}
+	}
+
 	private async onTableSelected(): Promise<void> {
 		if (this._tableSelectionComponent?.data) {
 			this.importTable = this._tableSelectionComponent?.data;
@@ -113,6 +156,7 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 			if (this._dataTable) {
 				await this._dataTable.refresh();
 			}
+			this.refreshComponents();
 		}
 	}
 

extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts

@@ -25,6 +25,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 	private _downloadedFile: ModelArtifact | undefined;
 	private _onModelSelectionChanged: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
 	public readonly onModelSelectionChanged: vscode.Event<void> = this._onModelSelectionChanged.event;
+	public isEmpty: boolean = false;
 
 	/**
 	 * Creates new view
@@ -149,7 +150,6 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 		}
 	}
 
-
 	/**
 	 * Returns the component
 	 */
@@ -176,6 +176,8 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 				tableData = tableData.concat(models.map(model => this.createTableRow(model)));
 			}
 
+			this.isEmpty = models === undefined || models.length === 0;
+
 			this._table.data = tableData;
 		}
 		this.onModelSelected();
@@ -275,7 +277,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 					if (confirm) {
 						await this.sendDataRequest(DeleteModelEventName, model);
 						if (this.parent) {
-							await this.parent?.refresh();
+							await this.parent.refresh();
 						}
 					}
 				} catch (error) {

extensions/machine-learning/src/views/models/manageModels/importModelWizard.ts

@@ -108,11 +108,12 @@ export class ImportModelWizard extends ModelViewBase {
 			} else {
 				await this.importAzureModel(this.modelsViewData);
 			}
+			this._apiWrapper.showInfoMessage(constants.modelRegisteredSuccessfully);
 			await this.storeImportConfigTable();
-			this.showInfoMessage(constants.modelRegisteredSuccessfully);
+
 			return true;
 		} catch (error) {
-			this.showErrorMessage(`${constants.modelFailedToRegister} ${constants.getErrorMessage(error)}`);
+			await this.showErrorMessage(`${constants.modelFailedToRegister} ${constants.getErrorMessage(error)}`);
 			return false;
 		}
 	}

extensions/machine-learning/src/views/models/manageModels/modelImportLocationPage.ts

@@ -20,6 +20,9 @@ export class ModelImportLocationPage extends ModelViewBase implements IPageView,
 	private _formBuilder: azdata.FormBuilder | undefined;
 	public tableSelectionComponent: TableSelectionComponent | undefined;
 	private _labelComponent: azdata.TextComponent | undefined;
+	private _descriptionComponent: azdata.TextComponent | undefined;
+	private _labelContainer: azdata.FlexContainer | undefined;
+
 
 	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase) {
 		super(apiWrapper, parent.root, parent);
@@ -33,23 +36,40 @@ export class ModelImportLocationPage extends ModelViewBase implements IPageView,
 
 		this._formBuilder = modelBuilder.formContainer();
 		this.tableSelectionComponent = new TableSelectionComponent(this._apiWrapper, this, { editable: true, preSelected: true });
+		this._descriptionComponent = modelBuilder.text().withProperties({
+			width: 200
+		}).component();
 		this._labelComponent = modelBuilder.text().withProperties({
 			width: 200
 		}).component();
-		const container = modelBuilder.flexContainer().withLayout({
+		this._labelContainer = modelBuilder.flexContainer().withLayout({
+			flexFlow: 'column',
 			width: 800,
-			height: '400px',
+			height: '300px',
 			justifyContent: 'center'
-		}).withItems([
-			this._labelComponent
-		], {
-			CSSStyles: {
-				'align-items': 'center',
-				'padding-top': '30px',
-				'font-size': '16px'
-			}
 		}).component();
 
+		this._labelContainer.addItem(
+			this._labelComponent
+			, {
+				CSSStyles: {
+					'align-items': 'center',
+					'padding-top': '10px',
+					'padding-left': `${this.componentMaxLength}px`,
+					'font-size': '16px'
+				}
+			});
+		this._labelContainer.addItem(
+			this._descriptionComponent
+			, {
+				CSSStyles: {
+					'align-items': 'center',
+					'padding-top': '10px',
+					'padding-left': `${this.componentMaxLength - 80}px`,
+					'font-size': '13px'
+				}
+			});
+
 
 		this.tableSelectionComponent.onSelectedChanged(async () => {
 			await this.onTableSelected();
@@ -59,7 +79,7 @@ export class ModelImportLocationPage extends ModelViewBase implements IPageView,
 
 		this._formBuilder.addFormItem({
 			title: '',
-			component: container
+			component: this._labelContainer
 		});
 		this._form = this._formBuilder.component();
 		return this._form;
@@ -71,15 +91,24 @@ export class ModelImportLocationPage extends ModelViewBase implements IPageView,
 		}
 
 		if (this.importTable && this._labelComponent) {
-			const validated = await this.verifyImportConfigTable(this.importTable);
-			if (validated) {
-				this._labelComponent.value = constants.modelSchemaIsAcceptedMessage;
+			if (!this.validateImportTableName()) {
+				this._labelComponent.value = constants.selectModelsTableMessage;
 			} else {
-				this._labelComponent.value = constants.modelSchemaIsNotAcceptedMessage;
+				const validated = await this.verifyImportConfigTable(this.importTable);
+				if (validated) {
+					this._labelComponent.value = constants.modelSchemaIsAcceptedMessage;
+				} else {
+					this._labelComponent.value = constants.modelSchemaIsNotAcceptedMessage;
+				}
 			}
 		}
 	}
 
+	private validateImportTableName(): boolean {
+		return this.importTable?.databaseName !== undefined && this.importTable?.databaseName !== constants.selectDatabaseTitle
+			&& this.importTable?.tableName !== undefined && this.importTable?.tableName !== constants.selectTableTitle;
+	}
+
 	/**
 	 * Returns selected data
 	 */
@@ -116,7 +145,7 @@ export class ModelImportLocationPage extends ModelViewBase implements IPageView,
 	public async validate(): Promise<boolean> {
 		let validated = false;
 
-		if (this.data?.databaseName && this.data?.tableName) {
+		if (this.data && this.validateImportTableName()) {
 			validated = true;
 			validated = await this.verifyImportConfigTable(this.data);
 			if (!validated) {

extensions/machine-learning/src/views/models/prediction/columnsTable.ts

@@ -261,7 +261,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 				width: this.componentMaxLength
 			}).component();
 			const name = modelParameter.name;
-			let column = values.find(x => x.name === modelParameter.name);
+			let column = values.find(x => x.name.toLocaleUpperCase() === modelParameter.name.toLocaleUpperCase());
 			if (!column) {
 				column = values.length > 0 ? values[0] : undefined;
 			}

extensions/machine-learning/src/views/models/tableSelectionComponent.ts

@@ -29,7 +29,11 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 	private _dbTableComponent: azdata.FlexContainer | undefined;
 	private tableMaxLength = this.componentMaxLength * 2 + 70;
 	private _onSelectedChanged: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
+	private _existingTableButton: azdata.RadioButtonComponent | undefined;
+	private _newTableButton: azdata.RadioButtonComponent | undefined;
+	private _newTableName: azdata.InputBoxComponent | undefined;
 	private _existingTablesSelected: boolean = true;
+
 	public readonly onSelectedChanged: vscode.Event<void> = this._onSelectedChanged.event;
 
 	/**
@@ -55,50 +59,46 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 			await this.onDatabaseSelected();
 		});
 
-		const existingTableButton = modelBuilder.radioButton().withProperties({
+		this._existingTableButton = modelBuilder.radioButton().withProperties({
 			name: 'tableName',
 			value: 'existing',
 			label: 'Existing table',
 			checked: true
 		}).component();
-		const newTableButton = modelBuilder.radioButton().withProperties({
+		this._newTableButton = modelBuilder.radioButton().withProperties({
 			name: 'tableName',
 			value: 'new',
 			label: 'New table',
 			checked: false
 		}).component();
-		const newTableName = modelBuilder.inputBox().withProperties({
+		this._newTableName = modelBuilder.inputBox().withProperties({
 			width: this.componentMaxLength - 10,
 			enabled: false
 		}).component();
 		const group = modelBuilder.groupContainer().withItems([
-			existingTableButton,
+			this._existingTableButton,
 			this._tables,
-			newTableButton,
-			newTableName
+			this._newTableButton,
+			this._newTableName
 		], {
 			CSSStyles: {
 				'padding-top': '5px'
 			}
 		}).component();
 
-		existingTableButton.onDidClick(() => {
-			if (this._tables) {
-				this._tables.enabled = existingTableButton.checked;
-			}
-			newTableName.enabled = !existingTableButton.checked;
-			this._existingTablesSelected = existingTableButton.checked || false;
+		this._existingTableButton.onDidClick(() => {
+			this._existingTablesSelected = true;
+			this.refreshTableComponent();
 		});
-		newTableButton.onDidClick(() => {
-			if (this._tables) {
-				this._tables.enabled = !newTableButton.checked;
-			}
-			newTableName.enabled = newTableButton.checked;
-			this._existingTablesSelected = existingTableButton.checked || false;
+		this._newTableButton.onDidClick(() => {
+			this._existingTablesSelected = false;
+			this.refreshTableComponent();
 		});
-		newTableName.onTextChanged(async () => {
-			this._selectedTableName = newTableName.value || '';
-			await this.onTableSelected();
+		this._newTableName.onTextChanged(async () => {
+			if (this._newTableName) {
+				this._selectedTableName = this._newTableName.value || '';
+				await this.onTableSelected();
+			}
 		});
 
 		this._tables.onValueChanged(async (value) => {
@@ -192,7 +192,7 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 	public async loadData(): Promise<void> {
 		this._dbNames = await this.listDatabaseNames();
 		let dbNames = this._dbNames;
-		if (!this._settings.preSelected && !this._dbNames.find(x => x === constants.selectDatabaseTitle)) {
+		if (!this._dbNames.find(x => x === constants.selectDatabaseTitle)) {
 			dbNames = [constants.selectDatabaseTitle].concat(this._dbNames);
 		}
 		if (this._databases && dbNames && dbNames.length > 0) {
@@ -216,35 +216,49 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 	}
 
 	private async onDatabaseSelected(): Promise<void> {
-		if (this._existingTablesSelected) {
-			this._tableNames = await this.listTableNames(this.databaseName || '');
-			let tableNames = this._tableNames;
-
-			if (this._tableNames && !this._settings.preSelected && !this._tableNames.find(x => x.tableName === constants.selectTableTitle)) {
-				const firstRow: DatabaseTable = { tableName: constants.selectTableTitle, databaseName: '', schema: '' };
-				tableNames = [firstRow].concat(this._tableNames);
-			}
-
-			if (this._tables && tableNames && tableNames.length > 0) {
-				this._tables.values = tableNames.map(t => this.getTableFullName(t));
-				if (this.importTable) {
-					const selectedTable = tableNames.find(t => t.tableName === this.importTable?.tableName && t.schema === this.importTable?.schema);
-					if (selectedTable) {
-						this._selectedTableName = this.getTableFullName(selectedTable);
-						this._tables.value = this.getTableFullName(selectedTable);
-					} else {
-						this._selectedTableName = this._settings.editable ? this.getTableFullName(this.importTable) : this.getTableFullName(tableNames[0]);
-					}
-				} else {
-					this._selectedTableName = this.getTableFullName(tableNames[0]);
-				}
-				this._tables.value = this._selectedTableName;
-			} else if (this._tables) {
-				this._tables.values = [];
-				this._tables.value = '';
-			}
+		this._tableNames = await this.listTableNames(this.databaseName || '');
+		let tableNames = this._tableNames;
+		if (this._settings.editable && this._tables && this._existingTableButton && this._newTableButton && this._newTableName) {
+			this._existingTablesSelected = this._tableNames !== undefined && this._tableNames.length > 0;
+			this._newTableButton.checked = !this._existingTablesSelected;
+			this._existingTableButton.checked = this._existingTablesSelected;
 		}
+		this.refreshTableComponent();
+
+
+		if (this._tableNames && !this._tableNames.find(x => x.tableName === constants.selectTableTitle)) {
+			const firstRow: DatabaseTable = { tableName: constants.selectTableTitle, databaseName: '', schema: '' };
+			tableNames = [firstRow].concat(this._tableNames);
+		}
+
+		if (this._tables && tableNames && tableNames.length > 0) {
+			this._tables.values = tableNames.map(t => this.getTableFullName(t));
+			if (this.importTable && this.importTable.databaseName === this._databases?.value) {
+				const selectedTable = tableNames.find(t => t.tableName === this.importTable?.tableName && t.schema === this.importTable?.schema);
+				if (selectedTable) {
+					this._selectedTableName = this.getTableFullName(selectedTable);
+					this._tables.value = this.getTableFullName(selectedTable);
+				} else {
+					this._selectedTableName = this._settings.editable ? this.getTableFullName(this.importTable) : this.getTableFullName(tableNames[0]);
+				}
+			} else {
+				this._selectedTableName = this.getTableFullName(tableNames[0]);
+			}
+			this._tables.value = this._selectedTableName;
+		} else if (this._tables) {
+			this._tables.values = [];
+			this._tables.value = '';
+		}
+
 		await this.onTableSelected();
+
+	}
+
+	private refreshTableComponent(): void {
+		if (this._settings.editable && this._tables && this._existingTableButton && this._newTableButton && this._newTableName) {
+			this._tables.enabled = this._existingTablesSelected;
+			this._newTableName.enabled = !this._existingTablesSelected;
+		}
 	}
 
 	private getTableFullName(table: DatabaseTable): string {