Translate all Chinese comments and strings to English

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 20:03:19 +08:00
parent 7d5918837b
commit 1d621bf304
57 changed files with 499 additions and 499 deletions
--- 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;
--- 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);
--- 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;
 }
--- 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')
--- 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]
--- 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>
--- 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();
--- 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;
 }

--- 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() {
--- 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();
 });
--- 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;
 }
 /**
--- 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));
--- 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();
 }
 /**
--- 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>
--- 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>
--- 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>
--- 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);
@@ -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(() => {
--- 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;
    }
--- 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;
--- 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();
--- 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.')
  }
--- 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;
 }
--- 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();
--- 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.
--- 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>
--- 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 = '';
  }
--- 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')
--- 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) {
--- 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"
--- 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"/>
--- 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
    },
    },
 };
--- 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");
--- 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',
--- 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);
--- 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:{
--- 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;
 }
--- 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;
--- 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);
--- 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' };
--- 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;
      }
    },
--- 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) {
--- 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)}`;

--- 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 => {
--- 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,
--- 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);
--- 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;
--- 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
--- 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 => {
--- 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;
 }
--- 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>
--- 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) {
--- 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;
--- 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;
--- 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;
--- 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']);
 }
--- 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')
--- 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;
 });