fix: polish the network profiling widget, bugfix (#151)

Author: Fine0830

src/views/dashboard/related/network-profiling/Content.vue

@@ -15,15 +15,14 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <Tasks />
-    <div
-      class="vis-graph ml-5"
-      v-if="networkProfilingStore.nodes.length"
-      v-loading="networkProfilingStore.loadNodes"
-    >
-      <process-topology :config="config" />
-    </div>
-    <div class="text" v-else v-loading="networkProfilingStore.loadNodes">
-      {{ t("noData") }}
+    <div class="vis-graph ml-5" v-loading="networkProfilingStore.loadNodes">
+      <process-topology
+        v-if="networkProfilingStore.nodes.length"
+        :config="config"
+      />
+      <div class="text" v-else>
+        {{ t("noData") }}
+      </div>
     </div>
   </div>
 </template>
@@ -60,7 +59,7 @@ const { t } = useI18n();
 }
 
 .text {
-  width: calc(100% - 330px);
+  width: 100%;
   text-align: center;
   margin-top: 30px;
 }

src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts

@@ -30,7 +30,10 @@ export const linkElement = (graph: any) => {
         0.5
       );
       if (d.lowerArc) {
-        controlPos[1] = -controlPos[1] - 10;
+        controlPos[1] =
+          Math.abs(controlPos[1]) < 50
+            ? -controlPos[1] + 90
+            : -controlPos[1] - 10;
       }
       return (
         "M" +
@@ -141,7 +144,8 @@ function getMidpoint(d: Call) {
     0.5
   );
   if (d.lowerArc) {
-    controlPos[1] = -controlPos[1];
+    controlPos[1] =
+      Math.abs(controlPos[1]) < 50 ? -controlPos[1] + 100 : -controlPos[1] - 10;
   }
   const p = quadraticBezier(
     0.5,

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div ref="chart" class="process-topo"></div>
-  <el-popover placement="bottom" :width="295" trigger="click">
+  <el-popover
+    placement="bottom"
+    :width="295"
+    trigger="click"
+    v-if="dashboardStore.editMode"
+  >
     <template #reference>
-      <div
-        class="switch-icon-edit ml-5"
-        title="Settings"
-        @click="setConfig"
-        v-if="dashboardStore.editMode"
-      >
+      <div class="switch-icon-edit ml-5" title="Settings" @click="setConfig">
         <Icon size="middle" iconName="setting_empty" />
       </div>
     </template>
@@ -76,7 +76,7 @@ const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
-const config = ref<any>({});
+const config = ref<any>(props.config || {});
 const diff = ref<number[]>([220, 200]);
 const radius = 210;
 const dates = ref<Nullable<{ start: number; end: number }>>(null);

src/views/dashboard/related/network-profiling/components/Settings.vue

@@ -62,9 +62,10 @@ function getDashboards() {
 }
 
 function changeLinkDashboard(opt: { value: string }[]) {
+  const linkDashboard = opt.length ? opt[0].value : "";
   const p = {
     ...dashboardStore.selectedGrid,
-    linkDashboard: opt[0].value,
+    linkDashboard,
   };
   dashboardStore.selectWidget(p);
   dashboardStore.setConfigs(p);