Skip to content

Commit 19b432d

Browse files
emilyklemilykl
committed
fix, simplify, and upgrade devtools dashboards for mathjax. Add new dashboard index page for mathjax 4 chtml
1 parent 5b03600 commit 19b432d

5 files changed

Lines changed: 53 additions & 39 deletions

File tree

‎devtools/test_dashboard/index-mathjax3.html‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<section id="mocks-list"></section>
1919

20-
<p id="pWithMathJax">MathJax $V^3$ with $svg$ output on the page as well as plotly graphs</p>
20+
<p>MathJax \(V^3\) with \(svg\) output on the page as well as plotly graphs</p>
2121
<h4>no MathJax: Apple: $2, Orange: $3</h4>
2222

2323
<div id="plots">
@@ -27,14 +27,8 @@ <h4>no MathJax: Apple: $2, Orange: $3</h4>
2727

2828
<script>
2929
window.MathJax = {
30-
startup: {
31-
elements: [
32-
document.getElementById('pWithMathJax')
33-
],
34-
// typeset: false,
35-
// in case the elements array is empty one could disable startup typeset
36-
// https://docs.mathjax.org/en/latest/options/startup/startup.html#the-configuration-block
37-
}
30+
// MathJax config options can be set here, although
31+
// none are strictly needed for this page.
3832
};
3933
</script>
4034
<script src="../../node_modules/@plotly/mathjax-v3/es5/tex-svg.js"></script>

‎devtools/test_dashboard/index-mathjax3chtml.html‎

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,46 +17,23 @@
1717

1818
<section id="mocks-list"></section>
1919

20-
<p>MathJax $V^3$ with $chtml$ output on the page and <b>svg</b> output on the plotly graphs</p>
20+
<p>MathJax \(V^3\) with \(chtml\) output on the page and <b>svg</b> output on the plotly graphs</p>
2121
<div id="plots">
2222
<div id="graph"></div>
2323
</div>
2424
<div id="snapshot"></div>
2525

2626
<script>
27-
window.MathJax = window.MathJax || {
28-
// see https://github.com/mathjax/MathJax/issues/2705#issuecomment-859742446
27+
window.MathJax = {
28+
// It's possible for MathJax CHTML output to coexist on the same page with
29+
// a plotly chart with renders MathJax as SVG; *however*, the loader must be
30+
// configured to load the SVG output module so that it's available for plotly
31+
// (in addition to the CHTML output module, which is implicitly loaded by
32+
// tex-chtml.js below).
2933
loader: {load: ['output/svg']},
30-
startup: {
31-
ready() {
32-
// Get the MathJax modules that we need.
33-
const {mathjax} = MathJax._.mathjax;
34-
const {SVG} = MathJax._.output.svg_ts;
35-
36-
// Do the normal setup
37-
MathJax.startup.defaultReady();
38-
39-
// Create an SVG output jax and a new MathDocument that uses it.
40-
const svgOutput = new SVG(MathJax.config.svg);
41-
const svgDocument = mathjax.document(document, {
42-
...MathJax.config.options,
43-
InputJax: MathJax.startup.input,
44-
OutputJax: svgOutput
45-
});
46-
47-
// Define the SVG-based conversion methods
48-
MathJax.tex2svg = (math, options = {}) => {
49-
options.format = svgDocument.inputJax[0].name;
50-
return svgDocument.convert(math, options);
51-
};
52-
53-
MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument);
54-
}
55-
}
5634
};
5735
</script>
5836
<script src="../../node_modules/@plotly/mathjax-v3/es5/tex-chtml.js"></script>
59-
6037
<script charset="utf-8" id="source" src="../../build/plotly.js"></script>
6138
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
6239
</body>

‎devtools/test_dashboard/index-mathjax4chtml.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools - MathJax v4 loaded with chtml output</title>
5+
<meta charset="utf-8">
6+
<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"/>
7+
<link rel="stylesheet" type="text/css" href="./style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();" />
12+
<span id="reload-time"></span>
13+
14+
<input id="mocks-search" type="text" placeholder="mocks search" />
15+
<input id="css-transform" type="text" placeholder="css transform" />
16+
</header>
17+
18+
<section id="mocks-list"></section>
19+
20+
<p>MathJax \(V^4\) with \(chtml\) output on the page and <b>svg</b> output on the plotly graphs</p>
21+
<div id="plots">
22+
<div id="graph"></div>
23+
</div>
24+
<div id="snapshot"></div>
25+
26+
<script>
27+
window.MathJax = {
28+
// It's possible for MathJax CHTML output to coexist on the same page with
29+
// a plotly chart with renders MathJax as SVG; *however*, the loader must be
30+
// configured to load the SVG output module so that it's available for plotly
31+
// (in addition to the CHTML output module, which is implicitly loaded by
32+
// tex-chtml.js below).
33+
loader: {load: ['output/svg']},
34+
};
35+
</script>
36+
<script src="../../node_modules/@plotly/mathjax-v4/tex-chtml.js"></script>
37+
<script charset="utf-8" id="source" src="../../build/plotly.js"></script>
38+
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
39+
</body>
40+
</html>

‎devtools/test_dashboard/server.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ var PORT = args.port || 3000;
1111
var strict = args.strict;
1212
var mathjax3 = args.mathjax3;
1313
var mathjax3chtml = args.mathjax3chtml;
14+
var mathjax4chtml = args.mathjax4chtml;
1415

1516
if (strict) localDevConfig.entryPoints = ['./lib/index-strict.js'];
1617

@@ -60,6 +61,7 @@ function devServer() {
6061
let indexName = 'index';
6162
if (mathjax3) indexName += '-mathjax3';
6263
else if (mathjax3chtml) indexName += '-mathjax3chtml';
64+
else if (mathjax4chtml) indexName += '-mathjax4chtml';
6365
indexName += '.html';
6466

6567
// open up browser window

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"b64": "python3 test/image/generate_b64_mocks.py && node devtools/test_dashboard/server.mjs",
5757
"mathjax3": "node devtools/test_dashboard/server.mjs --mathjax3",
5858
"mathjax3chtml": "node devtools/test_dashboard/server.mjs --mathjax3chtml",
59+
"mathjax4chtml": "node devtools/test_dashboard/server.mjs --mathjax4chtml",
5960
"strict": "node devtools/test_dashboard/server.mjs --strict",
6061
"start": "node devtools/test_dashboard/server.mjs",
6162
"baseline": "node test/image/make_baseline.mjs",

0 commit comments

Comments
 (0)