Specify Font Family and size in TabelColumn StringFormatter

[boomertn]

Hello,
I have a Bokeh app that I have written that display the contents of a text file using a ColumnDataSource that contains the text placed in a TableColumn, placed in a DataTable, placed in a Panel, placed on a Tabs tab. The app displays a lot of information in different tabs that allows us to browse an in-house database. The text file contains lines that use spaces to form columns of information. There are several sections of the file that use different columns and it is not really appropriate to try to display each section in a separate tab. The file display is more for quick inspection. Other parts of the app allow specification of different files to view as well as plots, other data tables, and images so the text is not fixed, hence the use of the ColumnDataSource.

I am able to display the file contents but it seems that the TableColumn uses a variable width font that makes the contents very hard to read.

If I display the text on a Panel using a PreText widget, the text shows properly but there is no scrollbar to allow scrolling through the file which is typically several hundred lines long.

I tried using a StringFormatter to attempt to specify a font_family but that option is not valid. It seems the StringFormatter only allows font_style, text_align, and text_color to be specified.

In the “Styling Visual Attributes” section of the Bokeh User Guide, text properties are listed that allow selection of the text_font, text_font_size, etc. but these properties do not seem to apply to the TableColumn widget.

This file display is the ugliest part of my app and I’m trying to improve it’s appearance. Here is the code used to demonstrate this issue:

from bokeh.io import output_notebook, show

from bokeh.layouts import widgetbox, column, row

from bokeh.models import ColumnDataSource,TableColumn, DataTable

from bokeh.models.widgets import Paragraph, PreText, Panel, Tabs, StringFormatter

output_notebook()

textfile = ‘MOD_Report.log’

with open(textfile,‘rt’) as f:

text = f.read()

w=900

qtext = ["%s" % t for t in text.split(’\n’)]

p=PreText(text=text,width=w,height=1000)

tab1=Panel(child=p,title=“PreText”)

cds = ColumnDataSource({‘contents’:qtext})

fmt = StringFormatter(text_color=‘red’); #font_style=“bold”,text_font=‘times’)

tc = TableColumn(field=‘contents’,formatter=fmt,title=‘CDS text’,width=w)

tab2 = Panel(child=DataTable(source=cds,columns=[tc],editable=False,width=w,height=800),title=‘CDS Text’)

tabs = Tabs(tabs=[tab1,tab2])

show(tabs)

Thanks in advance for any suggestions as to a solution, either to add scrollbars to the PreText Panel or change the font in the TableColumn.

Larry Byars

[Bryan]

Hi,

Did you try the HTML template formatter?

https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.HTMLTemplateFormatter

Thanks,

Bryan

···

On Oct 18, 2018, at 13:55, [email protected] wrote:

Hello,
I have a Bokeh app that I have written that display the contents of a text file using a ColumnDataSource that contains the text placed in a TableColumn, placed in a DataTable, placed in a Panel, placed on a Tabs tab. The app displays a lot of information in different tabs that allows us to browse an in-house database. The text file contains lines that use spaces to form columns of information. There are several sections of the file that use different columns and it is not really appropriate to try to display each section in a separate tab. The file display is more for quick inspection. Other parts of the app allow specification of different files to view as well as plots, other data tables, and images so the text is not fixed, hence the use of the ColumnDataSource.

I am able to display the file contents but it seems that the TableColumn uses a variable width font that makes the contents very hard to read.

<Screenshot_2018-10-18_16-12-31.png>

If I display the text on a Panel using a PreText widget, the text shows properly but there is no scrollbar to allow scrolling through the file which is typically several hundred lines long.

<Screenshot_2018-10-18_16-32-08.png>

I tried using a StringFormatter to attempt to specify a font_family but that option is not valid. It seems the StringFormatter only allows font_style, text_align, and text_color to be specified.

In the “Styling Visual Attributes” section of the Bokeh User Guide, text properties are listed that allow selection of the text_font, text_font_size, etc. but these properties do not seem to apply to the TableColumn widget.

This file display is the ugliest part of my app and I’m trying to improve it’s appearance. Here is the code used to demonstrate this issue:

from bokeh.io import output_notebook, show

from bokeh.layouts import widgetbox, column, row

from bokeh.models import ColumnDataSource,TableColumn, DataTable

from bokeh.models.widgets import Paragraph, PreText, Panel, Tabs, StringFormatter

output_notebook()

textfile = ‘MOD_Report.log’

with open(textfile,‘rt’) as f:

text = f.read()

w=900

qtext = [“%s” % t for t in text.split(‘\n’)]

p=PreText(text=text,width=w,height=1000)

tab1=Panel(child=p,title=“PreText”)

cds = ColumnDataSource({‘contents’:qtext})

fmt = StringFormatter(text_color=‘red’); #font_style=“bold”,text_font=‘times’)

tc = TableColumn(field=‘contents’,formatter=fmt,title=‘CDS text’,width=w)

tab2 = Panel(child=DataTable(source=cds,columns=[tc],editable=False,width=w,height=800),title=‘CDS Text’)

tabs = Tabs(tabs=[tab1,tab2])

show(tabs)

Thanks in advance for any suggestions as to a solution, either to add scrollbars to the PreText Panel or change the font in the TableColumn.

Larry Byars

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/72c5a75f-89c7-45fa-b0ca-6a8975fd2fcf%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

<Screenshot_2018-10-18_16-12-31.png>

<Screenshot_2018-10-18_16-32-08.png>

[boomertn]

Hello Bryan,

Thank you for the reply. Not being an HTML/CSS guy (I have a hard enough time with python and Bokeh) can you give me a clue on how to specify the font using the HTML template formatter?

I tried:

template=“”"

font-family:‘Courier’;

“”"

fmt = HTMLTemplateFormatter(template=template)

tc = TableColumn(field=‘contents’,formatter=fmt,title=‘CDS text’,width=w)

but all I get is "font-family:‘Courier’: for every line instead of the text from the file…so obviously I’m missing something.

Can you (or someone else) help me with this? I do believe you gave the right answer, it’s just not sufficiently explicit for me to understand/incorporate and I haven’t been able to find any examples.

Thanks,

Larry

As I understand from other posts, HTML5 does not allow specification of a font, you have to use CSS.

but then all I got was multiple lines of "font-family: ‘Courier’ instead of the contents of the file. So I’m sure that is not sufficient

···

On Thursday, October 18, 2018 at 4:57:44 PM UTC-4, Larry Byars wrote:

Hello,
I have a Bokeh app that I have written that display the contents of a text file using a ColumnDataSource that contains the text placed in a TableColumn, placed in a DataTable, placed in a Panel, placed on a Tabs tab. The app displays a lot of information in different tabs that allows us to browse an in-house database. The text file contains lines that use spaces to form columns of information. There are several sections of the file that use different columns and it is not really appropriate to try to display each section in a separate tab. The file display is more for quick inspection. Other parts of the app allow specification of different files to view as well as plots, other data tables, and images so the text is not fixed, hence the use of the ColumnDataSource.

I am able to display the file contents but it seems that the TableColumn uses a variable width font that makes the contents very hard to read.

If I display the text on a Panel using a PreText widget, the text shows properly but there is no scrollbar to allow scrolling through the file which is typically several hundred lines long.

I tried using a StringFormatter to attempt to specify a font_family but that option is not valid. It seems the StringFormatter only allows font_style, text_align, and text_color to be specified.

In the “Styling Visual Attributes” section of the Bokeh User Guide, text properties are listed that allow selection of the text_font, text_font_size, etc. but these properties do not seem to apply to the TableColumn widget.

This file display is the ugliest part of my app and I’m trying to improve it’s appearance. Here is the code used to demonstrate this issue:

from bokeh.io import output_notebook, show

from bokeh.layouts import widgetbox, column, row

from bokeh.models import ColumnDataSource,TableColumn, DataTable

from bokeh.models.widgets import Paragraph, PreText, Panel, Tabs, StringFormatter

output_notebook()

textfile = ‘MOD_Report.log’

with open(textfile,‘rt’) as f:

text = f.read()

w=900

qtext = [“%s” % t for t in text.split(‘\n’)]

p=PreText(text=text,width=w,height=1000)

tab1=Panel(child=p,title=“PreText”)

cds = ColumnDataSource({‘contents’:qtext})

fmt = StringFormatter(text_color=‘red’); #font_style=“bold”,text_font=‘times’)

tc = TableColumn(field=‘contents’,formatter=fmt,title=‘CDS text’,width=w)

tab2 = Panel(child=DataTable(source=cds,columns=[tc],editable=False,width=w,height=800),title=‘CDS Text’)

tabs = Tabs(tabs=[tab1,tab2])

show(tabs)

Thanks in advance for any suggestions as to a solution, either to add scrollbars to the PreText Panel or change the font in the TableColumn.

Larry Byars

[boomertn]

Ok Bryan,

Again, thanks for your suggestion of using the HTML template formatter. I finally came up with a template that almost works. It works in Jupyter Notebook but not when the app is run with bokeh serve (with appropriate modifications to switch between them). The template is :

template=“

<%= value %>

”

which if I understand properly, and I probably don’t, uses the pretext HTML format. As I said, it works great when the app is run under jupyter but when run under bokeh the text is horizontally spaced correctly but offset vertically in each cell so as to be almost unreadable…here’s a small image that shows the effect…

The main problem is that my app that will use this technique to display two different files has to run as a bokeh app because of the interaction that it uses. The app works great otherwise and gives us access to a large (>1.5M records) historical database with images, plots, and all sorts of very useful information, easily accessed.

So, any idea how I might modify the template to avoid this problem?

Again, thanks for your help.

Larry Byars

···

On Sunday, October 21, 2018 at 3:45:36 PM UTC-4, Bryan Van de ven wrote:

Hi,

Did you try the HTML template formatter?

https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.HTMLTemplateFormatter

Thanks,

Bryan

On Oct 18, 2018, at 13:55, [email protected] wrote:

Hello,
I have a Bokeh app that I have written that display the contents of a text file using a ColumnDataSource that contains the text placed in a TableColumn, placed in a DataTable, placed in a Panel, placed on a Tabs tab. The app displays a lot of information in different tabs that allows us to browse an in-house database. The text file contains lines that use spaces to form columns of information. There are several sections of the file that use different columns and it is not really appropriate to try to display each section in a separate tab. The file display is more for quick inspection. Other parts of the app allow specification of different files to view as well as plots, other data tables, and images so the text is not fixed, hence the use of the ColumnDataSource.

I am able to display the file contents but it seems that the TableColumn uses a variable width font that makes the contents very hard to read.

<Screenshot_2018-10-18_16-12-31.png>

If I display the text on a Panel using a PreText widget, the text shows properly but there is no scrollbar to allow scrolling through the file which is typically several hundred lines long.

<Screenshot_2018-10-18_16-32-08.png>

I tried using a StringFormatter to attempt to specify a font_family but that option is not valid. It seems the StringFormatter only allows font_style, text_align, and text_color to be specified.

In the “Styling Visual Attributes” section of the Bokeh User Guide, text properties are listed that allow selection of the text_font, text_font_size, etc. but these properties do not seem to apply to the TableColumn widget.

This file display is the ugliest part of my app and I’m trying to improve it’s appearance. Here is the code used to demonstrate this issue:

from bokeh.io import output_notebook, show

from bokeh.layouts import widgetbox, column, row

from bokeh.models import ColumnDataSource,TableColumn, DataTable

from bokeh.models.widgets import Paragraph, PreText, Panel, Tabs, StringFormatter

output_notebook()

textfile = ‘MOD_Report.log’

with open(textfile,‘rt’) as f:

text = f.read()

w=900

qtext = [“%s” % t for t in text.split(‘\n’)]

p=PreText(text=text,width=w,height=1000)

tab1=Panel(child=p,title=“PreText”)

cds = ColumnDataSource({‘contents’:qtext})

fmt = StringFormatter(text_color=‘red’); #font_style=“bold”,text_font=‘times’)

tc = TableColumn(field=‘contents’,formatter=fmt,title=‘CDS text’,width=w)

tab2 = Panel(child=DataTable(source=cds,columns=[tc],editable=False,width=w,height=800),title=‘CDS Text’)

tabs = Tabs(tabs=[tab1,tab2])

show(tabs)

Thanks in advance for any suggestions as to a solution, either to add scrollbars to the PreText Panel or change the font in the TableColumn.

Larry Byars

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/72c5a75f-89c7-45fa-b0ca-6a8975fd2fcf%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

<Screenshot_2018-10-18_16-12-31.png>

<Screenshot_2018-10-18_16-32-08.png>

[Bryan]

Hi,

I'm sorry, I don't have any concrete advice to offer at present. It's possible you could add custom CSS rules to target the table divs to make them taller, but there's nothing specific I can suggest. You'd need to inspect and experiment with the DOM structure of the renderered app page and see what works, and put that in a stylesheet template for the app. Otherwise, it seems like it might be a bug, so at this point I'd recommend a GitHub issue with a complete minimal script to reproduce the problem.

Thanks,

Bryan

···

On Oct 24, 2018, at 14:05, [email protected] wrote:

Ok Bryan,

Again, thanks for your suggestion of using the HTML template formatter. I finally came up with a template that *almost* works. It works in Jupyter Notebook but not when the app is run with bokeh serve (with appropriate modifications to switch between them). The template is :

template="<pre><%= value %></pre>"

which if I understand properly, and I probably don't, uses the pretext HTML format. As I said, it works great when the app is run under jupyter but when run under bokeh the text is horizontally spaced correctly but offset vertically in each cell so as to be almost unreadable...here's a small image that shows the effect...
<Screenshot_2018-10-24_17-01-48.png>

The main problem is that my app that will use this technique to display two different files has to run as a bokeh app because of the interaction that it uses. The app works great otherwise and gives us access to a large (>1.5M records) historical database with images, plots, and all sorts of very useful information, easily accessed.

So, any idea how I might modify the template to avoid this problem?

Again, thanks for your help.

Larry Byars
On Sunday, October 21, 2018 at 3:45:36 PM UTC-4, Bryan Van de ven wrote:
Hi,

Did you try the HTML template formatter?

https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.HTMLTemplateFormatter

Thanks,

Bryan

On Oct 18, 2018, at 13:55, boom...@gmail.com wrote:

Hello,
I have a Bokeh app that I have written that display the contents of a text file using a ColumnDataSource that contains the text placed in a TableColumn, placed in a DataTable, placed in a Panel, placed on a Tabs tab. The app displays a lot of information in different tabs that allows us to browse an in-house database. The text file contains lines that use spaces to form columns of information. There are several sections of the file that use different columns and it is not really appropriate to try to display each section in a separate tab. The file display is more for quick inspection. Other parts of the app allow specification of different files to view as well as plots, other data tables, and images so the text is not fixed, hence the use of the ColumnDataSource.

I am able to display the file contents but it seems that the TableColumn uses a variable width font that makes the contents very hard to read.

<Screenshot_2018-10-18_16-12-31.png>

If I display the text on a Panel using a PreText widget, the text shows properly but there is no scrollbar to allow scrolling through the file which is typically several hundred lines long.

<Screenshot_2018-10-18_16-32-08.png>

I tried using a StringFormatter to attempt to specify a font_family but that option is not valid. It seems the StringFormatter only allows font_style, text_align, and text_color to be specified.

In the "Styling Visual Attributes" section of the Bokeh User Guide, text properties are listed that allow selection of the text_font, text_font_size, etc. but these properties do not seem to apply to the TableColumn widget.

This file display is the ugliest part of my app and I'm trying to improve it's appearance. Here is the code used to demonstrate this issue:

from bokeh.io import output_notebook, show

from bokeh.layouts import widgetbox, column, row

from bokeh.models import ColumnDataSource,TableColumn, DataTable

from bokeh.models.widgets import Paragraph, PreText, Panel, Tabs, StringFormatter

output_notebook()

textfile = 'MOD_Report.log'

with open(textfile,'rt') as f:

    text = f.read()

w=900

qtext = ["%s" % t for t in text.split('\n')]

p=PreText(text=text,width=w,height=1000)

tab1=Panel(child=p,title="PreText")

cds = ColumnDataSource({'contents':qtext})

fmt = StringFormatter(text_color='red'); #font_style="bold",text_font='times')

tc = TableColumn(field='contents',formatter=fmt,title='CDS text',width=w)

tab2 = Panel(child=DataTable(source=cds,columns=[tc],editable=False,width=w,height=800),title='CDS Text')

tabs = Tabs(tabs=[tab1,tab2])

show(tabs)

Thanks in advance for any suggestions as to a solution, either to add scrollbars to the PreText Panel or change the font in the TableColumn.

Larry Byars

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/72c5a75f-89c7-45fa-b0ca-6a8975fd2fcf%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
<Screenshot_2018-10-18_16-12-31.png>
<Screenshot_2018-10-18_16-32-08.png>

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f8505d9f-5374-45c0-9744-44c3103993db%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
<Screenshot_2018-10-24_17-01-48.png>