Interactive Query Plan Visualization

A visualization tool for exploring SQL query execution plans using Icicle Plots. This tool addresses the limitations of traditional node-link diagrams by providing a space-efficient, interactive interface that makes it easier to identify performance bottlenecks, redundancy, and optimizer estimation errors in large query plans.

Features

• Icicle Plot Visualization: Uses space-filling logic to represent query trees, eliminating whitespace and reducing the need for panning/zooming.
• Dual Encoding:
  • Width: Visualize metrics like Subtree Cost, Subtree Time, or Subtree Size.
  • Color: Highlight operators by Estimated Cost, Actual Time, Operator Type, or difference between any two metrics.
• Coordinated Views: Includes a traditional Node-Link view that stays in sync with the Icicle plot for users familiar with standard tools.
• Interactive Drill-Down: Click any node to focus on its specific subtree and access path.
• Supported Formats: Currently supports execution plans from Microsoft SQL Server and PostgreSQL.

Demo Video

For a walkthrough of the interface and workflows, watch the demo video:

Setup & Installation

This is a client-side web application built with vanilla JavaScript, HTML, and CSS. No complex build process or package manager (npm/yarn) is required.

Run Locally

1. Clone the repository:

   git clone https://github.com/mk3-20/interactive-query-plan-vis.git

2. Navigate to the project directory:

   cd interactive-query-plan-vis

3. Start a simple local HTTP server:
   • Python 3:

     python -m http.server 8080

   • Node.js (http-server):

     npx http-server

4. Open your browser and visit: http://localhost:8080 or http://127.0.0.1:8080/

Usage

1. Launch the Tool: Open the interface in your web browser.
2. Upload a Plan: You can open a plan in two ways:
   • Drag & Drop: Simply drag a .sqlplan (SQL Server) or .json / .csv (PostgreSQL) file directly onto the window to open it in a new tab.
   • Manual Selection: Open a new tab within the interface and select a file from your local storage.
3. Analyze:
   • Identify Bottlenecks: Set Color By to metrics like "Cost (Est.)" or "Time (Actual)" to instantly spot high-cost nodes based on the active color map intensity.
   • Spot Redundancy: Set Size By to "Subtree Cost" and Color By to "Operator" to find symmetrical visual patterns that may indicate redundant operations.
   • Check Estimates (Difference Mode): Use the Difference toggle to color nodes by the divergence between two metrics (e.g., Estimated Cost vs. Actual Time). The color scale (ranging from -1 to 1) allows you to visualize where the optimizer underestimated or overestimated performance.

Live URL

Check out the hosted version here: https://mk3-20.github.io/interactive-query-plan-vis/

Authors

• Mukund Kukreja
• Jaydip Mokariya
• Vijay Natarajan
• Harish Doraiswamy