Reused tab shows error when columns change

[GeorchW]

Describe the bug

When the number of columns changes and I reuse the tab, I get this error:

Error: The columnWidths property of the TableColumnResizing plugin is given an invalid value.

To Reproduce Steps to reproduce the behavior:

1. Set sqltools.results.reuseTabs to connection.
2. Open a MySQL connection.
3. Write down "SELECT 1" in the new query editor and run the query (using the "Run on active connection" codelens above).
4. Change the query to "SELECT 1, 2" and run it again.
5. Instead of a table, you get an error message in the results tab.

Complete error message below.

Something went wrong.
Error: The columnWidths property of the TableColumnResizing plugin is given an invalid value.

    in GetterBase
    in Unknown
    in Unknown
    in PluginIndexer
    in PluginBase
    in Unknown
    in Unknown
    in Unknown
    in PluginIndexer
    in PluginBase
    in Unknown
    in Unknown
    in GridCore
    in PluginIndexer
    in PluginHostBase
    in Unknown
    in Grid
    in div
    in ForwardRef
    in ForwardRef
    in Unknown
    in Unknown
    in div
    in Unknown
    in Unknown
    in Unknown
    in ErrorBoundary
    in ThemeProvider_ThemeProvider
    in Unknown
[Open VS Code DevTools](command:workbench.action.webview.openDeveloperTools)

Expected behavior Well, a table with two columns.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• SQLTools Version: 0.26.0
• VS Code Version: 1.74.2
• OS: Linux
• Driver:
  • [ ] PostgreSQL/Redshift
  • [x] MySQL/MariaDB
  • [ ] MSSQL/Azure
  • [ ] SQLite
  • [ ] Other? Which...
• Database version: [e.g. MySQL v5.6, PostgreSQL vX...] MySQL 8.0.31

Additional context

I absolutely love this extension! But when using the reuseTabs setting, I'm constantly getting this error. I think it's not very hard to fix, will post a comment below.

[GeorchW]

So, here's what I think what the issue is:

The exception is thrown in the Table component. In there, the column widths are stored in the columnExtensions variable, which is initialized from the results when rendering for the first time (l. 50), then updated via a useEffect hook whenever the no. of columns changes (l. 204-206).

However, I suspect that the component re-renders before the effect is executed, such that it tries rendering with the old set of columns again. Then, the new column is missing.

This could be fixed by using a useMemo hook instead of the useState + useEffect combination. It would however require to split the columnExtensions variable into two, one that carries the filtering predicate and another that carries the width.

[GeorchW]

There is another related issue: if a column changes its name, the same error occurs. You can try by running SELECT 1 AS a;, then SELECT 1 AS b;.