Отображать символ загрузки во время ожидания результата с plot.ly Dash - PullRequest
Новая
       41

Отображать символ загрузки во время ожидания результата с plot.ly Dash

0 голосов
/ 30 января 2019

В моем приложении на основе Dash кнопка запускает длительные вычисления.Разве не было бы неплохо отобразить анимацию загрузки, пока результата еще нет, и сделать кнопку неактивной, чтобы она не нажималась снова до завершения вычислений?

Я использую Bulma для дизайна пользовательского интерфейса и хотел использовать класс CSS button is-loading для этой цели.

enter image description here

Моя первая идея состояла в том, чтобы иметь два обратных вызова: один, запускаемый нажатием кнопки, чтобы установить кнопку на 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.

Есть идеи, как сделать эту работу?

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Поскольку dash-renderer == 0.9.0, тег div добавляется в ваш макет, когда ваше приложение ожидает обратного вызова.Вы можете добавить в него другой CSS, как предложено Крисом: https://community.plot.ly/t/mega-dash-loading-states/5687

Также появляется новая функция, которая соответствует вашим потребностям.В настоящее время альфа-версия: https://community.plot.ly/t/loading-states-api-and-a-loading-component-prerelease/16406

0 голосов
/ 30 января 2019

У меня была та же проблема на прошлой неделе, и я даже пытался добиться поведения отключенной кнопки с помощью Javascript, но в конце концов сдался.Я видел, как это обсуждалось на сюжетных форумах , и явно существует потребность в этом типе функциональности, но я не думаю, что это может быть легко достигнуто в текущей версии.

Единственное, что возможно , хотя и упоминается как временное решение разработчиком 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, который добавляется в концеэлемента body каждый раз, когда выполняется обратный вызов, и удаляется после его завершения.
  • Вы можете добавить анимацию загрузки, задав фоновый GIF для _dash-loading-callback.
  • Определенные анимациив вышеприведенном CSS предназначены для предотвращения мерцания экрана загрузки при коротких обратных вызовах.Он настроен на постепенное исчезновение через одну секунду, поэтому он будет отображаться только для длительных операций загрузки.Конечно, вы можете играть с этими настройками.
...