Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

html-query-plan

Display SQL Server Execution Plans in HTML

Subscribe to updates I use html-query-plan


Statistics on html-query-plan

Number of watchers on Github 138
Number of open issues 10
Average time to close an issue about 1 month
Main language XSLT
Average time to merge a PR 12 days
Open pull requests 1+
Closed pull requests 1+
Last commit about 1 year ago
Repo Created over 5 years ago
Repo Last Updated 6 months ago
Size 2.16 MB
Organization / Authorjustinpealing
Latest Releasev2.6
Contributors1
Page Updated
Do you use html-query-plan? Leave a review!
View open issues (10)
View html-query-plan activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating html-query-plan for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

html-query-plan

html-query-plan is a JavaScript library for showing Microsoft SQL Server execution plans in HTML.

html-query-plan screenshot

To use in a web page:

  • Find the latest release here.
  • Include qp.css and qp.min.js
  • Call QP.showPlan, passing the container in which to show the plan and the query plan XML (as a string).
<div id="container"></div>
<script>
    QP.showPlan(document.getElementById("container"), '<ShowPlanXML...');
</script> 

See the examples folder for complete examples.

Options

Additional options can be passed using the 3rd argument:

<div id="container"></div>
<script>
    var options = {
        jsTooltips: false
    };
    QP.showPlan(document.getElementById("container"), '<ShowPlanXML...', options);
</script> 
Option Default Description
jsTooltips true Set to false to use CSS tooltips.

Running XSLT separately

Under the covers, html-query-plan is an XSLT 1.0 stylesheet (qp.xslt), which can be used to pre-render the plan html. Javascript is still needed to draw the connecting lines. To do this, follow the above steps but call QP.drawLines instead:

<div id="container">
    <!-- Insert XSLT output here -->
</div>
<script>
    QP.drawLines(document.getElementById("container"));
</script>

Browser Support

Should work just fine in any modern browser. Tested in Chrome, Firefox and IE9+. IE8 and earlier have known issues.

Icons

Meaning of the overlay icons for nodes:

Icon Description
Batch Icon Either the actual execution mode was Batch (for actual execution plans), or the estimated execution mode was Batch (for estimated plans).
Parallel Icon The node was executed in parallel.
Warning Icon There are one or more warnings on the node.

All icons are adapted from the Fat Cow Farm Fresh web icons pack, which can be found at http://www.fatcow.com/free-icons.

Building

Run the following commands in bash to output minified and unminified versions in the dist folder:

npm run webpack && NODE_ENV=production npm run webpack

Sponsor

A big thankyou to Brent Ozar Unlimited (who make Paste The Plan) for sponsoring development of html-query-plan.

html-query-plan open issues Ask a question     (View All Issues)
  • about 4 years Make connecting lines into arrows
  • about 4 years Support for StmtCursor and CursorPlan
  • about 4 years Tooltip clipped if shown inside scrollable container
  • about 4 years Ability to compare two plans - feature
  • about 4 years Variable thickness for connecting lines
  • about 4 years Tooltips for connecting lines
  • over 3 years Missing "Partition Type"
  • over 3 years Missing "Number of Rows Read" / "Estimated Number of Rows to be Read"
  • over 3 years Missing "Actual Execution Mode" / "Actual Number of Batches"
  • almost 4 years Better separation between statements in a plan
  • almost 4 years Lines overlap
  • about 1 year Percentage shown as 010%
  • over 2 years It is incredibly easy to accidentally cause a tooltip to appear
  • over 2 years Make it easier to annotate tooltip
  • over 2 years View properties displayed in the "properties pane" (in SSMS)
  • over 2 years Make large numbers in tooltip easier to read
  • over 2 years Improve Performance
  • almost 3 years Show query cost relative to batch
  • almost 3 years Preserve query text newlines in tooltip
html-query-plan open pull requests (View All Pulls)
  • Bump lodash from 4.17.15 to 4.17.19
html-query-plan list of languages used
html-query-plan latest release notes
v2.6 v2.6 - "The one with the icons"

This release adds a small lightning indicator (Lightning) to batch mode operators.

This release also adds icons for a number of operators that were previously shown as a generic grey square, or had no icon at all.

List of all issues included in this release:

  • #75 - Icons for all operators
  • #83 - Add visual indicator for batch mode operators
  • Fix #82 - Columnstore Index operations shown as Clustered Index operations
v2.5.1 v2.5.1 - "The one with the lines"

The bulk of changes in this release have been to the lines which now vary in thickness based on the number of rows, and are no longer overlapped:

Screenshot of lines

Nodes are also aligned vertically to avoid kinks in arrows between nodes at the same level:

Version 2.4 image

Version 2.5 image

Other changes in this release:

  • #71 - There is now an npm package
  • Fix #74 - Estimated Operator Cost missing from tooltip
  • Fix #73 - Actual Number of Rows missing from tooltip

(The version number is 2.5.1 because the wrong version got pushed to npm)

2.4 2.4

Highlights of this release:

Warnings

Warning icons are now shown on icons that have warnings, with the details available in the tooltips.

image

Parallel Icons

Icons are now shown on nodes that are parallel (#57).

image

The complete list of changes included in this release can be found in the 2.4 Milestone.

Other projects in XSLT
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark