Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 4
Fork 2
M
mindinsight
You need to sign in or sign up before continuing.
提交 d63da799 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

!112 add user guild for graph on ui 

Merge pull request !112 from 潘慧/master_ph
上级 4a5f25c0 876bf666
隐藏空白更改
内联 并排
Showing with 501 addition and 67 deletion
mindinsight/ui/src/assets/images/graph-stepimg1.svg 0 → 100644
浏览文件 @ d63da799
<?xml version="1.0" encoding="UTF-8"?>
<svg width="296px" height="91px" viewBox="0 0 296 91" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>编组 24</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="264.132893" height="69" rx="2"></rect>
</defs>
<g id="引导页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-24">
<g id="编组-20">
<g id="编组-12">
<rect id="矩形" fill-opacity="0.8" fill="#EDF3FF" fill-rule="nonzero" opacity="0.513020833" x="0" y="0" width="296" height="91"></rect>
<g id="编组-15" transform="translate(17.000000, 16.000000)">
<g id="编组-9">
<g id="矩形">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#DDE6FF" xlink:href="#path-1"></use>
<g id="编组-17" mask="url(#mask-2)">
<g transform="translate(10.329219, 9.000000)"></g>
</g>
</g>
<g id="编组-8" transform="translate(10.329219, 8.000000)">
<g id="编组-11">
<rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="134.279851" height="57" rx="1"></rect>
<g id="编组-2" transform="translate(29.512055, 7.000000)">
<path d="M35.4144661,15 C53.5759033,13.5145556 64.3969902,10.847889 67.8777268,7" id="路径-3" stroke="#E1E9FF"></path>
<path d="M35.4144661,15 C38.5024271,18.9230769 43.4211029,21.9230769 50.1704937,24" id="路径-5" stroke="#E1E9FF"></path>
<path d="M35.4144661,15 C28.6977869,21 23.7791111,24 20.6584386,24" id="路径-7" stroke="#E1E9FF"></path>
<path d="M50.1704937,24 C64.4508747,25 72.8126236,25.25 75.2557405,24.75" id="路径-6" stroke="#E1E9FF"></path>
<path d="M35.4144661,15 C17.2492874,13.8319275 6.92006809,12.1652608 4.42680827,10" id="路径-4" stroke="#E1E9FF"></path>
<path d="M4.42680827,10 C16.0581322,4.03277918 22.9442784,1.40378251 25.0852468,2.11301" id="路径-8" stroke="#E1E9FF"></path>
<ellipse id="椭圆形" fill="#AEBCEB" fill-rule="nonzero" cx="36.1522675" cy="14.5" rx="6.6402124" ry="2.5"></ellipse>
<ellipse id="椭圆形备份" fill="#AEBCEB" fill-rule="nonzero" cx="70.0911309" cy="5" rx="5.16460964" ry="2"></ellipse>
<ellipse id="椭圆形备份-6" fill="#AEBCEB" fill-rule="nonzero" cx="25.8230482" cy="2" rx="5.16460964" ry="2"></ellipse>
<ellipse id="椭圆形备份-3" fill="#AEBCEB" fill-rule="nonzero" cx="50.9082951" cy="24" rx="5.16460964" ry="2"></ellipse>
<ellipse id="椭圆形备份-5" fill="#AEBCEB" fill-rule="nonzero" cx="19.9206372" cy="24" rx="5.16460964" ry="2"></ellipse>
<ellipse id="椭圆形备份-4" fill="#AEBCEB" fill-rule="nonzero" cx="75.2557405" cy="25" rx="2.95120551" ry="1"></ellipse>
<ellipse id="椭圆形备份-2" fill="#AEBCEB" fill-rule="nonzero" cx="5.16460964" cy="10" rx="5.16460964" ry="2"></ellipse>
<line x1="35.4144661" y1="34" x2="35.4144661" y2="38" id="路径-9" stroke="#E1E9FF"></line>
<polygon id="矩形" fill="#E1E9FF" points="30.9876579 36 39.8412744 36 35.4144661 39"></polygon>
</g>
<g id="编组-7" transform="translate(7.378014, 31.000000)">
<g id="编组-10" transform="translate(28.123253, 4.235294)"></g>
<g id="主机-(2)"></g>
</g>
</g>
</g>
<g id="编组-11" transform="translate(78.206946, 39.000000)">
<g id="编组-7">
<g id="编组-10" transform="translate(26.647650, 4.294118)"></g>
<g id="主机-(2)"></g>
</g>
</g>
</g>
</g>
<path d="M27.5,20 L38.5,20 C38.7761424,20 39,20.2238576 39,20.5 C39,20.7761424 38.7761424,21 38.5,21 L27.5,21 C27.2238576,21 27,20.7761424 27,20.5 C27,20.2238576 27.2238576,20 27.5,20 Z" id="矩形备份-29复制备份" fill="#6882DA" fill-rule="nonzero"></path>
<rect id="矩形备份" fill="#E1E9FF" fill-rule="nonzero" x="104" y="41" width="9" height="1" rx="0.5"></rect>
<rect id="矩形备份-3" fill="#E1E9FF" fill-rule="nonzero" x="86" y="53" width="9" height="1" rx="0.5"></rect>
<rect id="矩形备份-5" fill="#E1E9FF" fill-rule="nonzero" x="101" y="51" width="9" height="1" rx="0.5"></rect>
<rect id="矩形备份-2" fill="#E1E9FF" fill-rule="nonzero" x="72" y="41" width="10" height="1" rx="0.5"></rect>
<polygon id="Path" fill="#6882DA" fill-rule="nonzero" points="240.749138 45.4941667 236.64241 47.85025 236.027576 49 244 45.4900833 236 42 236.625048 43.148"></polygon>
<path d="M196.558106,44 C194.592539,44 193,44.8954984 193,46 L193.97274,46 C194.021521,45.181672 195.10043,44.5450161 196.560976,44.5450161 C197.654232,44.5450161 198.747489,44.9212219 199.074605,45.6366559 L198.176471,45.6366559 L198.176471,46 L200.116212,46 L201,45.0916399 L200.440459,44.9099678 L199.946915,45.3890675 C199.487805,44.5836013 198.144907,44 196.558106,44 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M196.439024,48.4549839 C195.345768,48.4549839 194.252511,48.0787781 193.925395,47.3633441 L194.823529,47.3633441 L194.823529,47 L192.883788,47 L192,47.9083601 L192.559541,48.0900322 L193.053085,47.6109325 C193.512195,48.4163987 194.855093,49 196.441894,49 C198.407461,49 200,48.1045016 200,47 L199.02439,47 C198.97561,47.818328 197.8967,48.4549839 196.439024,48.4549839 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M2,0 L294,0 C295.104569,-2.02906125e-16 296,0.8954305 296,2 L296,10 L296,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="矩形" fill="#F0F4FF" fill-rule="nonzero" opacity="0.7"></path>
</g>
</g>
<rect id="矩形" fill="#6882DA" fill-rule="nonzero" x="85" y="70" width="17" height="7" rx="2"></rect>
<g id="编组-19" transform="translate(190.000000, 33.000000)">
<g id="编组-18" transform="translate(20.959493, 5.151786)"></g>
<g id="编组-16" transform="translate(0.429624, 6.276786)"></g>
<g id="地球-(2)" transform="translate(56.219313, 0.964286)"></g>
</g>
<g id="编组-23" transform="translate(180.000000, 24.000000)">
<rect id="矩形备份-12" fill="#FFFFFF" fill-rule="nonzero" x="0" y="0" width="89.5676047" height="27" rx="1"></rect>
<rect id="矩形备份-4" stroke="#E1E9FF" x="4.85483871" y="3.5" width="80.2903226" height="20"></rect>
<g id="编组-22" transform="translate(0.000000, 29.000000)" fill-rule="nonzero">
<path d="M1,3.63797881e-12 L88.5676047,3.63797881e-12 C89.1198894,3.63002892e-12 89.5676047,0.44771525 89.5676047,1 L89.5676047,27 C89.5676047,27.5522847 89.1198894,28 88.5676047,28 L1,28 C0.44771525,28 6.76353751e-17,27.5522847 0,27 L0,1 C-6.76353751e-17,0.44771525 0.44771525,3.63808026e-12 1,3.63797881e-12 Z" id="矩形备份-28" fill="#FFFFFF"></path>
<rect id="矩形备份-29" fill="#E1E9FF" x="4.63280714" y="10" width="69.4921071" height="1" rx="0.5"></rect>
<rect id="矩形备份-32" fill="#E1E9FF" x="4.63280714" y="23" width="69.4921071" height="1" rx="0.5"></rect>
<rect id="矩形备份-33" fill="#E1E9FF" x="4.63280714" y="7" width="43.5483871" height="1" rx="0.5"></rect>
<rect id="矩形备份-34" fill="#E1E9FF" x="4.63280714" y="20" width="33.3870968" height="1" rx="0.5"></rect>
<rect id="矩形备份-30" fill="#6882DA" x="4.35483871" y="3" width="10.1612903" height="1" rx="0.5"></rect>
<rect id="矩形备份-31" fill="#6882DA" x="4.35483871" y="16" width="10.1612903" height="1" rx="0.5"></rect>
</g>
</g>
<rect id="矩形" stroke="#E1E9FF" x="37.5" y="28.5" width="116" height="36"></rect>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/assets/images/graph-stepimg2.svg 0 → 100644
浏览文件 @ d63da799
<?xml version="1.0" encoding="UTF-8"?>
<svg width="301px" height="95px" viewBox="0 0 301 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>编组 10</title>
<desc>Created with Sketch.</desc>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-10">
<g id="编组-9" transform="translate(3.000000, 3.000000)">
<g id="编组-8" fill="#EDF3FF" fill-opacity="0.8" fill-rule="nonzero" opacity="0.504191">
<g id="编组-5">
<path d="M5,0 L290,0 C292.761424,-5.07265313e-16 295,2.23857625 295,5 L295,84 C295,86.7614237 292.761424,89 290,89 L5,89 C2.23857625,89 3.38176876e-16,86.7614237 0,84 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z" id="矩形"></path>
</g>
</g>
<polygon id="矩形" fill="#E6ECFB" fill-rule="nonzero" points="14 10 282 10 282 63 14 63"></polygon>
<polygon id="路径-3" stroke="#FFFFFF" opacity="0.4" points="56.5035461 35.5 107.5 21.5 149.652482 36.5 108.5 51.5"></polygon>
<polyline id="路径-4" stroke="#FFFFFF" opacity="0.4" points="106.12766 35.5 146 21.5 192.29078 21.5 239.503546 35.5 150 51.5"></polyline>
<line x1="106.12766" y1="35.5" x2="108.5" y2="51.5" id="路径-6" stroke="#FFFFFF" opacity="0.4"></line>
<polyline id="路径-5" stroke="#FFFFFF" opacity="0.4" points="146 21.5 194 34.5 149.652482 37 150 51.5"></polyline>
<rect id="矩形" fill="#6882DA" fill-rule="nonzero" x="18" y="14" width="22.8085106" height="3" rx="1.5"></rect>
<rect id="矩形-copy-16" fill="#A6B6EA" fill-rule="nonzero" x="143" y="49" width="13.3049645" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17" fill="#A6B6EA" fill-rule="nonzero" x="182.787234" y="19" width="19.0070922" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17备份" fill="#A6B6EA" fill-rule="nonzero" x="230" y="33" width="19.0070922" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17备份-2" fill="#A6B6EA" fill-rule="nonzero" x="47" y="33" width="19.0070922" height="5" rx="1.5"></rect>
<ellipse id="椭圆形" fill="#DBDFE3" fill-rule="nonzero" cx="107.5" cy="21.5" rx="11.5" ry="2.5"></ellipse>
<ellipse id="椭圆形" fill="#DBDFE3" fill-rule="nonzero" cx="146" cy="21.5" rx="7" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-2" fill="#DBDFE3" fill-rule="nonzero" cx="150" cy="36.5" rx="5" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-3" fill="#DBDFE3" fill-rule="nonzero" cx="194" cy="34.5" rx="7" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-4" fill="#DBDFE3" fill-rule="nonzero" cx="108.5" cy="51.5" rx="8.5" ry="2.5"></ellipse>
<rect id="矩形" fill="#A6B6EA" fill-rule="nonzero" x="99" y="33" width="14.2553191" height="5" rx="1.5"></rect>
<rect id="矩形" fill="#6882DA" fill-rule="nonzero" x="138" y="70" width="20" height="8" rx="2"></rect>
<path d="M141.719865,84.9906037 C141.719865,84.9906037 141.68235,85.0033656 143.1872,84.9622439 C144.066328,85.5854495 145.346088,85.8328884 145.346088,85.8328883 L147.119914,85.8328883 L148.831452,85.8421053 C149.011241,85.8392693 149.191738,85.7740419 149.329058,85.637206 C149.505962,85.4608373 149.573882,85.202469 149.506631,84.9617064 C149.439381,84.7209439 149.247465,84.5353916 149.004871,84.4765831 L149.014072,84.3936309 L149.165548,84.3943399 C149.351381,84.3935514 149.529604,84.3203141 149.662446,84.1901496 C149.792106,84.0603832 149.86484,83.8842419 149.864574,83.7006494 C149.864308,83.517057 149.791066,83.3411276 149.661031,83.2117381 C149.533706,83.08411 149.361928,83.0109147 149.181829,83.0075479 L149.16838,82.9720982 L149.283756,82.9728072 C149.463546,82.9706802 149.644043,82.9047438 149.781362,82.768617 C149.911022,82.6388505 149.983755,82.4627092 149.98349,82.2791168 C149.983224,82.0955244 149.909981,81.919595 149.779946,81.7902055 C149.657068,81.6672734 149.492659,81.594926 149.319148,81.5874333 C150.131031,81.5860153 152.044301,81.6441528 152.17171,81.6611686 C152.334512,81.6824384 152.941124,81.6377718 152.996334,81.0287461 C153.052253,80.4204294 152.449888,80.2183662 152.449888,80.2183662 L146.561435,80.0595516 L146.589748,79.9751813 C146.589748,79.9751813 147.158845,79.6993827 147.882249,78.9542302 C148.605653,78.2090777 148.521421,77.7418507 148.200774,77.2313752 C147.880126,76.7208996 147.458966,77.2143593 147.458966,77.2143593 C147.359869,77.3823909 146.402173,78.63022 145.256901,78.8400822 C143.945996,78.747913 142.878586,80.4211384 142.878586,80.4211384 L141.918058,80.3764718 C140.98372,80.4048316 141.129533,81.2421533 141.129533,81.2421533 L141,84.2128374 C141.001416,84.9778418 141.720573,84.9906037 141.720573,84.9906037 L141.719865,84.9906037 Z" id="路径" stroke="#FFFFFF" stroke-width="0.4" fill="#6882DA" fill-rule="nonzero" transform="translate(147.000000, 81.421053) rotate(-90.000000) translate(-147.000000, -81.421053) "></path>
<circle id="椭圆形" stroke="#6882DA" fill="#FFFFFF" cx="161" cy="74" r="3"></circle>
<circle id="椭圆形备份" stroke="#6882DA" fill="#FFFFFF" cx="84" cy="59" r="3"></circle>
<path id="路径-160" d="M165.499272,71.2706701 L165.924019,72.175982 C164.945844,72.6349151 164.502521,73.1741352 164.500193,73.8262152 L164.505579,73.9581457 L163.509089,74.0418543 C163.409715,72.8588772 164.111079,71.921972 165.499272,71.2706701 Z M195.654104,70.7396547 L195.697633,71.7387069 C194.9301,71.7721483 194.130582,71.7877403 193.299048,71.7855039 L192.669394,71.7804841 L192.682548,70.7805706 C193.723525,70.7942645 194.714063,70.7806123 195.654104,70.7396547 Z M186.722647,70.4565857 C186.901067,70.4712473 187.080533,70.4862142 187.261053,70.5014871 C187.821569,70.548918 188.369925,70.5903392 188.907122,70.6258269 L189.704671,70.6746178 L189.648568,71.6730428 C188.84957,71.6281452 188.02676,71.5698552 187.176742,71.4979266 L186.907958,71.4753481 L186.907958,71.4753481 L186.640748,71.4532264 L186.722647,70.4565857 Z M201.503636,69.9843994 L201.740769,70.9558764 C200.97176,71.1435884 200.146646,71.2992996 199.265335,71.4231714 L198.729804,71.493675 L198.60775,70.5011516 C199.654854,70.3723857 200.620201,70.2000421 201.503636,69.9843994 Z M171.632559,70.0522186 L171.700587,71.0499021 C170.757662,71.1141961 169.904607,71.203974 169.141792,71.3190135 L168.767906,71.3786374 L168.601762,70.392536 C169.491201,70.2426778 170.501272,70.1293563 171.632559,70.0522186 Z M180.667594,70.0566803 C181.387913,70.0906965 182.13141,70.1314861 182.898091,70.1790478 L183.6725,70.2288669 L183.606065,71.2266576 C182.828644,71.1748953 182.074477,71.1298758 181.343573,71.0915979 L180.620423,71.0555671 L180.667594,70.0566803 Z M176.976364,69.9384354 L177.609788,69.9499074 L177.588483,70.9496804 C176.743249,70.9316683 175.937946,70.925186 175.172609,70.9302234 L174.6061,70.9361613 L174.591616,69.9362662 C175.346827,69.9253267 176.141731,69.9260531 176.976364,69.9384354 Z M209.178989,60.5303891 L210.315689,70.5282846 L206.294,69.058 L206.238972,69.0973776 C205.890585,69.3309818 205.515987,69.5490715 205.115275,69.7517478 L204.705862,69.9492901 L204.287811,69.0408665 C204.573994,68.9091669 204.845807,68.7701636 205.103291,68.623899 L201.862693,67.438486 L209.178989,60.5303891 Z" fill="#6882DA" fill-rule="nonzero"></path>
<path id="路径-160备份" d="M130.976369,67.1388051 L138.192659,74.1513046 L128.252885,75.7168375 L130.976369,67.1388051 Z M125.579371,70.2978157 C126.421595,70.4251451 127.224374,70.5546019 127.987732,70.6861954 L128.552859,70.7852913 L128.377238,71.7697491 C127.640766,71.6383669 126.864693,71.5090105 126.049044,71.3816891 L125.429887,71.2865799 L125.579371,70.2978157 Z M119.614622,69.5076916 C120.391754,69.5985298 121.145555,69.6906114 121.876029,69.7839379 L122.598728,69.8776795 L122.468154,70.869118 C121.756923,70.7754477 121.022307,70.6829941 120.264312,70.5917586 L119.498523,70.5009293 L119.614622,69.5076916 Z M113.637928,68.8772129 C114.323138,68.9426667 114.994465,69.008857 115.651912,69.0757839 L116.627671,69.176727 L116.523108,70.1712453 C115.801501,70.0953763 115.062298,70.0204282 114.3055,69.9464013 L113.542837,69.8726815 L113.637928,68.8772129 Z M107.650254,68.3402174 C108.238156,68.3955408 108.838018,68.4491045 109.449813,68.5009058 L110.053416,68.5523989 L110.053416,68.5523989 L110.645077,68.6037184 L110.557943,69.599915 C110.166728,69.5656969 109.772648,69.5317983 109.365468,69.4973425 C108.955536,69.4626331 108.550907,69.427134 108.15158,69.3908449 L107.556565,69.3358189 L107.650254,68.3402174 Z M101.673339,67.6617389 C102.38262,67.7584331 103.115995,67.8515993 103.873455,67.9412343 L104.638944,68.029692 L104.52682,69.0233862 C103.747671,68.9354703 102.992532,68.8439655 102.261397,68.7488685 L101.538262,68.652574 L101.673339,67.6617389 Z M95.7585116,66.6580187 C96.487657,66.8125986 97.2579822,66.9612358 98.0694521,67.1039094 L98.6857685,67.2097961 L98.5201967,68.1959938 C97.6772814,68.0544775 96.8753099,67.9067767 96.1142469,67.7528703 L95.5511196,67.6362766 L95.7585116,66.6580187 Z M90.1178348,65.0298547 C90.8088691,65.3115435 91.591029,65.5810383 92.4640208,65.8380009 L92.9080846,65.9654363 L92.6385904,66.9284383 C91.7054249,66.6672937 90.8624586,66.3919398 90.1093979,66.1020384 L89.7403583,65.9558738 L90.1178348,65.0298547 Z M85.2855065,61.4997669 L86.2855063,61.5002331 C86.2851763,62.2082898 86.6558153,62.8810165 87.4370798,63.5305362 L87.6246789,63.680019 L87.0171722,64.4743336 C85.8787222,63.6036257 85.2849903,62.6070563 85.2855065,61.4997669 Z" fill="#6882DA" fill-rule="nonzero"></path>
</g>
<rect id="矩形" x="0" y="0" width="301" height="95"></rect>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/assets/images/graph-stepimg3.svg 0 → 100644
浏览文件 @ d63da799
<?xml version="1.0" encoding="UTF-8"?>
<svg width="301px" height="95px" viewBox="0 0 301 95" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>编组 10</title>
<desc>Created with Sketch.</desc>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-10">
<g id="编组-9" transform="translate(3.000000, 3.000000)">
<g id="编组-8" fill="#EDF3FF" fill-opacity="0.8" fill-rule="nonzero" opacity="0.504191">
<g id="编组-5">
<path d="M5,0 L290,0 C292.761424,-5.07265313e-16 295,2.23857625 295,5 L295,84 C295,86.7614237 292.761424,89 290,89 L5,89 C2.23857625,89 3.38176876e-16,86.7614237 0,84 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z" id="矩形"></path>
</g>
</g>
<polygon id="矩形" fill="#E6ECFB" fill-rule="nonzero" points="14 10 282 10 282 63 14 63"></polygon>
<polygon id="路径-3" stroke="#6882DA" stroke-width="2" points="56.5035461 35.5 107.5 21.5 149.652482 36.5 108.5 51.5"></polygon>
<polyline id="路径-4" stroke="#A6B6EA" stroke-width="2" points="106.12766 35.5 146 21.5 192.29078 21.5 239.503546 35.5 150 51.5"></polyline>
<line x1="106.12766" y1="35.5" x2="108.5" y2="51.5" id="路径-6" stroke="#6882DA" stroke-width="2" stroke-dasharray="2,2"></line>
<path d="M146,21.5 L194,34.5 L149.652482,37 L150,51.5" id="路径-5" stroke="#6882DA" stroke-width="2" stroke-dasharray="2,2"></path>
<rect id="矩形" fill="#A6B6EA" fill-rule="nonzero" x="18" y="14" width="22.8085106" height="3" rx="1.5"></rect>
<rect id="矩形-copy-16" fill="#F7FAFF" fill-rule="nonzero" x="143" y="49" width="13.3049645" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17" fill="#F7FAFF" fill-rule="nonzero" x="182.787234" y="19" width="19.0070922" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17备份" fill="#F7FAFF" fill-rule="nonzero" x="230" y="33" width="19.0070922" height="5" rx="1.5"></rect>
<rect id="矩形-copy-17备份-2" fill="#F7FAFF" fill-rule="nonzero" x="47" y="33" width="19.0070922" height="5" rx="1.5"></rect>
<ellipse id="椭圆形" fill="#F7FAFF" fill-rule="nonzero" cx="107.5" cy="21.5" rx="11.5" ry="2.5"></ellipse>
<ellipse id="椭圆形" fill="#F7FAFF" fill-rule="nonzero" cx="146" cy="21.5" rx="7" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-2" fill="#F7FAFF" fill-rule="nonzero" cx="150" cy="36.5" rx="5" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-3" fill="#F7FAFF" fill-rule="nonzero" cx="194" cy="34.5" rx="7" ry="2.5"></ellipse>
<ellipse id="椭圆形备份-4" fill="#F7FAFF" fill-rule="nonzero" cx="108.5" cy="51.5" rx="8.5" ry="2.5"></ellipse>
<rect id="矩形" fill="#F7FAFF" fill-rule="nonzero" x="99" y="33" width="14.2553191" height="5" rx="1.5"></rect>
<rect id="矩形" fill="#A6B6EA" fill-rule="nonzero" x="138" y="70" width="20" height="8" rx="2"></rect>
<line x1="147.652482" y1="63" x2="147.652482" y2="68.5" id="路径-10" stroke="#6882DA" stroke-width="2"></line>
<polygon id="矩形" fill="#6882DA" points="145 67 150 67 147.5 70"></polygon>
</g>
<rect id="矩形" x="0" y="0" width="301" height="95"></rect>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/assets/images/guideIcon.svg 0 → 100644
浏览文件 @ d63da799
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>帮助指引</title>
<desc>Created with Sketch.</desc>
<g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="帮助指引">
<g id="分组-26复制">
<rect id="Rectangle-19" fill="#D2EBFD" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
<rect id="矩形" fill="#575D6C" x="3.5" y="4" width="5" height="1.5"></rect>
<rect id="矩形" fill="#575D6C" x="3.5" y="7" width="3" height="1.5"></rect>
<g id="分组-7" transform="translate(1.400000, 0.400000)" fill-rule="nonzero">
<path d="M2.59242652,13.9463889 C1.2140705,13.9463889 0.516594998,13.9463889 0.5,13.9463889 C0.223857625,13.9463889 0,13.7225313 0,13.4463889 L0,1.44638889 C0,1.17024651 0.223857625,0.946388889 0.5,0.946388889 L11.5,0.946388889 C11.7761424,0.946388889 12,1.17024651 12,1.44638889 C12,2.26883666 12,2.82983034 12,3.12936992" id="Rectangle-38" stroke="#575D6C" stroke-width="1.4" stroke-linecap="round"></path>
<path d="M4.86509791,6.02237173 C4.57543153,5.39028109 5.22732823,4.73841895 5.85940351,5.02811884 L10.8580374,7.3191493 C11.2392736,7.49388178 11.5450854,7.79970976 11.7197977,8.18095521 L14.0106749,13.1799545 C14.3003412,13.8120451 13.6484445,14.4639072 13.0163693,14.1742073 L8.01773532,11.8831769 C7.63649913,11.7084444 7.33068736,11.4026164 7.15597509,11.021371 L4.86509791,6.02237173 Z M7.06987833,7.23296344 L8.5196065,10.3964635 C8.5445654,10.4509271 8.58825279,10.4946168 8.6427151,10.5195786 L11.8058944,11.9693627 L10.3561663,8.80586271 C10.3312074,8.75139907 10.28752,8.70770936 10.2330577,8.68274758 L7.06987833,7.23296344 Z M7.06987833,7.23296344 L8.5196065,10.3964635 C8.5445654,10.4509271 8.58825279,10.4946168 8.6427151,10.5195786 L10.3561663,8.80586271 C10.3312074,8.75139907 10.28752,8.70770936 10.2330577,8.68274758 L7.06987833,7.23296344 Z" id="矩形" fill="#575D6C" transform="translate(9.437886, 9.601163) rotate(-270.000000) translate(-9.437886, -9.601163) "></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/assets/images/guideIconHover.svg 0 → 100644
浏览文件 @ d63da799
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>帮助指引-hover</title>
<desc>Created with Sketch.</desc>
<g id="帮助指引-hover" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="分组-26复制">
<rect id="Rectangle-19" fill="#D2EBFD" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
<rect id="矩形" fill="#00A5A7" x="3.5" y="4" width="5" height="1.5"></rect>
<rect id="矩形" fill="#00A5A7" x="3.5" y="7" width="3" height="1.5"></rect>
<g id="分组-7" transform="translate(1.400000, 0.400000)" fill-rule="nonzero">
<path d="M2.59242652,13.9463889 C1.2140705,13.9463889 0.516594998,13.9463889 0.5,13.9463889 C0.223857625,13.9463889 0,13.7225313 0,13.4463889 L0,1.44638889 C0,1.17024651 0.223857625,0.946388889 0.5,0.946388889 L11.5,0.946388889 C11.7761424,0.946388889 12,1.17024651 12,1.44638889 C12,2.26883666 12,2.82983034 12,3.12936992" id="Rectangle-38" stroke="#00A5A7" stroke-width="1.4" stroke-linecap="round"></path>
<path d="M4.86509791,6.02237173 C4.57543153,5.39028109 5.22732823,4.73841895 5.85940351,5.02811884 L10.8580374,7.3191493 C11.2392736,7.49388178 11.5450854,7.79970976 11.7197977,8.18095521 L14.0106749,13.1799545 C14.3003412,13.8120451 13.6484445,14.4639072 13.0163693,14.1742073 L8.01773532,11.8831769 C7.63649913,11.7084444 7.33068736,11.4026164 7.15597509,11.021371 L4.86509791,6.02237173 Z M7.06987833,7.23296344 L8.5196065,10.3964635 C8.5445654,10.4509271 8.58825279,10.4946168 8.6427151,10.5195786 L11.8058944,11.9693627 L10.3561663,8.80586271 C10.3312074,8.75139907 10.28752,8.70770936 10.2330577,8.68274758 L7.06987833,7.23296344 Z M7.06987833,7.23296344 L8.5196065,10.3964635 C8.5445654,10.4509271 8.58825279,10.4946168 8.6427151,10.5195786 L10.3561663,8.80586271 C10.3312074,8.75139907 10.28752,8.70770936 10.2330577,8.68274758 L7.06987833,7.23296344 Z" id="矩形" fill="#00A5A7" transform="translate(9.437886, 9.601163) rotate(-270.000000) translate(-9.437886, -9.601163) "></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ d63da799
...@@ -129,7 +129,6 @@ ...@@ -129,7 +129,6 @@
"operatorNode": "算子节点", "operatorNode": "算子节点",
"virtualNode": "虚拟节点", "virtualNode": "虚拟节点",
"constantNode": "常量节点", "constantNode": "常量节点",
"virtualConstantNode": "虚拟常量节点",
"polymetric": "聚合节点", "polymetric": "聚合节点",
"dataFlowEdge": "数据流向边", "dataFlowEdge": "数据流向边",
"controllDepEdge": "控制依赖边", "controllDepEdge": "控制依赖边",
...@@ -145,7 +144,19 @@ ...@@ -145,7 +144,19 @@
"queryLoading": "正在加载图，请稍候。", "queryLoading": "正在加载图，请稍候。",
"fullScreen": "全屏", "fullScreen": "全屏",
"tooManyNodes": "节点太多，打开失败", "tooManyNodes": "节点太多，打开失败",
"inputNodeName": "请输入节点名称" "inputNodeName": "请输入节点名称",
"guide": "用户指南",
"guideTitle1": "1/3 主要功能介绍",
"guideTitle2": "2/3 节点类型介绍",
"guideTitle3": "3/3 边介绍",
"guideContent11": "1. 在计算图展示区域可以查看计算图，可以通过滚轮对计算图放大和缩小，可以鼠标点击后拖拽。",
"guideContent12": "2. 支持全屏展示计算图，或者将当前页面保存成SVG文件。",
"guideContent13": "3. 在右边的功能区中，可以切换查看不同文件的计算图，或者在计算图中进行节点搜索。",
"guideContent14": "4. 在节点信息的输入和输出中，可以选择并点击跳转到该节点。",
"guideContent2": "计算图主要由命名空间节点，算子节点，虚拟节点，聚合节点，常量节点等几种类型节点构成。其中 \"Default\" 表示正向传播，\"Gradients\" 表示反向传播。",
"guideContent3": "计算图中存在数据边和控制边。其中数据边表示数据的输入，控制边表示节点之间执行依赖关系。",
"next": "下一步",
"finish": "完成"
}, },
"components": { "components": {
"tagSelectTitle": "标签选择", "tagSelectTitle": "标签选择",
......
mindinsight/ui/src/views/train-manage/graph.vue
浏览文件 @ d63da799
...@@ -17,23 +17,65 @@ limitations under the License. ...@@ -17,23 +17,65 @@ limitations under the License.
<template> <template>
<!--cl-graph-manage --> <!--cl-graph-manage -->
<div class="cl-graph-manage"> <div class="cl-graph-manage">
<div class='graph-p32'> <div class="graph-p32">
<div class="guide-content"
v-if="guide.show">
<el-popover placement="top-start"
ref="popover"
:style="{ position: 'absolute', top: guide.top, left: guide.left }"
:title="guide.title"
width="370"
v-model="guide.show">
<i class="el-icon-close"
@click="closeUserGuide"></i>
<div v-for="item in guide.content"
:key="item"
class="guide-span">{{ item }}</div>
<img :src="require(`@/assets/images/graph-stepimg${guide.step}.svg`)" />
<el-button type="primary"
@click="guideNext">{{
guide.step === 3 ? $t('graph.finish') : $t('graph.next')
}}</el-button>
</el-popover>
<div class="step"
v-show="guide.step == 1">
<img src="@/assets/images/graph-step1.png"
alt="" />
</div>
<div class="step"
v-show="guide.step == 2">
<img src="@/assets/images/graph-step2.png"
alt="" />
</div>
<div class="step"
v-show="guide.step == 3">
<img src="@/assets/images/graph-step3.png"
alt="" />
</div>
</div>
<div class="cl-title cl-graph-title"> <div class="cl-title cl-graph-title">
<div class="cl-title-left">{{$t('graph.titleText')}}</div> <div class="cl-title-left">
{{ $t('graph.titleText') }}
<span @click="showUserGuide"
class="guide">
<i class="guide-icon"></i>
{{$t('graph.guide')}}
</span>
</div>
<div class="cl-title-right"> <div class="cl-title-right">
<div class="cl-close-btn" <div class="cl-close-btn"
@click="jumpToTrainDashboard"> @click="jumpToTrainDashboard">
<img src="@/assets/images/close-page.png"> <img src="@/assets/images/close-page.png" />
</div> </div>
</div> </div>
</div> </div>
<div class="cl-content"> <div class="cl-content">
<div id="graphs"> <div id="graphs">
<div class="cl-graph" <div class="cl-graph"
:class="fullScreen? 'full-screen':''"> :class="fullScreen ? 'full-screen' : ''">
<!-- graph --> <!-- graph -->
<div class="graph-container" <div class="graph-container"
:class="rightShow?'':'all'"> :class="rightShow ? '' : 'all'">
<!-- No data is displayed. --> <!-- No data is displayed. -->
<div class="image-noData" <div class="image-noData"
v-if="!loading.show && !Object.keys(allGraphData).length"> v-if="!loading.show && !Object.keys(allGraphData).length">
...@@ -41,7 +83,7 @@ limitations under the License. ...@@ -41,7 +83,7 @@ limitations under the License.
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt="" /> alt="" />
</div> </div>
<div class="noData-text">{{$t("public.noData")}}</div> <div class="noData-text">{{ $t('public.noData') }}</div>
</div> </div>
<!-- Operation button column --> <!-- Operation button column -->
<div class="operate-button-list"> <div class="operate-button-list">
...@@ -64,13 +106,13 @@ limitations under the License. ...@@ -64,13 +106,13 @@ limitations under the License.
:class="rightShow ? '' : 'right-hide'"> :class="rightShow ? '' : 'right-hide'">
<div class="toggle-right" <div class="toggle-right"
@click="toggleRight"> @click="toggleRight">
<i :class="rightShow?'icon-toggle':'icon-toggle icon-left'"></i> <i :class="rightShow ? 'icon-toggle' : 'icon-toggle icon-left'"></i>
</div> </div>
<!-- Search box --> <!-- Search box -->
<el-select @change="fileChange" <el-select @change="fileChange"
@visible-change="getSelectList" @visible-change="getSelectList"
:popper-append-to-body="false" :popper-append-to-body="false"
class='search' class="search"
v-model="fileSearchBox.value"> v-model="fileSearchBox.value">
<el-option v-for="item in fileSearchBox.suggestions" <el-option v-for="item in fileSearchBox.suggestions"
:key="item.value" :key="item.value"
...@@ -80,7 +122,7 @@ limitations under the License. ...@@ -80,7 +122,7 @@ limitations under the License.
</el-option> </el-option>
</el-select> </el-select>
<!-- Search box --> <!-- Search box -->
<Autocomplete class='search' <Autocomplete class="search"
v-model="searchBox.value" v-model="searchBox.value"
:disabled="!fileSearchBox.value" :disabled="!fileSearchBox.value"
:fetch-suggestions="searchNodesNames" :fetch-suggestions="searchNodesNames"
...@@ -99,7 +141,11 @@ limitations under the License. ...@@ -99,7 +141,11 @@ limitations under the License.
</div> </div>
</div> </div>
<!-- Node information --> <!-- Node information -->
<div :class="showLegend?'node-info-con node-info-container':'node-info-con node-info-container-long'"> <div :class="
showLegend
? 'node-info-con node-info-container'
: 'node-info-con node-info-container-long'
">
<div class="title"> <div class="title">
{{ $t('graph.nodeInfo') }} {{ $t('graph.nodeInfo') }}
<img :src="require('@/assets/images/all-drop-down.png')" <img :src="require('@/assets/images/all-drop-down.png')"
...@@ -112,11 +158,13 @@ limitations under the License. ...@@ -112,11 +158,13 @@ limitations under the License.
alt="" /> alt="" />
</div> </div>
<div class="node-info" <div class="node-info"
v-show='selectedNode.show'> v-show="selectedNode.show">
<div class="items"> <div class="items">
<div class="label item">{{ $t('graph.name') }}</div> <div class="label item">{{ $t('graph.name') }}</div>
<div class="value"><span class="cl-display-block" <div class="value">
@dblclick="nodeNameClick">{{ selectedNode.title }}</span></div> <span class="cl-display-block"
@dblclick="nodeNameClick">{{ selectedNode.title }}</span>
</div>
</div> </div>
<div class="items" <div class="items"
v-if="selectedNode.countShow"> v-if="selectedNode.countShow">
...@@ -130,51 +178,73 @@ limitations under the License. ...@@ -130,51 +178,73 @@ limitations under the License.
</div> </div>
<div class="items itemHeight" <div class="items itemHeight"
v-if="!selectedNode.countShow"> v-if="!selectedNode.countShow">
<div class="item">{{ $t('graph.attr') }} ({{ selectedNode.info.Attributes.length }})</div> <div class="item">
{{ $t('graph.attr') }} ({{
selectedNode.info.Attributes.length
}})
</div>
</div> </div>
<ul v-if="selectedNode.info && !selectedNode.countShow" <ul v-if="selectedNode.info && !selectedNode.countShow"
class="item-content hover" class="item-content hover"
:class="selectedNode.info.Attributes.length>2 ? :class="
'item-min2':selectedNode.info.Attributes.length>0?'item-min':''"> selectedNode.info.Attributes.length > 2
? 'item-min2'
: selectedNode.info.Attributes.length > 0
? 'item-min'
: ''
">
<li v-for="item in selectedNode.info.Attributes" <li v-for="item in selectedNode.info.Attributes"
:key="item.name"> :key="item.name">
<div class="key"> <div class="key">
{{ item.name }} {{ item.name }}
</div> </div>
<div class="input cl-input-value"> <div class="input cl-input-value">
<pre>{{item.value}}</pre> <pre>{{ item.value }}</pre>
</div> </div>
</li> </li>
</ul> </ul>
<div class="items itemHeight"> <div class="items itemHeight">
<div class="item">{{ $t('graph.inputs') }} ( <div class="item">
{{ selectedNode.info.input.length + selectedNode.info.inputControl.length }})</div> {{ $t('graph.inputs') }} (
{{
selectedNode.info.input.length +
selectedNode.info.inputControl.length
}})
</div>
</div> </div>
<ul v-if="selectedNode.info" <ul v-if="selectedNode.info"
class="item-content hover" class="item-content hover"
:class="selectedNode.info.input.length>1?'item-min2': :class="
selectedNode.info.input.length>0?'item-min':''"> selectedNode.info.input.length > 1
? 'item-min2'
: selectedNode.info.input.length > 0
? 'item-min'
: ''
">
<li v-for="item in selectedNode.info.input" <li v-for="item in selectedNode.info.input"
:key="item.$index" :key="item.$index"
@click="querySingleNode({value: item.name})" @click="querySingleNode({ value: item.name })"
class="pointer"> class="pointer">
<div class="input">{{ item.name }}</div> <div class="input">{{ item.name }}</div>
<div class="size">{{ item.value }}</div> <div class="size">{{ item.value }}</div>
<div class="clear"></div> <div class="clear"></div>
</li> </li>
<li class="control-list" <li class="control-list"
v-if="selectedNode.info && selectedNode.info.inputControl.length"> v-if="
selectedNode.info &&
selectedNode.info.inputControl.length
">
<div class="dependence-title" <div class="dependence-title"
@click="toggleControl('input')" @click="toggleControl('input')"
:class="selectedNode.showControl.input?'':'hide'"> :class="selectedNode.showControl.input ? '' : 'hide'">
<img :src="require('@/assets/images/all-uptake.png')" <img :src="require('@/assets/images/all-uptake.png')"
alt="" /> alt="" />
{{ $t('graph.controlDependencies')}} {{ $t('graph.controlDependencies') }}
</div> </div>
<ul v-show="selectedNode.showControl.input"> <ul v-show="selectedNode.showControl.input">
<li v-for="item in selectedNode.info.inputControl" <li v-for="item in selectedNode.info.inputControl"
:key="item.$index" :key="item.$index"
@click="querySingleNode({value: item.name})" @click="querySingleNode({ value: item.name })"
class="pointer"> class="pointer">
<div class="input">{{ item.name }}</div> <div class="input">{{ item.name }}</div>
<div class="size">{{ item.value }}</div> <div class="size">{{ item.value }}</div>
...@@ -184,34 +254,47 @@ limitations under the License. ...@@ -184,34 +254,47 @@ limitations under the License.
</li> </li>
</ul> </ul>
<div class="items"> <div class="items">
<div class="item">{{ $t('graph.outputs') }} ( <div class="item">
{{ selectedNode.info.output.length + selectedNode.info.outputControl.length }})</div> {{ $t('graph.outputs') }} (
{{
selectedNode.info.output.length +
selectedNode.info.outputControl.length
}})
</div>
</div> </div>
<ul v-if="selectedNode.info" <ul v-if="selectedNode.info"
class="item-content hover" class="item-content hover"
:class="selectedNode.info.output.length>1? :class="
'item-min2':selectedNode.info.output.length>0?'item-min':''"> selectedNode.info.output.length > 1
? 'item-min2'
: selectedNode.info.output.length > 0
? 'item-min'
: ''
">
<li v-for="item in selectedNode.info.output" <li v-for="item in selectedNode.info.output"
:key="item.$index" :key="item.$index"
@click="querySingleNode({value: item.name})" @click="querySingleNode({ value: item.name })"
class="pointer"> class="pointer">
<div class="input">{{ item.name }}</div> <div class="input">{{ item.name }}</div>
<div class="size">{{ item.value }}</div> <div class="size">{{ item.value }}</div>
<div class="clear"></div> <div class="clear"></div>
</li> </li>
<li class="control-list" <li class="control-list"
v-if="selectedNode.info && selectedNode.info.outputControl.length"> v-if="
selectedNode.info &&
selectedNode.info.outputControl.length
">
<div class="dependence-title" <div class="dependence-title"
@click="toggleControl('output')" @click="toggleControl('output')"
:class="selectedNode.showControl.output?'':'hide'"> :class="selectedNode.showControl.output ? '' : 'hide'">
<img :src="require('@/assets/images/all-uptake.png')" <img :src="require('@/assets/images/all-uptake.png')"
alt="" /> alt="" />
{{ $t('graph.controlDependencies')}} {{ $t('graph.controlDependencies') }}
</div> </div>
<ul v-show="selectedNode.showControl.output"> <ul v-show="selectedNode.showControl.output">
<li v-for="item in selectedNode.info.outputControl" <li v-for="item in selectedNode.info.outputControl"
:key="item.$index" :key="item.$index"
@click="querySingleNode({value: item.name})" @click="querySingleNode({ value: item.name })"
class="pointer"> class="pointer">
<div class="input">{{ item.name }}</div> <div class="input">{{ item.name }}</div>
<div class="size">{{ item.value }}</div> <div class="size">{{ item.value }}</div>
...@@ -249,15 +332,19 @@ limitations under the License. ...@@ -249,15 +332,19 @@ limitations under the License.
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.nameSpace')">{{ $t('graph.nameSpace') }}</div> :title="$t('graph.nameSpace')">
{{ $t('graph.nameSpace') }}
</div>
</div> </div>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
<img :src="require('@/assets/images/operator-node.png')" <img :src="require('@/assets/images/polymetric.png')"
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.operatorNode')">{{ $t('graph.operatorNode') }}</div> :title="$t('graph.polymetric')">
{{ $t('graph.polymetric') }}
</div>
</div> </div>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
...@@ -265,15 +352,19 @@ limitations under the License. ...@@ -265,15 +352,19 @@ limitations under the License.
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.virtualNode')">{{ $t('graph.virtualNode') }}</div> :title="$t('graph.virtualNode')">
{{ $t('graph.virtualNode') }}
</div>
</div> </div>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
<img :src="require('@/assets/images/polymetric.png')" <img :src="require('@/assets/images/operator-node.png')"
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.polymetric')">{{ $t('graph.polymetric') }}</div> :title="$t('graph.operatorNode')">
{{ $t('graph.operatorNode') }}
</div>
</div> </div>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
...@@ -281,23 +372,20 @@ limitations under the License. ...@@ -281,23 +372,20 @@ limitations under the License.
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.constantNode')">{{ $t('graph.constantNode') }}</div> :title="$t('graph.constantNode')">
</div> {{ $t('graph.constantNode') }}
<div class="legend-item">
<div class="pic">
<img :src="require('@/assets/images/const.png')"
alt="" />
</div> </div>
<div class="legend-text"
:title="$t('graph.virtualConstantNode')">{{ $t('graph.virtualConstantNode') }}</div>
</div> </div>
<br>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
<img :src="require('@/assets/images/data-flow.png')" <img :src="require('@/assets/images/data-flow.png')"
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.dataFlowEdge')">{{ $t('graph.dataFlowEdge') }}</div> :title="$t('graph.dataFlowEdge')">
{{ $t('graph.dataFlowEdge') }}
</div>
</div> </div>
<div class="legend-item"> <div class="legend-item">
<div class="pic"> <div class="pic">
...@@ -305,7 +393,9 @@ limitations under the License. ...@@ -305,7 +393,9 @@ limitations under the License.
alt="" /> alt="" />
</div> </div>
<div class="legend-text" <div class="legend-text"
:title="$t('graph.controllDepEdge')">{{ $t('graph.controllDepEdge') }}</div> :title="$t('graph.controllDepEdge')">
{{ $t('graph.controllDepEdge') }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -380,10 +470,40 @@ export default { ...@@ -380,10 +470,40 @@ export default {
graphviz: null, graphviz: null,
graphvizTemp: null, graphvizTemp: null,
initOver: false, initOver: false,
guide: {
show: false,
step: 1,
top: '0%',
left: '0%',
content: [
this.$t('graph.guideContent11'),
this.$t('graph.guideContent12'),
this.$t('graph.guideContent13'),
this.$t('graph.guideContent14'),
],
title: '',
},
}; };
}, },
computed: {}, computed: {},
watch: {}, watch: {
guide: {
handler(newVal) {
if (newVal.step === 1) {
this.guide.top = '20%';
this.guide.left = '48%';
} else if (newVal.step === 2) {
this.guide.top = '47%';
this.guide.left = '62%';
} else if (newVal.step === 3) {
this.guide.top = '45%';
this.guide.left = '52%';
}
this.guide.title = this.$t(`graph.guideTitle${newVal.step}`);
},
deep: true,
},
},
mounted() { mounted() {
// Judging from the training job overview. // Judging from the training job overview.
if (!this.$route.query || !this.$route.query.train_id) { if (!this.$route.query || !this.$route.query.train_id) {
...@@ -392,6 +512,12 @@ export default { ...@@ -392,6 +512,12 @@ export default {
document.title = this.$t('graph.titleText') + '-MindInsight'; document.title = this.$t('graph.titleText') + '-MindInsight';
return; return;
} }
const showGuide = window.localStorage.getItem('graphShowGuide');
if (!showGuide) {
this.guide.show = true;
window.localStorage.setItem('graphShowGuide', true);
}
this.trainJobID = this.$route.query.train_id; this.trainJobID = this.$route.query.train_id;
document.title = document.title =
decodeURIComponent(this.trainJobID) + decodeURIComponent(this.trainJobID) +
...@@ -415,6 +541,36 @@ export default { ...@@ -415,6 +541,36 @@ export default {
} }
}, },
methods: { methods: {
showUserGuide() {
this.guide.content = [
this.$t('graph.guideContent11'),
this.$t('graph.guideContent12'),
this.$t('graph.guideContent13'),
this.$t('graph.guideContent14'),
];
this.guide.show = true;
this.guide.step = 1;
},
closeUserGuide() {
this.guide.show = false;
},
guideNext() {
if (this.guide.step < 3) {
this.guide.step++;
switch (this.guide.step) {
case 2:
this.guide.content = [this.$t('graph.guideContent2')];
break;
case 3:
this.guide.content = [this.$t('graph.guideContent3')];
break;
default:
break;
}
} else if (this.guide.step >= 3) {
this.guide.show = false;
}
},
/** /**
* Initializing the graph * Initializing the graph
* @param {String} dot dot statement encapsulated in graph data * @param {String} dot dot statement encapsulated in graph data
...@@ -933,7 +1089,7 @@ export default { ...@@ -933,7 +1089,7 @@ export default {
*/ */
packageGraphData() { packageGraphData() {
const initSetting = const initSetting =
'node[style="filled";fontsize="10px"];edge[fontsize="4px";];'; 'node[style="filled";fontsize="10px"];edge[fontsize="5px";];';
return `digraph {${initSetting}${this.packageNodes()}${this.packageEdges()}}`; return `digraph {${initSetting}${this.packageNodes()}${this.packageEdges()}}`;
}, },
/** /**
...@@ -1058,20 +1214,14 @@ export default { ...@@ -1058,20 +1214,14 @@ export default {
const input = node.input || {}; const input = node.input || {};
const keys = Object.keys(input); const keys = Object.keys(input);
keys.forEach((key) => { keys.forEach((key) => {
if (input[key]) { if (input[key] && !input[key].independent_layout) {
// Cannot connect to the sub-nodes in the aggregation node and cannot be directly connected to the // Cannot connect to the sub-nodes in the aggregation node and cannot be directly connected to the
// aggregation node. It can only connect to the outer namespace of the aggregation node. // aggregation node. It can only connect to the outer namespace of the aggregation node.
// If there is no namespace in the outer layer, you do not need to connect cables. // If there is no namespace in the outer layer, you do not need to connect cables.
// Other connections are normal. // Other connections are normal.
let temp = key;
if (input[key].independent_layout) {
const list = key.split('/');
list.splice(list.length - 2, 2);
temp = list.join('/');
}
const source = const source =
this.findChildNamescope(temp, name) || this.findChildNamescope(key, name) ||
(temp ? analogNodesInputId : ''); (key ? analogNodesInputId : '');
let target = node.name; let target = node.name;
if (node.independent_layout) { if (node.independent_layout) {
const list = node.name.split('/'); const list = node.name.split('/');
...@@ -1483,7 +1633,7 @@ export default { ...@@ -1483,7 +1633,7 @@ export default {
const nodeStr = this.packageNodes(name); const nodeStr = this.packageNodes(name);
const edgeStr = this.packageEdges(name); const edgeStr = this.packageEdges(name);
const initSetting = const initSetting =
`node[style="filled";fontsize="10px";];` + `edge[fontsize="4px";];`; `node[style="filled";fontsize="10px";];` + `edge[fontsize="5px";];`;
const dotStr = const dotStr =
`digraph {${initSetting}label="${name.split('/').pop()}";` + `digraph {${initSetting}label="${name.split('/').pop()}";` +
`${nodeStr}${edgeStr}}`; `${nodeStr}${edgeStr}}`;
...@@ -1574,7 +1724,7 @@ export default { ...@@ -1574,7 +1724,7 @@ export default {
g.append('text') g.append('text')
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.attr('font-family', 'Times,serif') .attr('font-family', 'Times,serif')
.attr('font-size', '4px') .attr('font-size', '5px')
.attr('fill', '#000000') .attr('fill', '#000000')
.attr('x', (points[0].x + points[1].x) / 2) .attr('x', (points[0].x + points[1].x) / 2)
.attr('y', (points[0].y + points[1].y) / 2) .attr('y', (points[0].y + points[1].y) / 2)
...@@ -1866,7 +2016,7 @@ export default { ...@@ -1866,7 +2016,7 @@ export default {
const output = node.output || {}; const output = node.output || {};
const name = this.findExsitNode(node.name); const name = this.findExsitNode(node.name);
// Connects to the edge of the actual node. // Connects to the edge of the actual node.
if (name) { if (name && !node.independent_layout) {
Object.keys(input).forEach((key) => { Object.keys(input).forEach((key) => {
const source = this.findExsitNode(key); const source = this.findExsitNode(key);
if (source) { if (source) {
...@@ -2656,9 +2806,77 @@ export default { ...@@ -2656,9 +2806,77 @@ export default {
.cl-graph-title { .cl-graph-title {
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
.guide {
cursor: pointer;
margin-left: 16px;
line-height: 20px;
display: inline-block;
.guide-icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -2.5px;
margin-right: 4px;
background: url('../../assets/images/guideIcon.svg');
}
}
.guide:hover {
color: #00a5a7;
.guide-icon {
background: url('../../assets/images/guideIconHover.svg');
}
}
} }
.graph-p32 { .graph-p32 {
height: 100%; height: 100%;
position: relative;
.guide-content {
height: 100%;
width: 100%;
position: absolute;
background-color: #c6c8cc;
z-index: 9999;
.step {
height: 100%;
background-repeat: round;
img {
height: 100%;
width: 100%;
}
}
.guide-span {
font-size: 12px;
color: #575d6c;
line-height: 18px;
text-align: left;
display: inline-block;
}
.el-popover {
.el-icon-close {
cursor: pointer;
position: absolute;
right: 10px;
top: 13px;
font-size: 20px;
}
.el-icon-close:hover {
color: #00a5a7;
}
}
.el-popover__title {
font-size: 16px;
color: #252b3a;
line-height: 24px;
}
.el-button {
display: block;
float: right;
height: 28px;
line-height: 27px;
border-radius: 0;
padding: 0 20px;
}
}
} }
.cl-content { .cl-content {
height: calc(100% - 50px); height: calc(100% - 50px);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或