From e9e588385bbac6edd0d8988988d1590251db86aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= Date: Tue, 10 Mar 2026 08:23:44 +0800 Subject: [PATCH] Replace JSON.parse(JSON.stringify()) with lodash-es cloneDeep for deep cloning Vue reactive data (S7784) Co-Authored-By: Claude Opus 4.6 --- package-lock.json | 58 ++++++++++++++----- package.json | 1 + .../Conformance/ConformanceSidebar.vue | 9 +-- .../ConformanceSidebar/ActSeqDrag.vue | 5 +- .../ConformanceSelectResult.vue | 3 +- .../ConformanceTimeRange.vue | 25 +++----- .../ConformanceSidebar/TimeRangeDuration.vue | 9 +-- .../Discover/Conformance/MoreModal.vue | 5 +- .../Discover/Map/Filter/TraceFilter.vue | 5 +- src/components/Discover/Map/SidebarTraces.vue | 7 ++- src/views/Files/FilesPage.vue | 5 +- 11 files changed, 76 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index 32f5450..8fc4c42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "i18next": "^25.8.14", "i18next-browser-languagedetector": "^8.2.1", "javascript-color-gradient": "^2.5.0", + "lodash-es": "^4.17.23", "mitt": "^3.0.1", "moment": "^2.30.1", "pinia": "^3.0.4", @@ -5932,6 +5933,12 @@ "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", "license": "MIT" }, + "node_modules/lodash-es": { + "version": "4.17.23", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz", + "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==", + "license": "MIT" + }, "node_modules/lodash.once": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", @@ -7676,7 +7683,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true, + "devOptional": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -8383,7 +8390,8 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.3.1.tgz", "integrity": "sha512-ht9Mx0eK+j4UO7fZvHNyCGOQEIj4d5+CZDYdxUCHGL4yvEhdDBH6PT4Lt12Ct+O+8qK8K1K31p7iiOghA8ewxQ==", - "dev": true + "dev": true, + "requires": {} }, "@acemir/cssom": { "version": "0.9.31", @@ -8512,7 +8520,8 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz", "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==", - "dev": true + "dev": true, + "requires": {} }, "@csstools/css-color-parser": { "version": "4.0.2", @@ -8528,7 +8537,8 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz", "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==", - "dev": true + "dev": true, + "requires": {} }, "@csstools/css-syntax-patches-for-csstree": { "version": "1.1.0", @@ -8830,7 +8840,8 @@ "version": "10.0.1", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz", "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==", - "dev": true + "dev": true, + "requires": {} }, "@eslint/object-schema": { "version": "3.0.2", @@ -8852,7 +8863,8 @@ "version": "1.15.0", "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz", "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==", - "dev": true + "dev": true, + "requires": {} }, "@hapi/address": { "version": "5.1.1", @@ -9946,7 +9958,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "8.2.0", @@ -10272,12 +10285,14 @@ "chartjs-adapter-moment": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz", - "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==" + "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==", + "requires": {} }, "chartjs-plugin-datalabels": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz", - "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==" + "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==", + "requires": {} }, "chartjs-plugin-dragdata": { "version": "2.3.1", @@ -10602,7 +10617,8 @@ "cytoscape-popper": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-4.0.1.tgz", - "integrity": "sha512-u2gYDMMvGSlAJbNfKvMljOM/p+BrHu0A4VcpELa+xJf54HoMn+nV0iuhALZx+O89b74SKJRy7jYo2WfkD5uvsw==" + "integrity": "sha512-u2gYDMMvGSlAJbNfKvMljOM/p+BrHu0A4VcpELa+xJf54HoMn+nV0iuhALZx+O89b74SKJRy7jYo2WfkD5uvsw==", + "requires": {} }, "cytoscape-spread": { "version": "3.0.0", @@ -10959,7 +10975,8 @@ "version": "10.1.8", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz", "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", - "dev": true + "dev": true, + "requires": {} }, "eslint-plugin-cypress": { "version": "6.1.0", @@ -11978,6 +11995,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==" }, + "lodash-es": { + "version": "4.17.23", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz", + "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==" + }, "lodash.once": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", @@ -13001,7 +13023,8 @@ "fdir": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", - "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==" + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "requires": {} } } }, @@ -13144,7 +13167,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true + "devOptional": true }, "ufo": { "version": "1.6.3", @@ -13251,7 +13274,8 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -13298,7 +13322,8 @@ "vue-chartjs": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz", - "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==" + "integrity": "sha512-jqxtL8KZ6YJ5NTv6XzrzLS7osyegOi28UGNZW0h9OkDL7Sh1396ht4Dorh04aKrl2LiSalQ84WtqiG0RIJb0tA==", + "requires": {} }, "vue-component-type-helpers": { "version": "2.2.12", @@ -13363,7 +13388,8 @@ "vue-toast-notification": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.1.3.tgz", - "integrity": "sha512-XNyWqwLIGBFfX5G9sK+clq3N3IPlhDjzNdbZaXkEElcotPlWs0wWZailk1vqhdtLYT/93Y4FHAVuzyatLmPZRA==" + "integrity": "sha512-XNyWqwLIGBFfX5G9sK+clq3N3IPlhDjzNdbZaXkEElcotPlWs0wWZailk1vqhdtLYT/93Y4FHAVuzyatLmPZRA==", + "requires": {} }, "vuedraggable": { "version": "4.1.0", diff --git a/package.json b/package.json index a24af9f..51739e5 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "i18next": "^25.8.14", "i18next-browser-languagedetector": "^8.2.1", "javascript-color-gradient": "^2.5.0", + "lodash-es": "^4.17.23", "mitt": "^3.0.1", "moment": "^2.30.1", "pinia": "^3.0.4", diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue index c1cdc97..8c60210 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar.vue @@ -165,6 +165,7 @@ import ConformanceRadioGroup from "./ConformanceSidebar/ConformanceRadioGroup.vu import ConformanceShowBar from "./ConformanceSidebar/ConformanceShowBar.vue"; import ConformanceTimeRange from "./ConformanceSidebar/ConformanceTimeRange.vue"; import ConformanceSelectResult from "./ConformanceSidebar/ConformanceSelectResult.vue"; +import { cloneDeep } from "lodash-es"; const $toast = useToast(); @@ -920,9 +921,7 @@ function getSequenceData() { task_seq: selectCfmSeqDirectly.value, }; isSubmitReset(); - isSubmitCfmSeqDirectly.value = JSON.parse( - JSON.stringify(selectCfmSeqDirectly.value), - ); + isSubmitCfmSeqDirectly.value = cloneDeep(selectCfmSeqDirectly.value); break; case "Eventually follows": dataToSave = { @@ -930,9 +929,7 @@ function getSequenceData() { task_seq: selectCfmSeqEventually.value, }; isSubmitReset(); - isSubmitCfmSeqEventually.value = JSON.parse( - JSON.stringify(selectCfmSeqEventually.value), - ); + isSubmitCfmSeqEventually.value = cloneDeep(selectCfmSeqEventually.value); break; case "Short loop(s)": dataToSave = { type: "short-loops" }; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue index 7280074..ddabddc 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue @@ -118,6 +118,7 @@ import { ref, computed, onBeforeUnmount } from "vue"; import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js"; import emitter from "@/utils/emitter"; +import { cloneDeep } from "lodash-es"; const props = defineProps(["data", "listSeq", "isSubmit", "category"]); @@ -129,7 +130,7 @@ const datadata = computed(() => { // Sort the Activity List let newData; if (props.data !== null) { - newData = JSON.parse(JSON.stringify(props.data)); + newData = cloneDeep(props.data); sortNumEngZhtw(newData); } return newData; @@ -195,7 +196,7 @@ function onEnd(evt) { } // created -const newlist = JSON.parse(JSON.stringify(props.listSeq)); +const newlist = cloneDeep(props.listSeq); listSequence.value = props.isSubmit ? newlist : []; emitter.on("reset", (data) => { listSequence.value = []; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue index 23e9986..dd6249d 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue @@ -200,6 +200,7 @@ import emitter from "@/utils/emitter"; import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue"; import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue"; import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue"; +import { cloneDeep } from "lodash-es"; const conformanceStore = useConformanceStore(); const { @@ -373,7 +374,7 @@ emitter.on("actListData", (data) => { state.containstTasksData = data; }); emitter.on("actRadioData", (newData) => { - const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data + const data = cloneDeep(newData); const categoryMapping = { cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"], diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue index 5532df8..c01a3fa 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue @@ -240,6 +240,7 @@ import { storeToRefs } from "pinia"; import { useConformanceStore } from "@/stores/conformance"; import emitter from "@/utils/emitter"; import TimeRangeDuration from "@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue"; +import { cloneDeep } from "lodash-es"; const conformanceStore = useConformanceStore(); const { @@ -613,21 +614,15 @@ emitter.on("isRadioChange", (data) => { switch (selectedRuleType.value) { case "Processing time": state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all"); - state.timeCfmPtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmPtEteAll), - ); + state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll); break; case "Waiting time": state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all"); - state.timeCfmWtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmWtEteAll), - ); + state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll); break; case "Cycle time": state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all"); - state.timeCfmCtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmCtEteAll), - ); + state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll); break; default: break; @@ -645,21 +640,15 @@ emitter.on("isRadioActSeqMoreChange", (data) => { switch (selectedRuleType.value) { case "Processing time": state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all"); - state.timeCfmPtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmPtEteAll), - ); + state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll); break; case "Waiting time": state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all"); - state.timeCfmWtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmWtEteAll), - ); + state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll); break; case "Cycle time": state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all"); - state.timeCfmCtEteAllDefault = JSON.parse( - JSON.stringify(state.timeCfmCtEteAll), - ); + state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll); break; default: break; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue index 8f12a2a..5f6e5a9 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue @@ -36,6 +36,7 @@ import { ref, watch } from "vue"; import Durationjs from "@/components/DurationInput.vue"; +import { cloneDeep } from "lodash-es"; const props = defineProps(["time", "select"]); const emit = defineEmits(["min-total-seconds", "max-total-seconds"]); @@ -55,10 +56,10 @@ const durationMax = ref(null); /** Deep-copies timeData min/max values to the Vue component boundaries. */ function setTimeValue() { // Deep copy the original timeData values - minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min)); - minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max)); - maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min)); - maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max)); + minVuemin.value = cloneDeep(timeData.value.min); + minVuemax.value = cloneDeep(timeData.value.max); + maxVuemin.value = cloneDeep(timeData.value.min); + maxVuemax.value = cloneDeep(timeData.value.max); } /** diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue index 0c2bdb9..888b7c4 100644 --- a/src/components/Discover/Conformance/MoreModal.vue +++ b/src/components/Discover/Conformance/MoreModal.vue @@ -125,6 +125,7 @@ import { ref, computed, watch, nextTick, useTemplateRef, onBeforeUnmount } from import { storeToRefs } from "pinia"; import { useConformanceStore } from "@/stores/conformance"; import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js"; +import { cloneDeep } from "lodash-es"; const props = defineProps([ "listModal", @@ -183,7 +184,7 @@ const traceList = computed(() => { const caseData = computed(() => { if (infiniteData.value !== null) { - const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data + const data = cloneDeep(infiniteData.value); data.forEach((item) => { item.facets.forEach((facet, index) => { item[`fac_${index}`] = facet.value; // Create a new key-value pair @@ -201,7 +202,7 @@ const caseData = computed(() => { }); const columnData = computed(() => { - const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data + const data = cloneDeep(props.cases); if (!data || data.length === 0) return []; const facetName = (facName) => facName diff --git a/src/components/Discover/Map/Filter/TraceFilter.vue b/src/components/Discover/Map/Filter/TraceFilter.vue index 4667d2a..56a9d5d 100644 --- a/src/components/Discover/Map/Filter/TraceFilter.vue +++ b/src/components/Discover/Map/Filter/TraceFilter.vue @@ -136,6 +136,7 @@ import { storeToRefs } from "pinia"; import { useAllMapDataStore } from "@/stores/allMapData"; import { useLoadingStore } from "@/stores/loading"; import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js"; +import { cloneDeep } from "lodash-es"; const emit = defineEmits(["filter-trace-selectArea"]); @@ -228,7 +229,7 @@ const chartData = computed(() => { }); const caseData = computed(() => { - const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data + const data = cloneDeep(infiniteData.value); data.forEach((item) => { item.attributes.forEach((attribute, index) => { item[`att_${index}`] = attribute.value; // Create a new key-value pair @@ -239,7 +240,7 @@ const caseData = computed(() => { }); const columnData = computed(() => { - const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data + const data = cloneDeep(baseCases.value); let result = [ { field: "id", header: "Case Id" }, { field: "started_at", header: "Start time" }, diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index 4642187..7ddeeba 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/src/components/Discover/Map/SidebarTraces.vue @@ -115,6 +115,7 @@ import { storeToRefs } from "pinia"; import { useLoadingStore } from "@/stores/loading"; import { useAllMapDataStore } from "@/stores/allMapData"; import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js"; +import { cloneDeep } from "lodash-es"; const props = defineProps(["sidebarTraces", "cases"]); const emit = defineEmits(["switch-Trace-Id"]); @@ -164,7 +165,7 @@ const traceList = computed(() => { }); const caseData = computed(() => { - const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data + const data = cloneDeep(infiniteData.value); data.forEach((item) => { item.attributes.forEach((attribute, index) => { item[`att_${index}`] = attribute.value; // Create a new key-value pair @@ -175,7 +176,7 @@ const caseData = computed(() => { }); const columnData = computed(() => { - const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data + const data = cloneDeep(props.cases); let result = [ { field: "id", header: "Case Id" }, { field: "started_at", header: "Start time" }, @@ -215,7 +216,7 @@ watch(showTraceId, (newValue, oldValue) => { watch(infiniteFirstCases, (newValue) => { if (infiniteFirstCases.value) - infiniteData.value = JSON.parse(JSON.stringify(newValue)); + infiniteData.value = cloneDeep(newValue); }); /** diff --git a/src/views/Files/FilesPage.vue b/src/views/Files/FilesPage.vue index 1d43f20..c8350c2 100644 --- a/src/views/Files/FilesPage.vue +++ b/src/views/Files/FilesPage.vue @@ -482,6 +482,7 @@ import { reallyDeleteInformation, } from "@/module/alertModal.js"; import { escapeHtml } from "@/utils/escapeHtml.js"; +import { cloneDeep } from "lodash-es"; const router = useRouter(); @@ -586,7 +587,7 @@ const isCompareDisabledButton = computed(() => { const reallyDeleteData = computed(() => { let result = []; if (store.allFiles.length !== 0) { - result = JSON.parse(JSON.stringify(store.allFiles)); + result = cloneDeep(store.allFiles); result = result.filter((file) => file.is_deleted === true); } return result; @@ -602,7 +603,7 @@ watch(filesTag, (newValue) => { watch(allFiles, (newValue) => { if (newValue !== null) - compareData.value = JSON.parse(JSON.stringify(newValue)); + compareData.value = cloneDeep(newValue); }); watch(