PNG download on large graphs are broken

[nikeee]

From #24:

Here is a large width digraph that causes issues (maybe not what this thread means though): Actually the digraph is not large enough so that we can think it could cause issue... The render is actually fine online on edotor but when downloading PNG file, a part of graph is completely cropped. About 66% of the image width (at right) seems missing. There is no warning in console in chrome (when graph was even larger).

If I reduce size of edge's label (for example by setting them all to "A"), everywhere goes fine.

large_width_digraph.txt

Originally posted by @IfZen in https://github.com/nikeee/edotor.net/issues/24#issuecomment-663904168

[nikeee]

I cannot reproduce this issue. What I can reproduce is that the PNG export doesn't even offer a download for that graph. SVG works as expected.

[IfZen]

Very weird that you cannot reproduce the issue. I am using chrome and it is up to date. Actually the cropped image is under the file link in my previous post, but it is pretty unoticeable with eyes.

When opening the image with paint I can see the last pixel used is the 16383th one I just found this link from graphviz source code https://fossies.org/dox/graphviz-2.44.1/gvdevice__webp_8c_source.html with _"BADDIMENSION: Bad picture dimension. Maximum width and height allowed is 16383 pixels."

So this is maybe a limitation of png export.

[ghost]

I managed to reproduce this bug. The image file indeed exceeds 16383px. I triggered it by manually specifying the DPI.

digraph {
graph [dpi=96];
node0 [style=filled, fillcolor=green, label="(0.5472420298865589, 0.18440159754287377)"]
node0->node1
node0->node2
node1 [style=filled, fillcolor=green, label="(0.21564298592392728, 0.5033527249528885)"]
node1->node3
node1->node4
node3 [style=filled, fillcolor=green, label="(0.3278677144315696, 0.08730278779272638)"]
node3->node7
node3->node8
node7 [style=filled, fillcolor=green, label="(0.08901995060225087, 0.2873854808912799)"]
node7->node15
node7->node16
node15 [style=filled, fillcolor=green, label="(0.09547167599425532, 0.1504045644787454)"]
node15->node31
node15->node32
node31 [style=filled, fillcolor=green, label="(0.05870517300796696, 0.0812323636704183)"]
node31->node63
node31->node64
node63 [style=filled, fillcolor=green, label="(0.013228274889449998, 0.002735936651055426)"]
null0 [shape=point]
node63->null0
null1 [shape=point]
node63->null1
node64 [style=filled, fillcolor=green, label="(0.06417831827397791, 0.24063350760562308)"]
null2 [shape=point]
node64->null2
null3 [shape=point]
node64->null3
node32 [style=filled, fillcolor=green, label="(0.23566515452309011, 0.025805316553509705)"]
node32->node65
null4 [shape=point]
node32->null4
node65 [style=filled, fillcolor=green, label="(0.11049873972171065, 0.014930977524445721)"]
null5 [shape=point]
node65->null5
null6 [shape=point]
node65->null6
node16 [style=filled, fillcolor=green, label="(0.1370053240328405, 0.4477587959090783)"]
node16->node33
node16->node34
node33 [style=filled, fillcolor=green, label="(0.12094474104703568, 0.4871905665544983)"]
node33->node67
null7 [shape=point]
node33->null7
node67 [style=filled, fillcolor=green, label="(0.07184286104629223, 0.38892413352130306)"]
null8 [shape=point]
node67->null8
null9 [shape=point]
node67->null9
node34 [style=filled, fillcolor=green, label="(0.2694539533637178, 0.4492084975385452)"]
node34->node69
null10 [shape=point]
node34->null10
node69 [style=filled, fillcolor=green, label="(0.267098541857388, 0.3487217120103706)"]
null11 [shape=point]
node69->null11
null12 [shape=point]
node69->null12
node8 [style=filled, fillcolor=green, label="(0.3288837262186789, 0.2678744874107114)"]
node8->node17
node8->node18
node17 [style=filled, fillcolor=green, label="(0.5164654504568629, 0.13071654328250026)"]
node17->node35
node17->node36
node35 [style=filled, fillcolor=green, label="(0.40698439655163965, 0.14231126692939222)"]
node35->node71
node35->node72
node71 [style=filled, fillcolor=green, label="(0.499522342336581, 0.050064802341412196)"]
null13 [shape=point]
node71->null13
null14 [shape=point]
node71->null14
node72 [style=filled, fillcolor=green, label="(0.35469612366473213, 0.1920995872344189)"]
null15 [shape=point]
node72->null15
null16 [shape=point]
node72->null16
node36 [style=filled, fillcolor=green, label="(0.5180139757326523, 0.14177677112039277)"]
node36->node73
null17 [shape=point]
node36->null17
node73 [style=filled, fillcolor=green, label="(0.5233624542515399, 0.09593249193546338)"]
null18 [shape=point]
node73->null18
null19 [shape=point]
node73->null19
node18 [style=filled, fillcolor=green, label="(0.4523532850025175, 0.28797591279302603)"]
node18->node37
node18->node38
node37 [style=filled, fillcolor=green, label="(0.33984229939071087, 0.44189623767890307)"]
node37->node75
null20 [shape=point]
node37->null20
node75 [style=filled, fillcolor=green, label="(0.3491002199909905, 0.32662353183278703)"]
null21 [shape=point]
node75->null21
null22 [shape=point]
node75->null22
node38 [style=filled, fillcolor=green, label="(0.49945345256012674, 0.49254335096204793)"]
node38->node77
null23 [shape=point]
node38->null23
node77 [style=filled, fillcolor=green, label="(0.4726639625869903, 0.4581674551776389)"]
null24 [shape=point]
node77->null24
null25 [shape=point]
node77->null25
node4 [style=filled, fillcolor=green, label="(0.27758120735938274, 0.6367159068010555)"]
node4->node9
node4->node10
node9 [style=filled, fillcolor=green, label="(0.2616674640848684, 0.8852990573306854)"]
node9->node19
node9->node20
node19 [style=filled, fillcolor=green, label="(0.11709212618434162, 0.5978819668616798)"]
node19->node39
node19->node40
node39 [style=filled, fillcolor=green, label="(0.05148197556483636, 0.6963637895453242)"]
node39->node79
node39->node80
node79 [style=filled, fillcolor=green, label="(0.0879494749289702, 0.6118972236390957)"]
null26 [shape=point]
node79->null26
null27 [shape=point]
node79->null27
node80 [style=filled, fillcolor=green, label="(0.10165932013675072, 0.7386086306538633)"]
null28 [shape=point]
node80->null28
null29 [shape=point]
node80->null29
node40 [style=filled, fillcolor=green, label="(0.2552721674269913, 0.6695031267545032)"]
node40->node81
null30 [shape=point]
node40->null30
node81 [style=filled, fillcolor=green, label="(0.1850518916063164, 0.5287408646500641)"]
null31 [shape=point]
node81->null31
null32 [shape=point]
node81->null32
node20 [style=filled, fillcolor=green, label="(0.1302873744661106, 0.9222644138474514)"]
node20->node41
node20->node42
node41 [style=filled, fillcolor=green, label="(0.10420156220012255, 0.990634349544691)"]
node41->node83
null33 [shape=point]
node41->null33
node83 [style=filled, fillcolor=green, label="(0.06928856532400884, 0.920845479567401)"]
null34 [shape=point]
node83->null34
null35 [shape=point]
node83->null35
node42 [style=filled, fillcolor=green, label="(0.2767103325565815, 0.9817009520603073)"]
node42->node85
null36 [shape=point]
node42->null36
node85 [style=filled, fillcolor=green, label="(0.17630418741523546, 0.9200373645554134)"]
null37 [shape=point]
node85->null37
null38 [shape=point]
node85->null38
node10 [style=filled, fillcolor=green, label="(0.3988025109989348, 0.8200496453952356)"]
node10->node21
node10->node22
node21 [style=filled, fillcolor=green, label="(0.4564342795416412, 0.6115214809307277)"]
node21->node43
node21->node44
node43 [style=filled, fillcolor=green, label="(0.39739713498668994, 0.715241174998077)"]
node43->node87
null39 [shape=point]
node43->null39
node87 [style=filled, fillcolor=green, label="(0.2956560839167959, 0.6218896364082611)"]
null40 [shape=point]
node87->null40
null41 [shape=point]
node87->null41
node44 [style=filled, fillcolor=green, label="(0.5279077302000474, 0.7500969446116035)"]
node44->node89
null42 [shape=point]
node44->null42
node89 [style=filled, fillcolor=green, label="(0.4632948349479159, 0.7395389173870944)"]
null43 [shape=point]
node89->null43
null44 [shape=point]
node89->null44
node22 [style=filled, fillcolor=green, label="(0.4870691553155584, 0.9467250399176264)"]
node22->node45
node22->node46
node45 [style=filled, fillcolor=green, label="(0.3349347164452757, 0.9391309710300403)"]
node45->node91
null45 [shape=point]
node45->null45
node91 [style=filled, fillcolor=green, label="(0.3923832815786157, 0.8723172983435971)"]
null46 [shape=point]
node91->null46
null47 [shape=point]
node91->null47
node46 [style=filled, fillcolor=green, label="(0.515610559145753, 0.9859503294576576)"]
node46->node93
null48 [shape=point]
node46->null48
node93 [style=filled, fillcolor=green, label="(0.5348591702996933, 0.9380971138207372)"]
null49 [shape=point]
node93->null49
null50 [shape=point]
node93->null50
node2 [style=filled, fillcolor=green, label="(0.6340389181473038, 0.5031497825914643)"]
node2->node5
node2->node6
node5 [style=filled, fillcolor=green, label="(0.7862680901061835, 0.26087907535770094)"]
node5->node11
node5->node12
node11 [style=filled, fillcolor=green, label="(0.6160875784902076, 0.3762958097370487)"]
node11->node23
node11->node24
node23 [style=filled, fillcolor=green, label="(0.6773829885850401, 0.12864881132367634)"]
node23->node47
node23->node48
node47 [style=filled, fillcolor=green, label="(0.6212149731583951, 0.10361093203636307)"]
node47->node95
node47->node96
node95 [style=filled, fillcolor=green, label="(0.6462670807106595, 0.01982591661701827)"]
null51 [shape=point]
node95->null51
null52 [shape=point]
node95->null52
node96 [style=filled, fillcolor=green, label="(0.675086915139233, 0.2230140100888286)"]
null53 [shape=point]
node96->null53
null54 [shape=point]
node96->null54
node48 [style=filled, fillcolor=green, label="(0.7245288531231282, 0.3280290062533139)"]
node48->node97
null55 [shape=point]
node48->null55
node97 [style=filled, fillcolor=green, label="(0.7742697486039214, 0.10759434997337947)"]
null56 [shape=point]
node97->null56
null57 [shape=point]
node97->null57
node24 [style=filled, fillcolor=green, label="(0.6831466571746073, 0.4711173050459888)"]
node24->node49
node24->node50
node49 [style=filled, fillcolor=green, label="(0.6076866262564321, 0.467821717594869)"]
node49->node99
null58 [shape=point]
node49->null58
node99 [style=filled, fillcolor=green, label="(0.669906245785035, 0.3833058643783308)"]
null59 [shape=point]
node99->null59
null60 [shape=point]
node99->null60
node50 [style=filled, fillcolor=green, label="(0.6872466861551974, 0.4604375176019253)"]
node50->node101
null61 [shape=point]
node50->null61
node101 [style=filled, fillcolor=green, label="(0.6906917676408141, 0.3802783006709951)"]
null62 [shape=point]
node101->null62
null63 [shape=point]
node101->null63
node12 [style=filled, fillcolor=green, label="(0.9831358714210048, 0.3726307488490974)"]
node12->node25
node12->node26
node25 [style=filled, fillcolor=green, label="(0.9006014296950229, 0.011809874994408998)"]
node25->node51
node25->node52
node51 [style=filled, fillcolor=green, label="(0.8662220981238089, 0.3463308932863225)"]
node51->node103
null64 [shape=point]
node51->null64
node103 [style=filled, fillcolor=green, label="(0.8687412657741851, 0.3302757531333633)"]
null65 [shape=point]
node103->null65
null66 [shape=point]
node103->null66
node52 [style=filled, fillcolor=green, label="(0.9019382230814261, 0.2965210998494765)"]
node52->node105
null67 [shape=point]
node52->null67
node105 [style=filled, fillcolor=green, label="(0.9688821675704143, 0.07984367576490081)"]
null68 [shape=point]
node105->null68
null69 [shape=point]
node105->null69
node26 [style=filled, fillcolor=green, label="(0.8893947372620788, 0.38158285823127647)"]
node26->node53
node26->node54
node53 [style=filled, fillcolor=green, label="(0.8200608199347834, 0.455011551967783)"]
node53->node107
null70 [shape=point]
node53->null70
node107 [style=filled, fillcolor=green, label="(0.8596417610013654, 0.385642677450048)"]
null71 [shape=point]
node107->null71
null72 [shape=point]
node107->null72
node54 [style=filled, fillcolor=green, label="(0.9114060446305023, 0.5028522028982868)"]
node54->node109
null73 [shape=point]
node54->null73
node109 [style=filled, fillcolor=green, label="(0.9618828503070099, 0.4864373556824546)"]
null74 [shape=point]
node109->null74
null75 [shape=point]
node109->null75
node6 [style=filled, fillcolor=green, label="(0.8269637479040602, 0.7228393345491433)"]
node6->node13
node6->node14
node13 [style=filled, fillcolor=green, label="(0.6547791904163812, 0.7380109342836942)"]
node13->node27
node13->node28
node27 [style=filled, fillcolor=green, label="(0.7695036112395442, 0.7269369068263654)"]
node27->node55
node27->node56
node55 [style=filled, fillcolor=green, label="(0.6485956219503952, 0.6216787113873359)"]
node55->node111
node55->node112
node111 [style=filled, fillcolor=green, label="(0.7190962751611406, 0.6156385878385687)"]
null76 [shape=point]
node111->null76
null77 [shape=point]
node111->null77
node112 [style=filled, fillcolor=green, label="(0.681300953153181, 0.6848290501520709)"]
null78 [shape=point]
node112->null78
null79 [shape=point]
node112->null79
node56 [style=filled, fillcolor=green, label="(0.7898032387575937, 0.7060467896416124)"]
node56->node113
null80 [shape=point]
node56->null80
node113 [style=filled, fillcolor=green, label="(0.8206824411145484, 0.6322892264815282)"]
null81 [shape=point]
node113->null81
null82 [shape=point]
node113->null82
node28 [style=filled, fillcolor=green, label="(0.7490715090840355, 0.8791501049246714)"]
node28->node57
node28->node58
node57 [style=filled, fillcolor=green, label="(0.6399934387432874, 0.9652040414132792)"]
node57->node115
null83 [shape=point]
node57->null83
node115 [style=filled, fillcolor=green, label="(0.6330181291233904, 0.8365273697462978)"]
null84 [shape=point]
node115->null84
null85 [shape=point]
node115->null85
node58 [style=filled, fillcolor=green, label="(0.7585663335338151, 0.9311942871123262)"]
node58->node117
null86 [shape=point]
node58->null86
node117 [style=filled, fillcolor=green, label="(0.7925893515449551, 0.8232779217454348)"]
null87 [shape=point]
node117->null87
null88 [shape=point]
node117->null88
node14 [style=filled, fillcolor=green, label="(0.9460311102484847, 0.6959219994423657)"]
node14->node29
node14->node30
node29 [style=filled, fillcolor=green, label="(0.9154402333409823, 0.6892411457632873)"]
node29->node59
node29->node60
node59 [style=filled, fillcolor=green, label="(0.8430063218491559, 0.5878517083041592)"]
node59->node119
null89 [shape=point]
node59->null89
node119 [style=filled, fillcolor=green, label="(0.9097060344937931, 0.5676959351170044)"]
null90 [shape=point]
node119->null90
null91 [shape=point]
node119->null91
node60 [style=filled, fillcolor=green, label="(0.9851304391595073, 0.6008566587077387)"]
node60->node121
null92 [shape=point]
node60->null92
node121 [style=filled, fillcolor=green, label="(0.9447128734270486, 0.5039789123408972)"]
null93 [shape=point]
node121->null93
null94 [shape=point]
node121->null94
node30 [style=filled, fillcolor=green, label="(0.8462442550095075, 0.9371457926009722)"]
node30->node61
node30->node62
node61 [style=filled, fillcolor=green, label="(0.8412339125829232, 0.8730173079177155)"]
node61->node123
null95 [shape=point]
node61->null95
node123 [style=filled, fillcolor=green, label="(0.8290552041576117, 0.8706195401044241)"]
null96 [shape=point]
node123->null96
null97 [shape=point]
node123->null97
node62 [style=filled, fillcolor=green, label="(0.9899348040065478, 0.8782854569995219)"]
node62->node125
null98 [shape=point]
node62->null98
node125 [style=filled, fillcolor=green, label="(0.9076351946530363, 0.8096630245756847)"]
null99 [shape=point]
node125->null99
null100 [shape=point]
node125->null100
}

[ghost]

[ghost]

I think it is just a limitation of graphviz.

[IfZen]

I think it is not only graphviz. If you are on windows you can try this project i did: https://gitlab.com/Solutions.Net/GraphvizCompanion

• Compile & Run
• Paste you code, graph is automatically displayed / updated
• Right click on displayed graph then "Export to Png" You'll get a full image with a width of 19136 pixels

The binaries I put in the repository is the usual windows version of graphviz, nothing more. I just downloaded it from graphviz website.

@nikeee Is edotor website running on linux ? Maybe it is only a limitation of the linux version / underlying libraries ?

[nikeee]

Everything on edotor runs client-side, so in the browser. Maybe it's a limitation by the browser that causes the issue. But maybe it's graphivz. The used browser-side renderer hasn't been updated for a while. Or the browser version simply does not support larger images.

[IfZen]

Oh good to know you are ready to close this ticket ? Just teasing you ! sorry :p

More seriously, you mean graphviz is delivered to browser as (a) full javascript script(s) ? I guess I need to dive more in code so

[nikeee]

you mean graphviz is delivered to browser as (a) full javascript script(s) ?

Yes. edotor is an entirely static website consisting of HTML and JS. There is no backend that does anything. The Graphviz source that is also used for the native binaries is compiled to JS (using emscripten) in this project: https://github.com/mdaines/viz.js Sadly, that project is not maintained any more. There is Dagre, which is more like a JS reimplementation of Graphviz. As the reimplementation looks quite different, I chose viz.js as it renders the graph just like the native Graphviz does.

There is also this library: https://github.com/CyberhavenInc/graphviz-wasm ...which compiles Graphviz to WebAssembly. It should be faster than the JS version and has the same API as viz.js. Maybe we can migrate to that and see if we're better off.

[IfZen]

Funny I was thinking about webassembly some minutes ago and if graphviz could exist in this state I already wanted to give it a try one day but I never had a real fun, tiny & useful project to start with...