ImJoyGridDemo.imjoy.html

<config lang="json">
{
 "name": "ImJoyGridDemo",
 "type": "native-python",
 "editor_height": "400px",
 "lang": "python",
 "api_version": "0.1.8",
 "description": "A demo plugin to show case ImJoy Grid with vizarr, folder tree and schema form.",
 "tags": [],
 "version": "0.1.1",
 "ui": "",
 "cover": "",
 "icon": "extension",
 "inputs": null,
 "outputs": null,
 "env": "",
 "permissions": [],
 "requirements": [],
 "dependencies": []
}
</config>
<script lang="python">
from imjoy import api

class ImJoyPlugin():
    async def setup(self):
        pass
    
    async def add_image_viewer(self, grid):
        # create a window
        self.viewer = await grid.createWindow(src="https://hms-dbmi.github.io/vizarr", w=7,h=4, x=3, y=0, hide_title_bar=True, menu_button_location="upper-right")

        async def on_image_click(info):
            api.alert(info)

        self.viewer.add_image({"source": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr", "name": "idr0053"})
    
    async def add_file_tree(self, grid):
        # images are from OME: https://blog.openmicroscopy.org/file-formats/community/2020/11/04/zarr-data/
        sources = {
            "idr0053": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr",
            "idr0062": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001240.zarr",
            "idr0062-1": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001240.zarr",
            "idr0062-2": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001241.zarr",
            "idr0062-3": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001243.zarr",
            "idr0077": "https://s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836839.zarr"
        }
        async def node_dbclick_callback(node):
            self.viewer.add_image({"source": sources[node['title']], "name": node['title']})

        await grid.createWindow(type="imjoy/tree", w=3, x=0, y=0, h=2, hide_title_bar=True, config={
            "_rintf": True,
            "type": "tree",
            "name": "Example Zarr Files",
            "node_dbclick_callback": node_dbclick_callback,
            "nodes": [
                {"title": 'idr0077', "isLeaf": True},
                {"title": 'idr0053', "isLeaf": True},
                {"title": 'idr0062', "isExpanded": True,
                    "children": [
                        {"title": 'idr0062-1', "isLeaf": True},
                        {"title": 'idr0062-2', "isLeaf": True},
                        {"title": 'idr0062-3', "isLeaf": True},
                    ]
                }
            ],
        })
    
    async def add_schema_form(self, grid):
        schemaio = await grid.createWindow(name='DeepBindScan', type='imjoy/schema-io', w=3, x=0, y=2, h=2, hide_title_bar=True,data={})

        # prepare a schema for the form
        schema = {
            "fields": [
                {
                    "type": "select",
                    "label": "Model Type",
                    "model": "modelType",
                    "values": ["all species", "Homo_sapiens", "Danio_rerio"] 
                },
                {
                    "type": "input",
                    "inputType": "text",
                    "label": "Input Sequence",
                    "model": "DNA"
                }
            ]
        }

        # prepare a callback function
        async def callback(results):
            await api.alert(str(results))

        # generate the form
        await schemaio.append({
            "type": "form",
            "schema": schema,
            "model": {
                "DNA": "GGAGGCGGGAAGATGGAGGCGGTAGCTGTCACTAGGTTGGGGTTCTCC",
                "modelType": "all species"
            },
            "callback": callback,
            "id": 0,
            "_rintf": True
        })

    async def run(self, ctx):
        # create a grid container
        grid = await api.createWindow(src="https://grid.imjoy.io/#/app", config={"verticalCompact": False, "colNum": 10, "rowHeight": 120})
        await self.add_image_viewer(grid)
        await self.add_file_tree(grid)
        await self.add_schema_form(grid)

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