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.

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.

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

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.