Is it possible to ctrl click to filter across multiple custom visuals

[emma_s]

Hello

I've made a custom visual treemap. It allows ctrl+click to let the user select multiple categories to filter other visuals on the page. For example, if the treemap is for months of the year, users can select Jan + Feb.

However this report contains many treemaps. My users complain they can no longer filter multiple treemaps at the same time, now I have replaced the standard treemap with the custom one. So if there are two treemaps, months and days, they can filter for Jan + Feb, but when they ctrl+click Tuesday on the second treemap, they lose the Jan+Feb filters.

I don't even know if it's possible to code this in a custom visual. Is it possible and can you point me in the right direction to achieve this? Below is my current filtering code:

//constructor

        this.selectionManager = options.host.createSelectionManager();

        this.selectionManager.registerOnSelectCallback(() => {
            this.syncSelectionState(this.treemapSelection, <ISelectionId[]>this.selectionManager.getSelectionIds());
        });

//update

        this.syncSelectionState(
            this.treemapSelection,
            <ISelectionId[]>this.selectionManager.getSelectionIds()
        );

        this.treemapSelection.on('click', (d) => {
            // Allow selection only if the visual is rendered in a view that supports interactivity (e.g. Report)
            if (this.host.allowInteractions) {
                const isCtrlPressed: boolean = (<MouseEvent>d3Event).ctrlKey;

                this.selectionManager
                    .select(d.selectionId, isCtrlPressed)
                    .then((ids: ISelectionId[]) => {
                        this.syncSelectionState(this.treemapSelection, ids);
                    });

                (<Event>d3Event).stopPropagation();
            }
        });

//export class Visual...

    private syncSelectionState(
        selection: Selection<any>,
        selectionIds: ISelectionId[]
     void {
        if (!selection || !selectionIds) {
            return;
        }

        if (!selectionIds.length) {
            const opacity: number = 1;//this.TreemapSettings.generalView.opacity / 100;
            selection
                .style("fill-opacity", opacity)
                .style("stroke-opacity", opacity);

            return;
        }

        const self: this = this;

        selection.each(function (barDataPoint: TreemapDataPoint) {
            const isSelected: boolean = self.isSelectionIdInArray(selectionIds, barDataPoint.selectionId);

            const opacity: number = isSelected
                ? Visual.Config.solidOpacity
                : Visual.Config.transparentOpacity;

            d3Select(this)
                .style("fill-opacity", opacity)
                .style("stroke-opacity", opacity);
        });
    }

    private isSelectionIdInArray(selectionIds: ISelectionId[], selectionId: ISelectionId): boolean {
        if (!selectionIds || !selectionId) {
            return false;
        }

        return selectionIds.some((currentSelectionId: ISelectionId) => {
            return currentSelectionId.includes(selectionId);
        });
    }
}