How to optimize selectionManager.select(). Lags the system when selecting

[Tung]

My code has performance problem when selecting. It searches and returns index very fast. I return index to create "createSelectionIdBuilder" by index. but when it comes to the part of code that passes selectionList into select() "selectionManager.select(selectionList, false);" it slows down my system. Is there any way I can fix this problem. Thanks.

  const handleClickSelectionVisual = useCallback((groupList: string[], parentRowList: { [key: string]: string | string[] }[]) => {
    if (_.isEmpty(groupList) && _.isEmpty(parentRowList)) {
      selectionManager.clear()
      return;
    }

    const rows = dataTableOrigin.rows || [];
    const dataParent = parentRowList.map(item => item.rows) || []
    const indices = filterDataGetIndices(dataParent as string[][], rows, groupList)

    const selectionList = []

    indices.forEach((index: number) => {
      const selection = selectionIdBuilder.createSelectionIdBuilder()
        .withTable(dataTableOrigin, index)
        .createSelectionId();
      selectionList.push(selection);
    })

    selectionManager.select(selectionList, false);
  }, [selectionFilter, dataTableOrigin.rows])

[Anonymous]

Hi @Tung ,

Please change the codes as below and check if it can work better...

const handleClickSelectionVisual = useCallback((groupList: string[], parentRowList: { [key: string]: string | string[] }[]) => {
  if (_.isEmpty(groupList) && _.isEmpty(parentRowList)) {
    selectionManager.clear();
    return;
  }

  const rows = dataTableOrigin.rows || [];
  const dataParent = parentRowList.map(item => item.rows) || [];
  const indices = filterDataGetIndices(dataParent as string[][], rows, groupList);

  // Using map instead of forEach for potential performance improvement
  const selectionList = indices.map((index: number) => 
    selectionIdBuilder.createSelectionIdBuilder()
      .withTable(dataTableOrigin, index)
      .createSelectionId()
  );

  // Debouncing the select call to avoid frequent execution
  debounce(() => {
    selectionManager.select(selectionList, false);
  }, 100); 
}, [selectionFilter, dataTableOrigin.rows]);

// Debounce function implementation
function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

Or you can raise the ticket in Custom Visuals Development Discussion forum for a dedicated and professional support.

Custom Visuals Development Discussion - Microsoft Fabric Community

Best Regards

[Tung]

thanks, but that code doesn't solve the problem