fix: pop segment list

package-lock.json

@@ -15,6 +15,7 @@
         "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",
@@ -9750,9 +9751,9 @@
       }
     },
     "node_modules/mitt": {
-      "version": "2.1.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
@@ -14819,6 +14820,11 @@
         "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",
@@ -22286,9 +22292,9 @@
       }
     },
     "mitt": {
-      "version": "2.1.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "mixin-deep": {
       "version": "1.3.2",
@@ -25853,6 +25859,13 @@
         "@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,6 +25,7 @@
     "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,6 +22,7 @@ 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();
@@ -29,6 +30,7 @@ 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

@@ -0,0 +1,22 @@
+/**
+ * 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

@@ -25,11 +25,17 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter :needQuery="needQuery" :data="data" @get="getService" />
+      <Filter :needQuery="needQuery" :data="data" @get="getService" @search="popSegmentList" />
     </div>
     <div class="trace flex-h">
       <TraceList class="trace-list" :style="`width: ${currentWidth}px;`" />
-      <div @mouseover="showIcon = true" @mouseout="showIcon = false" @mouseup="showIcon = false">
+      <div
+        ref="dragger"
+        @mouseover="showIcon = true"
+        @mousedown="mousedown($event)"
+        @mouseout="showIcon = false"
+        @mouseup="mouseup"
+      >
         <div class="trace-line" />
         <span class="trace-icon" v-show="showIcon" @click="triggerArrow">
           <Icon class="trace-arrow" :icon-name="isLeft ? 'chevron-left' : 'chevron-right'" size="lg" />
@@ -47,6 +53,7 @@ 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({
@@ -58,12 +65,14 @@ limitations under the License. -->
     needQuery: { type: Boolean, default: true },
   });
   provide("options", props.data);
+  const defaultWidth = 280,
+    minArrowLeftWidth = 120;
   const serviceId = ref<string>("");
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const isLeft = ref<boolean>(true);
   const showIcon = ref<boolean>(false);
-  const currentWidth = ref<number>(280);
+  const currentWidth = ref<number>(defaultWidth);
   const isDrag = ref<boolean>(false);
 
   function removeWidget() {
@@ -72,14 +81,22 @@ limitations under the License. -->
   function getService(id: string) {
     serviceId.value = id;
   }
-  // The width of the trace-list is always determined by the direction of the arrow.
+  // When click the arrow, the width of the segment list is determined by the direction it points to.
   function triggerArrow() {
-    currentWidth.value = isLeft.value ? 0 : 280;
+    currentWidth.value = isLeft.value ? 0 : defaultWidth;
     isLeft.value = !isLeft.value;
+    setTimeout(() => {
+      emitter.emit("traceResize", "trace-arrow");
+    });
+  }
+  function popSegmentList() {
+    if (currentWidth.value >= defaultWidth) {
+      return;
+    }
+    currentWidth.value = defaultWidth;
+    isLeft.value = true;
+    emitter.emit("traceResize", "trace-search");
   }
-  const mousedown = () => {
-    isDrag.value = true;
-  };
   const mousemove = (event: MouseEvent) => {
     if (!isDrag.value) {
       return;
@@ -87,11 +104,18 @@ limitations under the License. -->
     const diffX = event.clientX;
     let leftWidth = document.querySelector(".trace-list")!.getBoundingClientRect();
     currentWidth.value = diffX - leftWidth.left;
-    isLeft.value = currentWidth.value >= 120;
+    isLeft.value = currentWidth.value >= minArrowLeftWidth;
+    emitter.emit("traceResize", "trace-move");
   };
   const mouseup = () => {
+    showIcon.value = false;
     isDrag.value = false;
   };
+  const mousedown = (event: MouseEvent) => {
+    if ((event.target as HTMLDivElement)?.className === "trace-line") {
+      isDrag.value = true;
+    }
+  };
   onMounted(() => {
     document.addEventListener("mousedown", mousedown);
     document.addEventListener("mousemove", mousemove);
@@ -101,6 +125,7 @@ limitations under the License. -->
     document.removeEventListener("mousedown", mousedown);
     document.removeEventListener("mousemove", mousemove);
     document.removeEventListener("mouseup", mouseup);
+    emitter.off("traceResize");
   });
 </script>
 <style lang="scss" scoped>

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

@@ -164,7 +164,7 @@ limitations under the License. -->
   }
 
   .trace-t-wrapper {
-    overflow: auto;
+    overflow: hidden;
     border-right: 1px solid var(--sw-trace-list-border);
   }
 

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

@@ -30,6 +30,7 @@ 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({
@@ -47,7 +48,6 @@ 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,
@@ -63,11 +63,13 @@ limitations under the License. -->
     loading.value = false;
 
     // monitor segment list width changes.
-    observer = new MutationObserver(() => {
+    emitter.on("traceResize", (eventTag: any) => {
+      if (eventTag == "trace-search") {
+        return;
+      }
       d3.selectAll(".d3-tip").remove();
       debounceFunc();
     });
-    observer.observe(document.querySelector(".trace-list")!, { attributes: true, attributeFilter: ["style"] });
 
     window.addEventListener("resize", debounceFunc);
   });
@@ -295,7 +297,7 @@ limitations under the License. -->
   onBeforeUnmount(() => {
     d3.selectAll(".d3-tip").remove();
     window.removeEventListener("resize", debounceFunc);
-    observer.disconnect();
+    emitter.off("traceResize");
   });
   watch(
     () => props.data,