使用 plot.ly Dash 等待结果时显示加载符号答案

【问题标题】：Display loading symbol while waiting for a result with plot.ly Dash使用 plot.ly Dash 等待结果时显示加载符号
【发布时间】：2019-06-23 16:08:23
【问题描述】：

在我的基于Dash 的应用程序中，一个按钮会触发一个长时间运行的计算。在结果尚未出现时显示加载动画并让按钮处于非活动状态以便在计算完成之前不会再次单击它不是很好吗？

我正在使用 Bulma 进行 UI 设计，并希望为此目的使用 button is-loading CSS 类。

我的第一个想法是有两个回调：一个由按钮单击触发以将按钮设置为is-loading，另一个由输出更改触发以将其设置为正常。

@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"

显然这样不行：

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.

任何想法如何使这项工作？

【问题讨论】：

标签： python css user-interface dashboard plotly-dash

【解决方案1】：

上周我遇到了同样的问题，甚至尝试使用Javascript实现禁用按钮行为，但最终放弃了。我在plotly forums 上看到过这个讨论，显然需要这种类型的功能，但我认为在当前版本中不容易实现。

是可能的一件事，并且被 Dash 开发人员作为临时解决方案提到，那就是添加一个全局加载屏幕。简而言之，您需要在样式表中添加以下 CSS：

@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;
}

一些澄清：

_dash-loading-callback 选择器选择一个 div，该 div 会在每次回调时添加到 body 元素的末尾，并在完成时移除。
您可以通过为_dash-loading-callback 定义背景 GIF 来添加加载动画。
上述 CSS 中定义的动画旨在防止加载屏幕在短回调时闪烁。它设置为在一秒钟后淡入，因此它只会在长时间加载操作时出现。您当然可以使用这些设置。

【讨论】：

这似乎是一个有趣的解决方法 - 将尝试一下。
点击时禁用按钮很容易。当页面内容发生某些事情时，Dash 真的没有能力重新启用它吗？我也不明白为什么每个输出只能有一个回调。
我也没有完全理解其中的逻辑，但我相信这是有原因的。不过，您可以为单个输出设置两个输入，并且当其中任何一个发生更改时，都会调用该函数。在函数内部，您也许可以检查两个输入中的哪一个是触发器（我不确定如何，在这里讨论：github.com/plotly/dash/issues/291）。这将模拟两个不同的回调。
CSS 非常适合这个目的，所以我会接受你的回答。我有一种感觉，我需要解决 Dash 的原始问题，以便与 Bulma 等 CSS 框架很好地配合使用。您的评论可能包含答案。

【解决方案2】：

由于 dash-renderer==0.9.0，当您的应用等待回调时，会在您的布局中添加一个 div 标签。您可以按照 Chris 的建议在其中放入不同的 css：https://community.plot.ly/t/mega-dash-loading-states/5687

此外，还有一项新功能即将推出，可满足您的需求。目前为 alpha 版本：https://community.plot.ly/t/loading-states-api-and-a-loading-component-prerelease/16406

【讨论】：