Trouble creating Zarr pyramid for use with @carbonplan/maps

[pratham-aggr]

Hi CarbonPlan team,
I’ve been experimenting with using @carbonplan/maps and had success running the demo after cloning the repo. However, when I try to swap out the dataset, specifically using a CMIP6 dataset hosted on the Google Cloud bucket, things break down.

I suspect the issue might be related to Zarr v3 compatibility or some post-processing steps (like those in the CMIP6 downscaled data explorer) that I might be missing.

Would you happen to have a minimal example or some guidance on how to create a compatible Zarr pyramid that works with the mapping library?

Thanks in advance, really appreciate the tools you’ve built!

[norlandrhagen]

Hey there @pratham-aggr, thanks for the kind words.

Do you mind expanding on things break down.?

carbonplan/maps is reliant on multi-scale (or pyramid) Zarr stores. Were you able to create pyramids successfully with ndpyramid?

cc @katamartin

[pratham-aggr]

Sure!
unzlibSync is not a function. (In 'unzlibSync(chunk)', 'unzlibSync' is undefined)

I'm generating a multilevel Zarr pyramid of CMIP6 data using pyramid_regrid in Python with xarray:

ds = xr.open_zarr('gs://cmip6/CMIP6/ScenarioMIP/IPSL/IPSL-CM6A-LR/ssp245/r1i1p1f1/Amon/pr/gr/v20190119', decode_cf=False)
ds = ds.rio.write_crs("EPSG:4326")

levels = 2
regridded_pyramid = pyramid_regrid(ds.isel(time=slice(0,10)), levels=levels, method="bilinear", parallel_weights=False)
regridded_pyramid.to_zarr("public/data/regridded.zarr", consolidated=True, mode="w")

When I try to load this pyramid Zarr in a React app using the CarbonPlan component pointing to the local zarr URL, I get:

unzlibSync is not a function. (In 'unzlibSync(chunk)', 'unzlibSync' is undefined)

The frontend is using CarbonPlan React components for visualization.
The error suggests missing decompression support for zlib chunks in the browser
Fflate is installed

This is what I am doing.

[katamartin]

Hi @pratham-aggr -- that's curious! The unzlibSync is not a function. (In 'unzlibSync(chunk)', 'unzlibSync' is undefined) error you're getting is being thrown by JavaScript, which makes it sound like something about your frontend build is not working as expected, rather than on the data generation side. The unzlibSync import is pretty straightforward in the upstream zarr-js dependency, so it's not obvious to me that this would be related to using v3 data.

If you run npm list fflate in the console, do you get something similar to this result I got in the demo?

maps-demo@1.0.0
└─┬ @carbonplan/maps@3.4.1
  └─┬ zarr-js@3.3.0
    └── fflate@0.7.4

Happy to take a closer look if you have a pointer to the frontend code you're using!