toggle mathjax via callbacks

Author: archmoj

components/dash-core-components/src/fragments/Graph.react.js

@@ -1,3 +1,4 @@
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import React, {Component} from 'react';
 // /build/withPolyfill for IE11 support - https://github.com/maslianok/react-resize-detector/issues/144
 import ResizeDetector from 'react-resize-detector/build/withPolyfill';
@@ -144,15 +145,15 @@ class PlotlyGraph extends Component {
 
     plot(props) {
         let {figure, config} = props;
-        const {animate, animation_options, responsive} = props;
+        const {animate, animation_options, responsive, mathjax} = props;
 
         const gd = this.gd.current;
         figure = props._dashprivate_transformFigure(figure, gd);
         config = props._dashprivate_transformConfig(config, gd);
 
         const configClone = this.getConfig(config, responsive);
         // add typesetMath | not exposed to the dash API
-        configClone.typesetMath = this.props.mathjax;
+        configClone.typesetMath = mathjax;
 
         const figureClone = {
             data: figure.data,
@@ -180,32 +181,34 @@ class PlotlyGraph extends Component {
 
         gd.classList.add('dash-graph--pending');
 
-        return Plotly.react(gd, figureClone).then(() => {
-            const gd = this.gd.current;
+        return lazyLoadMathJax(mathjax)
+            .then(() => Plotly.react(gd, figureClone))
+            .then(() => {
+                const gd = this.gd.current;
 
-            // double-check gd hasn't been unmounted
-            if (!gd) {
-                return;
-            }
+                // double-check gd hasn't been unmounted
+                if (!gd) {
+                    return;
+                }
 
-            gd.classList.remove('dash-graph--pending');
+                gd.classList.remove('dash-graph--pending');
 
-            // in case we've made a new DOM element, transfer events
-            if (this._hasPlotted && gd !== this._prevGd) {
-                if (this._prevGd && this._prevGd.removeAllListeners) {
-                    this._prevGd.removeAllListeners();
-                    Plotly.purge(this._prevGd);
+                // in case we've made a new DOM element, transfer events
+                if (this._hasPlotted && gd !== this._prevGd) {
+                    if (this._prevGd && this._prevGd.removeAllListeners) {
+                        this._prevGd.removeAllListeners();
+                        Plotly.purge(this._prevGd);
+                    }
+                    this._hasPlotted = false;
                 }
-                this._hasPlotted = false;
-            }
 
-            if (!this._hasPlotted) {
-                this.bindEvents();
-                this.graphResize(true);
-                this._hasPlotted = true;
-                this._prevGd = gd;
-            }
-        });
+                if (!this._hasPlotted) {
+                    this.bindEvents();
+                    this.graphResize(true);
+                    this._hasPlotted = true;
+                    this._prevGd = gd;
+                }
+            });
     }
 
     mergeTraces(props, dataKey, plotlyFnKey) {
@@ -430,6 +433,7 @@ class PlotlyGraph extends Component {
             return;
         }
         if (
+            this.props.mathjax !== nextProps.mathjax ||
             this.props.figure !== nextProps.figure ||
             this.props._dashprivate_transformConfig !==
                 nextProps._dashprivate_transformConfig ||
@@ -453,7 +457,10 @@ class PlotlyGraph extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.id !== this.props.id) {
+        if (
+            prevProps.id !== this.props.id ||
+            prevProps.mathjax !== this.props.mathjax
+        ) {
             this.plot(this.props);
         }
     }

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

@@ -1,7 +1,9 @@
-export default () => Promise.resolve(window.MathJax ||
-    import(/* webpackChunkName: "mathjax" */ 'mathjax/es5/tex-svg.js').then(() => {
-        window.MathJax.config.startup.typeset = false;
+export default (mathjax) => Promise.resolve(window.MathJax || (
+    mathjax === false ?
+        undefined :
+        import(/* webpackChunkName: "mathjax" */ 'mathjax/es5/tex-svg.js').then(() => {
+            window.MathJax.config.startup.typeset = false;
 
-        return window.MathJax;
-    })
-);
+            return window.MathJax;
+        })
+));

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

@@ -960,3 +960,50 @@ def test_grva012_with_mathjax(dash_dcc, is_eager):
     assert findAsyncMathJax(scripts) is None
 
     assert dash_dcc.get_logs() == []
+
+
+@pytest.mark.parametrize("is_eager", [True, False])
+def test_grva013_toggle_mathjax(dash_dcc, is_eager):
+    app = Dash(__name__, eager_loading=is_eager)
+
+    gravity = "$F=\\frac{Gm_1m_2}{r^2}$"
+
+    app.layout = html.Div(
+        [
+            html.Button("Toggle MathJax", id="btn"),
+            dcc.Graph(
+                id="gd",
+                figure={
+                    "data": [{"y": [3, 1, 2]}],
+                    "layout": {"title": {"text": gravity}},
+                },
+            ),
+        ]
+    )
+
+    @app.callback(
+        Output("gd", "mathjax"), Input("btn", "n_clicks"), prevent_initial_call=True
+    )
+    def toggle(n):
+        return (n or 0) % 2 != 0
+
+    dash_dcc.start_server(app)
+
+    # Initial state: no MathJax loaded or rendered, unformatted text is shown
+    dash_dcc.wait_for_contains_text(".gtitle", gravity)
+    assert not dash_dcc.driver.execute_script("return !!window.MathJax")
+
+    btn = dash_dcc.find_element("#btn")
+    btn.click()
+
+    # One click: MathJax is rendered, unformatted text is gone
+
+    dash_dcc.wait_for_element(".gtitle-math")
+    assert dash_dcc.driver.execute_script("return !!window.MathJax")
+
+    btn.click()
+
+    # Second click: Back to initial state except that MathJax library is still loaded
+    dash_dcc.wait_for_contains_text(".gtitle", gravity)
+    dash_dcc.wait_for_no_elements(".gtitle-math")
+    assert dash_dcc.driver.execute_script("return !!window.MathJax")