mdaines / viz-js

Graphviz in your browser
https://viz-js.com/
MIT License
4.04k stars 352 forks source link

A bit large graph is not getting displayed #23

Closed aamirfaried closed 8 years ago

aamirfaried commented 10 years ago

Hi It is using it (viz.js) for my application to draw graphs dynamically and it worked well.

But now when i moved bit further and i introduce subgraphs and clusters, i got problem with vis.js. My graph is not that big but it has many clusters. it works great with Graphviz tool but when i run it with Viz.js it is showing following error:

abort() at Error at stackTrace (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:906:15) at Object.abort (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6295:25) at _abort (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:4966:22) at qu (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6117:16565) at Array.j8 (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6116:334348) at no (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6115:229897) at cq (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6114:818) at ccallFunc (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:533:24) at Object.ccall (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:492:10) at window.Viz (http://localhost:7001/TreIntegration/resources/js/viz/viz.js:6313:25)

here is my graph.

digraph G { compound=true subgraph "clusterApplicationPeopleSoft"{ graph [ id="93" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=93" label="PeopleSoft" ] "dummyPeopleSoft" [style=invis] } subgraph "clusterApplicationICC"{ graph [ id="36" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=36" label="ICC" ] "dummyICC" [style=invis] } "dummyPeopleSoft" -> "dummyICC"[ltail="clusterApplicationPeopleSoft" lhead="clusterApplicationICC" id="2750" label="Webservice" color="green" style="bold" intType="5" fontsize="8"] subgraph "clusterApplication111"{ graph [ id="5300" tooltip="002zzz2" shape="box" style="bold" color="red" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=5300" label="111" ] subgraph "clusterApplicationsdf"{ label="sdf" "dummy111_sdf" [style=invis] } } "dummyICC" -> "dummy111_sdf"[ltail="clusterApplicationICC" lhead="clusterApplication111" id="6450" label="XML API" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplication222"{ graph [ id="6650" tooltip="222" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=6650" label="222" ] subgraph "clusterApplicationDD"{ label="DD" subgraph "clusterApplicationEE"{ label="EE" "dummy222_EE" [style=invis] } } subgraph "clusterApplicationEE"{ label="EE" "dummy222_EE" [style=invis] } subgraph "clusterApplicationAA"{ label="AA" "dummy222_AA" [style=invis] } "222_A"[label=A] "222_C"[label=C] } "dummy111_sdf" -> "222_A"[ltail="clusterApplication111" lhead="clusterApplication222" id="6250" label="usd" color="blue" style="solid" intType="9" fontsize="8"] "dummy111_sdf" -> "dummy111_sdf"[ltail="clusterApplication111" lhead="clusterApplication111" id="6153" label="XML GATEWAY" color="yellow" style="bold" intType="21" fontsize="8"] "dummy111_sdf" -> "dummy111_sdf"[ltail="clusterApplication111" lhead="clusterApplication111" id="6650" label="a" color="back" style="bold" intType="20" fontsize="8"] "dummyICC" -> "dummy111_sdf"[ltail="clusterApplicationICC" lhead="clusterApplication111" id="6451" label="asf" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplicationPaymentService"{ graph [ id="67" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=67" label="Payment Service" ] "dummyPaymentService" [style=invis] } "dummyPeopleSoft" -> "dummyPaymentService"[ltail="clusterApplicationPeopleSoft" lhead="clusterApplicationPaymentService" id="2751" label="Webservice" color="green" style="bold" intType="5" fontsize="8"] subgraph "clusterApplicationBilling"{ graph [ id="89" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=89" label="Billing" ] "dummyBilling" [style=invis] } "dummyPaymentService" -> "dummyBilling"[ltail="clusterApplicationPaymentService" lhead="clusterApplicationBilling" id="3162" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"] subgraph "clusterApplicationERP"{ graph [ id="34" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=34" label="ERP" ] subgraph "clusterApplicationm"{ label="m" "ERP_m_a"[label=a] subgraph "clusterApplicationm1"{ label="m1" "dummyERP_m1" [style=invis] } subgraph "clusterApplicationa"{ label="a" "ERP_a_b"[label=b] } } subgraph "clusterApplicationm1"{ label="m1" "dummyERP_m1" [style=invis] } subgraph "clusterApplicationa"{ label="a" "ERP_a_b"[label=b] } "ERP_v"[label=v] } "dummyBilling" -> "ERPv"[ltail="clusterApplicationBilling" lhead="clusterApplicationERP" id="3200" label="Datastage" color="brown" style="dotted" intType="10" fontsize="8"] "dummyBilling" -> "dummyPeopleSoft"[ltail="clusterApplicationBilling" lhead="clusterApplicationPeopleSoft" id="3201" label="XML API" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplicationStreamserve"{ graph [ id="54" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=54" label="Streamserve" ] "dummyStreamserve" [style=invis] } "dummyBilling" -> "dummyStreamserve"[ltail="clusterApplicationBilling" lhead="clusterApplicationStreamserve" id="3202" label="FileBased" color="orange" style="dotted" intType="8" fontsize="8"] subgraph "clusterApplicationEMA(EricssonMultiActivation)"{ graph [ id="91" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=91" label="EMA (Ericsson Multi Activation)" ] "dummyEMA(EricssonMultiActivation)" [style=invis] } "dummyBilling" -> "dummyEMA(EricssonMultiActivation)"[ltail="clusterApplicationBilling" lhead="clusterApplicationEMA(EricssonMultiActivation)" id="3203" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"] subgraph "clusterApplicationA"{ graph [ id="81" tooltip="222" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=81" label="A" ] "dummyA" [style=invis] } "dummyBilling" -> "dummyA"[ltail="clusterApplicationBilling" lhead="clusterApplicationA" id="4100" label="XML API" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplicationWebLogin"{ graph [ id="82" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=82" label="WebLogin" ] "dummyWebLogin" [style=invis] } "dummyBilling" -> "dummyWebLogin"[ltail="clusterApplicationBilling" lhead="clusterApplicationWebLogin" id="3950" label="Tibco Prepad Adapter" color="gray" style="solid" intType="12" fontsize="8"] "dummyPaymentService" -> "dummyPeopleSoft"[ltail="clusterApplicationPaymentService" lhead="clusterApplicationPeopleSoft" id="3163" label="XML API" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplicationCCV"{ graph [ id="59" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=59" label="CCV" ] "dummyCCV" [style=invis] } "dummyPaymentService" -> "dummyCCV"[ltail="clusterApplicationPaymentService" lhead="clusterApplicationCCV" id="3164" label="Webservice" color="green" style="bold" intType="5" fontsize="8"] subgraph "clusterApplication3Repair1"{ graph [ id="46" tooltip="33" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=46" label="3Repair1" ] "dummy3Repair1" [style=invis] } "dummyCCV" -> "dummy3Repair1"[ltail="clusterApplicationCCV" lhead="clusterApplication3Repair1" id="4000" label="XML API" color="back" style="bold" intType="20" fontsize="8"] subgraph "clusterApplication3Times"{ graph [ id="38" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=38" label="3Times" ] subgraph "clusterApplication<v"{ label="<v" "dummy3Times<v" [style=invis] } } "dummyCCV" -> "dummy3Times_<v"[ltail="clusterApplicationCCV" lhead="clusterApplication3Times" id="4001" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"] subgraph "clusterApplicationabc"{ graph [ id="5152" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=5152" label="abc" ] "dummyabc" [style=invis] } "dummyCCV" -> "dummyabc"[ltail="clusterApplicationCCV" lhead="clusterApplicationabc" id="4002" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"] subgraph "clusterApplicationB"{ graph [ id="2" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=2" label="B" ] "dummyB" [style=invis] } "dummyCCV" -> "dummyB"[ltail="clusterApplicationCCV" lhead="clusterApplicationB" id="4003" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"] "dummyCCV" -> "dummyabc"[ltail="clusterApplicationCCV" lhead="clusterApplicationabc" id="4004" label="DBLink" color="red" style="solid" intType="6" fontsize="8"] "dummyCCV" -> "dummyPeopleSoft"[ltail="clusterApplicationCCV" lhead="clusterApplicationPeopleSoft" id="3161" label="DBLink" color="red" style="solid" intType="6" fontsize="8"] "dummyCCV" -> "dummy111_sdf"[ltail="clusterApplicationCCV" lhead="clusterApplication111" id="6001" label="DBLink" color="red" style="solid" intType="6" fontsize="8"] "dummyPaymentService" -> "dummyBilling"[ltail="clusterApplicationPaymentService" lhead="clusterApplicationBilling" id="3303" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"] subgraph "clusterApplicationPGW"{ graph [ id="35" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=35" label="PGW" ] "dummyPGW" [style=invis] } "dummyPeopleSoft" -> "dummyPGW"[ltail="clusterApplicationPeopleSoft" lhead="clusterApplicationPGW" id="3100" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"] subgraph "clusterApplicationDIBS"{ graph [ id="8050" shape="doublecircle" style="bold" color="red" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=8050" label="DIBS" ] "dummyDIBS" [style=invis] } "dummyPGW" -> "dummyDIBS"[ltail="clusterApplicationPGW" lhead="clusterApplicationDIBS" id="6850" label="FileBased" color="orange" style="dotted" intType="8" fontsize="8"] "dummyPGW" -> "dummyBilling"[ltail="clusterApplicationPGW" lhead="clusterApplicationBilling" id="2801" label="DBLink" color="red" style="solid" intType="6" fontsize="8"] "dummyPGW" -> "ERP_v"[ltail="clusterApplicationPGW" lhead="clusterApplicationERP" id="2850" label="Datastage" color="brown" style="dotted" intType="10" fontsize="8"] "ERP_v" -> "dummyBilling"[ltail="clusterApplicationERP" lhead="clusterApplicationBilling" id="3806" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"] "ERP_v" -> "dummyPeopleSoft"[ltail="clusterApplicationERP" lhead="clusterApplicationPeopleSoft" id="2702" label="DBLink" color="red" style="solid" intType="6" fontsize="8"] "ERP_v" -> "dummyPaymentService"[ltail="clusterApplicationERP" lhead="clusterApplicationPaymentService" id="3556" label="ca" color="green" style="bold" intType="5" fontsize="8"] "ERP_v" -> "dummyPaymentService"[ltail="clusterApplicationERP" lhead="clusterApplicationPaymentService" id="3557" label="ca222" color="red" style="solid" intType="6" fontsize="8"] subgraph "clusterApplicationTriggerFramework"{ graph [ id="72" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=72" label="Trigger Framework" ] "dummyTriggerFramework" [style=invis] } "ERP_v" -> "dummyTriggerFramework"[ltail="clusterApplicationERP" lhead="clusterApplicationTriggerFramework" id="3401" label="DBLink11" color="back" style="bold" intType="20" fontsize="8"] "dummyPGW" -> "dummyPaymentService"[ltail="clusterApplicationPGW" lhead="clusterApplicationPaymentService" id="3555" label="USING BY ws rest" color="green" style="bold" intType="5" fontsize="8"] "dummyPeopleSoft" -> "dummyEMA(EricssonMultiActivation)"[ltail="clusterApplicationPeopleSoft" lhead="clusterApplicationEMA(EricssonMultiActivation)" id="3204" label="Tibco Adapter" color="gray" style="solid" intType="12" fontsize="8"] "dummyEMA(EricssonMultiActivation)" -> "dummyTriggerFramework"[ltail="clusterApplicationEMA(EricssonMultiActivation)" lhead="clusterApplicationTriggerFramework" id="3350" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"] subgraph "clusterApplicationTOM(TechnicalOrderManagement)"{ graph [ id="71" shape="box" style="solid" color="gray" fillcolor="red" URL="/TreIntegration/pages/integration.xhtml?level=1&currentAppId=71" label="TOM (Technical Order Management )" ] "dummyTOM(TechnicalOrderManagement)" [style=invis] } "dummyTriggerFramework" -> "dummyTOM(TechnicalOrderManagement)"[ltail="clusterApplicationTriggerFramework" lhead="clusterApplicationTOM(TechnicalOrderManagement)" id="2700" label="Webservice" color="green" style="bold" intType="5" fontsize="8"] "dummyTriggerFramework" -> "dummy111_sdf"[ltail="clusterApplicationTriggerFramework" lhead="clusterApplication111" id="5951" label="EMS - JMS" color="green" style="solid" intType="650" fontsize="8"] "dummyTriggerFramework" -> "dummy111_sdf"[ltail="clusterApplicationTriggerFramework" lhead="clusterApplication111" id="5952" label="afsfa" color="red" style="solid" intType="6" fontsize="8"] "dummyEMA(EricssonMultiActivation)" -> "dummyTriggerFramework"[ltail="clusterApplicationEMA(EricssonMultiActivation)" lhead="clusterApplicationTriggerFramework" id="3351" label="Tibco RV" color="blue" style="solid" intType="9" fontsize="8"]

}

it works great with Graphviz tool but when i run it with Viz.js

Thanks for your help. Happy new year :) Regards, Aamir

VederJay commented 10 years ago

That error doesn't say much - check your browser console (in Chrome: press F12, click tab Console) and see what the output is. My guess is, it will be: Cannot enlarge memory arrays in asm.js. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, or (2) set Module.TOTAL_MEMORY before the program runs.

I'm having the same issue with a rather large graph I'm trying to display. I'll let you know if I find how to set the TOTAL_MEMORY higher so it runs.

VederJay commented 10 years ago

Ok, not pretty - I was hoping to be able to set the TOTAL_MEMORY separately in JavaScript so that it would get picked up, but I'm not seeing how to do that. Dirty hack: open viz.js, search for the line: ha=e.TOTAL_MEMORY||16777216,da=4096;da<ha||da<2hc;)da=16777216>da?2da:da+16777216;

This seems to limit the process to 16 MB memory usage. (16MB = 16 * 1024 *1024 bytes = 16777216 bytes). Increase the number (three times in the above line) to get more memory available. I've needed to go up to 256 MB, which - eventually - displayed my graph. It took a few minutes to appear though.

Btw if you go really high you'll need to increase other memory limits as well, like the TOTAL_STACK (which is in viz.js just before the above referenced line). It will give you a clear error when you run into these type of limits though.