fix: optimize the trace widget (#73)

src/views/dashboard/related/trace/Detail.vue

@@ -24,7 +24,12 @@ limitations under the License. -->
         />
         <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
         <div class="trace-log-btn">
-          <el-button class="mr-10" type="primary" @click="searchTraceLogs">
+          <el-button
+            size="small"
+            class="mr-10"
+            type="primary"
+            @click="searchTraceLogs"
+          >
             {{ t("viewLogs") }}
           </el-button>
         </div>
@@ -88,7 +93,8 @@ limitations under the License. -->
         </div>
         <div>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'List' }"
             @click="displayMode = 'List'"
           >
@@ -96,7 +102,8 @@ limitations under the License. -->
             {{ t("list") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Tree' }"
             @click="displayMode = 'Tree'"
           >
@@ -104,7 +111,8 @@ limitations under the License. -->
             {{ t("tree") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Table' }"
             @click="displayMode = 'Table'"
           >
@@ -112,7 +120,8 @@ limitations under the License. -->
             {{ t("table") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Statistics' }"
             @click="displayMode = 'Statistics'"
           >
@@ -230,7 +239,9 @@ export default defineComponent({
 }
 
 .trace-chart {
-  height: 100%;
+  height: calc(100% - 100px);
+  overflow: auto;
+  padding-bottom: 20px;
 }
 
 .trace-detail-wrapper {

src/views/dashboard/related/trace/components/List.vue

@@ -22,11 +22,11 @@ limitations under the License. -->
         <Icon iconName="issue-open-m" class="mr-5" size="sm" />
         <span>{{ i }}</span>
       </span>
-      <el-button class="btn" type="primary" @click="downloadTrace">
+      <el-button class="btn" size="small" type="primary" @click="downloadTrace">
         {{ t("exportImage") }}
       </el-button>
     </div>
-    <div>
+    <div class="list">
       <Graph :data="data" :traceId="traceId" type="List" />
     </div>
   </div>
@@ -103,4 +103,8 @@ function downloadTrace() {
 .btn {
   float: right;
 }
+
+.list {
+  height: calc(100% - 150px);
+}
 </style>

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -40,8 +40,8 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth - 10;
-    this.height = el.clientHeight;
+    this.width = el.getBoundingClientRect().width - 10;
+    this.height = el.getBoundingClientRect().height - 10;
     this.svg = d3
       .select(this.el)
       .append("svg")
@@ -306,8 +306,8 @@ export default class ListGraph {
     if (!this.el) {
       return;
     }
-    this.width = this.el.clientWidth - 20;
-    this.height = this.el.clientHeight;
+    this.width = this.el.getBoundingClientRect().width - 20;
+    this.height = this.el.getBoundingClientRect().height - 10;
     this.svg.attr("width", this.width).attr("height", this.height);
     this.svg.select("g").attr("transform", () => `translate(160, 0)`);
     const transform = d3.zoomTransform(this.svg).translate(0, 0);