[Vis Tools] Fix memory leaks in the Map Tool

static/js/stat_var_hierarchy/stat_var_group_node.tsx

@@ -100,6 +100,8 @@ export class StatVarGroupNode extends React.Component<
   context: ContextType;
   // the list of entities for which data fetch has begun, but not finished.
   dataFetchingEntities: NamedNode[];
+  // Abort controller to cancel any in-flight requests on re-render
+  private _abortController: AbortController;
 
   constructor(props: StatVarGroupNodePropType) {
     super(props);
@@ -130,6 +132,13 @@ export class StatVarGroupNode extends React.Component<
     }
   }
 
+  componentWillUnmount(): void {
+    if (this._abortController) {
+      // Cancel any existing requests on unmount
+      this._abortController.abort();
+    }
+  }
+
   componentDidUpdate(prevProps: StatVarGroupNodePropType): void {
     const newSelectionCount = this.getSelectionCount();
     const newState = { ...this.state };
@@ -260,6 +269,13 @@ export class StatVarGroupNode extends React.Component<
   }
 
   private fetchData(): void {
+    if (this._abortController) {
+      // Cancel any existing requests
+      this._abortController.abort();
+    }
+    this._abortController = new AbortController();
+    const signal = this._abortController.signal;
+
     const entityList = this.props.entities;
     this.dataFetchingEntities = this.props.entities;
     let numEntitiesExistence = this.props.numEntitiesExistence;
@@ -272,11 +288,15 @@ export class StatVarGroupNode extends React.Component<
       numEntitiesExistence = entityDcids.length;
     }
     axios
-      .post("/api/variable-group/info", {
-        dcid: this.props.data.id,
-        entities: entityDcids,
-        numEntitiesExistence,
-      })
+      .post(
+        "/api/variable-group/info",
+        {
+          dcid: this.props.data.id,
+          entities: entityDcids,
+          numEntitiesExistence,
+        },
+        { signal }
+      )
       .then((resp) => {
         const data = resp.data;
         const childSV: StatVarInfo[] = data["childStatVars"] || [];
@@ -290,7 +310,11 @@ export class StatVarGroupNode extends React.Component<
           });
         }
       })
-      .catch(() => {
+      .catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
         this.dataFetchingEntities = null;
         if (_.isEqual(entityList, this.props.entities)) {
           this.setState({

static/js/stat_var_hierarchy/stat_var_hierarchy.tsx

@@ -100,6 +100,11 @@ export class StatVarHierarchy extends React.Component<
   StatVarHierarchyPropType,
   StatVarHierarchyStateType
 > {
+  // Abort controller to cancel any in-flight data requests
+  private _dataAbortController: AbortController;
+  // Abort controller to cancel any in-flight search requests
+  private _searchAbortController: AbortController;
+
   constructor(props: StatVarHierarchyPropType) {
     super(props);
     this.state = {
@@ -121,6 +126,17 @@ export class StatVarHierarchy extends React.Component<
     this.fetchData();
   }
 
+  componentWillUnmount(): void {
+    if (this._dataAbortController) {
+      // Abort any in-flight data requests
+      this._dataAbortController.abort();
+    }
+    if (this._searchAbortController) {
+      // Abort any in-flight search requests
+      this._searchAbortController.abort();
+    }
+  }
+
   componentDidUpdate(prevProps: StatVarHierarchyPropType): void {
     if (this.state.searchSelectionCleared) {
       this.setState({ searchSelectionCleared: false });
@@ -257,6 +273,13 @@ export class StatVarHierarchy extends React.Component<
   }
 
   private async fetchData(): Promise<void> {
+    if (this._dataAbortController) {
+      // Abort the previous data request
+      this._dataAbortController.abort();
+    }
+    this._dataAbortController = new AbortController();
+    const signal = this._dataAbortController.signal;
+
     loadSpinner(SV_HIERARCHY_SECTION_ID);
     const entityList = this.props.entities.map((entity) => entity.dcid);
     const variableGroupInfoPromises: Promise<StatVarGroupNodeType>[] =
@@ -267,11 +290,15 @@ export class StatVarHierarchy extends React.Component<
           ? [statVarHierarchyConfigNode.dataSourceDcid]
           : [];
         return axios
-          .post("/api/variable-group/info", {
-            dcid: statVarHierarchyConfigNode.dcid,
-            entities: [...entityList, ...dataSourceEntities],
-            numEntitiesExistence: this.props.numEntitiesExistence,
-          })
+          .post(
+            "/api/variable-group/info",
+            {
+              dcid: statVarHierarchyConfigNode.dcid,
+              entities: [...entityList, ...dataSourceEntities],
+              numEntitiesExistence: this.props.numEntitiesExistence,
+            },
+            { signal }
+          )
           .then((resp) => {
             return resp.data;
           });
@@ -283,7 +310,7 @@ export class StatVarHierarchy extends React.Component<
         if (this.state.svPath && sv in this.state.svPath) {
           svPath[sv] = this.state.svPath[sv];
         } else {
-          statVarPathPromises.push(this.getPath(sv));
+          statVarPathPromises.push(this.getPath(sv, signal));
         }
       }
     }
@@ -329,26 +356,42 @@ export class StatVarHierarchy extends React.Component<
         rootSVGs,
         svPath,
       });
-    } catch {
+    } catch (error) {
       removeSpinner(SV_HIERARCHY_SECTION_ID);
+      // Ignore request cancellation errors
+      if (axios.isCancel(error) || error.name === "AbortError") {
+        return;
+      }
       this.setState({
         errorMessage: "Error retrieving stat var group root nodes",
       });
     }
   }
 
   private onSearchSelectionChange(selection: string): void {
-    this.getPath(selection).then((path) => {
-      const searchSelectionCleared =
-        !_.isEmpty(this.state.focusPath) && _.isEmpty(path);
-      this.setState({
-        focus: selection,
-        focusPath: path,
-        searchSelectionCleared,
-        expandedPath: searchSelectionCleared ? this.state.focusPath : [],
+    if (this._searchAbortController) {
+      this._searchAbortController.abort();
+    }
+    this._searchAbortController = new AbortController();
+    this.getPath(selection, this._searchAbortController.signal)
+      .then((path) => {
+        const searchSelectionCleared =
+          !_.isEmpty(this.state.focusPath) && _.isEmpty(path);
+        this.setState({
+          focus: selection,
+          focusPath: path,
+          searchSelectionCleared,
+          expandedPath: searchSelectionCleared ? this.state.focusPath : [],
+        });
+        this.togglePath(selection, path, /*isSearchSelection=*/ true);
+      })
+      .catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
+        console.error(error);
       });
-      this.togglePath(selection, path, /*isSearchSelection=*/ true);
-    });
   }
 
   // Add or remove a stat var and its path from the state.
@@ -387,16 +430,22 @@ export class StatVarHierarchy extends React.Component<
   }
 
   // Get the path of a stat var from the hierarchy.
-  private getPath(sv: string): Promise<string[]> {
+  private getPath(sv: string, signal?: AbortSignal): Promise<string[]> {
     if (sv == "") {
       return Promise.resolve([]);
     }
     return axios
-      .get(`/api/variable/path?dcid=${encodeURIComponent(sv)}`)
+      .get(`/api/variable/path?dcid=${encodeURIComponent(sv)}`, { signal })
       .then((resp) => {
         // This is to make jest test working, should find a better way to let
         // mock return new object each time.
         return _.cloneDeep(resp.data).reverse();
+      }).catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
+        console.error(error);
       });
   }
 

static/js/tools/map/fetcher/all_dates.ts

@@ -37,6 +37,10 @@ export function useFetchAllDates(dispatch: Dispatch<ChartStoreAction>): void {
     if (!contextOk) {
       return;
     }
+    // Use AbortController to cancel the request if the component unmounts
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+
     const action: ChartStoreAction = {
       type: ChartDataType.ALL_DATES,
       error: null,
@@ -60,6 +64,7 @@ export function useFetchAllDates(dispatch: Dispatch<ChartStoreAction>): void {
           childType: placeInfo.value.enclosedPlaceType,
           variable: statVar.value.dcid,
         },
+        signal,
       })
       .then((resp) => {
         const data = resp.data as ObservationDatesResponse;
@@ -77,10 +82,19 @@ export function useFetchAllDates(dispatch: Dispatch<ChartStoreAction>): void {
         console.log("[Map Fetch] all dates");
         dispatch(action);
       })
-      .catch(() => {
+      .catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
         action.error = "error fetching all the dates";
         dispatch(action);
       });
+
+    return () => {
+      // Cancel the request if the component unmounts
+      abortController.abort();
+    };
   }, [
     display.value.showTimeSlider,
     placeInfo.value.enclosingPlace.dcid,

static/js/tools/map/fetcher/all_stat.ts

@@ -44,6 +44,10 @@ export function useFetchAllStat(dispatch: Dispatch<ChartStoreAction>): void {
     if (!contextOk) {
       return;
     }
+    // Use AbortController to cancel the request if the component unmounts.
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+
     const action: ChartStoreAction = {
       type: ChartDataType.ALL_STAT,
       context: {
@@ -72,6 +76,7 @@ export function useFetchAllStat(dispatch: Dispatch<ChartStoreAction>): void {
         },
         paramsSerializer: stringifyFn,
         headers: WEBSITE_SURFACE_HEADER,
+        signal,
       })
       .then((resp) => {
         if (_.isEmpty(resp.data.data[statVar.value.dcid])) {
@@ -85,10 +90,19 @@ export function useFetchAllStat(dispatch: Dispatch<ChartStoreAction>): void {
         console.log(`[Map Fetch] all stat for date: ${date}`);
         dispatch(action);
       })
-      .catch(() => {
+      .catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
         action.error = "error fetching all stat data";
         dispatch(action);
       });
+
+    return () => {
+      // Abort the request if the component unmounts.
+      abortController.abort();
+    };
   }, [
     placeInfo.value.enclosingPlace.dcid,
     placeInfo.value.enclosedPlaceType,

static/js/tools/map/fetcher/border_geojson.ts

@@ -45,6 +45,10 @@ export function useFetchBorderGeoJson(
     if (!contextOk || !shouldShowBorder(placeInfo.value.enclosedPlaceType)) {
       return;
     }
+    // Use AbortController to cancel the request if the component unmounts
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+
     const action: ChartStoreAction = {
       type: ChartDataType.BORDER_GEO_JSON,
       error: null,
@@ -59,10 +63,14 @@ export function useFetchBorderGeoJson(
       },
     };
     axios
-      .post("/api/choropleth/node-geojson", {
-        nodes: [placeInfo.value.enclosingPlace.dcid],
-        geoJsonProp: BORDER_GEOJSON_PROPERTY,
-      })
+      .post(
+        "/api/choropleth/node-geojson",
+        {
+          nodes: [placeInfo.value.enclosingPlace.dcid],
+          geoJsonProp: BORDER_GEOJSON_PROPERTY,
+        },
+        { signal }
+      )
       .then((resp) => {
         if (_.isEmpty(resp.data)) {
           action.error = "error fetching border geo json data";
@@ -71,10 +79,19 @@ export function useFetchBorderGeoJson(
         }
         dispatch(action);
       })
-      .catch(() => {
+      .catch((error) => {
+        if (axios.isCancel(error) || error.name === "AbortError") {
+          // Ignore abort errors
+          return;
+        }
         action.error = "error fetching border geo json data";
         dispatch(action);
       });
+
+    return () => {
+      // Cancel request if component unmounts
+      abortController.abort();
+    };
   }, [
     placeInfo.value.enclosingPlace,
     placeInfo.value.enclosedPlaceType,