From 1fe58f5f6c0098dcb88bd50d7ebe544d058a09b7 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 6 Mar 2025 17:10:54 +0800
Subject: [PATCH] build: remove `lodash` library (#454)

---
 package-lock.json                             |  6 +-
 package.json                                  |  2 -
 .../trace/components/D3Graph/Index.vue        | 81 ++++++++++---------
 .../related/trace/utils/trace-table.ts        | 80 ++++++++++--------
 vite.config.ts                                |  3 -
 5 files changed, 93 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3b45f61d..f6c65a10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "skywalking-booster-ui",
-  "version": "9.4.0",
+  "version": "10.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "skywalking-booster-ui",
-      "version": "9.4.0",
+      "version": "10.2.0",
       "dependencies": {
         "axios": "^1.7.5",
         "d3": "^7.3.0",
@@ -14,7 +14,6 @@
         "d3-tip": "^0.9.1",
         "echarts": "^5.2.2",
         "element-plus": "^2.9.4",
-        "lodash": "^4.17.21",
         "monaco-editor": "^0.34.1",
         "pinia": "^2.0.28",
         "vis-timeline": "^7.5.1",
@@ -32,7 +31,6 @@
         "@types/d3-tip": "^3.5.5",
         "@types/echarts": "^4.9.12",
         "@types/jsdom": "^20.0.1",
-        "@types/lodash": "^4.14.179",
         "@types/node": "^18.11.12",
         "@types/three": "^0.131.0",
         "@vitejs/plugin-vue": "^5.2.1",
diff --git a/package.json b/package.json
index 1efb5a16..8121fd8f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
     "element-plus": "^2.9.4",
-    "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
     "vis-timeline": "^7.5.1",
@@ -42,7 +41,6 @@
     "@types/d3-tip": "^3.5.5",
     "@types/echarts": "^4.9.12",
     "@types/jsdom": "^20.0.1",
-    "@types/lodash": "^4.14.179",
     "@types/node": "^18.11.12",
     "@types/three": "^0.131.0",
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index fda33eca..fe342b89 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -22,7 +22,6 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref, watch, onBeforeUnmount, onMounted } from "vue";
   import type { PropType } from "vue";
-  import _ from "lodash";
   import * as d3 from "d3";
   import ListGraph from "../../utils/d3-trace-list";
   import TreeGraph from "../../utils/d3-trace-tree";
@@ -120,15 +119,19 @@ limitations under the License. -->
         const item = props.data.find(
           (i: Span) => i.traceId === span.traceId && i.segmentId === span.segmentId && i.spanId === span.spanId - 1,
         );
-        const fixSpanKeyContent = {
-          traceId: span.traceId,
-          segmentId: span.segmentId,
-          spanId: span.spanId - 1,
-          parentSpanId: span.spanId - 2,
-        };
-        if (!item && !_.find(fixSpans, fixSpanKeyContent)) {
+        const content = fixSpans.find(
+          (i: Span) =>
+            i.traceId === span.traceId &&
+            i.segmentId === span.segmentId &&
+            i.spanId === span.spanId - 1 &&
+            i.parentSpanId === span.spanId - 2,
+        );
+        if (!item && !content) {
           fixSpans.push({
-            ...fixSpanKeyContent,
+            traceId: span.traceId,
+            segmentId: span.segmentId,
+            spanId: span.spanId - 1,
+            parentSpanId: span.spanId - 2,
             refs: [],
             endpointName: `VNode: ${span.segmentId}`,
             serviceCode: "VirtualNode",
@@ -161,22 +164,26 @@ limitations under the License. -->
         if (!exit) {
           const ref = span.refs[0];
           // create a known broken node.
-          const i = ref.parentSpanId;
-          const fixSpanKeyContent = {
-            traceId: ref.traceId,
-            segmentId: ref.parentSegmentId,
-            spanId: i,
-            parentSpanId: i > -1 ? 0 : -1,
-          };
-          if (!_.find(fixSpans, fixSpanKeyContent)) {
+          const parentSpanId = ref.parentSpanId > -1 ? 0 : -1;
+          const content = fixSpans.find(
+            (i: Span) =>
+              i.traceId === ref.traceId &&
+              i.segmentId === ref.parentSegmentId &&
+              i.spanId === ref.parentSpanId &&
+              i.parentSpanId === parentSpanId,
+          );
+          if (!content) {
             fixSpans.push({
-              ...fixSpanKeyContent,
+              traceId: ref.traceId,
+              segmentId: ref.parentSegmentId,
+              spanId: ref.parentSpanId,
+              parentSpanId,
               refs: [],
               endpointName: `VNode: ${ref.parentSegmentId}`,
               serviceCode: "VirtualNode",
               type: `[Broken] ${ref.type}`,
               peer: "",
-              component: `VirtualNode: #${i}`,
+              component: `VirtualNode: #${ref.parentSpanId}`,
               isError: true,
               isBroken: true,
               layer: "Broken",
@@ -187,16 +194,20 @@ limitations under the License. -->
             });
           }
           // if root broken node is not exist, create a root broken node.
-          if (fixSpanKeyContent.parentSpanId > -1) {
-            const fixRootSpanKeyContent = {
-              traceId: ref.traceId,
-              segmentId: ref.parentSegmentId,
-              spanId: 0,
-              parentSpanId: -1,
-            };
-            if (!_.find(fixSpans, fixRootSpanKeyContent)) {
+          if (parentSpanId > -1) {
+            const content = fixSpans.find(
+              (i: Span) =>
+                i.traceId === ref.traceId &&
+                i.segmentId === ref.parentSegmentId &&
+                i.spanId === 0 &&
+                i.parentSpanId === -1,
+            );
+            if (!content) {
               fixSpans.push({
-                ...fixRootSpanKeyContent,
+                traceId: ref.traceId,
+                segmentId: ref.parentSegmentId,
+                spanId: 0,
+                parentSpanId: -1,
                 refs: [],
                 endpointName: `VNode: ${ref.parentSegmentId}`,
                 serviceCode: "VirtualNode",
@@ -241,14 +252,12 @@ limitations under the License. -->
           }
         }
         if (s.isBroken) {
-          const children = _.filter(props.data, (span: Span) => {
-            return _.find(span.refs, {
-              traceId: s.traceId,
-              parentSegmentId: s.segmentId,
-              parentSpanId: s.spanId,
-            });
-          });
-          if (children.length > 0) {
+          const children = props.data.filter((span: Span) =>
+            span.refs.find(
+              (d) => d.traceId === s.traceId && d.parentSegmentId === s.segmentId && d.parentSpanId === s.spanId,
+            ),
+          );
+          if (children.length) {
             s.children.push(...children);
           }
         }
diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts
index c08b6992..02d98482 100644
--- a/src/views/dashboard/related/trace/utils/trace-table.ts
+++ b/src/views/dashboard/related/trace/utils/trace-table.ts
@@ -16,7 +16,6 @@
  */
 
 import type { Ref, Span, StatisticsSpan, StatisticsGroupRef, TraceTreeRef } from "@/types/trace";
-import lodash from "lodash";
 
 export default class TraceUtil {
   public static buildTraceDataList(data: Span[]): string[] {
@@ -91,15 +90,19 @@ export default class TraceUtil {
         const index = data.findIndex((patchSpan: Span) => {
           return patchSpan.segmentId === span.segmentId && patchSpan.spanId === span.spanId - 1;
         });
-        const fixSpanKeyContent = {
-          traceId: span.traceId,
-          segmentId: span.segmentId,
-          spanId: span.spanId - 1,
-          parentSpanId: span.spanId - 2,
-        };
-        if (index === -1 && !lodash.find(fixSpans, fixSpanKeyContent)) {
+        const content = fixSpans.find(
+          (i: Span) =>
+            i.traceId === span.traceId &&
+            i.segmentId === span.segmentId &&
+            i.spanId === span.spanId - 1 &&
+            i.parentSpanId === span.spanId - 2,
+        );
+        if (index === -1 && !content) {
           fixSpans.push({
-            ...fixSpanKeyContent,
+            traceId: span.traceId,
+            segmentId: span.segmentId,
+            spanId: span.spanId - 1,
+            parentSpanId: span.spanId - 2,
             refs: [],
             endpointName: `VNode: ${span.segmentId}`,
             serviceCode: "VirtualNode",
@@ -125,16 +128,20 @@ export default class TraceUtil {
           });
           if (index === -1) {
             // create a known broken node.
-            const parentSpanId: number = ref.parentSpanId;
-            const fixSpanKeyContent = {
-              traceId: ref.traceId,
-              segmentId: ref.parentSegmentId,
-              spanId: parentSpanId,
-              parentSpanId: parentSpanId > -1 ? 0 : -1,
-            };
-            if (!lodash.find(fixSpans, fixSpanKeyContent)) {
+            const parentSpanId = ref.parentSpanId > -1 ? 0 : -1;
+            const item = fixSpans.find(
+              (i: Span) =>
+                i.traceId === ref.traceId &&
+                i.segmentId === ref.parentSegmentId &&
+                i.spanId === ref.parentSpanId &&
+                i.parentSpanId === parentSpanId,
+            );
+            if (!item) {
               fixSpans.push({
-                ...fixSpanKeyContent,
+                traceId: ref.traceId,
+                segmentId: ref.parentSegmentId,
+                spanId: ref.parentSpanId,
+                parentSpanId: parentSpanId,
                 refs: [],
                 endpointName: `VNode: ${ref.parentSegmentId}`,
                 serviceCode: "VirtualNode",
@@ -151,16 +158,20 @@ export default class TraceUtil {
               });
             }
             // if root broken node is not exist, create a root broken node.
-            if (fixSpanKeyContent.parentSpanId > -1) {
-              const fixRootSpanKeyContent = {
-                traceId: ref.traceId,
-                segmentId: ref.parentSegmentId,
-                spanId: 0,
-                parentSpanId: -1,
-              };
-              if (!lodash.find(fixSpans, fixRootSpanKeyContent)) {
+            if (parentSpanId > -1) {
+              const item = fixSpans.find(
+                (i: Span) =>
+                  i.traceId === ref.traceId &&
+                  i.segmentId === ref.parentSegmentId &&
+                  i.spanId === 0 &&
+                  i.parentSpanId === -1,
+              );
+              if (!item) {
                 fixSpans.push({
-                  ...fixRootSpanKeyContent,
+                  traceId: ref.traceId,
+                  segmentId: ref.parentSegmentId,
+                  spanId: 0,
+                  parentSpanId: -1,
                   refs: [],
                   endpointName: `VNode: ${ref.parentSegmentId}`,
                   serviceCode: "VirtualNode",
@@ -210,13 +221,14 @@ export default class TraceUtil {
           }
         }
         if (curSegment.isBroken) {
-          const children = lodash.filter(data, (span: Span) => {
-            return lodash.find(span.refs, {
-              traceId: curSegment.traceId,
-              parentSegmentId: curSegment.segmentId,
-              parentSpanId: curSegment.spanId,
-            });
-          }) as Span[];
+          const children = data.filter((span: Span) =>
+            span.refs.find(
+              (d) =>
+                d.traceId === curSegment.traceId &&
+                d.parentSegmentId === curSegment.segmentId &&
+                d.parentSpanId === curSegment.spanId,
+            ),
+          );
           if (children.length) {
             curSegment.children = curSegment.children || [];
             curSegment.children.push(...children);
diff --git a/vite.config.ts b/vite.config.ts
index 97b6d10c..0928bd3b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -90,9 +90,6 @@ export default ({ mode }: ConfigEnv): UserConfig => {
           assetFileNames: "static/[ext]/[name]-[hash].[ext]",
           manualChunks(id) {
             if (id.includes("node_modules")) {
-              if (id.includes("lodash")) {
-                return "lodash";
-              }
               if (id.includes("echarts")) {
                 return "echarts";
               }