VizarrReferenceStore.imjoy.html

<docs>
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "VizarrReferenceStore",
  "type": "web-worker",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "Reading Vizarr using reference store",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": ["https://unpkg.com/zarr@0.4.0/zarr.umd.js"],
  "dependencies": []
}
</config>

<script lang="javascript">

// Using the FileReferenceStore made by Trevor Manz
// https://observablehq.com/d/a417a770860fbb64
class FileReferenceStore {
  constructor(ref, target) {
    this.ref = ref;
    this.target = target;
  }

  _url(urlPath) {
    if(!urlPath){
      return this.target
    }
    const [protocol, path] = urlPath.split('://');
    if (protocol === 'https' || protocol === 'http') {
      return urlPath;
    }
    if (protocol === 'gc') {
      return 'https://storage.googleapis.com/' + path;
    }
    throw Error("Protocol not supported, got: " + JSON.stringify(protocol));
  }

  async getItem(key) {
    const res = this.ref[key];
    if (!res) {
      // Key not in store
      throw new zarr.KeyError(key);
    }
   
    if (res?.length !== 3) {
      // JSON data entry in reference 
      const meta = typeof res === 'string' ? res : JSON.stringify(res)
      const enc = new TextEncoder().encode(meta);
      return enc.buffer;
    }

    const [urlPath, offset, size] = res;
    const url = this._url(urlPath);
    const headers = {
      Range: `bytes=${offset}-${offset + size - 1}`
    };
    const value = await fetch(url, { headers }).then(res => res.arrayBuffer());
    return value;
  }

  containsItem(key) {
    return key in this.ref;
  }

  static async fromUrl(url, targetUrl) {
    const ref = await fetch(url).then(res => res.json());
    return new FileReferenceStore(ref, targetUrl);
  }
}

class ImJoyPlugin {
  async setup() {
    api.log('initialized')
  }

  async run(ctx) {
    const refUrl = 'https://imjoy-s3.pasteur.fr/imjoy/hani-plants/sample_3colors_full/image.ome.tif_offsets.json?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=imjoy%2F20210301%2F%2Fs3%2Faws4_request&X-Amz-Date=20210301T230518Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=425b0b654a9d590a26703538ade4144358510585c6645a7365efe7a955c7d048'
    const targetUrl = 'https://imjoy-s3.pasteur.fr/imjoy/hani-plants/sample_3colors_full/image.ome.tif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=imjoy%2F20210301%2F%2Fs3%2Faws4_request&X-Amz-Date=20210301T230539Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=ef0238dec0ffd60d0bbdd8c85acef677cb2ea3fd184bc9ae0d4a8ea30fc692cb'
    const store = await FileReferenceStore.fromUrl(refUrl, targetUrl);
    const viewer = await api.createWindow({src: 'https://hms-dbmi.github.io/vizarr'})
    const img = { "source": store, "name": "Demo Image"}
    viewer.add_image(img)
    
    // const viewer = await api.createWindow({src: 'http://localhost:8080/'})
    // viewer.setImage(store)
  }
}

api.export(new ImJoyPlugin())
</script>