imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove pure passthrough getters from allMapData store

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RaRBJFZKSTA7naHGuQHfnQ
This commit is contained in:
imacat
2026-07-05 00:42:58 +08:00
co-authored by Claude Fable 5
parent e5a6f7eaf2
commit ab1eacc1c2
8 changed files with 94 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Discover/Map/Filter/TimeframesFilter.vue
+20 -20
View File
@@ -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;
src/components/Discover/Map/Filter/TraceFilter.vue
+7 -7
View File
@@ -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) {
src/components/Discover/Map/SidebarTraces.vue
+3 -3
View File
@@ -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}`,
src/components/Discover/StatusBar.vue
+20 -20
View File
@@ -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),
},
};
}
src/stores/allMapData.ts
-42
View File
@@ -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: {
/**
src/stores/mapPathStore.ts
+4 -4
View File
@@ -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();
},
/**
src/views/Compare/MapCompare.vue
+20 -20
View File
@@ -86,23 +86,23 @@
></SidebarView>
<SidebarState
v-model:visible="sidebarState"
:insights="insights"
:stats="stats"
:insights="allInsights"
:stats="allStats"
></SidebarState>
<SidebarTraces
v-model:visible="sidebarTraces"
:cases="cases"
:cases="allCase"
@switch-Trace-Id="switchTraceId"
ref="tracesViewRef"
>
</SidebarTraces>
<SidebarFilter
v-model:visible="sidebarFilter"
:filterTasks="filterTasks"
:filterStartToEnd="filterStartToEnd"
:filterEndToStart="filterEndToStart"
:filterTimeframe="filterTimeframe"
:filterTrace="filterTrace"
:filterTasks="allFilterTask"
:filterStartToEnd="allFilterStartToEnd"
:filterEndToStart="allFilterEndToStart"
:filterTimeframe="allFilterTimeframe"
:filterTrace="allFilterTrace"
@submit-all="createCy(mapType)"
@switch-Trace-Id="switchTraceId"
ref="sidebarFilterRefComp"
@@ -176,25 +176,25 @@ const allMapDataStore = useAllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const {
processMap,
bpmn,
stats,
insights,
allBpmn,
allStats,
allInsights,
traceId,
traces,
baseTraces,
baseTraceId,
filterTasks,
filterStartToEnd,
filterEndToStart,
filterTimeframe,
filterTrace,
allFilterTask,
allFilterStartToEnd,
allFilterEndToStart,
allFilterTimeframe,
allFilterTrace,
temporaryData,
isRuleData,
ruleData,
logId,
baseLogId,
createFilterId,
cases,
allCase,
postRuleData,
} = storeToRefs(allMapDataStore);
@@ -401,7 +401,7 @@ function setNodesData(mapData) {
};
mapData.nodes = [];
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value;
mapSource.vertices.forEach((node) => {
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);
src/views/Discover/Map/MapPage.vue
+20 -20
View File
@@ -86,22 +86,22 @@
></SidebarView>
<SidebarState
v-model:visible="sidebarState"
:insights="insights"
:stats="stats"
:insights="allInsights"
:stats="allStats"
></SidebarState>
<SidebarTraces
v-model:visible="sidebarTraces"
:cases="cases"
:cases="allCase"
@switch-Trace-Id="switchTraceId"
ref="tracesViewRef"
></SidebarTraces>
<SidebarFilter
v-model:visible="sidebarFilter"
:filterTasks="filterTasks"
:filterStartToEnd="filterStartToEnd"
:filterEndToStart="filterEndToStart"
:filterTimeframe="filterTimeframe"
:filterTrace="filterTrace"
:filterTasks="allFilterTask"
:filterStartToEnd="allFilterStartToEnd"
:filterEndToStart="allFilterEndToStart"
:filterTimeframe="allFilterTimeframe"
:filterTrace="allFilterTrace"
@submit-all="createCy(mapType)"
@switch-Trace-Id="switchTraceId"
ref="sidebarFilterRefComp"
@@ -175,25 +175,25 @@ const allMapDataStore = useAllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const {
processMap,
bpmn,
stats,
insights,
allBpmn,
allStats,
allInsights,
traceId,
traces,
baseTraces,
baseTraceId,
filterTasks,
filterStartToEnd,
filterEndToStart,
filterTimeframe,
filterTrace,
allFilterTask,
allFilterStartToEnd,
allFilterEndToStart,
allFilterTimeframe,
allFilterTrace,
temporaryData,
isRuleData,
ruleData,
logId,
baseLogId,
createFilterId,
cases,
allCase,
postRuleData,
} = storeToRefs(allMapDataStore);
@@ -398,7 +398,7 @@ function setNodesData(mapData) {
};
mapData.nodes = [];
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value;
mapSource.vertices.forEach((node) => {
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);