Adding filter of summarized field grouped by latitude and longitude on a map causes table visualization error

[likeshumidity]

Describe the bug

• Filtering on aggregate column after binning on a map breaks the map and causes unexpected UI Table visualization

Logs

To Reproduce
Steps to reproduce the behavior (if you can reproduce the bug using the Sample Database, we will find the issue faster):

1. Use People from Sample Dataset to create a map with count of rows summary grouped by latitude and longitude (binned)

2. Add a filter on Count > 2

3. Map disappears, Source Table name disappears (top left), and clicking gear to edit visualization shows 3 columns to add that already exist.

Expected behavior

• Expect More Columns in Table view not to show the 3 columns that have already been added.

Information about your Metabase Installation:

You can get this information by going to Admin -> Troubleshooting, or simply post the JSON you see in that page.

• Metabase version: 45.3.1, 46.1, and master (as of 2023-04-12)

Severity

• customer reported issue

[likeshumidity]

Related to:

• Adding filter of summarized field grouped by latitude and longitude on a map breaks breadcrumbs #30056
• Adding filter of summarized field grouped by latitude and longitude on a map changes selected metric #30057

[kamilmielnik]

I looks like the problem is that points.length is not equal to gridSquares.length and therefore the for loop can go out of bounds of either points or gridSquares arrays in LeafletGridHeatMap.

(encountered while investigating #30057)

[kamilmielnik]

I looks like the problem is that points.length is not equal to gridSquares.length and therefore the for loop can go out of bounds of either points or gridSquares arrays in LeafletGridHeatMap.

The loops accounts for the index being out of bounds everywhere except the first line. The fix is rather simple:

diff --git a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
index e2d57be15b..ccbc0eb679 100644
--- a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
@@ -66,8 +66,6 @@ export default class LeafletGridHeatMap extends LeafletMap {
       const longitureValues = points.map(row => row[longitudeIndex]);
 
       for (let i = 0; i < totalSquares; i++) {
-        const [latitude, longiture, metric] = points[i];
-
         if (i >= points.length) {
           gridLayer.removeLayer(gridSquares[i]);
         }
@@ -78,6 +76,8 @@ export default class LeafletGridHeatMap extends LeafletMap {
         }
 
         if (i < points.length) {
+          const [latitude, longiture, metric] = points[i];
+
           gridSquares[i].setStyle({ color: colorScale(metric) });
 
           const [latMin, latMax] = getValueRange(