Huawei_Technology
/
mindspore-mindinsight
Not watched
1
0
Fork 0
Code
Releases 11 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: d288d33783
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'd288d33783'
${ noResults }
mindspore-mindinsight/mindinsight/ui/src/components/debugger-tensor.vue

1547 lines
50 kB
Raw Blame History 

  1. <!--

  2. Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.

  3. 

  4. Licensed under the Apache License, Version 2.0 (the "License");

  5. you may not use this file except in compliance with the License.

  6. You may obtain a copy of the License at

  7. 

  8. http://www.apache.org/licenses/LICENSE-2.0

  9. 

  10. Unless required by applicable law or agreed to in writing, software

  11. distributed under the License is distributed on an "AS IS" BASIS,

  12. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

  13. See the License for the specific language governing permissions and

  14. limitations under the License.

  15. -->

  16. <template>

  17.   <div class="deb-tensor-wrap">

  18.     <div class="deb-tensor-left"

  19.          :class="{collapse:leftShow}">

  20.       <div class="deb-tensor-left-content"

  21.            v-show="!leftShow">

  22.         <div class="left-content-title">

  23.           <span>{{ $t('debugger.optimizationOrientation') }}</span>

  24.         </div>

  25.         <div class="left-advice"

  26.              v-show="leftDataShow">

  27.           <div class="left-content-list"

  28.                v-for="item in tensorList"

  29.                :key="item.id">

  30.             <div class="detection-judgment">

  31.               <span>{{ $t('debugger.watchPoint') }}{{item.id}}</span>

  32.               <span>{{ $t('symbols.colon') }}</span>

  33.               <span>{{ $parent.transCondition(item.condition) }}</span>

  34.             </div>

  35.             <div class="reason"

  36.                  v-for="(ele,key) in item.params"

  37.                  :key="key">

  38.               <div class="tensor-icon icon-secondary"></div>

  39.               <div class="tensor-content">{{ele.content}}</div>

  40.             </div>

  41.             <div class="hit-tip"

  42.                  v-if="item.tip">

  43.               <i class="el-icon-warning"></i>{{item.tip}}

  44.             </div>

  45.             <div class="tensor-advice"

  46.                  v-if="!item.tip">

  47.               <span>{{ $t('debugger.tuningAdvice') }}</span>

  48.               <div class="advice-list-title">

  49.                 <div class="adviceTitle">{{ item.tuningAdviceTitle }}</div>

  50.                 <div class="advice-list">

  51.                   <div class="advice-content"

  52.                        v-for="(element, key) in item.tuningAdvice"

  53.                        :key="key">{{ element }}</div>

  54.                 </div>

  55.               </div>

  56.             </div>

  57.           </div>

  58.         </div>

  59.         <div v-show="!leftDataShow"

  60.              class="leftNoData">{{ $t('debugger.noWatchPoint') }}</div>

  61.       </div>

  62.       <div class="collapse-btn"

  63.            :class="{collapse:leftShow}"

  64.            @click="collapseBtnClick">

  65.       </div>

  66.     </div>

  67.     <div class="deb-tensor-right"

  68.          :class="{collapse:leftShow}">

  69.       <div class="deb-con-title">

  70.         <div class="deb-con-title-left"

  71.              :title="curRowObj.name">

  72.           {{ curRowObj.name }}

  73.         </div>

  74.         <div class="deb-con-title-right">

  75.           <div class="close-btn">

  76.             <img src="@/assets/images/close-page.png"

  77.                  @click="closeTensor">

  78.           </div>

  79.         </div>

  80.       </div>

  81.       <div class="deb-compare-detail">

  82.         <div v-for="(statistics,key) in statisticsArr"

  83.              :key="key">

  84.           <label v-if="key===0">

  85.             {{gridType==='preStep'?$t('debugger.preStatisticsLabel'):$t('debugger.curStatisticsLabel')}}

  86.             <span>{{ gridType==='preStep'?curRowObj.step-1:curRowObj.step}}</span>

  87.           </label>

  88.           <label v-if="key===1">{{$t('debugger.preStatisticsLabel')}}<span>{{ curRowObj.step-1 }}</span></label>

  89.           <label v-if="key===2">{{$t('debugger.diffStatisticsLabel')}}</label>

  90.           <span>{{ $t('debugger.max') }} {{ statistics.overall_max===undefined?'--':statistics.overall_max }}</span>

  91.           <span>{{ $t('debugger.min') }} {{ statistics.overall_min===undefined?'--':statistics.overall_min }}</span>

  92.           <span>{{ $t('debugger.mean') }} {{ statistics.overall_avg===undefined?'--':statistics.overall_avg }}</span>

  93.           <span>{{ $t('debugger.nan') }}

  94.             {{ statistics.overall_nan_count===undefined?'--':statistics.overall_nan_count }}

  95.           </span>

  96.           <span>{{ $t('debugger.negativeInf') }}

  97.             {{ statistics.overall_neg_inf_count===undefined?'--':statistics.overall_neg_inf_count }}

  98.           </span>

  99.           <span>{{ $t('debugger.inf') }}

  100.             {{ statistics.overall_pos_inf_count===undefined?'--': statistics.overall_pos_inf_count}}

  101.           </span>

  102.           <span>{{ $t('debugger.zero') }}

  103.             {{ statistics.overall_zero_count===undefined?'--': statistics.overall_zero_count}}</span>

  104.           <span>{{ $t('debugger.negativeNum') }}

  105.             {{ statistics.overall_neg_zero_count===undefined?'--':statistics.overall_neg_zero_count }}</span>

  106.           <span>{{ $t('debugger.positiveNum') }}

  107.             {{ statistics.overall_pos_zero_count===undefined?'--':statistics.overall_pos_zero_count }}</span>

  108.           <span>{{ $t('debugger.true') }}

  109.             {{ statistics.overall_true_count===undefined?'--':statistics.overall_true_count }}</span>

  110.           <span>{{ $t('debugger.false') }}

  111.             {{ statistics.overall_false_count===undefined?'--':statistics.overall_false_count }}</span>

  112.         </div>

  113.       </div>

  114.       <div class="deb-con-slide">

  115.         <div class="deb-con-slide-right">

  116.           <el-button size="mini"

  117.                      class="custom-btn"

  118.                      :class="{green:gridType==='value'}"

  119.                      :disabled="state==='running'"

  120.                      @click="tabChange('value')">{{ $t('debugger.curStep') }}</el-button>

  121.           <el-button size="mini"

  122.                      class="custom-btn"

  123.                      :class="{green:gridType==='preStep'}"

  124.                      :disabled="!curRowObj.has_prev_step || state==='running'"

  125.                      @click="tabChange('preStep')">{{ $t('debugger.preStep') }}</el-button>

  126.           <el-button size="mini"

  127.                      class="custom-btn"

  128.                      :class="{green:gridType==='compare'}"

  129.                      :disabled="!curRowObj.has_prev_step || state==='running'"

  130.                      @click="tabChange('compare')">{{ $t('debugger.compareResult') }}</el-button>

  131.         </div>

  132.         <div class="deb-con-slide-left"

  133.              v-if="gridType === 'compare'">

  134.           <div class="deb-slide-title">{{ $t('debugger.tolerance') }}</div>

  135.           <div class="deb-slide-width">

  136.             <el-slider v-model="tolerance"

  137.                        :format-tooltip="formatTolenrance"

  138.                        @change="tensorComparisons(curRowObj,dims)"

  139.                        @input="toleranceInputChange()"></el-slider>

  140.           </div>

  141.           <div class="deb-slide-input">

  142.             <el-input v-model="toleranceInput"

  143.                       @input="toleranceValueChange"

  144.                       @keyup.native.enter="tensorComparisons(curRowObj,dims)"></el-input>

  145.           </div>

  146.         </div>

  147.         <div class="deb-con-slide-middle">

  148.           MIN

  149.           <div class="grident">0</div>

  150.           MAX

  151.         </div>

  152.       </div>

  153. 

  154.       <div class="deb-con-table">

  155.         <div class="deb-compare-wrap">

  156.           <debuggerGridTable v-if="gridType==='value'"

  157.                              :fullData="tensorValue"

  158.                              :showFilterInput="showFilterInput"

  159.                              ref="tensorValue"

  160.                              gridType="value"

  161.                              @martixFilterChange="tensorFilterChange($event)">

  162.           </debuggerGridTable>

  163.           <debuggerGridTable v-else-if="gridType==='preStep'"

  164.                              :fullData="tensorValue"

  165.                              :showFilterInput="showFilterInput"

  166.                              ref="tensorValue"

  167.                              gridType="value"

  168.                              @martixFilterChange="tensorFilterChange($event)">

  169.           </debuggerGridTable>

  170.           <debuggerGridTable v-else

  171.                              :fullData="tensorValue"

  172.                              :showFilterInput="showFilterInput"

  173.                              ref="tensorValue"

  174.                              gridType="compare"

  175.                              @martixFilterChange="tensorFilterChange($event)">

  176.           </debuggerGridTable>

  177.         </div>

  178.       </div>

  179.       <div class="deb-graph-container">

  180.         <div class="graph-title">

  181.           {{$t('debugger.tensorDiagram')}}

  182.           <span class="tip">

  183.             <el-tooltip placement="bottom"

  184.                         effect="light"

  185.                         popper-class="legend-tip">

  186.               <i class="el-icon-warning"></i>

  187.               <div slot="content">

  188.                 <div>{{$t('debugger.selectDetail')}}</div>

  189.                 <div class="legend">

  190.                   <div class="item">

  191.                     {{$t('debugger.tensorTip')}}

  192.                     <img :src="require('@/assets/images/deb-slot.png')"

  193.                          alt="" />

  194.                   </div>

  195.                   <div class="item">

  196.                     {{$t('debugger.operator')}}

  197.                     <img :src="require('@/assets/images/deb-operator.png')"

  198.                          alt="" />

  199.                   </div>

  200.                 </div>

  201.               </div>

  202.             </el-tooltip>

  203.           </span>

  204.         </div>

  205.         <div id="tensor-graph"

  206.              class="deb-graph"

  207.              v-if="graphShow"></div>

  208.         <div class="nodata"

  209.              v-else-if="!graphShow">

  210.           {{ $t('public.noData') }}

  211.         </div>

  212.         <div class="deb-tensor-info">

  213.           <div class="tensor">

  214.             <div class="tensor-title">{{$t('debugger.tensorMsg')}}</div>

  215.             <div class="tensor-detail">

  216.               <span>{{ $t('graph.name') + $t('symbols.colon') }} {{ statistics.name }}</span>

  217.               <span>{{ $t('debugger.max') }} {{ statistics.overall_max===undefined?'--':statistics.overall_max }}</span>

  218.               <span>{{ $t('debugger.min') }} {{ statistics.overall_min===undefined?'--':statistics.overall_min }}</span>

  219.               <span>{{ $t('debugger.mean') }}

  220.                 {{ statistics.overall_avg===undefined?'--':statistics.overall_avg }}

  221.               </span>

  222.               <span>{{ $t('debugger.nan') }}

  223.                 {{ statistics.overall_nan_count===undefined?'--':statistics.overall_nan_count }}

  224.               </span>

  225.               <span>{{ $t('debugger.negativeInf') }}

  226.                 {{ statistics.overall_neg_inf_count===undefined?'--':statistics.overall_neg_inf_count }}

  227.               </span>

  228.               <span>{{ $t('debugger.inf') }}

  229.                 {{ statistics.overall_pos_inf_count===undefined?'--': statistics.overall_pos_inf_count}}

  230.               </span>

  231.               <span>{{ $t('debugger.zero') }}

  232.                 {{ statistics.overall_zero_count===undefined?'--': statistics.overall_zero_count}}</span>

  233.               <span>{{ $t('debugger.negativeNum') }}

  234.                 {{ statistics.overall_neg_zero_count===undefined?'--':statistics.overall_neg_zero_count }}</span>

  235.               <span>{{ $t('debugger.positiveNum') }}

  236.                 {{ statistics.overall_pos_zero_count===undefined?'--':statistics.overall_pos_zero_count }}</span>

  237.               <span>{{ $t('debugger.true') }}

  238.                 {{ statistics.overall_true_count===undefined?'--':statistics.overall_true_count }}</span>

  239.               <span>{{ $t('debugger.false') }}

  240.                 {{ statistics.overall_false_count===undefined?'--':statistics.overall_false_count }}</span>

  241.             </div>

  242.           </div>

  243.           <div class="watch-point">

  244.             <div class="watchPoint-title">{{ $t('debugger.watchList') }}</div>

  245.             <div class="point-list"

  246.                  v-show="rightDataShow">

  247.               <div v-for="(item,key) in watchPoints"

  248.                    :key="key">

  249.                 <div class="watch-judgment">

  250.                   <span>{{ $t('debugger.watchPoint') }}{{item.id}}</span>

  251.                   <span>{{ $t('symbols.colon') }}</span>

  252.                   <span>{{ getFormateWatchPoint(item) }}</span>

  253.                 </div>

  254.               </div>

  255.             </div>

  256.             <div v-show="!rightDataShow"

  257.                  class="leftNoData">{{ $t('debugger.noWatchPoint') }}</div>

  258.           </div>

  259.         </div>

  260.       </div>

  261.     </div>

  262.   </div>

  263. </template>

  264. <script>

  265. import RequestService from '@/services/request-service';

  266. import debuggerGridTable from './debugger-grid-table-simple.vue';

  267. import {select, selectAll, zoom} from 'd3';

  268. import {event as currentEvent} from 'd3-selection';

  269. import 'd3-graphviz';

  270. const d3 = {select, selectAll, zoom};

  271. export default {

  272.   mixins: [],

  273.   components: {debuggerGridTable},

  274.   props: {

  275.     row: {

  276.       type: Object,

  277.       default: () => {},

  278.     },

  279.     formateWatchpointParams: Function,

  280.   },

  281.   data() {

  282.     return {

  283.       leftShow: false,

  284.       tensorList: [],

  285.       tuningRule: '',

  286.       tolerance: 0,

  287.       toleranceInput: 0,

  288.       showFilterInput: true,

  289.       gridType: 'compare',

  290.       dims: null,

  291.       statisticsArr: [],

  292.       tensorValue: [],

  293.       loadingOption: {

  294.         lock: true,

  295.         text: this.$t('public.dataLoading'),

  296.         spinner: 'el-icon-loading',

  297.         background: 'rgba(0, 0, 0, 0.3)',

  298.       },

  299.       curRowObj: this.row,

  300. 

  301.       tensorGraphData: {},

  302.       tensorGraphviz: null,

  303.       selectedNode: {},

  304.       statistics: {},

  305.       leftDataShow: true,

  306.       rightDataShow: true,

  307.       tuningAdvice: [],

  308.       tuningAdviceTitle: '',

  309.       watchPoints: [],

  310.       callbackFun: null,

  311.       graphShow: true,

  312.       statisticsKeys: [

  313.         'name',

  314.         'overall_avg',

  315.         'overall_count',

  316.         'overall_max',

  317.         'overall_min',

  318.         'overall_nan_count',

  319.         'overall_neg_inf_count',

  320.         'overall_neg_zero_count',

  321.         'overall_pos_inf_count',

  322.         'overall_pos_zero_count',

  323.         'overall_zero_count',

  324.         'overall_true_count',

  325.         'overall_false_count',

  326.       ],

  327.       loadingInstance: {},

  328.     };

  329.   },

  330.   computed: {

  331.     state() {

  332.       return this.$parent.metadata.state;

  333.     },

  334.   },

  335.   mounted() {

  336.     this.$nextTick(() => {

  337.       this.callbackFun = this.debounce(this.resizeCallback, 200);

  338.       window.addEventListener('resize', this.callbackFun);

  339.       this.init();

  340.     });

  341.   },

  342.   methods: {

  343.     init() {

  344.       if (this.curRowObj.type === 'value') {

  345.         this.gridType = 'value';

  346.         this.viewValueDetail(this.curRowObj);

  347.       } else {

  348.         this.gridType = 'compare';

  349.         this.tensorComparisons(this.curRowObj);

  350.       }

  351.       this.getTensorGraphData(true);

  352.       this.getTensorHitsData();

  353.     },

  354.     getTensorGraphData(initPage) {

  355.       const params = {

  356.         tensor_name: this.curRowObj.name,

  357.         graph_name: this.curRowObj.graph_name,

  358.       };

  359.       RequestService.getTensorGraphData(params).then(

  360.           (res) => {

  361.             if (res && res.data && res.data.graph && res.data.graph.nodes && res.data.graph.nodes.length) {

  362.               this.graphShow = true;

  363.               const nodes = JSON.parse(JSON.stringify(res.data.graph.nodes));

  364.               this.tensorGraphData = {};

  365.               nodes.forEach((node) => {

  366.                 this.tensorGraphData[node.name] = {...node, type: 'node'};

  367.                 if (node.slots && node.slots.length) {

  368.                   node.slots.forEach((slot) => {

  369.                     const obj = {

  370.                       ...slot,

  371.                       name: `${node.name}:${slot.slot}`,

  372.                       graph_name: node.graph_name,

  373.                       type: 'slot',

  374.                     };

  375.                     this.tensorGraphData[obj.name] = obj;

  376.                   });

  377.                 }

  378.               });

  379. 

  380.               if (initPage) {

  381.                 this.loadingInstance = this.$loading(this.loadingOption);

  382.                 this.selectedNode.name = this.curRowObj.name;

  383.                 const dot = this.packageData();

  384.                 // Delay is required, otherwise the loading icon cannot be loaded

  385.                 setTimeout(() => {

  386.                   this.initGraph(dot);

  387.                 }, 200);

  388.               } else {

  389.                 if (this.selectedNode.name) {

  390.                   this.setNodeData();

  391.                 }

  392.               }

  393.             } else {

  394.               this.graphShow = false;

  395.               this.rightDataShow = false;

  396.               this.statisticsKeys.forEach((key) => {

  397.                 this.statistics[key] = '--';

  398.               });

  399.             }

  400.           },

  401.           (err) => {

  402.             this.graphShow = false;

  403.             this.statisticsKeys.forEach((key) => {

  404.               this.statistics[key] = '--';

  405.             });

  406.           },

  407.       );

  408.     },

  409.     updateGraphData(graphName, tensorName) {

  410.       if (graphName === this.curRowObj.graph_name && tensorName === this.curRowObj.name) {

  411.         this.getTensorGraphData(false);

  412.       }

  413.     },

  414.     getTensorHitsData() {

  415.       const params = {

  416.         tensor_name: this.curRowObj.name,

  417.         graph_name: this.curRowObj.graph_name,

  418.       };

  419.       RequestService.tensorHitsData(params).then(

  420.           (res) => {

  421.             if (res && res.data && res.data.watch_points && res.data.watch_points.length) {

  422.               this.leftDataShow = true;

  423.               this.tensorList = res.data.watch_points.map((val) => {

  424.                 return {

  425.                   id: val.id,

  426.                   condition: val.watch_condition.id,

  427.                   params: val.watch_condition.params || [],

  428.                   selected: false,

  429.                   tip:

  430.                   val.error_list && val.error_list.length

  431.                     ? val.error_list

  432.                         .map((i) => {

  433.                           return this.$t('debugger.checkTips')[i];

  434.                         })

  435.                         .join('') + this.$t('debugger.checkTips').cannotCheck

  436.                     : '',

  437.                 };

  438.               });

  439. 

  440.               const tensorAdvice = this.$t(`debugger.tensorTuningAdvice`);

  441.               this.tensorList.forEach((item) => {

  442.                 const tuning = tensorAdvice[item.condition];

  443.                 if (!tuning) {

  444.                   item.tuningAdviceTitle = this.$t(`debugger.noAdvice`);

  445.                 } else {

  446.                   item.tuningAdviceTitle = tuning[1];

  447.                   item.tuningAdvice = tuning[2];

  448.                 }

  449.                 this.formateWatchpointParams(item.params);

  450.               });

  451.             } else {

  452.               this.leftDataShow = false;

  453.             }

  454.           },

  455.           (error) => {

  456.             this.leftDataShow = false;

  457.             this.$parent.showErrorMsg(error);

  458.           },

  459.       );

  460.     },

  461.     getFormateWatchPoint(item) {

  462.       let param = '';

  463.       if (item.params && item.params.length) {

  464.         this.formateWatchpointParams(item.params);

  465.         param = item.params.map((i) => i.content).join('; ');

  466.       }

  467.       return `${this.$parent.transCondition(item.condition)} (${param})`;

  468.     },

  469.     packageData() {

  470.       let nodeStr = '';

  471.       let edgeStr = '';

  472.       const edges = [];

  473.       Object.keys(this.tensorGraphData).forEach((key) => {

  474.         const node = this.tensorGraphData[key];

  475.         if (node.type === 'node') {

  476.           nodeStr += `<${node.name}>[id="${node.name}";label="${node.name

  477.               .split('/')

  478.               .pop()}";shape="ellipse";class="operator"];`;

  479.         }

  480.         if (node.slots && node.slots.length) {

  481.           nodeStr += this.packageSubGraph(node);

  482.         }

  483. 

  484.         if (node.input) {

  485.           Object.keys(node.input).forEach((key) => {

  486.             const list = node.input[key].slot_mapping;

  487.             if (list && list.length) {

  488.               list.forEach((map) => {

  489.                 if (map && map.length) {

  490.                   edges.push({

  491.                     source: `${key}:${map[0]}`,

  492.                     target: `outputOf${key}_slots`,

  493.                     count: 1,

  494.                   });

  495. 

  496.                   edges.push({

  497.                     source: `outputOf${key}_slots`,

  498.                     target: `${node.name}`,

  499.                     count: 1,

  500.                   });

  501.                 }

  502.               });

  503.             }

  504.           });

  505.         }

  506.       });

  507.       this.$parent.uniqueEdges(edges);

  508. 

  509.       edges.forEach((edge) => {

  510.         edgeStr +=

  511.           `<${edge.source}>-><${edge.target}>[id="${edge.source}->${edge.target}";` +

  512.           `label="${edge.count > 1 ? edge.count + 'tensor' : ''}"]`;

  513.       });

  514. 

  515.       const initSetting = 'node[style="filled";fontsize="10px"];edge[fontsize="6px";];';

  516.       return `digraph {compound=true;rankdir=TB;${initSetting}${nodeStr}${edgeStr}}`;

  517.     },

  518.     /**

  519.      * Encapsulates the data of a subgraph.

  520.      * @param {Array} node Node data.

  521.      * @return {String} Dot string

  522.      */

  523.     packageSubGraph(node) {

  524.       const slots = node.slots;

  525.       const name = node.name;

  526.       const subGraphInput = `inputOf${node.name}_slots`;

  527.       const subGraphOutput = `outputOf${node.name}_slots`;

  528.       let strTemp = '';

  529.       let nodeStr = '';

  530.       let edgeStr = '';

  531.       const clusterName = `cluster_${name}_slots`;

  532. 

  533.       nodeStr +=

  534.         `{rank=min;<${subGraphInput}>[shape="circle";` +

  535.         `id="${subGraphInput}";width=0.02;fixedsize=true;` +

  536.         `label=""]};`;

  537.       edgeStr += `<${name}>-><${subGraphInput}>[id="${name}->${subGraphInput}";label="${slots.length}tensor"]`;

  538. 

  539.       const outputKeys = Object.keys(node.output || {});

  540.       if (outputKeys.length) {

  541.         nodeStr +=

  542.           `{rank=max;<${subGraphOutput}>[shape="circle";` +

  543.           `id="${subGraphOutput}";width=0.02;fixedsize=true;` +

  544.           `label=""]};`;

  545.       }

  546. 

  547.       slots.forEach((slot) => {

  548.         const slotName = `${name}:${slot.slot}`;

  549.         nodeStr +=

  550.           `<${slotName}>[id="${slotName}";label="slot:${slot.slot}${this.getSlotWatchPointsAbbr(slot)}";` +

  551.           `shape="polygon";class="slot${

  552.             slotName === this.curRowObj.name ? ' current selected' : ''

  553.           }";fillcolor="#c5e0b3"];`;

  554. 

  555.         edgeStr += `<${subGraphInput}>-><${slotName}>[id="${subGraphInput}->${slotName}"];`;

  556.       });

  557. 

  558.       strTemp =

  559.         `subgraph <${clusterName}>{style="filled";id="${name}_slots";` +

  560.         `label="";fillcolor="#ffffff";${nodeStr}};${edgeStr}`;

  561. 

  562.       return strTemp;

  563.     },

  564.     getSlotWatchPointsAbbr(slot) {

  565.       let abbrStr = '';

  566.       if (slot && slot.watch_points && slot.watch_points.length) {

  567.         let list = [];

  568.         slot.watch_points.forEach((hit) => {

  569.           if (hit.watch_condition && hit.watch_condition.abbr) {

  570.             list.push(hit.watch_condition.abbr);

  571.           }

  572.         });

  573.         list = Array.from(new Set(list));

  574.         abbrStr = `[${list.join()}]`;

  575.       }

  576.       return abbrStr;

  577.     },

  578.     /**

  579.      * Initializing the dataset graph

  580.      * @param {String} dot Dot statement encapsulated in graph data

  581.      */

  582.     initGraph(dot) {

  583.       try {

  584.         this.tensorGraphviz = d3

  585.             .select('#tensor-graph')

  586.             .graphviz({useWorker: false})

  587.             .dot(dot)

  588.             .attributer(this.$parent.attributer)

  589.             .render(this.startApp);

  590.       } catch (error) {

  591.         const svg = document.querySelector('#tensor-graph svg');

  592.         if (svg) {

  593.           svg.remove();

  594.         }

  595.         this.initGraph(dot);

  596.       }

  597.     },

  598.     startApp() {

  599.       setTimeout(() => {

  600.         if (this.tensorGraphviz) {

  601.           this.tensorGraphviz._data = null;

  602.           this.tensorGraphviz._dictionary = null;

  603.           this.tensorGraphviz = null;

  604.         }

  605.       }, 100);

  606. 

  607.       const graphDom = d3.select('#tensor-graph');

  608.       graphDom.selectAll('title').remove();

  609.       this.initZooming();

  610.       this.fitGraph();

  611. 

  612.       const nodes = graphDom.selectAll('.node');

  613.       nodes.on('click', (target, index, nodesList) => {

  614.         const event = currentEvent;

  615.         event.stopPropagation();

  616.         event.preventDefault();

  617. 

  618.         this.selectedNode.name = nodesList[index].id;

  619.         this.setNodeData();

  620.       });

  621. 

  622.       const slots = graphDom.selectAll('.node.slot');

  623.       slots.on('dblclick', (target, index, nodesList) => {

  624.         const event = currentEvent;

  625.         event.stopPropagation();

  626.         event.preventDefault();

  627. 

  628.         const selectedNode = nodesList[index];

  629.         if (selectedNode.id !== this.curRowObj.name) {

  630.           const data = this.tensorGraphData[selectedNode.id];

  631. 

  632.           this.curRowObj.name = data.name;

  633.           this.curRowObj.full_name = data.full_name;

  634.           this.curRowObj.graph_name = data.graph_name;

  635.           this.curRowObj.has_prev_step = data.has_prev_step;

  636.           this.curRowObj.type = 'value';

  637.           this.curRowObj.shape = JSON.stringify(data.shape || []);

  638. 

  639.           nodes.on('click', null);

  640.           nodes.on('dblclick', null);

  641.           this.resetTensor();

  642.         }

  643.       });

  644. 

  645.       this.loadingInstance.close();

  646.       if (this.selectedNode.name) {

  647.         this.setNodeData();

  648.       }

  649.     },

  650.     fitGraph() {

  651.       const graphContainer = document.getElementById('tensor-graph');

  652.       const graphDom = graphContainer.querySelector(`#graph0`);

  653.       const containerRect = graphContainer.getBoundingClientRect();

  654.       let graphRect = graphDom.getBoundingClientRect();

  655.       const transformData = this.$parent.getTransformData(graphDom);

  656.       const selectedNode = graphDom.querySelector(`g[id="${this.curRowObj.name}"]`);

  657.       let nodeRect = selectedNode.getBoundingClientRect();

  658.       const nodeBox = selectedNode.getBBox();

  659.       const transRate = nodeBox.width / nodeRect.width;

  660.       const paddingTop = 20;

  661. 

  662.       if (graphRect.height < containerRect.height / 2) {

  663.         let scale = (containerRect.height - paddingTop * 2) / graphRect.height;

  664.         graphDom.setAttribute(

  665.             'transform',

  666.             `translate(${transformData.translate[0]},${transformData.translate[1]}) scale(${

  667.               scale * transformData.scale[0]

  668.             })`,

  669.         );

  670. 

  671.         this.$nextTick(() => {

  672.           setTimeout(() => {

  673.             nodeRect = selectedNode.getBoundingClientRect();

  674.             graphRect = graphDom.getBoundingClientRect();

  675.             const nodeCenter = {

  676.               x: nodeRect.x + nodeRect.width / 2,

  677.             };

  678.             const containerCenter = {

  679.               x: containerRect.x + containerRect.width / 2,

  680.             };

  681. 

  682.             let x = (containerCenter.x - nodeCenter.x) * transRate;

  683.             let y = (containerRect.top + paddingTop - graphRect.top) * transRate;

  684.             x = parseFloat(x.toFixed(2));

  685.             y = parseFloat(y.toFixed(2));

  686.             scale = parseFloat((scale * transformData.scale[0]).toFixed(2));

  687. 

  688.             graphDom.setAttribute(

  689.                 'transform',

  690.                 `translate(${transformData.translate[0] + x},${transformData.translate[1] + y}) scale(${scale})`,

  691.             );

  692.           }, 100);

  693.         });

  694.       }

  695.     },

  696.     /**

  697.      * Initializing the Zoom Function of a Graph

  698.      */

  699.     initZooming() {

  700.       const svgDom = document.querySelector('#tensor-graph svg');

  701.       const svgRect = svgDom.getBoundingClientRect();

  702. 

  703.       const graphDom = document.querySelector('#tensor-graph #graph0');

  704.       const graphBox = graphDom.getBBox();

  705.       const graphRect = graphDom.getBoundingClientRect();

  706.       let graphTransform = {};

  707. 

  708.       const minScale = Math.min(svgRect.width / 2 / graphRect.width, svgRect.height / 2 / graphRect.height);

  709. 

  710.       const padding = 4;

  711.       const minDistance = 50;

  712.       const pointer = {start: {x: 0, y: 0}, end: {x: 0, y: 0}};

  713. 

  714.       const zoom = d3

  715.           .zoom()

  716.           .on('start', () => {

  717.             const event = currentEvent.sourceEvent;

  718.             if (!event) {

  719.               return;

  720.             }

  721.             pointer.start.x = event.x;

  722.             pointer.start.y = event.y;

  723.           })

  724.           .on('zoom', () => {

  725.             const event = currentEvent.sourceEvent;

  726.             if (!event) {

  727.               return;

  728.             }

  729.             const transformData = this.$parent.getTransformData(graphDom);

  730.             if (!Object.keys(graphTransform).length) {

  731.               graphTransform = {

  732.                 x: transformData.translate[0],

  733.                 y: transformData.translate[1],

  734.                 k: transformData.scale[0],

  735.               };

  736.             }

  737. 

  738.             let tempStr = '';

  739.             let change = {};

  740.             let scale = transformData.scale[0];

  741.             const graphRect = graphDom.getBoundingClientRect();

  742.             const transRate = graphBox.width / graphRect.width;

  743.             if (event.type === 'mousemove') {

  744.               pointer.end.x = event.x;

  745.               pointer.end.y = event.y;

  746.               let tempX = pointer.end.x - pointer.start.x;

  747.               let tempY = pointer.end.y - pointer.start.y;

  748.               const paddingTrans = Math.max(padding / transRate / scale, minDistance);

  749.               if (graphRect.left + paddingTrans + tempX >= svgRect.left + svgRect.width) {

  750.                 tempX = Math.min(tempX, 0);

  751.               }

  752.               if (graphRect.left + graphRect.width - paddingTrans + tempX <= svgRect.left) {

  753.                 tempX = Math.max(tempX, 0);

  754.               }

  755.               if (graphRect.top + paddingTrans + tempY >= svgRect.top + svgRect.height) {

  756.                 tempY = Math.min(tempY, 0);

  757.               }

  758.               if (graphRect.top + graphRect.height - paddingTrans + tempY <= svgRect.top) {

  759.                 tempY = Math.max(tempY, 0);

  760.               }

  761. 

  762.               change = {

  763.                 x: tempX * transRate * scale,

  764.                 y: tempY * transRate * scale,

  765.               };

  766.               pointer.start.x = pointer.end.x;

  767.               pointer.start.y = pointer.end.y;

  768.             } else if (event.type === 'wheel') {

  769.               const wheelDelta = -event.deltaY;

  770.               const rate = 1.2;

  771.               scale = wheelDelta > 0 ? transformData.scale[0] * rate : transformData.scale[0] / rate;

  772. 

  773.               scale = Math.max(this.$parent.scaleRange[0], scale, minScale);

  774.               scale = Math.min(this.$parent.scaleRange[1], scale);

  775.               change = {

  776.                 x: (graphRect.x + padding / transRate - event.x) * transRate * (scale - transformData.scale[0]),

  777.                 y: (graphRect.bottom - padding / transRate - event.y) * transRate * (scale - transformData.scale[0]),

  778.               };

  779.             }

  780. 

  781.             graphTransform = {

  782.               x: transformData.translate[0] + change.x,

  783.               y: transformData.translate[1] + change.y,

  784.               k: scale,

  785.             };

  786. 

  787.             tempStr = `translate(${graphTransform.x},${graphTransform.y}) scale(${graphTransform.k})`;

  788.             graphDom.setAttribute('transform', tempStr);

  789.             event.stopPropagation();

  790.             event.preventDefault();

  791.           });

  792. 

  793.       const svg = d3.select('#tensor-graph svg');

  794.       svg.on('.zoom', null);

  795.       svg.call(zoom);

  796.       svg.on('dblclick.zoom', null);

  797.       svg.on('wheel.zoom', null);

  798. 

  799.       const graph0 = d3.select('#tensor-graph #graph0');

  800.       graph0.on('.zoom', null);

  801.       graph0.call(zoom);

  802.     },

  803.     setNodeData() {

  804.       window.getSelection().removeAllRanges();

  805.       const selectedNode = document.querySelector(`#tensor-graph g[id="${this.selectedNode.name}"]`);

  806.       d3.selectAll('#tensor-graph .node').classed('selected', false);

  807.       if (selectedNode) {

  808.         selectedNode.classList.add('selected');

  809.       }

  810.       d3.selectAll('#tensor-graph .edge').classed('selected', false);

  811.       this.selectedNode = JSON.parse(JSON.stringify(this.tensorGraphData[this.selectedNode.name]));

  812. 

  813.       if (this.selectedNode.type === 'slot') {

  814.         if (!(this.selectedNode.statistics && Object.keys(this.selectedNode.statistics).length)) {

  815.           this.statisticsKeys.forEach((key) => {

  816.             this.statistics[key] = '--';

  817.           });

  818.         } else {

  819.           this.statistics = JSON.parse(JSON.stringify(this.selectedNode.statistics));

  820.         }

  821.         this.statistics.name = JSON.parse(JSON.stringify(this.selectedNode.name));

  822. 

  823.         if (this.selectedNode.watch_points && this.selectedNode.watch_points.length) {

  824.           this.watchPoints = this.selectedNode.watch_points.map((val) => {

  825.             return {

  826.               id: val.id,

  827.               condition: val.watch_condition.id,

  828.               params: val.watch_condition.params || [],

  829.               selected: false,

  830.             };

  831.           });

  832.           this.rightDataShow = true;

  833.         } else {

  834.           this.rightDataShow = false;

  835.         }

  836.       } else {

  837.         this.statisticsKeys.forEach((key) => {

  838.           this.statistics[key] = '--';

  839.         });

  840.         this.rightDataShow = false;

  841.         this.highLightEdges();

  842.       }

  843.       this.$forceUpdate();

  844.     },

  845.     highLightEdges() {

  846.       const edges = [];

  847.       const input = this.selectedNode.input || {};

  848.       const inputKeys = Object.keys(input);

  849.       if (inputKeys.length) {

  850.         inputKeys.forEach((key) => {

  851.           const mapping = input[key].slot_mapping;

  852.           if (mapping && mapping.length) {

  853.             mapping.forEach((map) => {

  854.               if (map && map.length) {

  855.                 edges.push(`${key}:${map[0]}->outputOf${key}_slots`);

  856.                 edges.push(`outputOf${key}_slots->${this.selectedNode.name}`);

  857.               }

  858.             });

  859.           }

  860.         });

  861.       }

  862. 

  863.       const slots = this.selectedNode.slots || [];

  864.       if (slots.length) {

  865.         edges.push(`${this.selectedNode.name}->inputOf${this.selectedNode.name}_slots`);

  866.         slots.forEach((slot) => {

  867.           edges.push(`inputOf${this.selectedNode.name}_slots->${this.selectedNode.name}:${slot.slot}`);

  868.         });

  869.       }

  870. 

  871.       edges.forEach((edge) => {

  872.         d3.select(`#tensor-graph g[id="${edge}"]`).classed('selected', true);

  873.       });

  874.     },

  875.     resetTensor() {

  876.       const svg = document.querySelector('#tensor-graph svg');

  877.       if (svg) {

  878.         svg.remove();

  879.       }

  880. 

  881.       const grideTable = this.$refs.tensorValue;

  882.       if (grideTable) {

  883.         grideTable.updateGridData(true, [], {}, '[0,0,:,:]');

  884.       }

  885. 

  886.       this.tensorGraphData = {};

  887.       this.init();

  888.     },

  889.     closeTensor() {

  890.       this.$emit('close', this.selectedNode.name, this.curRowObj.graph_name);

  891.     },

  892.     /**

  893.      * Collaspe btn click function

  894.      */

  895.     collapseBtnClick() {

  896.       this.leftShow = !this.leftShow;

  897.       setTimeout(() => {

  898.         this.resizeCallback();

  899.       }, 500);

  900.     },

  901.     /**

  902.      * Resize callback function

  903.      */

  904.     resizeCallback() {

  905.       this.initZooming();

  906.       if (this.$refs.tensorValue) {

  907.         this.$refs.tensorValue.resizeView();

  908.       }

  909.     },

  910.     /**

  911.      * Anti-shake

  912.      * @param { Function } fn callback function

  913.      * @param { Number } delay delay time

  914.      * @return { Function }

  915.      */

  916.     debounce(fn, delay) {

  917.       let timer = null;

  918.       return function() {

  919.         if (timer) {

  920.           clearTimeout(timer);

  921.         }

  922.         timer = setTimeout(fn, delay);

  923.       };

  924.     },

  925.     toleranceInputChange() {

  926.       this.toleranceInput = this.tolerance;

  927.     },

  928.     toleranceValueChange(val) {

  929.       val = val.replace(/[^0-9]+/g, '');

  930.       if (Number(val) === 0) {

  931.         this.toleranceInput = 0;

  932.         this.tolerance = 0;

  933.       }

  934.       if (Number(val) < 0) {

  935.         this.tolerance = 0;

  936.         this.toleranceInput = 0;

  937.       }

  938.       if (Number(val) > 0) {

  939.         if (Number(val) > 100) {

  940.           this.tolerance = 100;

  941.           this.toleranceInput = 100;

  942.         } else {

  943.           this.tolerance = Number(val);

  944.           this.toleranceInput = Number(val);

  945.         }

  946.       }

  947.     },

  948.     formatTolenrance(value) {

  949.       return `${value}%`;

  950.     },

  951.     /**

  952.      * Tabs change

  953.      * @param {String} gridType tab type

  954.      */

  955.     tabChange(gridType) {

  956.       this.gridType = gridType;

  957.       if (this.gridType === 'compare') {

  958.         this.tensorComparisons(this.curRowObj, this.dims);

  959.       } else {

  960.         this.viewValueDetail(this.curRowObj, this.dims);

  961.       }

  962.     },

  963.     /**

  964.      * Query tensor Comparison data

  965.      * @param { Object } row current clickd tensor value data

  966.      * @param { Object } dims dims

  967.      */

  968.     tensorComparisons(row, dims) {

  969.       const shape = dims

  970.         ? dims

  971.         : JSON.stringify(

  972.             JSON.parse(row.shape)

  973.                 .map((val, index) => {

  974.                 // The default parameter format of shape is that the last two digits are:. The front is all 0

  975.                   if (index < 2) {

  976.                     return ':';

  977.                   } else {

  978.                     return 0;

  979.                   }

  980.                 })

  981.                 .reverse(),

  982.         ).replace(/"/g, '');

  983.       const params = {

  984.         name: row.name,

  985.         detail: 'data',

  986.         shape,

  987.         tolerance: this.tolerance / 100,

  988.         graph_name: row.graph_name,

  989.       };

  990.       const loadingInstance = this.$loading(this.loadingOption);

  991.       RequestService.tensorComparisons(params).then(

  992.           (res) => {

  993.             loadingInstance.close();

  994.             if (res && res.data && res.data.tensor_value) {

  995.               if (row.shape === '[]') {

  996.                 this.showFilterInput = false;

  997.               } else {

  998.                 this.showFilterInput = true;

  999.               }

  1000.               const tensorValue = res.data.tensor_value;

  1001.               const statistics = tensorValue.statistics || {};

  1002.               this.statisticsArr = [

  1003.                 tensorValue.curr_step_statistics || {},

  1004.                 tensorValue.prev_step_statistics || {},

  1005.                 tensorValue.statistics || {},

  1006.               ];

  1007.               if (tensorValue.diff === 'Too large to show.') {

  1008.                 this.tensorValue = [];

  1009.                 this.$nextTick(() => {

  1010.                   this.$refs.tensorValue.showRequestErrorMessage(

  1011.                       this.$t('debugger.largeDataTip'),

  1012.                       JSON.parse(row.shape),

  1013.                       shape,

  1014.                       true,

  1015.                   );

  1016.                 });

  1017.                 return;

  1018.               }

  1019.               this.tensorValue = tensorValue.diff;

  1020.               if (this.tensorValue && this.tensorValue instanceof Array && !(this.tensorValue[0] instanceof Array)) {

  1021.                 this.tensorValue = [this.tensorValue];

  1022.               }

  1023. 

  1024.               this.$nextTick(() => {

  1025.                 this.$refs.tensorValue.updateGridData(this.tensorValue, JSON.parse(row.shape), statistics, shape);

  1026.               });

  1027.             }

  1028.           },

  1029.           (err) => {

  1030.             loadingInstance.close();

  1031.           },

  1032.       );

  1033.     },

  1034.     /**

  1035.      * Query tensor value or tensor comparison

  1036.      * @param {Object} data tensor value data

  1037.      */

  1038.     tensorFilterChange(data) {

  1039.       this.dims = `[${data.toString()}]`;

  1040.       if (this.gridType === 'compare') {

  1041.         this.tensorComparisons(this.curRowObj, this.dims);

  1042.       } else {

  1043.         this.viewValueDetail(this.curRowObj, this.dims);

  1044.       }

  1045.     },

  1046.     /**

  1047.      * Query tensor value data

  1048.      * @param {Object} row current row data

  1049.      * @param { String } dims

  1050.      */

  1051.     viewValueDetail(row, dims) {

  1052.       const shape = dims

  1053.         ? dims

  1054.         : JSON.stringify(

  1055.             JSON.parse(row.shape)

  1056.                 .map((val, index) => {

  1057.                 // The default parameter format of shape is that the last two digits are:. The front is all 0

  1058.                   if (index < 2) {

  1059.                     return ':';

  1060.                   } else {

  1061.                     return 0;

  1062.                   }

  1063.                 })

  1064.                 .reverse(),

  1065.         ).replace(/"/g, '');

  1066.       const params = {

  1067.         name: row.name,

  1068.         detail: 'data',

  1069.         shape,

  1070.         graph_name: row.graph_name,

  1071.         prev: this.gridType === 'preStep' ? true : false,

  1072.       };

  1073.       const loadingInstance = this.$loading(this.loadingOption);

  1074.       RequestService.tensors(params).then(

  1075.           (res) => {

  1076.             loadingInstance.close();

  1077.             if (row.shape === '[]') {

  1078.               this.showFilterInput = false;

  1079.             } else {

  1080.               this.showFilterInput = true;

  1081.             }

  1082.             if (res.data.tensor_value) {

  1083.               let value = res.data.tensor_value.value;

  1084.               const statistics = res.data.tensor_value.statistics || {};

  1085.               this.statisticsArr = [statistics];

  1086.               if (value === 'Too large to show.') {

  1087.                 this.tensorValue = [];

  1088.                 this.$nextTick(() => {

  1089.                   this.$refs.tensorValue.showRequestErrorMessage(

  1090.                       this.$t('debugger.largeDataTip'),

  1091.                       JSON.parse(row.shape),

  1092.                       shape,

  1093.                       true,

  1094.                   );

  1095.                 });

  1096.                 return;

  1097.               }

  1098.               if (value === null) {

  1099.                 value = 'null';

  1100.               }

  1101.               this.tensorValue = value instanceof Array ? value : [value];

  1102.               this.$nextTick(() => {

  1103.                 this.$refs.tensorValue.updateGridData(this.tensorValue, JSON.parse(row.shape), statistics, shape);

  1104.               });

  1105.             }

  1106.           },

  1107.           (err) => {

  1108.             loadingInstance.close();

  1109.             this.$parent.showErrorMsg(err);

  1110.           },

  1111.       );

  1112.     },

  1113.   },

  1114.   destroyed() {

  1115.     window.removeEventListener('resize', this.callbackFun);

  1116.   },

  1117. };

  1118. </script>

  1119. <style lang="scss">

  1120. .deb-tensor-wrap {

  1121.   height: 100%;

  1122.   background-color: white;

  1123.   position: relative;

  1124.   overflow: hidden;

  1125.   & > div {

  1126.     float: left;

  1127.     height: 100%;

  1128.   }

  1129.   .deb-tensor-left {

  1130.     width: 400px;

  1131.     padding-right: 25px;

  1132.     height: 100%;

  1133.     background-color: white;

  1134.     position: relative;

  1135.     transition: width 0.2s;

  1136.     -moz-transition: width 0.2s; /* Firefox 4 */

  1137.     -webkit-transition: width 0.2s; /* Safari and Chrome */

  1138.     -o-transition: width 0.2s; /* Opera */

  1139.     .left-content-title {

  1140.       padding-left: 15px;

  1141.       height: 50px;

  1142.       line-height: 50px;

  1143.       font-weight: bold;

  1144.     }

  1145.     .left-advice {

  1146.       overflow-y: auto;

  1147.       text-overflow: ellipsis;

  1148.       height: calc(100% - 50px);

  1149.     }

  1150.     .left-content-list {

  1151.       border-top: 1px solid #f2f2f2;

  1152.       padding-bottom: 10px;

  1153.       > div {

  1154.         padding-left: 15px;

  1155.       }

  1156.       .detection-judgment {

  1157.         height: 40px;

  1158.         line-height: 40px;

  1159.         font-weight: bold;

  1160.       }

  1161.       .hit-tip {

  1162.         padding: 10px 15px 0 15px;

  1163.         .el-icon-warning {

  1164.           font-size: 14px;

  1165.           color: #e6a23c;

  1166.           padding-right: 4px;

  1167.         }

  1168.       }

  1169.       .reason {

  1170.         display: flex;

  1171.         padding: 1px 15px;

  1172.         width: 100%;

  1173.       }

  1174.       .tensor-icon {

  1175.         width: 6px;

  1176.         height: 6px;

  1177.         border-radius: 3px;

  1178.       }

  1179.       .icon-secondary {

  1180.         background-color: #00a5a7;

  1181.         margin-top: 8px;

  1182.       }

  1183.       .tensor-content {

  1184.         padding-left: 6px;

  1185.         width: calc(100% - 12px);

  1186.       }

  1187.       .tensor-value {

  1188.         padding: 5px 2px;

  1189.         span {

  1190.           padding-right: 5px;

  1191.         }

  1192.       }

  1193.       .tensor-advice {

  1194.         width: 344px;

  1195.         background-color: #f5f7fa;

  1196.         margin-left: 15px;

  1197.         margin-top: 10px;

  1198.         padding: 10px;

  1199.         span {

  1200.           font-weight: bold;

  1201.         }

  1202.       }

  1203.       .advice-list-title {

  1204.         padding: 0px;

  1205.         padding-top: 10px;

  1206.         padding-left: 10px;

  1207.         .advice-list {

  1208.           padding-top: 5px;

  1209.         }

  1210.         .advice-icon {

  1211.           width: 6px;

  1212.           height: 6px;

  1213.           border-radius: 3px;

  1214.           background-color: #00a5a7;

  1215.           display: inline-block;

  1216.         }

  1217.         .advice-content {

  1218.           display: inline-block;

  1219.           padding: 0px 12px;

  1220.           height: 25px;

  1221.           line-height: 25px;

  1222.         }

  1223.       }

  1224.     }

  1225.     .leftNoData {

  1226.       text-align: center;

  1227.       border-top: 1px solid #f2f2f2;

  1228.       padding-top: 15px;

  1229.     }

  1230.     .collapse-btn {

  1231.       position: absolute;

  1232.       right: 2px;

  1233.       width: 31px;

  1234.       height: 100px;

  1235.       top: 50%;

  1236.       margin-top: -50px;

  1237.       cursor: pointer;

  1238.       line-height: 86px;

  1239.       z-index: 1;

  1240.       text-align: center;

  1241.       background-image: url('../assets/images/collapse-left.svg');

  1242.     }

  1243.     .collapse-btn.collapse {

  1244.       background-image: url('../assets/images/collapse-right.svg');

  1245.     }

  1246.     .deb-tensor-left-content {

  1247.       height: 100%;

  1248.       border-right: 1px solid #ebeef5;

  1249.       overflow: auto;

  1250.     }

  1251.   }

  1252.   .deb-tensor-left.collapse {

  1253.     width: 0px;

  1254.   }

  1255.   .deb-tensor-right {

  1256.     width: calc(100% - 400px);

  1257.     height: 100%;

  1258.     transition: width 0.2s;

  1259.     -moz-transition: width 0.2s; /* Firefox 4 */

  1260.     -webkit-transition: width 0.2s; /* Safari and Chrome */

  1261.     -o-transition: width 0.2s; /* Opera */

  1262.     display: flex;

  1263.     flex-direction: column;

  1264.     .deb-con-title {

  1265.       height: 40px;

  1266.       line-height: 40px;

  1267.       flex-shrink: 0;

  1268.       position: relative;

  1269. 

  1270.       .deb-con-title-left {

  1271.         position: absolute;

  1272.         left: 0;

  1273.         font-weight: bold;

  1274.         font-size: 16px;

  1275.         width: calc(100% - 100px);

  1276.         white-space: nowrap;

  1277.         overflow: hidden;

  1278.         text-overflow: ellipsis;

  1279.       }

  1280.       .deb-con-title-right {

  1281.         position: absolute;

  1282.         right: 32px;

  1283. 

  1284.         .close-btn {

  1285.           width: 20px;

  1286.           height: 20px;

  1287.           vertical-align: -3px;

  1288.           cursor: pointer;

  1289.           display: inline-block;

  1290.           line-height: 20px;

  1291.           margin-left: 32px;

  1292.         }

  1293.       }

  1294.     }

  1295.     .deb-compare-detail {

  1296.       flex-shrink: 0;

  1297.       padding-right: 32px;

  1298.       span {

  1299.         margin-right: 10px;

  1300.         padding-left: 10px;

  1301.         border-left: 1px solid #e4e7ec;

  1302.       }

  1303.       label {

  1304.         display: inline-block;

  1305.         min-width: 123px;

  1306.         span {

  1307.           border-left: none;

  1308.         }

  1309.       }

  1310.     }

  1311.     .deb-con-slide {

  1312.       height: 40px;

  1313.       line-height: 40px;

  1314.       flex-shrink: 0;

  1315.       position: relative;

  1316.       margin: 5px 0;

  1317. 

  1318.       .deb-con-slide-left {

  1319.         float: left;

  1320.         display: flex;

  1321.         margin-left: 10px;

  1322. 

  1323.         .deb-slide-title {

  1324.           margin-right: 20px;

  1325.         }

  1326. 

  1327.         .deb-slide-width {

  1328.           width: 160px;

  1329.         }

  1330.         .deb-slide-input {

  1331.           width: 60px;

  1332.           margin-left: 10px;

  1333.         }

  1334.       }

  1335.       .deb-con-slide-right {

  1336.         float: left;

  1337. 

  1338.         .custom-btn {

  1339.           border: 1px solid #00a5a7;

  1340.           border-radius: 2px;

  1341.         }

  1342.         .green {

  1343.           background-color: #00a5a7;

  1344.           color: white;

  1345.         }

  1346.         .white {

  1347.           background-color: white;

  1348.           color: #00a5a7;

  1349.         }

  1350.       }

  1351.       .deb-con-slide-middle {

  1352.         position: absolute;

  1353.         right: 32px;

  1354.         width: 150px;

  1355.         padding: 10px 0;

  1356.         line-height: 15px;

  1357.         .grident {

  1358.           display: inline-block;

  1359.           width: calc(100% - 70px);

  1360.           background-image: linear-gradient(to right, rgba(227, 125, 41), #fff, rgba(0, 165, 167));

  1361.           text-align: center;

  1362.           color: transparent;

  1363.           border-radius: 10px;

  1364.         }

  1365.       }

  1366.     }

  1367. 

  1368.     .deb-con-table {

  1369.       flex: 1;

  1370.       flex-grow: 1;

  1371.       flex-shrink: 1;

  1372.       padding-right: 32px;

  1373.       flex-shrink: 0;

  1374.       .deb-compare-wrap {

  1375.         height: 100%;

  1376.       }

  1377.     }

  1378.     .deb-graph-container {

  1379.       flex: 1;

  1380.       flex-grow: 1;

  1381.       flex-shrink: 1;

  1382.       padding: 10px 32px 10px 0px;

  1383.       position: relative;

  1384.       display: flex;

  1385.       overflow: hidden;

  1386.       .graph-title {

  1387.         position: absolute;

  1388.         font-weight: bold;

  1389.         font-size: 14px;

  1390.         .tip {

  1391.           font-size: 16px;

  1392.           margin-left: 10px;

  1393.           cursor: pointer;

  1394.         }

  1395.       }

  1396.       .nodata {

  1397.         width: calc(100% - 375px);

  1398.         text-align: center;

  1399.         margin-top: 120px;

  1400.       }

  1401.       .deb-graph {

  1402.         width: calc(100% - 375px);

  1403.         .edge {

  1404.           path {

  1405.             stroke: rgb(120, 120, 120);

  1406.           }

  1407.           polygon {

  1408.             stroke: rgb(120, 120, 120);

  1409.             fill: rgb(120, 120, 120);

  1410.           }

  1411.         }

  1412.         .node.operator > ellipse {

  1413.           stroke: #e3aa00;

  1414.           fill: #ffe794;

  1415.         }

  1416.         .node.slot {

  1417.           & > polygon {

  1418.             stroke: #4ea6e6;

  1419.             fill: #c7f5f4;

  1420.           }

  1421.           &.current {

  1422.             & > polygon {

  1423.               stroke: #4ea6e6;

  1424.               fill: #00a5a7;

  1425.             }

  1426.             text {

  1427.               fill: white;

  1428.             }

  1429.           }

  1430.         }

  1431.         .node {

  1432.           &:hover {

  1433.             cursor: pointer;

  1434.             & > polygon,

  1435.             & > ellipse {

  1436.               stroke-width: 2px;

  1437.             }

  1438.           }

  1439.         }

  1440. 

  1441.         .cluster > polygon {

  1442.           stroke: #e4e7ed;

  1443.           fill: #e9fcf9;

  1444.         }

  1445.         .node.selected {

  1446.           polygon,

  1447.           ellipse {

  1448.             stroke: red !important;

  1449.             stroke-width: 2px;

  1450.           }

  1451.         }

  1452.         .edge.selected {

  1453.           path {

  1454.             stroke: red;

  1455.           }

  1456.           polygon {

  1457.             stroke: red;

  1458.             fill: red;

  1459.           }

  1460.         }

  1461.       }

  1462.       .deb-tensor-info {

  1463.         width: 375px;

  1464.         height: 100%;

  1465.         border-left: solid 2px #e4e7ed;

  1466.         padding-left: 20px;

  1467.         .tensor {

  1468.           .tensor-title {

  1469.             font-size: 14px;

  1470.             font-weight: bold;

  1471.             padding-bottom: 8px;

  1472.           }

  1473.           .tensor-detail {

  1474.             overflow: auto;

  1475.             height: calc(100% - 30px);

  1476.             span {

  1477.               display: inline-block;

  1478.               padding: 5px 0px;

  1479.               min-width: 50%;

  1480.               word-break: break-all;

  1481.             }

  1482.             ul {

  1483.               li {

  1484.                 padding: 5px 10px;

  1485.                 & > div {

  1486.                   display: inline-block;

  1487.                   vertical-align: top;

  1488.                   word-break: break-all;

  1489.                   line-height: 16px;

  1490.                 }

  1491.                 .attr-key {

  1492.                   width: 30%;

  1493.                 }

  1494.                 .attr-value {

  1495.                   width: 70%;

  1496.                   padding-left: 10px;

  1497.                 }

  1498.                 &:hover {

  1499.                   background-color: #e9fcf9;

  1500.                 }

  1501.               }

  1502.             }

  1503.           }

  1504.         }

  1505.         .tensor {

  1506.           height: 50%;

  1507.           overflow: auto;

  1508.         }

  1509.         .watch-point {

  1510.           height: 50%;

  1511.           .point-list {

  1512.             height: calc(100% - 35px);

  1513.             overflow: auto;

  1514.             text-overflow: ellipsis;

  1515.           }

  1516.           .watchPoint-title {

  1517.             padding: 8px 0;

  1518.             font-size: 14px;

  1519.             font-weight: bold;

  1520.           }

  1521.           .watch-judgment {

  1522.             padding: 5px 0;

  1523.           }

  1524.         }

  1525.       }

  1526.     }

  1527.   }

  1528.   .deb-tensor-right.collapse {

  1529.     width: calc(100% - 25px);

  1530.   }

  1531. }

  1532. .legend-tip {

  1533.   .legend {

  1534.     margin-top: 10px;

  1535.     .item {

  1536.       display: inline-block;

  1537.       width: 50%;

  1538.       img {

  1539.         vertical-align: sub;

  1540.         height: 20px;

  1541.         margin-left: 10px;

  1542.       }

  1543.     }

  1544.   }

  1545. }

  1546. </style>