appsilon / shiny.emptystate Goto Github PK

Description: We want to provide use cases of the package, examples that come to mind:

1. Filtering a table that returns 0 rows
2. A plot that doesn't show any data due to the underlying data being filtered and having 0 rows
3. Nothing appearing on the screen until a user uploads a file

Task Description:

• Increase the test coverage in shiny.emptystate package.

Acceptance Criteria:

• New unit tests added to open source package (accepted pull request or multiple pull requests)
• Test coverage increased

Description: Create a package skeleton using devtools::create for example.

When showing empty state content, the user might be resizing the window. Whenever the window resizes we need to update the empty state container so that it overlays the widget it is supposed to replace.

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

0.0.0.9002

Platform and OS Version

Windows

Existing Issues

No response

What happened?

Placeholder doesn't follow the component it's supposed to cover when programatically changing it's location.

Steps to reproduce

1. Click Toggle panel button

Expected behavior

When #container1 is hidden #container2 slides into its place with a placeholder instead of sliding from underneath the placeholder.

Attachments

library(shiny)
library(shiny.emptystate)
library(bslib)

ui <- page(
  theme = bs_theme(version = 5),
  use_empty_state(),
  tags$button(
    "Toggle panel",
    class = "btn btn-primary",
    onClick = "$('#container1').toggle(anim = 'slide');"
  ),
  div(
    style = "width: 300px",
    class = "d-flex flex-column gap-5",
    div(
      id = "container1",
      div(
        h1("Card 1"),
        "Card content"
      )
    ),
    div(
      id = "container2",
      div(
        h1("Card 2"),
        "Card content"
      )
    )
  )
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is example empty state content"
  )
  empty_state_manager <- EmptyStateManager$new(
    id = "container2",
    html_content = empty_state_content
  )
  empty_state_manager$show()
}

shinyApp(ui, server)

Screenshots or Videos

Additional Information

No response

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

0.0.0.9000

Platform and OS Version

macOS M2 13.0.1

Existing Issues

No response

What happened?

While running the example in the main readme and clicking the Show empty state! multiple times the Hide empty state! does not work until the number of clicks exceeds the # of clicks made on the Show empty state!

Steps to reproduce

1. Run the example shiny app from the Readme
2. Click Show empty state! 2 or more times
3. Now that the empty state is shown, Click the Hide empty state! to try to hide it.
4. The empty state is not hidden until you click the Hide empty state! multiple times

Expected behavior

Every call of the show() method should show the empty state UI and every call of the hide() method should hide the empty state UI

Attachments

No response

Screenshots or Videos

No response

Additional Information

No response

Write a draft of a blogpost about the release of the package. It should include a general overview and some examples of usage. It does not need to be long but needs to be in a state where marketing can use it.

Description

Users of the package gave feedback that the mechanism works but they are missing a set of defaults components.

Having a set of default components would make it easier to start using the package.

One idea is to provide a helper function that will create an empty state component composed of an icon and text.

The icons can be provided by bsicons or fontawesome.

A good analogy is how value boxes work in bslib

Examples

Acceptance Criteria

• Package users are able to easily add an empty state component - they just need to provide text and an icon
• There are examples included in the package documentation (e.g. in README, an example app in examples or in the pkgdown site)
• (Optional) Users are able to use different layouts for their empty state components e.g. text below icon or text on the right of the icon (like in the jira example below)

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

1.0

Platform and OS Version

Tested in Windows and Google Chrome

Existing Issues

No response

What happened?

I wanted to use a modal when the empty state content is shown

Steps to reproduce

1. Run the following app. Try showing the modal with and without the empty state shown.

library(shiny)
library(shiny.emptystate)

ui <- fluidPage(
  use_empty_state(),
  actionButton("show", "Show empty state!"),
  actionButton("hide", "Hide empty state!"),
  actionButton("modal", "Show modal"),
  tableOutput("my_table")
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is  example empty state content"
  )
  
  empty_state_manager <- EmptyStateManager$new(
    id = "my_table",
    html_content = empty_state_content
  )
  
  observeEvent(input$show, empty_state_manager$show())
  
  observeEvent(input$hide, empty_state_manager$hide())
  
  observeEvent(input$modal, {
    showModal(modalDialog(title = "Hello from modal"))
  })
  
  output$my_table <- renderTable(mtcars)
}

shinyApp(ui, server)

Expected behavior

The modal shoul be over the empty state content

Attachments

No response

Screenshots or Videos

No response

Additional Information

It seems to be that the problem is here:

But I don't know what would be the best solution for it 🤔

Description

As part of an effort to provide users with default components, we want to provide a tutorial on how to use a custom illustration in empty state components.

Examples of services that offer illustrations are https://www.drawkit.com/ and https://undraw.co/illustrations.

Important: Check license details of those services e.g. undraw does not permit redistributing their illustrations, so we can only describe how to use them, not include copies of them within the package.

Acceptance Criteria

• Tutorial on how to use a custom illustration with shiny.emptystate is included in the package (e.g. as a vignette)

Description: We want to make convenient for R/Shiny developers to show an empty state component without worrying about additional styling. For example if users are filtering a table and it returns 0 rows we want to show a placeholder:

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

0.0.0.9000

Platform and OS Version

Windows 10

Existing Issues

No response

What happened?

When using the example app from the Readme with the EmptyStateManager, it seems that the state is not a binary state but an integer state. That means, that if I click three times on "Show empty state!", I need to click four times on "Hide empty state!".

Steps to reproduce

Use the app:

library(shiny)
library(shiny.emptystate)
library(reactable)

ui <- fluidPage(
  use_empty_state(),
  actionButton("show", "Show empty state!"),
  actionButton("hide", "Hide empty state!"),
  reactableOutput("my_table")
)

server <- function(input, output, session) {
  empty_state_content <- div(
    "This is  example empty state content"
  )
  
  empty_state_manager <- EmptyStateManager$new(
    id = "my_table",
    html_content = empty_state_content
  )
  
  observeEvent(input$show, {
    empty_state_manager$show()
  })
  
  observeEvent(input$hide, {
    empty_state_manager$hide()
  })
  
  output$my_table <- reactable::renderReactable({
    reactable(iris)
  })
}

shinyApp(ui, server)

Click a couple of times on "Show empty state!" and now try to hide the empty state again.

Expected behavior

When clicking Hide Empty State I expect to hide the empty state regardless of how many times I have clicked on "Show Empty State"

Attachments

No response

Screenshots or Videos

No response

Additional Information

No response

Description: We want to provide an initial set of empty state components so users have a variety to choose from :)

Something similar to what shinycustomloader offers:

Fill in missing parts of the functions/classes/methods documentation

• add descriptions
• add returned values
• add examples

Build the documentation with roxygen2.

Guidelines

• I agree to follow this project's Contributing Guidelines.

Description

Add a "condition" argument to empty_state_manager (potentially) to allow for adding a javascript condition that will show or hide the empty state.

Problem

There is not a standard way I've seen to currently have a spinner or loading screen connected to a loading screen unless a conditionalPanel is used with javascript in the condition. While other spinner packages exist, it is difficult to customize this without using a conditionalPanel or being forced to use limited spinner options. In particular, I'd like to use the shiny.fluent Spinner() while my dataset loads but I can't attach this to the "shiny-busy" class within the javascript.

Proposed Solution

Add a condition argument to allow for users to show/hide the empty state based on javascript elements (in particular, shiny-busy). Similar to "condition" of conditionalPanel.

Alternatives Considered

I've tried using a conditionalPanel in a fluidPage in a module and then add this to my main fluentPage similar to the dashboard tutorial on the shiny.fluent side, but there seems to be a disconnect when trying to mix these UI states. I also thought about using a counter value in a reactiveValues and watching for the counter to increase (change) which would occur once the dataset is pulled into the reactiveValues variable but it feels like this is a more crude work around to actually monitoring whether shiny is busy.