Noticeable Lag in Expandable Sparkline Functionality in Value Box

[dsen6644]

When running this sample apple, there is a noticeable one second lag with the sparkline plot when expanding and minimizing the value box. I.e it takes a second for the axis to render when expanding, and axes are shown briefly when minimized.

Is there a way to make this smoother, or a hack where we throttle the expansion/compression of the window until the plot is rendered?

[gadenbuie]

Thanks @dsen6644! Here's a link to the running app for the curious: https://bslib.shinyapps.io/value_box/

The small delay when entering and exiting full screen mode due is mostly likely due to the fact that the example uses getCurrentOutputInfo() (which requires a round trip to the server) and a change in the size may trigger a full re-rendering of the plot.

There are a few other approaches you can consider using, but the fastest would be to use client-side JavaScript to enable the x-axis text. The Expandable Sparklines section in the Value Boxes article currently uses this incantation:

  # (plotly plot code) |>
  htmlwidgets::onRender(
    "function(el) {
      var ro = new ResizeObserver(function() {
         var visible = el.offsetHeight > 200;
         Plotly.relayout(el, {'xaxis.visible': visible});
      });
      ro.observe(el);
    }"
  )

I've just submitted a PR to use a simpler interface that didn't exist when that example was created. Cards and value boxes emit a bslib.card event when they enter and exit full screen mode. You can watch that event and use the event.detail.fullScreen property to know whether the card is now in full screen mode. This version looks like:

  # (plotly plot code) |>
  htmlwidgets::onRender(
    "function(el) {
      el.closest('.bslib-value-box')
        .addEventListener('bslib.card', function(ev) {
          Plotly.relayout(el, {'xaxis.visible': ev.detail.fullScreen});
        })
    }"
  )

[dsen6644]

Works perfectly! Thanks.

[github-actions[bot]]

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue. :raising_hand: Need help? Connect with us on Discord or Posit Community.