在等待带有plot.ly Dash的结果时显示加载符号 [英] Display loading symbol while waiting for a result with plot.ly Dash

问题描述

在基于

我的第一个想法是有两个回调：一个是通过单击按钮将按钮设置为正在加载触发的，另一个是通过更改输出将其设置为正常状态而触发的。

  @ app.callback（
 Output（'enter-button'，'className'），
 [
 Input（'graph'，'figure'）
]，
）
 def set_trend_enter_button_loading（figure_changed）：
 return button is-large is-primary is概述 
 
 
 @ app.callback（
 Output（'enter-button'，'className'），
 [
 Input（'enter -button'，'n_clicks'）
]，
）
 def set_trend_enter_button_loading（n_clicks）：
返回按钮is-large is-primary is-outlineed is-loading 
  

显然不是这样：

  dash.exceptions.CantHaveMultipleOutputs：
您已经为ID为 enter-button和属性 className的输出
分配了一个回调。一个输出只能有
个回调函数。尝试将输入和
回调函数组合为一个函数。 
  

有什么想法可以做到这一点吗？

解决方案

上周我遇到了同样的问题，甚至尝试使用Javascript实现禁用的按钮行为，但最终放弃了。我已经看到在密谋论坛上讨论过此问题 ，并且显然需要这种类型的功能，但是我认为在当前版本中无法轻松实现。

虽然 是可能的，但Dash开发人员将其称为临时解决方案，这是添加了一个全局加载屏幕。简而言之，您需要在样式表中添加以下CSS：

  @keyframes fadein {
 0％{
不透明度：0; 
} 
 100％{
的不透明度：0.5； 
} 
} 
 
 ._dash-loading-callback {
 font-family：sans-serif; 
 padding-top：50像素； 
颜色：rgb（90，90，90）; 
 
 / *标语* / 
位置：固定； 
 top：0；剩余
：0； 
宽度：100％； 
身高：100％； 
 text-align：center; 
光标：进度； 
 
不透明度：0; 
 background-color：rgb（250，250，250）; 
 / *将动画延迟1s，以防止
闪烁并在0.5s内平滑过渡动画
 * / 
 -moz动画：淡入0.5s向前1s； / * Firefox * / 
 -webkit-animation：fadein 0.5s轻松实现1s转发； / * Safari和Chrome浏览器* / 
 -o动画：淡入0.5s轻松向前1s； / * Opera * / 
动画：淡入0.5s缓入1s向前； 
} 
  

一些说明：

• _dash-loading-callback 选择器选择一个div，该div每次进行回调时都会添加到body元素的末尾，


• 您可以通过为 _dash-loading-callback 定义背景GIF来添加加载动画。


• 以上CSS中定义的动画旨在防止加载的屏幕在短暂的回调时闪烁。它设置为在一秒后淡入，因此仅在长时间的加载操作中才会显示。您当然可以使用这些设置。

In my Dash-based application, a button triggers a long-running computation. Wouldn't it be nice to display a loading animation while the result is not yet there, and make the button inactive so it is not clicked again before the computation finishes?

I am using Bulma for UI design and wanted to use the button is-loading CSS class for that purpose.

My first idea was to have two callbacks: One triggered by the button click to set the button to is-loading, and one triggered by a change in the output to set it back to normal.

@app.callback(
    Output('enter-button', 'className'),
    [
        Input('graph', 'figure')
    ],
)
def set_trend_enter_button_loading(figure_changed):
    return "button is-large is-primary is-outlined"


@app.callback(
    Output('enter-button', 'className'),
    [
        Input('enter-button', 'n_clicks')
    ],
)
def set_trend_enter_button_loading(n_clicks):
    return "button is-large is-primary is-outlined is-loading"

Apparently it doesn't work that way:

dash.exceptions.CantHaveMultipleOutputs:
You have already assigned a callback to the output
with ID "enter-button" and property "className". An output can only have
a single callback function. Try combining your inputs and
callback functions together into one function.

Any ideas how to make this work?

解决方案

I had the same problem last week, and even tried to achieve the disabled button behavior using Javascript, but eventually gave up. I've seen seen this discussed on the plotly forums, and there is clearly a need for this type of functionality, but I don't think it can be achieved easily in the current version.

One thing that is possible though, and is mentioned as a temporary solution by the Dash developer, is adding a global loading screen. In short, you need to add the following CSS to your stylesheet:

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

._dash-loading-callback {
  font-family: sans-serif;
  padding-top: 50px;
  color: rgb(90, 90, 90);

  /* The banner */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: progress;

  opacity: 0;
  background-color: rgb(250, 250, 250);
  /* Delay animation by 1s to prevent flashing 
     and smoothly transition the animation over 0.5s 
   */
  -moz-animation: fadein 0.5s ease-in 1s forwards; /* Firefox */
  -webkit-animation: fadein 0.5s ease-in 1s forwards; /* Safari and Chrome */
  -o-animation: fadein 0.5s ease-in 1s forwards; /* Opera */
    animation: fadein 0.5s ease-in 1s forwards;
}

A few clarifications:

• The _dash-loading-callback selector selects a div which is added at the end of the body element each time a callback is made, and is removed when it is finished.
• You can add a loading animation by defining a background GIF for _dash-loading-callback.
• The animations defined in the above CSS are meant to prevent the loading screen from flickering upon short callbacks. It is set to fade in after one second, so it will only appear for long loading operations. You can of course play with these settings.

这篇关于在等待带有plot.ly Dash的结果时显示加载符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！