Add ability to change width of a file's content list

[dnwerner]

There appears to be no way to make the histogram/content-list of an opened file wider. It would be awesome to have the "split" cursor shown when hovering over the border between the list and the content to be able to change the list's width.

(well, we also have particularly long names for the content tables)

[AlbertoPdRF]

Thanks for opening the issue @dnwerner! I have looked a bit into this and adding what you ask for should be quite easy. However, I found some behaviour that I better ask @linev about before going ahead with implementing this:

1. Should the div where the ROOT file hierarchy is rendered also allow an horizontal scroll when the contents overflow? The vertical overflow is handled that way already. If that's the case, should it be implemented on my side or in JSROOT's one?
2. When the whole window is resized, the painter is automatically resized, but if I resize the display's div only it doesn't seem to happen. Any idea why?

[linev]

1. Concerning horizontal overflow for div element - you can configure it as you want. Either hidden or auto. I hope, JSROOT should work both way.
2. JSROOT is not able to detect automatically if some internal components on HTML page are resized - only when browser window is resized. You always can call JSROOT.resize("divid") after resize is completed.

In principle, one can reuse components which are used in default JSROOT ui like here:

https://root.cern/js/latest/

There is vertical line which separates hierarchy painter from drawing and can be interactively moved. I can extend https://root.cern/js/latest/api.htm#custom_html_file_hierarchy example to show how it can be used.

[AlbertoPdRF]

As always, thanks for the quick and helpful reply!

1. I'm not sure horizontal overflow is working correctly:
   1. Go to https://root.cern/js/latest/
   2. Open hsimple.root
   3. Shrink the #jsroot_browser_area div enough to notice that:
      • The scrollbar won't appear until the div is shrinked past the filename lenght
      • The objects' names get cropped
2. Got it, thanks! I'll have to figure out how to watch out for the divs resize

Regarding the first point, is that how it's intended to work?

[linev]

I prepared example which uses JSROOT layouting:

https://jsroot.gsi.de/dev/api.htm#custom_html_file_browser

To make code working with jsroot dev and 6.x , one should use:

h.prepareGuiDiv(d3.select("#simpleGUI"), "simple");

[AlbertoPdRF]

That was really helpful, thanks @linev! Do you know what's going on regarding point 1 of my previous reply?

[linev]

Concerning horizontal scrolling - I need to add special option to enable it. For the moment in several places it is disabled. Idea was always to use vertical draggable element to resize browser. I will do it later

[AlbertoPdRF]

Awesome, thank you! :slightly_smiling_face:

[linev]

Now should be possible to configure

h.show_overflow = true;

Result is: https://jsroot.gsi.de/dev/demo/file_browser.htm

[AlbertoPdRF]

Thanks for the work @linev! Maybe I'm not getting it right, but the example still shows the behavior described previously

[linev]

Here screenshot when h.show_overflow = false;

And here h.show_overflow = true;

Main difference is horizontal scrollbar in the left-bottom corner. It also should work same way in other example

[AlbertoPdRF]

For some reason I don't see the example working that way:

Regardless, thanks so much for the work! I'll try this in ROOT File Viewer once it's included in a release :slightly_smiling_face:

[linev]

I add small fix in h.exapndItem function - now example immediately show expanded hierarchy.

But scrolling should work as described. And in case you shrink size to very tiny column (as on your screenshot) even with h.show_overflow = false; you could see scrollbar. But I would call it a "feature"

[AlbertoPdRF]

Now I see everything working perfectly (after hard-refreshing the example page), thanks again @linev! :tada: