Merge pull request #2633 from plotly/master-2.13.0

Master 2.13.0

CHANGELOG.md

@@ -2,6 +2,15 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.13.0] 2023-08-28
+## Changed
+
+- [#2610](https://github.com/plotly/dash/pull/2610) Load plotly.js bundle/version from plotly.py
+
+## Added
+
+- [#2630](https://github.com/plotly/dash/pull/2630) New layout hooks in the renderer
+
 
 ## [2.12.1] - 2023-08-16
 

components/dash-core-components/dash_core_components_base/__init__.py

@@ -1,6 +1,7 @@
 import json
 import os as _os
 import sys as _sys
+
 import dash as _dash
 
 from ._imports_ import *  # noqa: F401, F403, E402
@@ -121,33 +122,6 @@
             "namespace": "dash",
             "dynamic": True,
         },
-        {
-            "relative_package_path": "dcc/plotly.min.js",
-            "external_url": (
-                "https://unpkg.com/dash-core-components@{}"
-                "/dash_core_components/plotly.min.js"
-            ).format(__version__),
-            "namespace": "dash",
-            "async": "eager",
-        },
-        {
-            "relative_package_path": "dcc/async-plotlyjs.js",
-            "external_url": (
-                "https://unpkg.com/dash-core-components@{}"
-                "/dash_core_components/async-plotlyjs.js"
-            ).format(__version__),
-            "namespace": "dash",
-            "async": "lazy",
-        },
-        {
-            "relative_package_path": "dcc/async-plotlyjs.js.map",
-            "external_url": (
-                "https://unpkg.com/dash-core-components@{}"
-                "/dash_core_components/async-plotlyjs.js.map"
-            ).format(__version__),
-            "namespace": "dash",
-            "dynamic": True,
-        },
     ]
 )
 

components/dash-core-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -23,7 +23,6 @@
     "test": "run-s -c lint test:intg test:pyimport",
     "test:intg": "pytest --nopercyfinalize --headless tests/integration ",
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
-    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js",
     "build:js": "webpack --mode production",
     "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json  && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components",
     "build": "run-s prepublishOnly build:js build:backends",
@@ -49,7 +48,6 @@
     "mathjax": "^3.2.2",
     "moment": "^2.29.4",
     "node-polyfill-webpack-plugin": "^2.0.1",
-    "plotly.js-dist-min": "2.25.2",
     "prop-types": "^15.8.1",
     "ramda": "^0.29.0",
     "rc-slider": "^9.7.5",

components/dash-core-components/src/utils/LazyLoader/plotly.js

@@ -1,6 +1,25 @@
-export default () => Promise.resolve(window.Plotly ||
-    import(/* webpackChunkName: "plotlyjs" */ 'plotly.js-dist-min').then(({ default: Plotly }) => {
-        window.Plotly = Plotly;
-        return Plotly;
-    }));
+export default () => {
+    return Promise.resolve(window.Plotly || new Promise((resolve, reject) => {
+        /* eslint-disable prefer-const */
+        let timeoutId;
+
+        const element = document.createElement('script');
+        element.src = window._dashPlotlyJSURL;
+        element.async = true;
+        element.onload = () => {
+            clearTimeout(timeoutId);
+            resolve();
+        };
+        element.onerror = (error) => {
+            clearTimeout(timeoutId);
+            reject(error);
+        };
 
+        timeoutId = setTimeout(() => {
+            element.src = '';
+            reject(new Error(`plotly.js did not load after 30 seconds`));
+        }, 3 * 10 * 1000);
+
+        document.querySelector('body').appendChild(element);
+    }));
+}

components/dash-core-components/tests/integration/graph/test_graph_varia.py

@@ -128,6 +128,8 @@ def show_relayout_data(data):
 
     dash_dcc.start_server(app)
 
+    time.sleep(1)
+
     # use this opportunity to test restyleData, since there are multiple
     # traces on this graph
     legendToggle = dash_dcc.find_element(

components/dash-core-components/tests/integration/tooltip/test_tooltip.py

@@ -80,6 +80,8 @@ def update_tooltip_content(hoverData):
     assert 175 < coords[0] < 185, "x0 is about 200 minus half a marker size"
     assert 175 < coords[1] < 185, "y0 is about 200 minus half a marker size"
 
+    elem = dash_dcc.find_element("#graph .nsewdrag")
+
     ActionChains(dash_dcc.driver).move_to_element_with_offset(
         elem, 5, elem.size["height"] - 5
     ).perform()

dash/_dash_renderer.py

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "1.15.5"
+__version__ = "1.16.0"
 
 _available_react_versions = {"16.14.0", "18.2.0"}
 _available_reactdom_versions = {"16.14.0", "18.2.0"}
@@ -64,7 +64,7 @@ def _set_react_version(v_react, v_reactdom=None):
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/dash-renderer@1.15.5"
+        "external_url": "https://unpkg.com/dash-renderer@1.16.0"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },

dash/_utils.py

@@ -12,6 +12,8 @@
 import string
 from html import escape
 from functools import wraps
+from typing import Union
+from dash.types import RendererHooks
 
 logger = logging.getLogger()
 
@@ -267,3 +269,11 @@ def coerce_to_list(obj):
 
 def clean_property_name(name: str):
     return name.split("@")[0]
+
+
+def hooks_to_js_object(hooks: Union[RendererHooks, None]) -> str:
+    if hooks is None:
+        return ""
+    hook_str = ",".join(f"{key}: {val}" for key, val in hooks.items())
+
+    return f"{{{hook_str}}}"

dash/dash-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "1.15.5",
+  "version": "1.16.0",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {

dash/dash-renderer/src/APIController.react.js

@@ -72,6 +72,14 @@ const UnconnectedContainer = props => {
         }
     });
 
+    useEffect(() => {
+        if (config.serve_locally) {
+            window._dashPlotlyJSURL = `${config.requests_pathname_prefix}_dash-component-suites/plotly/package_data/plotly.min.js`;
+        } else {
+            window._dashPlotlyJSURL = config.plotlyjs_url;
+        }
+    }, []);
+
     let content;
     if (
         layoutRequest.status &&
@@ -123,14 +131,21 @@ function storeEffect(props, events, setErrorLoading) {
         dispatch,
         error,
         graphs,
+        hooks,
         layout,
         layoutRequest
     } = props;
 
     if (isEmpty(layoutRequest)) {
+        if (typeof hooks.layout_pre === 'function') {
+            hooks.layout_pre();
+        }
         dispatch(apiThunk('_dash-layout', 'GET', 'layoutRequest'));
     } else if (layoutRequest.status === STATUS.OK) {
         if (isEmpty(layout)) {
+            if (typeof hooks.layout_post === 'function') {
+                hooks.layout_post(layoutRequest.content);
+            }
             const finalLayout = applyPersistence(
                 layoutRequest.content,
                 dispatch
@@ -190,6 +205,7 @@ UnconnectedContainer.propTypes = {
     dispatch: PropTypes.func,
     dependenciesRequest: PropTypes.object,
     graphs: PropTypes.object,
+    hooks: PropTypes.object,
     layoutRequest: PropTypes.object,
     layout: PropTypes.object,
     loadingMap: PropTypes.any,
@@ -203,6 +219,7 @@ const Container = connect(
     state => ({
         appLifecycle: state.appLifecycle,
         dependenciesRequest: state.dependenciesRequest,
+        hooks: state.hooks,
         layoutRequest: state.layoutRequest,
         layout: state.layout,
         loadingMap: state.loadingMap,

dash/dash-renderer/src/AppContainer.react.js

@@ -13,6 +13,8 @@ class UnconnectedAppContainer extends React.Component {
     constructor(props) {
         super(props);
         if (
+            props.hooks.layout_pre !== null ||
+            props.hooks.layout_post !== null ||
             props.hooks.request_pre !== null ||
             props.hooks.request_post !== null ||
             props.hooks.callback_resolved !== null ||

dash/dash-renderer/src/AppProvider.react.tsx

@@ -16,6 +16,8 @@ const AppProvider = ({hooks}: any) => {
 
 AppProvider.propTypes = {
     hooks: PropTypes.shape({
+        layout_pre: PropTypes.func,
+        layout_post: PropTypes.func,
         request_pre: PropTypes.func,
         request_post: PropTypes.func,
         callback_resolved: PropTypes.func,
@@ -25,6 +27,8 @@ AppProvider.propTypes = {
 
 AppProvider.defaultProps = {
     hooks: {
+        layout_pre: null,
+        layout_post: null,
         request_pre: null,
         request_post: null,
         callback_resolved: null,

dash/dash-renderer/src/config.ts

@@ -19,6 +19,8 @@ type Config = {
             'Content-Type': string;
         };
     };
+    serve_locally?: boolean;
+    plotlyjs_url?: string;
 };
 
 export default function getConfigFromDOM(): Config {

dash/dash-renderer/src/reducers/hooks.js

@@ -1,5 +1,7 @@
 const customHooks = (
     state = {
+        layout_pre: null,
+        layout_post: null,
         request_pre: null,
         request_post: null,
         callback_resolved: null,