I love that we can zoom in and out and pan around, and that the zoom scales with the window size. However, after adjusting the zoom and panning I cannot figure out how to reset the view to its original behavior of fitting the window width perfectly.

Would love a keyboard shortcut, command, button, context menu...some way to reset zoom.

Support to import a graph from another file as subgraph.

Hi, I maintain VS Code's Webview API

Issue

Our telemetry suggests that your extension uses webviews and may be loading resources in these webviews using hardcoded vscode-resource: URIs. These URIs have some important limitations and don't work properly when VS Code is run in a browser. We are also making changes in the desktop version of VS Code that may cause these URIs to not work properly in future versions of VS Code.

While we are making our best effort to continue support existing webview extensions that use vscode-resource: URIs on desktop versions of VS Code, we will not able to fully support all uses cases.

Fix

To ensure that your extension continues to work in as many environments as possible—including on web and remotely—please:

• Switch to use the Webview.asWebviewUri function for loading resources.

• Switch to use the Webview.cspSource property in content security policies.

These APIs shipped around 2 years ago so they should be available in all modern versions of VS Code. You can find additional information about the issue here: microsoft/vscode#97962

Let me know if you have any questions about this change

Use the theme's colors as default color for the GV rendering

Bundle the extension to reduce file count and size.

https://code.visualstudio.com/api/working-with-extensions/bundling-extension

I love the feature where I can select a node and see all the connected nodes. It would be great to have a toggle for highlighting only upstream or downstream dependencies in a DAG. This will help working with big graphs when one wants to understand which nodes contribute to a node.

Now scrolling the mouse will zoom in and out, which is very inconvenient. Horizontal and vertical scroll bars should be added.

https://code.visualstudio.com/api/language-extensions/programmatic-language-features#provide-diagnostics
This has to use the Graphviz renderer in the editor and calculate the results on the fly. However, it may not be feasible for large files.

Regex search seems to be matching strings in the case sensitive mode. It would be convenient to default to case insensitive matching, much like the VS Code default.

With a test.dot file like:

digraph D { a [shape="none" label="Node a"; image="actor.png"]; b; a->b; }

and assuming actor.png is on the same folder as the dot file, the preview doesn't include an image object in the generated svg. Verified this by opening preview in the default browser. However, running this in the command line:

dot -Tsvg test.dot

makes graphviz to include the image when generating output, proving that graphviz does generate images for the node. Could I be missing an attribute, configuration or something?

The extension leads to errors in Safari. The Graphviz View can not be rendered and we get an infinite progress bar.

Console shows errors related to malformed Content-Security-Policy:

In version 0.1.2, graphs appear to be rendered using the dot GraphViz renderer equivalent, with no option to switch to the other renderers supported by d3-graphviz, such as neato, fdp etc. Since all of the standard GraphViz renderers are supported by both d3-graphviz and hpcc-js-wasm, it seems like using any of the renderers should be relatively easy.

Suggest that support for other render types be added to the vscode extension if possible.

When there are two or more same path with different label, it only highlights one of the path. Could this be enhanced?

Thanks

If a given graph is already rendered and you try to search for a node, the search toolbar appears.
If you change the source of this graph, then it is rendered immediately in the preview window, however the search toolbar gets hidden.

The code in the index.html got very big. It should be split up and reorganised.

tracking microsoft/vscode#123822

The content folder currently uses javascript files and distributed files. This has to be changed so that typescript is used and that it gets bundled.

Hi,

I just installed this but what should I do to enable the preview?
I tried the cmd + v and cmd + k + v and cmd + shift + v, none seem to work and it seems to render the dot file as plain text.

Am I mis-configuring the IDE (I'm new to VS Code)?

Thanks!
Steve

The preview window doesn't automatically refresh when I start typing in the code editor. Even if I save the file at the end.

My setup is:

• Windows 10 Professional x64
• Visual Studio Code 1.42.0

https://code.visualstudio.com/api/language-extensions/programmatic-language-features#show-color-decorators

Currently the color is only working in the code completion. The Colors have to be implemented properly with a color decorator.

Continuous integration can be enabled for this project to ensure checks for each merge.

On nodes only the actual rendered lines are clickable. The rest is not clickable. In the following example only the ellipsis line and the label are clickable. The white space within the ellipsis is not clickable - but I think it should be.

digraph { a -> b a-> c }

The marked red area is currently not clickable (same applies to node b and c):

Maybe related to #21?

https://code.visualstudio.com/api/language-extensions/programmatic-language-features#show-hovers
There should be a hover information on the attributes which describe their purpose. The same data should be used for code completion provider.

Viewer sometimes gets into a state where clicking on a node does not focus the incoming/outgoing. Have not yet figured out how to reproduce.

I see a new formatter comes into the extension (v0.3).
It is good, but mandatary now - adding some options to configure by users might be better.

comment here: a6b963a#r73550516

Recognize subgraphs as symbols for the outline view

What do you guys think about offering an additional visual editor? This is meant in a way that the underlying DOT code is completely abstracted away from the user? In the background the DOT code could be generated and sent to our rendering engine.

Dot format is sensitive to spaces. Quote from https://graphviz.org/doc/info/shapes.html#html

As is obvious from the above description, the interpretation of white space characters is one place where HTML-like labels is very different from standard HTML. In HTML, any sequence of white space characters is collapsed to a single space, If the user does not want this to happen, the input must use non-breaking spaces  . This makes sense in HTML, where text layout depends dynamically on the space available. In Graphviz, the layout is statically determined by the input, so it is reasonable to treat ordinary space characters as non-breaking. In addition, ignoring tabs and newlines allows the input text to be formatted for easier reading.

digraph {
  ranksep=1.0; rankdir=LR;
  node [shape = none, fontname="Roboto Mono"];
  "Blog.Comment" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'>   Blog.Comment   </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>comments</i></font></td></tr><tr><td align='left' port='field@id'>:id              <i><font color='gray54'>:id                 </font></i></td></tr><tr><td align='left' port='field@text'>:text            <i><font color='gray54'>:string             </font></i></td></tr><tr><td align='left' port='field@inserted_at'>:inserted_at     <i><font color='gray54'>:naive_datetime     </font></i></td></tr><tr><td align='left' port='field@updated_at'>:updated_at      <i><font color='gray54'>:naive_datetime     </font></i></td></tr><tr><td align='left' port='field@post_id'>:post_id         <i><font color='gray54'>:id                 </font></i></td></tr><tr><td align='left' port='field@user_id'>:user_id         <i><font color='gray54'>:id                 </font></i></td></tr></table>>]
  "Blog.Post" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'>   Blog.Post   </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>posts</i></font></td></tr><tr><td align='left' port='field@id'>:id              <i><font color='gray54'>:id                 </font></i></td></tr><tr><td align='left' port='field@title'>:title           <i><font color='gray54'>:string             </font></i></td></tr><tr><td align='left' port='field@text'>:text            <i><font color='gray54'>:string             </font></i></td></tr><tr><td align='left' port='field@inserted_at'>:inserted_at     <i><font color='gray54'>:naive_datetime     </font></i></td></tr><tr><td align='left' port='field@updated_at'>:updated_at      <i><font color='gray54'>:naive_datetime     </font></i></td></tr><tr><td align='left' port='field@user_id'>:user_id         <i><font color='gray54'>:id                 </font></i></td></tr></table>>]
  "Blog.User" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'>   Blog.User   </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>users</i></font></td></tr><tr><td align='left' port='field@id'>:id        <i><font color='gray54'>:id         </font></i></td></tr><tr><td align='left' port='field@email'>:email     <i><font color='gray54'>:string     </font></i></td></tr></table>>]

  "Blog.Post":"field@id":e -> "Blog.Comment":"field@post_id":w
  "Blog.User":"field@id":e -> "Blog.Comment":"field@user_id":w
  "Blog.User":"field@id":e -> "Blog.Post":"field@user_id":w
}

This is how it looks if rendered with dot utility:

And this is a screenshot from VS code:

when changing the graph the preview is updated automatically. however, this is only done verye 5 seconds to avoid breaking the tracing. see #3

We should be able to rename the names of a node at once using VSCode's Rename Symbols:
https://code.visualstudio.com/api/language-extensions/programmatic-language-features#rename-symbols

For large files the transition animation seems to lead to a higher computation time.
During experiments it was seen, that an initial rendering of the file took 15 seconds. Subsequent renders of the same file (with small changes on only one node) then took about 45 seconds. It was seen that removing

graphviz
  .fade(true)
  .transition(transition)
  .tweenPaths(true) // default
  .tweenShapes(true) // default

from the code lead to significant better render times.
The removal of this code could possibly reduce the render times. Maybe already lowering transition is sufficient. A mechanism could be implemented strip away the transition if the underlying DOT render of the previous DOT source took over 15?? seconds.

In some files of the extension the MIT License is mentioned. It would be good to have a License file in the root folder of the repo.

The current highlight color for node search results is a light blue color. It is hard to notice when the node itself is colored. It would be nice to adapt the color to make the highlight more obvious, or use a brighter color by default (yellow?)

On running large DOT files (e.g. example from https://gist.githubusercontent.com/williame/4087256/raw/4911df0fe4c4186eb482bd4a2162bd55cc698d67/gistfile1.txt ) it seems, that the there is nothing going on. The screen stays empty and there is no indication, that the Renderer is still running. This should be fixed using either an (indefinite) progress bar or some other kind of indicator.

The toolbars for the number of search results and the error shall be restyled so that they use VS Code's theme Colors and so that they fit better into the visual appearance.

Base could be:

        .toolbar-danger {
            background-color: var(--vscode-inputValidation-errorBackground);
            border-color: var(--vscode-inputValidation-errorBorder);
            border-style: solid;
            font-size: .9em;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 3px;
            margin-bottom: 3px;
            padding: 5px;
            border-width: 1px;
        }

We should provide a possibility to format the source code so that the dot file always gets formatted the exact same way.
https://code.visualstudio.com/api/language-extensions/programmatic-language-features#format-source-code-in-an-editor

Searching only matches full strings at the moment. For working with very big graphs, it helps to allow fuzzy match or prefix match in the search feature.

And make the currently selected node stand out more visually.

Microsoft published the VS Code Webview UI Toolkit which offers UI Elements also used by VS Code Natively. This could also be implemented in this extension to make it look more like VS Code.

Support GV-Renderings in notebook cells

In the screenshots, you show the graph rendering with a dark theme. I use a dark theme, and just created a simple dot file. In the preview though, the graph is shown as black outlines on a white background. What do I need to do to show the preview in dark mode?

The graph can lap over the toolbar:

When rendering a large DOT file the progress bar stays open even after the tab with the view is closed.

Make the extension able to run on the web version of VS Code:
https://code.visualstudio.com/api/extension-guides/web-extensions

The new search system currently supports nodes and edges. Subgraphs are still missing. They should be added.

Example:

digraph {
    subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process";
		color=blue
	}
    a -> b
    a -> b

    a -> c

    b1 -> d
    d -> b
    e -> d
    b -> f
}

Instead of screenshotting and manually selecting the graph, it would make it easier to perform quick one-off shares (e.g. pasting in Slack) if there was a button or option to copy the current image to the clipboard.

Even better if there's a setting that allows the image placed on the clipboard to be a larger resolution than what's shown on screen.

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

Instead, I obtain a static graph.

My setup is:

• Windows 10 Professional x64
• Visual Studio Code 1.42.0

Clicking on the background brings it to the front. This makes it impossible to click back on the nodes that are covered.

Steps to reproduce

1. Select the background of a subgraph
2. Press esc
3. The background is now on top of the nodes

Hi, thanks for the awesome extension. Sorry for the cryptic title.

I am developing an extension that generates a DOT file and previews it using your extension. I want to catch 'onClick' events on nodes to capture the clicked node ID.

I have the following code that correctly hooks to 'onClick' events.

preview(fullname: string, content: string) {
  let callback = (webpanel: any) => this.interactivePreviewWebpanelCallback(webpanel);
  vscode.workspace.openTextDocument(fullname).then( (document) => {
      let args = { document, content, callback };
      vscode.commands.executeCommand("graphviz-interactive-preview.preview.beside", args);
  });
}

interactivePreviewWebpanelCallback(webpanel: any) {
  let handler = (message: any) => { return this.interactivePreviewMessageHandler(message); }
  webpanel.handleMessage = handler;
}

interactivePreviewMessageHandler(message: any) {
  console.log(JSON.stringify(message));

  switch(message.command){
      case 'onClick':
          console.log("onClick");
          break;
      case 'onDblClick':
          console.log("onDblClick");
          break;
      default:
          console.warn('Unexpected command: ' + message.command);
  }
}

However, when I try to get the clicked node ID from message.value.node, it is always "this":

{"command":"onClick","value":{"node":"this"}}

Do you have any clues?

Thanks,

Jonathan