HPACellAtlasImages.imjoy.html

<docs>
# HPA Cell Atlas Images

This plugin uses the virtual stack api of ImageJ.JS to display all the HPA Cell Atlas images (v18).
</docs>

<config lang="json">
{
  "name": "HPACellAtlasImages",
  "type": "iframe",
  "tags": [],
  "ui": "",
  "version": "0.1.3",
  "cover": "",
  "description": "Displaying the HPA Cell Atlas images (v18) as a virtual stack in ImageJ.JS",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": ["https://cdn.jsdelivr.net/npm/papaparse@5.2.0/papaparse.min.js"],
  "dependencies": []
}
</config>

<script lang="javascript">
function loadCSV(url) {
  return new Promise((resolve, reject) => {
    Papa.parse(url, {
      download: url.startsWith('http'),
      header: true,
      dynamicTyping: true,
      skipEmptyLines: true,
      error: (err, file, inputElem, reason) => {
        alert("Falied to load the table: " + reason.toString());
        reject(reason);
      },
      complete: (results) => {
        resolve(results.data);
      },
    });
  });
}

let loadImage = function(url, channel) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', function () {
            const canvas = document.createElement('canvas')
            canvas.width = img.width
            canvas.height = img.height
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            const imageData = ctx.getImageData(0, 0, img.width, img.height);
            const rgbaData = imageData.data;  // ArrayBuffer
            // convert RGBA to RGB
            const rgbData = new Uint8Array(new ArrayBuffer(img.height * img.width))
            for (let i = 0; i < img.height; i++) {
                for (let j = 0; j < img.width; j++) {
                    const pos = i * img.width + j;
                    rgbData[pos] = rgbaData[pos * 4 + channel]
                }
            }
            resolve([rgbData, img.height, img.width]);
        }, false);
        img.crossOrigin = "anonymous";
        img.src = url;
    });
}
class ImJoyPlugin {
  async setup() {
    await this.showHPAImage();
  }
  
  async run(ctx) {
    await this.showHPAImage();
  }
  async showHPAImage() {
    const csvURL = "https://dl.dropbox.com/s/k9ekd4ff3fyjbfk/umap_results_fit_all_transform_all_sorted_20190422.csv"
    let table = await loadCSV(csvURL);
    table = table.filter(item=> !item.id.includes('-'))
    let ij = await api.getWindow("ImageJ.JS");
    if(!ij) ij = await api.createWindow({src: "https://ij.imjoy.io", name: "ImageJ.JS"});
    await ij.openVirtualStack({
        _rintf: true, // make sure getSlice can be called multiple times
        name: 'HPA Cell Atlas Images',
        dtype: "uint8",
        width: 2048,
        height: 2048,
        nSlice: 3*table.length,
        async getSlice(index) {
            const idx = parseInt(index/3);
            const ch = index % 3;
            const id = table[idx].id;
            // construct the image url
            const url = 'https://images.proteinatlas.org/' + id.split('_')[0] + '/' + id.split('_')[1] +'_' + id.split('_')[2] + '_'+ id.split('_')[3] + '_blue_red_green.jpg'
            const [rgbImage, height, width] = await loadImage(url, ch);
            return rgbImage
        }
    })
    // convert to a virtual stack
    await ij.runMacro(`run("Stack to Hyperstack...", "order=xyczt(default) channels=3 slices=${table.length} frames=1 display=Color");`)
    
  }
}

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