Html Query Plan

screenshot of Html Query Plan

Display SQL Server Execution Plans in HTML

Overview

The html-query-plan is an innovative JavaScript library designed to present Microsoft SQL Server execution plans in a user-friendly HTML format. This tool streamlines the process of analyzing SQL queries, allowing developers and database administrators to visualize execution plans efficiently. With its straightforward implementation and modern browser compatibility, html-query-plan has quickly become an invaluable resource for anyone working with SQL Server.

What sets this library apart is its combination of ease of use and rich features. With just a few lines of code, users can display execution plans, enhancing their ability to optimize SQL queries and troubleshoot performance issues. Its integration of tooltips, iconography, and customizable options further enhance the overall user experience.

Features

  • Simple Integration: Easily include qp.css and qp.min.js in your web page, and call QP.showPlan to display execution plans with minimal setup.
  • Customizable Options: Pass additional parameters in the third argument to tailor the visualization to your needs, such as toggling tooltips.
  • XSLT Support: Utilize the underlying XSLT 1.0 stylesheet for pre-rendering plans, with JavaScript still employed for connecting visuals.
  • Broad Browser Compatibility: Works seamlessly in modern browsers including Chrome, Firefox, and Internet Explorer 9+, ensuring accessibility for most users.
  • Intuitive Iconography: Understand plan execution at a glance with meaningful icons representing execution modes, parallel execution, and warning alerts.
  • Community Sponsored: Developed with support from Brent Ozar Unlimited, ensuring ongoing improvements and reliability of the library.
  • Minification Options: Easily generate both minified and unminified versions of the library through simple bash commands for optimal performance.
typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.