4

I have code that creates an interactive table using dash - I do this in Juypterlab and the code works just fine for me to view and interact with the table in Juypterlab, but when I upload the ipynb notebook to github and look at the notebook in nbviewer the table no longer loads and I get an error that says Requests to the server have been blocked by an extension.

If I try firefox browser I get an error that says


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

Trying with browers google chrom and brave also give similar errors saying Requests to the server have been blocked by an extension.

I'm having trouble finding the setting I'm missing to make the table viewable - is there a dash setting I'm missing? Do I need to make the 8054 port accessible somehow or is it an extension in my web browser causing the problem?

The code I have that makes the dash table looks like this


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)
DN1
  • 234
  • 1
  • 13
  • 38
  • Have you tried any other browsers? – AS11 Apr 13 '21 at 17:52
  • Just tried in google chrome and it comes back with ```126.2.3.3 sent an invalid response.``` A link to the code I am trying to view in nbviewer can be found here: https://nbviewer.jupyter.org/github/hlnicholls/test/blob/main/Interactive_SHAP.ipynb – DN1 Apr 13 '21 at 18:03
  • `mode='inline'` is required only while using JupyterDash. `plotly.offline.init_notebook_mode()` alone is sufficient for inline visualization here. Also rename your dash instance `app = dash.Dash(__name__)` – Rajesh Apr 13 '21 at 18:22
  • Also, when I am going to the notebook provided, it says that the source for the Frame where the graph should be is `8062` and not `8054` – AS11 Apr 13 '21 at 18:38
  • Thank you for this, when I remove ```mode=inline``` and just have ```app.run_server(port=8054)``` the dash table is only viewable in another tab and not the notebook itself. Originally I tried adding ```plotly.offline.init_notebook_mode()``` to help with viewing the notebook online - should I just be sticking with ```mode='inline'``` if I want the table to be viewed in the notebook? Also for the ```8064``` I may be misunderstanding how to re-use it but, when I re-run it locally the port becomes busy/gives a in-use error, so I've been changing the number for a new port so I can see the table. – DN1 Apr 13 '21 at 18:52
  • when I ran an app on that port and tried to view it through the notebook (which I assume should be good enough to try and reproduce the problem), I noticed when I went into the page source, (tapped with 2 fingers and clicked view page source), and changed the source from HTTPS to HTTP, it seemed to actually show the page source. I think this is the reasoning behind the SSL error since the localhost uses `http` and not `https`. – AS11 Apr 13 '21 at 19:20
  • https://stackoverflow.com/questions/64839987/how-to-add-a-ssl-certificate-to-a-dash-app somwthing like this may end up helping solve the issue, since you can add an SSL certificate to the dash app, so far, I haven't been able to find much for fixing it directly on nbviewer. – AS11 Apr 13 '21 at 19:59

0 Answers0