Visual Code Extension unable to render

[krypston104]

Whenever I try to get any graph rendered in VSC using the extension, it gets stuck "Rendering Graphviz View" as in the image shown below. The Digrapgh text files are generated properly but the are just not able to be rendered. Unable to go further.

[bigbug]

Can you elaborate on which file this happens for you? On which platform are you trying to do this?

[krypston104]

this happens on any solidity contract I intend to get a graph from. I am using Windows 10.

[bigbug]

Can you provide a sample file?

[krypston104]

Yes. This contract, for instance:

pragma solidity ^0.4.21;

contract FiftyYearsChallenge {
    struct Contribution {
        uint256 amount;
        uint256 unlockTimestamp;
    }
    Contribution[] queue;
    uint256 head;
    address owner;

    constructor(address player) public payable {
        require(msg.value == 1 ether);
        owner = player;
        queue.push(Contribution(msg.value, now + 10**18));
    }

    function isComplete() public view returns (bool) {
        return address(this).balance == 0;
    }

    function upsert(uint256 index, uint256 timestamp) public payable {
        require(msg.sender == owner);

        if (index >= head && index < queue.length) {
            // Update existing contribution amount without updating timestamp.
            Contribution storage contribution = queue[index];
            contribution.amount += msg.value;
        } else {
            // Append a new contribution. Require that each contribution unlock
            // at least 1 day after the previous one.
            require(timestamp >= queue[queue.length - 1].unlockTimestamp + 100);

            contribution.amount = msg.value; /////// => to queue.length
            contribution.unlockTimestamp = timestamp; //// => to head
            queue.push(contribution); /// contribution amount = msg.value + 1
        }
    }

    function withdraw(uint256 index) public {
        require(msg.sender == owner);
        require(now >= queue[index].unlockTimestamp);

        // Withdraw this and any earlier contributions.
        uint256 total = 0;
        for (uint256 i = head; i <= index; i++) {
            total += queue[i].amount;

            // Reclaim storage.
            delete queue[i];
        }

        // Move the head of the queue forward so we don't have to loop over
        // already-withdrawn contributions.
        head = index + 1;

        msg.sender.transfer(total);
    }
}

returns this Digraph G file:

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 "clusterFiftyYearsChallenge" {
  graph [ label = "FiftyYearsChallenge", color = "#445773", fontcolor = "#f0f0f0", style = "rounded", bgcolor = "#445773" ];
  "FiftyYearsChallenge.<Constructor>" [ label = "<Constructor>", color = "brown", fillcolor = "#FF9797" ];
  "FiftyYearsChallenge.isComplete" [ label = "isComplete", color = "#FF9797", fillcolor = "#FF9797" ];
  "FiftyYearsChallenge.upsert" [ label = "upsert", color = "brown", fillcolor = "#FF9797" ];
  "FiftyYearsChallenge.withdraw" [ label = "withdraw", color = "#FF9797", fillcolor = "#FF9797" ];
}



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"]
}
}

but does not render the graph. I can import that file to any web service providing this service and it gets rendered there.

The contract I provided is just a sample. This happens with ANY contract.

[aktary]

I have exactly the same problem. It creates the digraph file and pops open the preview window, but then just sits there with the "Rendering Graphviz View" popup. It was working... then it wasn't. I'm on an M1 Mac, for what that's worth.

[bigbug]

Hmmm, for me the digraph code renders perfectly. Are you using another extension in between?

[krypston104]

Hmmm, for me the digraph code renders perfectly. Are you using another extension in between?

No

[bigbug]

Do you have any other tabs, text editors etc open in VS Code before trying to open this file?

[krypston104]

Do you have any other tabs, text editors etc open in VS Code before trying to open this file?

No. I just clean start VSC, load the .sol file and request the graph. I have tried it in several different ways before opening this thread and never managed to make it work. If it is due to some setup I have not been able to figure it.

[bigbug]

What is a .sol file? Can you provide a video of what you are doing?

[bigbug]

So my current guess is you are using https://github.com/ConsenSys/vscode-solidity-auditor as an extension in the middle. Using this extension I can reproduce the behaviour you are describing.

(At least partly. For me the graph is rendered, but the progress notification stays open)

[aktary]

I am using that extension. I do not get a partial render... just a blank canvas and open progress notification.

[bigbug]

For me everything works fine, when I disable the option "graphviz-interactive-preview.openAutomatically". Can you try this?

[bigbug]

I think I found something. It seems that in a case where the preview is loaded twice within a very short time (e.g. when another extension open a text document (where this extension automatically opens the preview) and then executes the preview command) it is possible that the render is sent to the preview panel BEFORE the settings are transmitted to the web view. This leads to the web view failing to read the settings and then crashes the web view.

I will create a PR to fix this behaviour by introducing another render condition to only render the data, when the config has been transmitted to the web view.

[bigbug]

Should be fixed with PR #139

[tintinweb]

should be fixed. thanks, @bigbug 🚀 🤗