Displaying large text data

Dash Python
1

I have to show my raw log data which is about 1,000,000 lines. (if I click a button, modal with text shows up.)

Currently, using “dash_ace” component as text editor to show my data,
But it seems that cant handle when it goes to large text data.(web gives no response…)

Is there easy way to show large text data? (like using dynamic chunch visualization.)

Thank you for always.
Dash is contributing a lot to me.

2

hi wouldnt it be an option to sent it to a table (like ag grid) and then use virtual rows and paging and things like that? also this would make searching and filtering much easier. You could have a link somewhere that contains the line number / id if you really need to raw data

1 Like
3

Thankyou for reply!

Looks like using dash-ag-grid is good solution, since it supports infinite scroll.
(Dash)

It works fine to display my text data with no lagging. I made it have just one column and print it line as a row.
But one problem is that it strips the blank spaces of the lines.
Since indentation is important for my text data(its like 1,000,000 lines of python code), do you know how to keep the white spaces in front of my text lines?

here


app = Dash(__name__)

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid1",
            columnSize="sizeToFit",
            columnDefs=[{"field": "log"}],
            enableEnterpriseModules=True,
            rowModelType="infinite",
            dashGridOptions={
                # The number of rows rendered outside the viewable area the grid renders.
                "rowBuffer": 0,
                # How many blocks to keep in the store. Default is no limit, so every requested block is kept.
                "maxBlocksInCache": 1,
            },
            components={"whiteSpaceRenderer": {"renderer": "text", "params": {"whiteSpace": "pre"}}},
        ),
        html.Div(id="output2"),
        html.Div(id="cell-output2"),
        html.Div(id="edit-output2"),
    ]
)


@app.callback(Output("output2", "children"), Input("grid1", "selectedRows"))
def display_selected_car2(selectedRows):
    if selectedRows:
        return [f"You selected id {s['id']}" for s in selectedRows]

    return no_update


text_lines = [
    "  This is line 1 with indentation  ",
    "      This is line 2 with indentation  ",
    "          This is line 3 with indentation ",
    "  This is line 4 with indentation  ",
    "      This is line 5 with indentation  ",
    "          This is line 6 with indentation ",
] * 1000000


@app.callback(
    Output("grid1", "getRowsResponse"),
    Input("grid1", "getRowsRequest"),
)
def infinite_scroll(request):

    if request is None:
        return no_update

    partial = [{"log": line} for i, line in enumerate(text_lines[request["startRow"] : request["endRow"]])]

    return {"rowData": partial, "rowCount": len(text_lines)}


if __name__ == "__main__":
    app.run_server(debug=True, host="0.0.0.0", port=8000)
4

Ow… Haha. I thought you were going to parse it to tabular data/ columns. Not sure if there’s an option like that. For sure there is. Or maybe replace it by another invisible char.

5

I found out how.

I can use cellStyle property in the columnDefs object to apply a CSS style directly to the cells in ag-Grid. To show whitespace at the beginning of the data, you can use the white-space property with the value pre-wrap.

Here’s how you can modify your column definition to apply this style:

columnDefs=[
    {
        "field": "log",
        "cellStyle": {"white-space": "pre-wrap"},
    }
],
4 Likes