HPA-UMAP-Studio.imjoy.html

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

<config lang="json">
{
  "name": "HPA-UMAP-Studio",
  "type": "web-worker",
  "tags": [],
  "ui": "",
  "version": "0.1.3",
  "cover": "",
  "description": "Displaying the HPA UMAP with the ImJoy Chart Editor",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": [],
  "dependencies": []
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    api.log('initialized')
  }
  async run(ctx) {
    const csvURL = ctx.data && typeof ctx.data ==='string' && ctx.data || "https://dl.dropbox.com/s/k9ekd4ff3fyjbfk/umap_results_fit_all_transform_all_sorted_20190422.csv"
    const editor = await api.createWindow({src: 'https://chart.imjoy.io', name: 'HPA UMAP Studio', fullscreen: true})
    await editor.loadDataSource(csvURL)
    await editor.addWidget({
        type:'html',
        name: 'Details',
        body: ''
    })
    await editor.addWidget({
        type:'html',
        name: 'Overview',
        body: ''
    })

    await editor.addListener({_rintf: true, event:'plotly_hover', callback: async (points)=>{
        const metadata = points[0].customdata;
        const id = metadata.id
        const image_base_url = id.includes('_')?'https://images.proteinatlas.org/' + id.split('_')[0] + '/' + id.split('_')[1] +'_' + id.split('_')[2] + '_'+ id.split('_')[3] : null
        const thumbnail_url = image_base_url && image_base_url + '_blue_red_green_yellow_thumb.jpg'
        await editor.updateWidget({
            type:'html',
            name: 'Overview',
            body: `<p>Gene: ${metadata.gene}</p> <p>Location: ${metadata.location}</p> <br> <img style="width:100px" src="${thumbnail_url}"></img>`
        })
    }})

    await editor.addListener({_rintf: true, event:'plotly_click', callback: async (points)=>{
        const metadata = points[0].customdata;
        const id = metadata.id
        const image_base_url = id.includes('_')?'https://images.proteinatlas.org/' + id.split('_')[0] + '/' + id.split('_')[1] +'_' + id.split('_')[2] + '_'+ id.split('_')[3] : ''
        const full_url = image_base_url + '_blue_red_green.jpg'
        await editor.updateWidget({
            type:'html',
            name: 'Details',
            body: `<p>ID: ${metadata.id}</p> <p>Gene: ${metadata.gene}</p> <p>Location: ${metadata.location}</p> <br> <a target="_blank" href="${full_url}"><img style="width:100%" src="${full_url}"></img></a>
<br><a target="_blank" href="https://www.proteinatlas.org/${metadata.gene_ensembl_id}-${metadata.gene}/cell/">Open HPA Page</a>`
        })
    }})
  }
}

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