insightsengineering / insightsengineering/teal
[Feature request] [UI/UX] Redesign the module selection as a nested list of buttons.
- Dominant language
- R
- Stars
- 263
- Forks
- 59
- Avg merge
- 5d 17h
- Merged PRs (30d)
- 5
Description
Currently, we display the module selection buttons inside a dropdown menu with just the labels of the module groups above them, in case of nested modules we concatenate the labels of all parents to showcase the label information. However, a better way to display this would be to showcase the module selection buttons as a nested tree structure that looks something like this for the following two examples:
Example one: modules code
```r
modules <- modules(
example_module("One"),
example_module("Two"),
example_module("Two"),
teal.modules.general::tm_variable_browser("Variable Browser"),
modules(
label = "Nest level 1",
example_module("Two"),
example_module("Double Nested module"),
modules(
label = "Nest level 2",
example_module("Inception two"),
modules(
label = "Nest level 3",
example_module("Double Inception")
)
)
),
modules(
label = "Nested",
example_module("Nested one"),
example_module("Nested two")
)
)
```
Example two: modules code
```r
modules <- modules(
example_module("Study Information"),
example_module("Data Table"),
example_module("Variable Browser"),
example_module("Demographic Table"),
modules(
label = "Disposition",
example_module("Study Disposition"),
example_module("Treatment Disposition")
),
modules(
label = "Exposure",
example_module("Study Treatment Exposure")
),
modules(
label = "Adverse Events",
example_module("AE Overview"),
example_module("AE by Term"),
example_module("AE by Term/Grade"),
example_module("AE by Grade"),
example_module("Adverse Events by SMQ"),
example_module("AE Overview Plot"),
example_module("Common AE Plot"),
example_module("Butterfly Plot"),
example_module("AE by Action Taken")
),
modules(
label = "Patient Profiles",
example_module("Swimlane Plot"),
example_module("AE Patient Profiles"),
example_module("Lab Values")
),
modules(
label = "Tumor Response",
example_module("Response Table"),
example_module("Time to Response"),
example_module("Clinical Benefit"),
example_module("Percent Change in SLD (Spider Plot)"),
example_module("Best Percent Change in SLD (Waterfall Plot)"),
example_module("Duration of Response (Swimlane Plot)")
),
modules(
label = "Time To Event",
example_module("Time To Event Table"),
example_module("Kaplan Meier Plot")
),
modules(
label = "Lab Results",
example_module("Lab Abnormality")
),
modules(
label = "Concomitant Medications",
example_module("Concomitant Medications by PT")
)
)
```
this span could have a class to change its look. I think it could be more visible
_Originally posted by @gogonzo in https://github.com/insightsengineering/teal/pull/1548#discussion_r2174841796_
Contributor guide
Research direction
Start by locating the current module-selection dropdown and the code that renders nested module labels and buttons. Compare its behavior with the two nested-module examples and the attached UI references; done means the selection is presented as a visible nested tree while preserving module selection behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100