maintaining new lines from text file displayed in Dash

[Alcampopiano]

Hi there,

I checked the community support page but could not find this topic.

First of all, I love Dash. Complete game changer for me.

Anyway, I'm trying to build a web app that displays the contents of a Word document. Now, in the past I converted the Word doc to html and displayed it inside Jupyter lab's html text widget, and the html was rendered perfectly. In Dash I have tried doing this by converting the Word to html, then displaying the children as markdown (e.g., html.Div([dcc.Markdown(children=md)], id='md-values'). I have also tried just putting the children into a HTML.div directly. However, probably no surprise that the output is not rendered to rich text. Even if I feed plain text to Dash, none of the newlines are maintained. The text is wrapped and very difficult to read.

Can you think of way I could achieve what I'm trying to do here?

Thanks very much,
Allan

[chriddyp]

This is a really good question and gets to something that a lot of users has requested: rendering plain HTML strings in Dash. This is not possible right now.

I've avoided a pure HTML renderer for a few reasons:
1 - Security: Many Dash apps are shared on a multi-user environment (like Dash On-Premise). These multi-user environments will allow one user share an app with predefined controls to another user. By rendering custom HTML, a nefarious user could save an app that has malicious Javascript encoded in the HTML and share that with another user.
2 - Consistency: By allowing users to enter raw HTML, they may avoid the dash_html_components library and this will end up causing a lot of confusion as there would be two different ways to accomplish almost the same thing. However, in the raw HTML way, it wouldn't be possible to update child elements through app.callback like it is through the dash_html_components components library.

That being said, the use case that you describe is valid.

I see two ways forward:
1 - Create a DangerouslySetHTML component that renders HTML strings. Document the risks in using this component in a similar way that React does: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml
2 - Alternatively, write a utility function that converts an HTML string into a nested tree of dash_html_components components. It would work like:

layout = from_html_string('''
<div>
    ....
</div>
''')

[Alcampopiano]

Hi Chris,

Thanks very much for the detailed response. Similar in spirit to your 2nd approach, I ended up putting my text data into a dataframe and using a utility function from the Dash tutorial (part 1) to render the data as an html table. Because I really wanted each line/paragraph in my text data to be readable, the html table worked perfectly as it organized the text beautifully.

This is the utility function I took from your tutorial:

def generate_table(dataframe, max_rows=10):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

I want to emphasize the fact that I am coming from a neuroscience/signal processing background. And so although I can program in python, I am out of my league when it comes to web programming, especially when it comes to understanding the intricacies of writing shareable web applications. All that to say that as someone with my background, Dash was the only program that worked for me throughout my development cycle (python code -> locally served application -> shareable application (via Heroku)). In particular, the Dash documentation was really "at my level" and I appreciated the step-by-step, full-circle instructions.

Thanks very much,
Allan

[chriddyp]

Thanks for the support @Alcampopiano !

---

Here's another solution from the community forums (link). If converting the HTML string to the dash_html_components is too tedious, you could try setting the string in the source of an IFrame:

html.Iframe(srcDoc=my_html_string)

I haven't tested this thoroughly myself.