fix: fix some issues

package-lock.json

@@ -15,7 +15,6 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.2.5",
         "lodash": "^4.17.21",
-        "mitt": "^3.0.1",
         "monaco-editor": "^0.34.1",
         "pinia": "^2.0.28",
         "vis-timeline": "^7.5.1",
@@ -9751,9 +9750,9 @@
       }
     },
     "node_modules/mitt": {
-      "version": "3.0.1",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
@@ -14820,11 +14819,6 @@
         "mitt": "^2.1.0"
       }
     },
-    "node_modules/vue-grid-layout/node_modules/mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-    },
     "node_modules/vue-i18n": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
@@ -22292,9 +22286,9 @@
       }
     },
     "mitt": {
-      "version": "3.0.1",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
     "mixin-deep": {
       "version": "1.3.2",
@@ -25859,13 +25853,6 @@
         "@interactjs/modifiers": "^1.10.2",
         "element-resize-detector": "^1.2.1",
         "mitt": "^2.1.0"
-      },
-      "dependencies": {
-        "mitt": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz",
-          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-        }
       }
     },
     "vue-i18n": {

package.json

@@ -25,7 +25,6 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.2.5",
     "lodash": "^4.17.21",
-    "mitt": "^3.0.1",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
     "vis-timeline": "^7.5.1",

src/main.ts

@@ -22,7 +22,6 @@ import i18n from "./locales";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import "./styles/index.ts";
 import "virtual:svg-icons-register";
-import mitt from "mitt";
 
 const app = createApp(App);
 const appStore = useAppStoreWithOut();
@@ -30,7 +29,6 @@ const appStore = useAppStoreWithOut();
 app.use(components);
 app.use(i18n);
 app.use(store);
-app.config.globalProperties.$mybus = mitt();
 mountApp();
 
 async function mountApp() {

src/utils/mitt.ts

@@ -1,22 +0,0 @@
-/**
- * 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.
- */
-
-import mitt from "mitt";
-
-const emitter = mitt();
-
-export default emitter;

src/views/dashboard/controls/Trace.vue

@@ -47,7 +47,6 @@ limitations under the License. -->
   import TraceDetail from "../related/trace/Detail.vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import emitter from "@/utils/mitt";
 
   /* global defineProps */
   const props = defineProps({
@@ -64,7 +63,7 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const isLeft = ref<boolean>(true);
   const showIcon = ref<boolean>(false);
-  const currentWidth = ref<number>(291);
+  const currentWidth = ref<number>(280);
   const isDrag = ref<boolean>(false);
 
   function removeWidget() {
@@ -75,11 +74,8 @@ limitations under the License. -->
   }
   // The width of the trace-list is always determined by the direction of the arrow.
   function triggerArrow() {
-    currentWidth.value = isLeft.value ? 0 : 291;
+    currentWidth.value = isLeft.value ? 0 : 280;
     isLeft.value = !isLeft.value;
-    setTimeout(() => {
-      emitter.emit("trace_resize");
-    });
   }
   const mousedown = () => {
     isDrag.value = true;
@@ -92,7 +88,6 @@ limitations under the License. -->
     let leftWidth = document.querySelector(".trace-list")!.getBoundingClientRect();
     currentWidth.value = diffX - leftWidth.left;
     isLeft.value = currentWidth.value >= 120;
-    emitter.emit("trace_resize");
   };
   const mouseup = () => {
     isDrag.value = false;

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

@@ -188,6 +188,7 @@ limitations under the License. -->
   }
 
   .list {
+    min-width: 120px;
     width: 100%;
   }
 

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

@@ -30,7 +30,6 @@ limitations under the License. -->
   import SpanDetail from "./SpanDetail.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { debounce } from "@/utils/debounce";
-  import emitter from "@/utils/mitt";
 
   /* global defineProps, Nullable, defineExpose, Recordable */
   const props = defineProps({
@@ -48,6 +47,7 @@ limitations under the License. -->
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
   const debounceFunc = debounce(draw, 500);
+  let observer: MutationObserver;
 
   defineExpose({
     tree,
@@ -61,9 +61,14 @@ limitations under the License. -->
     }
     draw();
     loading.value = false;
-    emitter.on("trace_resize", () => {
+
-      draw();
+    // monitor segment list width changes.
+    observer = new MutationObserver(() => {
+      d3.selectAll(".d3-tip").remove();
+      debounceFunc();
     });
+    observer.observe(document.querySelector(".trace-list")!, { attributes: true, attributeFilter: ["style"] });
+
     window.addEventListener("resize", debounceFunc);
   });
 
@@ -290,6 +295,7 @@ limitations under the License. -->
   onBeforeUnmount(() => {
     d3.selectAll(".d3-tip").remove();
     window.removeEventListener("resize", debounceFunc);
+    observer.disconnect();
   });
   watch(
     () => props.data,