ML fine tuning (#13247)

* Added new warning icon for model input mapping view. Adjusted padding between it and the input field beside it.

* Added new warning icon for model input mapping view. Adjusted padding between it and the input field beside it.

* Modified icon fill colors for better presentation in dark/HC themes. Modified font sizes and padding in various places. Increased input field widths. Removed unnecessary width properties.

extensions/machine-learning/src/common/constants.ts

@@ -191,7 +191,7 @@ export const selectDatabaseTitle = localize('predict.selectDatabaseTitle', "Sele
 export const selectTableTitle = localize('predict.selectTableTitle', "Select table");
 export const outputName = localize('predict.outputName', "Name");
 export const azureSubscription = localize('models.azureSubscription', "Azure subscription");
-export const azureGroup = localize('models.azureGroup', "Azure resource group");
+export const azureGroup = localize('models.azureGroup', "Resource group");
 export const azureModelWorkspace = localize('models.azureModelWorkspace', "Azure ML workspace");
 export const azureModelFilter = localize('models.azureModelFilter', "Filter");
 export const azureModels = localize('models.azureModels', "Models");

extensions/machine-learning/src/views/dataInfoComponent.ts

@@ -42,15 +42,13 @@ export class DataInfoComponent extends ViewBase {
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
 		this._descriptionComponent = modelBuilder.text().withProperties({
 			value: this._description,
-			width: 200
 		}).component();
 		this._labelComponent = modelBuilder.text().withProperties({
 			value: this._title,
-			width: 200
 		}).component();
 		this._labelContainer = modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
-			width: this._width,
+			width: 'auto',
 			height: this._height,
 			justifyContent: 'center',
 			alignItems: 'center',

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

@@ -53,10 +53,10 @@ export class AzureModelsComponent extends ModelViewBase implements IDataComponen
 		});
 
 		this._emptyModelsComponent = new DataInfoComponent(this._apiWrapper, this);
-		this._emptyModelsComponent.width = 300;
+		this._emptyModelsComponent.width = 200;
 		this._emptyModelsComponent.height = 250;
 		this._emptyModelsComponent.iconSettings = {
-			css: { 'padding-top': '20px' },
+			css: { 'padding-top': '30px' },
 			width: 128,
 			height: 128
 		};

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

@@ -75,8 +75,12 @@ export class AzureResourceFilterComponent extends ModelViewBase implements IData
 			title: constants.azureModelWorkspace,
 			component: this._workspaces
 		}], {
-			horizontal: true
+			titleFontSize: '13px',
+			horizontal: true,
 		}).component();
+		this._form.setLayout({
+			padding: '0'
+		});
 	}
 
 	public addComponents(formBuilder: azdata.FormBuilder) {

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

@@ -38,7 +38,7 @@ export class LocalModelsComponent extends ModelViewBase implements IDataComponen
 			width: this.componentMaxLength - this.browseButtonMaxLength - this.spaceBetweenComponentsLength
 		}).component();
 		this._localBrowse = modelBuilder.button().withProperties({
-			iconPath: { light: this.asAbsolutePath('images/browseLocal.svg'), dark: this.asAbsolutePath('images/browseLocal.svg') },
+			iconPath: { light: this.asAbsolutePath('images/light/browseLocal.svg'), dark: this.asAbsolutePath('images/dark/browseLocal.svg') },
 			iconHeight: '24px',
 			iconWidth: '24px',
 			width: '24px',

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

@@ -107,7 +107,7 @@ export class ModelSourcesComponent extends ModelViewBase implements IDataCompone
 		this._selectedSourceLabel = modelBuilder.text().withProperties({
 			value: this.getSourceTypeDescription(this._sourceType),
 			CSSStyles: {
-				'font-size': '14px',
+				'font-size': '13px',
 				'margin': '0',
 				'width': '438px'
 			}

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

@@ -231,7 +231,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 			outputContainer.addItem(nameInput, {
 				CSSStyles: {
 					'padding': '0px',
-					'padding-right': '5px',
+					'padding-right': '10px',
 					'margin': '0px'
 				}
 			});
@@ -353,8 +353,8 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 				width: 50,
 				height: 50,
 				iconPath: {
-					dark: this.asAbsolutePath('images/arrow.svg'),
-					light: this.asAbsolutePath('images/arrow.svg')
+					dark: this.asAbsolutePath('images/dark/arrow.svg'),
+					light: this.asAbsolutePath('images/light/arrow.svg')
 				},
 				iconWidth: 20,
 				iconHeight: 20,
@@ -368,15 +368,15 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 
 	private createWarningButton(message: string): azdata.ButtonComponent {
 		const warningButton = this._modelBuilder.button().withProperties({
-			width: '10px',
-			height: '10px',
+			width: '16px',
+			height: '16px',
 			title: message,
 			iconPath: {
-				dark: this.asAbsolutePath('images/dark/warning_notification_inverse.svg'),
-				light: this.asAbsolutePath('images/light/warning_notification.svg'),
+				dark: this.asAbsolutePath('images/warning.svg'),
+				light: this.asAbsolutePath('images/warning.svg'),
 			},
-			iconHeight: '10px',
-			iconWidth: '10px'
+			iconHeight: '16px',
+			iconWidth: '16px'
 		}).component();
 
 		return warningButton;

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

@@ -46,7 +46,8 @@ export class InputColumnsComponent extends ModelViewBase implements IDataCompone
 				tableInfo: constants.columnTableInfo,
 				defaultDbName: constants.selectDatabaseTitle,
 				defaultTableName: constants.selectTableTitle,
-				useImportModelCache: false
+				useImportModelCache: false,
+				layout: 'horizontal'
 			});
 		this._tableSelectionComponent.registerComponent(modelBuilder);
 		this._tableSelectionComponent.onSelectedChanged(async () => {

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

@@ -49,6 +49,14 @@ export class OutputColumnsComponent extends ModelViewBase implements IDataCompon
 				title: constants.outputColumns,
 				component: this._columns.component
 			}]);
+			if (this._form) {
+				this._form.updateCssStyles({
+					'font-size': '16px'
+				});
+			}
+			this._columns.component.updateCssStyles({
+				'font-size': '12px'
+			});
 		}
 	}
 

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

@@ -56,10 +56,10 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
 		this._databases = modelBuilder.dropDown().withProperties({
-			width: '221px'
+			width: '275px'
 		}).component();
 		this._tables = modelBuilder.dropDown().withProperties({
-			width: '221px'
+			width: '275px'
 		}).component();
 
 		this._databases.onValueChanged(async () => {
@@ -146,10 +146,11 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 			flex: '0 0 auto',
 			CSSStyles: {
 				'align-items': 'flex-start',
+				'padding-right': '16px',
 			}
 		}).withLayout({
 			flexFlow: this._settings.layout === 'horizontal' ? 'row' : 'column',
-			justifyContent: 'space-between',
+			justifyContent: 'flex-start',
 			width: this.tableMaxLength
 		}).component();