insightsengineering / insightsengineering/teal

[Feature request] [UI/UX] Redesign the module selection as a nested list of buttons.

Open
#1,551 0 comments 0 reactions 0 assignees View on GitHub
core enhancement
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")
)
)
```

Image

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")
)
)
```

Image

this span could have a class to change its look. I think it could be more visible

image

_Originally posted by @gogonzo in https://github.com/insightsengineering/teal/pull/1548#discussion_r2174841796_

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.