Table of Contents within a Page

[dionnecargy]

Motivation

I am trying to recapitulate the "On this page" table of contents found on the Fluent UI website in my shiny app that uses the shiny.fluent R package.

Feature description

This feature would work by listing the main headers (h1) and subheaders (h2, h3) on the page in one space so the user can click on them and be directed to that spot on the page.

When I try applying similar logic outlined in the Nav() function in the shiny.fluent R package, I get a table of contents that is not exactly desired but does an “ok" job (shown below):

Implementation ideas

Below is an example code for the first list in the TOC in the ui.R:

 div(
          id = "tutorial/intro", 
          Stack(
            tokens = list(childrenGap = 10),
            Separator(Text(variant = "xxLarge", "1. Introduction"), alignContent = "start"),
            Text(variant = "medium", HTML("This web application was designed fit-for-purpose to process raw serology data."))
          )
        ),

Below is the entire TOC that I am currently using with it's sub-optimal layout:

div(
        class = "nav-panel",
        style = "border-left: 1px solid #ccc; padding-left: 10px; position: sticky; top: 0; height: 100vh;",
        Text(variant = "large", "Contents"),
        Nav(
          groups = list(
            list(
              links = list(
                list(name = "1. Introduction", url = "#tutorial/intro", key = "intro"),
                list(
                  name = "2. Raw Data Requirements",
                  url = "#tutorial/rawdata", 
                  key = "raw0",
                  expandAriaLabel = "Expand Home section",
                  collapseAriaLabel = "Collapse Home section",
                  links = list(
                    list(name = "2.1. Antigen Label", url = "#tutorial/rawdata/antigens", key = "raw1"),
                    list(name = "2.2. Plate Layout", url = "#tutorial/rawdata/plate", key = "raw2"),
                    list(name = "2.3. Raw Data Types", url = "#tutorial/rawdata/platform", key = "raw3")
                  ),
                  isExpanded = TRUE
                ),
                list(
                  name = "3. Navigating the App",
                  url = "#tutorial/app_nav", 
                  key = "app_nav0"
                ),
                list(
                  name = "4. Importing Your Data",
                  url = "#tutorial/import_data/main", 
                  key = "import0",
                  expandAriaLabel = "Expand Home section",
                  collapseAriaLabel = "Collapse Home section",
                  links = list(
                    list(name = "4.1. Import Data", url = "#tutorial/import_data/import", key = "import1"),
                    list(name = "4.2. Check Data Is Loaded", url = "#tutorial/import_data/check", key = "import2")
                  ),
                  isExpanded = TRUE
                ),
                list(
                  name = "5. Quality Control",
                  url = "#tutorial/quality_control", 
                  key = "qc0",
                  expandAriaLabel = "Expand Home section",
                  collapseAriaLabel = "Collapse Home section",
                  links = list(
                    list(name = "5.1. Quality Control Report", url = "#tutorial/quality_control/location", key = "qc1"),
                    list(name = "5.1. Quality Control Check", url = "#tutorial/quality_control/check", key = "qc2"),
                    list(name = "5.2. Downloading Processed Data", url = "#tutorial/quality_control/download", key = "qc3")
                  ),
                  isExpanded = TRUE
                ),
                list(
                  name = "6. Classifying Your Samples",
                  url = "#tutorial/classify", 
                  key = "classify0",
                  links = list(
                    list(name = "6.1. Select Algorithm", url = "#tutorial/classify/select", key = "classify1"),
                    list(name = "6.2. Perform Classification", url = "#tutorial/classify/perform", key = "classify2"),
                    list(name = "6.3. Check Classified Results", url = "#tutorial/classify/results", key = "classify3"),
                    list(name = "6.4. Download Classified Data", url = "#tutorial/classify/download", key = "classify4")
                  ),
                  isExpanded = TRUE
                ),
                list(
                  name = "7. Data Visualisation",
                  url = "#tutorial/data_vis", 
                  key = "data_vis0"
                ),
                list(
                  name = "8. Output From This Tutorial",
                  url = "#tutorial/output_tutorial",
                  key = "output_tute"
                )
              )
            )
          )
        )

Impact

This feature would be used extensively within the application for keeping track of different components and would be invaluable.

Comments

No response