From eab42fa1c66242f3385d503bb83bdee4bc4128da Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 1 Mar 2022 22:19:01 +0800
Subject: [PATCH] fix: update profile

---
 src/store/modules/profile.ts                  |   5 +
 src/views/dashboard/panel/Layout.vue          |   2 +-
 .../dashboard/related/profile/Content.vue     |   4 +-
 .../related/profile/components/SpanTree.vue   |   9 +-
 .../profile/components/Stack/Container.vue    | 128 +++++++++++++++
 .../profile/components/Stack/Index.vue        | 109 +++++++++++++
 .../related/profile/components/Stack/Item.vue | 153 ++++++++++++++++++
 .../profile/components/Stack/profile.scss     |  28 ++++
 .../profile/components/ThreadStack.vue        |  30 +++-
 src/views/dashboard/related/trace/Detail.vue  |  22 ++-
 .../related/trace/components/List.vue         |   2 +-
 .../related/trace/components/Table/Index.vue  |   3 +-
 .../trace/components/Table/TableContainer.vue |   6 +-
 .../trace/components/Table/TableItem.vue      |  21 ++-
 .../related/trace/components/Tree.vue         |   2 +-
 15 files changed, 493 insertions(+), 31 deletions(-)
 create mode 100644 src/views/dashboard/related/profile/components/Stack/Container.vue
 create mode 100644 src/views/dashboard/related/profile/components/Stack/Index.vue
 create mode 100644 src/views/dashboard/related/profile/components/Stack/Item.vue
 create mode 100644 src/views/dashboard/related/profile/components/Stack/profile.scss

diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index b9b20a73..23ba57f8 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -40,6 +40,7 @@ interface ProfileState {
   currentSpan: SegmentSpan | Record<string, never>;
   analyzeTrees: ProfileAnalyzationTrees;
   taskLogs: TaskLog[];
+  highlightTop: boolean;
 }
 
 export const traceStore = defineStore({
@@ -55,6 +56,7 @@ export const traceStore = defineStore({
     currentSpan: {},
     analyzeTrees: [],
     taskLogs: [],
+    highlightTop: true,
   }),
   actions: {
     setConditions(data: { serviceId?: string; endpointName?: string }) {
@@ -69,6 +71,9 @@ export const traceStore = defineStore({
     setCurrentSegment(s: Trace) {
       this.currentSegment = s;
     },
+    setHighlightTop() {
+      this.highlightTop = !this.highlightTop;
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index a437f6ee..72c95881 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
       :key="item.i"
       @click="clickGrid(item)"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
-      drag-ignore-from="svg.d3-trace-tree"
+      drag-ignore-from="svg.d3-trace-tree, .dragger"
     >
       <component :is="item.type" :data="item" />
     </grid-item>
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index e756b15d..6de5fa37 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -32,13 +32,13 @@ import ThreadStack from "./components/ThreadStack.vue";
 </script>
 <style lang="scss" scoped>
 .content {
-  height: 100%;
+  height: calc(100% - 30px);
   width: 100%;
 }
 
 .item {
   height: 100%;
-  width: calc(100% - 290px);
+  width: calc(100% - 300px);
 }
 
 .list {
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index edbdbba5..8c7f0d2f 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -13,14 +13,11 @@ 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. -->
 <template>
-  <div
-    class="profile-trace-dashboard flex-v"
-    v-if="profileStore.currentSegment"
-  >
+  <div class="profile-trace-dashboard" v-if="profileStore.currentSegment">
     <div class="profile-trace-detail-wrapper">
       <Selector
         size="small"
-        :value="traceId"
+        :value="traceId || (traceIds[0] && traceIds[0].value) || ''"
         :options="traceIds"
         placeholder="Select a trace id"
         @change="changeTraceId"
@@ -159,7 +156,7 @@ function updateTimeRange() {
 .profile-trace-dashboard {
   padding: 5px;
   flex-shrink: 0;
-  height: calc(50% + 95);
+  height: 50%;
   overflow: auto;
   width: 100%;
 }
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
new file mode 100644
index 00000000..038aaaa5
--- /dev/null
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -0,0 +1,128 @@
+<!-- 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. -->
+
+<template>
+  <div class="profile">
+    <div class="profile-header">
+      <div class="thread" :style="`width: ${thread}px`">
+        Thread Stack
+        <span class="r cp dragger" ref="dragger">
+          <Icon iconName="settings_ethernet" />
+        </span>
+      </div>
+      <div class="self">Duration (ms)</div>
+      <div class="exec-ms">
+        Self Duration (ms)
+        <a
+          class="profile-set-btn"
+          @click="updateHighlightTop()"
+          title="Highlight top 10 slow methods"
+          :style="{ color: highlightTop ? '#448dfe' : '#484b55' }"
+        >
+          top slow
+        </a>
+      </div>
+      <div class="dump-count">Dump Count</div>
+    </div>
+    <TableItem
+      :thread="thread"
+      v-for="(item, index) in tableData"
+      :data="item"
+      :key="'key' + index"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useProfileStore } from "@/store/modules/profile";
+import { ref, onMounted } from "vue";
+import type { PropType } from "vue";
+import TableItem from "./Item.vue";
+
+/* global defineProps */
+defineProps({
+  tableData: { type: Array as PropType<any>, default: () => [] },
+  highlightTop: { type: Boolean, default: false },
+});
+const dragger = ref<any>(null);
+const thread = ref<number>(500);
+const profileStore = useProfileStore();
+
+onMounted(() => {
+  dragger.value.onmousedown = (event: any) => {
+    const diffX = event.clientX;
+    const copy = thread.value;
+    document.onmousemove = (documentEvent) => {
+      const moveX = documentEvent.clientX - diffX;
+      thread.value = copy + moveX;
+    };
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    };
+  };
+});
+
+function updateHighlightTop() {
+  profileStore.setHighlightTop();
+}
+</script>
+<style lang="scss" scoped>
+@import "./profile.scss";
+
+.dragger {
+  float: right;
+}
+
+.profile {
+  font-size: 12px;
+  height: 100%;
+
+  .profile-set-btn {
+    font-size: 12px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    text-align: center;
+    width: 57px;
+    overflow: hidden;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    position: absolute;
+    top: 4px;
+    right: 3px;
+    padding: 0 3px;
+  }
+}
+
+.profile-header {
+  white-space: nowrap;
+  user-select: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.profile-header div {
+  display: inline-block;
+  padding: 0 4px;
+  border-right: 1px dotted silver;
+  line-height: 30px;
+  background-color: #f3f4f9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/dashboard/related/profile/components/Stack/Index.vue b/src/views/dashboard/related/profile/components/Stack/Index.vue
new file mode 100644
index 00000000..a22e4496
--- /dev/null
+++ b/src/views/dashboard/related/profile/components/Stack/Index.vue
@@ -0,0 +1,109 @@
+<!-- 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. -->
+
+<template>
+  <div class="profile-detail-chart-table">
+    <Container :tableData="tableData" :highlightTop="highlightTop">
+      <div class="profile-tips" v-if="!tableData.length">{{ t("noData") }}</div>
+    </Container>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { ref, onMounted, watch } from "vue";
+import type { PropType } from "vue";
+import Container from "./Container.vue";
+
+const { t } = useI18n();
+/* global defineProps */
+const props = defineProps({
+  data: { type: Array as PropType<any>, default: () => [] },
+  highlightTop: { type: Boolean, default: false },
+});
+const tableData = ref<any>([]);
+
+onMounted(() => {
+  tableData.value = processTree();
+});
+function processTree() {
+  if (!props.data.length) {
+    return [];
+  }
+
+  const durationChildExcluded = props.data
+    .map((d: any) => {
+      return d.elements.map((item: any) => item.durationChildExcluded);
+    })
+    .flat(1);
+  function compare(val: number, val1: number) {
+    return val1 - val;
+  }
+  const topDur = durationChildExcluded
+    .sort(compare)
+    .filter((item: any, index: number) => index < 10 && item !== 0);
+  const trees = [];
+
+  for (const item of props.data) {
+    const newArr = sortArr(item.elements, topDur);
+    trees.push(...newArr);
+  }
+
+  return trees;
+}
+
+function sortArr(arr: any[], topDur: any) {
+  const copyArr = JSON.parse(JSON.stringify(arr));
+  const obj: any = {};
+  const res = [];
+  for (const item of copyArr) {
+    obj[item.id] = item;
+  }
+  for (const item of copyArr) {
+    item.topDur =
+      topDur.includes(item.durationChildExcluded) && props.highlightTop;
+    if (item.parentId === "0") {
+      res.push(item);
+    }
+    for (const key in obj) {
+      if (item.id === obj[key].parentId) {
+        if (item.children) {
+          item.children.push(obj[key]);
+        } else {
+          item.children = [obj[key]];
+        }
+      }
+    }
+  }
+
+  return res;
+}
+
+watch(
+  () => [props.data, props.highlightTop],
+  () => {
+    if (!props.data.length) {
+      tableData.value = [];
+      return;
+    }
+    tableData.value = processTree();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.profile-detail-chart-table {
+  height: 100%;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/dashboard/related/profile/components/Stack/Item.vue b/src/views/dashboard/related/profile/components/Stack/Item.vue
new file mode 100644
index 00000000..731beab0
--- /dev/null
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@@ -0,0 +1,153 @@
+<!-- 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. -->
+<template>
+  <div>
+    <div
+      :class="['profile-item', 'level' + data.parentId]"
+      :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }"
+    >
+      <div
+        :class="['thread', 'level' + data.parentId]"
+        :style="{
+          'text-indent': data.parentId * 4 + 'px',
+          width: `${thread}px`,
+        }"
+      >
+        <Icon
+          class="icon vm cp trans"
+          :style="!displayChildren ? 'transform: rotate(-90deg);' : ''"
+          @click.stop="toggle"
+          v-if="data.children && data.children.length"
+          iconName="arrow-down"
+        />
+        <el-tooltip :content="data.codeSignature" placement="bottom">
+          <span>
+            {{ data.codeSignature }}
+          </span>
+        </el-tooltip>
+      </div>
+      <div class="self">{{ data.duration }}</div>
+      <div class="exec-ms">{{ data.durationChildExcluded }}</div>
+      <div class="dump-count">{{ data.count }}</div>
+    </div>
+    <div
+      v-show="data.children && data.children.length && displayChildren"
+      class="children-trace"
+    >
+      <table-item
+        :thread="thread"
+        v-for="(item, index) in data.children"
+        :key="index"
+        :data="item"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { ref, defineComponent, toRefs } from "vue";
+import type { PropType } from "vue";
+
+const props = {
+  data: { type: Object as PropType<any>, default: () => ({}) },
+  thread: { type: Number, default: 0 },
+};
+export default defineComponent({
+  name: "TableItem",
+  props,
+  setup(props) {
+    const displayChildren = ref<boolean>(true);
+    function toggle() {
+      displayChildren.value = !displayChildren.value;
+    }
+    return { toggle, displayChildren, ...toRefs(props) };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@import "./profile.scss";
+
+.profile-item.level0 {
+  background: rgba(0, 0, 0, 0.04);
+  color: #448dfe;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: #448dfe;
+  }
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 5px;
+    height: 100%;
+    background: #448dfe;
+    left: 0;
+  }
+}
+
+.profile-item {
+  position: relative;
+  white-space: nowrap;
+}
+
+.profile-item.selected {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.profile-item:not(.level0):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.profile-item > div {
+  display: inline-block;
+  padding: 0 5px;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-item > div.method {
+  padding-left: 10px;
+}
+
+.profile-item div.exec-percent {
+  width: 10%;
+  height: 30px;
+  padding: 0 8px;
+
+  .outer-progress_bar {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgb(63, 177, 227);
+    position: relative;
+    margin-top: 11px;
+    border: none;
+  }
+
+  .inner-progress_bar {
+    position: absolute;
+    background: rgb(110, 64, 170);
+    height: 4px;
+    border-radius: 2px;
+    left: 0;
+    border: none;
+    top: 1px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/related/profile/components/Stack/profile.scss b/src/views/dashboard/related/profile/components/Stack/profile.scss
new file mode 100644
index 00000000..fbfdbb99
--- /dev/null
+++ b/src/views/dashboard/related/profile/components/Stack/profile.scss
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+.dump-count {
+  width: 100px;
+}
+
+.exec-ms {
+  width: 200px;
+  position: relative;
+}
+
+.self {
+  width: 100px;
+}
diff --git a/src/views/dashboard/related/profile/components/ThreadStack.vue b/src/views/dashboard/related/profile/components/ThreadStack.vue
index e1d9e68e..fe99b458 100644
--- a/src/views/dashboard/related/profile/components/ThreadStack.vue
+++ b/src/views/dashboard/related/profile/components/ThreadStack.vue
@@ -12,7 +12,33 @@ 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. -->
+
 <template>
-  <div>stack</div>
+  <div v-if="profileStore.analyzeTrees.length" class="thread-stack">
+    <StackTable
+      :data="profileStore.analyzeTrees"
+      :highlightTop="profileStore.highlightTop"
+    />
+    <div class="rk-trace-t-loading" v-show="loading">
+      <Icon iconName="spinner" />
+    </div>
+    <div v-if="message">{{ message }}</div>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from "vue";
+import StackTable from "./Stack/Index.vue";
+import { useProfileStore } from "@/store/modules/profile";
+
+const profileStore = useProfileStore();
+const loading = ref<boolean>(false);
+const message = ref<string>("");
+</script>
+<style lang="scss" scoped>
+.thread-stack {
+  padding: 5px 12px;
+  height: calc(50% - 50px);
+  overflow: auto;
+  width: 100%;
+}
+</style>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index ae44f0e1..ade0f74e 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -123,14 +123,16 @@ limitations under the License. -->
       </div>
     </div>
     <div class="no-data" v-else>{{ t("noData") }}</div>
-    <component
-      v-if="traceStore.currentTrace.endpointNames"
-      :is="displayMode"
-      :data="traceStore.traceSpans"
-      :traceId="traceStore.currentTrace.traceIds[0].value"
-      :showBtnDetail="false"
-      HeaderType="trace"
-    />
+    <div class="trace-chart">
+      <component
+        v-if="traceStore.currentTrace.endpointNames"
+        :is="displayMode"
+        :data="traceStore.traceSpans"
+        :traceId="traceStore.currentTrace.traceIds[0].value"
+        :showBtnDetail="false"
+        HeaderType="trace"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -227,6 +229,10 @@ export default defineComponent({
   overflow: hidden;
 }
 
+.trace-chart {
+  height: 100%;
+}
+
 .trace-detail-wrapper {
   font-size: 12px;
   padding: 5px 10px;
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index c9a48d52..e8d4cd07 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -88,7 +88,7 @@ function downloadTrace() {
 .charts {
   overflow: auto;
   padding: 10px;
-  height: calc(100% - 95px);
+  height: 100%;
   width: 100%;
 }
 
diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue
index 4c2343d0..eb177fc6 100644
--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@@ -105,8 +105,7 @@ watch(
 }
 
 .trace-table {
-  padding: 10px;
-  height: calc(100% - 95px);
+  height: 100%;
   width: 100%;
 }
 </style>
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index 81b5af50..0dff3259 100644
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
     </div>
     <div class="trace-header" v-else>
       <div class="method" :style="`width: ${method}px`">
-        <span class="r cp" ref="dragger">
+        <span class="cp dragger" ref="dragger">
           <Icon iconName="settings_ethernet" size="sm" />
         </span>
         {{ headerData[0].value }}
@@ -158,6 +158,10 @@ function sortStatistics(key: string) {
   width: 100%;
 }
 
+.dragger {
+  float: right;
+}
+
 .trace-header {
   white-space: nowrap;
   user-select: none;
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 076a1e81..85842360 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 
 <template>
   <div v-if="type === 'statistics'">
-    <div :class="['trace-item']" ref="traceItem">
+    <div class="trace-item">
       <div :class="['method']">
         <el-tooltip :content="data.groupRef.endpointName" placement="bottom">
           <span>
@@ -49,7 +49,7 @@ limitations under the License. -->
   </div>
   <div v-else>
     <div
-      @click="viewSpanDetail"
+      @click="selectSpan"
       :class="[
         'trace-item',
         'level' + (data.level - 1),
@@ -106,7 +106,7 @@ limitations under the License. -->
           <span>{{ data.serviceCode }}</span>
         </el-tooltip>
       </div>
-      <div class="application" v-show="type === 'profile'">
+      <div class="application" v-show="headerType === 'profile'">
         <span @click="viewSpanDetail">{{ t("view") }}</span>
       </div>
     </div>
@@ -120,6 +120,7 @@ limitations under the License. -->
         :key="index"
         :data="child"
         :type="type"
+        :headerType="headerType"
       />
     </div>
     <el-dialog
@@ -183,7 +184,7 @@ export default defineComponent({
     });
 
     function toggle() {
-      displayChildren.value = !this.displayChildren.value;
+      displayChildren.value = !displayChildren.value;
     }
     function showSelectSpan() {
       const items: any = document.querySelectorAll(".trace-item");
@@ -196,11 +197,16 @@ export default defineComponent({
 
       traceItem.value.style.background = "rgba(0, 0, 0, 1)";
     }
+    function selectSpan() {
+      if (props.headerType === "profile") {
+        showSelectSpan();
+        return;
+      }
+      viewSpanDetail();
+    }
     function viewSpanDetail() {
       showSelectSpan();
-      if (props.headerType === "trace") {
-        showDetail.value = true;
-      }
+      showDetail.value = true;
     }
 
     watch(
@@ -218,6 +224,7 @@ export default defineComponent({
       dateFormat,
       showSelectSpan,
       showDetail,
+      selectSpan,
       t,
     };
   },
diff --git a/src/views/dashboard/related/trace/components/Tree.vue b/src/views/dashboard/related/trace/components/Tree.vue
index 43f2d06c..16ab9788 100644
--- a/src/views/dashboard/related/trace/components/Tree.vue
+++ b/src/views/dashboard/related/trace/components/Tree.vue
@@ -86,7 +86,7 @@ function computedScale(i: number) {
   overflow: auto;
   padding: 10px;
   position: relative;
-  height: calc(100% - 95px);
+  height: 100%;
   width: 100%;
 }