feat: Adds drill to detail context menu to World Map (#21150)

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

@@ -50,6 +50,7 @@ const formatter = getNumberFormatter();
 
 function WorldMap(element, props) {
   const {
+    entity,
     data,
     width,
     height,
@@ -61,6 +62,8 @@ function WorldMap(element, props) {
     colorScheme,
     sliceId,
     theme,
+    onContextMenu,
+    inContextMenu,
   } = props;
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);
@@ -102,6 +105,22 @@ function WorldMap(element, props) {
     mapData[d.country] = d;
   });
 
+  const handleContextMenu = source => {
+    const pointerEvent = d3.event;
+    pointerEvent.preventDefault();
+    const val = source.id || source.country;
+    const formattedVal = mapData[val].name;
+    const filters = [
+      {
+        col: entity,
+        op: '==',
+        val,
+        formattedVal,
+      },
+    ];
+    onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+  };
+
   const map = new Datamap({
     element,
     width,
@@ -111,8 +130,8 @@ function WorldMap(element, props) {
       defaultFill: theme.colors.grayscale.light2,
     },
     geographyConfig: {
-      popupOnHover: true,
+      popupOnHover: !inContextMenu,
-      highlightOnHover: true,
+      highlightOnHover: !inContextMenu,
       borderWidth: 1,
       borderColor: theme.colors.grayscale.light5,
       highlightBorderColor: theme.colors.grayscale.light5,
@@ -127,7 +146,7 @@ function WorldMap(element, props) {
       borderWidth: 1,
       borderOpacity: 1,
       borderColor: color,
-      popupOnHover: true,
+      popupOnHover: !inContextMenu,
       radius: null,
       popupTemplate: (geo, d) =>
         `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
@@ -135,7 +154,7 @@ function WorldMap(element, props) {
         )}</div>`,
       fillOpacity: 0.5,
       animate: true,
-      highlightOnHover: true,
+      highlightOnHover: !inContextMenu,
       highlightFillColor: color,
       highlightBorderColor: theme.colors.grayscale.dark2,
       highlightBorderWidth: 2,
@@ -144,6 +163,11 @@ function WorldMap(element, props) {
       exitDelay: 100,
       key: JSON.stringify,
     },
+    done: datamap => {
+      datamap.svg
+        .selectAll('.datamaps-subunit')
+        .on('contextmenu', handleContextMenu);
+    },
   });
 
   map.updateChoropleth(mapData);
@@ -153,7 +177,8 @@ function WorldMap(element, props) {
     div
       .selectAll('circle.datamaps-bubble')
       .style('fill', color)
-      .style('stroke', color);
+      .style('stroke', color)
+      .on('contextmenu', handleContextMenu);
   }
 }
 

superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js

@@ -19,8 +19,11 @@
 import { rgb } from 'd3-color';
 
 export default function transformProps(chartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const { width, height, formData, queriesData, hooks, inContextMenu } =
+    chartProps;
+  const { onContextMenu } = hooks;
   const {
+    entity,
     maxBubbleSize,
     showBubbles,
     linearColorScheme,
@@ -32,6 +35,7 @@ export default function transformProps(chartProps) {
   const { r, g, b } = colorPicker;
 
   return {
+    entity,
     data: queriesData[0].data,
     width,
     height,
@@ -42,5 +46,7 @@ export default function transformProps(chartProps) {
     colorBy,
     colorScheme,
     sliceId,
+    onContextMenu,
+    inContextMenu,
   };
 }