This is an automated email from the ASF dual-hosted git repository.
pingsutw pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push:
new 0d4b9b8 SUBMARINE-1056. Model management UI home page upgrade
0d4b9b8 is described below
commit 0d4b9b82352a7ca34ad61556a8e69197ae83b187
Author: andybi7676 <[email protected]>
AuthorDate: Sat Oct 23 18:12:21 2021 +0800
SUBMARINE-1056. Model management UI home page upgrade
### What is this PR for?
Upgrade the static UI for the model management home page.
### What type of PR is it?
Improvement
### Todos
* [x] - Upgrade to colorful tags
* [x] - Support multiple pages
* [x] - Search bar upgrade
### What is the Jira issue?
https://issues.apache.org/jira/projects/SUBMARINE/issues/SUBMARINE-1056
### How should this be tested?
checkout model UI page
### Screenshots (if appropriate)
### Questions:
* Do the license files need updating? No
* Are there breaking changes for older versions? No
* Does this need new documentation? No
Author: andybi7676 <[email protected]>
Signed-off-by: Kevin <[email protected]>
Closes #784 from andybi7676/SUBMARINE-1056 and squashes the following
commits:
2c86e912 [andybi7676] SUBMARINE-1056. restrict color and use relative css
900b2d3f [andybi7676] SUBMARINE-1056. remove unnecessary
1f378860 [andybi7676] SUBMARINE-1056. support multi-pages
5c1cd488 [andybi7676] model homepage UI upgrade
---
.../model-card/model-card.component.html | 4 +-
.../model-card/model-card.component.scss | 2 +-
.../model-tag/model-tag.component.html} | 13 ++---
.../model-card/model-tag/model-tag.component.scss} | 18 +++++-
.../model-card/model-tag/model-tag.component.ts | 67 ++++++++++++++++++++++
.../model-cards/model-cards.component.html | 7 ++-
.../model-cards/model-cards.component.ts | 16 ++++++
.../model/model-home/model-home.component.html | 41 +++++++------
.../model/model-home/model-home.component.scss | 3 +-
.../model/model-home/model-home.component.ts | 42 ++++++++++++++
.../src/app/pages/workbench/model/model.module.ts | 2 +
11 files changed, 178 insertions(+), 37 deletions(-)
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.html
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.html
index 9b5f464..c79ca16 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.html
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.html
@@ -18,11 +18,11 @@
-->
<a [routerLink]="[card.name]">
<nz-list-item >
- <nz-card style="width:300px;" nzTitle={{card.name}}
[nzExtra]="extraTemplate">
+ <nz-card style="width:100%;" nzTitle={{card.name}}
[nzExtra]="extraTemplate">
<p>Created: {{card.createTime}}</p>
<p>Updated: {{card.updatedTime}}</p>
<p>Tags:
- <nz-tag *ngFor="let tag of card.tags">{{tag}}</nz-tag>
+ <submarine-model-tag *ngFor="let tag of card.tags" [tag]="tag"
[cssType]="'default'"></submarine-model-tag>
</p>
<p>Description: {{description}}</p>
</nz-card>
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.scss
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.scss
index af9019f..f2cdfd0 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.scss
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-card.component.scss
@@ -17,5 +17,5 @@
* under the License.
*/
p {
- margin: 0;
+ margin: 0.2em;
}
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.html
similarity index 78%
copy from
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
copy to
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.html
index 28958d9..14d2603 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.html
@@ -16,11 +16,8 @@
~ specific language governing permissions and limitations
~ under the License.
-->
-
-<nz-list nzGrid>
- <div nz-row [nzGutter]="16">
- <div nz-col [nzSpan]="6" *ngFor="let card of modelCards; let i = index">
- <submarine-model-card [card]="card"></submarine-model-card>
- </div>
- </div>
-</nz-list>
+<span [style.color]="textColor" [style.background-color]="backgroundColor"
[style.border-color]="borderColor" [style.margin]="margin">
+ {{tag}}
+ <i *ngIf="closable" nz-icon nzType="close" style.color="'textColor'"></i>
+</span>
+
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.scss
similarity index 69%
copy from
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
copy to
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.scss
index 61d2115..6f80022 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.scss
@@ -16,4 +16,20 @@
* specific language governing permissions and limitations
* under the License.
*/
-
\ No newline at end of file
+span {
+ border: 0.1em solid;
+ border-radius: 0.2em;
+ background-color: #fafafa;
+ padding: 0em 0.3em 0.1em 0.4em;
+}
+
+i {
+ color: rgba($color: #000000, $alpha: 0.0);
+}
+
+::ng-deep .ant-select-selection--multiple .ant-select-selection__choice {
+ margin-right: 0.1em;
+ padding: 0 0.9em 0 0.8em;
+ background-color: #ffffff;
+ border: 0em solid #e8e8e8;
+}
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.ts
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.ts
new file mode 100644
index 0000000..b862fd1
--- /dev/null
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-card/model-tag/model-tag.component.ts
@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'submarine-model-tag',
+ templateUrl: './model-tag.component.html',
+ styleUrls: ['./model-tag.component.scss'],
+})
+export class ModelTagComponent implements OnInit {
+ @Input() tag: string;
+ @Input() cssType: string;
+ textColor: string;
+ backgroundColor: string;
+ borderColor: string;
+ margin: string;
+ closable: boolean;
+
+ constructor() {}
+
+ ngOnInit() {
+ this.textColor = this.stringToColour(this.tag, "text");
+ this.backgroundColor = this.stringToColour(this.tag, "background");
+ this.borderColor = this.stringToColour(this.tag, "border");
+ this.margin = this.cssType == "selection" ? "0em -0.8em 0em -0.7em" : "0em
0.15em 0em 0.15em";
+ this.closable = this.cssType == "selection";
+ }
+
+ stringToColour = (str: string, type: string) => {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ let colour = '#';
+ for (let i = 0; i < 3; i++) {
+ let value = (hash >> (i * 8)) & 0xFF;
+ colour += ('00' + value.toString(16)).substr(-2);
+ }
+ var bigint = parseInt(colour.substring(1,), 16);
+ var r = (bigint >> 16) & 255;
+ var g = (bigint >> 8) & 255;
+ var b = bigint & 255;
+ if (Math.max(r, g, b) - Math.min(r, g, b) < 50 && r + g + b > 500) {
+ return this.stringToColour(str+"hashAgain", type);
+ }
+ const opacity = type == "background" ? "0.1" : type == "border" ? "0.4" :
"1.0";
+ const rgb = "rgba(" + `${r},${g},${b}` + "," + opacity + ")";
+ return rgb;
+ }
+}
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
index 28958d9..b513a66 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.html
@@ -17,10 +17,13 @@
~ under the License.
-->
-<nz-list nzGrid>
+<nz-list nzGrid [nzPagination]="pagination">
<div nz-row [nzGutter]="16">
- <div nz-col [nzSpan]="6" *ngFor="let card of modelCards; let i = index">
+ <div nz-col [nzSpan]="6" *ngFor="let card of onPageModelCards; let i =
index">
<submarine-model-card [card]="card"></submarine-model-card>
</div>
</div>
+ <ng-template #pagination>
+ <nz-pagination [nzPageIndex]="nowPage" [nzPageSize]="pageUnit"
[nzTotal]="totalPages"
(nzPageIndexChange)="loadOnPageModelCards($event)"></nz-pagination>
+ </ng-template>
</nz-list>
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.ts
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.ts
index 3c33a63..87829e1 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.ts
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-cards/model-cards.component.ts
@@ -26,9 +26,25 @@ import { ModelInfo } from '@submarine/interfaces/model-info';
})
export class ModelCardsComponent implements OnInit {
@Input() modelCards: ModelInfo[];
+ nowPage: number;
+ totalPages: number;
+ onPageModelCards: ModelInfo[];
+ pageUnit = 8;
constructor() {}
ngOnInit() {
+ this.loadOnPageModelCards(1);
+ }
+
+ ngOnChanges() {
+ this.loadOnPageModelCards(1);
+ }
+
+ loadOnPageModelCards = (newPage: number) => {
+ this.nowPage = newPage;
+ this.totalPages = this.modelCards.length;
+ let start = this.pageUnit * (newPage - 1);
+ this.onPageModelCards = this.modelCards.filter((_, index) => index < start
+ this.pageUnit && index >= start);
}
}
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.html
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.html
index c5dae9f..95ab91e 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.html
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.html
@@ -18,28 +18,27 @@
-->
<div style="margin: 15px; padding: 15px; background-color: white">
- <div align="right">
- <button
- nz-button
- id="btn-newModel"
- nzType="primary"
- style="margin: 10px 4px 10px 4px"
- >
- <i nz-icon nzType="plus"></i>
- New Model
- </button>
- </div>
- <div align='left'>
- <nz-input-group nzSearch style="width: 265px; margin: 10px 4px 10px 4px"
[nzAddOnAfter]="suffixIconButton">
- <input type="text" nz-input placeholder="Search by model name..."
(keyup)="searchModel($event)" />
- </nz-input-group>
- <ng-template #suffixIconButton>
- <button nz-button nzType="primary" nzSearch><i nz-icon
nzType="search"></i></button>
- </ng-template>
- <nz-select nzMode="tags" style="width: 265px; margin: 10px 4px 10px 12px"
nzPlaceHolder="Search by tags" [(ngModel)]="listOfChosenTags"
(ngModelChange)="filterByTags()">
- <nz-option *ngFor="let option of listOfTagsOption"
[nzLabel]="option.label" [nzValue]="option.value"></nz-option>
- </nz-select>
+ <div nz-row [nzGutter]="16">
+ <div nz-col [nzSpan]="6">
+ <nz-input-group style="width: 100%;" [nzPrefix]="preffixIcon">
+ <input type="text" nz-input placeholder="Search by model name..."
(keyup)="searchModel($event)" />
+ </nz-input-group>
+ <ng-template #preffixIcon>
+ <i nz-icon nzType="search"></i>
+ </ng-template>
+ </div>
+ <div nz-col [nzSpan]="6">
+ <nz-select nzMode="multiple" [nzCustomTemplate]="multipleTemplate"
style="width: 100%;" nzPlaceHolder="Filter by tags"
[(ngModel)]="listOfChosenTags" (ngModelChange)="filterByTags()">
+ <nz-option *ngFor="let option of listOfTagsOption"
[nzLabel]="option.label" [nzValue]="option.value" nzCustomContent>
+ <submarine-model-tag [tag]="option.label"
[cssType]="'default'"></submarine-model-tag>
+ </nz-option>
+ </nz-select>
+ <ng-template #multipleTemplate let-selected nzBorderless
[ngClass]="'noPadding'">
+ <submarine-model-tag [tag]="selected.nzLabel"
[cssType]="'selection'"></submarine-model-tag>
+ </ng-template>
+ </div>
</div>
+ <nz-divider></nz-divider>
<submarine-model-cards
[modelCards]="onDisplayModelCards"></submarine-model-cards>
</div>
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
index 61d2115..9b7b886 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.scss
@@ -15,5 +15,4 @@
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
- */
-
\ No newline at end of file
+ */
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.ts
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.ts
index 63429eb..9e6643d 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.ts
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-home/model-home.component.ts
@@ -60,6 +60,48 @@ export class ModelHomeComponent implements OnInit {
'tags': ["speech"],
'description': "The third model has very long description for
description shorten testing, 1234567890 A recurrent neural network (RNN) is a
class of artificial neural networks where connections between nodes form a
directed graph along a temporal sequence. This allows it to exhibit temporal
dynamic behavior. Derived from feedforward neural networks, RNNs can use their
internal state (memory) to process variable length sequences of inputs",
},
+ {
+ 'name': "ModelFour",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["nlp", 'ssl'],
+ 'description': "BERT, a famous ssl model in NLP.",
+ },
+ {
+ 'name': "ModelFive",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["speech", 'ssl'],
+ 'description': "huBERT, a famous ssl model in SP.",
+ },
+ {
+ 'name': "ModelSix",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["CV", 'ssl'],
+ 'description': "SimCLR, a famous ssl model in CV.",
+ },
+ {
+ 'name': "ModelFour",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["nlp", 'ssl'],
+ 'description': "BERT, a famous ssl model in NLP.",
+ },
+ {
+ 'name': "ModelFive",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["speech", 'ssl'],
+ 'description': "huBERT, a famous ssl model in SP.",
+ },
+ {
+ 'name': "ModelSix",
+ 'createTime': "2021-10-18",
+ 'updatedTime': "2021-10-19",
+ 'tags': ["CV", 'ssl'],
+ 'description': "SimCLR, a famous ssl model in CV.",
+ },
];
this.onDisplayModelCards = this.modelCards.map(card => card);
diff --git
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
index 258ce1c..6f9e7ac 100644
---
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
+++
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
@@ -29,6 +29,7 @@ import { PipeSharedModule } from
'@submarine/pipe/pipe-shared.module';
import { ModelHomeComponent } from './model-home/model-home.component';
import { ModelCardsComponent } from
'./model-home/model-cards/model-cards.component';
import { ModelCardComponent } from
'./model-home/model-cards/model-card/model-card.component';
+import { ModelTagComponent } from
'./model-home/model-cards/model-card/model-tag/model-tag.component';
@NgModule({
declarations: [
@@ -37,6 +38,7 @@ import { ModelCardComponent } from
'./model-home/model-cards/model-card/model-ca
ModelVersionComponent,
ModelCardsComponent,
ModelCardComponent,
+ ModelTagComponent,
],
imports: [
CommonModule,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
