dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706

Marc-Andre-Rivet · 2019-11-21T18:30:37Z

Fixes #605

Context
(1) Graph resize
Plotly.js provides graph resize on window.resize event but does not provide graph resize on parent element resize. This is consistent with other similar libraries.

Graph resize is affected by many props on the graph figure and config, namely:

figure.layout.autosize, figure.layout.height, figure.layout.width
config.responsive

The overall behavior is complex and can be summarized by these checks:
https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test_graph_responsive.py#L101
https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test_graph_responsive.py#L107

(2) Extendable figure/config processing in wrapped component
In certain use cases, the dcc.Graph is wrapped inside another component and provides a service rather than being the desired component itself. In these situations the wrapper component may want to override the graph's figure/config processing with logic of its own.

(3) Graph resizing / loading / asyncing... not ready in general
In certain use cases, the application requires the dcc.Graph to be fully loaded, renderered, and resized before some other operation is made (e.g. QA / testing).

Proposed Changes

Extend the resize behavior of the Plotly.js graph in Dash so as to apply it on parent resize that is not triggered by a window.resize event
Allow users of Dash to override the behavior of the graph by passing a new prop responsive that will override the graph responsiveness. responsive allows 3 values: True, False, 'auto' (default) that will (True) force the graph to be responsive, (False) force the graph to be non-responsive, ('auto') use the graph's default behavior and make the graph responsive on parent resize if applicable
Add two function props: _dashprivate_transformFigure and _dashprivate_transformConfig that will override default processing of figure and config (https://github.com/plotly/dash-core-components/blob/605-graph-resize/src/fragments/Graph.react.js#L142)
The graph will re-evaluate the figure/config when _dashprivate_transformFigure or _dashprivate_transformConfig is updated (e.g. generate a new function when the params change)
The component is responsible for making sure that the functions at 3 and 4 respect the immutability of figure and config. These values should be cloned and the modified clone returned by the function.
Expose the graph's state by adding/removing a dash-graph--pending class to the wrapper div of the component

** Changed unrelated to responsiveness **

While updating the Plotly.js version, used the opportunity to clean up the build process in regardsto the plotly.min.js dependency

Side-effects

The addition of the resize observer div requires the graph div to be wrapped up with the resize observer div inside of another div for styling reasons. To preserve backward compatibility with previous selectors, the wrapper div will in addition of having the class dash-graph, have js-plotly-plot, the class added by Plotly.js on graph divs.

Dependencies and other considerations

Requires Plots.resize: promises should always be resolved plotly.js#4392 to be released
It was discussed and decided outside the scope of this PR discussion that graph resizing on parent element resize should not be handled by Plotly.js -- related historical items Plotly Not Responsive When Parent Size Changes plotly.js#3984, add support for responsive charts plotly.js#2974
Testing for this feature is done by testing all combinations of (responsive, autoresize, height/width, dash responsive override) and making sure that the initial and resized graph have the expected size
The solution must work in IE11

Todo

Unify graph state for (1) async, (2) 1st render, (3) resize -- for example dash-graph-pending flag / class -- need to validate the class gets added prior to the resize starting, there might be a need for deferring resize inside a setTimeout(..., 0)
IE11 support? Seems to be 👌, changing flex into hard-coded heights and percentages, the graphs are responsive and all.
docs (https://github.com/plotly/dash-docs/issues/720) -- tagged for v1.8 also

Use variation of https://github.com/plotly/dash-core-components/blob/605-graph-resize/tests/integration/graph/test_graph_responsive.py#L23 to manually test scenarios.

…ents into 605-graph-resize

Marc-Andre-Rivet · 2019-11-21T21:05:10Z

src/components/Graph.react.js

+     * responsive (True) or not (False) based on the values in `config.responsive`,
+     * `figure.layout.autosize`, `figure.layout.height`, `figure.layout.width`.
+     */
+    responsive: PropTypes.oneOf([true, false, 'auto']),


Allow users to define the behavior they want for their graph, allowing them to override the normal behavior for their config/figure values.

Marc-Andre-Rivet · 2019-11-21T21:05:30Z

src/components/Graph.react.js

@@ -491,6 +505,7 @@ PlotlyGraph.defaultProps = {
        layout: {},
        frames: [],
    },
+    responsive: false,


Defaults to responsive False which is the current behavior.

Marc-Andre-Rivet · 2019-11-21T21:06:26Z

src/fragments/Graph.react.js

+const DEFAULT_CONFIG = {
+    responsive: true,
+};
+


When responsive is true, whether through true or auto, will apply these values to config/figure to get the desired behavior.

Marc-Andre-Rivet · 2019-11-21T21:08:22Z

src/fragments/Graph.react.js

+
+        if (type(responsive) === 'Boolean') {
+            return responsive;
+        }


If responsive is a boolean, use as-is. Otherwise, determined auto responsiveness by looking at config/figure for the graph.

Marc-Andre-Rivet · 2019-11-21T21:10:29Z

src/fragments/Graph.react.js

+                    refreshOptions={{trailing: true}}
+                    refreshRate={50}
+                    onResize={this.graphResize}
+                />


element resize observer - either uses ResizeObserver in newer browsers, or polyfills with a DOM/css method if it doesn't. Debounce / trail / wait to prevent making useless calls.

Marc-Andre-Rivet · 2019-11-21T21:12:04Z

src/fragments/Graph.react.js

                data-dash-is-loading={
                    (loading_state && loading_state.is_loading) || undefined
                }
                style={style}
-                className={className}
-            />
+            >


The graph is now wrapped in a div that applies the styling -- the graph div itself has consistent styling. This appears to help responsiveness to work correctly in flex flows.

Need to make sure this is truly useful, not development side-effects.

I'm still concerned about adding js-plotly-plot to the outer div - seems like having two nested divs with this class could lead to strange behavior, if it's actually getting used for something in CSS. Can you explain the reasoning here?

Understandable. My goal here is for old versions of DDK to continue having the same behavior. Given the way DDK styling works and the stated goal of minimizing custom CSS, this should be fine. To break this behavior would require users to assign display: flex; to js-plotly-plot. The next DDK release will be using .dash-graph.

For the DCC world, this is probably a non-issue, the general idea is that we support classes & attributes with the dash- prefix, everything else is implementation details.

If we don't add js-plotly-plot, dash>=1.8.0 will be a breaking version.
If we do add it, we can always create an issue to remove it and tag that issue as Dash v2.x.

As pointed out by @alexcjohnson, in the end the legacy
js-plotly-plot is not necessary as old ddk uses the forked version of the graph anyway.

Discussing this with @wbrgss, it seems like the only scenario left is a new version of DDK pointing to an old version of Dash, but that can be handled through CSS with *:not(.dash-graph) > .js-plotly-js in DDK itself.

nicolaskruchten · 2019-11-25T20:06:27Z

I would recommend adding px.defaults.height = None to the testing sandbox to see if it makes certain things unnecessary. I'm open to the idea that PX is too opinionated about height if it's causing issues :) It certainly seems to fix the flash-of-too-tall-chart and the charts-are-too-tall-on-callback things.

src/fragments/Graph.react.js

- add className to fallback impl

- shared div key between the fallback and real graph

…ents into 605-graph-resize

Marc-Andre-Rivet · 2019-12-13T21:46:31Z

Apart from waiting for the release from Plotly.js, the last remaining contention point might be the use of js-plotly-plot on the wrapper class for legacy purposes. Created https://github.com/plotly/dash-docs/issues/728 to update the documentation with information on the basic assumptions used when coding against classes in Dash.

- rework plotly.min.js inclusion and update logic

Marc-Andre-Rivet · 2019-12-16T16:52:56Z

.gitignore

@@ -17,6 +17,7 @@ venv/

 /build
 /dash_core_components
+/dash_core_components_base/plotly.min.js


Cleaned up generation a bit to copy file directly from node_modules instead of keeping a to-be-synced copy in the py generation base folder

Marc-Andre-Rivet · 2019-12-16T16:53:14Z

CHANGELOG.md

+### Updated
+- [#706](https://github.com/plotly/dash-core-components/pull/706)
+  - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)
+


Plotly.js 1.51.3 with the promise fix 🎉

Marc-Andre-Rivet · 2019-12-16T16:53:39Z

CONTRIBUTING.md

-2. Run `npm install` followed by `npm run build`, this will ensure the latest version of Plotly.js is in `node_modules` and copy
-that version over with the other build artifacts
-3. Update `dash_core_components_base/__init__.py` plotly.js `relative_package_path` and `external_url`
+2. Run `npm install` followed by `npm run build`, the Plotly.js artifact will be copied and bundled over as required


Plotly.js artifact is now always plotly.min.js, no need for weird updates

src/components/Graph.react.js

alexcjohnson

Looks clean clean clean 😉
Nice build simplifications, thanks!
💃

alexcjohnson · 2020-02-11T14:58:10Z

src/components/Graph.react.js

+    );
+});
+
+ControlledPlotlyGraph.propTypes = PropTypes.any;


@Marc-Andre-Rivet I'm seeing a funny warning message in debug mode:

The prop `isRequired` is marked as required in `<<anonymous>>`, but its value is `undefined`

That I think is coming from here... Should this just be a copy of PlotlyGraph.propTypes perhaps?

bcliang · 2020-06-28T20:56:25Z

@Marc-Andre-Rivet -- Apologies for the thread dig.

Re: the side-effect of this PR... it also breaks the ability for end users to modify the contained plotly figure using clientside callbacks. Why? Client-side "UI" changes are much faster and provides a better user experience for things like changing axis on ranges, updating titles, etc.

Specifically, I've been using a this approach to trigger relayout via Plotly.relayout('graph-id', {..'layout-property':'value'; ..}.

This problem is resolved by shifting the component's id and key assignment into the nested div (i.e. the direct parent of <div class="plot-container plotly">). I created a simple integration test to check clientside callbacks in my fork (https://github.com/bcliang/dash-core-components/tree/fix-plotly-clientside-callbacks) which seems to work as expected.

However, running the full test suite, I get some flaky results (only passes on first run) due to parameterized eager_loading. Not sure if you have any thoughts.

Marc-André Rivet and others added 11 commits November 20, 2019 16:47

wip - responsive graph

6a4a2b3

render and layout strategies

d721038

unified render, overrideable responsive behavior

6361f5b

cleanup

a02a986

Merge branch 'dev' into 605-graph-resize

2f957bf

undo webpack changes

33afc15

Merge branch '605-graph-resize' of github.com:plotly/dash-core-compon…

260c90b

…ents into 605-graph-resize

document responsive

ed02f5e

format

c2fcd2c

comments

3badeb9

format

327a9e3

Marc-Andre-Rivet commented Nov 21, 2019

View reviewed changes

clean up overrides

46aed75

Marc-Andre-Rivet changed the title ~~[WIP]~~ Improve responsiveness of dcc.Graph Nov 21, 2019

Marc-Andre-Rivet changed the title ~~Improve responsiveness of dcc.Graph~~ [WIP] Improve responsiveness of dcc.Graph Nov 21, 2019

Marc-Andre-Rivet mentioned this pull request Nov 21, 2019

[BUG] Graph(style='height=100%') fails when reducing window size on Firefox #605

Closed

Marc-Andre-Rivet requested review from alexcjohnson, antoinerg, wbrgss and nicolaskruchten November 21, 2019 22:27

Marc-André Rivet and others added 4 commits November 29, 2019 09:46

rework

c3f6fd9

typo

0b78f42

Merge branch 'dev' into 605-graph-resize

b36919d

rework layout logic

b784df8

alexcjohnson reviewed Dec 11, 2019

View reviewed changes

src/fragments/Graph.react.js Outdated Show resolved Hide resolved

Marc-André Rivet and others added 9 commits December 11, 2019 15:21

Update dash-graph-resizing to dash-graph--pending

a59682e

Remove dash-graph--pending from scope

8beae49

add it back...

99b9a08

- clean up className passing

74b08fc

- add className to fallback impl

- add pending class on Plotly.react

fb218a5

- shared div key between the fallback and real graph

Merge branch 'dev' into 605-graph-resize

8addc80

update changelog

d1a1dd5

Merge branch '605-graph-resize' of github.com:plotly/dash-core-compon…

701809b

…ents into 605-graph-resize

Merge branch 'dev' into 605-graph-resize

530ef65

Marc-Andre-Rivet force-pushed the 605-graph-resize branch from 01a5e49 to 530ef65 Compare December 13, 2019 21:16

- update to plotly.js 1.51.3

cb77c3b

- rework plotly.min.js inclusion and update logic

Marc-Andre-Rivet commented Dec 16, 2019

View reviewed changes

re-remove js-plotly-plot

b39406e

alexcjohnson reviewed Dec 16, 2019

View reviewed changes

src/components/Graph.react.js Outdated Show resolved Hide resolved

Marc-André Rivet added 3 commits December 16, 2019 17:00

Clean up props usage

56d883b

clean up the clean up

6867be2

clean up the clean up of the clean up

c744ae9

alexcjohnson approved these changes Dec 16, 2019

View reviewed changes

remove useless gitignore entry

de59930

Marc-Andre-Rivet merged commit 843b5a5 into dev Dec 16, 2019

Marc-Andre-Rivet deleted the 605-graph-resize branch December 16, 2019 23:47

Marc-Andre-Rivet mentioned this pull request Jan 6, 2020

Fix test regressions related to dcc.Graph changes plotly/dash#1066

Merged

alexcjohnson reviewed Feb 11, 2020

View reviewed changes

bcliang mentioned this pull request Feb 12, 2020

Sync with latest dash-core-components bcliang/dash-extendable-graph#36

Closed

MarcSkovMadsen mentioned this pull request Nov 13, 2020

Plotly plot in Plotly Pane inside Card does not work well. holoviz/panel#1770

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706

dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706

Marc-Andre-Rivet commented Nov 21, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 21, 2019

Marc-Andre-Rivet Nov 21, 2019

Marc-Andre-Rivet Nov 21, 2019

Marc-Andre-Rivet Nov 21, 2019

Marc-Andre-Rivet Nov 21, 2019

Marc-Andre-Rivet Nov 21, 2019 •

edited

Loading

alexcjohnson Dec 11, 2019

Marc-Andre-Rivet Dec 11, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 12, 2019

Marc-Andre-Rivet Dec 16, 2019 •

edited

Loading

nicolaskruchten commented Nov 25, 2019

Marc-Andre-Rivet commented Dec 13, 2019

Marc-Andre-Rivet Dec 16, 2019

Marc-Andre-Rivet Dec 16, 2019

Marc-Andre-Rivet Dec 16, 2019

alexcjohnson left a comment

alexcjohnson Feb 11, 2020

bcliang commented Jun 28, 2020 •

edited

Loading

dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706

dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706

Conversation

Marc-Andre-Rivet commented Nov 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Nov 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 16, 2019 • edited Loading

Choose a reason for hiding this comment

nicolaskruchten commented Nov 25, 2019

Marc-Andre-Rivet commented Dec 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bcliang commented Jun 28, 2020 • edited Loading

Marc-Andre-Rivet commented Nov 21, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 21, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 11, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 16, 2019 •

edited

Loading

bcliang commented Jun 28, 2020 •

edited

Loading