On Country Map, Cross-Filtering is not operational as a source

[xavier-GitHub76]

Hello,

Country Map can be filtered by the cross-filtering but it is not operational as a source because a click do zoom on map

Best regards

[dosubot[bot]]

The CountryMap component currently only handles zooming behavior when clicked, and does not apply filters for cross-filtering. To enable cross-filtering, you need to modify the component to include the emitCrossFilters prop and handle click events accordingly.

Here's a brief guide on how to do it:

1. Add the emitCrossFilters Prop: Ensure that the CountryMap component includes the emitCrossFilters prop.

   const propTypes = {
    // ... other props
    emitCrossFilters: PropTypes.bool,
    // ... other props
   };

2. Handle Click Events for Cross-Filtering: Modify the click event handler to apply cross-filters if emitCrossFilters is enabled.

   const handleClick = source => {
    if (!emitCrossFilters) {
      return;
    }
    const pointerEvent = d3.event;
    pointerEvent.preventDefault();
    getCrossFilterDataMask(source);
   
    const dataMask = getCrossFilterDataMask(source)?.dataMask;
    if (dataMask) {
      setDataMask(dataMask);
    }
   };

3. Implement getCrossFilterDataMask: Ensure you have a function to construct the data mask based on the selected country.

   const getCrossFilterDataMask = source => {
    const selected = Object.values(filterState.selectedValues || {});
    const key = source.id || source.country;
    const country = mapData[key]?.name || mapData[key]?.country;
   
    if (!country) {
      return undefined;
    }
   
    let values;
    if (selected.includes(key)) {
      values = [];
    } else {
      values = [country];
    }
   
    return {
      dataMask: {
        extraFormData: {
          filters: values.length
            ? [
                {
                  col: entity,
                  op: 'IN',
                  val: values,
                },
              ]
            : [],
        },
        filterState: {
          value: values.length ? values : null,
          selectedValues: values.length ? [key] : null,
        },
      },
      isCurrentValueSelected: selected.includes(key),
    };
   };

By implementing these changes, you can enable cross-filtering functionality in the CountryMap component ^[1][2].

To continue talking to Dosu, mention @dosu.

[rusackas]

Yep. This is not a bug, really, but a lack of design/implementation for that plugin. Any interest in taking this on? We might close this as an Issue, but I'm happy to move it to an "Ideas" discussion if you want to figure out how to solve it or try to find help with it.

[xavier-GitHub76]

I agree that you move this issue to a discussion