Remove panning logic from map boundary calculation (#27392)

* remove panning logic from map boundary calculation

* add map viz percy tests

* wait for map load in visual tests

frontend/src/metabase/admin/settings/components/SettingsSetting.jsx

@@ -63,7 +63,7 @@ export default class SettingsSetting extends Component {
 
     return (
       // TODO - this formatting needs to be moved outside this component
-      <SettingRoot>
+      <SettingRoot data-testid={`${setting.key}-setting`}>
         {!setting.noHeader && (
           <SettingHeader id={settingId} setting={setting} />
         )}

frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx

@@ -317,7 +317,7 @@ const EditMap = ({
   onCancel,
   onSave,
 }) => (
-  <div>
+  <div data-testid="edit-map-modal">
     <div className="flex">
       <div className="flex-no-shrink">
         <h2>{!originalMap ? t`Add a new map` : t`Edit map`}</h2>

frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx

@@ -81,22 +81,6 @@ const LeafletChoropleth = ({
         }),
       ]).addTo(map);
 
-      // // left and right duplicates so we can pan a bit
-      // L.featureGroup([
-      //   L.geoJson(geoJson, {
-      //     style,
-      //     onEachFeature,
-      //     coordsToLatLng: ([longitude, latitude]) =>
-      //       L.latLng(latitude, longitude - 360),
-      //   }),
-      //   L.geoJson(geoJson, {
-      //     style,
-      //     onEachFeature,
-      //     coordsToLatLng: ([longitude, latitude]) =>
-      //       L.latLng(latitude, longitude + 360),
-      //   }),
-      // ]).addTo(map);
-
       map.fitBounds(minimalBounds);
 
       return () => {

frontend/src/metabase/visualizations/lib/mapping.js

@@ -3,55 +3,13 @@ import d3 from "d3";
 
 export function computeMinimalBounds(features) {
   const points = getAllFeaturesPoints(features);
-  const gap = computeLargestGap(points, d => d[0]);
   const [west, east] = d3.extent(points, d => d[0]);
   const [north, south] = d3.extent(points, d => d[1]);
 
-  const normalGapSize = gap[1] - gap[0];
-  const antemeridianGapSize = 180 + west + (180 - east);
-
-  if (antemeridianGapSize > normalGapSize) {
-    return L.latLngBounds(
-      L.latLng(south, west), // SW
-      L.latLng(north, east), // NE
-    );
-  } else {
-    return L.latLngBounds(
-      L.latLng(south, -360 + gap[1]), // SW
-      L.latLng(north, gap[0]), // NE
-    );
-  }
-}
-
-export function computeLargestGap(items, valueAccessor = d => d) {
-  const [xMin, xMax] = d3.extent(items, valueAccessor);
-  if (xMin === xMax) {
-    return [xMin, xMax];
-  }
-
-  const buckets = [];
-  const bucketSize = (xMax - xMin) / items.length;
-  for (const item of items) {
-    const x = valueAccessor(item);
-    const k = Math.floor((x - xMin) / bucketSize);
-    if (buckets[k] === undefined) {
-      buckets[k] = [x, x];
-    } else {
-      buckets[k] = [Math.min(x, buckets[k][0]), Math.max(x, buckets[k][1])];
-    }
-  }
-  let largestGap = [0, 0];
-  for (let i = 0; i < items.length; i++) {
-    if (buckets[i + 1] === undefined) {
-      buckets[i + 1] = buckets[i];
-    } else if (
-      buckets[i + 1][0] - buckets[i][1] >
-      largestGap[1] - largestGap[0]
-    ) {
-      largestGap = [buckets[i][1], buckets[i + 1][0]];
-    }
-  }
-  return largestGap;
+  return L.latLngBounds(
+    L.latLng(south, west), // SW
+    L.latLng(north, east), // NE
+  );
 }
 
 export function getAllFeaturesPoints(features) {

frontend/test/metabase-visual/visualizations/map.cy.spec.js

+import { restore, visitQuestionAdhoc } from "__support__/e2e/helpers";
+import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
+
+describe("visual tests > visualizations > map", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  const customGeoJsonUrl =
+    "https://raw.githubusercontent.com/metabase/metabase/master/resources/frontend_client/app/assets/geojson/world.json";
+  const testMapName = "My Test Map";
+
+  const saveCustomMap = () => {
+    cy.request("PUT", "/api/setting/custom-geojson", {
+      value: {
+        "my-test-map-id": {
+          name: testMapName,
+          url: customGeoJsonUrl,
+          region_key: "NAME",
+          region_name: "NAME",
+        },
+      },
+    });
+  };
+
+  it("properly displays custom maps in settings", () => {
+    cy.visit("/admin/settings/maps");
+
+    cy.findByTestId("custom-geojson-setting").within(() => {
+      cy.findByText("Add a map").click();
+    });
+
+    cy.findByTestId("edit-map-modal").within(() => {
+      cy.findByPlaceholderText(/e.g. United Kingdom/i).type(testMapName);
+      cy.findByPlaceholderText(/my-map.json/i).type(customGeoJsonUrl);
+      cy.findByText("Load").click();
+    });
+
+    cy.findByTestId("loading-spinner").should("not.exist");
+    cy.findByLabelText("hourglass icon").should("not.exist");
+    cy.get(".leaflet-container").should("be.visible");
+
+    cy.createPercySnapshot();
+  });
+
+  it("properly displays custom map in query builder", () => {
+    saveCustomMap();
+
+    const testQuery = {
+      type: "native",
+      native: {
+        query:
+          "SELECT 'Brazil' region, 23 val UNION " +
+          "SELECT 'Algeria' region, 42 val;",
+      },
+      database: SAMPLE_DB_ID,
+    };
+
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "map",
+      visualization_settings: {
+        "map.region": "my-test-map-id",
+      },
+    });
+
+    cy.findByTestId("loading-spinner").should("not.exist");
+    cy.findByLabelText("hourglass icon").should("not.exist");
+    cy.get(".leaflet-container").should("be.visible");
+
+    cy.createPercySnapshot();
+  });
+});