Custom Sorting with multiple visuals on the page causes an error

[ChrisWilliams]

I've implemented custom sorting in a custom Power BI visual I've created.

It all works fine when there is one visual only on the page.  However, if I have more than one visual on the page, I get an unexpected interaction between the two visuals that causes a continual update.

You can see what I mean in this video link: https://cloudscopeio.blob.core.windows.net/public/DataSorting.mp4 

In my visual, I let the report designer assign 1 or 2 columns that they want to use for sorting, and the direction for each column.  In the update method, I retrieve these values/options and then apply host.applyCustomSort. 

It's all pretty straightforward, and as I said it works fine when there is only one visual on the page.  There is no issue doing sorting when there is two visuals on the page when using the normal sort feature.

I haven't seen a lot of posts on this topic.  Does anyone have any guidance?

private applySorting(): void {
    if (this.enableLogging) {
      console.log(`[${this.host.instanceId}] applySortingExecuted`);
    }
    const sortColumns = this.getSortColumns();  //gets a an array of column IDs
    const args: CustomVisualApplyCustomSortArgs = {
      sortDescriptors: [],
    };
    if (sortColumns.length === 0) {
      return;
    }
    for (let i = 0; i < sortColumns.length; i++) {
      const sortColumn = sortColumns[i];  // The zero-based column ID to use from the table
      const queryName = this.dataView.table.columns[sortColumn].queryName;
      const val: string =
        i === 0
          ? this.settings.generalOptions.sortDirectionA.value.toString()
          : this.settings.generalOptions.sortDirectionB.value.toString();

      if (this.enableLogging) {
        console.log(`[${this.host.instanceId}] ${queryName}: ${val}`);
      }

      const sortDirection =
        val === 'asc'
          ? powerbi.SortDirection.Ascending
          : powerbi.SortDirection.Descending;

      args.sortDescriptors.push({
        queryName: queryName,
        sortDirection: sortDirection,
      });
    }
    this.host.applyCustomSort(args);
  }

[Anonymous · Accepted solution]

Hi, @ChrisWilliams 

In response to your query, my initial thought revolves around the issue of custom visual object interactions. You might consider manually editing these interactions to ensure there are no unintended interactions between the visuals.

For further details, please refer to:

Change how visuals interact in a report - Power BI | Microsoft Learn

...
   let allowInteractions = options.host.hostCapabilities.allowInteractions;
   bars.on('click', function(d) {
       if (allowInteractions) {
           selectionManager.select(d.selectionId);
           ...
       }
   });

For further details, please refer to:
https://learn.microsoft.com/en-us/power-bi/developer/visuals/visuals-interactions#set-interactive-pe...

Regarding the definitions of sortDirectionA and sortDirectionB, I currently do not see their definitions directly. Additionally, since you have implemented an external loop that repeatedly executes this operation, I recommend checking your visual object's configuration file to confirm the definitions and default values for sortDirectionA and sortDirectionB.

Lastly, here is the documentation for diagnosing exceptions, which I hope will be helpful to you:

Debug Power BI custom visuals - Power BI | Microsoft Learn

Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.