fix: add mutationObserverMap

src/utils/mutation.ts

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+export class mutationObserver {
+  private static mutationObserverMap: Map<string, MutationObserver> = new Map<string, MutationObserver>();
+
+  static create(key: string, callback: MutationCallback) {
+    const observer = new MutationObserver(callback);
+    mutationObserver.mutationObserverMap.set(key, observer);
+  }
+
+  static observe(key: string, target: Node, options?: MutationObserverInit) {
+    const observer = mutationObserver.mutationObserverMap.get(key);
+    if (observer) {
+      observer.observe(target, options);
+    }
+  }
+
+  static deleteObserve(key: string): void {
+    this.disconnect(key);
+    this.mutationObserverMap.delete(key);
+  }
+
+  static disconnect(key: string): void {
+    const observer = this.mutationObserverMap.get(key);
+    if (observer) {
+      observer.disconnect();
+    }
+  }
+}

src/views/dashboard/controls/Trace.vue

@@ -29,9 +29,14 @@ limitations under the License. -->
     </div>
     <div class="trace flex-h">
       <TraceList class="trace-list" :style="`width: ${currentWidth}px;`" />
-      <div @mouseover="showIcon = true" @mousedown="mousedown($event)" @mouseout="showIcon = false" @mouseup="mouseup">
+      <div
+        @mouseover="showIcon = true"
+        @mouseout="showIcon = false"
+        @mousedown="mousedown($event)"
+        @mouseup="mouseup($event)"
+      >
         <div class="trace-line" />
-        <span class="trace-icon" v-show="showIcon" @click="triggerArrow">
+        <span class="trace-icon" v-show="showIcon" @mousedown="triggerArrow" @mouseup="stopObserve($event)">
           <Icon class="trace-arrow" :icon-name="isLeft ? 'chevron-left' : 'chevron-right'" size="lg" />
         </span>
       </div>
@@ -47,7 +52,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";
+  import { mutationObserver } from "@/utils/mutation";
 
   /* global defineProps */
   const props = defineProps({
@@ -79,9 +84,7 @@ limitations under the License. -->
   function triggerArrow() {
     currentWidth.value = isLeft.value ? 0 : defaultWidth;
     isLeft.value = !isLeft.value;
-    setTimeout(() => {
-      emitter.emit("traceResize", "trace-arrow");
-    });
+    startObserve();
   }
   function popSegmentList() {
     if (currentWidth.value >= defaultWidth) {
@@ -89,7 +92,16 @@ limitations under the License. -->
     }
     currentWidth.value = defaultWidth;
     isLeft.value = true;
-    emitter.emit("traceResize", "trace-search");
+  }
+  function startObserve() {
+    mutationObserver.observe("trigger-resize", document.querySelector(".trace-list")!, {
+      attributes: true,
+      attributeFilter: ["style"],
+    });
+  }
+  function stopObserve(event: MouseEvent) {
+    mutationObserver.disconnect("trigger-resize");
+    event.stopPropagation();
   }
   const mousemove = (event: MouseEvent) => {
     if (!isDrag.value) {
@@ -99,15 +111,17 @@ limitations under the License. -->
     let leftWidth = document.querySelector(".trace-list")!.getBoundingClientRect();
     currentWidth.value = diffX - leftWidth.left;
     isLeft.value = currentWidth.value >= minArrowLeftWidth;
-    emitter.emit("traceResize", "trace-move");
   };
-  const mouseup = () => {
+  const mouseup = (event: MouseEvent) => {
     showIcon.value = false;
     isDrag.value = false;
+    stopObserve(event);
   };
   const mousedown = (event: MouseEvent) => {
     if ((event.target as HTMLDivElement)?.className === "trace-line") {
       isDrag.value = true;
+      startObserve();
+      event.stopPropagation();
     }
   };
   onMounted(() => {
@@ -119,7 +133,6 @@ 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/components/D3Graph/Index.vue

@@ -30,7 +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";
+  import { mutationObserver } from "@/utils/mutation";
 
   /* global defineProps, Nullable, defineExpose, Recordable */
   const props = defineProps({
@@ -63,10 +63,7 @@ limitations under the License. -->
     loading.value = false;
 
     // monitor segment list width changes.
-    emitter.on("traceResize", (eventTag: any) => {
-      if (eventTag == "trace-search") {
-        return;
-      }
+    mutationObserver.create("trigger-resize", () => {
       d3.selectAll(".d3-tip").remove();
       debounceFunc();
     });
@@ -297,7 +294,7 @@ limitations under the License. -->
   onBeforeUnmount(() => {
     d3.selectAll(".d3-tip").remove();
     window.removeEventListener("resize", debounceFunc);
-    emitter.off("traceResize");
+    mutationObserver.deleteObserve("trigger-resize");
   });
   watch(
     () => props.data,