From 5174f3b2f62531a1b0c66373889d27cd020b2dcf Mon Sep 17 00:00:00 2001 From: Hale Rankin Date: Thu, 5 Nov 2020 10:56:03 -0800 Subject: [PATCH] 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. --- .../images/{ => dark}/arrow.svg | 2 +- .../images/dark/browseLocal.svg | 3 +++ .../images/dark/delete_inverse.svg | 2 +- .../machine-learning/images/light/arrow.svg | 3 +++ .../images/{ => light}/browseLocal.svg | 0 .../machine-learning/images/light/delete.svg | 4 ++-- extensions/machine-learning/images/warning.svg | 5 +++++ .../machine-learning/src/common/constants.ts | 2 +- .../src/views/dataInfoComponent.ts | 4 +--- .../src/views/models/azureModelsComponent.ts | 4 ++-- .../models/azureResourceFilterComponent.ts | 6 +++++- .../src/views/models/localModelsComponent.ts | 2 +- .../src/views/models/modelSourcesComponent.ts | 2 +- .../views/models/prediction/columnsTable.ts | 18 +++++++++--------- .../models/prediction/inputColumnsComponent.ts | 3 ++- .../prediction/outputColumnsComponent.ts | 8 ++++++++ .../views/models/tableSelectionComponent.ts | 7 ++++--- 17 files changed, 49 insertions(+), 26 deletions(-) rename extensions/machine-learning/images/{ => dark}/arrow.svg (95%) create mode 100644 extensions/machine-learning/images/dark/browseLocal.svg create mode 100644 extensions/machine-learning/images/light/arrow.svg rename extensions/machine-learning/images/{ => light}/browseLocal.svg (100%) create mode 100644 extensions/machine-learning/images/warning.svg diff --git a/extensions/machine-learning/images/arrow.svg b/extensions/machine-learning/images/dark/arrow.svg similarity index 95% rename from extensions/machine-learning/images/arrow.svg rename to extensions/machine-learning/images/dark/arrow.svg index 91626b1129..13e031c3b8 100644 --- a/extensions/machine-learning/images/arrow.svg +++ b/extensions/machine-learning/images/dark/arrow.svg @@ -1,3 +1,3 @@ - + diff --git a/extensions/machine-learning/images/dark/browseLocal.svg b/extensions/machine-learning/images/dark/browseLocal.svg new file mode 100644 index 0000000000..5983c48835 --- /dev/null +++ b/extensions/machine-learning/images/dark/browseLocal.svg @@ -0,0 +1,3 @@ + + + diff --git a/extensions/machine-learning/images/dark/delete_inverse.svg b/extensions/machine-learning/images/dark/delete_inverse.svg index 7274a63148..72f5891676 100644 --- a/extensions/machine-learning/images/dark/delete_inverse.svg +++ b/extensions/machine-learning/images/dark/delete_inverse.svg @@ -1,6 +1,6 @@ - + diff --git a/extensions/machine-learning/images/light/arrow.svg b/extensions/machine-learning/images/light/arrow.svg new file mode 100644 index 0000000000..adf8bde19f --- /dev/null +++ b/extensions/machine-learning/images/light/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/extensions/machine-learning/images/browseLocal.svg b/extensions/machine-learning/images/light/browseLocal.svg similarity index 100% rename from extensions/machine-learning/images/browseLocal.svg rename to extensions/machine-learning/images/light/browseLocal.svg diff --git a/extensions/machine-learning/images/light/delete.svg b/extensions/machine-learning/images/light/delete.svg index 548f3729d0..5cfc3a4621 100644 --- a/extensions/machine-learning/images/light/delete.svg +++ b/extensions/machine-learning/images/light/delete.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/extensions/machine-learning/images/warning.svg b/extensions/machine-learning/images/warning.svg new file mode 100644 index 0000000000..a5335ada4c --- /dev/null +++ b/extensions/machine-learning/images/warning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/extensions/machine-learning/src/common/constants.ts b/extensions/machine-learning/src/common/constants.ts index dea4aecaac..39fb9dce66 100644 --- a/extensions/machine-learning/src/common/constants.ts +++ b/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"); diff --git a/extensions/machine-learning/src/views/dataInfoComponent.ts b/extensions/machine-learning/src/views/dataInfoComponent.ts index 5d4329072c..8eff78f085 100644 --- a/extensions/machine-learning/src/views/dataInfoComponent.ts +++ b/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', diff --git a/extensions/machine-learning/src/views/models/azureModelsComponent.ts b/extensions/machine-learning/src/views/models/azureModelsComponent.ts index b34375e308..2055fc260f 100644 --- a/extensions/machine-learning/src/views/models/azureModelsComponent.ts +++ b/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 }; diff --git a/extensions/machine-learning/src/views/models/azureResourceFilterComponent.ts b/extensions/machine-learning/src/views/models/azureResourceFilterComponent.ts index ad541a1114..93f72f471d 100644 --- a/extensions/machine-learning/src/views/models/azureResourceFilterComponent.ts +++ b/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) { diff --git a/extensions/machine-learning/src/views/models/localModelsComponent.ts b/extensions/machine-learning/src/views/models/localModelsComponent.ts index 4b3e827bdb..27cd0bf170 100644 --- a/extensions/machine-learning/src/views/models/localModelsComponent.ts +++ b/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', diff --git a/extensions/machine-learning/src/views/models/modelSourcesComponent.ts b/extensions/machine-learning/src/views/models/modelSourcesComponent.ts index 8b860e6cc3..dc079641a5 100644 --- a/extensions/machine-learning/src/views/models/modelSourcesComponent.ts +++ b/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' } diff --git a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts index f49215b22f..7caff744b1 100644 --- a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts +++ b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts @@ -231,7 +231,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent { diff --git a/extensions/machine-learning/src/views/models/prediction/outputColumnsComponent.ts b/extensions/machine-learning/src/views/models/prediction/outputColumnsComponent.ts index 7dfbbb9684..44ca135eaf 100644 --- a/extensions/machine-learning/src/views/models/prediction/outputColumnsComponent.ts +++ b/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' + }); } } diff --git a/extensions/machine-learning/src/views/models/tableSelectionComponent.ts b/extensions/machine-learning/src/views/models/tableSelectionComponent.ts index e8532d7a58..5211af988a 100644 --- a/extensions/machine-learning/src/views/models/tableSelectionComponent.ts +++ b/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();