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

* 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

View File

@@ -77,7 +77,7 @@ export class ColumnsSelectionPage extends ModelViewBase implements IPageView, ID
public async validate(): Promise<boolean> {
const data = this.data;
const validated = data !== undefined && data.databaseName !== undefined && data.inputColumns !== undefined && data.outputColumns !== undefined
&& data.tableName !== undefined && data.databaseName !== constants.selectDatabaseTitle && data.tableName !== constants.selectTableTitle
&& data.tableName !== undefined && this.inputColumnsComponent !== undefined && this.inputColumnsComponent?.isDataValue
&& !data.inputColumns.find(x => (x.columnName === constants.selectColumnTitle) || !x.columnName);
if (!validated) {
this.showErrorMessage(constants.invalidModelParametersError);

View File

@@ -162,7 +162,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
this._parameters = [];
let tableData: any[][] = [];
if (this._table && table && table.tableName !== constants.selectTableTitle) {
if (this._table && table) {
if (this._forInput) {
let columns: TableColumn[];
try {

View File

@@ -22,6 +22,7 @@ export class InputColumnsComponent extends ModelViewBase implements IDataCompone
private _tableSelectionComponent: TableSelectionComponent | undefined;
private _columns: ColumnsTable | undefined;
private _modelParameters: ModelParameters | undefined;
private _tableLoadingPromise: Promise<void> | undefined;
/**
* Creates a new view
@@ -42,7 +43,10 @@ export class InputColumnsComponent extends ModelViewBase implements IDataCompone
databaseTitle: constants.columnDatabase,
tableTitle: constants.columnTable,
databaseInfo: constants.columnDatabaseInfo,
tableInfo: constants.columnTableInfo
tableInfo: constants.columnTableInfo,
defaultDbName: constants.selectDatabaseTitle,
defaultTableName: constants.selectTableTitle,
useImportModelCache: false
});
this._tableSelectionComponent.registerComponent(modelBuilder);
this._tableSelectionComponent.onSelectedChanged(async () => {
@@ -99,6 +103,10 @@ export class InputColumnsComponent extends ModelViewBase implements IDataCompone
});
}
public get isDataValue(): boolean {
return this._tableSelectionComponent !== undefined && this._tableSelectionComponent?.isDataValid;
}
/**
* loads data in the components
*/
@@ -132,11 +140,21 @@ export class InputColumnsComponent extends ModelViewBase implements IDataCompone
}
private async onTableSelected(): Promise<void> {
await this.loadWithTable(this.databaseTable);
if (this._tableSelectionComponent !== undefined && this._tableSelectionComponent.isDataValid) {
await this.loadWithTable(this.databaseTable);
}
}
public async loadWithTable(table: DatabaseTable): Promise<void> {
await this._columns?.loadInputs(this._modelParameters, table);
if (this._tableLoadingPromise) {
try {
await this._tableLoadingPromise;
} catch {
}
}
this._tableLoadingPromise = this._columns?.loadInputs(this._modelParameters, table);
await this._tableLoadingPromise;
this._tableLoadingPromise = undefined;
}
private get databaseTable(): DatabaseTable {