Graphic Walker VS Code Extension

Explore CSV, Parquet, SQLite, and HDF5 data files in Visual Studio Code with integrated Graphic Walker visualization.

Features

• Direct file review: Right-click any supported data file and select "Review in Graphic Walker"
• File picker: Use Graphic Walker: Open Data File command to browse and select files (Ctrl/Cmd+Shift+G)
• Dataset explorer: Browse available datasets/tables within files
• Interactive visualization: Embedded Graphic Walker for data exploration with automatic theme detection
• Column statistics: View row count, column types, and null values in the sidebar
• Smart CSV parsing: Automatic delimiter detection (comma, semicolon, tab, pipe)
• File size warnings: Pre-load notifications when opening large files
• Reload capability: Refresh current file to see changes
• Support for: CSV, Parquet, SQLite, HDF5 formats

Current status

• ✅ Command Graphic Walker: Open Data File with keyboard shortcut (Ctrl/Cmd+Shift+G)
• ✅ Context menu command Review in Graphic Walker on supported data files
• ✅ File picker with support for: csv, parquet, sqlite, h5/hdf5
• ✅ Dataset explorer UI + table preview UI
• ✅ CSV loader with automatic delimiter detection (comma, semicolon, tab, pipe)
• ✅ SQLite loader implemented with table discovery + preview (via sql.js WASM)
• ✅ Parquet loader implemented with metadata + preview (via hyparquet)
• ✅ HDF5 loader implemented with dataset traversal + preview (via h5wasm)
• ✅ Graphic Walker visualization embedded in webview (UMD runtime)
• ✅ Automatic theme detection and live updates
• ✅ File size warnings before loading large files
• ✅ Column statistics display (row count, types, nulls)
• ✅ Reload functionality for current file
• ✅ Enhanced error messages with actionable guidance

Usage

Method 1: Context Menu (Recommended)

1. Right-click a data file (CSV, Parquet, SQLite, or HDF5) in the file explorer
2. Select "Review in Graphic Walker"
3. The file opens directly in the Graphic Walker panel

Method 2: Command Palette

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run "Graphic Walker: Open Data File"
3. Select a supported data file
4. Explore datasets and preview table rows in the panel

Keyboard Shortcut

• Press Ctrl+Shift+G (Windows/Linux) or Cmd+Shift+G (Mac) to quickly open the file picker

Configuration

Theme

The visualization theme automatically matches your VS Code theme - no configuration needed!

• Light theme → Light visualization
• Dark theme → Dark visualization
• High Contrast → Dark visualization

To change themes:

1. Open Command Palette (Ctrl/Cmd+Shift+P)
2. Select "Preferences: Color Theme" (or press Ctrl/Cmd+K Ctrl/Cmd+T)
3. Choose your preferred theme
4. Graphic Walker updates automatically

Settings

The extension provides the following setting:

graphicWalker.maxFileSizeMB

Maximum file size limit in megabytes (default: 50 MB, range: 1-1024)

How it works:

• CSV, Parquet, HDF5: Files larger than the limit are partially loaded (first X MB only)
• SQLite: Files larger than the limit cannot be loaded (SQLite requires complete loading)
• Set to 0: Removes size limit for CSV/Parquet/HDF5 (use cautiously)

To change:

1. Via Settings UI:

   • Open Settings (Ctrl/Cmd+,)
   • Search for "Graphic Walker"
   • Adjust the "Max File Size MB" value

2. Via settings.json:

   {
     "graphicWalker.maxFileSizeMB": 100
   }
   

3. Via warning dialog:

   • When opening a large file, click "Change Setting" in the warning dialog

Additional Features

• Reload Button: Click "Reload" in the toolbar to refresh the current file
• Column Statistics: View row counts, column types, and null values in the sidebar
• CSV Delimiter Detection: Automatically detects comma, semicolon, tab, or pipe delimiters
• File Size Display: See file size in the status bar after loading

Development

npm install
npm run compile

Then press F5 in VS Code to run the Extension Development Host.

Next implementation targets

1. Improve field typing inference passed to Graphic Walker for better defaults.