Optimising string display

[sunng87]

As shown in our slack community, the string results contains line breaker \n are not rendered. To optimise the display, we can use <pre> to render string field so that pre-formated text like \n/\t are correctly displayed.

Steps to reproduce

1. Execute explain analyze select * from numbers on dashboard

Http response body:

{
    "code": 0,
    "execution_time_ms": 1,
    "output": [
        {
            "records": {
                "rows": [
                    [
                        "Plan with Metrics",
                        "CoalescePartitionsExec, metrics=[output_rows=100, elapsed_compute=19.447µs, spill_count=0, spilled_bytes=0, mem_used=0]\n  ProjectionExec: expr=[number@0 as number], metrics=[output_rows=100, elapsed_compute=1.328µs, spill_count=0, spilled_bytes=0, mem_used=0]\n    CoalesceBatchesExec: target_batch_size=4096, metrics=[output_rows=100, elapsed_compute=15.759µs, spill_count=0, spilled_bytes=0, mem_used=0]\n      RepartitionExec: partitioning=RoundRobinBatch(16), metrics=[fetch_time=2.483886ms, repart_time=16ns, send_time=1.568µs]\n        RepartitionExec: partitioning=RoundRobinBatch(16), metrics=[fetch_time=29.384µs, repart_time=1ns, send_time=1.783µs]\n          ExecutionPlan(PlaceHolder), metrics=[]\n"
                    ]
                ],
                "schema": {
                    "column_schemas": [
                        {
                            "data_type": "String",
                            "name": "plan_type"
                        },
                        {
                            "data_type": "String",
                            "name": "plan"
                        }
                    ]
                }
            }
        }
    ]
}

How database cli displays these text:

public=> EXPLAIN ANALYZE SELECT * FROM numbers;
     plan_type     |                                                                       plan
-------------------+--------------------------------------------------------------------------------------------------------------------------------------------------
 Plan with Metrics | CoalescePartitionsExec, metrics=[output_rows=100, elapsed_compute=18.244µs, spill_count=0, spilled_bytes=0, mem_used=0]                         +
                   |   ProjectionExec: expr=[number@0 as number], metrics=[output_rows=100, elapsed_compute=1.528µs, spill_count=0, spilled_bytes=0, mem_used=0]     +
                   |     CoalesceBatchesExec: target_batch_size=4096, metrics=[output_rows=100, elapsed_compute=17.493µs, spill_count=0, spilled_bytes=0, mem_used=0]+
                   |       RepartitionExec: partitioning=RoundRobinBatch(16), metrics=[fetch_time=1.406715ms, repart_time=16ns, send_time=386ns]                     +
                   |         RepartitionExec: partitioning=RoundRobinBatch(16), metrics=[fetch_time=12.665µs, repart_time=1ns, send_time=1.032µs]                    +
                   |           ExecutionPlan(PlaceHolder), metrics=[]                                                                                                +
                   |
(1 row)

[francis-du]

DataFusion can convert Plan into a format that can be displayed by graphviz. Whether to consider supporting generate query plan diagrams through graphviz like arrow-ballista

[sunng87]

hmmm, we can create a dedicated page to visualize this.