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;