Как просмотреть интерактивную таблицу plotly dash в nbviewer или github?

#python #html #plotly #dashboard #plotly-dash

#python #HTML #plotly #Информационная панель #plotly-dash

Вопрос:

У меня есть код, который создает интерактивную таблицу с использованием dash — я делаю это в Juypterlab, и код отлично работает для просмотра и взаимодействия с таблицей в Juypterlab, но когда я загружаю блокнот ipynb на github и просматриваю блокнот в nbviewer, таблица больше не загружается, и я получаю сообщение об ошибке, котороеговорит Requests to the server have been blocked by an extension.

Если я попробую браузер firefox, я получу сообщение об ошибке, в котором говорится

 
An error occurred during a connection to 126.2.3.3:8054. SSL received a record that exceeded the maximum permissible length.

Error code: SSL_ERROR_RX_RECORD_TOO_LONG
 

Попытка с помощью браузеров Google chrom и brave также выдает аналогичные ошибки, говоря Requests to the server have been blocked by an extension.

У меня возникли проблемы с поиском параметра, которого мне не хватает, чтобы сделать таблицу доступной для просмотра — есть ли dash параметр, который мне не хватает? Нужно ли мне 8054 каким-то образом сделать порт доступным или это расширение в моем веб-браузере, вызывающее проблему?

Код, который у меня есть, который создает таблицу dash, выглядит следующим образом

 
plotly.offline.init_notebook_mode()

import dash
from dash.dependencies import Input, Output
import plotly.express as px
from jupyter_dash import JupyterDash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
app = JupyterDash(__name__)

X_interactive = data

app.layout = html.Div([
    dash_table.DataTable(
        id='datatable-interactivity',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True} for i in X_interactive.columns
        ],
        data=X_interactive.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=True,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 10,
    ),
    html.Div(id='datatable-interactivity-container')
])

@app.callback(
    Output('datatable-interactivity', 'style_data_conditional'),
    Input('datatable-interactivity', 'selected_columns')
)
def update_styles(selected_columns):
    return [{
        'if': { 'column_id': i },
        'background_color': '#D2F3FF'
    } for i in selected_columns]

@app.callback(
    Output('datatable-interactivity-container', "children"),
    Input('datatable-interactivity', "derived_virtual_data"),
    Input('datatable-interactivity', "derived_virtual_selected_rows"))
def update_graphs(rows, derived_virtual_selected_rows):

    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    dff = X_interactive if rows is None else pd.DataFrame(rows)

    colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
              for i in range(len(dff))]

    return [
        dcc.Graph(
            id=column,
            figure={
                "data": [
                    {
                        "x": dff["Gene"],
                        "y": dff[column],
                        "type": "bar",
                        "marker": {"color": colors},
                    }
                ],
                "layout": {
                    "xaxis": {"automargin": True},
                    "yaxis": {
                        "automargin": True,
                        "title": {"text": column}
                    },
                    "height": 250,
                    "margin": {"t": 10, "l": 10, "r": 10},
                },
            },
        )
        # check if column exists - user may have deleted it
        # If `column.deletable=False`, then you don't
        # need to do this check.
        for column in ["col1", "col2", "col3"] if column in dff
    ]

    
app.run_server(mode='inline', port=8054)
 

Комментарии:

1. Вы пробовали какие-либо другие браузеры?

2. Просто попробовал в Google Chrome, и он возвращается со 126.2.3.3 sent an invalid response. ссылкой на код, который я пытаюсь просмотреть в nbviewer, можно найти здесь: nbviewer.jupyter.org/github/hlnicholls/test/blob/main /…

3. mode='inline' требуется только при использовании JupyterDash. plotly.offline.init_notebook_mode() для встроенной визуализации здесь достаточно одного. Также переименуйте свой экземпляр dash app = dash.Dash(__name__)

4. Кроме того, когда я захожу в предоставленную записную книжку, в ней говорится, что источником для фрейма, в котором должен быть график, является 8062 , а не 8054

5. Спасибо вам за это, когда я удаляю mode=inline и просто имею app.run_server(port=8054) таблицу dash, она доступна для просмотра только на другой вкладке, а не в самой записной книжке. Первоначально я пытался добавить plotly.offline.init_notebook_mode() , чтобы помочь с просмотром записной книжки в Интернете — должен ли я просто придерживаться, mode='inline' если я хочу, чтобы таблица просматривалась в записной книжке? Также 8064 , возможно, я неправильно понимаю, как ее повторно использовать, но при повторном запуске локально порт становится занятым / выдает ошибку при использовании, поэтому я изменил номер для нового порта, чтобы я мог видеть таблицу.