Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Aug 18, 2025

This PR implements image zoom functionality for VS Code Jupyter notebooks, providing the same user experience as Jupyter's double-click image enlargement feature.

Problem

Users reported that unlike standard Jupyter, double-clicking on images in VS Code notebooks does not enlarge them, making it difficult to examine image details in notebook outputs.

Solution

Added a new command jupyter.openImageInPlotViewer with Ctrl+Shift+I keyboard shortcut that opens any image output from the current notebook cell in the existing plot viewer with zoom and pan capabilities.

Key Changes

Extended Image Format Support

  • Modified translateDisplayDataOutput() to enable plot viewer access for ALL image formats (previously only SVG/PNG)
  • Updated PlotViewHandler.openPlot() to support JPEG, GIF, WebP in addition to SVG/PNG
  • Added universal convertImageToSvg() function that wraps any image format in SVG for plot viewer compatibility

New Command Infrastructure

  • Added PlotViewCommandRegistry with proper dependency injection
  • Registered command in both Node.js and Web service registries for cross-platform support
  • Intelligent cell detection that automatically finds image outputs in current/selected cell
  • User-friendly error messages when no cell or images are found

User Experience

Before: No easy way to zoom images in notebook outputs
After: Press Ctrl+Shift+I to zoom any image in the current cell

Usage

  1. Execute notebook cell with image output (matplotlib plot, PIL image, etc.)
  2. Select the cell containing the image
  3. Press Ctrl+Shift+I or run "Open Image in Plot Viewer" from Command Palette
  4. Image opens in dedicated viewer with zoom/pan controls powered by react-svg-pan-zoom

Testing

  • Added comprehensive unit tests with 100% pass rate
  • Verified backward compatibility with existing plot viewer functionality
  • Validated support for all image formats (PNG, JPG, JPEG, GIF, WebP, SVG)
  • All existing tests continue to pass

Fixes #16907.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Add image zoom feature in Notebook. Add image zoom feature for notebook outputs with keyboard shortcut Aug 18, 2025
Copilot AI requested a review from DonJayamanne August 18, 2025 12:56
Copilot finished work on behalf of DonJayamanne August 18, 2025 12:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add image zoom feature in Notebook.

2 participants