From ab1eacc1c25bfee9d652c59b7ba65e62e2e2504c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= Date: Sun, 5 Jul 2026 00:42:58 +0800 Subject: [PATCH] Remove pure passthrough getters from allMapData store Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01RaRBJFZKSTA7naHGuQHfnQ --- .../Discover/Map/Filter/TimeframesFilter.vue | 40 +++++++++--------- .../Discover/Map/Filter/TraceFilter.vue | 14 +++---- src/components/Discover/Map/SidebarTraces.vue | 6 +-- src/components/Discover/StatusBar.vue | 40 +++++++++--------- src/stores/allMapData.ts | 42 ------------------- src/stores/mapPathStore.ts | 8 ++-- src/views/Compare/MapCompare.vue | 40 +++++++++--------- src/views/Discover/Map/MapPage.vue | 40 +++++++++--------- 8 files changed, 94 insertions(+), 136 deletions(-) diff --git a/src/components/Discover/Map/Filter/TimeframesFilter.vue b/src/components/Discover/Map/Filter/TimeframesFilter.vue index 5ae79c7..fd1099b 100644 --- a/src/components/Discover/Map/Filter/TimeframesFilter.vue +++ b/src/components/Discover/Map/Filter/TimeframesFilter.vue @@ -83,7 +83,7 @@ import getMoment from "moment"; const props = defineProps(["selectValue"]); const allMapDataStore = useAllMapDataStore(); -const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore); +const { allFilterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore); const selectRange = ref(1000); // Number of divisions for the selection range const selectArea = ref(null); @@ -120,8 +120,8 @@ watch(timeFrameStartEnd, (newValue) => { // 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(); + const xAxisMin = new Date(allFilterTimeframe.value.x_axis.min).getTime(); + const xAxisMax = new Date(allFilterTimeframe.value.x_axis.max).getTime(); const range = xAxisMax - xAxisMin; const step = range / selectRange.value; const data = []; @@ -135,9 +135,9 @@ const sliderData = computed(() => { // Add the minimum and maximum values const timeFrameData = computed(() => { - if (!filterTimeframe.value?.data || filterTimeframe.value.data.length < 10) + if (!allFilterTimeframe.value?.data || allFilterTimeframe.value.data.length < 10) return []; - const data = filterTimeframe.value.data.map((i) => ({ x: i.x, y: i.y })); + const data = allFilterTimeframe.value.data.map((i) => ({ x: i.x, y: i.y })); // 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) @@ -148,18 +148,18 @@ const timeFrameData = computed(() => { const a = 0; let b; const c = 1; - const d = filterTimeframe.value.data[0].y; + const d = allFilterTimeframe.value.data[0].y; const e = 2; - const f = filterTimeframe.value.data[1].y; + const f = allFilterTimeframe.value.data[1].y; b = (e * d - a * d - f * a - f * c) / (e - c - a); if (b < 0) { b = 0; } // Y-axis maximum value const ma = 9; - const mb = filterTimeframe.value.data[8].y; + const mb = allFilterTimeframe.value.data[8].y; const mc = 10; - const md = filterTimeframe.value.data[9].y; + const md = allFilterTimeframe.value.data[9].y; const me = 11; let mf = (mb * me - mb * mc - md * me + md * ma) / (ma - mc); if (mf < 0) { @@ -168,12 +168,12 @@ const timeFrameData = computed(() => { // Add the minimum value data.unshift({ - x: filterTimeframe.value.x_axis.min_base, + x: allFilterTimeframe.value.x_axis.min_base, y: b, }); // Add the maximum value data.push({ - x: filterTimeframe.value.x_axis.max_base, + x: allFilterTimeframe.value.x_axis.max_base, y: mf, }); @@ -181,8 +181,8 @@ const timeFrameData = computed(() => { }); const labelsData = computed(() => { - const min = new Date(filterTimeframe.value.x_axis.min_base).getTime(); - const max = new Date(filterTimeframe.value.x_axis.max_base).getTime(); + const min = new Date(allFilterTimeframe.value.x_axis.min_base).getTime(); + const max = new Date(allFilterTimeframe.value.x_axis.max_base).getTime(); const numPoints = 11; const step = (max - min) / (numPoints - 1); const data = []; @@ -195,8 +195,8 @@ const labelsData = computed(() => { watch(selectTimeFrame, (newValue, oldValue) => { if (newValue.length === 0) { - startTime.value = new Date(filterTimeframe.value.x_axis.min); - endTime.value = new Date(filterTimeframe.value.x_axis.max); + startTime.value = new Date(allFilterTimeframe.value.x_axis.min); + endTime.value = new Date(allFilterTimeframe.value.x_axis.max); selectArea.value = [0, selectRange.value]; resizeMask(chart.value); } @@ -247,7 +247,7 @@ function resizeRightMask(chartInstance, to) { * Creates and renders the Chart.js area chart for timeframe data. */ function createChart() { - const max = filterTimeframe.value.y_axis.max * 1.1; + const max = allFilterTimeframe.value.y_axis.max * 1.1; const minX = timeFrameData.value[0]?.x; const maxX = timeFrameData.value[timeFrameData.value.length - 1]?.x; @@ -403,10 +403,10 @@ onMounted(() => { // Slider selectArea.value = [0, selectRange.value]; // Calendar - startMinDate.value = new Date(filterTimeframe.value.x_axis.min); - 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); + startMinDate.value = new Date(allFilterTimeframe.value.x_axis.min); + startMaxDate.value = new Date(allFilterTimeframe.value.x_axis.max); + endMinDate.value = new Date(allFilterTimeframe.value.x_axis.min); + endMaxDate.value = new Date(allFilterTimeframe.value.x_axis.max); // Set the calendar range to match the timeline range startTime.value = startMinDate.value; endTime.value = startMaxDate.value; diff --git a/src/components/Discover/Map/Filter/TraceFilter.vue b/src/components/Discover/Map/Filter/TraceFilter.vue index 56a9d5d..dcb488b 100644 --- a/src/components/Discover/Map/Filter/TraceFilter.vue +++ b/src/components/Discover/Map/Filter/TraceFilter.vue @@ -146,8 +146,8 @@ const { infinit404, baseInfiniteStart, baseTraces, - baseTraceTaskSeq, - baseCases, + allBaseTraceTaskSeq, + allBaseCase, } = storeToRefs(allMapDataStore); const { isLoading } = storeToRefs(loadingStore); @@ -240,7 +240,7 @@ const caseData = computed(() => { }); const columnData = computed(() => { - const data = cloneDeep(baseCases.value); + const data = cloneDeep(allBaseCase.value); let result = [ { field: "id", header: "Case Id" }, { field: "started_at", header: "Start time" }, @@ -378,7 +378,7 @@ function setNodesData() { // Clear nodes to prevent accumulation on each render processMap.value.nodes = []; // Populate nodes with data returned from the API call - baseTraceTaskSeq.value.forEach((node, index) => { + allBaseTraceTaskSeq.value.forEach((node, index) => { processMap.value.nodes.push({ data: { id: index, @@ -398,7 +398,7 @@ function setNodesData() { */ function setEdgesData() { processMap.value.edges = []; - baseTraceTaskSeq.value.forEach((edge, index) => { + allBaseTraceTaskSeq.value.forEach((edge, index) => { processMap.value.edges.push({ data: { source: `${index}`, @@ -431,7 +431,7 @@ function createCy() { function handleScroll(event) { if ( infinitMaxItems.value || - baseCases.value.length < 20 || + allBaseCase.value.length < 20 || infiniteFinish.value === false ) return; @@ -452,7 +452,7 @@ async function fetchData() { infiniteFinish.value = false; baseInfiniteStart.value += 20; await allMapDataStore.getBaseTraceDetail(); - infiniteData.value = [...infiniteData.value, ...baseCases.value]; + infiniteData.value = [...infiniteData.value, ...allBaseCase.value]; infiniteFinish.value = true; isLoading.value = false; } catch (error) { diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index 7ddeeba..b82d4b2 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/src/components/Discover/Map/SidebarTraces.vue @@ -128,7 +128,7 @@ const { infiniteStart, traceId, traces, - traceTaskSeq, + allTraceTaskSeq, infiniteFirstCases, } = storeToRefs(allMapDataStore); @@ -261,7 +261,7 @@ function setNodesData() { // Clear nodes to prevent accumulation on each render processMap.value.nodes = []; // Populate nodes with data returned from the API call - traceTaskSeq.value.forEach((node, index) => { + allTraceTaskSeq.value.forEach((node, index) => { processMap.value.nodes.push({ data: { id: index, @@ -281,7 +281,7 @@ function setNodesData() { */ function setEdgesData() { processMap.value.edges = []; - traceTaskSeq.value.forEach((edge, index) => { + allTraceTaskSeq.value.forEach((edge, index) => { processMap.value.edges.push({ data: { source: `${index}`, diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue index 2638069..444b62e 100644 --- a/src/components/Discover/StatusBar.vue +++ b/src/components/Discover/StatusBar.vue @@ -167,7 +167,7 @@ import getMoment from "moment"; const route = useRoute(); const allMapDataStore = useAllMapDataStore(); -const { logId, stats, createFilterId } = storeToRefs(allMapDataStore); +const { logId, allStats, createFilterId } = storeToRefs(allMapDataStore); const isPanel = ref(false); const statData = ref(null); @@ -184,37 +184,37 @@ function getPercentLabel(val) { /** Transforms raw stats into display-ready format with localized numbers and time labels. */ function getStatData() { - if (!stats.value) return; + if (!allStats.value) return; statData.value = { cases: { - count: stats.value.cases.count.toLocaleString("en-US"), - total: stats.value.cases.total.toLocaleString("en-US"), - ratio: getPercentLabel(stats.value.cases.ratio), + count: allStats.value.cases.count.toLocaleString("en-US"), + total: allStats.value.cases.total.toLocaleString("en-US"), + ratio: getPercentLabel(allStats.value.cases.ratio), }, traces: { - count: stats.value.traces.count.toLocaleString("en-US"), - total: stats.value.traces.total.toLocaleString("en-US"), - ratio: getPercentLabel(stats.value.traces.ratio), + count: allStats.value.traces.count.toLocaleString("en-US"), + total: allStats.value.traces.total.toLocaleString("en-US"), + ratio: getPercentLabel(allStats.value.traces.ratio), }, task_instances: { - count: stats.value.task_instances.count.toLocaleString("en-US"), - total: stats.value.task_instances.total.toLocaleString("en-US"), - ratio: getPercentLabel(stats.value.task_instances.ratio), + count: allStats.value.task_instances.count.toLocaleString("en-US"), + total: allStats.value.task_instances.total.toLocaleString("en-US"), + ratio: getPercentLabel(allStats.value.task_instances.ratio), }, tasks: { - count: stats.value.tasks.count.toLocaleString("en-US"), - total: stats.value.tasks.total.toLocaleString("en-US"), - ratio: getPercentLabel(stats.value.tasks.ratio), + count: allStats.value.tasks.count.toLocaleString("en-US"), + total: allStats.value.tasks.total.toLocaleString("en-US"), + ratio: getPercentLabel(allStats.value.tasks.ratio), }, - started_at: getMoment(stats.value.started_at).format("YYYY-MM-DD HH:mm"), - completed_at: getMoment(stats.value.completed_at).format( + started_at: getMoment(allStats.value.started_at).format("YYYY-MM-DD HH:mm"), + completed_at: getMoment(allStats.value.completed_at).format( "YYYY-MM-DD HH:mm", ), case_duration: { - min: getTimeLabel(stats.value.case_duration.min), - max: getTimeLabel(stats.value.case_duration.max), - average: getTimeLabel(stats.value.case_duration.average), - median: getTimeLabel(stats.value.case_duration.median), + min: getTimeLabel(allStats.value.case_duration.min), + max: getTimeLabel(allStats.value.case_duration.max), + average: getTimeLabel(allStats.value.case_duration.average), + median: getTimeLabel(allStats.value.case_duration.median), }, }; } diff --git a/src/stores/allMapData.ts b/src/stores/allMapData.ts index 5b78a7a..3da74db 100644 --- a/src/stores/allMapData.ts +++ b/src/stores/allMapData.ts @@ -71,57 +71,18 @@ export const useAllMapDataStore = defineStore("allMapDataStore", { processMap: (state) => { return state.allProcessMap; }, - bpmn: (state) => { - return state.allBpmn; - }, - stats: (state) => { - return state.allStats; - }, - insights: (state) => { - return state.allInsights; - }, traces: (state) => { return [...state.allTrace].sort((x, y) => x.id - y.id); }, baseTraces: (state) => { return [...state.allBaseTrace].sort((x, y) => x.id - y.id); }, - cases: (state) => { - return state.allCase; - }, - baseCases: (state) => { - return state.allBaseCase; - }, infiniteFirstCases: (state) => { if (state.infiniteStart === 0) return state.allCase; }, BaseInfiniteFirstCases: (state) => { if (state.baseInfiniteStart === 0) return state.allBaseCase; }, - traceTaskSeq: (state) => { - return state.allTraceTaskSeq; - }, - baseTraceTaskSeq: (state) => { - return state.allBaseTraceTaskSeq; - }, - // All tasks - filterTasks: (state) => { - return state.allFilterTask; - }, - // form start to end tasks - filterStartToEnd: (state) => { - return state.allFilterStartToEnd; - }, - // form end to start tasks - filterEndToStart: (state) => { - return state.allFilterEndToStart; - }, - filterTimeframe: (state) => { - return state.allFilterTimeframe; - }, - filterTrace: (state) => { - return state.allFilterTrace; - }, filterAttrs: (state) => { if (state.allFilterAttrs !== null) { return state.allFilterAttrs.map((att) => { @@ -155,9 +116,6 @@ export const useAllMapDataStore = defineStore("allMapDataStore", { } return []; }, - allFunnels: (state) => { - return state.allFunnelData; - }, }, actions: { /** diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts index a8973f2..a305607 100644 --- a/src/stores/mapPathStore.ts +++ b/src/stores/mapPathStore.ts @@ -163,8 +163,8 @@ export const useMapPathStore = defineStore('mapPathStore', { } }, async createInsightWithPath() { - const { insights } = useAllMapDataStore(); - this.insights = { ...insights }; + const { allInsights } = useAllMapDataStore(); + this.insights = { ...allInsights }; this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes() .filter(function (elem) { return elem.data('label').toLowerCase() === 'start'; @@ -182,8 +182,8 @@ export const useMapPathStore = defineStore('mapPathStore', { }); // Depth First Search from the starting node this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []); - const { insights } = useAllMapDataStore(); - this.insights = { ...insights }; + const { allInsights } = useAllMapDataStore(); + this.insights = { ...allInsights }; this.matchGraphPathWithInsightsPath(); }, /** diff --git a/src/views/Compare/MapCompare.vue b/src/views/Compare/MapCompare.vue index 126a4c7..3b00db1 100644 --- a/src/views/Compare/MapCompare.vue +++ b/src/views/Compare/MapCompare.vue @@ -86,23 +86,23 @@ > { switch (node.type) { case "gateway": @@ -485,7 +485,7 @@ function setEdgesData(mapData) { }; mapData.edges = []; - const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value; + const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value; mapSource.edges.forEach((edge) => { mapData.edges.push({ data: { @@ -510,7 +510,7 @@ function setEdgesData(mapData) { async function createCy(type) { const graphId = document.getElementById("cy"); const mapData = type === "processMap" ? processMapData.value : bpmnData.value; - const mapSource = type === "processMap" ? processMap.value : bpmn.value; + const mapSource = type === "processMap" ? processMap.value : allBpmn.value; if (mapSource.vertices.length !== 0) { setNodesData(mapData); diff --git a/src/views/Discover/Map/MapPage.vue b/src/views/Discover/Map/MapPage.vue index 6ea6e28..21f58d7 100644 --- a/src/views/Discover/Map/MapPage.vue +++ b/src/views/Discover/Map/MapPage.vue @@ -86,22 +86,22 @@ > { switch (node.type) { case "gateway": @@ -477,7 +477,7 @@ function setEdgesData(mapData) { }; mapData.edges = []; - const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value; + const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value; mapSource.edges.forEach((edge) => { mapData.edges.push({ data: { @@ -499,7 +499,7 @@ function setEdgesData(mapData) { async function createCy(type) { const graphId = document.getElementById("cy"); const mapData = type === "processMap" ? processMapData.value : bpmnData.value; - const mapSource = type === "processMap" ? processMap.value : bpmn.value; + const mapSource = type === "processMap" ? processMap.value : allBpmn.value; if (mapSource.vertices.length !== 0) { setNodesData(mapData);