search

tintinweb / vscode-interactive-graphviz

Interactive Graphviz Dot Preview for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview
GNU General Public License v3.0
156 stars 28 forks source link

[Bug] Interactive graph is not showing #2

Closed pidgeon777 closed 4 years ago

pidgeon777 commented 4 years ago

When I generate a preview of my current .dot file, I do not obtain an interactive graph like this one:

image

Instead, I obtain a static graph.

My setup is:

tintinweb commented 4 years ago

Please provide the dot file and Ill try to reproduce.

Cheers

pidgeon777 commented 4 years ago

Hello, first of all thanks for the prompt reply.

This is my dot file:

digraph finite_state_machine {
    rankdir=LR;
    size="8,5"

    node [shape = doublecircle]; S;
    node [shape = point ]; qi

    node [shape = circle];
    qi -> S;
    S  -> q1 [ label = "a" ];
    S  -> S  [ label = "a" ];
    q1 -> S  [ label = "a" ];
    q1 -> q2 [ label = "b" ];
    q2 -> q1 [ label = "b" ];
    q2 -> q2 [ label = "b" ];
}

This is what I obtain:

image

tintinweb commented 4 years ago

@pidgeon777 in your example all nodes are reachable via a path from other nodes. you'll not be able to see a difference when tracing the path.

add two directed entry nodes and you should be able to trace it. image

pidgeon777 commented 4 years ago

You're right now it seems to work. Thank you!

I've another question, how do you colorize the graph to obtain the theme of the first one I posted above?

tintinweb commented 4 years ago

This is output from solidity visual auditor. It is using a custom theme for dot graphs. Here's an example:

digraph G {
  graph [ ratio = "auto", page = "100", compound =true, bgcolor = "#2e3e56" ];
  node [ style = "filled", fillcolor = "#edad56", color = "#edad56", penwidth =3 ];
  edge [ color = "#fcfcfc", penwidth =2, fontname = "helvetica Neue Ultra Light" ];
subgraph "clusterMythXERC20Verification" {
  graph [ label = "MythXERC20Verification", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "MythXERC20Verification.<Constructor>" [ label = "<Constructor>", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification._mythx_ContractInvariant_snapshot" [ label = "_mythx_ContractInvariant_snapshot" ];
  "MythXERC20Verification._mythx_ContractInvariant_check" [ label = "_mythx_ContractInvariant_check", color = "#f2c383", fillcolor = "#f2c383" ];
  "MythXERC20Verification.transferOwnership" [ label = "transferOwnership", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.renounceOwnership" [ label = "renounceOwnership", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.transfer" [ label = "transfer", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.transferFrom" [ label = "transferFrom", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.approve" [ label = "approve", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.increaseAllowance" [ label = "increaseAllowance", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.decreaseAllowance" [ label = "decreaseAllowance", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.unlock_token" [ label = "unlock_token", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXERC20Verification.issue" [ label = "issue", color = "#FF9797", fillcolor = "#FF9797" ];
}

subgraph "clusterIERC20" {
  graph [ label = "IERC20  (iface)", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "IERC20.totalSupply" [ label = "totalSupply", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
  "IERC20.balanceOf" [ label = "balanceOf", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
  "IERC20.transfer" [ label = "transfer", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
  "IERC20.allowance" [ label = "allowance", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
  "IERC20.approve" [ label = "approve", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
  "IERC20.transferFrom" [ label = "transferFrom", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
}

subgraph "clusterERC20Detailed" {
  graph [ label = "ERC20Detailed", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "ERC20Detailed.<Constructor>" [ label = "<Constructor>", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Detailed.name" [ label = "name", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Detailed.symbol" [ label = "symbol", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Detailed.decimals" [ label = "decimals", color = "#FF9797", fillcolor = "#FF9797" ];
}

subgraph "clusterOwnable" {
  graph [ label = "Ownable", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "Ownable.<Constructor>" [ label = "<Constructor>", color = "#f2c383", fillcolor = "#f2c383" ];
  "Ownable.owner" [ label = "owner", color = "#FF9797", fillcolor = "#FF9797" ];
  "Ownable.onlyOwner" [ label = "onlyOwner", color = "#1bc6a6", shape =doubleoctagon ];
  "Ownable.isOwner" [ label = "isOwner" ];
  "Ownable.renounceOwnership" [ label = "renounceOwnership", color = "#FF9797", fillcolor = "#FF9797" ];
  "Ownable.transferOwnership" [ label = "transferOwnership", color = "#FF9797", fillcolor = "#FF9797" ];
  "Ownable._transferOwnership" [ label = "_transferOwnership" ];
}

subgraph "clusterSafeMath" {
  graph [ label = "SafeMath  (lib)", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "SafeMath.add" [ label = "add" ];
  "SafeMath.sub" [ label = "sub" ];
  "SafeMath.mul" [ label = "mul", color = "#f2c383", fillcolor = "#f2c383" ];
  "SafeMath.div" [ label = "div" ];
  "SafeMath.mod" [ label = "mod" ];
}

subgraph "clusterERC20Lockable" {
  graph [ label = "ERC20Lockable", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "ERC20Lockable.onlyUnlocked" [ label = "onlyUnlocked", color = "#1bc6a6", shape =doubleoctagon ];
  "ERC20Lockable._unlock" [ label = "_unlock", color = "#f2c383", fillcolor = "#f2c383" ];
  "ERC20Lockable.totalSupply" [ label = "totalSupply", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.balanceOf" [ label = "balanceOf", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.transfer" [ label = "transfer", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.allowance" [ label = "allowance", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.approve" [ label = "approve", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.transferFrom" [ label = "transferFrom", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.increaseAllowance" [ label = "increaseAllowance", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable.decreaseAllowance" [ label = "decreaseAllowance", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20Lockable._transfer" [ label = "_transfer" ];
  "ERC20Lockable._mint" [ label = "_mint", color = "#f2c383", fillcolor = "#f2c383" ];
  "ERC20Lockable._burn" [ label = "_burn", color = "#f2c383", fillcolor = "#f2c383" ];
  "ERC20Lockable._approve" [ label = "_approve" ];
  "ERC20Lockable._burnFrom" [ label = "_burnFrom", color = "#f2c383", fillcolor = "#f2c383" ];
}

subgraph "clusterERC20StaticSupply" {
  graph [ label = "ERC20StaticSupply", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "ERC20StaticSupply.<Constructor>" [ label = "<Constructor>", color = "#FF9797", fillcolor = "#FF9797" ];
  "ERC20StaticSupply.issue" [ label = "issue", color = "#FF9797", fillcolor = "#FF9797" ];
}

subgraph "clusterVega_Token" {
  graph [ label = "Vega_Token", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "Vega_Token.<Constructor>" [ label = "<Constructor>", color = "#FF9797", fillcolor = "#FF9797" ];
  "Vega_Token.unlock_token" [ label = "unlock_token", color = "#FF9797", fillcolor = "#FF9797" ];
  "Vega_Token.is_tradable" [ label = "is_tradable", color = "#FF9797", fillcolor = "#FF9797" ];
}

subgraph "clusterMythXVerificationUtils" {
  graph [ label = "MythXVerificationUtils", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "MythXVerificationUtils.transferOwnership" [ label = "transferOwnership" ];
  "MythXVerificationUtils.renounceOwnership" [ label = "renounceOwnership" ];
  "MythXVerificationUtils.transfer" [ label = "transfer" ];
  "MythXVerificationUtils.transferFrom" [ label = "transferFrom" ];
  "MythXVerificationUtils.approve" [ label = "approve" ];
  "MythXVerificationUtils.increaseAllowance" [ label = "increaseAllowance" ];
  "MythXVerificationUtils.decreaseAllowance" [ label = "decreaseAllowance" ];
  "MythXVerificationUtils.unlock_token" [ label = "unlock_token" ];
  "MythXVerificationUtils.issue" [ label = "issue" ];
  "MythXVerificationUtils._mythx_contractInvariant_perform_snapshot" [ label = "_mythx_contractInvariant_perform_snapshot", color = "#1bc6a6", shape =doubleoctagon ];
  "MythXVerificationUtils._mythx_wrapped_function" [ label = "_mythx_wrapped_function", color = "#1bc6a6", shape =doubleoctagon ];
  "MythXVerificationUtils.<Constructor>" [ label = "<Constructor>", color = "#FF9797", fillcolor = "#FF9797" ];
  "MythXVerificationUtils._mythx_ContractInvariant_snapshot" [ label = "_mythx_ContractInvariant_snapshot" ];
  "MythXVerificationUtils._mythx_ContractInvariant_check" [ label = "_mythx_ContractInvariant_check" ];
  "MythXVerificationUtils._mythx_startCall" [ label = "_mythx_startCall" ];
  "MythXVerificationUtils._mythx_endCall" [ label = "_mythx_endCall" ];
  "MythXVerificationUtils._mythx_isEndOfOuterCall" [ label = "_mythx_isEndOfOuterCall" ];
  "MythXVerificationUtils._mythx_equals" [ label = "_mythx_equals", color = "#f2c383", fillcolor = "#f2c383" ];
  "MythXVerificationUtils.<Fallback>" [ label = "<Fallback>", color = "#ffbdb9", fillcolor = "#ffbdb9" ];
}

  "MythXERC20Verification._mythx_ContractInvariant_check";
  "MythXERC20Verification._mythx_ContractInvariant_snapshot";
  "MythXERC20Verification.transferOwnership";
  "MythXVerificationUtils.transferOwnership";
  "MythXERC20Verification.renounceOwnership";
  "MythXVerificationUtils.renounceOwnership";
  "MythXERC20Verification.transfer";
  "MythXVerificationUtils.transfer";
  "MythXERC20Verification.transferFrom";
  "MythXVerificationUtils.transferFrom";
  "MythXERC20Verification.approve";
  "MythXVerificationUtils.approve";
  "MythXERC20Verification.increaseAllowance";
  "MythXVerificationUtils.increaseAllowance";
  "MythXERC20Verification.decreaseAllowance";
  "MythXVerificationUtils.decreaseAllowance";
  "MythXERC20Verification.unlock_token";
  "MythXVerificationUtils.unlock_token";
  "MythXERC20Verification.issue";
  "MythXVerificationUtils.issue";
  "Ownable.onlyOwner";
  "Ownable.isOwner";
  "Ownable.transferOwnership";
  "Ownable._transferOwnership";
  "SafeMath.sub";
  "SafeMath.div";
  "SafeMath.mod";
  "ERC20Lockable.transfer";
  "ERC20Lockable._transfer";
  "ERC20Lockable.approve";
  "ERC20Lockable._approve";
  "ERC20Lockable.transferFrom";
  "ERC20Lockable.increaseAllowance";
  "ERC20Lockable.decreaseAllowance";
  "ERC20Lockable._mint";
  "SafeMath.add";
  "ERC20Lockable._burn";
  "ERC20Lockable._burnFrom";
  "MythXVerificationUtils._mythx_contractInvariant_perform_snapshot";
  "MythXVerificationUtils._mythx_ContractInvariant_snapshot";
  "MythXVerificationUtils._mythx_wrapped_function";
  "MythXVerificationUtils._mythx_startCall";
  "MythXVerificationUtils._mythx_endCall";
  "MythXVerificationUtils._mythx_isEndOfOuterCall";
  "MythXVerificationUtils._mythx_ContractInvariant_check";
  "MythXVerificationUtils.<Constructor>";
  "MythXERC20Verification._mythx_ContractInvariant_check" -> "MythXERC20Verification._mythx_ContractInvariant_snapshot" [ color = "#1bc6a6" ];
  "MythXERC20Verification.transferOwnership" -> "MythXVerificationUtils.transferOwnership" [ color = "white" ];
  "MythXERC20Verification.renounceOwnership" -> "MythXVerificationUtils.renounceOwnership" [ color = "white" ];
  "MythXERC20Verification.transfer" -> "MythXVerificationUtils.transfer" [ color = "white" ];
  "MythXERC20Verification.transferFrom" -> "MythXVerificationUtils.transferFrom" [ color = "white" ];
  "MythXERC20Verification.approve" -> "MythXVerificationUtils.approve" [ color = "white" ];
  "MythXERC20Verification.increaseAllowance" -> "MythXVerificationUtils.increaseAllowance" [ color = "white" ];
  "MythXERC20Verification.decreaseAllowance" -> "MythXVerificationUtils.decreaseAllowance" [ color = "white" ];
  "MythXERC20Verification.unlock_token" -> "MythXVerificationUtils.unlock_token" [ color = "white" ];
  "MythXERC20Verification.issue" -> "MythXVerificationUtils.issue" [ color = "white" ];
  "Ownable.onlyOwner" -> "Ownable.isOwner" [ color = "#1bc6a6" ];
  "Ownable.transferOwnership" -> "Ownable._transferOwnership" [ color = "#1bc6a6" ];
  "SafeMath.sub" -> "SafeMath.sub" [ color = "#1bc6a6" ];
  "SafeMath.div" -> "SafeMath.div" [ color = "#1bc6a6" ];
  "SafeMath.mod" -> "SafeMath.mod" [ color = "#1bc6a6" ];
  "ERC20Lockable.transfer" -> "ERC20Lockable._transfer" [ color = "#1bc6a6" ];
  "ERC20Lockable.approve" -> "ERC20Lockable._approve" [ color = "#1bc6a6" ];
  "ERC20Lockable.transferFrom" -> "ERC20Lockable._transfer" [ color = "#1bc6a6" ];
  "ERC20Lockable.transferFrom" -> "ERC20Lockable._approve" [ color = "#1bc6a6" ];
  "ERC20Lockable.increaseAllowance" -> "ERC20Lockable._approve" [ color = "#1bc6a6" ];
  "ERC20Lockable.decreaseAllowance" -> "ERC20Lockable._approve" [ color = "#1bc6a6" ];
  "ERC20Lockable._mint" -> "SafeMath.add" [ color = "white" ];
  "ERC20Lockable._burn" -> "SafeMath.sub" [ color = "white" ];
  "ERC20Lockable._burnFrom" -> "ERC20Lockable._burn" [ color = "#1bc6a6" ];
  "ERC20Lockable._burnFrom" -> "ERC20Lockable._approve" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_contractInvariant_perform_snapshot" -> "MythXVerificationUtils._mythx_ContractInvariant_snapshot" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_wrapped_function" -> "MythXVerificationUtils._mythx_startCall" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_wrapped_function" -> "MythXVerificationUtils._mythx_endCall" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_wrapped_function" -> "MythXVerificationUtils._mythx_isEndOfOuterCall" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_wrapped_function" -> "MythXVerificationUtils._mythx_ContractInvariant_check" [ color = "#1bc6a6" ];
  "MythXVerificationUtils.<Constructor>" -> "MythXVerificationUtils._mythx_ContractInvariant_snapshot" [ color = "#1bc6a6" ];
  "MythXVerificationUtils._mythx_ContractInvariant_check" -> "MythXVerificationUtils._mythx_ContractInvariant_snapshot" [ color = "#1bc6a6" ];

rankdir=LR
node [shape=plaintext]
subgraph cluster_01 { 
label = "Legend";
key [label=<<table border="0" cellpadding="2" cellspacing="0" cellborder="0">
  <tr><td align="right" port="i1">Internal Call</td></tr>
  <tr><td align="right" port="i2">External Call</td></tr>
  <tr><td align="right" port="i3">Defined Contract</td></tr>
  <tr><td align="right" port="i4">Undefined Contract</td></tr>
  </table>>]
key2 [label=<<table border="0" cellpadding="2" cellspacing="0" cellborder="0">
  <tr><td port="i1">&nbsp;&nbsp;&nbsp;</td></tr>
  <tr><td port="i2">&nbsp;&nbsp;&nbsp;</td></tr>
  <tr><td port="i3" bgcolor="#445773">&nbsp;&nbsp;&nbsp;</td></tr>
  <tr><td port="i4">
    <table border="1" cellborder="0" cellspacing="0" cellpadding="7" color="#e8726d">
      <tr>
       <td></td>
      </tr>
     </table>
  </td></tr>
  </table>>]
key:i1:e -> key2:i1:w [color="#1bc6a6"]
key:i2:e -> key2:i2:w [color="white"]
}
}