How to use dash callback function to return large chunk of text?

Dash Python
1

Hello!

How to use dash callback function to return large chunk of text on the web page?

Thanks ahead!

For example if I have a method generating the following text:

select all
color none
center all
wireframe off
spacefill off
ribbons off
backbone off
strands off
cartoons off
trace off
dots off
label off
SSbonds off
hbonds off
monitor off
slab off
set echo off
set hbonds sidechain
set ssbonds sidechain

select protein
cartoons on
background [255, 255, 255]
select protein
color [128, 128, 128]

select 1-19:h
color [58, 26, 83]
select 20-30:h
color [51, 19, 70]
select 31-38:h
color [50, 18, 67]
select 39-43:h
color [249, 109, 64]
select 44-50:h
color [48, 16, 64]
select 51-58:h
color [236, 19, 38]
select 59-64:h
color [53, 21, 74]
select 65-75:h
color [48, 16, 64]
select 76-83:h
color [255, 171, 64]
select 95-117:h
color [64, 109, 134]
select 118-129:h
color [48, 16, 64]
select 130-145:h
color [50, 18, 67]
select 144-157:h
color [48, 16, 64]
select 162-166:h
color [32, 160, 64]
select 167-178:h
color [224, 32, 64]
select 179-185:h
color [48, 16, 64]
select 186-206:h
color [48, 16, 64]
select 219-222:h
color [48, 16, 64]
select 229-235:h
color [48, 16, 64]
select 236-261:h
color [48, 16, 64]
select 262-268:h
color [75, 174, 69]
select 269-287:h

2

@yaochen, you can create a div and update the children in a callback as such:

@app.callback(Output('chunk-of-text-div', 'children'),
            [Input('trigger','value')])
def generate_chunk(_):
    chunks = [
        'select all',
        'color none',
        'center all',
        'wireframe off',
        'spacefill off',
        'ribbons off',
        'backbone off'
        ]
    return [html.P(children=chunk) for chunk in chunks]

Of course you can choose whatever html element and styling to use, but this is the general idea.
Hope this helps.

1 Like
3

Alternatively use a html.Pre(text) or html.Div(text, style={'whiteSpace': 'pre-line'}) (white-space docs: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) or dcc.Markdown(text)

1 Like
4

Thank you soooo very much!

One more follow up question. What should I write in the layout to accept these much “html.P(children=chunk)”?

Thanks again!!!

5

@yaochen, if you use my method, then you will create a div in the layout. Continuing with my example, you would need to create a div as such:

# app.layout = ....
    html.Div(id='chunk-of-text-div')

In the callback, make sure that you are updating the children property.

1 Like
6

Hi when I try this
app.layout = …
html.Div(id=‘chunk-of-text-div’). It says missing dcc component or format. I tried the Textarea and it still doesn’t work. What should I used?
Thanks