From 616bbcbb377dee66ff9716068b94a2edce2689ab Mon Sep 17 00:00:00 2001 From: xiayifan Date: Thu, 24 Sep 2020 17:03:31 +0800 Subject: [PATCH] UI large file code splitting,including tensor,histogram,scalar,graph,image,model-traceback,debugger --- mindinsight/ui/src/app.vue | 10 +- .../src/assets/images/data-process-guid.svg | 74 +- .../ui/src/assets/images/graph-guid.svg | 76 +- .../ui/src/assets/images/histogram-guid.svg | 49 +- .../ui/src/assets/images/image-guid.svg | 128 +- .../ui/src/assets/images/scalar-guid.svg | 34 +- .../ui/src/assets/images/tensor-guid.svg | 66 +- mindinsight/ui/src/common/common-property.js | 1 - .../components/debuggerGridTableSimple.vue | 20 +- .../ui/src/components/gridTableSimple.vue | 18 +- .../ui/src/components/histogramUnit.vue | 20 +- .../ui/src/components/multiselectGroup.vue | 2 +- mindinsight/ui/src/locales/en-us.json | 21 +- mindinsight/ui/src/locales/zh-cn.json | 17 +- mindinsight/ui/src/mixins/autoUpdate.vue | 119 + mindinsight/ui/src/mixins/commonGraph.vue | 1517 ++++++++ mindinsight/ui/src/mixins/debuggerMixin.vue | 1363 +++++++ mindinsight/ui/src/mixins/modelData.vue | 1163 ++++++ mindinsight/ui/src/mixins/smallMap.vue | 276 ++ mindinsight/ui/src/mixins/threshold.vue | 721 ++++ .../ui/src/views/debugger/debugger.vue | 3451 ++--------------- .../ui/src/views/profiling-gpu/operator.vue | 38 +- .../profiling-gpu/profiling-dashboard.vue | 6 +- .../ui/src/views/profiling/data-process.vue | 6 +- .../ui/src/views/profiling/operator.vue | 46 +- .../src/views/train-manage/compare-plate.vue | 641 ++- .../ui/src/views/train-manage/data-map.vue | 10 +- .../src/views/train-manage/data-traceback.vue | 28 +- .../ui/src/views/train-manage/graph.vue | 1763 +-------- .../ui/src/views/train-manage/histogram.vue | 123 +- .../ui/src/views/train-manage/image.vue | 109 +- .../views/train-manage/model-traceback.vue | 1147 +----- .../src/views/train-manage/scalar-compare.vue | 90 +- .../ui/src/views/train-manage/scalar.vue | 1317 ++----- .../ui/src/views/train-manage/tensor.vue | 113 +- .../views/train-manage/training-dashboard.vue | 12 +- 36 files changed, 6510 insertions(+), 8085 deletions(-) create mode 100644 mindinsight/ui/src/mixins/autoUpdate.vue create mode 100644 mindinsight/ui/src/mixins/commonGraph.vue create mode 100644 mindinsight/ui/src/mixins/debuggerMixin.vue create mode 100644 mindinsight/ui/src/mixins/modelData.vue create mode 100644 mindinsight/ui/src/mixins/smallMap.vue create mode 100644 mindinsight/ui/src/mixins/threshold.vue diff --git a/mindinsight/ui/src/app.vue b/mindinsight/ui/src/app.vue index 678df636..775041fe 100644 --- a/mindinsight/ui/src/app.vue +++ b/mindinsight/ui/src/app.vue @@ -24,7 +24,7 @@ limitations under the License.
+ :class="showWarmText ? 'cl-center-height' : ''">
@@ -103,11 +103,9 @@ export default { overflow: hidden; color: #333; } -.cl-top-64 { - top: 64px; -} -.cl-top-104 { - top: 104px; + +.cl-center-height { + height: calc(100% - 104px); } .cl-title { height: 50px; diff --git a/mindinsight/ui/src/assets/images/data-process-guid.svg b/mindinsight/ui/src/assets/images/data-process-guid.svg index 852f0d73..edac85d3 100644 --- a/mindinsight/ui/src/assets/images/data-process-guid.svg +++ b/mindinsight/ui/src/assets/images/data-process-guid.svg @@ -5,56 +5,42 @@ Created with Sketch. - - + + - + - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/mindinsight/ui/src/assets/images/graph-guid.svg b/mindinsight/ui/src/assets/images/graph-guid.svg index 27a85b3e..c63b2032 100644 --- a/mindinsight/ui/src/assets/images/graph-guid.svg +++ b/mindinsight/ui/src/assets/images/graph-guid.svg @@ -5,22 +5,22 @@ Created with Sketch. - - + + - + - - + + - - - - - + + + + + @@ -35,43 +35,33 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/histogram-guid.svg b/mindinsight/ui/src/assets/images/histogram-guid.svg index 5f77b97e..0e081c91 100644 --- a/mindinsight/ui/src/assets/images/histogram-guid.svg +++ b/mindinsight/ui/src/assets/images/histogram-guid.svg @@ -5,41 +5,30 @@ Created with Sketch. - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/mindinsight/ui/src/assets/images/image-guid.svg b/mindinsight/ui/src/assets/images/image-guid.svg index 451c7221..57fa6790 100644 --- a/mindinsight/ui/src/assets/images/image-guid.svg +++ b/mindinsight/ui/src/assets/images/image-guid.svg @@ -5,83 +5,69 @@ Created with Sketch. - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/scalar-guid.svg b/mindinsight/ui/src/assets/images/scalar-guid.svg index d08d2c25..2a88f70d 100644 --- a/mindinsight/ui/src/assets/images/scalar-guid.svg +++ b/mindinsight/ui/src/assets/images/scalar-guid.svg @@ -5,18 +5,18 @@ Created with Sketch. - - + + - + - - - - + + + + @@ -43,23 +43,11 @@ - - - - - - - - - - - - - - - - + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/tensor-guid.svg b/mindinsight/ui/src/assets/images/tensor-guid.svg index 331fe1e1..34b704dd 100644 --- a/mindinsight/ui/src/assets/images/tensor-guid.svg +++ b/mindinsight/ui/src/assets/images/tensor-guid.svg @@ -5,21 +5,21 @@ Created with Sketch. - - + + - + - - - + + + - + @@ -27,54 +27,54 @@ - + - + - - + + - + - + - - + + - + - + - - + + - + - + - + @@ -91,25 +91,9 @@ - - - - - - - - - - - - - - - - - - - + + + \ No newline at end of file diff --git a/mindinsight/ui/src/common/common-property.js b/mindinsight/ui/src/common/common-property.js index 32f2aab4..f5a83d77 100644 --- a/mindinsight/ui/src/common/common-property.js +++ b/mindinsight/ui/src/common/common-property.js @@ -91,7 +91,6 @@ export default { '#FFD1D2', ], // define graph color array - graphColorArr: ['#FFF8F5', '#FDEEE7', '#FFE5D9', '#FFDAC9'], graphColorArrPhg: ['#F5FBFB', '#EDF9F9', '#DEF5F5', '#C9F5F5'], // define fullscreen icon fullScreenIcon: diff --git a/mindinsight/ui/src/components/debuggerGridTableSimple.vue b/mindinsight/ui/src/components/debuggerGridTableSimple.vue index 30c4b463..8ae02597 100644 --- a/mindinsight/ui/src/components/debuggerGridTableSimple.vue +++ b/mindinsight/ui/src/components/debuggerGridTableSimple.vue @@ -113,14 +113,14 @@ export default { data() { return { itemId: '', // Dom id - gridObj: null, // slickgrid object + gridObj: null, // Slickgrid object columnsData: [], // Column information columnsLength: 0, // Column length filterArr: [], // Dimension selection array - formateData: [], // formatted data - formateArr: [], // formatted Array + formateData: [], // Formatted data + formateArr: [], // Formatted array statistics: {}, // Object contain maximun and minimun - accuracy: 10, // accuracy value + accuracy: 10, // Accuracy value incorrectData: false, // Wheather the dimension is correctly selected updated: false, // Updated scrollTop: false, // Wheather scroll to the top @@ -289,7 +289,7 @@ export default { } }, /** - * Setting the Background color of data + * Setting the background color of data * @param {Number} row * @param {Number} cell * @param {String} value, @@ -424,7 +424,7 @@ export default { }); }, /** - * accuracy changed + * Accuracy changed * @param {Number} value The value after changed */ accuracyChange(value) { @@ -489,9 +489,9 @@ export default { } }, /** - * check combinatorial input - * @param {Object} filter filter item - * @return {Boolean} verification result + * Check combinatorial input + * @param {Object} filter Filter item + * @return {Boolean} Verification result */ checkCombinatorialInput(filter) { const value = filter.model.trim(); @@ -589,7 +589,7 @@ export default { this.$emit('toggleFullScreen'); }, /** - * Show Error message + * Show error message * @param {String} errorMsg Error message * @param {Array} dimension Array of dimension * @param {String} filterStr String of dimension selection diff --git a/mindinsight/ui/src/components/gridTableSimple.vue b/mindinsight/ui/src/components/gridTableSimple.vue index 14fbd81c..0e43e15a 100644 --- a/mindinsight/ui/src/components/gridTableSimple.vue +++ b/mindinsight/ui/src/components/gridTableSimple.vue @@ -106,14 +106,14 @@ export default { data() { return { itemId: '', // Dom id - gridObj: null, // slickgrid object + gridObj: null, // Slickgrid object columnsData: [], // Column information columnsLength: 0, // Column length filterArr: [], // Dimension selection array - formateData: [], // formatted data - formateArr: [], // formatted Array + formateData: [], // Formatted data + formateArr: [], // Formatted array statistics: {}, // Object contain maximun and minimun - accuracy: 5, // accuracy value + accuracy: 5, // Accuracy value incorrectData: false, // Wheather the dimension is correctly selected updated: false, // Updated scrollTop: false, // Wheather scroll to the top @@ -326,7 +326,7 @@ export default { }); }, /** - * accuracy changed + * Accuracy changed */ accuracyChange() { this.formateGridArray(); @@ -390,9 +390,9 @@ export default { } }, /** - * check combinatorial input - * @param {Object} filter filter item - * @return {Boolean} verification result + * Check combinatorial input + * @param {Object} filter Filter item + * @return {Boolean} Verification result */ checkCombinatorialInput(filter) { const value = filter.model.trim(); @@ -487,7 +487,7 @@ export default { this.$emit('toggleFullScreen'); }, /** - * Show Error message + * Show error message * @param {String} errorMsg Error message * @param {Array} dimension Array of dimension * @param {String} filterStr String of dimension selection diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogramUnit.vue index 5568cc63..44c133ea 100644 --- a/mindinsight/ui/src/components/histogramUnit.vue +++ b/mindinsight/ui/src/components/histogramUnit.vue @@ -30,19 +30,19 @@ import {format, precisionRound} from 'd3'; const d3 = {format, precisionRound}; export default { props: { - // histogram data + // Histogram data fullData: { type: Array, default() { return []; }, }, - // view name + // View name viewName: { type: Number, default: 1, }, - // axis name + // Axis name axisName: { type: Number, default: 0, @@ -58,7 +58,7 @@ export default { itemId: '', // Dom id oriData: {}, // Original data charOption: {}, // Chart configuration - charObj: null, // chart Object + charObj: null, // Chart Object updated: false, // Updated zrDrawElement: {hoverDots: []}, zr: null, @@ -126,7 +126,7 @@ export default { }; }, /** - * update sample data + * Update sample data */ updateSampleData() { this.charOption = this.formatCharOption(); @@ -316,7 +316,7 @@ export default { this.$emit('toggleFullScreen'); }, /** - * remove tooltip + * Remove tooltip */ removeTooltip() { if (this.zr) { @@ -354,7 +354,7 @@ export default { const y = this.getValue(rawData, dataIndex, i++); const z = this.getValue(rawData, dataIndex, i++); const pt = getCoord([x, y]); - // linear map in z axis + // Linear map in z axis if (maxZ !== minZ) { pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight; } @@ -363,7 +363,7 @@ export default { return points; }, /** - * get convert point + * Get convert point * @param {Array} pt value * @return {Array} */ @@ -635,8 +635,8 @@ export default { } }, /** - * find nearest value - * @param {Array} eventPoint value + * Find nearest value + * @param {Array} eventPoint Value * @return {Object} */ findNearestValue(eventPoint) { diff --git a/mindinsight/ui/src/components/multiselectGroup.vue b/mindinsight/ui/src/components/multiselectGroup.vue index 6c5ee3b3..c0a548c8 100644 --- a/mindinsight/ui/src/components/multiselectGroup.vue +++ b/mindinsight/ui/src/components/multiselectGroup.vue @@ -133,7 +133,7 @@ export default { operateSelectAll: true, // Indicates whether to select all tags. perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box. selectedNumber: 0, // Number of Selected items - itemId: '', // component Id + itemId: '', // Component Id searching: false, }; }, diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json index 8df0a263..3a4a5e4a 100644 --- a/mindinsight/ui/src/locales/en-us.json +++ b/mindinsight/ui/src/locales/en-us.json @@ -28,7 +28,8 @@ "rightbracket": ")", "point": "·", "slashes": "/", - "colon": ":" + "colon": ":", + "fullStop": "." }, "header": { "refreshData": "Refresh Data", @@ -61,18 +62,14 @@ "guidTipFirst": "In the training script, add ", "guidTipSecond": "the function of collecting summary data ", "guidTipThird": "and save ", + "guidTipForth": "data.", "scalarTipFirst": "scalar ", - "scalarTipSecond": "data to display the change trend of scalars during training.", "histogramGuidTipFirst": "parameter distribution ", - "histogramGuidTipSecond": "data to display a specified tensor histogram.", - "tensorTipFirst": "tensor", - "tensorTipSecond": "data for display.", + "tensorTipFirst": "tensor ", "graphTipFirst": "computational graph ", - "graphTipSecond": "structure data to display the graph structure, data flow direction, and control flow direction of a computational graph.", - "dataProcessTipFirst": "data processing process ", - "dataProcessTipSecond": "to display the data processing and augmentation information of single model training.", - "imageTipFirst": "specified image ", - "imageTipSecond": "for display.", + "graphTipSecond": "structure data.", + "dataProcessTipFirst": "data processing process", + "imageTipFirst": "specified image", "guidUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/summary_record.html", "scalarUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/dashboard.html#scalar-visualization", "histogramUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/dashboard.html#parameter-distribution-visualization", @@ -97,7 +94,7 @@ "modelSize": "Model Size", "dataProcess": "Data Processing", "noDataFound": "No data found.", - "allHide":"All data is hidden.", + "allHide": "All data is hidden.", "userDefined": "User-defined Data", "metric": "Metrics", "deviceNum": "Devices", @@ -441,7 +438,7 @@ "chartTitle": "Average Time Consumption Ranking" }, "components": { - "summaryTitle": "Training selection", + "summaryTitle": "Training Selection", "tagSelectTitle": "Tag Selection", "selectAll": "All", "tagFilterPlaceHolder": "Enter tag (regular expression supported)", diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index 3a157524..0f7410fa 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -28,7 +28,8 @@ "rightbracket": ")", "point": "·", "slashes": "/", - "colon": "：" + "colon": "：", + "fullStop": "。" }, "header": { "refreshData": "刷新数据", @@ -58,21 +59,17 @@ "trainingParamDetails": "训练参数详情", "tracebackAnalysis": "溯源分析", "compareAnalysis": "对比分析", - "guidTipFirst": "请在您的训练脚本中", - "guidTipSecond": "增加summary数据的收集", + "guidTipFirst": "请在训练脚本中", + "guidTipSecond": "收集summary", "guidTipThird": "，保存", + "guidTipForth": "数据。", "scalarTipFirst": "标量", - "scalarTipSecond": "数据，以供展示训练过程中，标量的变化趋势情况。", "histogramGuidTipFirst": "参数分布", - "histogramGuidTipSecond": "数据，以供展示指定的张量直方图。", "tensorTipFirst": "张量", - "tensorTipSecond": "数据，以供展示。", "graphTipFirst": "计算图", - "graphTipSecond": "结构数据，以供展示计算图的图结构，数据流以及控制流的走向。", + "graphTipSecond": "结构数据。", "dataProcessTipFirst": "数据处理过程", - "dataProcessTipSecond": "以供展示单次模型训练的数据处理和数据增强信息。", "imageTipFirst": "指定图片", - "imageTipSecond": "以供展示。", "guidUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/summary_record.html", "scalarUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/dashboard.html#id3", "histogramUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/dashboard.html#id4", @@ -97,7 +94,7 @@ "modelSize": "模型大小", "dataProcess": "数据处理", "noDataFound": "暂无满足筛选条件的数据", - "allHide":"数据已全部隐藏", + "allHide": "数据已全部隐藏", "userDefined": "自定义数据", "metric": "度量指标", "deviceNum": "device数目", diff --git a/mindinsight/ui/src/mixins/autoUpdate.vue b/mindinsight/ui/src/mixins/autoUpdate.vue new file mode 100644 index 00000000..a519706e --- /dev/null +++ b/mindinsight/ui/src/mixins/autoUpdate.vue @@ -0,0 +1,119 @@ + + diff --git a/mindinsight/ui/src/mixins/commonGraph.vue b/mindinsight/ui/src/mixins/commonGraph.vue new file mode 100644 index 00000000..94fc2421 --- /dev/null +++ b/mindinsight/ui/src/mixins/commonGraph.vue @@ -0,0 +1,1517 @@ + + diff --git a/mindinsight/ui/src/mixins/debuggerMixin.vue b/mindinsight/ui/src/mixins/debuggerMixin.vue new file mode 100644 index 00000000..cf49611d --- /dev/null +++ b/mindinsight/ui/src/mixins/debuggerMixin.vue @@ -0,0 +1,1363 @@ + diff --git a/mindinsight/ui/src/mixins/modelData.vue b/mindinsight/ui/src/mixins/modelData.vue new file mode 100644 index 00000000..9964ec1e --- /dev/null +++ b/mindinsight/ui/src/mixins/modelData.vue @@ -0,0 +1,1163 @@ + + diff --git a/mindinsight/ui/src/mixins/smallMap.vue b/mindinsight/ui/src/mixins/smallMap.vue new file mode 100644 index 00000000..79c4783d --- /dev/null +++ b/mindinsight/ui/src/mixins/smallMap.vue @@ -0,0 +1,276 @@ + + diff --git a/mindinsight/ui/src/mixins/threshold.vue b/mindinsight/ui/src/mixins/threshold.vue new file mode 100644 index 00000000..863098c9 --- /dev/null +++ b/mindinsight/ui/src/mixins/threshold.vue @@ -0,0 +1,721 @@ + + + diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue index ff993d49..96fd94df 100644 --- a/mindinsight/ui/src/views/debugger/debugger.vue +++ b/mindinsight/ui/src/views/debugger/debugger.vue @@ -269,8 +269,8 @@ limitations under the License. type="primary" size="mini" class="custom-btn green" - :disabled="!nodeName" - :class="{disabled:!nodeName}" + :disabled="!currentNodeName" + :class="{disabled:!currentNodeName}" @click="getCurrentNodeInfo"> {{ $t('debugger.currentNode')}} @@ -458,15 +458,16 @@ limitations under the License.