# Latex Pane Update Flicker

I wanted to put together a Quadric Surface Viewer.
The following code first displays the latex equation as is before it is rendered.

• Is there a way to prevent the flicker?

Since I am here and asking a question, I am unclear as to how to tie the controls
to a DynamicMap with a plot function that requires the parameters a,b,c as an input.

• What do I need to read to figure it out?
def eqn_text( a, b, c ):
_a  = np.round(a,2); a_txt = f'{_a}' + '\\ x^2'  if _a != 0. else ''
_b  = np.round(b,2); b_txt = f'{_b}' + '\\ x y'  if _b != 0. else ''
_c  = np.round(c,2); c_txt = f'{_c}' + '\\ y^2'  if _c != 0. else ''
txt = "$\\Large{ f(x,y) \\ = \\ " + \ a_txt + ( ' + ' if _b > 0. else '' ) + b_txt \ + ( ' + ' if _c > 0. else '' ) + c_txt + " }$"
return txt
a  = param.Number( default=1., bounds=(-2.,2.))
b  = param.Number( default=0., bounds=(-2.,2.))
c  = param.Number( default=1., bounds=(-2.,2.))

cut  = param.Number( default=0., bounds=(0.,1.))

def __init__(self, N=100, e=8., **params ):
x          = np.linspace(-e, e, N); y = x
self.grid  = np.meshgrid(x,y)
# self.dmap = hv.DynamicMap( lambda cut,a,b,c : show_full_plot( *grid, a, b, c, cut, cmap="blues"), kdims=["a","b","c","cut"] )
#     .redim.range( a=(-1.,1.), b=(-3.,3.), c=(-1.,1.), cut=(0.,1) ).opts(axiswise=True, framewise=True)

def view(self):
eqn = pn.pane.LaTeX( eqn_text(self.a, self.b, self.c), renderer='mathjax' )
return eqn

pn.Column(obj.view, pn.Spacer(height=10), obj.param )


Hi @ea42gh

Try using the katex renderer instead of mathjax. It works better for me.

import param
import numpy as np
import panel as pn

def eqn_text( a, b, c ):
_a  = np.round(a,2); a_txt = f'{_a}' + '\\ x^2'  if _a != 0. else ''
_b  = np.round(b,2); b_txt = f'{_b}' + '\\ x y'  if _b != 0. else ''
_c  = np.round(c,2); c_txt = f'{_c}' + '\\ y^2'  if _c != 0. else ''
txt = "$\\Large{ f(x,y) \\ = \\ " + \ a_txt + ( ' + ' if _b > 0. else '' ) + b_txt \ + ( ' + ' if _c > 0. else '' ) + c_txt + " }$"
return txt
a  = param.Number( default=1., bounds=(-2.,2.))
b  = param.Number( default=0., bounds=(-2.,2.))
c  = param.Number( default=1., bounds=(-2.,2.))

cut  = param.Number( default=0., bounds=(0.,1.))

def __init__(self, N=100, e=8., **params ):
x          = np.linspace(-e, e, N); y = x
self.grid  = np.meshgrid(x,y)
# self.dmap = hv.DynamicMap( lambda cut,a,b,c : show_full_plot( *grid, a, b, c, cut, cmap="blues"), kdims=["a","b","c","cut"] )
#     .redim.range( a=(-1.,1.), b=(-3.,3.), c=(-1.,1.), cut=(0.,1) ).opts(axiswise=True, framewise=True)
super().__init__(**params)

self.view = pn.pane.LaTeX( eqn_text(self.a, self.b, self.c), renderer='katex' )

@param.depends("a", "b", "c", "cut", watch=True)
def _update_latex(self):
self.view.object = eqn_text(self.a, self.b, self.c)

pn.Column(obj.view, pn.Spacer(height=10), obj.param ).servable()


Hello @Marc
I had started panel with pn.extension('katex', 'mathjax')
Is there something else I need to do? That flicker is pronounced!

1 Like

Hi @ea42gh

Can you share a video of the flickr? Iām not sure I understand then.

On the video I provided and using the updated code I provided I do not see any flickr.

Thanks

Here is a gif: I see the same behavior in Linux as well as Windows

Hi @ea42gh

With renderer="katex" i do not see that flickr.

This is the code I used in the (classic) notebook

import param
import numpy as np
import panel as pn
pn.extension("katex")

def eqn_text( a, b, c ):
_a  = np.round(a,2); a_txt = f'{_a}' + '\\ x^2'  if _a != 0. else ''
_b  = np.round(b,2); b_txt = f'{_b}' + '\\ x y'  if _b != 0. else ''
_c  = np.round(c,2); c_txt = f'{_c}' + '\\ y^2'  if _c != 0. else ''
txt = "$\\Large{ f(x,y) \\ = \\ " + \ a_txt + ( ' + ' if _b > 0. else '' ) + b_txt \ + ( ' + ' if _c > 0. else '' ) + c_txt + " }$"
return txt
a  = param.Number( default=1., bounds=(-2.,2.))
b  = param.Number( default=0., bounds=(-2.,2.))
c  = param.Number( default=1., bounds=(-2.,2.))

cut  = param.Number( default=0., bounds=(0.,1.))

def __init__(self, N=100, e=8., **params ):
x          = np.linspace(-e, e, N); y = x
self.grid  = np.meshgrid(x,y)
# self.dmap = hv.DynamicMap( lambda cut,a,b,c : show_full_plot( *grid, a, b, c, cut, cmap="blues"), kdims=["a","b","c","cut"] )
#     .redim.range( a=(-1.,1.), b=(-3.,3.), c=(-1.,1.), cut=(0.,1) ).opts(axiswise=True, framewise=True)
super().__init__(**params)

self.view = pn.pane.LaTeX( eqn_text(self.a, self.b, self.c), renderer='katex' )

@param.depends("a", "b", "c", "cut", watch=True)
def _update_latex(self):
self.view.object = eqn_text(self.a, self.b, self.c)