From c1727e9e535904ea2451f80d63f58bb2969f8238 Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Thu, 15 Jun 2023 17:20:38 +0200
Subject: [PATCH] fix: re-render latex support

When a description changed, update the latex rendering.

Similar to https://github.com/voila-dashboards/voila/pull/531
---
 packages/solara-widget-manager/src/mathjax.ts |  20 +++++++++++++++++-
 tests/integration/latex_test.py               |  20 ++++++++++++++++++
 ...flask-chromium-linux-changed-reference.png | Bin 0 -> 1049 bytes
 ..._solara-flask-chromium-linux-reference.png | Bin 0 -> 1672 bytes
 ...lette-chromium-linux-changed-reference.png | Bin 0 -> 1049 bytes
 ...ara-starlette-chromium-linux-reference.png | Bin 0 -> 1672 bytes
 6 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 tests/integration/latex_test.py
 create mode 100644 tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-changed-reference.png
 create mode 100644 tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-reference.png
 create mode 100644 tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-changed-reference.png
 create mode 100644 tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-reference.png

diff --git a/packages/solara-widget-manager/src/mathjax.ts b/packages/solara-widget-manager/src/mathjax.ts
index c35b1b46d..24464ac6c 100644
--- a/packages/solara-widget-manager/src/mathjax.ts
+++ b/packages/solara-widget-manager/src/mathjax.ts
@@ -20,8 +20,10 @@ RegisterHTMLHandler(browserAdaptor());
 
 // Override dynamically generated fonts in favor
 // of our font css that is picked up by webpack.
+// @ts-ignore
 class emptyFont extends TeXFont {
-  readonly defaultFonts = {};
+  // @ts-ignore
+  static defaultFonts = {};
 }
 
 const chtml = new CHTML({
@@ -57,3 +59,19 @@ export function renderMathJax(): void {
     .updateDocument()
     .reset();
 }
+// this makes it compatible with the old MathJax
+// see https://github.com/voila-dashboards/voila/pull/531
+// @ts-ignore
+window.MathJax = {
+  Hub: {
+    // @ts-ignore
+    Queue: ([_ignore, _ignore2, node]) => {
+      html.findMath({ elements: [node] })
+        .compile()
+        .getMetrics()
+        .typeset()
+        .updateDocument()
+        .reset()
+    }
+  }
+}
diff --git a/tests/integration/latex_test.py b/tests/integration/latex_test.py
new file mode 100644
index 000000000..7596a6514
--- /dev/null
+++ b/tests/integration/latex_test.py
@@ -0,0 +1,20 @@
+import ipywidgets as widgets
+import playwright.sync_api
+from IPython.display import display
+
+
+def test_widget_button_solara(solara_test, page_session: playwright.sync_api.Page, assert_solara_snapshot):
+    slider = widgets.FloatSlider(description=r"$E \sim mc^2$")
+    slider.add_class("test-class")
+    display(slider)
+
+    page_session.locator(".test-class >> .mjx-c1D438").wait_for()
+    page_session.evaluate("document.fonts.ready")
+    page_session.wait_for_timeout(100)
+    assert_solara_snapshot(page_session.locator(".test-class").screenshot())
+    slider.description = r"$\alpha$"
+    slider.add_class("test-changed-class")
+    page_session.locator(".test-changed-class >>  .mjx-c1D6FC").wait_for()
+    page_session.evaluate("document.fonts.ready")
+    page_session.wait_for_timeout(100)
+    assert_solara_snapshot(page_session.locator(".test-changed-class").screenshot(), postfix="-changed")
diff --git a/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-changed-reference.png b/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-changed-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..8aeb7874524a5b2e38d67ce78fd19bba6d7b7760
GIT binary patch
literal 1049
zcmV+!1m^pRP)<h;3K|Lk000e1NJLTq00Arj000~a1^@s6+i-$x00001b5ch_0Itp)
z=>Px&(@8`@RCt{2+`msEZ4d|WuVSL%hsJ`il1M}gM1|7WnV`mk)`Y^uPAe1r4=ikq
zmNxnyXk%ewV<Kp2VgnkrU=@snU9mt|2`I~4@#aV_cfjtw0=IEK<?cMQQw_V%Gogcs
z2#hgi0G;hFfHB6j;)cZ-GYoE6j4{LDhQ$~&3~pGAF~jI;cLCpxs;WpPlgQ<AP!t6K
zV6|Fdv)SNwyV2Rnzafm((!pa5ts_Yi?(gq0GBN_Q*$k`I3II?P1@G_g5JeGQuNQ(K
zw7F8o{!QGlS|puL<Ms6wKA*2{Tr3uY-EPOgz(9*CW6U`C`=bRUNkS%*Y1pg)!0-1X
zlgU7q<rY-Nz9Uf-5ekLi^Z774JB#DvW8HCDb9^~sO;s+JDH4h3UKb9BNmbP*RK&i!
zU@%DA+uM}O<tP$~(CFwWJv}|?iqo3otMMmc9d~zk*xK5H)9FMuo5lM2I*yKxkVqu3
zzrU|3$HT(|y1KgHa=COpJDE(PQmMf0cK=Q3jQ!E`^E0NWr*VCK4YSz{09agH#Qgj`
zmX?+@#RUQZO*xu@PYG-I`1rue$_m!j*08X!09lr?y1I%&p@5Bz4b6FSxf})u2X#N+
zVzJ=n<_3?CkGj{ge@`F~Xm<$!{@b4D@9(cR8US!Qosc9+bDY*3&A@wDHC$a?A(cvD
zZf*_$;BYu#u~<Mvn4Fx{oJUcV>S>@JHk(cN8pawal}f*j&X`Ollu9MdaawaU1HWO_
zkWQyzGMUiV*H^vfa=9=zHrB?f82f*^ySq^?mw&mYsw#SVdNjvr&Cv|}hE;>rYK5w*
zC>DzVfO5Hv^Ye4WVlmx$eh!H0k<aIOh?IRfK@jlv_J({uU%i$}rG6WusTZd;M^iL?
zTi>8$StgIiL#L;wL`1Z=w@16XyX5hBD4We{&LfKAU!9&L5(yGTQTIB=8VLr2w7I$Y
z%L!j9l_Dadi;D|V6s2KYy?f2X4XcjB!$S%L0<^rmOa})CR4f+B>-Eyk&W`3Bs;W{r
z9M=8pv$Hd*R4TgHG1f>t9;Z+!L=zJeG&3_pCnqOFMD+RjNmEl(ba{DMH?GmWX5z7i
z7LX(fFE20f`~8~YqtPe?L4d>IXmVwY84GWcw16N8u-om3Mxza5qtPfF4hJ_Y#{Pic
zuv$o#W!&E0Vt9BM7K^1ix{%N3Q79A;kH;}SKF-aGu^PBxwOFN6ss6pp&r=qg&4%9I
zUJMNlp`)Xt%@s2C@8X8V7&8ps!(xmX1~)9mm|<|kVvHFEH!Q}OVQ|A@j2Xrcu?g^c
TOt>Ic00000NkvXXu0mjf3?A>Z

literal 0
HcmV?d00001

diff --git a/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-reference.png b/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-flask-chromium-linux-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..237b37926a66daa7a92e50ed6d5616f83ffa24b9
GIT binary patch
literal 1672
zcmV;326y?1P)<h;3K|Lk000e1NJLTq00Arj000~a1^@s6+i-$x00001b5ch_0Itp)
z=>Px*LP<nHRCt{2++RpjZ5#*i?`hK=w{#pgTCK6Nu$BEI<|Kp?RuDx75hOA2qKinn
z*p)<Oc_CdXK@pW8WZ3AUi~bQ5Ayh;m6@t=5G>u`!raAxYEYI1d&wC+`e0_Cixiekw
z?*qHp`8|IW&Uepqcs7nP#y|)mIbg+7Pk<0Yl%l{QgyakgEJ8@mpui%8<P7anPau~x
zHa5a$vq2O^NRote=guwllnD7>p}<PRkt0XobUFb5hYlUWv17-uY11af?Ze?PCMG5z
z%Q6^a(CKvGc^-lwK%>#9HElxv8WdP*m<cNYkYyPwSFTjlP83B94Gp2Fs0c=*5j@X>
z<2cB&3|W>D2n0}ET#TZkBCJ?JyL3Y4qe@^U5(%`mwV|V<1MzqqyLRnLUK<}DM_E}J
zE?&H-#?V>O)zyWHiV9e*)|9oPC_)rP*zNW?t0=u*54~OwK@boMg%F8EP*_+<p+(3%
zRJk*>S}jhWJ`KCwj<T{cw6?Y;U)Qf+S7XSm`SRrpIy*bj)YO!+HWG<I6h)ZL=9F7L
zi^T#-k`ReRFf}!msp%3jM_*qbYHDh*efxIo-@hM^A3sjJPH7*Rmi3QvlgWg2>(*s^
z*o=7p{ypBjd4u!k&qJ$ScyY=Y!|?DhOeRyx+8Gv$1tTLP6j(%6UauGB<>h$$_AMG3
z8gTaPSquyeq*bT1k4)p#{A$jL6DOe4>CoQZzNmgANkSkHfZ1$@$z+;yJroMTVzJD6
z@6)GGxNzYDL{Y@5Rjc6l`vCx_PMyNQzyNxBdeGO`hvUbOqoJW;R@+yvUg6H2J6OAR
zEuzsV{C+<kJa~Ze@^aYi_GF#c>xJ9x{?9pw!(nh72cyxL))sGUYz&D+0)imW){tb}
zw{PE2RaJ%F-d^bSdH{gO<H3Og2T)sEtEkTHb}Q;b4OxBYe)sNOxLhtc91cbG6B84-
za^(tqJ|84W0s!pTu>;lB)u^bbKs+AD!-o&?<HrxQwYAM^yLIbU?AfyiA3l75&*uZj
zacFLC#_ij;(b?Gvp6BuM<x8AAc@k&NoPi(+0H(Kmb#--k^ym>vOG^O&mo8m`Mx#M@
zcemodRgxqW78WY5pOKfBhhQ*>-rinXY5fIwp2zz2>lHok%!Xhv2tg2%K?49*s};du
zP;s5oKGdLkV154l8TIw`0H#+xE|*Jj+jsBYp{J(@w{G3Sh7B9g-`|gC&z|ANjT^Xp
z`7$_;LuF;<f)DVuS}iz^0|4yYxf4F04?NEUm<}}n7#SH!2G;%i_fc9}nhYxde{|j|
z7K<T2KR-FPQu+D$$ji%1dpxo{&Fl`AOJK>eJZI&u(P$vcvf?_WeW*e8z;ZYoXl`x>
z0Qh{qwAwnIPTae9FZs{0*=*RmcQ2Znnh*+wU@#b9G#VE@$KQ9w;c$3Pp9KX4iyniJ
z<v^#?A(2STdT(-aGWj8{q)urcYRKwC5|76Nhr@y4;bDlPn6iGp=RX>a23D&zBVqM#
z7K;UggM*9ihv#|3Vlkxqh)|YgBoc|VS7u~+DkvyGNlD34Pa|pd>eUz<8$%=#Nxt{}
z`**Bavqo{9(mvF%BnL;^+uL#U=uyQ7FSF_J;lpTcZN-x(Pf%T5{m1?2bUMW2@wD3|
z5(${iW^CNJkxsvpjI-Hn*s^5{u3o(guh)x@A3vhIyBjSnEdYSmuV2IIbS_wDwOSYK
zLsd)#@pzowym^yVR#q~X%f;&I>Sn!ME*Bdb8d78EB){L!JRT3Ls;XkopFd}TK!DZP
z*R#!=H?xk84mLhM&aPd%#!5;`SW8O_lVv&C_Qi`A?BKzJ%<Xow+S*#y*x1NMM@Q2d
ze`;!qef|2C#pCg`+V%JMvsf&aRvSXn;rIJlO-&8kwrv~Rw{IVN`t&JdZ2G?4y?Zz7
z>grmsF4Z+Psd}v8|1KJhA`*$fY&I)8i#0en2%Szxr`-ve2i+AaG8han7!3IN^Cu=J
zCl{;@g+dfogrq<#tSpE|qX>mUFdB`?UugLK%g^C(7-qAX!ita-D6q0<baWKIe*J<Z
zNwa=lrntD6f{G9YD6j}2IfFjd2_ZRy0*ermGbpeKAvuErix84CD6j}2IpZIYm%yj;
SAFPc40000<MNUMnLSTX>))}M#

literal 0
HcmV?d00001

diff --git a/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-changed-reference.png b/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-changed-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..8aeb7874524a5b2e38d67ce78fd19bba6d7b7760
GIT binary patch
literal 1049
zcmV+!1m^pRP)<h;3K|Lk000e1NJLTq00Arj000~a1^@s6+i-$x00001b5ch_0Itp)
z=>Px&(@8`@RCt{2+`msEZ4d|WuVSL%hsJ`il1M}gM1|7WnV`mk)`Y^uPAe1r4=ikq
zmNxnyXk%ewV<Kp2VgnkrU=@snU9mt|2`I~4@#aV_cfjtw0=IEK<?cMQQw_V%Gogcs
z2#hgi0G;hFfHB6j;)cZ-GYoE6j4{LDhQ$~&3~pGAF~jI;cLCpxs;WpPlgQ<AP!t6K
zV6|Fdv)SNwyV2Rnzafm((!pa5ts_Yi?(gq0GBN_Q*$k`I3II?P1@G_g5JeGQuNQ(K
zw7F8o{!QGlS|puL<Ms6wKA*2{Tr3uY-EPOgz(9*CW6U`C`=bRUNkS%*Y1pg)!0-1X
zlgU7q<rY-Nz9Uf-5ekLi^Z774JB#DvW8HCDb9^~sO;s+JDH4h3UKb9BNmbP*RK&i!
zU@%DA+uM}O<tP$~(CFwWJv}|?iqo3otMMmc9d~zk*xK5H)9FMuo5lM2I*yKxkVqu3
zzrU|3$HT(|y1KgHa=COpJDE(PQmMf0cK=Q3jQ!E`^E0NWr*VCK4YSz{09agH#Qgj`
zmX?+@#RUQZO*xu@PYG-I`1rue$_m!j*08X!09lr?y1I%&p@5Bz4b6FSxf})u2X#N+
zVzJ=n<_3?CkGj{ge@`F~Xm<$!{@b4D@9(cR8US!Qosc9+bDY*3&A@wDHC$a?A(cvD
zZf*_$;BYu#u~<Mvn4Fx{oJUcV>S>@JHk(cN8pawal}f*j&X`Ollu9MdaawaU1HWO_
zkWQyzGMUiV*H^vfa=9=zHrB?f82f*^ySq^?mw&mYsw#SVdNjvr&Cv|}hE;>rYK5w*
zC>DzVfO5Hv^Ye4WVlmx$eh!H0k<aIOh?IRfK@jlv_J({uU%i$}rG6WusTZd;M^iL?
zTi>8$StgIiL#L;wL`1Z=w@16XyX5hBD4We{&LfKAU!9&L5(yGTQTIB=8VLr2w7I$Y
z%L!j9l_Dadi;D|V6s2KYy?f2X4XcjB!$S%L0<^rmOa})CR4f+B>-Eyk&W`3Bs;W{r
z9M=8pv$Hd*R4TgHG1f>t9;Z+!L=zJeG&3_pCnqOFMD+RjNmEl(ba{DMH?GmWX5z7i
z7LX(fFE20f`~8~YqtPe?L4d>IXmVwY84GWcw16N8u-om3Mxza5qtPfF4hJ_Y#{Pic
zuv$o#W!&E0Vt9BM7K^1ix{%N3Q79A;kH;}SKF-aGu^PBxwOFN6ss6pp&r=qg&4%9I
zUJMNlp`)Xt%@s2C@8X8V7&8ps!(xmX1~)9mm|<|kVvHFEH!Q}OVQ|A@j2Xrcu?g^c
TOt>Ic00000NkvXXu0mjf3?A>Z

literal 0
HcmV?d00001

diff --git a/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-reference.png b/tests/ui/snapshots/tests/integration/latex_test.py/test_widget_button_solara-starlette-chromium-linux-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..535adf126ffedc8834bd69cb167458283d142fa4
GIT binary patch
literal 1672
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
SEt~BC0000<MNUMnLSTaN^e##O

literal 0
HcmV?d00001