Skip to content

Andrew/mathjax #393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 22, 2025
Merged

Andrew/mathjax #393

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8d0564
Reorder and rollback mathjax.
ayjayt Aug 19, 2025
1c24d6d
Fix self-closing image tag.
ayjayt Aug 19, 2025
08bfb36
Update tests for new page.
ayjayt Aug 19, 2025
bb3c3e7
Remove old vendored index.html.
ayjayt Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/py/kaleido/_page_generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@
_logger = logistro.getLogger(__name__)

DEFAULT_PLOTLY = "https://cdn.plot.ly/plotly-2.35.2.js"
DEFAULT_MATHJAX = "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"
DEFAULT_MATHJAX = (
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js"
"?config=TeX-AMS-MML_SVG"
)

KJS_PATH = Path(__file__).resolve().parent / "vendor" / "kaleido_scopes.js"

Expand Down Expand Up @@ -46,7 +49,7 @@ class PageGenerator:
footer = f"""
<script src="{KJS_PATH.as_uri()}"></script>
</head>
<body style="{{margin: 0; padding: 0;}}"><img id="kaleido-image"></img></body>
<body style="{{margin: 0; padding: 0;}}"><img id="kaleido-image" /></body>
</html>
"""
"""The footer is the HTML that always goes on the bottom. Rarely needs changing."""
Expand All @@ -67,6 +70,12 @@ def __init__(self, *, plotly=None, mathjax=None, others=None, force_cdn=False):

"""
self._scripts = []
if mathjax is not False:
if not mathjax:
mathjax = DEFAULT_MATHJAX
else:
_ensure_path(mathjax)
self._scripts.append(mathjax)
if force_cdn:
plotly = (DEFAULT_PLOTLY, "utf-8")
elif not plotly:
Expand Down Expand Up @@ -97,12 +106,6 @@ def __init__(self, *, plotly=None, mathjax=None, others=None, force_cdn=False):
plotly = (plotly, "utf-8")
_logger.debug(f"Plotly script: {plotly}")
self._scripts.append(plotly)
if mathjax is not False:
if not mathjax:
mathjax = DEFAULT_MATHJAX
else:
_ensure_path(mathjax)
self._scripts.append(mathjax)
if others:
for o in others:
_ensure_path(o)
Expand Down
30 changes: 25 additions & 5 deletions src/py/kaleido/vendor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,36 @@
<!DOCTYPE html>

<!--
THIS FILE IS AN EXAMPLE, IT IS GENERATED AUTOMATICALLY AT RUNTIME
TO ENSURE FULLY UPDATED RESOURCES
-->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't make sense to me, what is the function of this file? Should it be checked into git at all?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Legacy code that I've been using throughout this process and as documentation. It's definitely on its way out, I can axe it.


<html>
<head>
<meta charset="utf-8" />
<title>Kaleido-fier</title>

<script>
window.PlotlyConfig = {MathJaxConfig: 'local'};
// Plotly won't fetch MathJax; you'll provide it
window.PlotlyConfig = { MathJaxConfig: 'local' };
</script>

<!-- Only your one tweak; preset handles TeX+AMS+SVG -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

<script type="text/x-mathjax-config">
MathJax.Hub.Config({ "SVG": {blacker: 0 }});
MathJax.Hub.Config({
SVG: { blacker: 0 }
});
</script>
<script src="https://cdn.plot.ly/plotly-2.35.3.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>

<!-- Preset loads TeX input, AMS, and SVG output -->
<script src="/vendor/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG"></script>

<!-- Plotly after MathJax (since we're in 'local' mode) -->
<script src="https://cdn.plot.ly/plotly-2.35.3.min.js"></script>

<script src="./kaleido_scopes.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="margin:0; padding:0;">
<img id="kaleido-image" />
</body>
</html>
68 changes: 48 additions & 20 deletions src/py/tests/test_page_generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,18 @@
import pytest

from kaleido import PageGenerator
from kaleido._page_generator import DEFAULT_MATHJAX, DEFAULT_PLOTLY

# allows to create a browser pool for tests
pytestmark = pytest.mark.asyncio(loop_scope="function")

_logger = logistro.getLogger(__name__)

no_imports_result_re = re.compile(r"""
_re_default_mathjax = re.escape(DEFAULT_MATHJAX)
_re_default_plotly = re.escape(DEFAULT_PLOTLY)

no_imports_result_raw = (
r'''
<!DOCTYPE html>
<html>
<head>
Expand All @@ -25,15 +30,22 @@
MathJax\.Hub\.Config\({ "SVG": { blacker: 0 }}\)
</script>

<script src="https://cdn\.plot\.ly/plotly-2\.35\.2\.js" charset="utf-8"></script>
<script src="https://cdn\.jsdelivr\.net/npm/mathjax@3\.2\.2/es5/tex-svg\.js"></script>
<script src="'''
+ _re_default_mathjax
+ r'''"></script>
<script src="'''
+ _re_default_plotly
+ r"""" charset="utf\-8"></script>
<script src="\S[^\n]*/kaleido_scopes\.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="{margin: 0; padding: 0;}"><img id="kaleido\-image" /></body>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the backslash in the id?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not super happy with how convoluted these tests are and I'm thinking about doing them line by line.

In certain instances, '-' is a reserved character in regex. In this particular instance, it doesn't need to be, but can be, escaped.

There's a run on testing today, this whole strategy might change in another PR.

</html>
""") # noqa: E501 line too long
"""
)
no_imports_result_re = re.compile(no_imports_result_raw)

all_defaults_re = re.compile(r"""
all_defaults_re = re.compile(
r'''
<!DOCTYPE html>
<html>
<head>
Expand All @@ -46,15 +58,19 @@
MathJax\.Hub\.Config\({ "SVG": { blacker: 0 }}\)
</script>

<script src="'''
+ _re_default_mathjax
+ r""""></script>
<script src="\S[^\n]*/package_data/plotly\.min\.js" charset="utf-8"></script>
<script src="https://cdn\.jsdelivr\.net/npm/mathjax@3\.2\.2/es5/tex-svg\.js"></script>
<script src="\S[^\n]*/kaleido_scopes\.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image" /></body>
</html>
""")
""",
)

with_plot_result_re = re.compile(r"""
with_plot_result_re = re.compile(
r'''
<!DOCTYPE html>
<html>
<head>
Expand All @@ -67,13 +83,16 @@
MathJax\.Hub\.Config\({ "SVG": { blacker: 0 }}\)
</script>

<script src="'''
+ _re_default_mathjax
+ r""""></script>
<script src="https://with_plot" charset="utf-8"></script>
<script src="https://cdn\.jsdelivr\.net/npm/mathjax@3\.2\.2/es5/tex-svg\.js"></script>
<script src="\S[^\n]*/kaleido_scopes\.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image" /></body>
</html>
""")
""",
)

without_math_result_re = re.compile(r"""
<!DOCTYPE html>
Expand All @@ -91,11 +110,11 @@
<script src="https://with_plot" charset="utf-8"></script>
<script src="\S[^\n]*/kaleido_scopes\.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image" /></body>
</html>
""")

with_others_result_re = re.compile(r"""
with_others_result_raw = r"""
<!DOCTYPE html>
<html>
<head>
Expand All @@ -108,15 +127,16 @@
MathJax\.Hub\.Config\({ "SVG": { blacker: 0 }}\)
</script>

<script src="https://with_plot" charset="utf-8"></script>
<script src="https://with_mathjax"></script>
<script src="https://with_plot" charset="utf-8"></script>
<script src="https://1"></script>
<script src="https://2"></script>
<script src="\S[^\n]*/kaleido_scopes\.js"></script>
</head>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image"></img></body>
<body style="{margin: 0; padding: 0;}"><img id="kaleido-image" /></body>
</html>
""")
"""
with_others_result_re = re.compile(with_others_result_raw)


@pytest.mark.order(1)
Expand All @@ -136,7 +156,11 @@ async def test_page_generator():
"in the main group.",
)
no_imports = PageGenerator().generate_index()
assert no_imports_result_re.findall(no_imports)
assert no_imports_result_re.findall(no_imports), (
f"{len(no_imports_result_raw)}: {no_imports_result_raw}"
"\n"
f"{len(no_imports)}: {no_imports}"
)
sys.path = old_path

# this imports plotly so above test must have already been done
Expand All @@ -157,7 +181,11 @@ async def test_page_generator():
mathjax="https://with_mathjax",
others=["https://1", "https://2"],
).generate_index()
assert with_others_result_re.findall(with_others)
assert with_others_result_re.findall(with_others), (
f"{len(with_others_result_raw)}: {with_others_result_raw}"
"\n"
f"{len(with_others)}: {with_others}"
)


# test others
Loading