From 1d621bf3044e81fae12a3785ebcf2dba19a21ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Sat, 7 Mar 2026 20:03:19 +0800
Subject: [PATCH] Translate all Chinese comments and strings to English

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/assets/base.css                           |  2 +-
 src/assets/tailwind.css                       |  2 +-
 src/assets/vendors.css                        |  4 +-
 src/components/AccountMenu/AcctMenu.vue       |  4 +-
 src/components/ButtonFilled.vue               |  2 +-
 .../Conformance/ConformanceResults.vue        | 52 +++++------
 .../Conformance/ConformanceSidebar.vue        | 52 +++++------
 .../ConformanceSidebar/ActSeqDrag.vue         | 12 +--
 .../ConformanceRadioGroup.vue                 |  2 +-
 .../ConformanceSelectResult.vue               |  4 +-
 .../ConformanceSidebar/ConformanceShowBar.vue |  4 +-
 .../ConformanceSidebar/TimeRangeDuration.vue  |  2 +-
 .../Discover/Conformance/MoreModal.vue        | 26 +++---
 .../Discover/Map/Filter/ActAndSeq.vue         | 12 +--
 src/components/Discover/Map/Filter/ActOcc.vue |  2 +-
 .../Discover/Map/Filter/ActOccCase.vue        |  4 +-
 .../Discover/Map/Filter/Attributes.vue        | 92 +++++++++----------
 src/components/Discover/Map/Filter/Funnel.vue | 12 +--
 .../Discover/Map/Filter/Timeframes.vue        | 64 ++++++-------
 src/components/Discover/Map/Filter/Trace.vue  | 38 ++++----
 src/components/Discover/Map/SidebarFilter.vue | 16 ++--
 src/components/Discover/Map/SidebarState.vue  |  8 +-
 src/components/Discover/Map/SidebarTraces.vue | 26 +++---
 src/components/Discover/Map/SidebarView.vue   |  8 +-
 src/components/Discover/StatusBar.vue         |  2 +-
 src/components/File/UploadModal.vue           | 14 +--
 src/components/Header.vue                     |  2 +-
 src/components/Navbar.vue                     | 26 +++---
 src/components/durationjs.vue                 |  4 +-
 src/components/icons/IconChecked.vue          |  2 +-
 src/constants/constants.js                    | 26 +++---
 src/main.ts                                   |  2 +-
 src/module/alertModal.js                      | 34 +++----
 src/module/cytoscapeMap.js                    | 84 ++++++++---------
 src/module/cytoscapeMapTrace.js               | 18 ++--
 src/module/setChartData.js                    | 30 +++---
 src/module/timeLabel.js                       | 18 ++--
 src/plugins/myPiniaPlugin.ts                  |  2 +-
 src/router/index.ts                           | 38 ++++----
 src/stores/acctMgmt.ts                        | 10 +-
 src/stores/allMapData.ts                      | 18 ++--
 src/stores/compare.ts                         |  2 +-
 src/stores/conformance.ts                     | 20 ++--
 src/stores/conformanceInput.ts                |  2 +-
 src/stores/cytoscapeStore.ts                  |  2 +-
 src/stores/files.ts                           | 16 ++--
 src/stores/login.ts                           | 10 +-
 src/stores/mapPathStore.ts                    | 34 +++----
 .../AccountAdmin/AccountAdmin.vue             |  2 +-
 .../ModalAccountEditCreate.vue                | 26 +++---
 src/views/Compare/Dashboard/Compare.vue       |  4 +-
 src/views/Discover/Performance/FreqChart.vue  | 34 +++----
 src/views/Discover/Performance/index.vue      |  4 +-
 src/views/Files/Files.vue                     | 10 +-
 src/views/Login/Login.vue                     |  4 +-
 src/views/MainContainer.vue                   |  6 +-
 src/views/Upload/index.vue                    | 42 ++++-----
 57 files changed, 499 insertions(+), 499 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 24ef516..a64364d 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -7,7 +7,7 @@
    Base CSS layer with global font, validation, height,
    and PrimeVue sidebar overrides. */
 
-/* 全域字型 */
+/* Global font */
 @layer base {
   html {
     font-family: 'Roboto', sans-serif, system-ui;
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 36cfd2e..eaf8d6e 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -7,7 +7,7 @@
    Tailwind CSS theme configuration with custom colors,
    font sizes, breakpoints, and animations. */
 
-/* 引入 Google fonts */
+/* Import Google fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 @import "tailwindcss" layer(tailwind-base);
diff --git a/src/assets/vendors.css b/src/assets/vendors.css
index d6fdaaf..a308937 100644
--- a/src/assets/vendors.css
+++ b/src/assets/vendors.css
@@ -69,7 +69,7 @@
 .p-inputswitch .p-inputswitch-slider:before {
   @apply !w-5 !h-5 !left-0.5
 }
-/* slider 滑塊 */
+/* slider */
 .p-slider .p-slider-handle {
   @apply !h-3.5 !w-3.5 !border !border-primary
 }
@@ -106,7 +106,7 @@ p-radiobutton-icon */
 .p-datatable-resizable > .p-datatable-wrapper {
   @apply !overflow-x-visible
 }
-/* 蓋住 inline style 的 overflow-auto，才能使 thead 定位 */
+/* Override inline style overflow-auto so that thead can be positioned */
 .p-datatable-wrapper {
   overflow: unset !important;
 }
diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index 2433d5a..05d9cb8 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -6,7 +6,7 @@
           </span>
         </div>
         <ul class="w-full min-h-10">
-          <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
+          <!-- Not using a loop here because SVGs won't display if src is a variable -->
         <li v-if="isAdmin" id="btn_acct_mgmt"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
           items-center" @click="onBtnAcctMgmtClick">
@@ -105,7 +105,7 @@ const onBtnAcctMgmtClick = () => {
 /** Handles logout with unsaved-changes confirmation for Map and Conformance pages. */
 const onLogoutBtnClick = () => {
   if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
-    // 傳給 Map，通知 Sidebar 要關閉。
+    // Notify Map to close the Sidebar.
     emitter.emit('leaveFilter', false);
     leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
   } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
diff --git a/src/components/ButtonFilled.vue b/src/components/ButtonFilled.vue
index a1bbb95..7d047d0 100644
--- a/src/components/ButtonFilled.vue
+++ b/src/components/ButtonFilled.vue
@@ -1,4 +1,4 @@
-<!-- Filled 版本的按鈕的背景是填滿的 -->
+<!-- The filled version of the button has a solid background -->
 <template>
     <button class="button-filled-component w-[80px] h-[32px] rounded-full
         flex text-[#FFFFFF]
diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue
index e1f1eba..b796c8c 100644
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -317,7 +317,7 @@ const convertSecToDay = (sec) => {
  * @param {number} no - The trace number.
  */
 const openMore = async (no) => {
-  // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
+  // Use async/await to prevent errors caused by asynchronous data not being available yet
   issuesNo.value = no;
   await conformanceStore.getConformanceIssue(no);
   traceId.value = await issueTraces.value[0].id;
@@ -330,7 +330,7 @@ const openMore = async (no) => {
  * @param {number} no - The trace number.
  */
 const openLoopMore = async (no) => {
-  // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
+  // Use async/await to prevent errors caused by asynchronous data not being available yet
   loopNo.value = no;
   await conformanceStore.getConformanceLoop(no);
   looptraceId.value = await loopTraces.value[0].id;
@@ -428,9 +428,9 @@ const setConformanceTempReportData = (newData) => {
     result.timeTrend.yMin = newData.charts.time.y_axis.min;
   }
 
-  setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
-  setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, newData.charts.cases.x_axis.max, newData.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
-  if(newData.charts.time) setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMin); // 建立圖表 Time Chart.js
+  setRateChartData(result.charts.rate.data); // Build the Rate Chart.js chart
+  setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, newData.charts.cases.x_axis.max, newData.charts.cases.x_axis.min); // Build the Cases Chart.js chart
+  if(newData.charts.time) setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMin); // Build the Time Chart.js chart
   return result;
 };
 
@@ -446,8 +446,8 @@ const setRateChartData = (chartData) => {
         label: 'Rate',
         data: chartData,
         fill: false,
-        pointRadius: 0, // 隱藏點
-        pointHoverRadius: 0, // 隱藏點的 hover
+        pointRadius: 0, // Hide data points
+        pointHoverRadius: 0, // Hide data points on hover
         tension: 0.4,
         borderColor: '#0099FF',
         x: 'x',
@@ -467,9 +467,9 @@ const setRateChartData = (chartData) => {
       }
     },
     plugins: {
-      legend: false, // 圖例
+      legend: false, // Hide legend
       tooltip: {
-        enabled: false // 隱藏 工具提示框
+        enabled: false // Hide tooltip
       }
     },
     scales: {
@@ -479,17 +479,17 @@ const setRateChartData = (chartData) => {
           display: false,
         },
         grid: {
-          display: false, // 隱藏 x 軸網格
+          display: false, // Hide x-axis grid lines
         },
         border: {
           color: '#334155',
         },
       },
       y: {
-        beginAtZero: true, // scale 包含 0
+        beginAtZero: true, // Scale includes 0
         suggestedMin: 0,
         suggestedMax: 1,
-        ticks:{ // 設定間隔數值
+        ticks:{ // Set tick intervals
           includeBounds: true,
           color: '#334155',
           align: 'inner',
@@ -500,7 +500,7 @@ const setRateChartData = (chartData) => {
           },
         },
         grid: {
-          display: false, // 隱藏 y 軸網格
+          display: false, // Hide y-axis grid lines
         },
         border: {
           color: '#334155',
@@ -550,7 +550,7 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
         mode: 'index',
         intersect: false
       },
-      legend: false, // 圖例
+      legend: false, // Hide legend
     },
     scales: {
       x: {
@@ -559,7 +559,7 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
           display: false,
         },
         grid: {
-          display: false, // 隱藏 x 軸網格
+          display: false, // Hide x-axis grid lines
         },
         border: {
           color: '#334155',
@@ -567,7 +567,7 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
       },
       y: {
         stacked: true,
-        beginAtZero: true, // scale 包含 0
+        beginAtZero: true, // Scale includes 0
         ticks:{
           color: '#334155',
           align: 'inner',
@@ -578,7 +578,7 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
           },
         },
         grid: {
-          // display: false, // 隱藏 y 軸網格
+          // display: false, // Hide y-axis grid lines
           color: function(context) {
             return context.tick.value === 0 ? '#334155' : null;
           },
@@ -647,18 +647,18 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
       }
     },
     plugins: {
-      legend: false, // 圖例
+      legend: false, // Hide legend
       tooltip: false,
     },
     scales: {
       x: {
         ticks: {
-          maxRotation: 0, // 不旋轉 lable 0~50
+          maxRotation: 0, // Do not rotate labels (0~50)
           color: '#334155',
           display: true,
         },
         grid: {
-          display: false, // 隱藏 x 軸網格
+          display: false, // Hide x-axis grid lines
         },
         title: {
           display: true,
@@ -667,18 +667,18 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
         },
       },
       y: {
-        beginAtZero: true, // scale 包含 0
+        beginAtZero: true, // Scale includes 0
         max: max,
-        ticks: { // 設定間隔數值
-          display: false, // 隱藏數值，只顯示格線
+        ticks: { // Set tick intervals
+          display: false, // Hide values, only show grid lines
           stepSize: max / 4,
         },
         grid: {
           color: 'rgba(100,116,139)',
-          drawTicks: false // 隱藏左側多的空間
+          drawTicks: false // Hide extra space on the left
         },
         border: {
-          display: false, // 隱藏左側多出來的線
+          display: false, // Hide the extra border line on the left
         },
         title: {
           display: true,
@@ -705,7 +705,7 @@ watch(conformanceTempReportData, (newValue) => {
 emitter.on('coverPlate', boolean => {
   isCoverPlate.value = boolean;
 });
-// 取得 selectTimeTange 給 Tiem Trend 使用
+// Get selectTimeRange for use by Time Trend
 emitter.on('timeRangeMaxMin', newData => selectDurationTime.value = newData);
 </script>
 <style scoped>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 2d8b11b..2e12230 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -201,7 +201,7 @@ const selectCfmCtEteEnd = ref(null);
 const selectCfmCtEteSEStart = ref(null);
 const selectCfmCtEteSEEnd = ref(null);
 const isAlreadySubmit = ref(false);
-const isSubmittedData = ref(null); // 已 Apply 後，沒有重新改變規則的 Data
+const isSubmittedData = ref(null); // Data after Apply, unchanged unless rules are modified
 const isSubmitTask = ref(null);
 const isSubmitStartAndEnd = ref(null); // Activity sequence
 const isSubmitCfmSeqDirectly = ref([]);
@@ -247,7 +247,7 @@ const isSubmitShowDataSeq = ref({
   taskEnd: null,
   isStartSelected: null,
   isEndSelected: null
-}); // To Start & End 連動資料
+}); // Linked data for Start & End
 const isSubmitShowDataPtEte = ref({
   task: null,
   taskStart: null,
@@ -348,7 +348,7 @@ watch(isSubmittedData, (newValue) => {
   isSubmittedData.value = newValue;
 });
 
-// 打開 rule 檔要顯示儲存的選項、規則、時間
+// When opening a rule file, display the saved options, rules, and time
 watch(conformanceTempReportData, (newValue) => {
   setTimeout(() => {
     if(newValue !== null) {
@@ -357,11 +357,11 @@ watch(conformanceTempReportData, (newValue) => {
       isSubmittedData.value = newValue.rule;
       isAlreadySubmit.value = true;
       switch (rule.type) {
-        case 'contains-tasks': // Rule Type 選 Have activity 的行為
+        case 'contains-tasks': // Behavior when Rule Type is Have activity
           selectedRuleType.value = 'Have activity';
           isSubmitTask.value = rule.tasks;
           break;
-        case 'start-end': // Rule Type 選 Activity sequence 的行為
+        case 'start-end': // Behavior when Rule Type is Activity sequence
           selectedRuleType.value = 'Activity sequence';
           selectedActivitySequence.value = 'Start & End';
           isSubmitStartAndEnd.value = [
@@ -369,7 +369,7 @@ watch(conformanceTempReportData, (newValue) => {
             {category: 'End', task: rule.ends_with},
           ];
           break;
-        case 'directly-follows': // Activity Sequence 選 Sequence 的行為
+        case 'directly-follows': // Behavior when Activity Sequence is Sequence
           selectedRuleType.value = 'Activity sequence';
           selectedActivitySequence.value = 'Sequence';
           selectedMode.value = 'Directly follows';
@@ -391,7 +391,7 @@ watch(conformanceTempReportData, (newValue) => {
           selectedActivitySequence.value = 'Sequence';
           selectedMode.value = 'Self loop(s)';
           break;
-        case 'task-duration': // Rule Type 選 Activity duration 的行為
+        case 'task-duration': // Behavior when Rule Type is Activity duration
           selectedRuleType.value = 'Activity duration';
           selectDurationData.value = [rule.task];
           isSubmitDurationData.value = [rule.task];
@@ -400,7 +400,7 @@ watch(conformanceTempReportData, (newValue) => {
             rule: { min: rule.min, max: rule.max},
           };
           break;
-        case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為
+        case 'processing-time-end-to-end-whole': // Behavior when Rule Type is Processing time
           selectedRuleType.value = 'Processing time';
           selectedProcessScope.value = 'End to end';
           selectedActSeqMore.value = 'All';
@@ -489,7 +489,7 @@ watch(conformanceTempReportData, (newValue) => {
           };
           isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
           break;
-        case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為
+        case 'waiting-time-end-to-end-whole': // Behavior when Rule Type is Waiting time
           selectedRuleType.value = 'Waiting time';
           selectedProcessScope.value = 'End to end';
           selectedActSeqMore.value = 'All';
@@ -578,7 +578,7 @@ watch(conformanceTempReportData, (newValue) => {
           };
           isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
           break;
-        case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為
+        case 'cycle-time-end-to-end-whole': // Behavior when Rule Type is Cycle time
           selectedRuleType.value = 'Cycle time';
           selectedProcessScope.value = 'End to end';
           selectedActSeqMore.value = 'All';
@@ -651,7 +651,7 @@ function maxTotalSeconds(e) {
  * select Time Reset
  */
 function selectTimeReset() {
-  // 不包含 selectDurationTime
+  // Does not include selectDurationTime
   selectConformanceTask.value = null; // Have activity
   selectConformanceStartAndEnd.value = null; // Activity Sequence
   selectCfmSeqStart.value = null;
@@ -686,7 +686,7 @@ function selectTimeReset() {
  * is submit select Reset
  */
 function isSubmitReset() {
-  // 不包含 isSubmittedData
+  // Does not include isSubmittedData
   isSubmitTask.value = null;
   isSubmitStartAndEnd.value = null;
   isSubmitCfmSeqDirectly.value = [];
@@ -731,17 +731,17 @@ function isSubmitReset() {
  * Clears all form selections and resets the sidebar state.
  */
 function reset() {
-  // Results page Cover Plate(遮罩為 ture)
+  // Results page cover plate (mask enabled)
   emitter.emit('coverPlate', true);
   // is submit select Reset
   isSubmitReset();
-  isSubmittedData.value = null; // 已 Apply 後，沒有重新改變規則的 Data
+  isSubmittedData.value = null; // Data after Apply, unchanged unless rules are modified
   isAlreadySubmit.value = false;
 
-  // 其他子元件 reset
+  // Reset other child components
   selectTimeReset();
   emitter.emit('reset', null);
-  // reset 成功訊息
+  // Reset success message
   $toast.success(i18next.t("Conformance.RuleCleared"));
   isShowBarOpen.value = true;
 }
@@ -783,22 +783,22 @@ async function submitConformance() {
   emitter.emit('timeRangeMaxMin', selectDurationTime.value);
 
   switch (selectedRuleType.value) {
-      case 'Have activity': // Rule Type 選 Have activity 的行為
+      case 'Have activity': // Behavior when Rule Type is Have activity
           dataToSave = getHaveActivityData();
           break;
-      case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
+      case 'Activity sequence': // Behavior when Rule Type is Activity sequence
           dataToSave = getActivitySequenceData();
           break;
-      case 'Activity duration': // Rule Type 選 Activity duration 的行為
+      case 'Activity duration': // Behavior when Rule Type is Activity duration
           dataToSave = getActivityDurationData();
           break;
-      case 'Processing time': // Rule Type 選 Processing time 的行為
+      case 'Processing time': // Behavior when Rule Type is Processing time
           dataToSave = getProcessingTimeData();
           break;
-      case 'Waiting time': // Rule Type 選 Waiting time 的行為
+      case 'Waiting time': // Behavior when Rule Type is Waiting time
           dataToSave = getWaitingTimeData();
           break;
-      case 'Cycle time': // Rule Type 選 Cycle time 的行為
+      case 'Cycle time': // Behavior when Rule Type is Cycle time
           dataToSave = getCycleTimeData();
           break;
   }
@@ -812,8 +812,8 @@ async function submitConformance() {
 
   isLoading.value = true;
   isAlreadySubmit.value = true;
-  isSubmittedData.value = dataToSave; // 已 Apply 後，沒有重新改變規則的 Data
-  conformanceRuleData.value = dataToSave; // 給存檔的 Data
+  isSubmittedData.value = dataToSave; // Data after Apply, unchanged unless rules are modified
+  conformanceRuleData.value = dataToSave; // Data for saving to file
   await conformanceStore.addConformanceCheckId(dataToSave);
   await conformanceStore.getConformanceReport();
   isShowBarOpen.value = false;
@@ -1580,7 +1580,7 @@ function checkStartAndEnd(start, end) {
 
 // created() logic
 isShowBarOpen.value = !(conformanceLogCreateCheckId.value || conformanceFilterCreateCheckId.value);
-// 選取 list 的結果
+// Result of list selection
 emitter.on('actListData', (data) => {
   selectConformanceTask.value = data;
 });
@@ -1588,7 +1588,7 @@ emitter.on('actListData', (data) => {
 setTaskByCategoryOnRadioEmitting();
 setTaskByCategoryOnListSeqEmitting();
 
-// Radio 切換時，資料要清空
+// Clear data when radio selection changes
 emitter.on('isRadioChange', (data) => {
   if(data) {
     selectTimeReset();
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
index 38e540e..c4a6ca5 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -65,7 +65,7 @@ const lastItemIndex = ref(null);
 const isSelect = ref(true);
 
 const datadata = computed(() => {
-  // Activity List 要排序
+  // Sort the Activity List
   let newData;
   if(props.data !== null) {
     newData = JSON.parse(JSON.stringify(props.data));
@@ -108,10 +108,10 @@ function getComponentData() {
 function onStart(evt) {
   const lastChild = evt.to.lastChild.lastChild;
   lastChild.style.display = 'none';
-  // 隱藏拖曳元素原位置
+  // Hide the dragged element at its original position
   const originalElement = evt.item;
   originalElement.style.display = 'none';
-  // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  // When dragging the last element, hide the arrow of the second-to-last element
   const listIndex = listSequence.value.length - 1;
   if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
 }
@@ -120,16 +120,16 @@ function onStart(evt) {
  * Element dragging ended
  */
 function onEnd(evt) {
-  // 顯示拖曳元素
+  // Show the dragged element
   const originalElement = evt.item;
   originalElement.style.display = '';
-  // 拖曳結束要顯示箭頭，但最後一個不用
+  // Show the arrow after drag ends, except for the last element
   const lastChild = evt.item.lastChild;
   const listIndex = listSequence.value.length - 1;
   if (evt.oldIndex !== listIndex) {
     lastChild.style.display = '';
   }
-  // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  // Reset: hide the second-to-last element's arrow when dragging the last element
   lastItemIndex.value = null;
 }
 
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
index ef0880b..5ab79f9 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -110,7 +110,7 @@ function changeRadio() {
   selectedProcessScope.value = 'End to end';
   selectedActSeqMore.value = 'All';
   selectedActSeqFromTo.value = 'From';
-  emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
+  emitter.emit('isRadioChange', true); // Clear data when switching radio buttons
 }
 /** Emits event when the activity sequence radio changes. */
 function changeRadioSeq() {
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
index 57ab734..3eafe45 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -190,7 +190,7 @@ emitter.on('actListData', (data) => {
   state.containstTasksData = data;
 });
 emitter.on('actRadioData', (newData) => {
-  const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data
 
   const categoryMapping = {
     'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
@@ -252,7 +252,7 @@ emitter.on('getListSequence', (data) => {
 emitter.on('reset', (data) => {
   reset();
 });
-// Radio 切換時，資料要清空
+// Clear data when switching radio buttons
 emitter.on('isRadioChange', (data) => {
   if(data) reset();
 });
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index dcc5534..ca684bf 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -224,7 +224,7 @@ const cfmCtEteSEEndData = computed(() => {
   return isStartSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'start', task.value) : setTaskData(cfmCtEteSE.value, 'end');
 });
 
-// Watchers - 解決儲存後的 Rule 檔，無法重新更改規則之問題
+// Watchers - Fix issue where saved rule files could not be re-edited
 watch(() => props.isSubmitShowDataSeq, (newValue) => {
   taskStart.value = newValue.taskStart;
   taskEnd.value = newValue.taskEnd;
@@ -258,7 +258,7 @@ watch(() => props.isSubmitShowDataCt, (newValue) => {
  */
 function setTaskData(data, category) {
   let newData = data.map(i => i[category]);
-  newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
+  newData = [...new Set(newData)]; // Set is a collection type that only stores unique values.
   return newData;
 }
 /**
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index 92a3496..5fd0cb0 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -42,7 +42,7 @@ const durationMax = ref(null);
 
 /** Deep-copies timeData min/max values to the Vue component boundaries. */
 function setTimeValue() {
-  // 深拷貝原始 timeData 的內容
+  // 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));
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index c0ec3c4..207bb7e 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -93,7 +93,7 @@ const contentClass = ref('!bg-neutral-100 border-t border-neutral-300 h-full');
 const showTraceId = ref(null);
 const infiniteData = ref(null);
 const maxItems = ref(false);
-const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const startNum = ref(0);
 const processMap = ref({
   nodes:[],
@@ -121,24 +121,24 @@ const traceList = computed(() => {
 
 const caseData = computed(() => {
   if(infiniteData.value !== null){
-    const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+    const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
     data.forEach(item => {
       item.facets.forEach((facet, index) => {
-        item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
+        item[`fac_${index}`] = facet.value; // Create a new key-value pair
       });
-      delete item.facets; // 刪除原本的 facets 屬性
+      delete item.facets; // Remove the original facets property
 
       item.attributes.forEach((attribute, index) => {
-        item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+        item[`att_${index}`] = attribute.value; // Create a new key-value pair
       });
-      delete item.attributes; // 刪除原本的 attributes 屬性
+      delete item.attributes; // Remove the original attributes property
     })
     return data;
   }
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
   const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
 
   const result = [
@@ -152,7 +152,7 @@ const columnData = computed(() => {
 });
 
 // watch
-watch(() => props.listModal, (newValue) => { // 第一次打開 Modal 要繪圖
+watch(() => props.listModal, (newValue) => { // Draw the chart when the modal is opened for the first time
   if(newValue) createCy();
 });
 
@@ -161,7 +161,7 @@ watch(() => props.taskSeq, (newValue) => {
 });
 
 watch(() => props.traceId, (newValue) => {
-  // 當 traceId 屬性變化時更新 showTraceId
+  // Update showTraceId when the traceId prop changes
   showTraceId.value = newValue;
 });
 
@@ -210,15 +210,15 @@ async function switchCaseData(id) {
   if(props.category === 'issue') result = await conformanceStore.getConformanceTraceDetail(props.listNo, id, 0);
   else if(props.category === 'loop') result = await conformanceStore.getConformanceLoopsTraceDetail(props.listNo, id, 0);
   infiniteData.value = await result;
-  showTraceId.value = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
+  showTraceId.value = id; // Set after getDetail so the case table finishes loading before switching showTraceId
 }
 /**
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
 function setNodesData(){
-  // 避免每次渲染都重複累加
+  // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
-  // 將 api call 回來的資料帶進 node
+  // Populate nodes with data returned from the API call
   if(props.taskSeq !== null) {
     props.taskSeq.forEach((node, index) => {
       processMap.value.nodes.push({
@@ -252,7 +252,7 @@ function setEdgesData(){
       });
     });
   };
-  // 關係線數量筆節點少一個
+  // The number of edges is one less than the number of nodes
   processMap.value.edges.pop();
 }
 /**
diff --git a/src/components/Discover/Map/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue
index 4f836de..d2ec503 100644
--- a/src/components/Discover/Map/Filter/ActAndSeq.vue
+++ b/src/components/Discover/Map/Filter/ActAndSeq.vue
@@ -93,7 +93,7 @@ const filteredData = ref(props.filterTaskData);
 const lastItemIndex = ref(null);
 
 const data = computed(() => {
-  // Activity List 要排序
+  // Sort the Activity List
   filteredData.value = filteredData.value.sort((x, y) => {
     const diff = y.occurrences - x.occurrences;
     return diff !== 0 ? diff : sortNumEngZhtwForFilter(x.label, y.label);
@@ -139,10 +139,10 @@ function getComponentData() {
 function onStart(evt) {
   const lastChild = evt.to.lastChild.lastChild;
   lastChild.style.display = 'none';
-  // 隱藏拖曳元素原位置
+  // Hide the dragged element at its original position
   const originalElement = evt.item;
   originalElement.style.display = 'none';
-  // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  // When dragging the last element, hide the arrow of the second-to-last element
   const listIndex = listSequence.value.length - 1;
   if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
 }
@@ -152,16 +152,16 @@ function onStart(evt) {
  * @param {Event} evt - The drag end event.
  */
 function onEnd(evt) {
-  // 顯示拖曳元素
+  // Show the dragged element
   const originalElement = evt.item;
   originalElement.style.display = '';
-  // 拖曳結束要顯示箭頭，但最後一個不用
+  // Show the arrow after drag ends, except for the last element
   const lastChild = evt.item.lastChild;
   const listIndex = listSequence.value.length - 1
   if (evt.oldIndex !== listIndex) {
       lastChild.style.display = '';
   }
-  // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  // Reset: hide the second-to-last element's arrow when dragging the last element
   lastItemIndex.value = null;
 }
 </script>
diff --git a/src/components/Discover/Map/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue
index 9bda951..156be7c 100644
--- a/src/components/Discover/Map/Filter/ActOcc.vue
+++ b/src/components/Discover/Map/Filter/ActOcc.vue
@@ -15,7 +15,7 @@
         </ColumnGroup>
         <Column selectionMode="single" bodyClass="!p-2 !border-0"></Column>
         <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
-        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+        <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
               <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
diff --git a/src/components/Discover/Map/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue
index 6e33aed..1e06785 100644
--- a/src/components/Discover/Map/Filter/ActOccCase.vue
+++ b/src/components/Discover/Map/Filter/ActOccCase.vue
@@ -16,7 +16,7 @@
         </ColumnGroup>
         <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
         <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
-        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+        <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
               <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
@@ -25,7 +25,7 @@
         </Column>
         <Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
         <Column field="occurrence_ratio" header="O2" bodyClass="!text-right !py-2 !border-0"></Column>
-        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+        <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
           <template #body="slotProps">
             <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
               <div class="h-full bg-primary" :style="progressWidth(slotProps.data.case_value)"></div>
diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index d6a11e1..d23cbef 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -42,7 +42,7 @@
                 </div>
               </template>
             </Column>
-            <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+            <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
               <template #body="slotProps">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                   <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_progress_bar)"></div>
@@ -71,7 +71,7 @@
                 </div>
               </template>
             </Column>
-            <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+            <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
               <template #body="slotProps">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                   <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_progress_bar)"></div>
@@ -152,9 +152,9 @@ const valueTypes = ['int', 'float', 'date'];
 const classTypes = ['boolean', 'string'];
 const chartData = ref({});
 const chartOptions = ref({});
-const chartComplete = ref(null); // 已出圖的 chart.js 資料
+const chartComplete = ref(null); // Rendered chart.js instance data
 const selectArea = ref(null);
-const selectRange = ref(1000); // 更改 select 的切分數
+const selectRange = ref(1000); // Number of divisions for the selection range
 const startTime = ref(null); // PrimeVue Calendar v-model
 const endTime = ref(null); // PrimeVue Calendar v-model
 const startMinDate = ref(null);
@@ -162,7 +162,7 @@ const startMaxDate = ref(null);
 const endMinDate = ref(null);
 const endMaxDate = ref(null);
 const valueStart = ref(null); // PrimeVue InputNumber v-model
-const valueEnd = ref(null); // PrimeVue InputNumber v-model
+const valueEnd = ref(null);   // PrimeVue InputNumber v-model
 const valueStartMin = ref(null);
 const valueStartMax = ref(null);
 const valueEndMin = ref(null);
@@ -226,16 +226,16 @@ const attRangeData = computed(() => {
   return data.sort((x, y) => y.freq - x.freq);
 });
 
-// 取出選取的 Attribute radio 數值型的資料
+// Get the selected Attribute radio's numeric-type data
 const valueData = computed(() => {
-  // filter 回傳陣列，find 回傳遞一個找到的元素，因此使用 find 方法。
+  // filter returns an array, find returns the first matched element, so use find here.
   if(valueTypes.includes(selectedAttName.value.type)){
     const data = filterAttrs.value.find(item => item.type === selectedAttName.value.type && item.key === selectedAttName.value.key);
     return data
   }
 });
 
-// 找出 slidrData，時間格式:毫秒時間戳
+// Compute slider data; time format: millisecond timestamps
 const sliderDataComputed = computed(() => {
   let xAxisMin;
   let xAxisMax;
@@ -298,7 +298,7 @@ const attValueTypeStartEnd = computed(() => {
       end = valueEnd.value;
       break;
   }
-  const data = { // 傳給後端的資料
+  const data = { // Data to send to the backend
     type: type,
     data: {
       key: selectedAttName.value.key,
@@ -385,43 +385,43 @@ function switchAttNameRadio(e) {
   endTime.value = null;
   valueStart.value = null;
   valueEnd.value = null;
-  if(valueData.value) { // 切換 Attribute Name
-    // 初始化雙向綁定
+  if(valueData.value) { // Switch Attribute Name
+    // Initialize two-way bindings
     selectArea.value = [0, selectRange.value];
     const min = valueData.value.min;
     const max = valueData.value.max;
     switch (selectedAttName.value.type) {
       case 'dummy': //sonar-qube
       case 'date':
-        // 除了 date 外雙向綁定為空
+        // Clear two-way bindings except for date
         valueStart.value = null;
         valueEnd.value = null;
-        // 初始化: Calendar
+        // Initialize Calendar
         startMinDate.value = new Date(min);
         startMaxDate.value = new Date(max);
         endMinDate.value = new Date(min);
         endMaxDate.value = new Date(max);
-        // 初始化: 讓日曆的範圍等於時間軸的範圍
+        // Initialize: set the calendar range to match the timeline range
         startTime.value = new Date(min);
         endTime.value = new Date(max);
         break;
       default:
-        // date 雙向綁定為空
+        // Clear date two-way bindings
         startTime.value = null;
         endTime.value = null;
-        // 初始化：InputNumber
+        // Initialize InputNumber
         valueStartMin.value = min;
         valueStartMax.value = max;
         valueEndMin.value = min;
         valueEndMax.value = max;
-        // 初始化: 讓 InputNumber 的範圍等於時間軸的範圍
+        // Initialize: set the InputNumber range to match the timeline range
         valueStart.value = min;
         valueEnd.value = max;
         break;
     }
-    // 傳給後端
-    // attValueTypeStartEnd.value; 是否有要呼叫函數? sonar-qube
-    // 建立圖表
+    // Send to backend
+    // attValueTypeStartEnd.value; should this function be called? sonar-qube
+    // Create chart
     createChart();
   }
 }
@@ -545,7 +545,7 @@ function createChart() {
       }
     },
     plugins: {
-      legend: false, // 圖例
+      legend: false, // Hide legend
       filler: {
         propagate: false
       },
@@ -562,10 +562,10 @@ function createChart() {
     },
     scales: {
       y: {
-        beginAtZero: true, // scale 包含 0
+        beginAtZero: true, // Scale includes 0
         max: max,
-        ticks: { // 設定間隔數值
-          display: false, // 隱藏數值，只顯示格線
+        ticks: { // Set tick intervals
+          display: false, // Hide values, only show grid lines
           stepSize: max / 4,
         },
         grid: {
@@ -573,7 +573,7 @@ function createChart() {
           z: 1,
         },
         border: {
-          display: false, // 隱藏左側多出來的線
+          display: false, // Hide the extra border line on the left
         }
       },
     },
@@ -584,17 +584,17 @@ function createChart() {
       ticks: {
         min: minX,
         max: maxX,
-        autoSkip: true, // 依比例判斷要不要換算時間單位
-        maxRotation: 0, // 不旋轉 lable 0~50
+        autoSkip: true, // Automatically determine whether to convert time units
+        maxRotation: 0, // Do not rotate labels (0~50)
         color: '#334155',
         display: true,
-        source: 'labels', // 依比例彈性顯示 label 數量
+        source: 'labels', // Flexibly display label count proportionally
       },
       grid: {
-        display: false, // 隱藏 x 軸網格
+        display: false, // Hide x-axis grid lines
       },
       time: {
-        minUnit: 'day', // 顯示最小單位
+        minUnit: 'day', // Minimum display unit
         // displayFormats: {
         //   minute: 'HH:mm MMM d',
         //   hour: 'HH:mm MMM d',
@@ -609,7 +609,7 @@ function createChart() {
       max: maxX,
       ticks: {
         autoSkip: true,
-        maxRotation: 0, // 不旋轉 lable 0~50
+        maxRotation: 0, // Do not rotate labels (0~50)
         color: '#334155',
         callback: ((value, index, values) => {
           let x;
@@ -627,15 +627,15 @@ function createChart() {
                 default:
                   x = Math.round(value * 100) / 100;
               }
-              // 處理科學記號等格式轉換
-              // Decimal 無法處理超過 16 位數
+              // Handle scientific notation and other format conversions
+              // Decimal cannot handle numbers exceeding 16 digits
               x = new Intl.NumberFormat(undefined, {useGrouping: false}).format(x);
               return x
           }
         })
       },
       grid: {
-        display: false, // 隱藏 x 軸網格
+        display: false, // Hide x-axis grid lines
       },
     }
   }
@@ -648,32 +648,32 @@ function createChart() {
  * @param {array} e [1, 100]
  */
 function changeSelectArea(e) {
-  // 日曆改變時，滑塊跟著改變
+  // When the calendar changes, the slider follows
   const sliderData = sliderDataComputed.value;
   const start = sliderData[e[0].toFixed()];
-  const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+  const end = sliderData[e[1].toFixed()]; // Get the index, which must be an integer.
 
   switch (selectedAttName.value.type) {
     case 'dummy':
     case 'date':
       startTime.value = new Date(start);
       endTime.value = new Date(end);
-      // 重新設定 start end 日曆選取範圍
+      // Reset the start/end calendar selection range
       endMinDate.value = new Date(start);
       startMaxDate.value = new Date(end);
       break;
     default:
       valueStart.value = start;
       valueEnd.value = end;
-      // 重新設定 start end 日曆選取範圍
+      // Reset the start/end selection range
       valueEndMin.value = start;
       valueStartMax.value = end;
       break;
   }
-  // 重新算圖
+  // Recalculate the chart mask
   resizeMask(chartComplete.value);
-  // 執行 timeFrameStartEnd 才會改變數據
-  // attValueTypeStartEnd.value; 是否有要呼叫函數? sonar-qube
+  // Execute timeFrameStartEnd to update the data
+  // attValueTypeStartEnd.value; should this function be called? sonar-qube
 }
 
 /**
@@ -682,7 +682,7 @@ function changeSelectArea(e) {
  * @param {string} direction start or end
  */
 function sliderValueRange(e, direction) {
-  // 找到最鄰近的 index，時間格式: 毫秒時間戳
+  // Find the closest index; time format: millisecond timestamps
   const sliderData = sliderDataComputed.value;
   const isDateType = selectedAttName.value.type === 'date';
   let targetTime = [];
@@ -698,9 +698,9 @@ function sliderValueRange(e, direction) {
     result = result > selectRange.value ? selectRange.value : result;
     return result
   });
-  // 改變滑塊
+  // Update the slider
   selectArea.value = closestIndexes;
-  // 重新設定 start end 日曆選取範圍
+  // Reset the start/end calendar selection range
   if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ;
   if(direction === 'start') {
     if(isDateType){
@@ -716,7 +716,7 @@ function sliderValueRange(e, direction) {
       valueStartMax.value = inputValue;
     };
   }
-  // 重新算圖
+  // Recalculate the chart mask
   if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chartComplete.value);
   else return;
 }
@@ -740,7 +740,7 @@ emitter.on('map-filter-reset', value => {
 
 onMounted(() => {
   // Slider
-  selectArea.value = [0, selectRange.value]; // 初始化滑塊
+  selectArea.value = [0, selectRange.value]; // Initialize the slider
 });
 
 onBeforeUnmount(() => {
diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue
index e8b0f52..a0a15df 100644
--- a/src/components/Discover/Map/Filter/Funnel.vue
+++ b/src/components/Discover/Map/Filter/Funnel.vue
@@ -70,8 +70,8 @@ const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFi
  */
 function isRule(e, index){
   const rule = isRuleData.value[index];
-  // 先取得 rule object
-  // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉
+  // First get the rule object
+  // To preserve data order, set the value to 0 and remove it during submitAll
   if(!e) temporaryData.value[index] = 0;
   else temporaryData.value[index] = rule;
 }
@@ -89,7 +89,7 @@ async function deleteRule(index) {
       isLoading.value = true;
       tempFilterId.value = await null;
       await allMapDataStore.getAllMapData();
-      await allMapDataStore.getAllTrace(); // SidebarTrace 要連動
+      await allMapDataStore.getAllTrace(); // SidebarTrace needs to update in sync
       await emit('submit-all');
       isLoading.value = false;
     }
@@ -104,9 +104,9 @@ async function deleteRule(index) {
 
 /** Submits all enabled filter rules and refreshes the map data. */
 async function submitAll() {
-  postRuleData.value = temporaryData.value.filter(item => item !== 0); // 取得 submit 的資料，有 toggle button 的話，找出並刪除陣列中為 0 的項目
+  postRuleData.value = temporaryData.value.filter(item => item !== 0); // Get submit data; if toggle buttons are used, find and remove items set to 0
   if(!postRuleData.value?.length) return $toast.error('Not selected');
-  await allMapDataStore.checkHasResult(); // 後端快速檢查有沒有結果
+  await allMapDataStore.checkHasResult(); // Quick backend check for results
 
   if(hasResultRule.value === null) {
     return;
@@ -114,7 +114,7 @@ async function submitAll() {
     isLoading.value = true;
     await allMapDataStore.addTempFilterId();
     await allMapDataStore.getAllMapData();
-    await allMapDataStore.getAllTrace(); // SidebarTrace 要連動
+    await allMapDataStore.getAllTrace(); // SidebarTrace needs to update in sync
     if(temporaryData.value[0]?.type) {
       allMapDataStore.traceId = await allMapDataStore.traces[0]?.id;
     }
diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue
index f65d07d..7fa9381 100644
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -53,7 +53,7 @@ const props = defineProps(['selectValue']);
 const allMapDataStore = useAllMapDataStore();
 const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
 
-const selectRange = ref(1000); // 更改 select 的切分數
+const selectRange = ref(1000); // Number of divisions for the selection range
 const selectArea = ref(null);
 const chart = ref(null);
 const canvasId = ref(null);
@@ -73,12 +73,12 @@ const panelProps = ref({
 const timeFrameStartEnd = computed(() => {
   const start = getMoment(startTime.value).format('YYYY-MM-DDTHH:mm:00');
   const end = getMoment(endTime.value).format('YYYY-MM-DDTHH:mm:00');
-  selectTimeFrame.value = [start, end]; // 傳給後端的資料
+  selectTimeFrame.value = [start, end]; // Data to send to the backend
 
   return [start, end];
 });
 
-// 找出 slidrData，時間格式:毫秒時間戳
+// Compute slider data; time format: millisecond timestamps
 const sliderData = computed(() => {
   const xAxisMin = new Date(filterTimeframe.value.x_axis.min).getTime();
   const xAxisMax = new Date(filterTimeframe.value.x_axis.max).getTime();
@@ -93,16 +93,16 @@ const sliderData = computed(() => {
   return data;
 });
 
-// 加入最大、最小值
+// Add the minimum and maximum values
 const timeFrameData = computed(() => {
   const data = filterTimeframe.value.data.map(i=>({x:i.x,y:i.y}))
-  // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
-  // x 值為 0 ~ 11,
-  // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
-  // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
-  // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
+  // See ./public/timeFrameSlope for the y-axis slope calculation diagram
+  // x values are 0 ~ 11,
+  // Name three coordinates (ax, ay), (bx, by), (cx, cy) as (a, b), (c, d), (e, f)
+  // Minimum: (f - b)(c - a) = (e - a)(d - b), solve for b = (ed - ad - fa - fc) / (e - c - a)
+  // Maximum: (f - b)(e - c) = (f - d)(e - a), solve for f = (be - bc - de + da) / (a - c)
 
-  // y 軸最小值
+  // Y-axis minimum value
   const a = 0;
   let b;
   const c = 1;
@@ -113,7 +113,7 @@ const timeFrameData = computed(() => {
   if(b < 0) {
     b = 0;
   }
-  // y 軸最大值
+  // Y-axis maximum value
   const ma = 9;
   const mb = filterTimeframe.value.data[8].y;
   const mc = 10;
@@ -124,12 +124,12 @@ const timeFrameData = computed(() => {
     mf = 0;
   }
 
-  // 添加最小值
+  // Add the minimum value
   data.unshift({
     x: filterTimeframe.value.x_axis.min_base,
     y: b,
   })
-  // 添加最大值
+  // Add the maximum value
   data.push({
     x: filterTimeframe.value.x_axis.max_base,
     y: mf,
@@ -234,13 +234,13 @@ function createChart() {
       }
     },
     plugins: {
-      legend: false, // 圖例
+      legend: false, // Hide legend
       filler: {
         propagate: false
       },
       title: false
     },
-    // animations: false, // 取消動畫
+    // animations: false, // Disable animations
     animation: {
       onComplete: e => {
         resizeMask(e.chart);
@@ -256,16 +256,16 @@ function createChart() {
         max: maxX,
         ticks: {
           autoSkip: true,
-          maxRotation: 0, // 不旋轉 lable 0~50
+          maxRotation: 0, // Do not rotate labels (0~50)
           color: '#334155',
           display: true,
           source: 'labels',
         },
         grid: {
-          display: false, // 隱藏 x 軸網格
+          display: false, // Hide x-axis grid lines
         },
         time: {
-          minUnit: 'day', // 顯示最小單位
+          minUnit: 'day', // Minimum display unit
           // displayFormats: {
           //   minute: 'HH:mm MMM d',
           //   hour: 'HH:mm MMM d',
@@ -273,10 +273,10 @@ function createChart() {
         }
       },
       y: {
-        beginAtZero: true, // scale 包含 0
+        beginAtZero: true, // Scale includes 0
         max: max,
-        ticks: { // 設定間隔數值
-          display: false, // 隱藏數值，只顯示格線
+        ticks: { // Set tick intervals
+          display: false, // Hide values, only show grid lines
           stepSize: max / 4,
         },
         grid: {
@@ -284,7 +284,7 @@ function createChart() {
           z: 1,
         },
         border: {
-          display: false, // 隱藏左側多出來的線
+          display: false, // Hide the extra border line on the left
         }
       },
     },
@@ -303,19 +303,19 @@ function createChart() {
  * @param {array} e [1, 100]
  */
 function changeSelectArea(e) {
-  // 日曆改變時，滑塊跟著改變
+  // When the calendar changes, the slider follows
   const sliderDataVal = sliderData.value;
   const start = sliderDataVal[e[0].toFixed()];
-  const end = sliderDataVal[e[1].toFixed()]; // 取得 index，須為整數。
+  const end = sliderDataVal[e[1].toFixed()]; // Get the index, which must be an integer.
 
   startTime.value = new Date(start);
   endTime.value = new Date(end);
-  // 重新設定 start end 日曆選取範圍
+  // Reset the start/end calendar selection range
   endMinDate.value = new Date(start);
   startMaxDate.value = new Date(end);
-  // 重新算圖
+  // Recalculate the chart mask
   resizeMask(chart.value);
-  // 執行 timeFrameStartEnd 才會改變數據
+  // Execute timeFrameStartEnd to update the data
   timeFrameStartEnd.value;
 }
 
@@ -325,7 +325,7 @@ function changeSelectArea(e) {
  * @param {string} direction start or end
  */
 function sliderTimeRange(e, direction) {
-  // 找到最鄰近的 index，時間格式: 毫秒時間戳
+  // Find the closest index; time format: millisecond timestamps
   const sliderDataVal = sliderData.value;
   const targetTime = [new Date(timeFrameStartEnd.value[0]).getTime(), new Date(timeFrameStartEnd.value[1]).getTime()];
   const closestIndexes = targetTime.map(target => {
@@ -336,12 +336,12 @@ function sliderTimeRange(e, direction) {
     return result
   });
 
-  // 改變滑塊
+  // Update the slider
   selectArea.value = closestIndexes;
-  // 重新設定 start end 日曆選取範圍
+  // Reset the start/end calendar selection range
   if(direction === 'start') endMinDate.value = e;
   else if(direction === 'end') startMaxDate.value = e;
-  // 重新算圖
+  // Recalculate the chart mask
   if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chart.value);
   else return;
 }
@@ -357,7 +357,7 @@ onMounted(() => {
   startMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
   endMinDate.value = new Date(filterTimeframe.value.x_axis.min);
   endMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
-  // 讓日曆的範圍等於時間軸的範圍
+  // Set the calendar range to match the timeline range
   startTime.value = startMinDate.value;
   endTime.value = startMaxDate.value;
   timeFrameStartEnd.value;
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index eb01536..0f0d32d 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -99,7 +99,7 @@ const processMap = ref({
 const showTraceId = ref(null);
 const infinitMaxItems = ref(false);
 const infiniteData = ref([]);
-const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const chartOptions = ref(null);
 const selectArea = ref([0, 1]);
 const cyTraceRef = ref(null);
@@ -138,11 +138,11 @@ const chartData = computed(() => {
   const data = baseTraces.value.map(trace => getPercentLabel(trace.count / traceCountTotal.value));
   const selectAreaData = baseTraces.value.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
 
-  return { // 要呈現的資料
+  return { // Data to display
     labels,
     datasets: [
       {
-        label: 'Trace', // 資料的標題標籤
+        label: 'Trace', // Dataset label
         data,
         backgroundColor: selectAreaData,
         categoryPercentage: 1.0,
@@ -153,18 +153,18 @@ const chartData = computed(() => {
 });
 
 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
   data.forEach(item => {
     item.attributes.forEach((attribute, index) => {
-      item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+      item[`att_${index}`] = attribute.value; // Create a new key-value pair
     });
-    delete item.attributes; // 刪除原本的 attributes 屬性
+    delete item.attributes; // Remove the original attributes property
   })
   return data;
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(baseCases.value)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data
   let result = [
       { field: 'id', header: 'Case Id' },
       { field: 'started_at', header: 'Start time' },
@@ -184,7 +184,7 @@ const columnData = computed(() => {
 watch(selectArea, (newValue, oldValue) => {
   const roundValue = Math.round(newValue[1].toFixed());
   if(newValue[1] !== roundValue) selectArea.value[1] = roundValue;
-  if(newValue != oldValue) emit('filter-trace-selectArea', newValue); // 判斷 Apply 是否 disable
+  if(newValue != oldValue) emit('filter-trace-selectArea', newValue); // Determine whether Apply should be disabled
 });
 
 watch(infinit404, (newValue) => {
@@ -211,7 +211,7 @@ function barOptions(){
       }
     },
     plugins: {
-      legend: { // 圖例
+      legend: { // Legend
         display: false,
       },
       tooltip: {
@@ -228,8 +228,8 @@ function barOptions(){
         display:false
       },
       y: {
-        ticks: { // 設定間隔數值
-          display: false, // 隱藏數值，只顯示格線
+        ticks: { // Set tick intervals
+          display: false, // Hide values, only show grid lines
           min: 0,
           max: traceList.value[0]?.ratio,
           stepSize: (traceList.value[0]?.ratio)/4,
@@ -239,7 +239,7 @@ function barOptions(){
           z: 1,
         },
         border: {
-          display: false, // 隱藏左側多出來的線
+          display: false, // Hide the extra border line on the left
         }
       }
     }
@@ -271,15 +271,15 @@ function progressWidth(value){
  * @param {number} count - The total number of cases.
  */
 async function switchCaseData(id, count) {
-  // 點同一筆 id 不要有動作
+  // Do nothing if clicking the same id
   if(id == showTraceId.value) return;
-  isLoading.value = true; // 都要 loading 畫面
+  isLoading.value = true; // Always show loading screen
   infinit404.value = null;
   infinitMaxItems.value = false;
   baseInfiniteStart.value = 0;
   allMapDataStore.baseTraceId = id;
   infiniteData.value = await allMapDataStore.getBaseTraceDetail();
-  showTraceId.value = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
+  showTraceId.value = id; // Set after getDetail so the case table finishes loading before switching showTraceId
   createCy();
   isLoading.value = false;
 }
@@ -288,9 +288,9 @@ async function switchCaseData(id, count) {
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
 function setNodesData(){
-  // 避免每次渲染都重複累加
+  // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
-  // 將 api call 回來的資料帶進 node
+  // Populate nodes with data returned from the API call
   baseTraceTaskSeq.value.forEach((node, index) => {
     processMap.value.nodes.push({
       data: {
@@ -321,7 +321,7 @@ function setEdgesData(){
       }
     });
   });
-  // 關係線數量筆節點少一個
+  // The number of edges is one less than the number of nodes
   processMap.value.edges.pop();
 }
 
@@ -367,7 +367,7 @@ async function fetchData() {
 }
 
 onMounted(() => {
-  isLoading.value = true; // createCy 執行完關閉
+  isLoading.value = true; // Will be closed after createCy finishes
   setNodesData();
   setEdgesData();
   createCy();
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 4b7c468..341b5f5 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -134,7 +134,7 @@ const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, select
 
 const selectFilter = {
   'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
-  // 'Filter Type': ['Sequence', 'Trace', 'Timeframes'],
+  // 'Filter Type': ['Sequence', 'Trace', 'Timeframes'],  // without Attributes
   'Activity Sequence':['Have activity(s)', 'Start & End', 'Sequence'],
   'Start & End': ['Start', 'End', 'Start & End'],
   'Mode': ['Directly follows', 'Eventually follows'],
@@ -160,12 +160,12 @@ const selectFilterEnd = ref(null);
 const selectFilterStartToEnd = ref(null);
 const selectFilterEndToStart = ref(null);
 const listSeq = ref([]);
-//若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
+// If start is selected first, end updates accordingly; if end is selected first, start updates accordingly
 const isStartSelected = ref(null);
 const isEndSelected = ref(null);
 const isActAllTask = ref(true);
 const rowData = ref([]);
-const selectTraceArea = ref([]); // Trace 滑快
+const selectTraceArea = ref([]); // Trace slider
 const isDisabled = ref(true); // Apply Button disabled setting
 const filterTraceViewRef = ref(null);
 const tooltip = {
@@ -285,7 +285,7 @@ function progressWidth(value){
   return `width:${value}%;`
 }
 
-//設定 Have activity(s) 內容
+// Set up the Have activity(s) content
 /**
  * @param {array} data filterTaskData
  */
@@ -305,7 +305,7 @@ function setHaveAct(data){
   }).sort((x, y) => y.occurrences_base - x.occurrences_base);
 }
 
-// 調整 filterStartData / filterEndData / filterStartToEndData / filterEndToStartData 的內容
+// Adjust the content of filterStartData / filterEndData / filterStartToEndData / filterEndToStartData
 /**
  * @param {Array} array - filterStartToEnd or filterEndToStart data array.
  */
@@ -362,7 +362,7 @@ function onUpdateListSeq(newListSeq) {
   isActAllTask.value = false;
 }
 
-// 在 Start & End 若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
+// In Start & End mode, if start is selected first, end updates accordingly; if end is selected first, start updates accordingly
 /**
  * @param {object} e object contains selected row's data
  */
@@ -387,7 +387,7 @@ function endRow(e) {
   }
 }
 
-// 重新設定連動的 filterStartToEndData / filterEndToStartData 內容
+// Reset the linked filterStartToEndData / filterEndToStartData content
 /**
  * @param {array} eventData  Start or End List
  * @param {object} rowDataVal - The selected row's data.
@@ -492,7 +492,7 @@ function reset(message) {
     filterTraceViewRef.value.showTraceId = null;
     filterTraceViewRef.value.selectArea = [0, filterTraceViewRef.value.traceTotal];
   };
-  // 成功訊息
+  // Success message
   if(message) {
     $toast.success('Filter cleared.')
   }
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index b7dbd0c..346a094 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -191,7 +191,7 @@
                   </li>
                 </ul>
               </TabPanel>
-              <!-- 從shortest_traces開始迭代 -->
+              <!-- Iterate starting from shortest_traces -->
               <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
                 contentClass="text-sm">
                 <p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
@@ -202,7 +202,7 @@
                       <input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
                         class="hidden peer" @click="onPathOptionClick(key2)"
                       />
-                      <!-- 若為BPMN檢視模式，則不允許點亮路徑 -->
+                      <!-- If in BPMN view mode, path highlighting is not allowed -->
                       <span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
                       :class="[
                         'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
@@ -261,7 +261,7 @@ import getMoment from 'moment';
 import i18next from '@/i18n/i18n';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 
-// 刪除第一個和第二個元素
+// Remove the first and second elements
 const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
 
 const props = defineProps({
@@ -332,7 +332,7 @@ function switchTab(newTab) {
  */
 function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
   //
-  const label = getTimeLabel(time).replace(/\s+/g, ' '); // 將所有連續空白字符壓縮為一個空白
+  const label = getTimeLabel(time).replace(/\s+/g, ' '); // Collapse all consecutive whitespace into a single space
   const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
   return result;
 }
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index c3fa103..5a6a9f9 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -91,7 +91,7 @@ const processMap = ref({
 const showTraceId = ref(null);
 const infinitMaxItems = ref(false);
 const infiniteData = ref([]);
-const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const infiniteFinish = ref(true); // Whether infinite scroll loading is complete
 const cyTraceRef = ref(null);
 
 const traceTotal = computed(() => {
@@ -113,18 +113,18 @@ const traceList = computed(() => {
 });
 
 const caseData = computed(() => {
-  const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
   data.forEach(item => {
     item.attributes.forEach((attribute, index) => {
-      item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+      item[`att_${index}`] = attribute.value; // Create a new key-value pair
     });
-    delete item.attributes; // 刪除原本的 attributes 屬性
+    delete item.attributes; // Remove the original attributes property
   })
   return data;
 });
 
 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // 深拷貝原始 cases 的內容
+  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
   let result = [
       { field: 'id', header: 'Case Id' },
       { field: 'started_at', header: 'Start time' },
@@ -183,23 +183,23 @@ function progressWidth(value){
  * @param {number} count - The total number of cases.
  */
 async function switchCaseData(id, count) {
-  // 點同一筆 id 不要有動作
+  // Do nothing if clicking the same id
   if(id == showTraceId.value) return;
-  isLoading.value = true; // 都要 loading 畫面
+  isLoading.value = true; // Always show loading screen
   infinit404.value = null;
   infinitMaxItems.value = false;
   showTraceId.value = id;
   infiniteStart.value = 0;
-  emit('switch-Trace-Id', {id: showTraceId.value, count: count}); // 傳遞到 Map index 再關掉 loading
+  emit('switch-Trace-Id', {id: showTraceId.value, count: count}); // Pass to Map index, which will close loading
 }
 
 /**
  * Assembles the trace element nodes data for Cytoscape rendering.
  */
 function setNodesData(){
-  // 避免每次渲染都重複累加
+  // Clear nodes to prevent accumulation on each render
   processMap.value.nodes = [];
-  // 將 api call 回來的資料帶進 node
+  // Populate nodes with data returned from the API call
   traceTaskSeq.value.forEach((node, index) => {
     processMap.value.nodes.push({
       data: {
@@ -230,7 +230,7 @@ function setEdgesData(){
       }
     });
   });
-  // 關係線數量筆節點少一個
+  // The number of edges is one less than the number of nodes
   processMap.value.edges.pop();
 }
 
@@ -249,8 +249,8 @@ function createCy(){
  * create map
  */
 async function show() {
-  isLoading.value = true; // createCy 執行完關閉
-  // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
+  isLoading.value = true; // Will be closed after createCy finishes
+  // Reset to the first trace id when sidebar closes, due to trace API dependency
   showTraceId.value = traces.value[0]?.id;
   infiniteStart.value = 0;
   setNodesData();
diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index 440cd3a..5ebf163 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -8,7 +8,7 @@
       <div class="my-4 border-b border-neutral-200">
         <p class="h2">View</p>
         <ul class="space-y-3 mb-4">
-          <!-- 選擇 bpmn / processmap button -->
+          <!-- Select bpmn / processmap button -->
           <li class="btn-toggle-content">
             <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
               Process Map
@@ -17,7 +17,7 @@
               BPMN Model
             </span>
           </li>
-          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
+          <!-- Select drawing style: bezier / unbundled-bezier button -->
           <li class="btn-toggle-content">
             <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
               Curved
@@ -26,7 +26,7 @@
               Elbow
             </span>
           </li>
-          <!-- 直向 TB | 橫向 LR -->
+          <!-- Vertical TB | Horizontal LR -->
           <li class="btn-toggle-content">
             <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
               Horizontal
@@ -124,7 +124,7 @@ const dataLayerType = ref(null); // freq | duration
 const dataLayerOption = ref(null);
 const selectedFreq = ref('');
 const selectedDuration = ref('');
-const rank = ref('LR'); // 直向 TB | 橫向 LR
+const rank = ref('LR'); // Vertical TB | Horizontal LR
 
 /**
  * Switches the map type and emits the change event.
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index b96cb22..04eb48b 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -163,7 +163,7 @@ onMounted(async () => {
   }
   await allMapDataStore.getAllMapData();
   await getStatData();
-  isPanel.value = false; // 預設不打開
+  isPanel.value = false; // Collapsed by default
 });
 </script>
 <style scoped>
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
index 1af95c1..799c2e0 100644
--- a/src/components/File/UploadModal.vue
+++ b/src/components/File/UploadModal.vue
@@ -50,28 +50,28 @@ async function upload(event) {
   const formData = new FormData();
   let uploadFile;
 
-  // 判斷是否有檔案
+  // Check if a file exists
   if(target && target.files) {
     uploadFile = target.files[0];
   }
-  // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
+  // File size must not exceed 90 MB (90*1024*1024 = 94,371,840 bytes)
   if(uploadFile.size >= 94371840) {
     fileInput.value = '';
     return uploadFailedFirst('size');
   }
-  // 將檔案加進 formData，欄位一定要「csv」
+  // Append the file to formData; the field name must be "csv"
   formData.append('csv', uploadFile);
-  // 呼叫第一階段上傳 API
+  // Call the first-stage upload API
   if(uploadFile) {
     await filesStore.upload(formData);
   }
   if (uploadFile.name.endsWith('.csv')) {
     uploadFileName.value = uploadFile.name.slice(0, -4);
   } else {
-    // 處理錯誤或無效的文件格式
-    uploadFileName.value = ''; // 或者其他適合的錯誤處理方式
+    // Handle error or invalid file format
+    uploadFileName.value = ''; // Or other appropriate error handling
   }
-  // 清除選擇文件
+  // Clear the selected file
   if(fileInput) {
     fileInput.value = '';
   }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4b965e6..3dd22c1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -65,7 +65,7 @@ const toggleIsAcctMenuOpen = () => {
  */
 function logOutButton() {
   if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
-    // 傳給 Map，通知 Sidebar 要關閉。
+    // Notify Map to close the Sidebar.
     emitter.emit('leaveFilter', false);
     leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
   } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e5dbe0a..5cb4670 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,7 +3,7 @@
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
       <div class="flex justify-between items-center flex-wrap relative" v-show="showNavbarBreadcrumb">
         <div id="nav_bar_logged_in" class="flex flex-1 items-center">
-          <!-- 回 Files 頁 -->
+          <!-- Back to Files page -->
           <router-link to="/files" class="mr-4" v-if="showIcon" id="backPage">
             <span class="material-symbols-outlined text-neutral-10 !leading-loose">
               arrow_back
@@ -29,10 +29,10 @@
             <UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
           </div>
         </div>
-        <!-- Upload, Performance, Compare 無按鈕行為 -->
+        <!-- Upload, Performance, Compare have no button actions -->
         <div v-else-if="noShowSaveButton"></div>
         <!-- Other Page: Save and Download -->
-        <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
+        <!-- Save: if data exists, prompt rename; if no data, prompt save; if unchanged, do nothing -->
         <div v-else class="space-x-4">
           <button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']"
           :disabled="disabledSave" @click="saveModal">
@@ -92,11 +92,11 @@ const { setPendingActivePage, setPreviousPage, setActivePage, setActivePageCompu
 
 const showNavbarBreadcrumb = ref(false);
 const navViewData = {
-  // 舉例：FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
+  // e.g. FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
   FILES: ['ALL', 'DISCOVER', 'COMPARE'],
-  // 舉例：DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
+  // e.g. DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
   DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
-  // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
+  // e.g. COMPARE: ['PROCESS MAP', 'DASHBOARD']
   COMPARE: ['MAP', 'PERFORMANCE'],
   'ACCOUNT MANAGEMENT': [],
   'MY ACCOUNT': [],
@@ -108,7 +108,7 @@ const disabledSave = computed(() => {
   switch (route.name) {
     case 'Map':
     case 'CheckMap':
-      // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+      // Cannot save without a filter ID or a temporary tempFilterId
       return !tempFilterId.value;
     case 'Conformance':
     case 'CheckConformance':
@@ -209,7 +209,7 @@ function getNavViewName() {
     return;
   }
 
-  // 說明route.matched[1] 表示當前路由匹配的第二個路由記錄
+  // route.matched[1] is the second matched route record for the current route
   navViewName.value = route.matched[1].name.toUpperCase();
   store.filesTag = 'ALL';
   switch (navViewName.value) {
@@ -246,9 +246,9 @@ function getNavViewName() {
 
   // Frontend is not sure which button will the user press on the modal,
   // so here we need to save to a pending state
-  // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
-  // 因此我們需要將其保存到待處理狀態
-  if(!shouldKeepPreviousPage.value) { // 若使用者不是按下取消按鈕或是點選按鈕時
+  // The frontend cannot determine which modal button the user will press
+  // (cancel or confirm/save), so we save it to a pending state.
+  if(!shouldKeepPreviousPage.value) { // If the user did not press cancel
     setPendingActivePage(valueToSet);
   }
 
@@ -258,8 +258,8 @@ function getNavViewName() {
 
 /** Opens the save modal for Map or Conformance pages. */
 async function saveModal() {
-  // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
-  // 傳給 Map，通知 Sidebar 要關閉。
+  // Help determine MAP/CONFORMANCE save with "submit" or "cancel".
+  // Notify Map to close the Sidebar.
   emitter.emit('saveModal', false);
 
   switch (route.name) {
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index d71e37a..74244b2 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -4,7 +4,7 @@
     <div v-if="totalSeconds === 0" class="text-center">
       <p>0</p>
     </div>
-    <!-- 這一段不是彈窗而是固定在畫面上的時間內容 -->
+    <!-- This section shows the fixed time display, not the popup -->
     <div id="cyp-timerange-show" v-else class="flex justify-center items-center gap-1">
       <p v-show="days != 0">{{ days }}d</p>
       <p v-show="hours != 0">{{ hours }}h</p>
@@ -12,7 +12,7 @@
       <p v-show="seconds != 0">{{ seconds }}s</p>
     </div>
   </div>
-  <!-- 以下這段落是使用者點開來才會彈出的畫面 -->
+  <!-- The following section is the popup that appears when the user clicks to open -->
   <div class="duration-container absolute left-0 top-full translate-y-2
     dhms-input-popup-container"
     v-show="openTimeSelect"
diff --git a/src/components/icons/IconChecked.vue b/src/components/icons/IconChecked.vue
index 08421cc..bf1e622 100644
--- a/src/components/icons/IconChecked.vue
+++ b/src/components/icons/IconChecked.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
+        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!-- A relative div containing two absolutely positioned img elements -->
         <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
         <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
         <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
diff --git a/src/constants/constants.js b/src/constants/constants.js
index ae33707..e6ef44e 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -75,19 +75,19 @@ x: {
     },
     ticks: {
     display: true,
-    maxRotation: 0, // 不旋轉 lable 0~50
+    maxRotation: 0, // Do not rotate labels (range 0~50)
     color: '#64748b',
-    source: 'labels', // 依比例彈性顯示 label 數量
+    source: 'labels', // Proportionally display the number of labels
     },
     border: {
     color: '#64748b',
     },
     grid: {
-    tickLength: 0, // 網格是否超過邊線
+    tickLength: 0, // Whether grid lines extend beyond the axis
     }
 },
 y: {
-    beginAtZero: true, // scale 包含 0
+    beginAtZero: true, // Scale includes 0
     title: {
     display: true,
     color: '#334155',
@@ -104,7 +104,7 @@ y: {
     color: '#64748b',
     },
     border: {
-    display: false, // 隱藏左側多出來的線
+    display: false, // Hide the extra line on the left side
     },
 },
 };
@@ -121,19 +121,19 @@ x: {
     },
     ticks: {
     display: true,
-    maxRotation: 0, // 不旋轉 lable 0~50
+    maxRotation: 0, // Do not rotate labels (range 0~50)
     color: '#64748b',
     },
     grid: {
     color: '#64748b',
-    tickLength: 0, // 網格是否超過邊線
+    tickLength: 0, // Whether grid lines extend beyond the axis
     },
     border: {
     display:false,
     },
 },
 y: {
-    beginAtZero: true, // scale 包含 0
+    beginAtZero: true, // Scale includes 0
     type: 'category',
     title: {
     display: true,
@@ -152,7 +152,7 @@ y: {
     color: '#64748b',
     },
     border: {
-    display: false, // 隱藏左側多出來的線
+    display: false, // Hide the extra line on the left side
     },
 },
 };
@@ -169,19 +169,19 @@ x: {
     },
     ticks: {
         display: true,
-        maxRotation: 0, // 不旋轉 lable 0~50
+        maxRotation: 0, // Do not rotate labels (range 0~50)
         color: '#64748b',
     },
     grid: {
         color: '#64748b',
-        tickLength: 0, // 網格是否超過邊線
+        tickLength: 0, // Whether grid lines extend beyond the axis
     },
     border: {
         display:false,
     },
     },
     y: {
-    beginAtZero: true, // scale 包含 0
+    beginAtZero: true, // Scale includes 0
     type: 'category',
     title: {
         display: true,
@@ -200,7 +200,7 @@ x: {
         color: '#64748b',
     },
     border: {
-        display: false, // 隱藏左側多出來的線
+        display: false, // Hide the extra line on the left side
     },
     },
 };
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 9d5f155..80e385f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -94,7 +94,7 @@ app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
 app.component('Dialog', Dialog);
 app.component('ContextMenu', ContextMenu);
-app.component('Draggable', draggable);  // 拖曳
+app.component('Draggable', draggable);  // Drag and drop
 app.directive('tooltip', Tooltip);
 
 app.mount("#app");
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 9868453..f45975a 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -57,17 +57,17 @@ export async function saveFilter(addFilterId, next = null) {
     cancelButtonColor: '#94a3b8',
     customClass: customClass,
   });
-  // 透過回傳值判斷要不要轉址
-  if(isConfirmed) { // 存檔成功
+  // Determine whether to redirect based on the return value
+  if(isConfirmed) { // Save succeeded
     await addFilterId(fileName);
-    // 顯示儲存完成
+    // Show save complete notification
     if (value) { // Example of value: yes
       savedSuccessfully(value);
     }
-    // 清空欄位
+    // Clear the input field
     fileName = '';
     return true;
-  } else { // 點擊取消或空白處，為存檔失敗。
+  } else { // Clicked cancel or outside the dialog; save failed.
     pageAdminStore.keepPreviousPage();
 
     // Not every time we have nontrivial next value
@@ -88,7 +88,7 @@ export async function savedSuccessfully(value) {
   await Swal.fire({
     title: 'SAVE COMPLETE',
     html: `<span class="text-primary">${escapeHtml(value)}</span> has been saved in Lucia.`,
-    timer: 3000, // 停留 3 秒後自動關閉
+    timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
     icon: 'success',
     iconColor: '#0099FF',
@@ -188,15 +188,15 @@ export async function saveConformance(addConformanceCreateCheckId) {
     cancelButtonColor: '#94a3b8',
     customClass: customClass,
   });
-  // 透過回傳值判斷要不要轉址
-  if(isConfirmed) { // 存檔成功
+  // Determine whether to redirect based on the return value
+  if(isConfirmed) { // Save succeeded
     await addConformanceCreateCheckId(fileName);
-    // 顯示儲存完成
+    // Show save complete notification
     if (value) savedSuccessfully(value);
-    // 清空欄位
+    // Clear the input field
     fileName = '';
     return true;
-  } else { // 點擊取消或空白處，為存檔失敗。
+  } else { // Clicked cancel or outside the dialog; save failed.
     return false;
   }
 }
@@ -329,7 +329,7 @@ export async function uploadFailedFirst(failureType, failureMsg, failureLoc) {
   await Swal.fire({
     title: 'IMPORT FAILED',
     html: value,
-    timer: 3000, // 停留 3 秒後自動關閉
+    timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
     icon: 'error',
     iconColor: '#FF3366',
@@ -390,7 +390,7 @@ export async function uploadFailedSecond(detail) {
   await Swal.fire({
     title: 'IMPORT FAILED',
     html: `<div class="text-left mx-3 space-y-1"><p>Error(s) detected:</p><ul class="list-disc ml-6">${srt}</ul><p>${manySrt} Please check.</p></div>`,
-    timer: 3000, // 停留 3 秒後自動關閉
+    timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
     icon: 'error',
     iconColor: '#FF3366',
@@ -405,7 +405,7 @@ export async function uploadFailedSecond(detail) {
 export async function uploadSuccess() {
   await Swal.fire({
     title: 'IMPORT COMPLETED',
-    timer: 3000, // 停留 3 秒後自動關閉
+    timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
     icon: 'success',
     iconColor: '#0099FF',
@@ -494,9 +494,9 @@ export async function renameModal(rename, type, id, baseName) {
     }
   });
 
-  // 改名成功
+  // Rename succeeded
   if(isConfirmed) await rename(type, id, value);
-  // 清空欄位 fileName = '';
+  // Clear the field: fileName = ''
 }
 /**
  * Shows a confirmation dialog for deleting a file and its dependents.
@@ -544,7 +544,7 @@ export async function deleteFileModal(files, type, id, name) {
 export async function deleteSuccess() {
   await Swal.fire({
     title: 'FILE(S) DELETED',
-    timer: 3000, // 停留 3 秒後自動關閉
+    timer: 3000, // Auto-close after 3 seconds
     showConfirmButton: false,
     icon: 'success',
     iconColor: '#0099FF',
diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index 4be85b9..13e2a4d 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -34,12 +34,12 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => {
   let text = baseText;
   const textInt = dataLayerOption === 'rel_freq' ? baseText + optionValue * 100 + "%" : baseText + optionValue;
   const textFloat = dataLayerOption === 'rel_freq' ? baseText + (optionValue * 100).toFixed(2) + "%" : baseText + optionValue.toFixed(2);
-  // 判斷是否為整數，若非整數要取小數點後面兩個值。
+  // Check if the value is an integer; if not, round to 2 decimal places.
   text = Math.trunc(optionValue) === optionValue ? textInt : textFloat;
   return text;
 };
 
-// 註冊布局演算法
+// Register layout algorithms
 cytoscape.use(dagre);
 cytoscape.use(spread);
 cytoscape.use(fcose);
@@ -65,7 +65,7 @@ cytoscape.use(cola);
  * @returns {cytoscape.Core} The configured Cytoscape instance.
  */
 export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
-  // 設定每個 node, edges 的顏色與樣式
+  // Set the color and style for each node and edge
   let nodes = mapData.nodes;
   let edges = mapData.edges;
 
@@ -73,15 +73,15 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   let cy = cytoscape({
     container: graphId,
     elements: {
-      nodes: nodes, //nodes, // 節點的資料
-      edges: edges, //edges, // 關係線的資料
+      nodes: nodes, // Node data
+      edges: edges, // Edge data
     },
     layout: {
       name: 'dagre',
-      rankDir: rank, // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
+      rankDir: rank, // Vertical TB | Horizontal LR, variable from 'cytoscape-dagre' plugin
     },
     style: [
-      // 點擊 node 後改變的樣式
+      // Style changes when a node is selected
       {
         selector: 'node:selected',
         style: {
@@ -89,27 +89,27 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'border-width': '3',
         },
       },
-      // node 節點的樣式
+      // Node styling
       {
         selector: 'node',
         style: {
           'label':
-            function (node) { // 節點要顯示的文字
-              // node.data(this.dataLayerType+"."+this.dataLayerOption) 為原先陣列 node.data.key.value
+            function (node) { // Text to display on the node
+              // node.data(this.dataLayerType+"."+this.dataLayerOption) accesses the original array value at node.data.key.value
               let optionValue = node.data(`${dataLayerType}.${dataLayerOption}`);
               let text = '';
               const STRING_LIMIT = 8;
               if (node.data('label').length > STRING_LIMIT) {
-                // 若文字超過 STRING_LIMIT長度，則字尾巴要加「...」，style 要換兩行(\n 換行符號)
-                // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
+                // If text exceeds STRING_LIMIT, append "..." and add line breaks (\n)
+                // Using data() because Cytoscape converts array data to function calls
                 text = `${node.data('label').substr(0, STRING_LIMIT)}...\n\n`;
-              } else { // 補空白直到撐寬label的寬度，這是為了統一所有label的寬度
+              } else { // Pad with spaces to match the label width for consistent sizing
                 text = `${node.data('label').padEnd(STRING_LIMIT, '　')}\n\n`
               }
 
-              // 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activity 才裝入文字。
-              // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字
-              // Relative 要轉為百分比 %
+              // In elements, activity is categorized as default, so check if the node is an activity before adding text.
+              // Use parseInt (integer) or parseFloat (float) to convert strings to numbers.
+              // Relative values need to be converted to percentages (%)
               if (node.data('type') === 'activity') {
                 let textDurRel;
                 let timeLabelInt;
@@ -120,14 +120,14 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                   case 'freq': // Frequency   
                     text = composeFreqTypeText(text, dataLayerOption, optionValue);
                     break;
-                  case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
+                  case 'duration': // Duration: Relative is percentage %, others need time unit conversion.
                     // Relative %
                     textDurRel = text + (optionValue * 100).toFixed(2) + "%";
                     // Timelabel
                     timeLabelInt = text + getTimeLabel(optionValue);
                     timeLabelFloat = text + getTimeLabel(optionValue.toFixed(2));
 
-                    // 判斷是否為整數，若非整數要取小數點後面兩個值。
+                    // Check if the value is an integer; if not, round to 2 decimal places.
                     textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
                     text = dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
@@ -145,12 +145,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
               return node.data('type') === 'activity' ? '1' : '2';
             },
           'background-image': 'data(nodeImageUrl)',
-          'background-opacity': 'data(backgroundOpacity)', // 透明背景
-          'border-opacity': 'data(borderOpacity)', // 透明邊框
+          'background-opacity': 'data(backgroundOpacity)', // Transparent background
+          'border-opacity': 'data(borderOpacity)', // Transparent border
           'shape': 'data(shape)',
           'text-wrap': 'wrap',
-          'text-max-width': 'data(width)', // 在 div 內換行
-          'text-overflow-wrap': 'anywhere', // 在 div 內換行
+          'text-max-width': 'data(width)', // Wrap text within the node
+          'text-overflow-wrap': 'anywhere', // Allow wrapping at any position
           'text-margin-x': function (node) {
             return node.data('type') === 'activity' ? -5 : 0;
           },
@@ -173,11 +173,11 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
             },
         },
       },
-      // edge 關係線的樣式
+      // Edge styling
       {
         selector: 'edge',
         style: {
-          'content': function (edge) { // 關係線顯示的文字
+          'content': function (edge) { // Text displayed on the edge
             let optionValue = edge.data(`${dataLayerType}.${dataLayerOption}`);
             let result = '';
             let edgeInt;
@@ -193,11 +193,11 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                 edgeInt = dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
                 edgeFloat = dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
 
-                // 判斷是否為整數，若非整數要取小數點後面兩個值。
+                // Check if the value is an integer; if not, round to 2 decimal places.
                 result = Math.trunc(optionValue) === optionValue ? edgeInt : edgeFloat;
                 break;
 
-              case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
+              case 'duration': // Duration: Relative is percentage %, others need time unit conversion.
                 // Relative %
                 edgeDurRel = (optionValue * 100).toFixed(2) + "%";
                 // Timelabel
@@ -211,10 +211,10 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
             return result;
           },
           'curve-style': curveStyle, // unbundled-bezier | taxi
-          'overlay-opacity': 0, // 將overlay-opacity設置為0，移除灰色陰影
-          'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
+          'overlay-opacity': 0, // Set overlay-opacity to 0 to remove the gray shadow
+          'target-arrow-shape': 'triangle', // Arrow shape pointing to target: triangle
           'color': 'gray', //#0066cc
-          //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離
+          //'control-point-step-size':100, // Distance between Bezier curve control points
           'width': 'data(lineWidth)',
           'line-style': 'data(edgeStyle)',
           "text-margin-y": "0.7rem",
@@ -237,30 +237,30 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'overlay-padding': '5px',
         },
       }, {
-        selector: 'edge[source = target]', // 選擇 self-loop 的邊
+        selector: 'edge[source = target]', // Select self-loop edges
         style: {
-          'loop-direction': '0deg',  // 控制 loop 的方向
-          'loop-sweep': '-60deg',   // 控制 loop 的弧度，這裡可以調整弧度以改變大小
-          'control-point-step-size': 50 // 控制 loop 的半徑大小，增加這個值可以增大 loop
+          'loop-direction': '0deg',  // Control the loop direction
+          'loop-sweep': '-60deg',   // Control the loop arc; adjust to change size
+          'control-point-step-size': 50 // Control the loop radius; increase to enlarge the loop
         }
       },
     ],
   });
 
 
-  // 按下線條，線條及線條上數字有光暈效果
+  // When an edge is clicked, apply glow effect to the edge and its label
   cy.on('tap', 'edge', function (event) {
     cy.edges().removeClass('highlight-edge');
     event.target.addClass('highlight-edge');
   });
 
 
-  // 按下節點光暈效果與鄰邊光暈效果
+  // When a node is clicked, apply glow effect to the node and adjacent edges
   cy.on('tap, mousedown', 'node', function (event) {
     useMapPathStore().onNodeClickHighlightEdges(event.target);
   });
 
-  // 按下線段光暈效果與兩端點光暈效果
+  // When an edge is clicked, apply glow effect to the edge and both endpoint nodes
   cy.on('tap, mousedown', 'edge', function (event) {
     useMapPathStore().onEdgeClickHighlightNodes(event.target);
   });
@@ -288,12 +288,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   const cytoscapeStore = useCytoscapeStore();
   cy.ready(() => {
     cytoscapeStore.loadPositionsFromStorage(rank);
-    // 判斷localStorage是否儲存過拜訪資訊
-    // 若曾經儲存過拜訪後的座標位置，則restore位置來渲染出來
+    // Check if localStorage has previously saved visit data.
+    // If saved node positions exist, restore them for rendering.
     if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))) {
       const allGraphsRemembered = JSON.parse(localStorage.getItem(SAVE_KEY_NAME));
       const currentGraphNodesRemembered =
-        allGraphsRemembered[cytoscapeStore.currentGraphId] ? allGraphsRemembered[cytoscapeStore.currentGraphId][rank] : null; // 可能是undefined
+        allGraphsRemembered[cytoscapeStore.currentGraphId] ? allGraphsRemembered[cytoscapeStore.currentGraphId][rank] : null; // May be undefined
       if (currentGraphNodesRemembered) {
         currentGraphNodesRemembered.forEach(nodeRemembered => {
           const nodeToDecide = cy.getElementById(nodeRemembered.id);
@@ -303,14 +303,14 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
         });
       }
     }
-    //存下此刻剛進入畫面時當前所有節點的座標位置
+    // Save the current positions of all nodes when the view is first entered
     const allNodes = cy.nodes();
     allNodes.forEach(nodeFirstlySave => {
       cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position(), rank);
     });
 
-    // 在改變節點位置後，盡可能地記錄節點線條的位置情報
-    // rank 代表現在使用者切換的是水平方向還是垂直方向模式
+    // After node positions change, save the updated positions.
+    // rank represents whether the user is in horizontal or vertical layout mode.
     cy.on('dragfree', 'node', (event) => {
       const nodeToSave = event.target;
       cytoscapeStore.saveNodePosition(nodeToSave.id(), nodeToSave.position(), rank);
diff --git a/src/module/cytoscapeMapTrace.js b/src/module/cytoscapeMapTrace.js
index d19e962..fa95eab 100644
--- a/src/module/cytoscapeMapTrace.js
+++ b/src/module/cytoscapeMapTrace.js
@@ -31,23 +31,23 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
   let cy = cytoscape({
     container: graphId,
     elements: {
-      nodes: nodes, // 節點的資料
-      edges: edges, // 關係線的資料
+      nodes: nodes, // Node data
+      edges: edges, // Edge data
     },
     layout: {
       name: 'dagre',
-      rankDir: 'LR' // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
+      rankDir: 'LR' // Vertical TB | Horizontal LR, variable from 'cytoscape-dagre' plugin
     },
     style: [
-      // node 節點的樣式
+      // Node styling
       {
         selector: 'node',
         style: {
           'label':
-          function(node) { // 節點要顯示的文字
+          function(node) { // Text to display on the node
             let text = '';
 
-            // node.data('label') 為原先陣列 node.data.label
+            // node.data('label') accesses the original array value at node.data.label
             text = node.data('label').length > 18 ? `${node.data('label').substr(0,15)}...` : `${node.data('label')}`;
 
             return text
@@ -67,18 +67,18 @@ export default function cytoscapeMapTrace(nodes, edges, graphId) {
           'font-size': 14,
         }
       },
-      // edge 關係線的樣式
+      // Edge styling
       {
         selector: 'edge',
         style: {
           'curve-style': 'taxi', // unbundled-bezier | taxi
-          'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
+          'target-arrow-shape': 'triangle', // Arrow shape pointing to target: triangle
           'color': 'gray', //#0066cc
           'width': 'data(lineWidth)',
           'line-style': 'data(style)',
         }
       },
-      // 點擊 node 後改變的樣式
+      // Style changes when a node is selected
       {
         selector: 'node:selected',
         style:{
diff --git a/src/module/setChartData.js b/src/module/setChartData.js
index 2b86109..9a06fff 100644
--- a/src/module/setChartData.js
+++ b/src/module/setChartData.js
@@ -24,22 +24,22 @@ import getMoment from 'moment';
  *   with boundary points.
  */
 export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
-   // 將 baseData 轉換為包含 x 和 y 屬性的物件陣列
+   // Convert baseData to an array of objects with x and y properties
    let data = baseData.map(i => ({ x: i.x, y: i.y }));
 
-   // 計算 y 軸最小值
+   // Calculate the Y-axis minimum value
    let b = calculateYMin(baseData, isPercent, yMin, yMax);
  
-   // 計算 y 軸最大值
+   // Calculate the Y-axis maximum value
    let mf = calculateYMax(baseData, isPercent, yMin, yMax);
  
-   // 添加最小值
+   // Prepend the minimum value
    data.unshift({
      x: xMin,
      y: b,
    });
  
-   // 添加最大值
+   // Append the maximum value
    data.push({
      x: xMax,
      y: mf,
@@ -140,11 +140,11 @@ export function setBarChartData(baseData) {
  *   values in seconds.
  */
 export function timeRange(minTime, maxTime, amount) {
-  // x 軸(時間軸)的範圍是最大-最小，從最小值按照 index 累加間距到最大值
+  // The X-axis (time axis) range is max - min; accumulate intervals from min to max by index
   const startTime = minTime;
   const endTime = maxTime;
-  let timeRange = []; // return數據初始化
-  const timeGap = (endTime - startTime) / (amount - 1); // 切分成多少段
+  let timeRange = []; // Initialize the return data array
+  const timeGap = (endTime - startTime) / (amount - 1); // Divide into segments
 
   for (let i = 0; i < amount; i++) {
     timeRange.push(startTime + timeGap * i);
@@ -165,7 +165,7 @@ export function yTimeRange(data, yAmount, yMax) {
   const yRange = [];
   const yGap = (1/ (yAmount-1));
 
-  // 貝茲曲線公式
+  // Cubic Bezier curve formula
   const threebsr = function (t, a1, a2, a3, a4) {
     return (
       (1 - t) * (1 - t) * (1 - t) * a1 +
@@ -204,8 +204,8 @@ export function yTimeRange(data, yAmount, yMax) {
  * @returns {number} The index of the closest value in the array.
  */
 export function getXIndex(data, xValue) {
-  let closestIndex = xValue; // 假定第一个元素的索引是 0
-  let smallestDifference = Math.abs(xValue - data[0]); // 初始差值设为第一个元素与目标数的差值
+  let closestIndex = xValue; // Assume the first element index is 0
+  let smallestDifference = Math.abs(xValue - data[0]); // Initialize difference to the gap between the first element and target
 
   for (let i = 0; i < data.length; i++) {
     let difference = Math.abs(xValue - data[i]);
@@ -244,7 +244,7 @@ export function formatTime(seconds) {
     }
     result += `${remainingSeconds}s`;
 
-    return result.trim(); // 去除最后一个空格
+    return result.trim(); // Remove trailing whitespace
   } else {
     return null;
   }
@@ -258,12 +258,12 @@ export function formatTime(seconds) {
 export function formatMaxTwo(times) {
   const formattedTimes = [];
   for (let time of times) {
-      // 匹配數字和單位(天、小時、分鐘、秒), 假設數字不可能大於10位數
+      // Match numbers and units (days, hours, minutes, seconds); assume numbers have at most 10 digits
       let units = time.match(/\d{1,10}[dhms]/g);
       let formattedTime = '';
       let count = 0;
 
-      // 只保留最大的兩個單位
+      // Keep only the two largest units
       for (let unit of units) {
           if (count >= 2) {
               break;
@@ -271,7 +271,7 @@ export function formatMaxTwo(times) {
           formattedTime += unit + ' ';
           count++;
       }
-      formattedTimes.push(formattedTime.trim()); // 去除末尾的空格
+      formattedTimes.push(formattedTime.trim()); // Remove trailing whitespace
   }
   return formattedTimes;
 }
diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index d9a321c..58ae830 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -95,8 +95,8 @@ export function getTimeLabel(second, fixedNumber = 0) {
   const hour = 60 * 60;
   const minutes = 60;
 
-  // 取餘數的操作會把 second 限制在一天之內的範圍（即從0到86399之間），
-  // 意思是過了多少天後剩下多少秒。
+  // The modulo operation limits the value to within one day (0 to 86399),
+  // representing the remaining seconds after full days.
   const dd = Math.floor(second / day);
   const hh = Math.floor((second % day) / hour);
   const mm = Math.floor((second % hour) / minutes);
@@ -226,15 +226,15 @@ export const setTimeStringFormatBaseOnTimeDifference = (minTimeStamp, maxTimeSta
 
   let dateFormat;
   if (timeDifferenceInSeconds < 60) {
-    dateFormat = 'HH:mm:ss'; // 秒
+    dateFormat = 'HH:mm:ss'; // Seconds range
   } else if (timeDifferenceInSeconds < 3600) {
-    dateFormat = 'MM/DD HH:mm'; // 分鐘
-  } else if (timeDifferenceInSeconds < 86400) { // 86400 秒 = 24 小時
-    dateFormat = 'MM/DD HH:mm'; // 小時
-  } else if (timeDifferenceInSeconds < 2592000) { // 2592000 秒 = 30 天
-    dateFormat = 'YYYY/MM/DD'; // 天
+    dateFormat = 'MM/DD HH:mm'; // Minutes range
+  } else if (timeDifferenceInSeconds < 86400) { // 86400 seconds = 24 hours
+    dateFormat = 'MM/DD HH:mm'; // Hours range
+  } else if (timeDifferenceInSeconds < 2592000) { // 2592000 seconds = 30 days
+    dateFormat = 'YYYY/MM/DD'; // Days range
   } else {
-    dateFormat = 'YYYY/MM/DD'; // 月
+    dateFormat = 'YYYY/MM/DD'; // Months range
   }
 
   return dateFormat;
diff --git a/src/plugins/myPiniaPlugin.ts b/src/plugins/myPiniaPlugin.ts
index 7b84cbd..c6674fb 100644
--- a/src/plugins/myPiniaPlugin.ts
+++ b/src/plugins/myPiniaPlugin.ts
@@ -17,7 +17,7 @@ import { PiniaPluginContext } from 'pinia';
 const myPiniaPlugin = (context: PiniaPluginContext) => {
   const { store } = context;
 
-  // 在这里添加你的插件逻辑，例如：
+  // Add your plugin logic here, for example:
   store.$subscribe((mutation, state) => {
     console.log(`Store mutation:`, mutation);
     console.log(`New state:`, state);
diff --git a/src/router/index.ts b/src/router/index.ts
index d2d8a91..18987cc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,8 +27,8 @@ import NotFound404 from '@/views/NotFound404.vue';
 
 const routes = [
   {
-    path: '/', // 預設進入路由
-    redirect: '/files',  //重定向
+    path: '/', // Default entry route
+    redirect: '/files',  // Redirect to /files
    },
   {
     path: '/',
@@ -77,7 +77,7 @@ const routes = [
         component: MyAccount,
       },
       {
-        path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄
+        path: "/upload", // router.push({ replace: true }) does not add the path to history
         name: "Upload",
         component: Upload
       },
@@ -86,29 +86,29 @@ const routes = [
         name: "Discover",
         children: [
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: log_id | filter_id，參數會有以上任一。
+            // type: log | filter, the parameter can be either.
+            // fileId: log_id | filter_id, the parameter can be either.
             path: "/discover/:type/:fileId/map",
             name: "Map",
             component: Map,
           },
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: log_id | filter_id，參數會有以上任一。
+            // type: log | filter, the parameter can be either.
+            // fileId: log_id | filter_id, the parameter can be either.
             path: "/discover/:type/:fileId/conformance",
             name: "Conformance",
             component: Conformance,
           },
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: log_id | filter_id，參數會有以上任一。
+            // type: log | filter, the parameter can be either.
+            // fileId: log_id | filter_id, the parameter can be either.
             path: "/discover/:type/:fileId/performance",
             name: "Performance",
             component: Performance,
           },
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            // type: log | filter, the parameter can be either.
+            // fileId: check_id, fetches parent data via `/log-checks/{check_id}`
             path: "/discover/conformance/:type/:fileId/map",
             name: "CheckMap",
             component: Map,
@@ -117,8 +117,8 @@ const routes = [
             }
           },
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            // type: log | filter, the parameter can be either.
+            // fileId: check_id, fetches parent data via `/log-checks/{check_id}`
             path: "/discover/conformance/:type/:fileId/conformance",
             name: "CheckConformance",
             component: Conformance,
@@ -127,8 +127,8 @@ const routes = [
             }
           },
           {
-            // type: log | filter，參數會有以上任一。
-            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            // type: log | filter, the parameter can be either.
+            // fileId: check_id, fetches parent data via `/log-checks/{check_id}`
             path: "/discover/conformance/:type/:fileId/performance",
             name: "CheckPerformance",
             component: Performance,
@@ -169,12 +169,12 @@ const router = createRouter({
   routes
 });
 
-// 全域性路由守衛
+// Global navigation guard
 router.beforeEach((to, from) => {
-  // to: Route: 即將要進入的目標 路由物件
-  // from: Route: 當前導航正要離開的路由
+  // to: Route: the target route object being navigated to
+  // from: Route: the current route being navigated away from
 
-  // 當路由到 login 時，已登入則跳轉至 Files
+  // When navigating to the login page, redirect to Files if already logged in
   if (to.name === 'Login') {
     const isLoggedIn = document.cookie.split(';').some(c => c.trim().startsWith('isLuciaLoggedIn='));
     if (isLoggedIn) return { name: 'Files' };
diff --git a/src/stores/acctMgmt.ts b/src/stores/acctMgmt.ts
index ece1312..966ce1f 100644
--- a/src/stores/acctMgmt.ts
+++ b/src/stores/acctMgmt.ts
@@ -47,9 +47,9 @@ export const useAcctMgmtStore = defineStore('acctMgmtStore', {
     response: {
       deleteAccount: null,
     },
-    isOneAccountJustCreate: false, //如果有一個帳號剛剛建立，則會在列表上的第一列顯示這個帳號，並且右置一個徽章
+    isOneAccountJustCreate: false, // If an account was just created, display it at the top of the list with a badge
     justCreateUsername: '', // unique username
-    shouldUpdateList: false, // 控制是否該刷新列表
+    shouldUpdateList: false, // Controls whether the list should be refreshed
   }),
   getters: {},
   actions: {
@@ -113,9 +113,9 @@ export const useAcctMgmtStore = defineStore('acctMgmtStore', {
       await loginStore.getUserData();
       const loginUserData:User = loginStore.userData;
       return rawResponseData.map(user => ({
-        ...user, // 保留後端傳來的欄位
+        ...user, // Preserve fields from the backend response
         isCurrentLoggedIn: loginUserData.username === user.username,
-        isDeleteHovered: false, // 針對前端顯示而額外增加的欄位
+        isDeleteHovered: false, // Additional fields for frontend display state
         isRowHovered: false,
         isEditHovered: false,
       }));
@@ -267,7 +267,7 @@ export const useAcctMgmtStore = defineStore('acctMgmtStore', {
         this.currentViewingUser.is_admin = response.data.roles.some(role => role.code === 'admin');
         return response.status === 200;
       } catch (error) {
-        //不需要跳出錯誤，因為如果是錯誤反而是好事，表示帳號是獨一的
+        // No need to show an error, because an error here means the account is unique
         return false;
       }
     },
diff --git a/src/stores/allMapData.ts b/src/stores/allMapData.ts
index 8e69491..c68cba9 100644
--- a/src/stores/allMapData.ts
+++ b/src/stores/allMapData.ts
@@ -55,17 +55,17 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
     allFilterTimeframe: {},
     allFilterTrace: [],
     allFilterAttrs: [],
-    hasResultRule: null, // click Apply 後檢查是否有 Data
-    temporaryData: [], // 沒被 apply all 的 Data
-    postRuleData: [], // has-result API & temp-filters API 的 Data
+    hasResultRule: null, // Whether any data remains after clicking Apply
+    temporaryData: [], // Data not yet applied via Apply All
+    postRuleData: [], // Data for the has-result API and temp-filters API
     ruleData: [], // Funnle view's data
     isRuleData: [], // toggle button data
     allFunnelData: [],
-    isUpdateFilter: false, // 是否成功儲存 Filter 檔
+    isUpdateFilter: false, // Whether the filter file was saved successfully
     selectTimeFrame: [], // user select time start and end
-    infinite404: null, // 無限滾動式是否到底要換頁
-    infiniteStart: 0, // 無限滾動 case 開始的數字
-    baseInfiniteStart: 0, // 無限滾動 case 開始的數字
+    infinite404: null, // Whether infinite scroll has reached the last page
+    infiniteStart: 0, // Starting index for infinite scroll cases
+    baseInfiniteStart: 0, // Starting index for base infinite scroll cases
   }),
   getters: {
     processMap: state => {
@@ -273,10 +273,10 @@ export const useAllMapDataStore = defineStore('allMapDataStore', {
 
         const min = this.allFilterTimeframe.x_axis.min;
         const max = this.allFilterTimeframe.x_axis.max;
-        // 給 Chart.js 原始資料，格式不同的畫會錯誤輸出
+        // Preserve raw data for Chart.js; incorrect format causes wrong output
         this.allFilterTimeframe.x_axis.min_base = min;
         this.allFilterTimeframe.x_axis.max_base = max;
-        // 轉成無秒的時間格式
+        // Convert to a time format without seconds
         this.allFilterTimeframe.x_axis.min = min !== null ? moment(min).format('YYYY/MM/DD HH:mm') : null;
         this.allFilterTimeframe.x_axis.max = max !== null ? moment(max).format('YYYY/MM/DD HH:mm') : null;
       } catch(error) {
diff --git a/src/stores/compare.ts b/src/stores/compare.ts
index cc9937c..51665bc 100644
--- a/src/stores/compare.ts
+++ b/src/stores/compare.ts
@@ -29,7 +29,7 @@ export const useCompareStore = defineStore('compareStore', {
      * @param { array } queryParams
      */
     async getCompare(queryParams) {
-      // encodeURIComponent 函數用於將字串中的特殊字符進行編碼，以確保 URL 的正確性。
+      // encodeURIComponent encodes special characters in the string to ensure URL correctness.
       const queryString = JSON.stringify(queryParams);
       const api = `/api/compare?datasets=${encodeURIComponent(queryString)}`;
 
diff --git a/src/stores/conformance.ts b/src/stores/conformance.ts
index bc5e996..a5b7975 100644
--- a/src/stores/conformance.ts
+++ b/src/stores/conformance.ts
@@ -49,12 +49,12 @@ function getFileTypeApi(state) {
 /** Pinia store for conformance checking and rule management. */
 export const useConformanceStore = defineStore('conformanceStore', {
   state: () => ({
-    conformanceLogId: null, // log 檔
-    conformanceFilterId: null, // filter 檔
-    conformanceLogTempCheckId: null, // log 檔存檔前的 check Id
-    conformanceFilterTempCheckId: null, // Filter 檔存檔前的 check Id
-    conformanceLogCreateCheckId: null, // log 檔存檔後的 check Id(rule)
-    conformanceFilterCreateCheckId: null, // Filter 檔存檔後的 check Id(rule)
+    conformanceLogId: null, // Log file
+    conformanceFilterId: null, // Filter file
+    conformanceLogTempCheckId: null, // Temporary check ID for log (before saving)
+    conformanceFilterTempCheckId: null, // Temporary check ID for filter (before saving)
+    conformanceLogCreateCheckId: null, // Created check ID for log (rule, after saving)
+    conformanceFilterCreateCheckId: null, // Created check ID for filter (rule, after saving)
     allConformanceTask: [],
     allCfmSeqStart: [],
     allCfmSeqEnd: [],
@@ -76,11 +76,11 @@ export const useConformanceStore = defineStore('conformanceStore', {
     selectedActSeqMore: 'All', // radio
     selectedActSeqFromTo: 'From', // radio
     infinite404: null,
-    isStartSelected: null, // start & end 連動先選擇 start
-    isEndSelected: null, // start & end 連動先選擇 end
+    isStartSelected: null, // Whether start is selected in linked start & end selection
+    isEndSelected: null, // Whether end is selected in linked start & end selection
     conformanceRuleData: null, // create checkId's data to save
-    isUpdateConformance: false, // 成功儲存後要跳 Modal
-    conformanceFileName: null, // 儲存成功的 Modal 用
+    isUpdateConformance: false, // Show modal after successful save
+    conformanceFileName: null, // File name displayed in the save success modal
   }),
   getters: {
     conformanceAllTasks: state => {
diff --git a/src/stores/conformanceInput.ts b/src/stores/conformanceInput.ts
index 7cc905a..3a37e65 100644
--- a/src/stores/conformanceInput.ts
+++ b/src/stores/conformanceInput.ts
@@ -20,7 +20,7 @@ import moment from 'moment';
 export const useConformanceInputStore = defineStore('conformanceInputStore', {
   state: () => ({
     inputDataToSave: {
-        inputStart: null, // 有待釐清，start 是活動的開始，還是時間的開始?
+        inputStart: null, // TODO: clarify whether "start" means activity start or time start
         inputEnd: null,
         min: null,
         max: null,
diff --git a/src/stores/cytoscapeStore.ts b/src/stores/cytoscapeStore.ts
index f9fc2c2..d75a756 100644
--- a/src/stores/cytoscapeStore.ts
+++ b/src/stores/cytoscapeStore.ts
@@ -51,7 +51,7 @@ export const useCytoscapeStore = defineStore('cytoscapeStore', {
       if (!this.nodePositions[this.currentGraphId][direction]) {
         this.nodePositions[this.currentGraphId][direction] = [];
       }
-      // 若是資訊曾經存在這張圖於localStorage中
+      // If this graph's data was previously stored in localStorage
       if (localStorage.getItem(SAVE_KEY_NAME)) {
         const nodeToSave = this.nodePositions[this.currentGraphId][direction]
           .find(node => node.id === nodeId);
diff --git a/src/stores/files.ts b/src/stores/files.ts
index 75e36fc..f92e8e6 100644
--- a/src/stores/files.ts
+++ b/src/stores/files.ts
@@ -147,13 +147,13 @@ export const useFilesStore = defineStore('filesStore', {
         },
       };
 
-      uploadloader(); // 進度條
+      uploadloader(); // Show loading progress bar
       try {
         const response = await apiClient.post(api, fromData, config);
 
         this.uploadId = response.data.id;
         this.$router.push({name: 'Upload'});
-        Swal.close(); // 關閉進度條
+        Swal.close(); // Close the loading progress bar
       } catch(error) {
         if(error.response?.status === 422) {
           // msg: 'not in UTF-8' | 'insufficient columns' | 'the csv file is empty' | 'the filename does not ends with .csv'
@@ -162,7 +162,7 @@ export const useFilesStore = defineStore('filesStore', {
 
           uploadFailedFirst(detail[0].type, detail[0].msg, detail[0].loc[2]);
         } else {
-          Swal.close(); // 關閉進度條
+          Swal.close(); // Close the loading progress bar
           apiError(error, 'Failed to upload the files.');
         }
       }
@@ -189,13 +189,13 @@ export const useFilesStore = defineStore('filesStore', {
       const uploadId = this.uploadId;
       const api = `/api/logs/csv-uploads/${uploadId}`;
 
-      uploadloader(); // 進度條
+      uploadloader(); // Show loading progress bar
       try {
         const response = await apiClient.post(api, data);
 
         this.uploadLogId = response.data.id;
-        Swal.close(); // 關閉進度條
-        await this.rename(); // 改檔名
+        Swal.close(); // Close the loading progress bar
+        await this.rename(); // Rename the file
         await uploadSuccess();
         this.$router.push({name: 'Files'});
       } catch(error) {
@@ -204,7 +204,7 @@ export const useFilesStore = defineStore('filesStore', {
 
           uploadFailedSecond(detail);
         } else {
-          Swal.close(); // 關閉進度條
+          Swal.close(); // Close the loading progress bar
           apiError(error, 'Failed to upload the log files.');
         }
       }
@@ -216,7 +216,7 @@ export const useFilesStore = defineStore('filesStore', {
      * @param {string} name - The file name.
      */
     async rename(type, id, fileName) {
-      // 先判斷有沒有 uploadLogId，有就設定 id 和 type；再判斷檔案型別。
+      // If uploadLogId exists, set id and type accordingly; then check the file type.
       if(this.uploadId && this.uploadFileName) {
         type = 'log';
         id = this.uploadLogId;
diff --git a/src/stores/login.ts b/src/stores/login.ts
index f1842d5..fa43fd4 100644
--- a/src/stores/login.ts
+++ b/src/stores/login.ts
@@ -39,7 +39,7 @@ export const useLoginStore = defineStore('loginStore', {
       const api = '/api/oauth/token';
       const config = {
         headers: {
-          // http post 預設的 url 編碼，非 json 格式
+          // Default URL-encoded format for HTTP POST, not JSON
           'Content-Type':'application/x-www-form-urlencoded',
         },
       };
@@ -48,7 +48,7 @@ export const useLoginStore = defineStore('loginStore', {
         const response = await axios.post(api, this.auth, config);
         const accessToken = response.data.access_token;
         const refresh_token = response.data.refresh_token;
-        // 將 token 儲存在 cookie
+        // Store the token in a cookie
         setCookieWithoutExpiration("luciaToken", accessToken);
         const expiryDate = new Date();
         expiryDate.setMonth(expiryDate.getMonth() + 6);
@@ -57,9 +57,9 @@ export const useLoginStore = defineStore('loginStore', {
         this.isLoggedIn = true;
         setCookie("isLuciaLoggedIn", "true");
 
-        // 大部分的情況下，預設導向至 FILES 頁面
-        // 然而有一種情況是使用者在沒有登入的情況下貼上了某一個頁面的網址，
-        // 則在此情況下時，我們會在使用者稍後登入後，把使用者帶到剛才記住的 return-to 網址
+        // By default, redirect to the FILES page.
+        // However, if the user pasted a URL while not logged in,
+        // redirect them to the remembered return-to URL after login.
         if(this.rememberedReturnToUrl !== "") {
           const decodedUrl = atob(this.rememberedReturnToUrl);
           // Only allow relative paths to prevent open redirect attacks
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index 5630c7b..3358a34 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -92,7 +92,7 @@ export const useMapPathStore = defineStore('mapPathStore', {
             nodes: [],
           }; // second layer index
 
-          let curGraphNode, prevGraphNode, curEdge; // 配對 curGraphNode 與 nodeIndex 指向的 node
+          let curGraphNode, prevGraphNode, curEdge; // Match curGraphNode with the node at nodeIndex
           for (let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++) {
             if (nodeIndex === 0) { // special case, initialize curGraphNode
               curGraphNode = this.startNode.outgoers('node').filter(neighborOfStart =>
@@ -109,7 +109,7 @@ export const useMapPathStore = defineStore('mapPathStore', {
             }
             this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].nodes.push(curGraphNode);
             this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(curEdge);
-            // 特殊狀況，在for迴圈之外額外插入最後一條線段
+            // Special case: append the last edge segment outside the loop
             if (nodeIndex === curButton[listIndex].length - 1) {
               const endNode = curGraphNode.outgoers('node').filter(neighbor =>
                 neighbor.data('label').toLocaleLowerCase() === 'end'
@@ -142,14 +142,14 @@ export const useMapPathStore = defineStore('mapPathStore', {
     depthFirstSearchCreatePath(node, currentPathByNode, curPathByEdge) {
       const outgoingEdges = node.outgoers('edge');
       if (outgoingEdges.length === 0) {
-        // 表示已經遇到尾聲
+        // Reached the end node
         this.allPaths.push([...currentPathByNode]);
         this.allPathsByEdge.push([...curPathByEdge])
       } else {
         outgoingEdges.targets().forEach((targetNode) => {
           if (!currentPathByNode.includes(targetNode)) {
             const connectingEdge = targetNode.edgesWith(currentPathByNode[currentPathByNode.length - 1]);
-            // 避免loop，只有當目標節點不在當前路徑中之時才繼續
+            // Avoid loops: only continue if the target node is not already in the current path
             this.depthFirstSearchCreatePath(targetNode, [...currentPathByNode, targetNode],
               [...curPathByEdge, connectingEdge]
             );
@@ -165,13 +165,13 @@ export const useMapPathStore = defineStore('mapPathStore', {
       for (let whichPath = 0; whichPath < this.allPaths.length; whichPath++) {
         const curPath = this.allPaths[whichPath];
         const curPathByEdge = this.allPathsByEdge[whichPath];
-        // 針對這個path的第一個節點，找到它在insights中是對應到哪一個起點
+        // For the first node in this path, find which insights starting point it corresponds to
         for (let i = 0; i < INSIGHTS_FIELDS_AND_LABELS.length; i++) {
           const curButton = this.insights[INSIGHTS_FIELDS_AND_LABELS[i][0]];
           for (let listIndex = 0; listIndex < curButton.length; listIndex++) {
             for (let nodeIndex = 0; nodeIndex < curButton[listIndex].length; nodeIndex++) {
               if (curPath[1].data('label') === curButton[listIndex][nodeIndex]) {
-                // 從 1 開始而不是從 0 開始是因為 0 的label是start字串
+                // Start from index 1 instead of 0 because index 0 is the "start" label
                 const matchResult = this.depthFirstSearchMatchTwoPaths(curPath, 1, curButton, listIndex, nodeIndex)
                 if (matchResult) {
                   this.mapGraphPathToInsight[i] = {
@@ -189,39 +189,39 @@ export const useMapPathStore = defineStore('mapPathStore', {
       } // end first for
     },
     depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex) {
-      if (listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍
-        return; // nodeIndex表示是當選訂了五顆按鈕之一之後，清單上的第幾個path
+      if (listIndex >= curButton.length) { // Bounds check to prevent out-of-range access
+        return; // nodeIndex is the path index in the list after selecting one of the five buttons
       }
-      if (nodeIndex >= curButton[listIndex]) { // 邊界條件檢查，防止超出範圍
-        return; // 表示清單上這個path上的第幾個節點
+      if (nodeIndex >= curButton[listIndex]) { // Bounds check to prevent out-of-range access
+        return; // The node index within this path in the list
       }
-      // 如果 `curPath` 和 `curButton[listIndex]` 完全匹配
+      // If `curPath` and `curButton[listIndex]` fully match
       if (curPathIndex === curPath.length || nodeIndex === curButton[listIndex].length) {
         return true;
       }
 
-      // 邊界條件檢查，防止超出範圍
+      // Bounds check to prevent out-of-range access
       if (curPathIndex >= curPath.length || nodeIndex >= curButton[listIndex].length) {
         return;
       }
 
       const nodeLabel = curPath[curPathIndex].data('label');
-      // 如果當前節點匹配
+      // If the current node matches
       if (nodeLabel === curButton[listIndex][nodeIndex]) {
         if (nodeIndex === curButton[listIndex].length - 1) {
           return true; // Reach
         }
-        //從以下兩個選項選出答案可能是true的。但也可能答案都是false
-        // 選項一是遞增insights的第一層的指標。這裡必須遞增path的指標
+        // Pick the option that may return true from the two below; both could be false.
+        // Option 1: increment the insights first-level index; must also increment the path index.
         if (this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex + 1, nodeIndex)) {
           return true;
         }
-        // 選項二是遞增insights的第一層的指標。這裡必須遞增path的指標
+        // Option 2: increment the insights second-level index; must also increment the path index.
         if (this.depthFirstSearchMatchTwoPaths(curPath, curPathIndex + 1, curButton, listIndex, nodeIndex + 1)) {
           return true;
         }
       }
-      return false; // 當前節點不匹配時返回 false
+      return false; // Return false when the current node does not match
     },
     highlightClickedPath(clickedActiveTraceIndex: number, clickedPathListIndex: number) {
       this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[clickedActiveTraceIndex][0]][clickedPathListIndex].edges.forEach(edgeToHighlight => {
diff --git a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
index 34db97c..2c1921f 100644
--- a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
+++ b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
@@ -323,7 +323,7 @@ onMounted(async () => {
 });
 </script>
 <style>
-/*為了讓 radio 按鈕可以置中，所以讓欄位的文字也置中 */
+/* Center column text so that radio buttons are also centered */
 .header-center .p-column-header-content{
     justify-content: center;
 }
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index a25b92a..371fe86 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -52,7 +52,7 @@
                         :class="{
                             'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
                         }"
-                    > <!-- 這裡會根據究竟是create彈窗還是edit彈窗來改變Password的排版 -->
+                    > <!-- Layout of Password field changes depending on whether this is the create or edit modal -->
                         <span class="align-right-span flex h-full w-[122px] justify-end"
                             :class="{
                                 'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
@@ -100,7 +100,7 @@
                     </div>
             </div>
             <div v-show="false" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
-                mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
+                mb-4 flex items-center"> <!-- 2-by-2 grid; the bottom-left cell is a dummy cell with no content -->
                 <span v-show="false" class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
                     :class="{
                         'text-[#000000]': isPwdMatched,
@@ -125,14 +125,14 @@
                         @click="togglePwdConfirmEyeBtn" alt="eye"/>
                     <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdConfirmEyeBtn" alt="eye"/>
                 </div>
-                <div class="dummy-grid h-[24px]"></div> <!-- 透過 dummy-grid 來撐起高度-->
+                <div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
                 <div class="error-msg-section flex justify-start">
                     <img v-show="!isPwdMatched" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                     <span class="error-msg-text flex text-[#FF3366] h-[24px]">
                         {{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
                     </span>
                 </div>
-                <div class="dummy-grid h-[24px]"></div> <!-- 透過 dummy-grid 來撐起高度-->
+                <div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
                 <div class="error-msg-section flex justify-start">
                     <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                     <span class="error-msg-text flex text-[#FF3366] h-[24px]">
@@ -142,7 +142,7 @@
             </div>
             <div v-if="whichCurrentModal === MODAL_CREATE_NEW" class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
                 <div class="dummy field-label flex items-center w-[122px]">
-                </div> <!--這裡也使用了dummy欄位去撐起空間-->
+                </div> <!-- A dummy field is also used here to maintain spacing -->
                 <section id="account_create_checkboxes_section" class="flex flex-col">
                     <div class="checkbox-and-text flex">
                         <IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
@@ -229,7 +229,7 @@ const inputPwd = ref("");
 const isAccountUnique = ref(true);
 const isEditable = ref(true);
 
-// 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 欄位了。
+// Since adding this watch, filling in the password field no longer clears the account or full name fields.
 watch(whichCurrentModal, (newVal) => {
     if (newVal === MODAL_CREATE_NEW) {
         inputUserAccount.value = '';
@@ -253,7 +253,7 @@ const validatePwdLength = () => {
 }
 
 const onInputDoubleClick = () => {
-    // 允許編輯模式
+    // Enable edit mode
     isEditable.value = true;
 }
 
@@ -288,8 +288,8 @@ const onConfirmBtnClick = async () => {
             if(!isAccountUnique.value) {
                 return;
             }
-            // 要注意的是舊的username跟新的username可以是不同的
-            // 區分有無傳入密碼的情況
+            // Note that the old username and new username can be different
+            // Distinguish between cases with and without a password
             if(isResetPwdSectionShow.value) {
                 await acctMgmtStore.editAccount(
                     currentViewingUser.value.username, {
@@ -315,7 +315,7 @@ const onConfirmBtnClick = async () => {
 }
 
 const checkAccountIsUnique = async() => {
-    // 如果使用者沒有更動過欄位，那就不用調用任何後端的API
+    // If the user has not modified the field, no backend API call is needed
     if(inputUserAccount.value === username.value) {
         return true;
     }
@@ -344,14 +344,14 @@ const onInputNameFocus = () => {
 
 const onResetPwdButtonClick = () => {
     isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
-    // 必須清空密碼欄位輸入的字串
+    // Must clear the password input field
     inputPwd.value = '';
 }
 
 watch(
     [inputPwd, inputUserAccount, inputName],
     ([newPwd, newAccount, newName]) => {
-        // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
+        // Enable the confirm button when all fields are non-empty
         if(newAccount.length > 0 && newName.length > 0) {
             isConfirmDisabled.value = false;
         }
@@ -374,6 +374,6 @@ function onCancelBtnClick(){
 <style>
 #modal_account_edit {
     background-color: #ffffff;
-    backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
+    backdrop-filter: opacity(1); /* Prevent child elements from inheriting parent's opacity */
 }
 </style>
diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue
index 258dfc9..82e900f 100644
--- a/src/views/Compare/Dashboard/Compare.vue
+++ b/src/views/Compare/Dashboard/Compare.vue
@@ -273,7 +273,7 @@ function handleClick(tagId) {
   if (isSafeTagId(tagId)) {
     window.location.href = tagId;
   } else {
-    console.warn("不安全的 tagId: ", tagId);
+    console.warn("Unsafe tagId: ", tagId);
   }
 }
 
@@ -1258,7 +1258,7 @@ function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit
       { [secondaryTypeParam]: secondaryId }
     ];
 
-    // 取得 Compare Data
+    // Fetch Compare Data
     await compareStore.getCompare(queryParams);
     avgProcessTimeByTaskHeight.value = getHorizontalBarHeight(compareDashboardData.value.time.avg_process_time_by_task);
     if(compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue
index 8f1b8c4..68764b9 100644
--- a/src/views/Discover/Performance/FreqChart.vue
+++ b/src/views/Discover/Performance/FreqChart.vue
@@ -42,19 +42,19 @@ x: {
     },
     ticks: {
     display: true,
-    maxRotation: 0, // 不旋轉 lable 0~50
+    maxRotation: 0, // Do not rotate labels (range: 0~50)
     color: '#64748b',
-    source: 'labels', // 依比例彈性顯示 label 數量
+    source: 'labels', // Dynamically display label count proportionally
     },
     border: {
     color: '#64748b',
     },
     grid: {
-    tickLength: 0, // 網格是否超過邊線
+    tickLength: 0, // Prevent grid lines from extending beyond the axis
     }
 },
 y: {
-    beginAtZero: true, // scale 包含 0
+    beginAtZero: true, // Scale includes 0
     title: {
     display: true,
     color: '#334155',
@@ -71,7 +71,7 @@ y: {
     color: '#64748b',
     },
     border: {
-    display: false, // 隱藏左側多出來的線
+    display: false, // Hide the extra border line on the left side
     },
 },
 };
@@ -128,7 +128,7 @@ const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
         ticks: {
           ...scaleObjectToAlter.x.ticks,
             callback: function(value, index) {
-              // 根據不同的級距客製化 x 軸的時間刻度
+              // Customize x-axis time ticks based on different intervals
               return ticksOfXAxis[index];
             },
         },
@@ -188,8 +188,8 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
   let primeVueSetData = {};
   let primeVueSetOption = {};
 
-  // 考慮 chartData.data 的dimension
-  // 當我們遇到了 Compare 頁面的案例
+  // Consider the dimension of chartData.data
+  // When handling the Compare page case
   if(pageName === "Compare"){
     datasetsPrimary = chartData.data[0].data;
     datasetsSecondary = chartData.data[1].data;
@@ -199,7 +199,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         label: chartData.data[0].label,
         data: datasetsPrimary,
         fill: false,
-        tension: 0, // 貝茲曲線張力
+        tension: 0, // Bezier curve tension
         borderColor: colorPrimary,
         pointBackgroundColor: colorPrimary,
       },
@@ -207,7 +207,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         label: chartData.data[1].label,
         data: datasetsSecondary,
         fill: false,
-        tension: 0, // 貝茲曲線張力
+        tension: 0, // Bezier curve tension
         borderColor: colorSecondary,
         pointBackgroundColor: colorSecondary,
       }
@@ -220,7 +220,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
         label: content.title,
         data: datasets,
         fill: false,
-        tension: 0, // 貝茲曲線張力
+        tension: 0, // Bezier curve tension
         borderColor: '#0099FF',
       }
     ];
@@ -254,17 +254,17 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
       }
     },
     plugins: {
-      legend: false, // 圖例
+      legend: false, // Legend
       tooltip: {
         displayColors: true,
         titleFont: {weight: 'normal'},
         callbacks: {
           label: function(tooltipItem) {
-              // 取得數據
+              // Get the data
               const label = tooltipItem.dataset.label || '';
 
-              // 建立一個小方塊顯示顏色
-              return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
+              // Build the tooltip label with dataset color indicator
+              return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
           },
         },
       },
@@ -275,9 +275,9 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
     scales: customizedScaleOption,
   };
 
-  primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
+  primeVueSetOption.scales.y.ticks.precision = 0; // Show 0 decimal places on y-axis
   primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-    return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
+    return value; // Y-axis ticks here have no time unit suffix
   };
   primeVueSetDataState.value = primeVueSetData;
   primeVueSetOptionsState.value = primeVueSetOption;
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 2ee8b0f..b12a6ec 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -269,7 +269,7 @@ function handleClick(tagId) {
   if (isSafeTagId(tagId)) {
     window.location.href = tagId;
   } else {
-    console.warn("不安全的 tagId: ", tagId);
+    console.warn("Unsafe tagId: ", tagId);
   }
 }
 
@@ -918,7 +918,7 @@ function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
       id = file.parent.id;
     }
 
-    // 取得 Performance Data
+    // Fetch Performance Data
     await performanceStore.getPerformance(type, id);
     if(!performanceData.value?.time) {
       return;
diff --git a/src/views/Files/Files.vue b/src/views/Files/Files.vue
index ec98b77..1dd4c1a 100644
--- a/src/views/Files/Files.vue
+++ b/src/views/Files/Files.vue
@@ -77,7 +77,7 @@
       <!-- Recently Used -->
       <section v-else>
         <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
-        <!-- card group 最多六個-->
+        <!-- card group, up to six items -->
         <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[184px] scrollbar pb-4">
           <!-- card item v-for -->
           <li class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
@@ -485,13 +485,13 @@
   async function deleteFile(type, id, name, source) {
     let srt = '';
     let data = [];
-    // 判斷是否來自 hover icon 選單
+    // Check if the action comes from the hover icon menu
     if(type && id && name && source === 'list-hover') {
       selectedType.value = type;
       selectedId.value = id;
       selectedName.value = name;
     }
-    // 取得相依性檔案
+    // Fetch dependent files
     await store.getDependents(selectedType.value, selectedId.value);
     if(dependentsData.value.length !== 0) {
       data = [...dependentsData.value];
@@ -591,7 +591,7 @@
   function getGridSortData(event) {
     const code = event.value.code;
 
-    // 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
+    // Text sorting: convert the name field to lowercase for comparison using localeCompare()
     switch (code) {
       case 'nameAscending':
         compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
@@ -628,7 +628,7 @@
       const clickedLi = e.target.closest('li');
       if(!clickedLi || !clickedLi.id.startsWith('li')) isActive.value = null;
     });
-    // 為 DataTable tbody 加入 .scrollbar 選擇器
+    // Add the .scrollbar class to the DataTable tbody
     const tbodyElement = document.querySelector('.p-datatable-tbody');
     tbodyElement?.classList.add('scrollbar');
     isLoading.value = false;
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index b767f81..6b3dc0f 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -102,8 +102,8 @@ function onInputPwdFocus(){
 }
 
 // Created logic
-// 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
-// btoa: 對字串進行 Base64 編碼
+// Handle the case where a user pastes a page URL into the browser without being logged in
+// btoa: Base64-encode the string
 if(route.query['return-to']) {
   setRememberedReturnToUrl(route.query['return-to']);
 }
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 05d8c1f..e657c80 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -33,7 +33,7 @@ import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
 import emitter from "@/utils/emitter";
 
 export default {
-  // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
+  // When the page is refreshed or entered for the first time, beforeRouteEnter is executed, but beforeRouteUpdate is not
     // PSEUDOCODE
     // if (not logged in) {
     //   if (has refresh token) {
@@ -85,9 +85,9 @@ export default {
 
     pageAdminStore.setPreviousPage(from.name);
 
-    // 離開 Map 頁時判斷是否有無資料和需要存檔
+    // When leaving the Map page, check if there is unsaved data
     if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
-      // 傳給 Map，通知 Sidebar 要關閉。
+      // Notify the Map's Sidebar to close
       emitter.emit('leaveFilter', false);
       leaveFilter(next, allMapDataStore.addFilterId, to.path)
     } else if((from.name === 'Conformance' || from.name === 'CheckConformance')
diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue
index cf0d2a2..23b80b7 100644
--- a/src/views/Upload/index.vue
+++ b/src/views/Upload/index.vue
@@ -94,7 +94,7 @@ import { useFilesStore } from '@/stores/files';
 
 export default {
   beforeRouteEnter(to, from, next){
-    // 要有 uploadID 才能進來
+    // An uploadID is required to enter this page
     next(vm => {
       const filesStore = useFilesStore();
       if(filesStore.uploadId === null) {
@@ -128,7 +128,7 @@ const tooltipUpload = {
     4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
     5. Status: Activity status, such as Start or Complete.
     6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
-    // 暫時沒有 Resource
+    // Resource is not available yet
     // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
  class: '!max-w-[400px] !text-[10px] !opacity-80',
  autoHide: false,
@@ -141,7 +141,7 @@ const columnType = [
   { name: 'Activity*', code: 'name', color: '!text-secondary', value: '', label: 'Activity', required: true },
   { name: 'Activity Instance ID*', code: 'instance', color: '!text-secondary', value: '', label: 'Activity Instance ID', required: true },
   { name: 'Case Attribute', code: 'case_attributes', color: '!text-primary', value: '', label: 'Case Attribute', required: false },
-  // { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // 現階段沒有，未來可能有
+  // { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // Not available yet; may be added in the future
   { name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
 ];
 
@@ -153,8 +153,8 @@ const showEdit = ref(false);
 
 // Computed
 const isDisabled = computed(() => {
-  // 1. 長度一樣，強制每一個都要選
-  // 2. 不為 null undefind
+  // 1. Length must match; every column must be assigned
+  // 2. Must not be null or undefined
   const hasValue = !selectedColumns.value.includes(undefined);
   const result = !(selectedColumns.value.length === uploadDetail.value?.columns.length
     && informData.value.length === 0 && repeatedData.value.length === 0 && hasValue);
@@ -203,7 +203,7 @@ function onInput(e) {
  * @returns {number} The text width in pixels.
  */
 function getTextWidth(text, e) {
-  // 替換空格為不斷行的空格
+  // Replace spaces with non-breaking spaces
   const processedText = text.replace(/ /g, '\u00a0');
   const hiddenSpan = document.createElement('span');
 
@@ -223,24 +223,24 @@ function getTextWidth(text, e) {
  */
 function updateValidationData(data) {
   const nameOccurrences = {};
-  const noSortedRepeatedData = []; // 未排序的重複選擇的 data
-  const selectedData = [] // 已經選擇的 data
+  const noSortedRepeatedData = []; // Unsorted duplicate selections
+  const selectedData = [] // Already selected data
 
-  informData.value = []; // 尚未選擇的 data
-  repeatedData.value = []; // 重複選擇的 data
+  informData.value = []; // Not yet selected data
+  repeatedData.value = []; // Duplicate selections
 
   data.forEach(item => {
     const { name, code } = item;
 
     if(nameOccurrences[name]) {
-      // 'Not Assigned'、'Case Attribute' 不列入驗證
+      // 'Not Assigned' and 'Case Attribute' are excluded from validation
       if(!code || code === 'case_attributes') return;
       nameOccurrences[name]++;
-      // 重複的選項只出現一次
+      // Each duplicate option should only appear once
       if(nameOccurrences[name] === 2){
         noSortedRepeatedData.push(item)
       }
-      // 要按照選單的順序排序
+      // Sort according to the dropdown menu order
       repeatedData.value = columnType.filter(column => noSortedRepeatedData.includes(column));
     }else {
       nameOccurrences[name] = 1;
@@ -252,13 +252,13 @@ function updateValidationData(data) {
 
 /** Resets all column selections to default. */
 function reset() {
-  // 路徑不列入歷史紀錄
+  // Do not add to browser history
   selectedColumns.value = [];
 }
 
 /** Navigates back to the Files page without uploading. */
 function cancel() {
-  // 路徑不列入歷史紀錄
+  // Do not add to browser history
   router.push({name: 'Files', replace: true});
 }
 
@@ -273,7 +273,7 @@ async function submit() {
     status: '',
     case_attributes: []
   };
-  // 給值
+  // Assign values
   const haveValueData = selectedColumns.value.map((column, i) => {
     if (column && uploadDetail.value.columns[i]) {
       return {
@@ -285,9 +285,9 @@ async function submit() {
     }
   });
 
-  // 取得欲更改的檔名，
+  // Get the desired file name to change
   uploadFileName.value = fileName.value;
-  // 設定第二階段上傳的 data
+  // Set the data for the second-stage upload
   haveValueData.forEach(column => {
     if(column !== undefined) {
       switch (column.code) {
@@ -319,7 +319,7 @@ async function submit() {
 
 // Mounted
 onMounted(async () => {
-  // 只監聯第一次
+  // Watch only once
   const unwatch = watch(fileName, (newValue) => {
       if (newValue) {
         const inputElement = document.getElementById('fileNameInput');
@@ -332,13 +332,13 @@ onMounted(async () => {
   );
   showEdit.value = true;
   if(uploadId.value) await filesStore.getUploadDetail();
-  selectedColumns.value = Array.from({ length: uploadDetail.value.columns.length }, () => columnType[columnType.length - 1]); // 預設選 Not Assigned
+  selectedColumns.value = Array.from({ length: uploadDetail.value.columns.length }, () => columnType[columnType.length - 1]); // Default to "Not Assigned"
   unwatch();
   isLoading.value = false;
 });
 
 onBeforeUnmount(() => {
-  // 離開頁面要刪 uploadID
+  // Clear uploadID when leaving the page
   uploadId.value = null;
   uploadFileName.value = null;
 });