Web

VueJS

To create a web page capable of accessing the Zarr data in the cloud we will utilize VueJS. The Vue CLI will help bootstrap the creation of a new project.

• https://cli.vuejs.org/guide/creating-a-project.html

Using NPM, install the Vue CLI:

npm install -g @vue/cli @vue/cli-service-global

And then to create a new project:

vue create zarr-test

ZarrJS

We use the Zarr.js typescript library to directly access our data living in the Amazon S3 Zarr store

• https://github.com/gzuidhof/zarr.js/

• http://guido.io/zarr.js/#/getting-started/remote-data?id=remote-datasets-docsify-ignore

The HTML code used to remotely access the Zarr store:

<template>
    <div class="zarr-test">
    </div>
</template>

<script>
import { openArray, slice } from "zarr";

const BUCKET_URL = "https://cires.s3-us-west-2.amazonaws.com/version2"

export default {
    name: 'zarr-test',
    data() {
        return {
            zarr: null,
            dimension: null,
            zarrData: null,
        }
    },
    created () {
        const response = this.getZarr().then(data => {
            this.zarr = data;
        });
        console.log(response);
    },
    methods : {
        getZarr : async() => {
            return openArray({ store: BUCKET_URL, path: "/gu1002", mode: "r" });
        }
    },
    watch: {
        zarr: function (val) {
            this.dimension = val.meta.shape
            this.zarr.get([0, 1, slice(null)]).then(d => {
                this.zarrData = d
                console.log(d.data);
            });
            // const chunk = this.getZarrData();
            // console.log(chunk.shape)
        },
    }
}
</script>

<style></style>

Running the Example

vue run serve