Add auto-sizing for result columns

[rinukkusu]

Currently all columns have the same width and it's really tiring to manually expand all the columns with content larger than the default width.

Proposal: set width of each column to the largest content in that column but still with a maximum width.

There already is a plugin for slickgrid, you potentially could use or check out: https://github.com/naresh-n/slickgrid-column-data-autosize

[anthonydresser]

Unless something has changed, I believe we are using that exactly plugin currently, it just doesn't happen on its own. Similar to Excel, you need to double click the edge of the column header (When your mouse icon changes) and it auto sizes to the largest content currently being shown (i,e not all cells). @coquagli is this still true?

[coquagli]

@anthonydresser Yes, that is still the case. Double clicking the edge of the right side of the header will perform the resize @rinukkusu is describing. As you mentioned, this resize is not automatically applied- the user has to trigger it.

[rinukkusu]

Unless something has changed, I believe we are using that exactly plugin currently

Ah, perfect!

Similar to Excel, you need to double click the edge of the column header

Do you think, it's possible to get an option for that, so it automatically expands if the option is active?

[rinukkusu]

So I researched a little and it looks like it's not that easy to accomplish for me to create a pull request, since the actual registration of the plugins is done in angular2-slickgrid - so I have no access to the resizeAllColumns() the plugin would provide. 😢

[anthonydresser]

@rinukkusu Technically its possible, the reason it wasn't done is because if you get a result back with a large binary field (could be upwards of 2gb), it would almost certainly crash vscode.

With regards to not being able to call resizeAllColumns...I see how this would be a problem in the current setup. A solution I can think of would be to add a function to the angular2-slickgrid class to get a plugin by name (pass a string). You could use this to call resizeAllColumns from this project, while still preserving the dependency setup we currently have. @coquagli thoughts?

[coquagli]

@anthonydresser I think adding some sort of getPlugin(pluginName: string) function to angular2-slickgrid, then using that to perform the resize on-load would be the way to go.

@rinukkusu Our team also owns angular2-slickgrid, so we can support any pull requests you make in that repository. One of our team's top priorities is community engagment, so if you are interested in this feature we encourage you to create the necessary pull requests in both angular2-slickgrid and vscode-mssql and ask us for any help you need along the way.

[anthonydresser]

I'd still be hesitant to put a onload resize since thats a really easy way to possibly crash vscode if the user is getting data sets back with lots of data in the cells. Should probably, at least, put a warning on the option and have default to off.

[coquagli]

@anthonydresser Yes, I would agree.

[benrr101]

On the other hand, is it possible to have it auto expand up to a maximum size? SSMS doesn't expand to the full size of the contents of the cell if it's specifically large, but you can still double click the column to expand even further.

[rinukkusu]

I'm almost done with the feature, but I'm not exactly sure when to resize the columns.

I'm firing an event after the config comes in src/views/htmlcontent/src/js/components/app.component.ts, because the result set is also coming in async.

https://github.com/rinukkusu/vscode-mssql/commit/558c603f2f51aaf19a610f196b2c9ca6dce88a37#diff-1df1f9bd5f3b0cf63b472db70bd235bfR416

This is what it looks like right now - the columns get resized, but without the rows, which seem not be drawn yet, I guess:

Any hints on when the data is loaded and drawn?

[anthonydresser]

@benrr101 the plugin being used is using the HTMLcanvas.measuretext in order to get size (which is the fastest options currently in html) however, there's no way to tell it to stop when it gets to a max size. This is going to be the biggest problem regarding have large datasets. The plugin itself already has a max size you can give it, but it still has to do the measurement to see if it needs to use the max size. There might be some optimizations here, though (I'm just recalling this all from memory).

@rinukkusu Slickgrid calls this function https://github.com/Microsoft/vscode-mssql/blob/dev/src/views/htmlcontent/src/js/components/app.component.ts#L348 when it needs new data to render. The grid itself only has the data for what rows it is currently showing (plus a window above and below), whenever you scroll, this function will be called. You might be able to put some logic here to do the autoresize (but make sure to put it on stack using setTimeout rather than just doing the logic right then and there). Since this function is also called every time, you'll want to make sure you have some logic to make sure it only resizes once.

[benrr101]

@anthonydresser Ah, I didn't realize the size calculating part was the tricky part. Makes sense that this would be an issue.

[coquagli]

@rinukkusu I would like to follow up with you on this. Is there anything we can do to help you out?

[Tomahawk-IT]

Please make it happen 🙏

[orionsparks]

Would love this feature too! First thing I do after getting results back is immediately go to resize at least one of the columns I'm interested in.

Seems logic could be added to "max width" specific field types, like excluding blobs, binary data, etc. Even a setting for "min width" for each column in px or something would be helpful if that's easier.

[bwells78]

This was the very first option I looked for when using this for the first time... it would be an incredibly helpful usability improvement 🙏🏻

[slop3n]

Can we have a configurable field on how wide should the columns be?

[movy]

Has anything changed in last 5 years to make this actually possible? Quite annoying to resize a dozen columns on each session start

[orionsparks]

Has anything changed in last 5 years to make this actually possible? Quite annoying to resize a dozen columns on each session start

Nope… I had to go back to SSMS and DBeaver on my Mac

[movy]

Thanks for recommendations, will look into it. Manually sizing columns is really getting under my skin after only a month of intense DB work. Almost every single GUI out there enforces this on user, I have no idea why. Like devs themselves never use their own tools..

[MartinMatthews]

Still waiting. I have not gone back to SSMS as VS Code is better in almost every other way but resizing columns continues to be the one big issue for me. Just have the results column widths exactly the same as the header column widths if that is the only thing you can do.

[dbrocha]

+1

[TaxDevOp]

And after 5 years we are now at 7 years... We'll make it through the first decade without anything happening...