Latex Pane Update Flicker

Panel
1

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
class QuadricViewer(param.Parameterized):
    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(QuadricViewer, self).__init__(**params)

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

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

Hi @ea42gh

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

latex_example2

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
class QuadricViewer(param.Parameterized):
    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)

obj = QuadricViewer()

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

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
4

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

5

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

LatexFlicker
LatexFlicker896Ɨ1078 418 KB

6

Hi @ea42gh

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

image
image2187Ɨ346 16.9 KB

no_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
class QuadricViewer(param.Parameterized):
    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)

obj = QuadricViewer()

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

@Marc Darn, I kept reading over it!
Thanks for pointing out my error,
this resolves it!

1 Like