- ![]()
Create
- ![]()
Map
- ![]()
Operator
- ![]()
Shuffle
- ![]()
Batch
- ![]()
Repeat
@@ -691,24 +691,24 @@ export default {
}
.CreatDataset > polygon,
.Operator > ellipse {
- stroke: #58a4e0;
- fill: #d1ebff;
+ stroke: #4ea6e6;
+ fill: #b8e0ff;
}
.cluster > polygon {
- fill: #c1f5d5;
- stroke: #56b077;
+ fill: #8df1f2;
+ stroke: #00a5a7;
}
.RepeatDataset > polygon {
stroke: #fdca5a;
fill: #fff2d4;
}
.ShuffleDataset > polygon {
- stroke: #f79666;
- fill: #fed78e;
+ stroke: #e37d29;
+ fill: #ffd0a6;
}
.BatchDataset > polygon {
- stroke: #fa8e5a;
- fill: #ffcfb8;
+ stroke: #de504e;
+ fill: #ffbcba;
}
.edge {
path {
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index a661c8b2a359b264c123a47375dcc4bc3b39676f..55cf664300ab87470227f0fb1358daa8ab08eda4 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -337,7 +337,7 @@ limitations under the License.
class="legend-content">
- ![]()
- ![]()
- ![]()
- ![]()
- ![]()
{
@@ -1256,7 +1256,7 @@ export default {
: 'shape="octagon";'
}];`;
} else if (node.type === 'name_scope') {
- const fillColor = CommonProperty.graphColorArr[this.curColorIndex];
+ const fillColor = CommonProperty.graphColorArrPhg[this.curColorIndex];
this.curColorIndex = this.curColorIndex % 4;
this.curColorIndex++;
tempStr +=
@@ -1537,16 +1537,25 @@ export default {
let label = '';
if (!edge.count || edge.count === 1) {
if (edge.shape && edge.shape.length) {
- const flag = edge.shape.some((i) => {
- return typeof i !== 'number';
- });
- if (flag) {
+ if (edge.shape.length > 1) {
label = `tuple(${edge.shape.length} items)`;
} else {
- label = `${edge.data_type} ${edge.shape.join('×')}`;
+ const shape = edge.shape[0];
+ if (shape && shape.length) {
+ const flag = shape.some((i) => {
+ return typeof i !== 'number';
+ });
+ if (flag) {
+ label = `tuple(${shape.length} items)`;
+ } else {
+ label = `${edge.data_type} ${shape.join('×')}`;
+ }
+ } else if (edge.data_type) {
+ label = `${edge.data_type}`;
+ }
}
} else if (edge.data_type) {
- label = `${edge.data_type} Scalar`;
+ label = `${edge.data_type}`;
}
} else {
label = `${edge.count}tensors`;
@@ -1678,7 +1687,7 @@ export default {
let fillColor = type === 'aggregation_scope' ? '#fff2d4' : '#ffe4d6';
const curColorIndex = (name.split('/').length - 1) % 4;
if (type === 'name_scope') {
- fillColor = CommonProperty.graphColorArr[curColorIndex];
+ fillColor = CommonProperty.graphColorArrPhg[curColorIndex];
}
const graphTemp = d3.select(idStr).node();
@@ -1909,8 +1918,8 @@ export default {
marker
.append('path')
.attr('d', 'M1,1 L1,5 L6,3 z')
- .attr('fill', 'rgb(167, 167, 167)')
- .attr('stroke', 'rgb(167, 167, 167)');
+ .attr('fill', 'rgb(120, 120, 120)')
+ .attr('stroke', 'rgb(120, 120, 120)');
g.append('path')
.attr('stroke', 'rgb(167, 167, 167)')
.attr('stroke-width', 1)
@@ -3439,7 +3448,7 @@ export default {
stroke-width: 2px;
}
.node.cluster > rect:hover {
- stroke: #f45c5e;
+ stroke: #8df1f2;
}
.selected {
stroke: red !important;
@@ -3472,10 +3481,10 @@ export default {
}
.edge {
path {
- stroke: rgb(167, 167, 167);
+ stroke: rgb(120, 120, 120);
}
polygon {
- fill: rgb(167, 167, 167);
+ fill: rgb(120, 120, 120);
}
}
.edge.highlighted {
@@ -3493,26 +3502,26 @@ export default {
}
}
.node.aggregation > polygon {
- stroke: #fdca5a;
- fill: #ffe8b5;
+ stroke: #e3aa00;
+ fill: #ffe794;
}
.node.cluster.aggregation > rect {
- stroke: #fdca5a;
- fill: #fff2d4;
+ stroke: #e3aa00;
+ fill: #ffe794;
stroke-dasharray: 3, 3;
}
.node > polygon {
- stroke: #f45c5e;
- fill: #ffba99;
+ stroke: #00a5a7;
+ fill: rgb(141, 241, 242);
}
.node > ellipse {
- stroke: #58a4e0;
- fill: #d1ebff;
+ stroke: #4ea6e6;
+ fill: #b8e0ff;
}
.plain > path,
.plain ellipse {
- stroke: #56b077;
- fill: #c1f5d5;
+ stroke: #e37d29;
+ fill: #ffd0a6;
stroke-dasharray: 1.5, 1.5;
}
.edge-point ellipse {
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index 254db56c8f972fa27de1a88d2e4b3d116b77ed66..747edcdfd9e541512d7045f2d90a7fc156647c95 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -16,7 +16,7 @@ limitations under the License.
-
![]()
@@ -1868,7 +1916,7 @@ export default {
datum.attributes.width = width;
datum.attributes.height = height;
} else if (isChild) {
- datum.attributes.stroke = 'rgb(167, 167, 167)';
+ datum.attributes.stroke = 'rgb(120, 120, 120)';
}
},
@@ -2087,7 +2135,6 @@ export default {
padding-right: 20px;
height: 56px;
vertical-align: middle;
- background: #ffffff;
.path-message {
display: inline-block;
line-height: 20px;
@@ -2108,10 +2155,10 @@ export default {
}
}
.cl-dashboard-center {
- width: calc(100% + 2px);
- margin: -1px;
- margin-top: 2px;
+ width: 100%;
+ margin: 0;
height: calc(100% - 58px);
+ padding: 0px 10px 10px 10px;
}
.title-height {
height: 30px;
@@ -2150,10 +2197,17 @@ export default {
padding: 1.6vw;
cursor: pointer;
overflow: hidden;
- height: calc(50% - 2px);
- width: calc(33.3% - 2px);
- margin: 1px;
+ height: calc(50% - 10px);
+ width: calc(33.3% - 10px);
+ margin: 5px;
float: left;
+ border-radius: 3px;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+ .link-text {
+ cursor: pointer;
+ font-size: 16px;
+ color: #00a5a7;
+ }
}
.cl-module {
@@ -2195,10 +2249,10 @@ export default {
}
.edge {
path {
- stroke: rgb(167, 167, 167);
+ stroke: rgb(120, 120, 120);
}
polygon {
- fill: rgb(167, 167, 167);
+ fill: rgb(120, 120, 120);
}
}
@@ -2213,8 +2267,8 @@ export default {
}
.node > polygon {
- stroke: #f45c5e;
- fill: #ffba99;
+ stroke: #00a5a7;
+ fill: #8df1f2;
}
.node > ellipse {
stroke: #58a4e0;
@@ -2247,13 +2301,13 @@ export default {
background: #fff;
text-align: center;
height: 100%;
- padding-top: 50px;
+ padding-top: 26px;
img {
max-width: 100%;
}
p {
font-size: 16px;
- padding-top: 10px;
+ padding-top: 31px;
}
}
// Public Style End
@@ -2289,24 +2343,24 @@ export default {
#dataMapGraph {
.CreatDataset > polygon,
.Operator > ellipse {
- stroke: #58a4e0;
- fill: #d1ebff;
+ stroke: #4ea6e6;
+ fill: #b8e0ff;
}
.cluster > polygon {
- fill: #c1f5d5;
- stroke: #56b077;
+ fill: #8df1f2;
+ stroke: #00a5a7;
}
.RepeatDataset > polygon {
stroke: #fdca5a;
fill: #fff2d4;
}
.ShuffleDataset > polygon {
- stroke: #f79666;
- fill: #fed78e;
+ stroke: #e37d29;
+ fill: #ffd0a6;
}
.BatchDataset > polygon {
- stroke: #fa8e5a;
- fill: #ffcfb8;
+ stroke: #de504e;
+ fill: #ffbcba;
}
.edge {
path {
+ v-show="!loading">
@@ -55,11 +63,6 @@ limitations under the License.
:label="$t('summaryManage.summaryPath')"
show-overflow-tooltip>
-
-
+ class-name="operate-container"
+ width="400">
- {{$t('summaryManage.viewProfiler')}}
+
+
+
@@ -100,6 +108,32 @@ limitations under the License.
class="page">
+
+
{{$t('summaryManage.summaryList')}}
@@ -33,6 +33,14 @@ limitations under the License.
{{$t('summaryManage.currentFolder')}}
{{currentFolder}}
{{$t("symbols.rightbracket")}}
+
+ {{ $t('summaryManage.tracebackAnalysis') }}
+ {{ $t('summaryManage.compareAnalysis') }}
+
+
+
+
+
+ {{scope.row.value}}
+
+
+
+
+
{
i.relative_path = i.relative_path ? i.relative_path : '--';
- i.create_time = i.create_time ? i.create_time : '--';
i.update_time = i.update_time ? i.update_time : '--';
i.viewProfiler = i.profiler_dir && i.profiler_dir.length;
});
@@ -300,6 +373,101 @@ export default {
closeMenu() {
this.contextMenu.show = false;
},
+ /**
+ * go to traceback analysis
+ */
+ goToTracebackAnalysis() {
+ this.$router.push({
+ path: '/model-traceback',
+ });
+ },
+ /**
+ * go to compare analysis
+ */
+ goToCompareAnalysis() {
+ this.$router.push({
+ path: '/compare-plate',
+ });
+ },
+ /**
+ * tree data
+ * @param {Object} tree
+ * @param {Object} treeNode
+ * @param {Object} resolve
+ */
+ loadDataListChildren(tree, treeNode, resolve) {
+ setTimeout(() => {
+ resolve(tree.children);
+ });
+ },
+ /**
+ * Show dialog of model
+ * @param {Object} row select row
+ */
+ showModelDialog(row) {
+ this.rowName =
+ row.train_id + ' ' + this.$t('summaryManage.trainingParamDetails');
+ const params = {
+ body: {},
+ };
+ this.tableFilter.summary_dir = {in: [row.train_id]};
+ params.body = Object.assign({}, this.tableFilter);
+ RequestService.queryLineagesData(params)
+ .then((resp) => {
+ this.showDialogModel = true;
+ if (
+ resp &&
+ resp.data &&
+ resp.data.object &&
+ resp.data.object.length
+ ) {
+ const resultArr = [];
+ const tempdata = resp.data.object[0].model_lineage;
+ const keys = Object.keys(tempdata);
+ keys.forEach((key, index) => {
+ const data = {
+ id: index + 1,
+ hasChildren: false,
+ key: this.dialogKeys[key] ? this.dialogKeys[key].label : key,
+ value: '',
+ };
+ if (tempdata[key] === null) {
+ data.value = 'None';
+ } else if (
+ typeof tempdata[key] === this.objectType &&
+ tempdata[key] !== null
+ ) {
+ if (
+ !(tempdata[key] instanceof Array) &&
+ JSON.stringify(tempdata[key]) !== '{}'
+ ) {
+ data.hasChildren = true;
+ data.children = [];
+ Object.keys(tempdata[key]).forEach((k, j) => {
+ const item = {};
+ item.key = k;
+ item.value = tempdata[key][k];
+ item.id =
+ `model` +
+ `${new Date().getTime()}` +
+ `${this.$store.state.tableId}`;
+ this.$store.commit('increaseTableId');
+ data.children.push(item);
+ });
+ }
+ data.value = JSON.stringify(tempdata[key]);
+ } else {
+ data.value = tempdata[key];
+ }
+ resultArr.push(data);
+ });
+ this.modelData = resultArr;
+ } else {
+ this.modelData = [];
+ }
+ })
+ .catch(() => {});
+ },
},
components: {},
};
@@ -343,6 +511,9 @@ export default {
padding-left: 0;
height: 55px;
line-height: 55px;
+ .btn-wrap {
+ float: right;
+ }
}
.summary-title {
font-size: 20px;
@@ -357,6 +528,13 @@ export default {
overflow-y: auto;
.list-table {
height: 100%;
+ .operate-container {
+ text-align: right;
+ padding-right: 32px;
+ }
+ th.operate-container {
+ text-align: center;
+ }
}
}
.pagination-content {
@@ -365,6 +543,20 @@ export default {
}
.operate-btn {
margin-left: 20px;
+ padding: 12px 0;
+ }
+ .el-dialog {
+ min-width: 500px;
+ padding-bottom: 30px;
+ }
+ .operate-btn.button-disable {
+ -moz-user-select: none; /*Firefox*/
+ -webkit-user-select: none; /*webkitbrowser*/
+ -ms-user-select: none; /*IE10*/
+ -khtml-user-select: none; /*Early browser*/
+ user-select: none;
+ color: rgb(192, 196, 204);
+ cursor: not-allowed;
}
.menu-item {
color: #00a5a7;
@@ -387,5 +579,100 @@ export default {
}
}
}
+ .details-data-list {
+ .el-table td,
+ .el-table th.is-leaf {
+ border: none;
+ border-top: 1px solid #ebeef5;
+ }
+ .el-table {
+ th {
+ padding: 10px 0;
+ border-top: 1px solid #ebeef5;
+ .cell {
+ border-left: 1px solid #d9d8dd;
+ height: 14px;
+ line-height: 14px;
+ }
+ }
+ th:first-child {
+ .cell {
+ border-left: none;
+ }
+ }
+ th:nth-child(2),
+ td:nth-child(2) {
+ max-width: 30%;
+ }
+ td {
+ padding: 8px 0;
+ }
+ }
+ .el-table__row--level-0 td:first-child:after {
+ width: 20px;
+ height: 1px;
+ background: #ebeef5;
+ z-index: 11;
+ position: absolute;
+ left: 0;
+ bottom: -1px;
+ content: '';
+ display: block;
+ }
+ .el-table__row--level-1 {
+ td {
+ padding: 4px 0;
+ position: relative;
+ }
+ td:first-child::before {
+ width: 42px;
+ background: #f0fdfd;
+ border-right: 2px #00a5a7 solid;
+ z-index: 10;
+ position: absolute;
+ left: 0;
+ top: -1px;
+ bottom: 0px;
+ content: '';
+ display: block;
+ }
+ }
+
+ .el-table__row--level-1:first-child {
+ td:first-child::before {
+ bottom: 0;
+ }
+ }
+ .el-dialog__title {
+ font-weight: bold;
+ }
+ .el-dialog__body {
+ max-height: 500px;
+ padding-top: 10px;
+ padding-bottom: 0px;
+ overflow: auto;
+ .details-data-title {
+ margin-bottom: 20px;
+ }
+ }
+ }
+ .custom-btn {
+ border: 1px solid #00a5a7;
+ border-radius: 2px;
+ }
+ .green {
+ background-color: #00a5a7;
+ color: white;
+ }
+ .white {
+ background-color: white;
+ color: #00a5a7;
+ }
+ .green:hover {
+ background-color: #33b7b9;
+ }
+ .white:hover {
+ background-color: #e9f7f7;
+ }
}
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index d8e316177525ea4acbb11445ee1c65f7a8a87e82..f90ab428e40f72a7fc8f991d6b96202b8c05aca5 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -51,11 +51,19 @@ limitations under the License.
+
- ![]()
+ - {{$t("public.noData")}} + {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.scalarTipFirst")}} + {{$t("summaryManage.scalarTipSecond")}}
@@ -78,11 +86,60 @@ limitations under the License.
- ![]()
+ - {{$t("public.noData")}} + {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.histogramGuidTipFirst")}} + {{$t("summaryManage.histogramGuidTipSecond")}} +
++ {{$t("public.dataLoading")}} +
+
+
{{$t("tensors.titleText")}}
+
+
-
+
+
+
+ {{tensorTag}}
+
+ ![]()
+
+ {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.tensorTipFirst")}} + {{$t("summaryManage.tensorTipSecond")}}
@@ -103,11 +160,19 @@ limitations under the License. v-show="firstFloorNodes.length && !wrongPlugin">
- ![]()
- {{$t("public.noData")}} + {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.graphTipFirst")}} + {{$t("summaryManage.graphTipSecond")}}
@@ -127,11 +192,19 @@ limitations under the License.
- ![]()
- {{$t("public.noData")}} + {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.dataProcessTipFirst")}} + {{$t("summaryManage.dataProcessTipSecond")}}
@@ -159,12 +232,20 @@ limitations under the License.
-
- {{$t("public.noData")}} + {{$t("summaryManage.guidTipFirst")}} + {{$t("summaryManage.guidTipSecond")}} + {{$t("summaryManage.guidTipThird")}} + {{$t("summaryManage.imageTipFirst")}} + {{$t("summaryManage.imageTipSecond")}}
@@ -173,39 +254,6 @@ limitations under the License.
-
{{$t("tensors.titleText")}}
-
-
-
-
-
-
- {{tensorTag}}
-
- ![]()
-
- - {{$t("public.noData")}} -
-- {{$t("public.dataLoading")}} -
-