From e20cf7d2b37ac555a4e85a08e2a2591c795c7d79 Mon Sep 17 00:00:00 2001
From: balajisoundar <balaji@appsmith.com>
Date: Fri, 15 Mar 2024 13:17:11 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20[map=20chart=20widget]=20create=20unique?=
 =?UTF-8?q?=20instance=20of=20map=20loader=20per=20widget=20to=20avoi?=
 =?UTF-8?q?=E2=80=A6=20(#31822)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…d cross cancelling loader calls

## Description
Create an instance of map loader per widget to avoid one widget
cancelling calls of another widget.


Fixes https://github.com/appsmithorg/appsmith/issues/31819
## Automation

/ok-to-test tags="@tag.Maps"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8292557044>
> Commit: `cd13c989d8b911a064629bf1d8c683e09927d3b2`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8292557044&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->










<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the Map Widget to load maps more efficiently with the
introduction of `loadMapGenerator`.
- **Tests**
- Added Cypress tests to ensure the Map Widget loads correctly on the
canvas.
- **Refactor**
- Updated the Map Widget loading process for better performance and
flexibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Widgets/Others/MapWidget_loading_Spec.ts  | 23 +++++++++++++++++++
 .../MapChartWidget/component/index.tsx        |  4 +++-
 .../MapChartWidget/component/utilities.ts     |  4 ++--
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts
new file mode 100644
index 0000000000..e3e56ddefc
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts
@@ -0,0 +1,23 @@
+/// <reference types="Cypress" />
+import {
+  agHelper,
+  entityExplorer,
+  draggableWidgets,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  "Map chart Widget",
+  { tags: ["@tag.Widget", "@tag.Maps"] },
+  function () {
+    it("1.Drag two Map Widget and Verify the Map Widget is loading", () => {
+      //Add map and verify
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200);
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 600, 200);
+      agHelper.RefreshPage();
+      agHelper.AssertElementLength(
+        ".t--draggable-mapchartwidget svg text:contains('Global Population')",
+        2,
+      );
+    });
+  },
+);
diff --git a/app/client/src/widgets/MapChartWidget/component/index.tsx b/app/client/src/widgets/MapChartWidget/component/index.tsx
index c5dcdee8a3..3ba358eee4 100644
--- a/app/client/src/widgets/MapChartWidget/component/index.tsx
+++ b/app/client/src/widgets/MapChartWidget/component/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import type { MapColorObject, MapTypes } from "../constants";
 import type { MapData } from "./types";
-import { getChartOption, loadMap } from "./utilities";
+import { getChartOption, loadMapGenerator } from "./utilities";
 import * as echarts from "echarts";
 import countryDetails from "./countryDetails";
 import clsx from "clsx";
@@ -27,6 +27,8 @@ const MapChartContainer = styled.div<{
 export default function EchartComponent(props: MapChartComponentProps) {
   const [isLoading, setIsLoading] = useState(false);
 
+  const loadMap = useMemo(loadMapGenerator, []);
+
   const [key, setKey] = useState(0);
 
   const { caption, colorRange, data, onDataPointClick, showLabels, type } =
diff --git a/app/client/src/widgets/MapChartWidget/component/utilities.ts b/app/client/src/widgets/MapChartWidget/component/utilities.ts
index c00fe46af8..41f0d8231a 100644
--- a/app/client/src/widgets/MapChartWidget/component/utilities.ts
+++ b/app/client/src/widgets/MapChartWidget/component/utilities.ts
@@ -43,7 +43,7 @@ export function getSpecialAreas(map: MapTypes): GeoSpecialAreas {
 /*
  * Function to load the map geojson file and register it with echarts
  */
-export const loadMap = (() => {
+export const loadMapGenerator = () => {
   let abortController: AbortController | null = null;
 
   return async (type: MapTypes) => {
@@ -85,7 +85,7 @@ export const loadMap = (() => {
       return Promise.resolve();
     }
   };
-})();
+};
 
 function getProjection(type: string) {
   switch (type) {