Как реализовать интерактивность в моей листовке Power BI Custom?

Question

На самом деле я работаю над разработкой Power BI Custom Visual, основанной на листовке. ( https://leafletjs.com/)

Я хотел бы реализовать интерактивность между картой листовки и данными, показанными в таблице. Цель состоит в том, чтобы при выборе страны на карте были отфильтрованы все связанные данные в таблице power bi.

Я читал эти документы:

https://github.com/Microsoft/PowerBI-visuals/blob/master/Visual/Selection.md

https://community.powerbi.com/t5/Developer/How-to-Build-SelectionID-for-table-visual-Source-Code/td-p/229433

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/adding-selection-and-interaction-with-other-visuals/

Большинство примеров, найденных в Интернете, предназначены для гистограммы, матрицы или других типов визуальных эффектов. Моя листовка-карта реализована в виде таблицы, и я не смог найти пример того, как реализовать интерактивность.

Я также пытался управлять выбором через onclick функция (которая также отображает long и lat всплывающее окно) с помощью менеджера выбора.

                map.on('click', clickdid); //sets click function
            function clickdid(e) {
                console.log(e);
                debugger;

                this.selectionManager.select(e.selectionId)

                var latlng = e.latlng || e.layer.getLatLng(); //gets latitude and langitude
                var popup = L.popup({ closeButton: false, autoClose: false, closeOnClick: false, closeOnEscapeKey: false });
                L.popup()
                    .setLatLng(latlng)
                    .setContent("Coordonnées :" + e.latlng.toString())
                    .openOn(map); //shows longitude and latitude
            }

            map.addLayer(markers); //adds the empty clusters layer

module powerbi.extensibility.visual {
    "use strict";
    var L = typeof L !== 'undefined' ? L : window['L'];
    var map: L.Map;
    var markers;
    var iconimg;
    var showing = true;
    var polygon;
    var tile;
    var geojsonLayer;

    //exporting value from visual format tab
    export function getValue<T>(objects: DataViewObjects, objectName: string, propertyName: string, defaultValue: T): T {
        if (objects) {
            let object = objects[objectName];
            if (object) {
                let property: T = <T>object[propertyName];
                if (property !== undefined) {
                    return property;
                }
            }
        }
        return defaultValue;
    }

    export class pmap implements IVisual {
        private readonly selectionIdBuilder: ISelectionIdBuilder;
        private readonly selectionManager: ISelectionManager;
        private readonly  target: HTMLElement;
        private  readonly host: IVisualHost;
        public  showcs: boolean;
        selectionIds: ISelectionId[];

        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            this.selectionIdBuilder = options.host.createSelectionIdBuilder();
            this.selectionManager = options.host.createSelectionManager();

            this.showcs = true; //Activates the clusters
            markers = new L.MarkerClusterGroup(); //creats the clusters container
            this.target = options.element; //selects the target for adding Map div
            // ...

            map.on('click', clickdid); //sets click function
            function clickdid(e) {
                console.log(e);
                debugger;

                this.selectionManager.select(e.selectionId)

                var latlng = e.latlng || e.layer.getLatLng(); //gets latitude and langitude
                var popup = L.popup({ closeButton: false, autoClose: false, closeOnClick: false, closeOnEscapeKey: false });
                L.popup()
                    .setLatLng(latlng)
                    .setContent("Coordonnées :" + e.latlng.toString())
                    .openOn(map); //shows longitude and latitude
            }

            map.addLayer(markers); //adds the empty clusters layer
        } //ajoute les coordonnées à l'endroit cliqué

        public update(options: VisualUpdateOptions) {
            //GETTING "Show Clusters" setting
            var propertyGroupName: string = "dpmap";
            var propertyGroups: DataViewObjects = options.dataViews[0].metadata.objects;
            this.showcs = getValue<boolean>(propertyGroups, propertyGroupName, "showCluster", true);
            var jQuery = typeof jQuery !== 'undefined'
                    ?jQuery
                    : window['$'];



            map.eachLayer(function(l){ map.removeLayer(l)});
            map.addLayer(tile);

            map.removeLayer(markers);
            markers = new L.MarkerClusterGroup();


            const { columns, rows } = options.dataViews[0].table;

            rows             
                .map(function (row, idx) {
                 let data = row.reduce(function (d, v, i) {
                     const role = Object.keys(columns[i].roles)[0]; // ;
                     d[role] = v;

                     return d;
                 }, {});


                jQuery.ajax({
                   type: "GET",
                   url: data['choropleths'],
                   dataType: 'json',
                    success: function (response) {
                        geojsonLayer = L.geoJson(response).addTo(map);
                        //map.fitBounds(geojsonLayer.getBounds());
                        //$("#info").fadeOut(500);
                    }
                });


            //activating or deactiving clusters.
            if (showing != this.showcs) {
                if (this.showcs) {
                    map.addLayer(markers);
                    showing = this.showcs;
                }
                else {
                    map.removeLayer(markers);
                    showing = this.showcs;
                }  
            }
        }

    }
}

Я хотел бы реализовать интерактивность между картой и данными. На самом деле это работает так: если вы выбираете данные в таблице power bi, карта показывает выбранные данные

Ожидаемый результат: я хотел бы выбрать место на моей листовой карте, а затем данные из таблицы power bi адаптируются к выбранным данным на карте.

Дайте мне знать, если я должен добавить дополнительную информацию.

Вот гиф проекта, выбрав Париж, адаптирует данные, показанные на карте, но выбор данных на карте не фильтрует данные в таблице, которую вы видите справа.