Repro #15980: Gauge visualization causes re-render on hover when there are no labels (#15987)

Co-authored-by: flamber <1447303+flamber@users.noreply.github.com>

frontend/src/metabase/visualizations/visualizations/Gauge.jsx

@@ -272,6 +272,7 @@ export default class Gauge extends Component {
                   column={column}
                   settings={settings}
                   onHoverChange={!showLabels ? this.props.onHoverChange : null}
+                  testId={"gauge-arc-" + index}
                 />
               ))}
               {/* NEEDLE */}
@@ -340,6 +341,7 @@ const GaugeArc = ({
   onHoverChange,
   settings,
   column,
+  testId,
 }) => {
   const arc = d3.svg
     .arc()
@@ -352,6 +354,7 @@ const GaugeArc = ({
         endAngle: end,
       })}
       fill={fill}
+      data-testid={testId}
       onMouseMove={e => {
         if (onHoverChange) {
           const options =

frontend/test/metabase/scenarios/visualizations/gauge.cy.spec.js

+import { restore } from "__support__/e2e/cypress";
+import { SAMPLE_DATASET } from "__support__/e2e/cypress_sample_dataset";
+
+const { ORDERS_ID } = SAMPLE_DATASET;
+
+describe("scenarios > visualizations > gauge chart", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+    cy.intercept("POST", "/api/dataset").as("dataset");
+  });
+
+  it.skip("should not rerender on gauge arc hover (metabase#15980)", () => {
+    cy.createQuestion({
+      name: "15980",
+      query: { "source-table": ORDERS_ID, aggregation: [["count"]] },
+      display: "gauge",
+    }).then(({ body: { id: questionId } }) => {
+      cy.createDashboard("15980D").then(({ body: { id: dashboardId } }) => {
+        // Add previously created question to the dashboard
+        cy.request("POST", `/api/dashboard/${dashboardId}/cards`, {
+          cardId: questionId,
+        }).then(({ body: { id: dashCardId } }) => {
+          // Make dashboard card really small (necessary for this repro as it doesn't show any labels)
+          cy.request("PUT", `/api/dashboard/${dashboardId}/cards`, {
+            cards: [
+              {
+                id: dashCardId,
+                card_id: questionId,
+                row: 0,
+                col: 0,
+                sizeX: 4,
+                sizeY: 4,
+                parameter_mappings: [],
+              },
+            ],
+          });
+        });
+        cy.intercept(`/api/card/${questionId}/query`).as("cardQuery");
+
+        cy.visit(`/dashboard/${dashboardId}`);
+        cy.wait("@cardQuery");
+        cy.findByTestId("gauge-arc-1").trigger("mousemove");
+        cy.findByText("Something went wrong").should("not.exist");
+      });
+    });
+  });
+});