From f76500bb6e5e796171f393994f88ede62a370b02 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 18 Jan 2024 11:43:07 +0800
Subject: [PATCH] fix: optimize tooltips style (#365)

---
 src/views/dashboard/panel/Tool.vue            |  2 +-
 .../related/topology/components/Graph.vue     |  5 ++-
 .../related/topology/pod/InstanceMap.vue      | 17 +---------
 .../related/topology/service/HierarchyMap.vue | 17 +---------
 .../related/topology/service/ServiceMap.vue   |  2 +-
 .../dashboard/related/topology/style.scss     | 34 +++++++++++++++++++
 6 files changed, 42 insertions(+), 35 deletions(-)
 create mode 100644 src/views/dashboard/related/topology/style.scss

diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 16dab18d..1e96fcb3 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -743,6 +743,6 @@ limitations under the License. -->
   .hierarchy-related {
     height: 600px;
     width: 600px;
-    overflow: auto;
+    overflow: hidden;
   }
 </style>
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index c55e2fdf..3741704d 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -186,7 +186,9 @@ limitations under the License. -->
       if (!props.calls.length) {
         return;
       }
-      init();
+      setTimeout(() => {
+        init();
+      }, 10);
     },
   );
 </script>
@@ -196,6 +198,7 @@ limitations under the License. -->
       fill: var(--sw-topology-color);
       font-size: 12px;
       opacity: 0.9;
+      z-index: 1;
     }
 
     .hierarchy-services-svg {
diff --git a/src/views/dashboard/related/topology/pod/InstanceMap.vue b/src/views/dashboard/related/topology/pod/InstanceMap.vue
index e6df446e..17559b7c 100644
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -171,20 +171,5 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  .hierarchy-services-topo {
-    position: relative;
-  }
-
-  .el-loading-spinner {
-    top: 30%;
-  }
-
-  #popover {
-    position: absolute;
-    visibility: hidden;
-    padding: 5px;
-    border: var(--sw-topology-border);
-    border-radius: 3px;
-    background-color: $theme-background;
-  }
+  @import url("../style.scss");
 </style>
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index cece4a5c..ba09712c 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -180,20 +180,5 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  .hierarchy-services-topo {
-    position: relative;
-  }
-
-  .el-loading-spinner {
-    top: 30%;
-  }
-
-  #popover {
-    position: absolute;
-    visibility: hidden;
-    padding: 5px;
-    border: var(--sw-topology-border);
-    border-radius: 3px;
-    background-color: $theme-background;
-  }
+  @import url("../style.scss");
 </style>
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue
index 1b57fe6a..b4eb5f83 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -599,7 +599,7 @@ limitations under the License. -->
   .hierarchy-related {
     height: 600px;
     width: 600px;
-    overflow: auto;
+    overflow: hidden;
   }
 
   .micro-topo-chart {
diff --git a/src/views/dashboard/related/topology/style.scss b/src/views/dashboard/related/topology/style.scss
new file mode 100644
index 00000000..3f3b07ec
--- /dev/null
+++ b/src/views/dashboard/related/topology/style.scss
@@ -0,0 +1,34 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.hierarchy-services-topo {
+  position: absolute;
+  width: 100%;
+}
+
+.el-loading-spinner {
+  top: 30%;
+}
+
+#popover {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  border: var(--sw-topology-border);
+  border-radius: 3px;
+  background-color: var(--theme-background);
+  z-index: 9999;
+}