ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

ML extension - View models styles / layout updates (#13091)

Browse Source 
* Revised styles and added elements to view models stage of the View and import models.

* Implemented Leilas DataInfoComponent, replacing my use of icon and title, description fields. Corrected some styles.

* Fixed the issue with icon title and description

* Fixed severla issues

* Added method to output localized text for number of models shown. Added component to display models shown text.

* Fixed the issues with order of components

* Fixed showing number of models

Co-authored-by: llali <llali@microsoft.com>
This commit is contained in:
Hale Rankin
2020-11-04 12:07:54 -08:00
committed by GitHub
parent 06a4b0d1a2
commit 4af67c9734
13 changed files with 286 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,8 @@
import * as azdata from 'azdata';
import * as constants from '../../../common/constants';
import { ModelViewBase } from '../modelViewBase';
import { DataInfoComponent } from '../../dataInfoComponent';
import { ModelActionType, ModelViewBase } from '../modelViewBase';
import { CurrentModelsTable } from './currentModelsTable';
import { ApiWrapper } from '../../../common/apiWrapper';
import { IPageView, IComponentSettings } from '../../interfaces';
@@ -17,11 +18,15 @@ import { ImportedModel } from '../../../modelManagement/interfaces';
* View to render current registered models
*/
export class CurrentModelsComponent extends ModelViewBase implements IPageView {
private _emptyModelsComponent: DataInfoComponent | 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 _tableDataCountContainer: azdata.FlexContainer | undefined;
private _tableDataCountComponent: azdata.TextComponent | undefined;
private _subheadingContainer: azdata.FlexContainer | undefined;
private _subheadingTextComponent: azdata.TextComponent | undefined;
private _subheadingLinkComponent: azdata.HyperlinkComponent | undefined;
private _labelContainer: azdata.FlexContainer | undefined;
private _formBuilder: azdata.FormBuilder | undefined;
@@ -45,7 +50,11 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
databaseTitle: constants.databaseName,
tableTitle: constants.tableName,
databaseInfo: constants.modelDatabaseInfo,
tableInfo: constants.modelTableInfo
tableInfo: constants.modelTableInfo,
layout: 'vertical',
defaultDbName: constants.selectModelDatabaseTitle,
defaultTableName: constants.selectModelTableTitle,
useImportModelCache: true
});
this._tableSelectionComponent.registerComponent(modelBuilder);
this._tableSelectionComponent.onSelectedChanged(async () => {
@@ -54,47 +63,76 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
this._dataTable = new CurrentModelsTable(this._apiWrapper, this, this._settings);
this._dataTable.registerComponent(modelBuilder);
let dataCountString: string = constants.getDataCount(0);
this._tableDataCountContainer = modelBuilder.flexContainer().component();
this._tableDataCountComponent = modelBuilder.text().withProperties({
value: dataCountString,
margin: '0'
}).component();
this._tableDataCountContainer.addItem(this._tableDataCountComponent,
{
CSSStyles: {
'font-size': '13px',
'margin': '0'
}
});
let formModelBuilder = modelBuilder.formContainer();
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._emptyModelsComponent = new DataInfoComponent(this._apiWrapper, this);
this._emptyModelsComponent.width = 200;
this._emptyModelsComponent.height = 250;
this._emptyModelsComponent.title = constants.modelsListEmptyMessage;
this._emptyModelsComponent.description = constants.modelsListEmptyDescription;
this._emptyModelsComponent.iconSettings = {
css: { 'padding-top': '30px' },
path: this.asAbsolutePath('images/emptyTable.svg'),
width: 128,
height: 128
};
this._emptyModelsComponent.registerComponent(modelBuilder);
this._labelContainer = modelBuilder.flexContainer().withLayout({
flexFlow: 'column',
width: 800,
width: '750px',
height: '400px',
justifyContent: 'center'
justifyContent: 'flex-start',
textAlign: 'center'
}).component();
this._subheadingContainer = modelBuilder.flexContainer().withLayout({
flexFlow: 'column',
width: '452px'
}).component();
this._subheadingTextComponent = modelBuilder.text().withProperties(<azdata.CheckBoxProperties>{
value: this.modelActionType === ModelActionType.Import ? constants.viewImportModelsDesc : constants.viewImportModeledForPredictDesc,
CSSStyles: {
'font-size': '13px'
}
}).component();
this._subheadingLinkComponent = modelBuilder.hyperlink().withProperties({
label: constants.learnMoreLink,
url: constants.importModelsDoc,
CSSStyles: {
'font-size': '13px'
}
}).component();
if (this._emptyModelsComponent.component) {
this._labelContainer.addItem(this._emptyModelsComponent.component
, {
CSSStyles: {
'margin': '0 auto'
}
});
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._subheadingContainer.addItems(
[this._subheadingTextComponent, this._subheadingLinkComponent]
);
this.addComponents(formModelBuilder);
return this._loader;
@@ -102,20 +140,28 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
public addComponents(formBuilder: azdata.FormBuilder) {
this._formBuilder = formBuilder;
if (this._tableSelectionComponent && this._dataTable && this._labelContainer) {
if (this._tableSelectionComponent && this._dataTable && this._tableDataCountContainer && this._labelContainer && this._subheadingContainer) {
formBuilder.addFormItem({ title: '', component: this._subheadingContainer });
this._tableSelectionComponent.addComponents(formBuilder);
formBuilder.addFormItem({ title: '', component: this._tableDataCountContainer });
this._dataTable.addComponents(formBuilder);
if (this._dataTable.isEmpty) {
formBuilder.addFormItem({ title: '', component: this._labelContainer });
}
if (this._tableDataCountComponent) {
this._tableDataCountComponent.value = constants.getDataCount(this._dataTable.modelCounts);
}
}
}
public removeComponents(formBuilder: azdata.FormBuilder) {
if (this._tableSelectionComponent && this._dataTable && this._labelContainer) {
if (this._tableSelectionComponent && this._dataTable && this._labelContainer && this._tableDataCountContainer && this._subheadingContainer) {
this._tableSelectionComponent.removeComponents(formBuilder);
this._dataTable.removeComponents(formBuilder);
formBuilder.removeFormItem({ title: '', component: this._labelContainer });
formBuilder.removeFormItem({ title: '', component: this._tableDataCountContainer });
formBuilder.removeFormItem({ title: '', component: this._subheadingContainer });
}
}
@@ -130,6 +176,9 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
* Refreshes the view
*/
public async refresh(): Promise<void> {
if (this._emptyModelsComponent) {
await this._emptyModelsComponent.refresh();
}
await this.onLoading();
try {
@@ -161,6 +210,24 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
await this.storeImportConfigTable();
if (this._dataTable) {
await this._dataTable.refresh();
if (this._emptyModelsComponent) {
if (this._tableSelectionComponent?.defaultDbNameIsSelected) {
this._emptyModelsComponent.title = constants.selectModelDatabaseMessage;
this._emptyModelsComponent.description = '';
} else if (this._tableSelectionComponent?.defaultTableNameIsSelected) {
this._emptyModelsComponent.title = constants.selectModelTableMessage;
this._emptyModelsComponent.description = '';
} else {
this._emptyModelsComponent.title = constants.modelsListEmptyMessage;
this._emptyModelsComponent.description = constants.modelsListEmptyDescription;
}
await this._emptyModelsComponent.refresh();
}
if (this._tableDataCountComponent) {
this._tableDataCountComponent.value = constants.getDataCount(this._dataTable.modelCounts);
}
}
this.refreshComponents();
}