feat: add Support for dragging in the trace panel (#377)

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

@@ -166,8 +166,8 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .trace-detail {
+    flex: 1;
     height: 100%;
-    width: 100%;
     overflow: hidden;
   }
 

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

@@ -91,7 +91,7 @@ limitations under the License. -->
   import type { LayoutConfig } from "@/types/dashboard";
 
   /*global defineProps, defineEmits, Recordable */
-  const emits = defineEmits(["get"]);
+  const emits = defineEmits(["get", "search"]);
   const props = defineProps({
     needQuery: { type: Boolean, default: true },
     data: {
@@ -227,6 +227,7 @@ limitations under the License. -->
     return param;
   }
   function searchTraces() {
+    emits("search");
     traceStore.setTraceCondition(setCondition());
     queryTraces();
   }

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

@@ -13,7 +13,7 @@ limitations under the License. -->
 <template>
   <div class="trace-t flex-v">
     <div class="trace-t-tool flex-h">
-      <div class="title">
+      <div class="title ell">
         <span class="mr-5">Trace Segments</span>
         <el-popover
           :width="310"
@@ -144,6 +144,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .trace-t-tool {
+    overflow: hidden;
     background-color: rgb(196 200 225 / 20%);
     justify-content: space-between;
     border-bottom: 1px solid #c1c5ca41;
@@ -163,7 +164,7 @@ limitations under the License. -->
   }
 
   .trace-t-wrapper {
-    overflow: auto;
+    overflow: hidden;
     border-right: 1px solid var(--sw-trace-list-border);
   }
 
@@ -187,7 +188,8 @@ limitations under the License. -->
   }
 
   .list {
-    width: 280px;
+    min-width: 120px;
+    width: 100%;
   }
 
   .trace-tr {

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -30,8 +30,9 @@ limitations under the License. -->
   import SpanDetail from "./SpanDetail.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { debounce } from "@/utils/debounce";
+  import { mutationObserver } from "@/utils/mutation";
 
-  /* global defineProps, Nullable, defineExpose,Recordable*/
+  /* global defineProps, Nullable, defineExpose, Recordable */
   const props = defineProps({
     data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
@@ -60,6 +61,13 @@ limitations under the License. -->
     }
     draw();
     loading.value = false;
+
+    // monitor segment list width changes.
+    mutationObserver.create("trigger-resize", () => {
+      d3.selectAll(".d3-tip").remove();
+      debounceFunc();
+    });
+
     window.addEventListener("resize", debounceFunc);
   });
 
@@ -286,6 +294,7 @@ limitations under the License. -->
   onBeforeUnmount(() => {
     d3.selectAll(".d3-tip").remove();
     window.removeEventListener("resize", debounceFunc);
+    mutationObserver.deleteObserve("trigger-resize");
   });
   watch(
     () => props.data,
@@ -295,12 +304,8 @@ limitations under the License. -->
       }
       loading.value = true;
       changeTree();
-      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
-      tree.value.draw(() => {
-        setTimeout(() => {
-          loading.value = false;
-        }, 200);
-      });
+      draw();
+      loading.value = false;
     },
   );
   watch(

src/views/dashboard/related/trace/components/Table/TableContainer.vue

@@ -88,6 +88,7 @@ limitations under the License. -->
       return;
     }
     drag.onmousedown = (event: MouseEvent) => {
+      event.stopPropagation();
       const diffX = event.clientX;
       const copy = method.value;
       document.onmousemove = (documentEvent) => {

src/views/dashboard/related/trace/components/Table/table.scss

@@ -48,29 +48,29 @@
 }
 
 .max-time {
-  width: 150px;
+  width: 13%;
 }
 
 .method {
-  width: 300px;
+  width: 28%;
 }
 
 .avg-time {
-  width: 150px;
+  width: 13%;
 }
 
 .min-time {
-  width: 150px;
+  width: 13%;
 }
 
 .count {
-  width: 120px;
+  width: 12%;
 }
 
 .sum-time {
-  width: 150px;
+  width: 13%;
 }
 
 .type {
-  width: 60px;
+  width: 8%;
 }