DS Visualizer

DS Visualizer is a VS Code extension that renders output-first data structure snapshots in a persistent side panel.

This implementation phase moves away from operation playback and focuses on final structure views.

What It Does Now

• Uses a dedicated Panel container (DS Visualizer) with an Output webview.
• Renders final output structures in a split layout:
  • Input summary (mode, language, confidence, notes)
  • Output structure cards
• Supports two input paths:
  • Pattern-based code extraction (python, java, cpp, c) using best-effort adapters.
  • Fallback DSL parser for @ds blocks.
• Auto-refreshes on active editor switch and file save.
• Includes manual refresh action in the view title and command palette.
• Links visualized array elements, container entries, tree nodes, and graph edges to their inferred source lines. Click a visual item to jump to its code; selecting its source line highlights the item and opens its card.

Commands

• dsVisualizer.start -> DS Visualizer: Start
• dsVisualizer.refresh -> DS Visualizer: Refresh Output

Current Structure Coverage

Rendered snapshot kinds currently implemented:

• Linear structures: array, stack, queue, deque, linked-list, doubly-linked-list, circular-linked-list
• hash-table
• map
• binary-tree
• binary-search-tree
• graph
• weighted-graph
• disjoint-set

Notes:

• Code extraction is best effort and intentionally tolerant.
• Complex control flow may lead to partial visualization with medium/low confidence.
• Snapshots are inferred from source text; the extension does not execute code or inspect runtime state.
• To keep the editor responsive, analysis rejects files over 1,000,000 characters, array indices above 10,000, loop expansions above 20,000 lines, and trees with more than 2,000 insertions. The panel explains when a limit is reached.
• Graphs above 120 nodes or 500 edges and trees deeper than 12 levels or larger than 500 nodes are not drawn.

Quick Test (Code Parsing)

Python sample

stack = []
stack.append(10)
stack.append(20)
stack.pop()

queue = []
queue.append(1)
queue.append(2)
queue.pop(0)

table = {}
table["x"] = 10
table["y"] = 22

union(1, 2)
union(2, 3)
union(10, 11)

Java sample

import java.util.*;

Stack<Integer> st = new Stack<>();
st.push(7);
st.push(9);
st.pop();

Queue<Integer> q = new LinkedList<>();
q.offer(5);
q.offer(6);
q.poll();

HashMap<String, Integer> map = new HashMap<>();
map.put("a", 1);
map.put("b", 2);

union(4, 5);
union(5, 8);

C++ sample

#include <stack>
#include <queue>
#include <unordered_map>
using namespace std;

stack<int> st;
st.push(3);
st.push(8);
st.pop();

queue<int> q;
q.push(11);
q.push(12);
q.pop();

unordered_map<string, int> mp;
mp.insert({"k1", 1});
mp.insert({"k2", 2});

union(100, 200);
union(200, 300);

Additional C++ extraction support:

• vector<T> name; declarations are treated as array snapshots.
• Simple counted loops like for (int i = 0; i < N; i++) { name.push_back(i); } are expanded for visualization so concrete values are shown.
• Manual binary-tree node assignment patterns like root->left = new TreeNode(value) are detected as binary-tree.
• Function-style BST insert patterns like root = insertBST(root, value) are detected as binary-search-tree.
• Graph adjacency-list patterns are detected from declarations like vector<vector<int>> graph(n) with edges from graph[u].push_back(v).
• Weighted graph adjacency-list patterns are detected from declarations like vector<vector<pair<int,int>>> wgraph(n) with edges from wgraph[u].push_back({v, w}).
• Java adjacency-list patterns are detected from List<List<Integer>> graph with edges from graph.get(u).add(v).
• Java weighted graph patterns are detected from List<List<int[]>> wgraph with edges from wgraph.get(u).add(new int[] {v, w}).
• Python adjacency-list patterns are detected from graph = [[] for _ in range(n)] with edges from graph[u].append(v).
• Python weighted graph patterns are detected from wgraph = [[] for _ in range(n)] with edges from wgraph[u].append((v, w)).
• Graph cards now use a deterministic force-directed layout to reduce node overlap in dense snapshots.
• Reciprocal directed edges with different weights are rendered as separate curved edges for readability.
• Long weight labels are abbreviated visually (for example 12000 -> 12k) and preserve the full value in tooltip metadata.

Open one of these files and run DS Visualizer: Start.

Strict 9x3 Test Fixtures (Python/Java/C++)

Use these ready-made fixtures to validate all currently rendered structures in strict code mode:

• resources/strict-matrix/python-strict.py
• resources/strict-matrix/java-strict.java
• resources/strict-matrix/cpp-strict.cpp

Each fixture includes examples for:

• array
• stack
• queue
• deque
• linked-list
• doubly-linked-list
• circular-linked-list
• hash-table
• map
• binary-search-tree
• graph
• weighted-graph
• disjoint-set

Fixtures now also include dense graph samples and reciprocal-edge weighted cases to validate overlap handling.

Disjoint-set extraction now accepts union-find style method names such as union, unite, join, and merge when called with two arguments.

DSL Fallback (Still Supported)

@ds stack
push 10
push 20
pop

@ds queue
enqueue 5
enqueue 10
dequeue

@ds array
set 0 10
set 2 50

Run Locally

1. Install dependencies

npm install

2. Compile

npm run compile

Run the automated parser and fixture checks with npm test.

3. Press F5 to launch Extension Development Host.
4. Open any supported file.
5. Run DS Visualizer: Start.
6. Check Panel -> DS Visualizer -> Output.

Project Structure

src/
  extension.ts
  parser.ts
  snapshots.ts
webview/
  index.html
  style.css
  script.js
package.json
tsconfig.json
README.md

Roadmap Direction

• Expand language adapters and supported code patterns.
• Add tree and graph family renderers.
• Keep output-first UX as default with confidence and partial-result hints.