Free GraphQL Query Cost Complexity & Depth Analyzer

GraphQL Query Complexity & Depth Analyzer Specification

1. Core Objective

Provide a professional, high-performance web tool that allows GraphQL developers to paste raw query strings and immediately receive metrics on query depth and estimated cost complexity. The tool acts as a sandbox for testing query constraints before deploying them to production.

2. Technical Architecture & Constraints

• Single File: All HTML, CSS, and JS must reside in one file. Use a CDN-hosted version of the graphql (js) library for robust AST parsing.
• Storage: Absolutely NO use of localStorage, sessionStorage, or cookies. The state must be transient and memory-based.
• Performance: Asynchronous parsing to ensure the UI remains responsive even with large, complex queries.
• Compatibility: Must function inside a sandboxed iframe. No alert(), confirm(), or prompt().

3. User Interface & Layout

• Header: Minimalist, clean header containing the app title and a brief instructional subtitle.
• Main Editor Section (Split-Pane):
  • Left Panel: A high-quality code editor text area (using a lightweight library like CodeMirror for syntax highlighting) for inputting the GraphQL query and (optionally) the schema.
  • Right Panel (Metrics & Configuration):
    • Config: A set of numeric inputs to define base field weights (e.g., Default Weight, List Weight).
    • Results: A clean dashboard displaying "Total Depth", "Calculated Cost", and "Status" (e.g., Pass/Fail based on a user-defined threshold).
• Visuals: Use a crisp, professional Light Mode color palette. Focus on shades of slate (text), white (background), and a primary accent color (e.g., a professional Indigo or Cerulean) for primary actions.

4. Features

• AST Parsing: Automatically compute max depth and sum of weights based on field selection.
• Configurable Weights: Users can set a multiplier for lists versus single fields.
• Threshold Validation: Allow users to set a 'Max Allowed Depth' and 'Max Allowed Cost'. The UI should highlight in red if the query exceeds these limits, or green if it passes.
• Syntax Verification: Display clear error messages if the GraphQL syntax is invalid, rather than crashing.

5. Aesthetic & Interactions

• Typography: Use a clean, system-font stack or a high-quality sans-serif (e.g., Inter or Geist via CDN).
• Animations: Use CSS transitions (0.2s ease-in-out) for score updates and threshold violations to create a smooth, 'app-like' feel.
• Shadows: Utilize subtle, soft box-shadows to define content sections against a light gray (#F9FAFB) background.

6. Development Directives

• Use target="_blank" rel="noopener noreferrer" for any necessary links.
• Ensure all UI inputs are accessible and mobile-responsive, stacking the editor and metrics panel on smaller viewports.
• Avoid any brand-specific styling or intrusive headers/footers.