From 3e0b592e424e6b33e68ff481dedb5782e57456e4 Mon Sep 17 00:00:00 2001 From: nickmelnikov82 Date: Thu, 27 Jan 2022 11:32:35 +0200 Subject: [PATCH 1/5] Start working on the responsive height of the Graph component --- .../src/fragments/Graph.react.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index 7cb415fd13..b018adffbc 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/components/dash-core-components/src/fragments/Graph.react.js @@ -374,6 +374,24 @@ class PlotlyGraph extends Component { }); } + getStyle() { + let {style, responsive} = this.props; + + if (!responsive) { + return style; + } + + if (!style) { + style = {}; + } + + if (!style.height) { + style.height = '100%'; + } + + return style; + } + componentDidMount() { this.plot(this.props); if (this.props.prependData) { @@ -447,7 +465,8 @@ class PlotlyGraph extends Component { } render() { - const {className, id, style, loading_state} = this.props; + const {className, id, loading_state} = this.props; + const style = this.getStyle(); return (
Date: Mon, 31 Jan 2022 10:22:33 +0200 Subject: [PATCH 2/5] Fixed linter issues. --- components/dash-core-components/src/fragments/Graph.react.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index b018adffbc..61a3a846a0 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/components/dash-core-components/src/fragments/Graph.react.js @@ -375,7 +375,8 @@ class PlotlyGraph extends Component { } getStyle() { - let {style, responsive} = this.props; + const {responsive} = this.props; + let {style} = this.props; if (!responsive) { return style; From 32ee46100ff3c2224e56b5dba49172825ed25dbd Mon Sep 17 00:00:00 2001 From: nickmelnikov82 Date: Mon, 31 Jan 2022 16:18:32 +0200 Subject: [PATCH 3/5] Added graph responsive test. --- .../graph/test_graph_responsive.py | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/components/dash-core-components/tests/integration/graph/test_graph_responsive.py b/components/dash-core-components/tests/integration/graph/test_graph_responsive.py index 2fadce33cb..09b14548ae 100644 --- a/components/dash-core-components/tests/integration/graph/test_graph_responsive.py +++ b/components/dash-core-components/tests/integration/graph/test_graph_responsive.py @@ -1,3 +1,5 @@ +import numpy as np +import plotly.graph_objects as go import pytest from dash import Dash, Input, Output, State, dcc, html @@ -134,3 +136,33 @@ def resize(n_clicks, style): ) assert dash_dcc.get_logs() == [] + + +def test_grrs002_responsive_parent_height(dash_dcc): + app = Dash(__name__, eager_loading=True) + + x, y = np.random.uniform(size=50), np.random.uniform(size=50) + + fig = go.Figure( + data=[go.Scattergl(x=x, y=y, mode="markers")], + layout=dict(margin=dict(l=0, r=0, t=0, b=0), height=600, width=600), + ) + + app.layout = html.Div( + dcc.Graph( + id="graph", + figure=fig, + responsive=True, + ), + style={"borderStyle": "solid", "height": 300, "width": 100}, + ) + + dash_dcc.start_server(app) + + wait.until( + lambda: dash_dcc.wait_for_element("#graph svg.main-svg").size.get("height", -1) + == 300, + 3, + ) + + assert dash_dcc.get_logs() == [] From 85b429acbdeb5a011027c89f536dcc464015418b Mon Sep 17 00:00:00 2001 From: nickmelnikov82 Date: Tue, 1 Feb 2022 10:41:40 +0200 Subject: [PATCH 4/5] Added comments. --- components/dash-core-components/src/fragments/Graph.react.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index 61a3a846a0..fcb886ecbe 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/components/dash-core-components/src/fragments/Graph.react.js @@ -378,10 +378,12 @@ class PlotlyGraph extends Component { const {responsive} = this.props; let {style} = this.props; + // When there is no forced responsive style, return the original style property if (!responsive) { return style; } + // Otherwise, if the height is not set, we make the graph size equal to the parent one if (!style) { style = {}; } From 017c71c3b76d0cb2dee83b24dde4679addd95c5d Mon Sep 17 00:00:00 2001 From: Nick Melnikov Date: Fri, 4 Mar 2022 12:02:51 +0100 Subject: [PATCH 5/5] The getStyle graph function must return a copy of the style. Co-authored-by: Alex Johnson --- components/dash-core-components/src/fragments/Graph.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index fcb886ecbe..0678e0c260 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/components/dash-core-components/src/fragments/Graph.react.js @@ -389,7 +389,7 @@ class PlotlyGraph extends Component { } if (!style.height) { - style.height = '100%'; + return Object.assign({height: '100%'}, style); } return style;