gyuque / livizjs

Interactive Graphviz in javascript

livizjs

Interactive Graphviz in javascript

How to build

Sorry! Build steps are not fully automated. Please do the following preparation.

1. Install Emscripten
2. Backup original Emscripten if you need.
3. Replace src/shell.js and src/library.js in Emscripten with modified files. Modified files are in the source tree.

livizjs's Issues

Google Chrome 24 issue (Uncaught Error: TYPE_MISMATCH_ERR: DOM File Exception 11)

With the release of Google Chrome 24, the WebKitBlobBuilder API has been removed:
http://thenextweb.com/google/2012/11/08/google-releases-chrome-24-beta-says-browser-has-become-26-faster-since-last-year/

The issue is in the stopgo.js file, which I solved here:
https://github.com/lndb/jsPlumb_Liviz.js/blob/master/Liviz.js/stopgo.js

Missing some features

I was looking at this library and it looks great so far. Then I tried to to test the crazy example on the graphviz page located at http://www.graphviz.org/Gallery/directed/crazy.gv.txt and it looks like it doesn't take the options into account. Is this normal ? Some missing features or the library was generated from an older version of graphviz ?

Thanks for the great work so far !

Richard

Not running in chrome

I downloaded the code and without making any changes anywhere, I started the jsPlumbChar.htm example. It's running fine in firefox but not in chrome. It is always showing the "Initializing..." window.
This error is coming on console:
"Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. "
For file "workered.js?v=2" line no:52.
Chrome version: 29.0.1547.76

Please look into it.

Text bounding boxes are not properly set

This was done with the version at http://ushiroad.com/jsviz/

Data:

digraph google_earth_profile {
// Note, this is a dot file formatted to be read by
// Graphviz.
// Global graph attributes
bgcolor = "#888888";
ratio = fill;
edge [fontname="Helvetica" fontsize="10pt"]
node [style=filled shape=box
fontname="Helvetica" fontsize="10pt"
ordering="out"];
// Vertex attributes.
"Cache::Compact" [fillcolor="#aaffaa" label="Cache::Compact\n2.6ms\n(7%)"];
"Cache::FinishFrame" [fillcolor="#aaffaa" label="Cache::FinishFrame\n2.6ms\n(7%)"];
"Cache::RunJobsToCompletion" [fillcolor="#aaffaa" label="Cache::RunJobsToCompletion\n2.5ms\n(7% - 2 calls)"];
"Database::BuildDrawablesList" [fillcolor="#aaffaa" label="Database::BuildDrawablesList\n0.6ms\n(1% - 2 calls)"];
"Database::BuildTerrainAndDrawableListsAll" [fillcolor="#aaffaa" label="Database::BuildTerrainAndDrawableListsAll\n1.4ms\n(4%)"];
"Database::BuildTerrainAndDrawableListsAll-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.5ms\n(1%)"];
"Database::CullAll" [fillcolor="#aaffaa" label="Database::CullAll\n3.2ms\n(9%)"];
"EnhancedScheduler-0" [fillcolor="#aaffaa" label="EnhancedScheduler-0\n1.1ms\n(3%)"];
"EnhancedScheduler-1" [fillcolor="#aaffaa" label="EnhancedScheduler-1\n2.5ms\n(7% - 2 calls)"];
"MainDatabase::ProcessEndFrameJobs" [fillcolor="#aaffaa" label="MainDatabase::ProcessEndFrameJobs\n1.1ms\n(3%)"];
"MainThread" [fillcolor="#ffffaa" label="MainThread\n33.4ms\n(100%)"];
"PhotoOverlayManager" [fillcolor="#aaffaa" label="PhotoOverlayManager\n0.6ms\n(1%)"];
"QTDrawableCallbackTeardownJob" [fillcolor="#aaffaa" label="QTDrawableCallbackTeardownJob\n2.5ms\n(7%)"];
"QtFramework::customEvent" [fillcolor="#ffffaa" label="QtFramework::customEvent\n33.2ms\n(99% - 3 calls)"];
"QuadTree::BuildDrawablesList" [fillcolor="#aaffaa" label="QuadTree::BuildDrawablesList\n0.6ms\n(1%)"];
"QuadTree::Cull" [fillcolor="#aaffaa" label="QuadTree::Cull\n2.8ms\n(8%)"];
"QuadTree::Cull::root->Cull" [fillcolor="#aaffaa" label="QuadTree::Cull::root->Cull\n2.7ms\n(8%)"];
"QuadTree::ProcessDrawableNodes" [fillcolor="#aaffaa" label="QuadTree::ProcessDrawableNodes\n0.6ms\n(1%)"];
"RenderTimer" [fillcolor="#ffffaa" label="RenderTimer\n33.2ms\n(99% - 2 calls)"];
"TerrainManager::DrawFansAndTiles" [fillcolor="#aaffaa" label="TerrainManager::DrawFansAndTiles\n1.6ms\n(4%)"];
"TerrainManager::DrawTerrain" [fillcolor="#aaffaa" label="TerrainManager::DrawTerrain\n2.3ms\n(6%)"];
"TerrainManager::DrawTerrain-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.6ms\n(1%)"];
"TerrainManager::DrawTiles" [fillcolor="#aaffaa" label="TerrainManager::DrawTiles\n1.6ms\n(4%)"];
"VisualContext::Draw" [fillcolor="#ffffaa" label="VisualContext::Draw\n32.8ms\n(98%)"];
"VisualContext::DrawAndResetDisplayList" [fillcolor="#aaffaa" label="VisualContext::DrawAndResetDisplayList\n9.5ms\n(28%)"];
"VisualContext::DrawAndResetDisplayList-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n1.7ms\n(5%)"];
"VisualContext::EndFrame" [fillcolor="#ffffaa" label="VisualContext::EndFrame\n21.4ms\n(63%)"];
"VisualContext::Render" [fillcolor="#aaffaa" label="VisualContext::Render\n5.2ms\n(15%)"];
"VisualContext::Render-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n2.4ms\n(7%)"];
"VisualContext::Update" [fillcolor="#aaffaa" label="VisualContext::Update\n6.2ms\n(18%)"];
"VisualContext::Update-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n1.1ms\n(3%)"];
"VisualContext::WaitForVsync" [fillcolor="#aaffaa" label="VisualContext::WaitForVsync\n7.9ms\n(23%)"];
"glDrawElements" [fillcolor="#aaffaa" label="glDrawElements\n1.6ms\n(4% - 91 calls)"];
"igOglIndexArray_bindIndexPointer" [fillcolor="#aaffaa" label="igOglIndexArray_bindIndexPointer\n0.6ms\n(1% - 91 calls)"];
"igOglVertexArray_bindPointers" [fillcolor="#aaffaa" label="igOglVertexArray_bindPointers\n0.9ms\n(2% - 113 calls)"];
"igOglVisualContext_setTexture" [fillcolor="#aaffaa" label="igOglVisualContext_setTexture\n0.8ms\n(2% - 113 calls)"];
"igOglVisualContext_updateShaderUniforms" [fillcolor="#aaffaa" label="igOglVisualContext_updateShaderUniforms\n1.1ms\n(3% - 113 calls)"];
"igOglVisualContext_updateShaderUniforms-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.9ms\n(2%)"];
"igVisualContext_GenericDraw" [fillcolor="#aaffaa" label="igVisualContext_GenericDraw\n3.3ms\n(9% - 113 calls)"];
"igVisualContext_InternalDraw" [fillcolor="#aaffaa" label="igVisualContext_InternalDraw\n6.9ms\n(20% - 113 calls)"];
"igVisualContext_bindGLPointers" [fillcolor="#aaffaa" label="igVisualContext_bindGLPointers\n1.1ms\n(3% - 113 calls)"];
"igVisualContext_preDrawSetup" [fillcolor="#aaffaa" label="igVisualContext_preDrawSetup\n2.9ms\n(8% - 113 calls)"];
"igVisualContext_preDrawSetup-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.7ms\n(1%)"];
"QuadTree::Cull" -> "QuadTree::Cull::root->Cull" [color="#aaffaa" label="97%"];
"Database::CullAll" -> "QuadTree::Cull" [color="#aaffaa" label="86%"];
"VisualContext::Update" -> "Database::CullAll" [color="#aaffaa" label="52%"];
"QuadTree::BuildDrawablesList" -> "QuadTree::ProcessDrawableNodes" [color="#aaffaa" label="98%"];
"Database::BuildDrawablesList" -> "QuadTree::BuildDrawablesList" [color="#aaffaa" label="98%"];
"Database::BuildTerrainAndDrawableListsAll" -> "Database::BuildDrawablesList" [color="#aaffaa" label="40% - 2 calls"];
"Database::BuildTerrainAndDrawableListsAll" -> "Database::BuildTerrainAndDrawableListsAll-Unaccounted" [color="#aaffaa" label="36%" style="dashed"];
"VisualContext::Update" -> "Database::BuildTerrainAndDrawableListsAll" [color="#aaffaa" label="23%"];
"VisualContext::Update" -> "VisualContext::Update-Unaccounted" [color="#aaffaa" label="18%" style="dashed"];
"VisualContext::Draw" -> "VisualContext::Update" [color="#aaffaa" label="18%"];
"TerrainManager::DrawFansAndTiles" -> "TerrainManager::DrawTiles" [color="#aaffaa" label="99%"];
"TerrainManager::DrawTerrain" -> "TerrainManager::DrawFansAndTiles" [color="#aaffaa" label="71%"];
"TerrainManager::DrawTerrain" -> "TerrainManager::DrawTerrain-Unaccounted" [color="#aaffaa" label="28%" style="dashed"];
"VisualContext::Render" -> "TerrainManager::DrawTerrain" [color="#aaffaa" label="44%"];
"VisualContext::Render" -> "VisualContext::Render-Unaccounted" [color="#aaffaa" label="45%" style="dashed"];
"VisualContext::Draw" -> "VisualContext::Render" [color="#aaffaa" label="15%"];
"igOglVisualContext_updateShaderUniforms" -> "igOglVisualContext_updateShaderUniforms-Unaccounted" [color="#aaffaa" label="82%" style="dashed"];
"igVisualContext_preDrawSetup" -> "igOglVisualContext_updateShaderUniforms" [color="#aaffaa" label="37% - 113 calls"];
"igVisualContext_bindGLPointers" -> "igOglVertexArray_bindPointers" [color="#aaffaa" label="80% - 113 calls"];
"igVisualContext_preDrawSetup" -> "igVisualContext_bindGLPointers" [color="#aaffaa" label="39% - 113 calls"];
"igVisualContext_preDrawSetup" -> "igVisualContext_preDrawSetup-Unaccounted" [color="#aaffaa" label="22%" style="dashed"];
"igVisualContext_InternalDraw" -> "igVisualContext_preDrawSetup" [color="#aaffaa" label="41% - 113 calls"];
"igVisualContext_GenericDraw" -> "igOglIndexArray_bindIndexPointer" [color="#aaffaa" label="17% - 91 calls"];
"igVisualContext_GenericDraw" -> "glDrawElements" [color="#aaffaa" label="48% - 91 calls"];
"igVisualContext_InternalDraw" -> "igVisualContext_GenericDraw" [color="#aaffaa" label="47% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "igVisualContext_InternalDraw" [color="#aaffaa" label="73% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "igOglVisualContext_setTexture" [color="#aaffaa" label="8% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "VisualContext::DrawAndResetDisplayList-Unaccounted" [color="#aaffaa" label="17%" style="dashed"];
"VisualContext::EndFrame" -> "VisualContext::DrawAndResetDisplayList" [color="#aaffaa" label="44%"];
"EnhancedScheduler-0" -> "PhotoOverlayManager" [color="#aaffaa" label="50%"];
"MainDatabase::ProcessEndFrameJobs" -> "EnhancedScheduler-0" [color="#aaffaa" label="98%"];
"VisualContext::EndFrame" -> "MainDatabase::ProcessEndFrameJobs" [color="#aaffaa" label="5%"];
"EnhancedScheduler-1" -> "QTDrawableCallbackTeardownJob" [color="#aaffaa" label="98%"];
"Cache::RunJobsToCompletion" -> "EnhancedScheduler-1" [color="#aaffaa" label="99% - 2 calls"];
"Cache::Compact" -> "Cache::RunJobsToCompletion" [color="#aaffaa" label="97% - 2 calls"];
"Cache::FinishFrame" -> "Cache::Compact" [color="#aaffaa" label="99%"];
"VisualContext::EndFrame" -> "Cache::FinishFrame" [color="#aaffaa" label="12%"];
"VisualContext::EndFrame" -> "VisualContext::WaitForVsync" [color="#aaffaa" label="37%"];
"VisualContext::Draw" -> "VisualContext::EndFrame" [color="#ffffaa" label="65%"];
"RenderTimer" -> "VisualContext::Draw" [color="#ffffaa" label="98%"];
"QtFramework::customEvent" -> "RenderTimer" [color="#ffffaa" label="99% - 2 calls"];
"MainThread" -> "QtFramework::customEvent" [color="#ffffaa" label="99% - 3 calls"];
}

Cluster support

I would like to know whether there is intention of expanding current functionality with dot's 'subgraph/cluster' ?

(http://www.graphviz.org/Gallery/directed/cluster.html)

Add support for shape=record

looks like they are not yet supported

here is a complex example:

digraph G {
  db35info [shape=record,margin="0.1,0.04",label="\
    db35| \
    (couchdb 1.2.0)| \
    m2.2xlarge, 68.4 GB Ram, 26 EC2CU | \
    { {/mnt/db-raid0-xfs ( /dev/md1, 2T ) | {|{ /dev/sdh 500GB | /dev/sdh1 500GB | /dev/sdh2 500GB | /dev/sdh3 500GB }}}}| \
    { {/mnt/view-raid0-xfs ( /dev/md2, 2T ) | {|{ /dev/sdi 500GB | /dev/sdi1 500GB | /dev/sdi2 500GB | /dev/sdi3 500GB }}}} \
  "]
}

rendered output should look something like:

Do not changes element position if element id contains hyphen ( - )

Hi,

It is not changing the position of an element if its ID contains hyphen ( - )

Add support for rankdir=LR

Hello everybody,

Liviz is simply awesome :-)

Unfortunately, especially for me, it does not support Left to Right layout of graphs, that is the option "rankdir=LR", and the cluster graphs boxing.

Is it necessary to recompile Graphviz via emscripten to add these options? If so, how can this be done?

Cheers,
Gaby

Docs on how to get a basic example running

Hi,

I'd like to use your library in my project and I was wondering if it would be possible to write up some documentation on how to use the library to get the most basic example running? E.g. how to convert a dot input string to an svg image, without any animations or dynamics. Your demo web app is awesome, but navigating and digging through the code to understand what does what and how to get a simple example running is a bit hard.

I'm sure a lot of people would be grateful for some documentation on how to get started with the underlying JavaScript library (again, not the demo app) and perhaps a list of current features.

Thanks! Awesome work!