fix(deckgl): emit usable cross-filter values from polygon and geojson clicks

superset-frontend/plugins/preset-chart-deckgl/src/layers/Geojson/buildQuery.ts

@@ -33,6 +33,7 @@ export interface DeckGeoJsonFormData extends SqlaFormData {
   geojson?: string;
   filter_nulls?: boolean;
   js_columns?: string[];
+  cross_filter_column?: string | null;
   tooltip_contents?: unknown[];
 }
 
@@ -41,6 +42,7 @@ export default function buildQuery(formData: DeckGeoJsonFormData) {
     geojson,
     filter_nulls = true,
     js_columns,
+    cross_filter_column,
     tooltip_contents,
   } = formData;
 
@@ -61,6 +63,10 @@ export default function buildQuery(formData: DeckGeoJsonFormData) {
     const withJsColumns = addJsColumnsToColumns(columnStrings, js_columns);
     columns = withJsColumns as QueryFormColumn[];
 
+    if (cross_filter_column && !columns.includes(cross_filter_column)) {
+      columns.push(cross_filter_column);
+    }
+
     // Add tooltip columns
     columns = addTooltipColumnsToQuery(columns, tooltip_contents);
 

superset-frontend/plugins/preset-chart-deckgl/src/layers/Geojson/controlPanel.ts

@@ -44,6 +44,7 @@ import {
   tooltipContents,
   tooltipTemplate,
   jsFunctionControl,
+  crossFilterColumn,
 } from '../../utilities/Shared_DeckGL';
 import { dndGeojsonColumn } from '../../utilities/sharedDndControls';
 import { BLACK_COLOR } from '../../utilities/controls';
@@ -367,6 +368,7 @@ const config: ControlPanelConfig = {
     {
       label: t('Advanced'),
       controlSetRows: [
+        [crossFilterColumn],
         [jsColumns],
         [jsDataMutator],
         [jsTooltip],

superset-frontend/plugins/preset-chart-deckgl/src/layers/Geojson/transformProps.ts

@@ -32,14 +32,25 @@ export default function transformProps(chartProps: ChartProps) {
   }
 
   const records = getRecordsFromQuery(chartProps.queriesData);
+  const crossFilterCol = formData.cross_filter_column || undefined;
 
   // Parse each record's geojson column value (replicates backend DeckGeoJson.get_properties)
   const features = records
     .map((record: DataRecord) => {
       const geojsonStr = record[geojsonCol];
       if (geojsonStr == null) return null;
       try {
-        return JSON.parse(String(geojsonStr));
+        const feature = JSON.parse(String(geojsonStr));
+        // Surface cross_filter_column from the row onto feature.properties so
+        // that picking can emit a dimension filter even when the GeoJSON blob
+        // doesn't carry the column itself.
+        if (crossFilterCol && record[crossFilterCol] !== undefined) {
+          feature.properties = {
+            ...feature.properties,
+            [crossFilterCol]: record[crossFilterCol],
+          };
+        }
+        return feature;
       } catch {
         return null;
       }

superset-frontend/plugins/preset-chart-deckgl/src/layers/Polygon/buildQuery.ts

@@ -47,6 +47,7 @@ export interface DeckPolygonFormData extends SqlaFormData {
   reverse_long_lat?: boolean;
   filter_nulls?: boolean;
   js_columns?: string[];
+  cross_filter_column?: string | null;
   tooltip_contents?: unknown[];
   tooltip_template?: string;
 }
@@ -58,6 +59,7 @@ export default function buildQuery(formData: DeckPolygonFormData) {
     point_radius_fixed,
     filter_nulls = true,
     js_columns,
+    cross_filter_column,
     tooltip_contents,
   } = formData;
 
@@ -78,6 +80,10 @@ export default function buildQuery(formData: DeckPolygonFormData) {
       }
     });
 
+    if (cross_filter_column && !columns.includes(cross_filter_column)) {
+      columns.push(cross_filter_column);
+    }
+
     columns = addTooltipColumnsToQuery(columns, tooltip_contents);
 
     const metrics = [];

superset-frontend/plugins/preset-chart-deckgl/src/layers/Polygon/controlPanel.ts

@@ -30,6 +30,7 @@ import {
   jsDataMutator,
   jsTooltip,
   jsOnclickHref,
+  crossFilterColumn,
   legendFormat,
   legendPosition,
   fillColorPicker,
@@ -203,6 +204,7 @@ const config: ControlPanelConfig = {
     {
       label: t('Advanced'),
       controlSetRows: [
+        [crossFilterColumn],
         [jsColumns],
         [jsDataMutator],
         [jsTooltip],

superset-frontend/plugins/preset-chart-deckgl/src/layers/common.tsx

@@ -121,10 +121,21 @@ export function commonLayerProps({
         formData,
       });
 
-      if (event.leftButton && setDataMask !== undefined && crossFilters) {
+      // deck.gl v9 event shape: { type, offsetCenter, srcEvent, tapCount }.
+      // Older code checked event.leftButton / event.rightButton which no
+      // longer exist; dispatch on event.type and the underlying MouseEvent
+      // button instead.
+      const srcEvent = event?.srcEvent;
+      const isContextMenu =
+        event?.type === 'contextmenu' || srcEvent?.button === 2;
+      const isLeftClick =
+        event?.type === 'click' && (srcEvent?.button ?? 0) === 0;
+
+      if (isLeftClick && setDataMask !== undefined && crossFilters) {
         setDataMask(crossFilters.dataMask);
-      } else if (event.rightButton && onContextMenu !== undefined) {
-        onContextMenu(event.center.x, event.center.y, {
+      } else if (isContextMenu && onContextMenu !== undefined) {
+        const center = event?.offsetCenter ?? event?.center ?? { x: 0, y: 0 };
+        onContextMenu(center.x, center.y, {
           drillToDetail: [],
           crossFilter: crossFilters,
           drillBy: {},

superset-frontend/plugins/preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx

@@ -181,6 +181,21 @@ export const jsColumns = {
   },
 };
 
+export const crossFilterColumn: CustomControlItem = {
+  name: 'cross_filter_column',
+  config: {
+    ...sharedControls.groupby,
+    label: t('Cross-filter column'),
+    multi: false,
+    default: null,
+    description: t(
+      'Dimension column emitted as a cross-filter when a feature is clicked. ' +
+        'Other charts on the dashboard match against this column. If unset, ' +
+        'falls back to the geometry column (legacy behavior, often unmatchable).',
+    ),
+  },
+};
+
 export const jsDataMutator = {
   name: 'js_data_mutator',
   config: jsFunctionControl(