[Feature Request]: Allow `teal` to start with the filter panel collapsed

[chlebowa]

Blocked by https://github.com/insightsengineering/teal/issues/669

Feature description

The filter panel can be toggled but is always displayed on app start. Please allow for the application to start with the filter panel collapsed.

Current start screen:

Desired start screen:

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.

Contribution Guidelines

• [X] I agree to follow this project's Contribution Guidelines.

Security Policy

• [X] I agree to follow this project's Security Policy.

[donyunardi]

We could add optional argument to teal_slices() to hide the filter panel when app runs.

[chlebowa]

Sounds good. Bear in mind, if initial expanding/collapsing the filter panel were decided by an attribute of the teal_slices object passed to init, it would be carried over with snapshots and bookmarks, which means the collapse state of the filter panel is not bookmarkable unless handled specifically.

[gogonzo]

Arbitral javascript doesn't help?

Theoretically calling hideSidebar() in js should do the trick.

We could add optional argument to teal_slices() to hide the filter panel when app runs.

Sidebar in which filter-panel is included shouldn't be controlled by filter panel. If we add more items to this sidebar then it would be weird if teal_slices have a control over sidebar. Should be either hidden by default or shown by default.

[chlebowa]

Arbitral javascript doesn't help?

Theoretically calling hideSidebar() in js should do the trick.

Oddly, hideSidebar alone does not, more code is needed. Maybe it's a peculiarity of the context.

Sidebar in which filter-panel is included shouldn't be controlled by filter panel. If we add more items to this sidebar then it would be weird if teal_slices have a control over sidebar. Should be either hidden by default or shown by default.

How about teal::teal_slices?

[gogonzo]

How about teal::teal_slices

No, we are planning to include more items to the sidebar. teal_slices can't control visibility of the sidebar where teal_transform_module will be included.

Oddly, hideSidebar alone does not, more code is needed

How did you provide js code to the app?

I suspect this could be a problem of an initialization order. "sidebar" is created in a reactive context (insertUI) so any js call on init won't help. I guess https://github.com/insightsengineering/teal/issues/669 would solve the root of problem. Question is how can you provide jscode to the app?

[chlebowa]

I suspect this could be a problem of an initialization order. "sidebar" is created in a reactive context (insertUI) so any js call on init won't help. I guess #669 would solve the root of problem.

I was afraid of that.

How did you provide js code to the app?

data <- teal_data() |> within({
  iris <- iris
  mtcars <- mtcars
})
modules <- example_module()

app <- init(data, modules, header = tags$script('hideSidebar()'))

runApp(app)

This didn't do the job. I tried with ui_teal_with_splash as well but that didn't work either.

The working code is injected straight into module_teal, using very poor practices.

[chlebowa]

Just to be clear, this will not be done before #669, sorrect?

[chlebowa]

Update: I was able to solve the issue in my very specific use case of running a teal app embedded but it cannot be generalized to a standalone app.

[chlebowa]

Update: this script will hide the filter panel on start of a normal, standalone teal app:

const observer = new MutationObserver(function() {
  if (document.getElementsByClassName("teal_secondary_col").length) {
    toggleFilterPanel();
    observer.disconnect();
  }
});

observer.observe(
  document,
  {
    subtree: true,
    childList: true
  }
);