Как реализовать интерактивность в моей листовке 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 адаптируются к выбранным данным на карте.

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

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