Can't render special dot string and get uncaught error in Console

[chouzz]

Seems I can't render some dot string and there is uncaught error in Console.

• This also happens in d3-graphivz master branch.
• Tried this dot string in http://magjac.com/graphviz-visual-editor/ looks good.
• Preview this dot string in vscode by vscode-graphviz, it looks good too.

Reproduce steps:

• git clone d3-graphviz repo
• npm install && npm run build
• Replece following dot string to examples/basic-add-edge.html:20

digraph {graph [style="filled",fillcolor="#edf0f7",color="grey50"]
node [style="filled",fillcolor="#a2b4d6",color="#000000",fontname="Helvetica",fontsize="10",shape="polygon"]
edge [fontname="Helvetica",fontsize="10",labelfontname="Helvetica",labelfontsize="10"]
subgraph "cluster_oam_a1a9"{ id="oam_a1a9" style="filled, dashed" label="oam" "common_adfb" "lldp_07c4"subgraph "cluster_common_adfb"{ id="common_adfb" style="filled, bold" label="common" "data_thread_d165" "dwn_thread_dc59" "init_da14" "sync_thread_8499"}}"common_adfb" [id="common_adfb" label="common" tooltip="src/oam/common/"];
"init_da14" [id="init_da14" label="init" tooltip="src/oam/common/init/"];
"sync_thread_8499" [id="sync_thread_8499" label="sync_thread" tooltip="src/oam/common/sync_thread/"];
"lldp_07c4" [id="lldp_07c4" label="lldp" tooltip="src/oam/lldp/"];
"data_thread_d165" [id="data_thread_d165" label="data_thread" tooltip="src/oam/common/data_thread/"];
"dwn_thread_dc59" [id="dwn_thread_dc59" label="dwn_thread" tooltip="src/oam/common/dwn_thread/"];
"common_adfb" -> "init_da14" [id="common_adfb^init_da14" label="13" color="red"];
"common_adfb" -> "sync_thread_8499" [id="common_adfb^sync_thread_8499" label="3" color="red"];
"common_adfb" -> "lldp_07c4" [id="common_adfb^lldp_07c4" label="7" color="red"];
"common_adfb" -> "data_thread_d165" [id="common_adfb^data_thread_d165" label="4" color="red"];
"common_adfb" -> "dwn_thread_dc59" [id="common_adfb^dwn_thread_dc59" label="2" color="red"];
"init_da14" -> "common_adfb" [id="init_da14^common_adfb" label="10" color="red"];
"init_da14" -> "lldp_07c4" [id="init_da14^lldp_07c4" label="3" color="red"];
"init_da14" -> "data_thread_d165" [id="init_da14^data_thread_d165" label="1" color="red"];
"init_da14" -> "dwn_thread_dc59" [id="init_da14^dwn_thread_dc59" label="1" color="red"];
"init_da14" -> "sync_thread_8499" [id="init_da14^sync_thread_8499" label="1" color="red"];
"sync_thread_8499" -> "common_adfb" [id="sync_thread_8499^common_adfb" label="7" color="red"];
"sync_thread_8499" -> "init_da14" [id="sync_thread_8499^init_da14" label="4" color="red"];
"sync_thread_8499" -> "data_thread_d165" [id="sync_thread_8499^data_thread_d165" label="1" color="red"];
"sync_thread_8499" -> "lldp_07c4" [id="sync_thread_8499^lldp_07c4" label="1" color="red"];
"lldp_07c4" -> "common_adfb" [id="lldp_07c4^common_adfb" label="29" color="red"];
"lldp_07c4" -> "init_da14" [id="lldp_07c4^init_da14" label="21" color="red"];
"lldp_07c4" -> "sync_thread_8499" [id="lldp_07c4^sync_thread_8499" label="2" color="red"];
"lldp_07c4" -> "data_thread_d165" [id="lldp_07c4^data_thread_d165" label="5" color="red"];
"lldp_07c4" -> "dwn_thread_dc59" [id="lldp_07c4^dwn_thread_dc59" label="1" color="red"];
"data_thread_d165" -> "common_adfb" [id="data_thread_d165^common_adfb" label="2" color="red"];
"data_thread_d165" -> "init_da14" [id="data_thread_d165^init_da14" label="1" color="red"];
"data_thread_d165" -> "lldp_07c4" [id="data_thread_d165^lldp_07c4" label="2" color="red"];
"dwn_thread_dc59" -> "common_adfb" [id="dwn_thread_dc59^common_adfb" label="3" color="red"];
"dwn_thread_dc59" -> "init_da14" [id="dwn_thread_dc59^init_da14" label="1" color="red"];
"dwn_thread_dc59" -> "lldp_07c4" [id="dwn_thread_dc59^lldp_07c4" label="1" color="red"];
"dwn_thread_dc59" -> "data_thread_d165" [id="dwn_thread_dc59^data_thread_d165" label="1" color="red"];
}

• run http-server . in command line and open basic-add-edge.html file

Actual behavior:

Get empty result and get errors in Console.

Expect beahvior:

should render graph from given dot string

Possible fixes:

Seems it's related to

d3-graphviz/src/dot.js

Line 18 in 64244fe

this._dispatch.call("initEnd", this);

, the program exited in this line.

[chouzz]

Seems related to hpcc-systems/hpcc-js-wasm#139

[chouzz]

Hi, @magjac I found another case about this problem, could you please help?

If you change dot string to this, also have this problem:

digraph {graph [style="filled",fillcolor="#edf0f7",color="grey50"]
node [style="filled",fillcolor="#a2b4d6",color="#000000",fontname="Helvetica",fontsize="14",shape="polygon"]
edge [fontname="Helvetica",fontsize="10",labelfontname="Helvetica",labelfontsize="10"]
subgraph "cluster_moe_f721"{ id="moe_f721" style="filled, dashed" label="moe" "cli_8678" "interface_5488" "msglib_d0ce" "publib_9f09" "scriptlib_868c" "system_b545"subgraph 
"cluster_cfg_d15b"{ id="cfg_d15b" style="filled, bold" label="cfg" "interface_d8bd" "src_6fb0"}}"cli_8678" [id="cli_8678" label="cli" tooltip="src/moe/cli/"];
"system_b545" [id="system_b545" label="system" tooltip="src/moe/system/"];
"cli_8678" -> "interface_d8bd" [id="cli_8678^interface_d8bd" label="3418" ];
"msglib_d0ce" -> "interface_d8bd" [id="msglib_d0ce^interface_d8bd" label="68" ];
"publib_9f09" -> "interface_d8bd" [id="publib_9f09^interface_d8bd" label="14" ];
"src_6fb0" -> "interface_5488" [id="src_6fb0^interface_5488" label="9435" ];
"src_6fb0" -> "msglib_d0ce" [id="src_6fb0^msglib_d0ce" label="698" ];
"src_6fb0" -> "publib_9f09" [id="src_6fb0^publib_9f09" label="13953" ];
"src_6fb0" -> "scriptlib_868c" [id="src_6fb0^scriptlib_868c" label="708" ];
"src_6fb0" -> "system_b545" [id="src_6fb0^system_b545" label="1197" ];
"src_6fb0" -> "interface_d8bd" [id="src_6fb0^interface_d8bd" label="17687" ];
}

[magjac]

I seems to me that the problem is in Graphviz itself. See https://gitlab.com/graphviz/graphviz/-/issues/2331 and https://gitlab.com/graphviz/graphviz/-/merge_requests/3016.

Your second example is not valid DOT source and gives syntax error in line 16 near ';'.

[magjac]

Some debugging shows that the error exists already in hpcc-js/wasm and is index out of bounds:

This error probably comes from Graphviz itself from an assertion in lib/cgraph/list.h.

[chouzz]

Thanks reply.

Your second example is not valid DOT source and gives syntax error in line 16 near ';'.

1. There is an extra ';' at the end, I removed it and update the comment, and seems the dot string has performance problem, http://magjac.com/graphviz-visual-editor/ keep running and after I pasted this dot string, not sure if it's the same root cause.

2. Also tested these dot string in @hpcc-js/wasm with version 1.20.1 and 2.xx, and I found this problem only happens in 2.xx, maybe there are some problems in 2.xx.

I will post this issue to @hpcc-js/wasm, and discuss there. Maybe I can use older version of d3-graphviz until this problem solved. Thanks!

[GordonSmith]

I took the orig DOT and fixed it to:

digraph {graph [style="filled",fillcolor="#edf0f7",color="grey50"]
node [style="filled",fillcolor="#a2b4d6",color="#000000",fontname="Helvetica",fontsize="10",shape="polygon"]
edge [fontname="Helvetica",fontsize="10",labelfontname="Helvetica",labelfontsize="10"]
subgraph "cluster_oam_a1a9"{ id="oam_a1a9" style="filled, dashed" label="oam" "common_adfb" "lldp_07c4" 
subgraph "cluster_common_adfb"{ id="common_adfb" style="filled, bold" label="common" "data_thread_d165" "dwn_thread_dc59" "init_da14" "sync_thread_8499"}}"common_adfb" [id="common_adfb" label="common" tooltip="src/oam/common/"];
"init_da14" [id="init_da14" label="init" tooltip="src/oam/common/init/"];
"sync_thread_8499" [id="sync_thread_8499" label="sync_thread" tooltip="src/oam/common/sync_thread/"];
"lldp_07c4" [id="lldp_07c4" label="lldp" tooltip="src/oam/lldp/"];
"data_thread_d165" [id="data_thread_d165" label="data_thread" tooltip="src/oam/common/data_thread/"];
"dwn_thread_dc59" [id="dwn_thread_dc59" label="dwn_thread" tooltip="src/oam/common/dwn_thread/"];
"common_adfb" -> "init_da14" [id="common_adfb^init_da14" label="13" color="red"];
"common_adfb" -> "sync_thread_8499" [id="common_adfb^sync_thread_8499" label="3" color="red"];
"common_adfb" -> "lldp_07c4" [id="common_adfb^lldp_07c4" label="7" color="red"];
"common_adfb" -> "data_thread_d165" [id="common_adfb^data_thread_d165" label="4" color="red"];
"common_adfb" -> "dwn_thread_dc59" [id="common_adfb^dwn_thread_dc59" label="2" color="red"];
"init_da14" -> "common_adfb" [id="init_da14^common_adfb" label="10" color="red"];
"init_da14" -> "lldp_07c4" [id="init_da14^lldp_07c4" label="3" color="red"];
"init_da14" -> "data_thread_d165" [id="init_da14^data_thread_d165" label="1" color="red"];
"init_da14" -> "dwn_thread_dc59" [id="init_da14^dwn_thread_dc59" label="1" color="red"];
"init_da14" -> "sync_thread_8499" [id="init_da14^sync_thread_8499" label="1" color="red"];
"sync_thread_8499" -> "common_adfb" [id="sync_thread_8499^common_adfb" label="7" color="red"];
"sync_thread_8499" -> "init_da14" [id="sync_thread_8499^init_da14" label="4" color="red"];
"sync_thread_8499" -> "data_thread_d165" [id="sync_thread_8499^data_thread_d165" label="1" color="red"];
"sync_thread_8499" -> "lldp_07c4" [id="sync_thread_8499^lldp_07c4" label="1" color="red"];
"lldp_07c4" -> "common_adfb" [id="lldp_07c4^common_adfb" label="29" color="red"];
"lldp_07c4" -> "init_da14" [id="lldp_07c4^init_da14" label="21" color="red"];
"lldp_07c4" -> "sync_thread_8499" [id="lldp_07c4^sync_thread_8499" label="2" color="red"];
"lldp_07c4" -> "data_thread_d165" [id="lldp_07c4^data_thread_d165" label="5" color="red"];
"lldp_07c4" -> "dwn_thread_dc59" [id="lldp_07c4^dwn_thread_dc59" label="1" color="red"];
"data_thread_d165" -> "common_adfb" [id="data_thread_d165^common_adfb" label="2" color="red"];
"data_thread_d165" -> "init_da14" [id="data_thread_d165^init_da14" label="1" color="red"];
"data_thread_d165" -> "lldp_07c4" [id="data_thread_d165^lldp_07c4" label="2" color="red"];
"dwn_thread_dc59" -> "common_adfb" [id="dwn_thread_dc59^common_adfb" label="3" color="red"];
"dwn_thread_dc59" -> "init_da14" [id="dwn_thread_dc59^init_da14" label="1" color="red"];
"dwn_thread_dc59" -> "lldp_07c4" [id="dwn_thread_dc59^lldp_07c4" label="1" color="red"];
"dwn_thread_dc59" -> "data_thread_d165" [id="dwn_thread_dc59^data_thread_d165" label="1" color="red"];
}

(There was an issue with a missing space before the second subgraph)

And pasted it into: https://observablehq.com/@gordonsmith/graphviz-wasm-example

And it works as expected:

[chouzz]

@GordonSmith Seems it's not related the space, even without space, https://observablehq.com/@gordonsmith/graphviz-wasm-example still can show the graph. But the first click on submit button will get Error: memory access out of bounds, then click submit again, it works well.

Here is my reproduce steps(I made screenshots, but it's blocked by company network):

• Refresh page, paste origin dot string, it needs to two clicks on submit button to show correct graph.
• Refresh page, paste your fixed dot string, it needs to two clicks on submit button to show correct graph.
• Refresh page, paste dot string from Can't render special dot string and get uncaught error in Console #280 (comment), it needs to three clicks on to show correct graph.

BTW, after the graph works, paste any above dot string, it works well. That's strange.