UI changes on upgrade to bslib and Bootstrap 5

[vedhav]

Draft PR, will be broken into smaller PRs soon

[kumamiao]

Thank you so much Vehda for starting the draft PR! I like the general look of the UI, looks more modern that our previous style. A couple of comments from my initial review:

1. Would it be okay to adjust the filter panel width/proportion? The filter panel seems to be a bit wide, pushing the output panel to be a bit too narrow.
2. I personally feel it would be great to save a bit more space for each filter, would it be possible to adjust? For example, making the space narrow between filters, removing some boarders Taking the screenshots below as an example, only 4 filters have been selected but it has taken up almost the whole page. When implemented into actual clinical studies, this would make the panel super long.
   
3. Similar reason as above, I wonder how much value would the buttons for Active filter summary, Filter Data, and Transform Data add, since all of them are collapsable. I know @donyunardi also have thoughts on this. For example, if we have additional features to add in the future, the top will be crumbled.
4. For the transform, other than looking at the transformed data in the output panel, would it be possible to let the users know whether they have applied or removed the transformer?
   

[vedhav]

Thank you @kumamiao for going through the POC and providing your comments:

1. Would it be okay to adjust the filter panel width/proportion? The filter panel seems to be a bit wide, pushing the output panel to be a bit too narrow.

Yes, this is possible, there is a CSS variable (--_sidebar-width) that sets the width of the sidebar(the default was 250px and it was changed to 350px). I'll also check if this is something that can be an argument that the app developer can use to customize the space to their need.

2. I personally feel it would be great to save a bit more space for each filter, would it be possible to adjust? For example, making the space narrow between filters, removing some boarders Taking the screenshots below as an example, only 4 filters have been selected but it has taken up almost the whole page. When implemented into actual clinical studies, this would make the panel super long.

👍🏽 I'll check ways to reduce the space taken by the sidebar elements. In general, the bslib defaults have more padding/margin. We can add custom defaults to our sidebar to overcome these defaults. A good aim would be to stay closer to the space the older version has. Here is a side by side screenshot of current state of the PR and older version just for reference.

3. Similar reason as above, I wonder how much value would the buttons for Active filter summary, Filter Data, and Transform Data add, since all of them are collapsable. I know @donyunardi also have thoughts on this. For example, if we have additional features to add in the future, the top will be crumbled.

It is easy to remove these sidebar buttons because they are a "feature" (unwanted feature 😛). However, removing the icons will still keep this blank space at the top. It will be slightly challenging (not impossible) to move the sidebar hide/collapse icon to another location because it comes straight out of bslib. It has some complex sass rules to make it behave the way it does and we will have to spend some time to investigate. Out of the box the bslib sidebar has that blank space at the top, I just wanted to make use of this blank space by adding these icons.

4. For the transform, other than looking at the transformed data in the output panel, would it be possible to let the users know whether they have applied or removed the transformer?

I don't understand the statement "whether they have applied or removed the transformer". The transformers are always applied.

[kumamiao]

I see, it would be interesting to see how it's like to leave it blank, my intuitive feeling is that it may be cleaner as I personally feel the buttons may not add much. Curious how others feel about this.

It is easy to remove these sidebar buttons because they are a "feature" (unwanted feature 😛). However, removing the icons will still keep this blank space at the top. It will be slightly challenging (not impossible) to move the sidebar hide/collapse icon to another location because it comes straight out of bslib. It has some complex sass rules to make it behave the way it does and we will have to spend some time to investigate.

My apologies I was not clear enough. I meant for the second transformer can we show the status of the transformer? Currently after clicking the button once or multiple times, there is not indication on the status - is the transformer applied, or is it removed? App user can only tell by looking at the data summary or the data itself.

I don't understand the statement "whether they have applied or removed the transformer". The transformers are always applied.

[vedhav]

Closing the PR. This will be split into different PRs