Implement SVG rendering of equations in dcc.Graph and dcc.Markdown using MathJax v3

.circleci/config.yml

@@ -54,7 +54,7 @@ jobs:
             pip install -e .[ci,dev,testing,celery,diskcache] --progress-bar off
             pip list | grep dash
             npm i
-            npm run build
+            npm run build.sequential
             python setup.py sdist
             mkdir dash-package && cp dist/*.tar.gz dash-package/dash-package.tar.gz
             ls -la dash-package
@@ -120,7 +120,7 @@ jobs:
             set -eo pipefail
             pip install -e . --progress-bar off && pip list | grep dash
             npm install npm run initialize
-            npm run build
+            npm run build.sequential
             npm run lint
       - run:
           name: 🐍 Python Unit Tests & ☕ JS Unit Tests

CHANGELOG.md

@@ -4,10 +4,26 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Added
+- [#1949](https://github.com/plotly/dash/pull/1915) Add built-in MathJax support to both `dcc.Markdown` and `dcc.Graph`. A new boolean prop `mathjax` was added to these two components, defaulting to `False`. Set `mathjax=True` to enable math rendering. This work uses MathJax v3, although `dcc.Graph` and Plotly.js can also be used with MathJax v2.
+  - In `dcc.Markdown` this has two flavors: inline math is any content between single dollar signs, for example `"$E=mc^2$"`, and "display" math (on its own line, potentially multi-line) is delimited by double dollar signs.
+  - In `dcc.Graph`, most text fields (graph and axis titles, trace names, scatter and bar text) can use math, and it's enabled with single dollar sign delimiters. A limitation here is that currently a given piece of text can only be one or the other: if math is found, everything outside the delimiters is ignored. See https://plotly.com/python/LaTeX/ for details.
+  - For an intro to LaTeX math, see https://en.wikibooks.org/wiki/LaTeX/Mathematics.
+  - Big thanks to [Equinor](https://www.equinor.com/) for sponsoring this development, including the related work in Plotly.js!
+
+### Updated
+- [#1949](https://github.com/plotly/dash/pull/1915) Upgrade Plotly.js to v2.11.0 (from v2.9.0)
+  - [Feature release 2.10.0](https://github.com/plotly/plotly.js/releases/tag/v2.10.0):
+    - Support for MathJax v3
+    - `fillpattern` for `scatter` traces with filled area
+  - [Feature release 2.11.0](https://github.com/plotly/plotly.js/releases/tag/v2.11.0):
+    - Every trace type can now be rendered in a stricter CSP environment, specifically avoiding `unsafe-eval`. Please note: the `regl`-based traces (`scattergl`, `scatterpolargl`, `parcoords`, and `splom`) are only strict in the `strict` bundle, which is NOT served by default in Dash. To use this bundle with Dash, you must either download it and put it in your `assets/` folder, or include it as an `external_script` from the CDN: https://cdn.plot.ly/plotly-strict-2.11.0.min.js. All other trace types are strict in the normal bundle.
+  - Patch release [2.10.1](https://github.com/plotly/plotly.js/releases/tag/v2.5.1) containing a bugfix for `mesh3d` traces.
+
+
 ### Fixed
 - [#1915](https://github.com/plotly/dash/pull/1915) Fix bug [#1474](https://github.com/plotly/dash/issues/1474) when both dcc.Graph and go.Figure have animation, and when the second animation in Figure is executed, the Frames from the first animation are played instead of the second one.
 
-### Fixed
 - [#1953](https://github.com/plotly/dash/pull/1953) Fix bug [#1783](https://github.com/plotly/dash/issues/1783) in which a failed hot reloader blocks the UI with alerts.
 
 ## [2.2.0] - 2022-02-18

components/dash-core-components/.gitignore

@@ -19,6 +19,7 @@ venv/
 /build
 /dash_core_components
 dash_core_components_base/plotly.min.js
+dash_core_components_base/mathjax.js
 /deps
 /inst
 /man

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

@@ -48,6 +48,7 @@
     "graph",
     "highlight",
     "markdown",
+    "mathjax",
     "slider",
     "upload",
 ]

components/dash-core-components/package.json

@@ -23,7 +23,7 @@
     "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",
+    "prebuild:js": "cp node_modules/plotly.js-dist-min/plotly.min.js dash_core_components_base/plotly.min.js && cp node_modules/mathjax/es5/tex-svg.js dash_core_components_base/mathjax.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",
@@ -46,9 +46,10 @@
     "fast-isnumeric": "^1.1.4",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.4.0",
+    "mathjax": "^3.2.0",
     "moment": "^2.29.1",
     "node-polyfill-webpack-plugin": "^1.1.4",
-    "plotly.js-dist-min": "2.9.0",
+    "plotly.js-dist-min": "2.11.0",
     "prop-types": "^15.7.2",
     "ramda": "^0.27.1",
     "rc-slider": "^9.7.5",
@@ -60,6 +61,7 @@
     "react-resize-detector": "^6.7.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^3.0.1",
     "uniqid": "^5.4.0"
   },
   "devDependencies": {

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {asyncDecorator} from '@plotly/dash-component-plugins';
 import graph from '../utils/LazyLoader/graph';
 import plotly from '../utils/LazyLoader/plotly';
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import {
     privatePropTypes,
     privateDefaultProps,
@@ -21,6 +22,10 @@ class PlotlyGraph extends Component {
     constructor(props) {
         super(props);
 
+        if (props.mathjax) {
+            PlotlyGraph._loadMathjax = true;
+        }
+
         this.state = {
             prependData: [],
             extendData: [],
@@ -120,7 +125,11 @@ class PlotlyGraph extends Component {
 }
 
 const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
-    Promise.all([plotly(), graph()]).then(([, graph]) => graph)
+    Promise.all([
+        graph(),
+        plotly(),
+        PlotlyGraph._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([graph]) => graph)
 );
 
 const ControlledPlotlyGraph = memo(props => {
@@ -266,6 +275,11 @@ PlotlyGraph.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the graph
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * Beta: If true, animate between updates using
      * plotly.js's `animate` function
@@ -574,6 +588,7 @@ PlotlyGraph.defaultProps = {
         frames: [],
     },
     responsive: 'auto',
+    mathjax: false,
     animate: false,
     animation_options: {
         frame: {

components/dash-core-components/src/components/Markdown.react.js

@@ -1,8 +1,8 @@
+import {asyncDecorator} from '@plotly/dash-component-plugins';
 import PropTypes from 'prop-types';
-import React, {Component, lazy, Suspense} from 'react';
+import React, {Component, Suspense} from 'react';
 import markdown from '../utils/LazyLoader/markdown';
-
-const RealDashMarkdown = lazy(markdown);
+import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -11,6 +11,14 @@ const RealDashMarkdown = lazy(markdown);
  * [react-markdown](https://rexxars.github.io/react-markdown/) under the hood.
  */
 export default class DashMarkdown extends Component {
+    constructor(props) {
+        super(props);
+
+        if (props.mathjax) {
+            DashMarkdown._loadMathjax = true;
+        }
+    }
+
     render() {
         return (
             <Suspense fallback={null}>
@@ -32,6 +40,11 @@ DashMarkdown.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the markdown
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * A boolean to control raw HTML escaping.
      * Setting HTML from code is risky because it's easy to
@@ -91,10 +104,18 @@ DashMarkdown.propTypes = {
 };
 
 DashMarkdown.defaultProps = {
+    mathjax: false,
     dangerously_allow_html: false,
     highlight_config: {},
     dedent: true,
 };
 
+const RealDashMarkdown = asyncDecorator(DashMarkdown, () =>
+    Promise.all([
+        markdown(),
+        DashMarkdown._loadMathjax ? lazyLoadMathJax() : undefined,
+    ]).then(([md]) => md)
+);
+
 export const propTypes = DashMarkdown.propTypes;
 export const defaultProps = DashMarkdown.defaultProps;