fix(tooltip): fixing tooltip issue

Author: alexandrusoare

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.ts

@@ -257,7 +257,7 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
     element,
     width,
     height,
-    data: processedData,
+    data: mapData,
     fills: {
       defaultFill: theme.colorBorder,
     },
@@ -270,6 +270,7 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
       highlightFillColor: color,
       highlightBorderWidth: 1,
       popupTemplate: (geo, d) =>
+        d &&
         `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
           d.m1,
         )}</div>`,
@@ -300,7 +301,8 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
         .selectAll('.datamaps-subunit')
         .on('contextmenu', handleContextMenu)
         .on('click', handleClick)
-        .on('mouseover', function onMouseOver() {
+        // Use namespaced events to avoid overriding Datamaps' default tooltip handlers
+        .on('mouseover.fillPreserve', function onMouseOver() {
           if (inContextMenu) {
             return;
           }
@@ -313,7 +315,7 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
           // Store original fill color for restoration
           element.attr('data-original-fill', originalFill);
         })
-        .on('mouseout', function onMouseOut() {
+        .on('mouseout.fillPreserve', function onMouseOut() {
           if (inContextMenu) {
             return;
           }

superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts

@@ -77,8 +77,13 @@ const mockSvg = {
   style: jest.fn().mockReturnThis(),
 };
 
+// Store the last Datamap config for assertions
+let lastDatamapConfig: Record<string, unknown> | null = null;
+
 jest.mock('datamaps/dist/datamaps.all.min', () =>
   jest.fn().mockImplementation(config => {
+    // Store config for test assertions
+    lastDatamapConfig = config;
     // Call the done callback immediately to simulate Datamap initialization
     if (config.done) {
       config.done({
@@ -158,9 +163,11 @@ test('sets up mouseover and mouseout handlers on countries', () => {
   expect(mockSvg.selectAll).toHaveBeenCalledWith('.datamaps-subunit');
   const onCalls = mockSvg.on.mock.calls;
 
-  // Find mouseover and mouseout handler registrations
-  const hasMouseover = onCalls.some(call => call[0] === 'mouseover');
-  const hasMouseout = onCalls.some(call => call[0] === 'mouseout');
+  // Find mouseover and mouseout handler registrations (namespaced events)
+  const hasMouseover = onCalls.some(
+    call => call[0] === 'mouseover.fillPreserve',
+  );
+  const hasMouseout = onCalls.some(call => call[0] === 'mouseout.fillPreserve');
 
   expect(hasMouseover).toBe(true);
   expect(hasMouseout).toBe(true);
@@ -199,9 +206,9 @@ test('stores original fill color on mouseover', () => {
 
   jest.spyOn(d3 as any, 'select').mockReturnValue(mockD3Selection as any);
 
-  // Capture the mouseover handler
+  // Capture the mouseover handler (namespaced event)
   mockSvg.on.mockImplementation((event: string, handler: MouseEventHandler) => {
-    if (event === 'mouseover') {
+    if (event === 'mouseover.fillPreserve') {
       mouseoverHandler = handler;
     }
     return mockSvg;
@@ -254,9 +261,9 @@ test('restores original fill color on mouseout for country with data', () => {
 
   jest.spyOn(d3 as any, 'select').mockReturnValue(mockD3Selection as any);
 
-  // Capture the mouseout handler
+  // Capture the mouseout handler (namespaced event)
   mockSvg.on.mockImplementation((event: string, handler: MouseEventHandler) => {
-    if (event === 'mouseout') {
+    if (event === 'mouseout.fillPreserve') {
       mouseoutHandler = handler;
     }
     return mockSvg;
@@ -310,8 +317,9 @@ test('restores default fill color on mouseout for country with no data', () => {
 
   jest.spyOn(d3 as any, 'select').mockReturnValue(mockD3Selection as any);
 
+  // Capture the mouseout handler (namespaced event)
   mockSvg.on.mockImplementation((event: string, handler: MouseEventHandler) => {
-    if (event === 'mouseout') {
+    if (event === 'mouseout.fillPreserve') {
       mouseoutHandler = handler;
     }
     return mockSvg;
@@ -352,11 +360,12 @@ test('does not handle mouse events when inContextMenu is true', () => {
 
   jest.spyOn(d3 as any, 'select').mockReturnValue(mockD3Selection as any);
 
+  // Capture namespaced event handlers
   mockSvg.on.mockImplementation((event: string, handler: MouseEventHandler) => {
-    if (event === 'mouseover') {
+    if (event === 'mouseover.fillPreserve') {
       mouseoverHandler = handler;
     }
-    if (event === 'mouseout') {
+    if (event === 'mouseout.fillPreserve') {
       mouseoutHandler = handler;
     }
     return mockSvg;
@@ -430,3 +439,72 @@ test('calls onContextMenu when provided and right-click occurs', () => {
 
   expect(mockOnContextMenu).toHaveBeenCalledWith(100, 200, expect.any(Object));
 });
+
+test('initializes Datamap with keyed object data for tooltip support', () => {
+  WorldMap(container, baseProps);
+
+  // Verify data is an object (not an array) keyed by country codes
+  expect(Array.isArray(lastDatamapConfig?.data)).toBe(false);
+  expect(typeof lastDatamapConfig?.data).toBe('object');
+
+  const data = lastDatamapConfig?.data as Record<string, unknown>;
+
+  // Verify the data is keyed by country code
+  expect(data).toHaveProperty('USA');
+  expect(data).toHaveProperty('CAN');
+
+  // Verify the keyed data contains the expected properties for tooltips
+  expect(data.USA).toMatchObject({
+    country: 'USA',
+    name: 'United States',
+    m1: 100,
+    m2: 200,
+  });
+  expect(data.CAN).toMatchObject({
+    country: 'CAN',
+    name: 'Canada',
+    m1: 50,
+    m2: 100,
+  });
+});
+
+test('popupTemplate returns tooltip HTML when country data exists', () => {
+  WorldMap(container, baseProps);
+
+  const geographyConfig = lastDatamapConfig?.geographyConfig as Record<
+    string,
+    unknown
+  >;
+  const popupTemplate = geographyConfig?.popupTemplate as (
+    geo: unknown,
+    d: unknown,
+  ) => string;
+
+  const mockGeo = { properties: { name: 'United States' } };
+  const mockCountryData = { name: 'United States', m1: 100 };
+
+  const tooltipHtml = popupTemplate(mockGeo, mockCountryData);
+
+  expect(tooltipHtml).toContain('United States');
+  expect(tooltipHtml).toContain('hoverinfo');
+});
+
+test('popupTemplate handles null/undefined country data gracefully', () => {
+  WorldMap(container, baseProps);
+
+  const geographyConfig = lastDatamapConfig?.geographyConfig as Record<
+    string,
+    unknown
+  >;
+  const popupTemplate = geographyConfig?.popupTemplate as (
+    geo: unknown,
+    d: unknown,
+  ) => string | undefined;
+
+  const mockGeo = { properties: { name: 'Antarctica' } };
+
+  // When hovering over a country with no data, 'd' will be undefined
+  const tooltipHtml = popupTemplate(mockGeo, undefined);
+
+  expect(tooltipHtml).toBeFalsy();
+});