Article: Exploring Scientific Data Files in VS Code with Xarray by etienneschalk · Pull Request #821 · xarray-contrib/xarray.dev

etienneschalk · 2025-12-16T15:57:29Z

Following the comment pydata/xarray#10825 (comment) from @dcherian, I took the opportunity and wrote a blog article presenting the VS Code extension I created, Scientific Data Viewer.

I tried to keep it concise, present what the extension can, but also cannot do, not to oversell it.

Disclaimer: generative AI was used to help me write this article ; english is not my native language. Please feel free to tell me if any sentence can be improved!

netlify · 2025-12-16T15:57:40Z

✅ Deploy Preview for xarraydev ready!

Name	Link
🔨 Latest commit	`82d5210`
🔍 Latest deploy log	https://app.netlify.com/projects/xarraydev/deploys/694181df27b21a0007cdcf0e
😎 Deploy Preview	https://deploy-preview-821--xarraydev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ianhi · 2026-02-06T21:39:10Z

hi @etienneschalk I am going to close and immediately re-open this in order to refresh the build so i can read this for review.

ianhi · 2026-02-06T21:40:37Z

that did not work. when you have a chance would you mind rebasing. that will solve the merge conflict and make the build render so we can look at this the way it was meant to be read

ianhi

Hi @etienneschalk over all this reads nicely and is a neat looking tool! It makes me wish it was available on even more platforms, including my beloved juptyerlab :)

Some minor comments:

some of screenshots seem to use an older version 0.3.0 this is fine if the UI hasn't changed much, but thought i'd point it out
update the date please
You can write the table in markdown instead of HTML if you prefer

Can you update the banner on the main page. Code here:

xarray.dev/src/components/layout.js

Lines 16 to 23 in 5f44c00

    
           const bannerTitle = 'Check out the latest blog post:' 
        
           // The first link will be the main description for the banner 
        
           const bannerDescription = ( 
        
             <Link href='/blog/xarray-napari-plan' fontWeight='medium'> 
        
               {' '} 
        
               {/* Ensure it stands out a bit */} 
        
               Xarray ❤️ napari: A plan for seamless integration 
        
             </Link>

it might be nice to include a small picture up towards the top - it could help the tldr hit a little harder, but not neceessary. Or you can rmeove the TLDR. the problem statement is already quite compelling.

Formats

This is fairly geo focused. does it work well with data from another field (e.g. an ome-zarr? https://idr.github.io/ome-ngff-samples/

src/posts/scientific-data-viewer/index.md

netlify · 2026-02-08T17:29:01Z

✅ Deploy Preview for xarraydev ready!

Name	Link
🔨 Latest commit	`85d0565`
🔍 Latest deploy log	https://app.netlify.com/projects/xarraydev/deploys/6988cacc49dbe10008821aae
😎 Deploy Preview	https://deploy-preview-821--xarraydev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

for more information, see https://pre-commit.ci

etienneschalk · 2026-02-08T17:35:49Z

Hi @ianhi, thanks a lot for your review!

I solved the merge conflict. This was due to an update of the dependencies in yarn.lock. When installing the project to run it on my machine, npm found some vulnerabilties. I ran npm audit fix and npm audit fix --force, which seems to also have updated the yarn.lock file. I had to re-run the commands just now due to vulnerabilities. I do not like using --force commands ; I hope the CI will catch any potential issue.

I also had this error when running npm run dev:

⨯ ERROR: This build is using Turbopack, with a webpack config and no turbopack config.

The solution was:

Adding an empty turbopack config to silence the Next.js 16 Turbopack error. The MDX plugin likely adds a webpack config.

Regarding your comments:

It makes me wish it was available on even more platforms, including my beloved juptyerlab :)

Indeed, having such an extension for opening scientific files on Jupyterlab might be beneficial. I do not use myself this environment often, as I spend most of my time in VSCode. I wonder if some of the code of the current extension might be reusable. When I have more time I should explore this!

My answers to points 1-4:

Good observation. Indeed I made these screenshots a long time ago. The UI did not change a lot since then, so I did not update them. Unless there is a new breaking change, I think keeping the current ones is fine, if it's OK for you.
Done ✅. Updated from 2025-12-16 (initial article writing time) to 2026-02-08 (the day I write this comment)
I used an HTML table because the markdown one does not render, for some reason (cf screenshot below)
Done ✅. I used the same title as the blog post itself: Exploring Scientific Data Files in VS Code with Xarray

it might be nice to include a small picture up towards the top - it could help the tldr hit a little harder, but not neceessary. Or you can rmeove the TLDR. the problem statement is already quite compelling.

I would prefer to keep the TLDR section so that people who don't read articles in entirety but click on them to read the first lines still get some information out of it, if it's OK for you.

Regarding the picture: I added the logo of the extension (it does not take too much place, and fits on one screen with the TLDR section) as well as the download links. So the first screen of reading looks like a "home page".

This is fairly geo focused. does it work well with data from another field (e.g. an ome-zarr? https://idr.github.io/ome-ngff-samples/

When I wrote the extension, my original goal was to be able to open and have an overview of the structure of any file openable by xarray. So if ome-zarr is based on Zarr, and since the extension can open a Zarr store thanks to xarray, I would say it should work in theory. I tried to download a zarr from https://idr.github.io/ome-ngff-samples/ but did not succeed (eg when clicking on BR00109990_C2.zarr I see an error "NoSuchKey"). If you have a sample I can download, I can check (currently the extension can only open Zarr stores stored locally on the filesystem ; it is not possible to do so from remote sources)

If you have any other comment regarding the updated version please tell me!

etienneschalk · 2026-02-08T17:38:37Z

⚠️ The preview home page is working (https://deploy-preview-821--xarraydev.netlify.app/blog) but I noticed the whole blog section is not working https://deploy-preview-821--xarraydev.netlify.app/blog

I will attempt to revert my changes to the dependencies to see if this might help.

etienneschalk · 2026-02-08T17:45:52Z

✔️ After the revert, the preview now works again: https://deploy-preview-821--xarraydev.netlify.app/blog/scientific-data-viewer

ianhi closed this Feb 6, 2026

ianhi reopened this Feb 6, 2026

ianhi reviewed Feb 6, 2026

View reviewed changes

src/posts/scientific-data-viewer/index.md Show resolved Hide resolved

etienneschalk added 7 commits February 8, 2026 17:32

Article: Exploring Scientific Data Files in VS Code with Xarray

c7e917d

Update dependencies

d234f03

bugfix: ERROR: This build is using Turbopack

12ad723

Added link to scientific data viewer article in banner

82aebe2

Updated the writing date of the article

ae17fe0

Added logo, aligned tables and images

727c3ea

Update thanks

291c443

etienneschalk force-pushed the blog-post-scientific-data-viewer branch from 82d5210 to 291c443 Compare February 8, 2026 17:28

[pre-commit.ci] auto fixes from pre-commit.com hooks

07f1e92

for more information, see https://pre-commit.ci

Reverted dependencies updates since the preview was failing

85d0565

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Article: Exploring Scientific Data Files in VS Code with Xarray#821

Article: Exploring Scientific Data Files in VS Code with Xarray#821
etienneschalk wants to merge 9 commits intoxarray-contrib:mainfrom
etienneschalk:blog-post-scientific-data-viewer

etienneschalk commented Dec 16, 2025 •

edited

Loading

Uh oh!

netlify bot commented Dec 16, 2025 •

edited

Loading

Uh oh!

ianhi commented Feb 6, 2026

Uh oh!

ianhi commented Feb 6, 2026

Uh oh!

ianhi left a comment

Uh oh!

Uh oh!

netlify bot commented Feb 8, 2026 •

edited

Loading

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const bannerTitle = 'Check out the latest blog post:'
	// The first link will be the main description for the banner
	const bannerDescription = (
	<Link href='/blog/xarray-napari-plan' fontWeight='medium'>
	{' '}
	{/* Ensure it stands out a bit */}
	Xarray ❤️ napari: A plan for seamless integration
	</Link>

Conversation

etienneschalk commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for xarraydev ready!

Uh oh!

ianhi commented Feb 6, 2026

Uh oh!

ianhi commented Feb 6, 2026

Uh oh!

ianhi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

netlify bot commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for xarraydev ready!

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

etienneschalk commented Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

etienneschalk commented Dec 16, 2025 •

edited

Loading

netlify bot commented Dec 16, 2025 •

edited

Loading

netlify bot commented Feb 8, 2026 •

edited

Loading