mathjax in graph

Author: archmoj

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-lock.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,6 +46,7 @@
     "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": "file:packages/plotly.js-dist-min-2.9.0.tgz",

components/dash-core-components/package.json

@@ -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 mathjax 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 ? mathjax() : 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/Graph.react.js

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

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

@@ -134,7 +134,7 @@ module.exports = (env, argv) => {
             new WebpackDashDynamicImport(),
             new webpack.SourceMapDevToolPlugin({
                 filename: '[file].map',
-                exclude: ['async-plotlyjs']
+                exclude: ['async-plotlyjs', 'async-mathjax']
             }),
             new NodePolyfillPlugin()
         ]