Remove pure passthrough getters from allMapData store

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RaRBJFZKSTA7naHGuQHfnQ

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 xAxisMin = new Date(allFilterTimeframe.value.x_axis.min).getTime();
-  const xAxisMax = new Date(filterTimeframe.value.x_axis.max).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 min = new Date(allFilterTimeframe.value.x_axis.min_base).getTime();
-  const max = new Date(filterTimeframe.value.x_axis.max_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);
+    startTime.value = new Date(allFilterTimeframe.value.x_axis.min);
-    endTime.value = new Date(filterTimeframe.value.x_axis.max);
+    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);
+  startMinDate.value = new Date(allFilterTimeframe.value.x_axis.min);
-  startMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
+  startMaxDate.value = new Date(allFilterTimeframe.value.x_axis.max);
-  endMinDate.value = new Date(filterTimeframe.value.x_axis.min);
+  endMinDate.value = new Date(allFilterTimeframe.value.x_axis.min);
-  endMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
+  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

@@ -146,8 +146,8 @@ const {
   infinit404,
   baseInfiniteStart,
   baseTraces,
-  baseTraceTaskSeq,
+  allBaseTraceTaskSeq,
-  baseCases,
+  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

@@ -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

@@ -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"),
+      count: allStats.value.cases.count.toLocaleString("en-US"),
-      total: stats.value.cases.total.toLocaleString("en-US"),
+      total: allStats.value.cases.total.toLocaleString("en-US"),
-      ratio: getPercentLabel(stats.value.cases.ratio),
+      ratio: getPercentLabel(allStats.value.cases.ratio),
     },
     traces: {
-      count: stats.value.traces.count.toLocaleString("en-US"),
+      count: allStats.value.traces.count.toLocaleString("en-US"),
-      total: stats.value.traces.total.toLocaleString("en-US"),
+      total: allStats.value.traces.total.toLocaleString("en-US"),
-      ratio: getPercentLabel(stats.value.traces.ratio),
+      ratio: getPercentLabel(allStats.value.traces.ratio),
     },
     task_instances: {
-      count: stats.value.task_instances.count.toLocaleString("en-US"),
+      count: allStats.value.task_instances.count.toLocaleString("en-US"),
-      total: stats.value.task_instances.total.toLocaleString("en-US"),
+      total: allStats.value.task_instances.total.toLocaleString("en-US"),
-      ratio: getPercentLabel(stats.value.task_instances.ratio),
+      ratio: getPercentLabel(allStats.value.task_instances.ratio),
     },
     tasks: {
-      count: stats.value.tasks.count.toLocaleString("en-US"),
+      count: allStats.value.tasks.count.toLocaleString("en-US"),
-      total: stats.value.tasks.total.toLocaleString("en-US"),
+      total: allStats.value.tasks.total.toLocaleString("en-US"),
-      ratio: getPercentLabel(stats.value.tasks.ratio),
+      ratio: getPercentLabel(allStats.value.tasks.ratio),
     },
-    started_at: getMoment(stats.value.started_at).format("YYYY-MM-DD HH:mm"),
+    started_at: getMoment(allStats.value.started_at).format("YYYY-MM-DD HH:mm"),
-    completed_at: getMoment(stats.value.completed_at).format(
+    completed_at: getMoment(allStats.value.completed_at).format(
       "YYYY-MM-DD HH:mm",
     ),
     case_duration: {
-      min: getTimeLabel(stats.value.case_duration.min),
+      min: getTimeLabel(allStats.value.case_duration.min),
-      max: getTimeLabel(stats.value.case_duration.max),
+      max: getTimeLabel(allStats.value.case_duration.max),
-      average: getTimeLabel(stats.value.case_duration.average),
+      average: getTimeLabel(allStats.value.case_duration.average),
-      median: getTimeLabel(stats.value.case_duration.median),
+      median: getTimeLabel(allStats.value.case_duration.median),
     },
   };
 }

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: {
     /**

src/stores/mapPathStore.ts

@@ -163,8 +163,8 @@ export const useMapPathStore = defineStore('mapPathStore', {
       }
     },
     async createInsightWithPath() {
-      const { insights } = useAllMapDataStore();
+      const { allInsights } = useAllMapDataStore();
-      this.insights = { ...insights };
+      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();
+      const { allInsights } = useAllMapDataStore();
-      this.insights = { ...insights };
+      this.insights = { ...allInsights };
       this.matchGraphPathWithInsightsPath();
     },
     /**

src/views/Compare/MapCompare.vue

@@ -86,23 +86,23 @@
   ></SidebarView>
   <SidebarState
     v-model:visible="sidebarState"
-    :insights="insights"
+    :insights="allInsights"
-    :stats="stats"
+    :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"
+    :filterTasks="allFilterTask"
-    :filterStartToEnd="filterStartToEnd"
+    :filterStartToEnd="allFilterStartToEnd"
-    :filterEndToStart="filterEndToStart"
+    :filterEndToStart="allFilterEndToStart"
-    :filterTimeframe="filterTimeframe"
+    :filterTimeframe="allFilterTimeframe"
-    :filterTrace="filterTrace"
+    :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,
+  allBpmn,
-  stats,
+  allStats,
-  insights,
+  allInsights,
   traceId,
   traces,
   baseTraces,
   baseTraceId,
-  filterTasks,
+  allFilterTask,
-  filterStartToEnd,
+  allFilterStartToEnd,
-  filterEndToStart,
+  allFilterEndToStart,
-  filterTimeframe,
+  allFilterTimeframe,
-  filterTrace,
+  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

@@ -86,22 +86,22 @@
   ></SidebarView>
   <SidebarState
     v-model:visible="sidebarState"
-    :insights="insights"
+    :insights="allInsights"
-    :stats="stats"
+    :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"
+    :filterTasks="allFilterTask"
-    :filterStartToEnd="filterStartToEnd"
+    :filterStartToEnd="allFilterStartToEnd"
-    :filterEndToStart="filterEndToStart"
+    :filterEndToStart="allFilterEndToStart"
-    :filterTimeframe="filterTimeframe"
+    :filterTimeframe="allFilterTimeframe"
-    :filterTrace="filterTrace"
+    :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,
+  allBpmn,
-  stats,
+  allStats,
-  insights,
+  allInsights,
   traceId,
   traces,
   baseTraces,
   baseTraceId,
-  filterTasks,
+  allFilterTask,
-  filterStartToEnd,
+  allFilterStartToEnd,
-  filterEndToStart,
+  allFilterEndToStart,
-  filterTimeframe,
+  allFilterTimeframe,
-  filterTrace,
+  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);