Welcome to the world of html-query-plan, a JavaScript library designed to showcase Microsoft SQL Server execution plans in a stylish and interactive HTML format. In this guide, we’ll walk you through the process of integrating this tool into your web applications, ensuring you have a seamless experience visualizing your SQL execution plans.

Getting Started

Before diving into the nitty-gritty, let’s outline the steps you’ll need to take to integrate html-query-plan into your project:

• Find the latest release here.
• Include the necessary files qp.css and qp.min.js in your web page.
• Call QP.showPlan, passing the container element and your query plan XML as a string.

Basic Implementation

Here’s how to implement the basic setup. Suppose you have a container where you want the execution plan to be displayed:

<div id="container"></div>
<script>
    QP.showPlan(document.getElementById("container"), "ShowPlanXML...");
</script>

Customizing Your Experience

To make your execution plans even more informative, you can customize your options by passing a third argument with your preferences. For instance:

<div id="container"></div>
<script>
    var options = {
        jsTooltips: false
    };
    QP.showPlan(document.getElementById("container"), "ShowPlanXML...", options);
</script>

In this scenario, setting jsTooltips to false enables CSS tooltips instead of the default JavaScript tooltips.

Advanced Rendering with XSLT

If you want to take it a step further by using XSLT separately, you can pre-render the HTML output using qp.xslt. Here’s how:

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

Browser Compatibility

Do not fret about browser issues! html-query-plan works smoothly across modern browsers, including Chrome, Firefox, and Internet Explorer 9+. However, keep in mind that Internet Explorer 8 and earlier versions have known compatibility issues.

Understanding Icons

When visualizing an execution plan, you may encounter various overlay icons on the nodes. Here’s what they mean:

• Batch Icon: Indicates that the execution mode was Batch.
• Parallel Icon: Signifies that the node was executed in parallel.
• Warning Icon: Indicates one or more warnings are associated with the node.

These icons help in quickly understanding the complexities of the execution plan, as they draw attention to critical information.

Troubleshooting

In case you encounter some hiccups during your setup or usage of html-query-plan, here are a few troubleshooting tips:

• Ensure the paths to qp.css and qp.min.js are correctly specified in your HTML file.
• Double-check that the query plan XML string is valid and correctly formatted.
• If you’re experiencing issues with the rendering, verify that your browser supports the library’s requirements.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Building the Library

If you need to build the library yourself, you can run the following commands in bash to generate both minified and unminified versions in the dist folder:

npm run webpack
NODE_ENV=production npm run webpack

Final Thoughts

With html-query-plan, visualizing SQL Server execution plans becomes an interactive and insightful task. The ability to customize the display enhances the usability of this tool.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.