Plot Compare
A VSCode extension that registers two or more directory roots and lets you compare equivalent plots (PNG, JPG, SVG, PDF) side-by-side in a single webview.
Two plots are "equivalent" if they share the same path relative to their root (after optional per-root filename normalisation — see "Strip patterns" below). For example, if you register runA/ and runB/, opening runA/plots/roc.png will tile runA/plots/roc.png and runB/plots/roc.png next to each other.
Strip patterns (v0.1)
Plots produced by the same pipeline often embed the run name into filenames — e.g. blue/fight/blue_body_landed.png vs red/fight/red_body_landed.png. Without help, these would be treated as different files. Each registered root has an optional strip pattern: a regex applied to filename basenames before cross-root matching.
When a root is added, a sensible default is applied automatically: ^<rootBasename>[_-]. So adding …/fighter/blue strips a leading blue_ or blue- from every filename, and adding …/fighter/red strips a leading red_ / red-. Both blue_body_landed.png and red_body_landed.png collapse to the canonical key body_landed.png, and the two plots are paired.
If your filenames don't carry a run-name prefix, the default pattern simply won't match anything, and behaviour is unchanged.
To override the pattern: right-click a root in the sidebar → "Set Strip Pattern…". Enter a JavaScript regex, or leave the field empty to disable stripping. Tile labels in the comparison view show each tile's actual filename so you can verify the matching is right.
Features
- Sidebar view (activity bar icon). Shows registered roots and the union of plot paths across them. Click a leaf to open the comparison view.
- Right-click any folder in the file explorer → "PlotCompare: Add as root".
- Right-click any plot file (
.png/.jpg/.jpeg/.svg/.pdf) under a registered root → "PlotCompare: Open equivalents".
- Side-by-side webview using a CSS-grid
auto-fit layout — 2 roots → 2 columns, 3 → 3, etc.
- Missing equivalents are shown as
(missing in <root>) placeholder tiles.
- PDF support via bundled
pdfjs-dist (renders the first page).
- Roots persist in workspace state across reloads.
Develop
cd plot-compare
npm install
npm run compile # tsc -> out/
Then, in VSCode, open this folder and press F5 to launch a development host with the extension loaded.
Install (end users)
cd plot-compare
npm install
npm run compile
npx vsce package # produces plot-compare-0.1.0.vsix
code --install-extension plot-compare-0.1.0.vsix
Usage
- Click the Plot Compare icon in the activity bar.
- Click the
+ button to add a directory as a root, or right-click any folder in the file explorer and choose "PlotCompare: Add as root". Repeat for at least two roots.
- Either:
- Expand the Plots section in the sidebar and click any plot to open the comparison.
- Right-click a plot under a registered root in the file explorer and choose "PlotCompare: Open equivalents".
- Use the refresh button on the sidebar title bar after adding new plots on disk (no auto-watch in v0).
Notes / limitations (v0)
- No filesystem watching — use the refresh button after adding/removing plots.
- PDFs render only the first page.
- No synchronised pan/zoom or diff/overlay across tiles.
node_modules, .git, and hidden directories are skipped during the union walk.
File layout
src/
├── extension.ts activate(): registers commands, tree provider, menus
├── roots.ts RootManager: persistence + union walk + equivalents
├── tree.ts PlotTreeProvider — sidebar tree
├── compare.ts ComparePanel — singleton webview
└── webview/
├── index.html.ts HTML/CSS/JS template builder
└── pdf-render.ts pdf.js bundle filenames
media/
└── pdf.worker.min.js Copied at install time by scripts/copy-pdf-worker.js
