Skip to content

Commit 3f6c0eb

Browse files
archmojarchmoj
authored
Merge pull request #6073 from plotly/mathjax-v3
Support version 3 of `MathJax` and add `config.typesetMath`
2 parents 3aa9559 + ff75df4 commit 3f6c0eb

29 files changed

+534
-81
lines changed

‎.circleci/config.yml

+39-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ jobs:
8989
environment:
9090
# Alaska time (arbitrary timezone to test date logic)
9191
TZ: "America/Anchorage"
92-
parallelism: 8
92+
parallelism: 12
9393
working_directory: ~/plotly.js
9494
steps:
9595
- browser-tools/install-browser-tools: &browser-versions
@@ -216,6 +216,24 @@ jobs:
216216
name: Test MathJax on firefox-latest
217217
command: .circleci/test.sh mathjax-firefox82+
218218

219+
make-baselines-mathjax3:
220+
docker:
221+
- image: circleci/python:3.8.9
222+
working_directory: ~/plotly.js
223+
steps:
224+
- attach_workspace:
225+
at: ~/
226+
- run:
227+
name: Install kaleido, plotly.io and required fonts
228+
command: .circleci/env_image.sh
229+
- run:
230+
name: Create mathjax v3 png files
231+
command: .circleci/test.sh make-baselines-mathjax3
232+
- persist_to_workspace:
233+
root: ~/
234+
paths:
235+
- plotly.js
236+
219237
make-baselines:
220238
parallelism: 4
221239
docker:
@@ -249,6 +267,20 @@ jobs:
249267
path: build
250268
destination: /
251269

270+
test-baselines-mathjax3:
271+
docker:
272+
- image: circleci/node:16.8.0
273+
working_directory: ~/plotly.js
274+
steps:
275+
- attach_workspace:
276+
at: ~/
277+
- run:
278+
name: Compare pixels of mathjax v3 baselines
279+
command: .circleci/test.sh test-image-mathjax3
280+
- store_artifacts:
281+
path: build
282+
destination: /
283+
252284
make-exports:
253285
docker:
254286
- image: circleci/python:3.8.9
@@ -413,6 +445,12 @@ workflows:
413445
- flaky-no-gl-jasmine:
414446
requires:
415447
- install-and-cibuild
448+
- make-baselines-mathjax3:
449+
requires:
450+
- install-and-cibuild
451+
- test-baselines-mathjax3:
452+
requires:
453+
- make-baselines-mathjax3
416454
- make-baselines:
417455
requires:
418456
- install-and-cibuild

‎.circleci/test.sh

+14-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,15 @@ case $1 in
7575
;;
7676

7777
mathjax-firefox82+)
78-
./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax --nowatch || EXIT_STATE=$?
78+
./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --skip-tags=noFF82 --nowatch &&
79+
./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --mathjax3 --skip-tags=noFF82 --nowatch &&
80+
./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax_config --mathjax3 --nowatch &&
81+
./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax_config --nowatch || EXIT_STATE=$?
82+
exit $EXIT_STATE
83+
;;
84+
85+
make-baselines-mathjax3)
86+
python3 test/image/make_baseline.py mathjax3 legend_mathjax_title_and_items mathjax parcats_grid_subplots table_latex_multitrace_scatter table_plain_birds table_wrapped_birds ternary-mathjax || EXIT_STATE=$?
7987
exit $EXIT_STATE
8088
;;
8189

@@ -90,6 +98,11 @@ case $1 in
9098
exit $EXIT_STATE
9199
;;
92100

101+
test-image-mathjax3)
102+
node test/image/compare_pixels_test.js mathjax3 || { tar -cvf build/baselines.tar build/test_images/*.png ; exit 1 ; } || EXIT_STATE=$?
103+
exit $EXIT_STATE
104+
;;
105+
93106
source-syntax)
94107
npm run lint || EXIT_STATE=$?
95108
npm run test-syntax || EXIT_STATE=$?

‎README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,19 @@ While non-minified source files may contain characters outside UTF-8, it is reco
8787

8888
> Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
8989
90-
To support MathJax, you need to load version two of MathJax e.g. `v2.7.5` files from CDN or npm.
90+
To support MathJax, you could load either version two or version three of MathJax files, for example:
9191
```html
9292
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>
9393
```
9494

95+
```html
96+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
97+
```
98+
99+
> When using MathJax version 3, it is also possible to use `chtml` output on the other parts of the page in addition to `svg` output for the plotly graph.
100+
Please refer to `devtools/test_dashboard/index-mathjax3chtml.html` to see an example.
101+
102+
95103
## Bundles
96104
There are two kinds of plotly.js bundles:
97105
1. Complete and partial official bundles that are distributed to `npm` and the `CDN`, described in [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).

‎devtools/test_dashboard/index-mathjax3.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools - MathJax v3 loaded with svg output</title>
5+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/>
6+
<link rel="stylesheet" type="text/css" href="./style.css">
7+
</head>
8+
<body>
9+
<header>
10+
<img src="http://images.plot.ly/logo/[email protected]" onClick="Tabs.reload();" />
11+
<span id="reload-time"></span>
12+
13+
<input id="mocks-search" type="text" placeholder="mocks search" />
14+
<input id="css-transform" type="text" placeholder="css transform" />
15+
</header>
16+
17+
<section id="mocks-list"></section>
18+
19+
<p id="pWithMathJax">MathJax $V^3$ with $svg$ output on the page as well as plotly graphs</p>
20+
<h4>no MathJax: Apple: $2, Orange: $3</h4>
21+
22+
<div id="plots">
23+
<div id="graph"></div>
24+
</div>
25+
<div id="snapshot"></div>
26+
27+
<script>
28+
window.MathJax = {
29+
startup: {
30+
elements: [
31+
document.getElementById('pWithMathJax')
32+
],
33+
// typeset: false,
34+
// in case the elements array is empty one could disable startup typeset
35+
// https://docs.mathjax.org/en/latest/options/startup/startup.html#the-configuration-block
36+
}
37+
};
38+
</script>
39+
<script src="../../node_modules/mathjax-v3/es5/tex-svg.js"></script>
40+
<script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
41+
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
42+
</body>
43+
</html>

‎devtools/test_dashboard/index-mathjax3chtml.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools - MathJax v3 loaded with chtml output</title>
5+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/>
6+
<link rel="stylesheet" type="text/css" href="./style.css">
7+
</head>
8+
<body>
9+
<header>
10+
<img src="http://images.plot.ly/logo/[email protected]" onClick="Tabs.reload();" />
11+
<span id="reload-time"></span>
12+
13+
<input id="mocks-search" type="text" placeholder="mocks search" />
14+
<input id="css-transform" type="text" placeholder="css transform" />
15+
</header>
16+
17+
<section id="mocks-list"></section>
18+
19+
<p>MathJax $V^3$ with $chtml$ output on the page and <b>svg</b> output on the plotly graphs</p>
20+
<div id="plots">
21+
<div id="graph"></div>
22+
</div>
23+
<div id="snapshot"></div>
24+
25+
<script>
26+
window.MathJax = window.MathJax || {
27+
// see https://github.com/mathjax/MathJax/issues/2705#issuecomment-859742446
28+
loader: {load: ['output/svg']},
29+
startup: {
30+
ready() {
31+
// Get the MathJax modules that we need.
32+
const {mathjax} = MathJax._.mathjax;
33+
const {SVG} = MathJax._.output.svg_ts;
34+
35+
// Do the normal setup
36+
MathJax.startup.defaultReady();
37+
38+
// Create an SVG output jax and a new MathDocument that uses it.
39+
const svgOutput = new SVG(MathJax.config.svg);
40+
const svgDocument = mathjax.document(document, {
41+
...MathJax.config.options,
42+
InputJax: MathJax.startup.input,
43+
OutputJax: svgOutput
44+
});
45+
46+
// Define the SVG-based conversion methods
47+
MathJax.tex2svg = (math, options = {}) => {
48+
options.format = svgDocument.inputJax[0].name;
49+
return svgDocument.convert(math, options);
50+
};
51+
/*
52+
MathJax.tex2svgPromise = (math, options = {}) => {
53+
options.format = svgDocument.inputJax[0].name;
54+
return mathjax.handleRetriesFor(() => svgDocument.convert(math, options));
55+
};
56+
*/
57+
MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument);
58+
}
59+
}
60+
};
61+
</script>
62+
<script src="../../node_modules/mathjax-v3/es5/tex-chtml.js"></script>
63+
64+
<script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
65+
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
66+
</body>
67+
</html>

‎devtools/test_dashboard/index-strict.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
<div id="snapshot"></div>
2424

25-
<script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
25+
<script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
2626
<script charset="utf-8" id="source" src="../../build/plotly.js"></script>
2727
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
2828
</body>

‎devtools/test_dashboard/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121
<div id="snapshot"></div>
2222

23-
<script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
23+
<script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
2424
<script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
2525
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
2626
</body>

‎devtools/test_dashboard/server.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ var shortcutPaths = require('../../tasks/util/shortcut_paths');
1313
var args = minimist(process.argv.slice(2), {});
1414
var PORT = args.port || 3000;
1515
var strict = args.strict;
16+
var mathjax3 = args.mathjax3;
17+
var mathjax3chtml = args.mathjax3chtml;
1618

1719
// Create server
1820
var server = http.createServer(ecstatic({
@@ -25,7 +27,11 @@ var server = http.createServer(ecstatic({
2527
// Make watchified bundle for plotly.js
2628
var bundlePlotly = makeWatchifiedBundle(strict, function() {
2729
// open up browser window on first bundle callback
28-
open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (strict ? '-strict' : '') + '.html');
30+
open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
31+
strict ? '-strict' :
32+
mathjax3 ? '-mathjax3' :
33+
mathjax3chtml ? '-mathjax3chtml' : ''
34+
) + '.html');
2935
});
3036

3137
// Bundle devtools code

‎draftlogs/add_6073.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- Add support for MathJax version 3 and `typesetMath` attribute to config [[#6073](https://github.com/plotly/plotly.js/pull/6073)],
2+
with thanks to [Equinor](https://www.equinor.com) for sponsoring the related development!

‎package-lock.json

+19-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@
5252
"test-requirejs": "node tasks/test_requirejs.js",
5353
"test-plain-obj": "node tasks/test_plain_obj.js",
5454
"test": "npm run test-jasmine -- --nowatch && npm run test-bundle && npm run test-image && npm run test-export && npm run test-syntax && npm run lint",
55+
"mathjax3": "node devtools/test_dashboard/server.js --mathjax3",
56+
"mathjax3chtml": "node devtools/test_dashboard/server.js --mathjax3chtml",
5557
"strict": "node devtools/test_dashboard/server.js --strict",
5658
"start": "node devtools/test_dashboard/server.js",
5759
"baseline": "node test/image/make_baseline.js",
@@ -152,7 +154,8 @@
152154
"karma-viewport": "1.0.2",
153155
"lodash": "^4.17.21",
154156
"madge": "^5.0.1",
155-
"mathjax": "2.7.5",
157+
"mathjax-v2": "npm:[email protected]",
158+
"mathjax-v3": "npm:mathjax@^3.2.0",
156159
"minify-stream": "^2.1.0",
157160
"npm-link-check": "^4.0.0",
158161
"open": "^8.4.0",

0 commit comments

Comments
 (0)