From e42734ba80e1ada3784880b8b70cafc69e234b79 Mon Sep 17 00:00:00 2001
From: zhourunjie1988 <61196609+zhourunjie1988@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:20:05 +0800
Subject: [PATCH] fix: icons display in trace tree diagram (#324)

---
 src/views/dashboard/related/trace/components/Tree.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/related/trace/components/Tree.vue b/src/views/dashboard/related/trace/components/Tree.vue
index e54bac77..c79065fd 100644
--- a/src/views/dashboard/related/trace/components/Tree.vue
+++ b/src/views/dashboard/related/trace/components/Tree.vue
@@ -45,7 +45,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { Span } from "@/types/trace";
   import { useI18n } from "vue-i18n";
-  import { ref, onMounted } from "vue";
+  import { ref, computed } from "vue";
 
   /* global defineProps */
   const props = defineProps({
@@ -53,12 +53,9 @@ limitations under the License. -->
     traceId: { type: String, default: "" },
   });
   const { t } = useI18n();
-  const list = ref<string[]>([]);
+  const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
   const charts = ref<any>(null);
 
-  onMounted(() => {
-    list.value = Array.from(new Set(props.data.map((i: Span) => i.serviceCode)));
-  });
   function computedScale(i: number) {
     const sequentialScale = d3
       .scaleSequential()
@@ -76,7 +73,7 @@ limitations under the License. -->
   .trace-tree-btn {
     display: inline-block;
     border-radius: 4px;
-    padding: 0px 7px;
+    padding: 0 7px;
     background-color: #40454e;
     color: #eee;
     font-size: 11px;