Carlos dev4

web-client/src/components/SrElevationPlot.vue

@@ -547,10 +547,7 @@ watch(
       chartInstance.on('restore', () => {
         void (async () => {
           logger.debug('Zoom or settings were reset')
-          atlChartFilterStore.xZoomStart = 0
-          atlChartFilterStore.xZoomEnd = 100
-          atlChartFilterStore.yZoomStart = 0
-          atlChartFilterStore.yZoomEnd = 100
+          atlChartFilterStore.resetZoom()
           dialogsInitialized.value = false // Reset dialogsInitialized to false to re-initialize dialogs
           await initPlot() // Re-initialize the plot to reset any settings
           if (chartStore.getSelectedYData(recTreeStore.selectedReqIdStr).length > 0) {

web-client/src/stores/atlChartFilterStore.ts

@@ -1,11 +1,9 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import VChart from "vue-echarts";
-import { createLogger } from '@/utils/logger';
-
-const logger = createLogger('AtlChartFilterStore');
-
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import VChart from 'vue-echarts'
+import { createLogger } from '@/utils/logger'
 
+const logger = createLogger('AtlChartFilterStore')
 
 export const useAtlChartFilterStore = defineStore('atlChartFilter', {
   state: () => ({
@@ -14,7 +12,7 @@ export const useAtlChartFilterStore = defineStore('atlChartFilter', {
     chartDataRef: ref<number[][]>([]),
     largeData: false as boolean,
     largeDataThreshold: 1000000 as number,
-    plotRef: null as InstanceType<typeof VChart> | null, 
+    plotRef: null as InstanceType<typeof VChart> | null,
     selectedOverlayedReqIds: [] as number[],
     message: '' as string,
     isWarning: true as boolean,
@@ -24,93 +22,110 @@ export const useAtlChartFilterStore = defineStore('atlChartFilter', {
     xZoomEnd: 100 as number,
     yZoomStart: 0 as number,
     yZoomEnd: 100 as number,
+    xZoomStartValue: undefined as number | undefined,
+    xZoomEndValue: undefined as number | undefined,
+    yZoomStartValue: undefined as number | undefined,
+    yZoomEndValue: undefined as number | undefined,
     showSlopeLines: false as boolean, // Optional property for slope lines
+    lastReqId: -1 as number // Track the last reqId to detect when a new track is loaded
   }),
 
-  getters: {
-
-  },
+  getters: {},
   actions: {
     incrementDebugCnt() {
-      return ++this.debugCnt;
+      return ++this.debugCnt
     },
     getDebugCnt() {
-      return this.debugCnt;
+      return this.debugCnt
     },
     setDebugCnt(cnt: number) {
-      this.debugCnt = cnt;
+      this.debugCnt = cnt
     },
     setIsLoading() {
       //console.log('atlChartFilterStore.setIsLoading()');
-      this.isLoading = true;
+      this.isLoading = true
     },
     resetIsLoading() {
       //console.log('atlChartFilterStore.resetIsLoading()');
-      this.isLoading = false;
+      this.isLoading = false
     },
     getIsLoading() {
       //console.log('atlChartFilterStore.getIsLoading():', this.isLoading);
-      return this.isLoading;
+      return this.isLoading
     },
     getLargeData() {
-      return this.largeData;
+      return this.largeData
     },
     setLargeData(largeData: boolean) {
-        this.largeData = largeData;
+      this.largeData = largeData
     },
     getLargeDataThreshold() {
-        return this.largeDataThreshold;
+      return this.largeDataThreshold
     },
     setLargeDataThreshold(largeDataThreshold: number) {
-        this.largeDataThreshold = largeDataThreshold;
+      this.largeDataThreshold = largeDataThreshold
     },
     setPlotRef(ref: InstanceType<typeof VChart> | null) {
-      this.plotRef = ref;
+      this.plotRef = ref
     },
     getPlotRef() {
-      return this.plotRef;
+      return this.plotRef
     },
     getSelectedOverlayedReqIds() {
-      const selectedOverlayedReqIds = this.selectedOverlayedReqIds;
+      const selectedOverlayedReqIds = this.selectedOverlayedReqIds
       //console.log('getSelectedOverlayedReqIds:', selectedOverlayedReqIds, 'length:', selectedOverlayedReqIds.length);
-      return selectedOverlayedReqIds;
+      return selectedOverlayedReqIds
     },
     setSelectedOverlayedReqIds(selectedOverlayedReqIds: number[]) {
       //console.log('setSelectedOverlayedReqIds old:',this.selectedOverlayedReqIds,'new:', selectedOverlayedReqIds);
       //console.log('setSelectedOverlayedReqIds old len:',this.selectedOverlayedReqIds.length,'new len:', selectedOverlayedReqIds.length);
-      this.selectedOverlayedReqIds = selectedOverlayedReqIds;
+      this.selectedOverlayedReqIds = selectedOverlayedReqIds
     },
     appendToSelectedOverlayedReqIds(reqId: number) {
-      const reqIdExists = this.selectedOverlayedReqIds.includes(reqId);
-      if(!reqIdExists){
-        this.selectedOverlayedReqIds.push(reqId);
+      const reqIdExists = this.selectedOverlayedReqIds.includes(reqId)
+      if (!reqIdExists) {
+        this.selectedOverlayedReqIds.push(reqId)
       } else {
-        logger.warn('appendToSelectedOverlayedReqIds: reqId already exists', { reqId, selectedOverlayedReqIds: this.selectedOverlayedReqIds });
+        logger.warn('appendToSelectedOverlayedReqIds: reqId already exists', {
+          reqId,
+          selectedOverlayedReqIds: this.selectedOverlayedReqIds
+        })
       }
     },
-    setShowMessage(showMessage: boolean) { 
-        this.showMessage = showMessage;
+    setShowMessage(showMessage: boolean) {
+      this.showMessage = showMessage
     },
     getShowMessage(): boolean {
-        return this.showMessage;
+      return this.showMessage
     },
     setMessage(message: string) {
-        this.message = message;
+      this.message = message
     },
     getMessage() {
-        return this.message;
+      return this.message
     },
     setIsWarning(isWarning: boolean) {
-        this.isWarning = isWarning;
+      this.isWarning = isWarning
     },
     getIsWarning() {
-        return this.isWarning;
+      return this.isWarning
     },
     setShowPhotonCloud(showPhotonCloud: boolean) {
-        this.showPhotonCloud = showPhotonCloud;
+      this.showPhotonCloud = showPhotonCloud
     },
     getShowPhotonCloud() {
-        return this.showPhotonCloud;
-    },
-}
-});
+      return this.showPhotonCloud
+    },
+    resetZoom() {
+      logger.debug('Resetting zoom to defaults')
+      this.xZoomStart = 0
+      this.xZoomEnd = 100
+      this.yZoomStart = 0
+      this.yZoomEnd = 100
+      this.xZoomStartValue = undefined
+      this.xZoomEndValue = undefined
+      this.yZoomStartValue = undefined
+      this.yZoomEndValue = undefined
+    }
+  }
+})

web-client/src/utils/SrMapUtils.ts

@@ -664,9 +664,13 @@ export async function processSelectedElPnt(d: ElevationDataItem): Promise<void>
   if (ttRef) {
     ttRef.hideTooltip()
   }
-  useAtlChartFilterStore().setShowPhotonCloud(false)
+  const atlChartFilterStore = useAtlChartFilterStore()
+  atlChartFilterStore.setShowPhotonCloud(false)
   clearPlot()
-  useAtlChartFilterStore().setSelectedOverlayedReqIds([])
+  atlChartFilterStore.setSelectedOverlayedReqIds([])
+
+  // Reset zoom when filters change (clicking on elevation point)
+  atlChartFilterStore.resetZoom()
   const mission = useFieldNameStore().getMissionForReqId(useRecTreeStore().selectedReqId)
 
   if (mission === 'ICESat-2') {