Graph viewer: empty pane with no feedback on large graphs

Open
#1,334 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript, vscode
Domain
data-visualization, devtools

Research direction

Start by reproducing the issue in the VS Code extension with the provided CodeQL query, varying 9999 to find the graph-size threshold, and check the extension log. Done means large graphs render or the viewer provides actionable error feedback while preserving table access to the raw edges and nodes results; the requested .dot export is an optional alternative.

Written by the indexing model from the issue text.

Description

bug VSCode

When running graph queries that produce large graphs, the graph viewer in the extension just shows the CodeQL Query Results pane as an empty space, and I get no error feedback, even in the extension log.

Here's a query that reproduces the problem for me. You can change the value 9999 up or down to increase/decrease the size of the resulting graph.

/**
 * @kind graph
 * @id foo
 */
class Node extends int {
  Node() { this = [1 .. 9999] }
}

query predicate nodes(Node node, string attr, string val) {
  attr = ["semmle.label", "semmle.order"] and
  val = node.toString()
}

query predicate edges(Node a, Node b, string attr, string val) {
  b / 5 = a and
  (
    attr = "semmle.label" and val = ""
    or
    attr = "semmle.order" and val = b.toString()
  )
}

And here's what I see when I run that:

Screenshot 2022-05-04 at 16 11 54

Ideally, the graph would actually be rendered.

Failing that, I would like to see some kind of error feedback, and the ability to still view the raw edges and nodes results in table format. It might even be nice to give the option to just save a .dot file that I could manually run through graphviz.

Dominant language
TypeScript
Stars
539
Forks
240
Avg merge
2d 6h
Merged PRs (30d)
29

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from github/vscode-codeql

All issues in github/vscode-codeql

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.