ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-14 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

ML fine tuning (#13247)

Browse Source 
* 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.
This commit is contained in:
Hale Rankin
2020-11-05 10:56:03 -08:00
committed by GitHub
parent 8877d74034
commit 5174f3b2f6
17 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/machine-learning/images/arrow.svg → extensions/machine-learning/images/dark/arrow.svg
View File

@@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9531 8L8.60156 15.3516L7.89844 14.6484L14.0469 8.5H0V7.5H14.0469L7.89844 1.35156L8.60156 0.648438L15.9531 8Z" fill="#0078D4"/>
<path d="M15.9531 8L8.60156 15.3516L7.89844 14.6484L14.0469 8.5H0V7.5H14.0469L7.89844 1.35156L8.60156 0.648438L15.9531 8Z" fill="#FFFFFF"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 243 B

After

Width:  |  Height:  |  Size: 243 B

3
extensions/machine-learning/images/dark/browseLocal.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 8V16C20 16.1406 19.974 16.2708 19.9219 16.3906C19.8698 16.5104 19.7969 16.6172 19.7031 16.7109C19.6146 16.7995 19.5104 16.8698 19.3906 16.9219C19.2708 16.974 19.1406 17 19 17H5C4.85938 17 4.72917 16.974 4.60938 16.9219C4.48958 16.8698 4.38281 16.7995 4.28906 16.7109C4.20052 16.6172 4.13021 16.5104 4.07812 16.3906C4.02604 16.2708 4 16.1406 4 16V6C4 5.85938 4.02604 5.72917 4.07812 5.60938C4.13021 5.48958 4.20052 5.38542 4.28906 5.29688C4.38281 5.20312 4.48958 5.13021 4.60938 5.07812C4.72917 5.02604 4.85938 5 5 5H10.75C10.9427 5 11.1224 5.03646 11.2891 5.10938C11.4557 5.17708 11.6068 5.27083 11.7422 5.39062C11.8828 5.50521 12.0078 5.63802 12.1172 5.78906C12.2318 5.9349 12.3359 6.08594 12.4297 6.24219C12.4974 6.36198 12.5625 6.46875 12.625 6.5625C12.6927 6.65625 12.7656 6.73698 12.8438 6.80469C12.9271 6.86719 13.0182 6.91667 13.1172 6.95312C13.2214 6.98438 13.349 7 13.5 7H19C19.1406 7 19.2708 7.02604 19.3906 7.07812C19.5104 7.13021 19.6146 7.20312 19.7031 7.29688C19.7969 7.38542 19.8698 7.48958 19.9219 7.60938C19.974 7.72917 20 7.85938 20 8ZM10.75 6H5V8H10.75C10.8906 8 11.0078 7.97656 11.1016 7.92969C11.2005 7.88281 11.2917 7.82552 11.375 7.75781C11.4635 7.6901 11.5521 7.61719 11.6406 7.53906C11.7292 7.45573 11.8307 7.38281 11.9453 7.32031C11.8672 7.23177 11.7839 7.11458 11.6953 6.96875C11.612 6.81771 11.5208 6.67188 11.4219 6.53125C11.3229 6.38542 11.2161 6.26042 11.1016 6.15625C10.9922 6.05208 10.875 6 10.75 6ZM19 16V8H13.5C13.2083 8 12.9714 8.02604 12.7891 8.07812C12.612 8.125 12.4609 8.1849 12.3359 8.25781C12.2161 8.33073 12.112 8.41146 12.0234 8.5C11.9349 8.58854 11.8359 8.66927 11.7266 8.74219C11.6224 8.8151 11.4948 8.8776 11.3438 8.92969C11.1927 8.97656 10.9948 9 10.75 9H5V16H19Z" fill="#FFFFFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
extensions/machine-learning/images/dark/delete_inverse.svg
View File

@@ -1,6 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M14 3H13V14.5C13 14.7083 12.9609 14.9036 12.8828 15.0859C12.8047 15.2682 12.6979 15.4271 12.5625 15.5625C12.4271 15.6979 12.2682 15.8047 12.0859 15.8828C11.9036 15.9609 11.7083 16 11.5 16H3.5C3.29167 16 3.09635 15.9609 2.91406 15.8828C2.73177 15.8047 2.57292 15.6979 2.4375 15.5625C2.30208 15.4271 2.19531 15.2682 2.11719 15.0859C2.03906 14.9036 2 14.7083 2 14.5V3H1V2H5V1C5 0.859375 5.02604 0.729167 5.07812 0.609375C5.13021 0.489583 5.20052 0.385417 5.28906 0.296875C5.38281 0.203125 5.48958 0.130208 5.60938 0.078125C5.72917 0.0260417 5.85938 0 6 0H9C9.14062 0 9.27083 0.0260417 9.39062 0.078125C9.51042 0.130208 9.61458 0.203125 9.70312 0.296875C9.79688 0.385417 9.86979 0.489583 9.92188 0.609375C9.97396 0.729167 10 0.859375 10 1V2H14V3ZM6 2H9V1H6V2ZM12 3H3V14.5C3 14.6354 3.04948 14.7526 3.14844 14.8516C3.2474 14.9505 3.36458 15 3.5 15H11.5C11.6354 15 11.7526 14.9505 11.8516 14.8516C11.9505 14.7526 12 14.6354 12 14.5V3ZM6 13H5V5H6V13ZM8 13H7V5H8V13ZM10 13H9V5H10V13Z" fill="white"/>
<path d="M14 3H13V14.5C13 14.7083 12.9609 14.9036 12.8828 15.0859C12.8047 15.2682 12.6979 15.4271 12.5625 15.5625C12.4271 15.6979 12.2682 15.8047 12.0859 15.8828C11.9036 15.9609 11.7083 16 11.5 16H3.5C3.29167 16 3.09635 15.9609 2.91406 15.8828C2.73177 15.8047 2.57292 15.6979 2.4375 15.5625C2.30208 15.4271 2.19531 15.2682 2.11719 15.0859C2.03906 14.9036 2 14.7083 2 14.5V3H1V2H5V1C5 0.859375 5.02604 0.729167 5.07812 0.609375C5.13021 0.489583 5.20052 0.385417 5.28906 0.296875C5.38281 0.203125 5.48958 0.130208 5.60938 0.078125C5.72917 0.0260417 5.85938 0 6 0H9C9.14062 0 9.27083 0.0260417 9.39062 0.078125C9.51042 0.130208 9.61458 0.203125 9.70312 0.296875C9.79688 0.385417 9.86979 0.489583 9.92188 0.609375C9.97396 0.729167 10 0.859375 10 1V2H14V3ZM6 2H9V1H6V2ZM12 3H3V14.5C3 14.6354 3.04948 14.7526 3.14844 14.8516C3.2474 14.9505 3.36458 15 3.5 15H11.5C11.6354 15 11.7526 14.9505 11.8516 14.8516C11.9505 14.7526 12 14.6354 12 14.5V3ZM6 13H5V5H6V13ZM8 13H7V5H8V13ZM10 13H9V5H10V13Z" fill="#FFFFFF"/>
</g>
<defs>
<clipPath id="clip0">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

3
extensions/machine-learning/images/light/arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9531 8L8.60156 15.3516L7.89844 14.6484L14.0469 8.5H0V7.5H14.0469L7.89844 1.35156L8.60156 0.648438L15.9531 8Z" fill="#605E5C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 243 B

0
extensions/machine-learning/images/browseLocal.svg → extensions/machine-learning/images/light/browseLocal.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

4
extensions/machine-learning/images/light/delete.svg
View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="24" height="24">
<path d="M1792 384h-128v1472q0 40-15 75t-41 61-61 41-75 15H448q-40 0-75-15t-61-41-41-61-15-75V384H128V256h512V128q0-27 10-50t27-40 41-28 50-10h384q27 0 50 10t40 27 28 41 10 50v128h512v128zM768 256h384V128H768v128zm768 128H384v1472q0 26 19 45t45 19h1024q26 0 45-19t19-45V384zM768 1664H640V640h128v1024zm256 0H896V640h128v1024zm256 0h-128V640h128v1024z" />
</svg>
<path d="M1792 384h-128v1472q0 40-15 75t-41 61-61 41-75 15H448q-40 0-75-15t-61-41-41-61-15-75V384H128V256h512V128q0-27 10-50t27-40 41-28 50-10h384q27 0 50 10t40 27 28 41 10 50v128h512v128zM768 256h384V128H768v128zm768 128H384v1472q0 26 19 45t45 19h1024q26 0 45-19t19-45V384zM768 1664H640V640h128v1024zm256 0H896V640h128v1024zm256 0h-128V640h128v1024z" fill="#333333" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 467 B

5
extensions/machine-learning/images/warning.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7917 13.92L9.26272 0.771C8.73073 -0.257 7.26772 -0.257 6.73873 0.771L0.208725 13.716C-0.323275 14.744 0.208725 15.978 1.27173 15.978H14.7287C15.7917 16.182 16.3227 14.95 15.7917 13.92Z" fill="#DB7500"/>
<path d="M7.99978 14.4488C8.80004 14.4488 9.44878 13.8 9.44878 12.9998C9.44878 12.1995 8.80004 11.5508 7.99978 11.5508C7.19952 11.5508 6.55078 12.1995 6.55078 12.9998C6.55078 13.8 7.19952 14.4488 7.99978 14.4488Z" fill="white"/>
<path d="M6.59961 4L7.09961 10H8.89961L9.39961 4H6.59961Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 622 B

2
extensions/machine-learning/src/common/constants.ts
View File

@@ -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");

4
extensions/machine-learning/src/views/dataInfoComponent.ts
View File

@@ -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',

4
extensions/machine-learning/src/views/models/azureModelsComponent.ts
View File

@@ -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
};

6
extensions/machine-learning/src/views/models/azureResourceFilterComponent.ts
View File

@@ -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) {

2
extensions/machine-learning/src/views/models/localModelsComponent.ts
View File

@@ -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',

2
extensions/machine-learning/src/views/models/modelSourcesComponent.ts
View File

@@ -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'
}

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

@@ -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;

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

@@ -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 () => {

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

@@ -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'
});
}
}

7
extensions/machine-learning/src/views/models/tableSelectionComponent.ts
View File

@@ -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();