Claude excels, Gemini tries, GPT fails :(

CopilotTorturePrompt.md

Implement the following program completley and comprehensively. Meet or exceed the requiremenents. You may want to seperate the implementation into many files.

Overview

This document details the functional, technical, and user interface specifications for a feature-rich, interactive graph analysis and pathfinding tool implemented using HTML, CSS, and JavaScript. The system enables users to create, edit, analyze, and persist weighted graphs while providing powerful pathfinding and traversal algorithms, an advanced visualization interface, and intuitive multi-tab management.

Features Summary

Graph Interaction & Editing

• Interactive SVG-based graph construction and manipulation
• Euclidean distance as default edge weight (with manual overrides)
• Nodes and edges can be added, edited, or removed
• Node dragging and repositioning with live edge updates
• Node grouping (clusters, subgraphs)
• Edge styling (directional, dashed, weighted)
• Custom labels and colors for nodes/edges
• Snap-to-grid toggle for node alignment
• Custom graph background (grid, blank, image)

Algorithms

• Pathfinding:

  • Dijkstra’s Algorithm (single-source shortest paths)
  • A* Algorithm (heuristic-based shortest path)
  • AD* Algorithm (dynamic replanning)

• Traversals:

  • Breadth-First Search (BFS)
  • Depth-First Search (DFS)
  • Step-by-step mode for BFS/DFS with back/next step

• Graph Analysis:

  • Cycle detection
  • Strongly connected components (Tarjan’s algorithm)
  • Euler circuit/path detection
  • Hamiltonian path detection
  • Topological sorting (for DAGs)

• Metrics & Utilities:

  • Degree centrality, betweenness centrality
  • Shortest path tree visualization
  • Minimum Spanning Tree (Kruskal’s and Prim’s)
  • Graph density, clustering coefficient

Visualization & UI

• SVG canvas with zoom and pan (mouse/touch supported)
• Reset view button
• Grid toggle for layout alignment
• Visual feedback for selected/traversed nodes
• Edge arrows for directed graphs
• Animated transitions during traversal
• Live rendering updates during algorithm steps
• Step-through playback controls with adjustable speed
• Exportable graph images (PNG/SVG)
• Real-time statistics panel (nodes, edges, graph properties)

Graph Organization

• Tabbed interface to manage multiple graphs simultaneously
• Rename, duplicate, or close graph tabs
• Save/load graphs to/from localStorage
• Export/import graph JSON
• Auto-save and versioning (per tab)

Data Model

• Nodes: { id, label, x, y, group, color }
• Edges: { id, from, to, weight, directed, label, color, dashed }
• Graph metadata: { name, created, modified, layoutOptions }

Parameter Customization

• Adjustable edge weights (manual override of Euclidean distance)
• Node and edge styling (color, label, size)
• Heuristic function selection for A* (Euclidean, Manhattan, custom)
• Toggle graph directionality (directed vs undirected)
• Toggle multi-edges and self-loops
• Algorithm settings: max steps, pause between steps, backtracking mode

Technical Specifications

Technologies

• HTML5, CSS3 (with Flexbox/Grid, optional Tailwind)
• Vanilla JavaScript (ES6+), optionally using modules
• SVG for dynamic, scalable rendering
• localStorage API for persistence
• Drag-and-drop, gesture support (mobile friendly)
• Optional: Web Workers for algorithm processing (off main thread)

Performance Goals

• Support for graphs with up to 1000 nodes and 2000+ edges
• Efficient rendering updates with virtual DOM or diffing strategy
• Async/paused computation for step-by-step visualizations
• Intelligent caching of results (memoization of recent traversals)

Export & Integration

• Graph export options: JSON, SVG, PNG
• Graph import from JSON, adjacency list, edge list, or matrix format
• Clipboard copy/paste for graph objects

Advanced Features

Visual Layers

• Layering system to group graph components (e.g., base graph, MST overlay, traversal path)
• Toggle visibility of layers

Templates & Presets

• Predefined graph structures: grids, trees, rings, cliques, stars
• Graph generation options (random, complete, sparse, etc.)

Collaboration (Optional/Future Scope)

• Shareable link with encoded graph state
• Multi-user editing with socket-based syncing

Accessibility & UX

• Keyboard navigation and shortcuts (node selection, step traversal)
• High-contrast and colorblind-friendly themes
• ARIA labels and focus management
• Customizable UI layout (side panel vs bottom panel)

Interface Layout

VSCode-Style Resizable Panel Layout

The user interface is inspired by the Visual Studio Code layout and supports resizable and collapsible panels to allow flexible and customizable workflows. The key components of the layout include:

• Top Tab Bar: Contains tabs for each open graph. Tabs can be renamed, closed, duplicated, and saved individually.

• Left Sidebar: Hosts tools for graph editing including node/edge creation, selection, deletion, zoom, and pan. This sidebar is collapsible and resizable vertically and horizontally.

• Main Canvas Area: The central, dominant area of the interface. It displays the SVG canvas for interactive graph visualization. It supports full panning, zooming, and gesture input.

• Right Sidebar: Context-sensitive panel showing:

  • Algorithm controls (e.g. selecting algorithm, start/end nodes, parameters)
  • Traversal options and step controls
  • Node/edge property inspector
  • Graph statistics and metrics

• Bottom Panel: A dockable/resizable area used for logs, algorithm outputs, error messages, and traversal steps. Supports tabbed views to switch between output types.

• Draggable Dividers: Users can resize all panels using draggable splitters. The layout dynamically adjusts and persists panel sizes across sessions.

• Docking and Toggle Options: Each panel can be shown or hidden via toolbar or hotkeys, allowing users to tailor the interface to their workflow.

This layout ensures an efficient, familiar, and user-customizable workspace, ideal for working with multiple complex graphs and tools simultaneously.

Interface Layout Summary

1. Header: Graph name, tab navigation, save/load menu

2. Toolbar: Add Node, Add Edge, Delete, Select Tool, Pan Tool, Reset View, Zoom Controls

3. Side Panel:

   • Algorithm Controls (Select algorithm, start node, end node)
   • Style Customization (Color pickers, size sliders)
   • Properties Inspector (selected node/edge)
   • Traversal Controls (step buttons, play/pause, speed)
   • Graph Stats Panel

4. Main SVG Canvas: Graph visualization with gesture support

5. Footer: Logs, messages, status updates

Interface Layout

VSCode-Style Resizable Panel Layout

The user interface is inspired by the Visual Studio Code layout and supports resizable and collapsible panels to allow flexible and customizable workflows. The key components of the layout include:

Top Tab Bar: Contains tabs for each open graph. Tabs can be renamed, closed, duplicated, and saved individually.

Left Sidebar: Hosts tools for graph editing including node/edge creation, selection, deletion, zoom, and pan. This sidebar is collapsible and resizable vertically and horizontally.

Main Canvas Area: The central, dominant area of the interface. It displays the SVG canvas for interactive graph visualization. It supports full panning, zooming, and gesture input.

Right Sidebar: Context-sensitive panel showing:

Algorithm controls (e.g. selecting algorithm, start/end nodes, parameters)

Traversal options and step controls

Node/edge property inspector

Graph statistics and metrics

Bottom Panel: A dockable/resizable area used for logs, algorithm outputs, error messages, and traversal steps. Supports tabbed views to switch between output types.

Draggable Dividers: Users can resize all panels using draggable splitters. The layout dynamically adjusts and persists panel sizes across sessions.

Docking and Toggle Options: Each panel can be shown or hidden via toolbar or hotkeys, allowing users to tailor the interface to their workflow.

This layout ensures an efficient, familiar, and user-customizable workspace, ideal for working with multiple complex graphs and tools simultaneously.