Plotly.js: [Graph] - should handle the case where the showing area is significantly small

[byronz]

I got an error in the console when trying to increase the size of chrome dev tools

[byronz]

code to reproduce with 1.2.0

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(50, 50))

app = dash.Dash(__name__)


figure = {
    "data": [
        {"x": df.columns, "y": df.index, "z": df.values, "type": "heatmap"}
    ],
    "layout": {"xaxis": {"scaleanchor": "y"}},
}

app.layout = html.Div(
    style={
        "backgroundColor": "red",
        "height": "100vmin",
        "width": "100vmin",
        "overflow": "hidden",
        "position": "relative",
    },
    children=[
        dcc.Loading(
            children=[
                dcc.Graph(
                    id="graph",
                    figure=figure,
                    style={
                        "position": "absolute",
                        "top": 0,
                        "left": 0,
                        "backgroundColor": "blue",
                        "width": "100%",
                        "height": "100%",
                        "overflow": "hidden",
                    },
                )
            ]
        )
    ],
)


@app.callback(Output("graph", "figure"), [Input("graph", "relayoutData")])
def selected_df_figure(selection):
    figure["data"][0]["x"] = df.columns
    figure["data"][0]["y"] = df.index
    figure["data"][0]["z"] = df.values
    return figure


if __name__ == "__main__":
    app.run_server(debug=True)

[alexcjohnson]

@etpinard @antoinerg this has come up before... can you think of a reasonable way to deal with this kind of undersize condition at the plotly.js level? That seems preferable to trying to handle it on the dash side.

[etpinard]

this has come up before... can you think of a reasonable way to deal with this kind of undersize condition at the plotly.js level?

We could instead of throwing :baseball:

https://github.com/plotly/plotly.js/blob/37e80cbc10ef8bf93b4dee1c1e7de043745da676/src/plots/cartesian/set_convert.js#L485-L488

Lib.warn something and "skip" rendering past that point.

[alexcjohnson]

Possibly... but I feel like we had a discussion at some point about catching this kind of situation much earlier in the process. The issue I believe is that the sum of top and bottom margins is more than the height (or similar l+r>w) - could we detect an all-margin situation before attempting to draw anything, and just display an empty graph?

[alexcjohnson]

Transferred to plotly.js, as it looks like we'll try to fix it here.

[etpinard]

cc https://github.com/plotly/plotly.js/issues/2704 - it might play nicely into an updated auto-margin pipeline.

[Sabarish-Vasudevan]

Has this issue been fixed?

[sebastian-raubach]

Any update on this?

[archmoj]

Is this still happening if you use v1.58.0?